What does /form-tokens do?

It defines design tokens (color, spacing, type, shadow, radius, animation) mapped to CSS variables and Tailwind.

How do I install /form-tokens?

Install Tonone for Claude Code via tonone.ai/get-started.

AI Design Token System (Tailwind + CSS Variables)

Without design tokens the design lives in static documentation and the code lives wherever someone typed a color value. A redesign means hunting hex codes across the codebase. With tokens, the design lives in semantically-named values that the code consumes; a color change is one variable update.

The /form-tokens skill defines the token system: semantic color tokens (primary, surface, text, border, status), spacing scale, typography tokens, shadow and radius values, animation timing tokens. Maps them to CSS custom properties and Tailwind config so the design and the code stay in sync.

Tonone's /form-tokens skill defines design token systems with semantic naming mapped to CSS variables and Tailwind config.

FormVisual Design

/form-tokens

Defines a complete design token system: semantic color tokens (primary, surface, text, border, status), spacing scale, typography tokens, shadow and radius values, animation timing tokens, and maps them to CSS custom properties and Tailwind configuration. Bridges design decisions to code so both are consistent.

When establishing a design system and need the tok…

FormVisual Design

/form-brand

Creates brand identity foundations: color palette with primary, secondary, and semantic tokens with usage rules; type system with scale, pairing rationale, and line height specifications; iconography style direction; and style guide documentation. Every choice is tied to a brand principle so the reasoning can be applied consistently to new surfaces.

When launching a new product that needs a visual i…

FormVisual Design

/form-component

Produces a component design spec: visual design for all states (default, hover, focus, active, disabled, loading, error, and domain-specific states), interaction behavior and animation, prop definitions with types, accessibility requirements including ARIA attributes, and usage guidelines. Ready for Prism to implement.

When adding a new component to a design system and…

PrismFrontend

/prism-component

Builds a reusable, accessible, typed UI component with every state handled: default, hover, focus, active, disabled, loading, error, and any domain-specific states. Includes prop documentation, usage examples, keyboard interaction patterns, and ARIA attribute coverage.

When adding a new reusable component to a design s…

Install

/form-tokens ships with the Form agent in Tonone for Claude Code.

1. Add to marketplace

$ claude plugin marketplace add tonone-ai/tonone

2. Install Form

$ claude plugin install form@tonone-ai

Frequently asked questions

What does /form-tokens do?: It defines design tokens (color, spacing, type, shadow, radius, animation) mapped to CSS variables and Tailwind.
How do I install /form-tokens?: Install Tonone for Claude Code via tonone.ai/get-started.