Create Color

Visual Output Example

┌─────────────────────────────────────────────────────────────────┐
│  BUTTON COLOR SPECIFICATION                                      │
├─────────────────────────────────────────────────────────────────┤
│                                                                  │
│  ┌─ STATE MATRIX ──────────────────────────────────────────┐    │
│  │                                                          │    │
│  │    Default      Hover        Pressed      Disabled       │    │
│  │  ┌─────────┐  ┌─────────┐  ┌─────────┐  ┌─────────┐     │    │
│  │  │ primary │  │ primary │  │ primary │  │ neutral │     │    │
│  │  │  -500   │  │  -600   │  │  -700   │  │  -200   │     │    │
│  │  │[Button] │  │[Button] │  │[Button] │  │[Button] │     │    │
│  │  │  white  │  │  white  │  │  white  │  │ neutral │     │    │
│  │  │         │  │         │  │         │  │  -400   │     │    │
│  │  └─────────┘  └─────────┘  └─────────┘  └─────────┘     │    │
│  │                                                          │    │
│  └──────────────────────────────────────────────────────────┘    │
│                                                                  │
│  ┌─ TOKEN TABLE ───────────────────────────────────────────┐    │
│  │ Element    │ Default      │ Hover        │ Disabled     │    │
│  │────────────┼──────────────┼──────────────┼──────────────│    │
│  │ Background │ primary-500  │ primary-600  │ neutral-200  │    │
│  │ Label      │ white        │ white        │ neutral-400  │    │
│  │ Icon       │ white        │ white        │ neutral-400  │    │
│  │ Border     │ transparent  │ transparent  │ neutral-300  │    │
│  └──────────────────────────────────────────────────────────┘    │
│                                                                  │
│  ┌─ THEME MODES ───────────────────────────────────────────┐    │
│  │                                                          │    │
│  │       LIGHT MODE              DARK MODE                  │    │
│  │  ┌───────────────────┐   ┌───────────────────┐          │    │
│  │  │ [Default Button]  │   │ [Default Button]  │          │    │
│  │  │ primary-500       │   │ primary-400       │          │    │
│  │  └───────────────────┘   └───────────────────┘          │    │
│  │                                                          │    │
│  └──────────────────────────────────────────────────────────┘    │
│                                                                  │
└─────────────────────────────────────────────────────────────────┘

Pipeline

Extract tokens → Enable hidden toggles → Classify axes → Detect modes → Choose strategy → Render → Validate

Phase 1: Token Extraction

Using Figma MCP:

• Read all fill bindings
• Read stroke bindings
• Read effect bindings
• Extract variable references

Phase 2: Hidden Toggle Enablement

Some color bindings only appear when optional elements are visible:

1. Find all boolean properties
2. Temporarily enable them
3. Extract additional bindings
4. Restore original state

Phase 3: Axis Classification

Determine which variant axes affect color:

• State axis (hover, pressed, disabled) → Always color-relevant
• Variant axis (primary, secondary) → Usually color-relevant
• Size axis → Usually NOT color-relevant

Phase 4: Mode Detection

Identify variable mode collections that affect color:

• Theme modes (light/dark)
• Brand modes
• High contrast modes

Phase 5: Strategy Selection

Strategy A: Sections per variant (≤6 sections)

• When: Few state combinations
• Layout: One section per state

Strategy B: States as columns (>6 sections)

• When: Many combinations
• Layout: Matrix with states as columns

Token Tag Design

Each annotation uses a token tag:

┌──────────────────┐
│ ● primary-500    │ ← Color swatch + token name
└──────────────────┘

• Background: #1E1E1E (dark)
• Text: Token name in code font
• Swatch: Actual color preview
• Arrow: Points to element

Example Prompts

Button with themes:

@create-color https://figma.com/.../Button

States: default, hover, pressed, disabled
Variants: primary, secondary, tertiary
Modes: light, dark

Input field:

@create-color https://figma.com/.../TextField

States: empty, filled, focused, error, disabled
Elements: background, border, label, input text, helper text

Complex card:

@create-color https://figma.com/.../Card

This card has:
- Header with title and subtitle
- Content area
- Footer with actions
- Selection state (highlighted border)
- Hover state (subtle shadow change)

Customization

Focus on specific elements:

Only document the background and text colors, skip borders

Specific states:

Focus on error states across all input components

Include opacity:

Include opacity values where elements use transparency

Troubleshooting

"No tokens found"

• Ensure colors are bound to variables in Figma
• Hard-coded colors won't show token names
• Describe the intended tokens in your prompt

"Missing states"

• States must be variant properties in Figma
• Describe the states you need documented

"Theme modes not detected"

• Variable modes must be set up in Figma
• Specify mode names in your prompt