Skip to main content
F

/form-tokens

FormVisual Design

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.

Install

This skill

Install Form Tokens

1. Add to marketplace

$ claude plugin marketplace add tonone-ai/tonone

2. Install this skill

$ claude plugin install form-tokens@tonone-ai

The agent

Install Form

1. Add to marketplace

$ claude plugin marketplace add tonone-ai/tonone

2. Install Form

$ claude plugin install form@tonone-ai
See all Form skills

Want all 31 agents across both teams?

Full installation guide

Invoke this skill

Command|$ /form-tokens

When to use

When establishing a design system and need the token layer defined before component work starts. When a product uses hardcoded values throughout the codebase and needs to be converted to a token system for consistency and maintainability. When adding dark mode and need semantic tokens to make the implementation manageable.

Deep dive

AI Design Token System (Tailwind + CSS Variables)

Design decisions drift without tokens. /form-tokens defines semantic color, spacing, type, shadow, radius, and animation tokens mapped to CSS vars and Tailwind.

Read the article

More from Form

All Form skills
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…
FormVisual Design

/form-logo

Creates a logo through a structured phase-gate process: brand territory research, strategic direction development presenting multiple positioning options, three distinct visual directions for selection, refinement of the chosen direction, and final SVG delivery with usage guidelines including minimum sizes and clear space rules.

When launching a new product that needs a logo. Wh…

Ready to use Form Tokens?

Get StartedBack to Marketplace