Skip to main content
Color annotation specs document which design tokens are used for backgrounds, text, icons, and state layers across different component states and variants.

​
What you need

  • A Figma link to the component
  • Figma MCP connected (Console MCP with Desktop Bridge, or native Figma MCP)
  • Any additional context about variants, states, or which color modes to include
If your component uses Figma variable modes for color variants (e.g., a “Tag color” collection with Default, Success, Warning modes), mention it in your prompt. The agent checks for these automatically, but calling them out helps.

​
How to use

Reference the skill and paste your Figma link. Include context about states, variants, and variable mode collections for a more complete spec: 
@create-color https://www.figma.com/design/abc123/Components?node-id=100:200

This is a button with enabled, hover, pressed, and disabled states.
Include both Default and Danger variants.

​
What it generates

The agent inspects your component’s fills, strokes, and variables, then maps every color-bearing element to its design token and renders the documentation directly in your Figma file.

​
How the output is organized

The structure depends on your component type:
Components without interactive states (headers, cards, labels) get a single table mapping each element to its token.
Light and dark themes don’t need separate documentation. Semantic tokens handle theme switching automatically.

​
How it works

The color skill balances deterministic token extraction and table rendering with AI reasoning for variant organization, state mapping, and sub-component analysis. 55% Deterministic 45% AI Reasoning
1

Extract

The skill reads fills, strokes, and variable bindings from the component via the Figma MCP.
2

Map tokens

Each color-bearing element is matched to its design token, across all states and variants.
3

Detect variable modes

Variable collections (tag color, badge style) are identified and each mode gets its own section.
4

Import template

The color documentation template is imported from the library, instantiated, and detached into an editable frame.
5

Render

The skill fills header fields, builds state tables, variant sections, and variable mode sections.
6

Validate

A screenshot is captured and checked for completeness. Issues are fixed automatically for up to 3 iterations.
The skill renders programmatically, so the output is consistent and repeatable. Running it on the same component produces identical results.

​
Tips for better output

  • List all states: enabled, hover, pressed, disabled. The agent maps tokens per state
  • Mention color variants: if your component has Default and Danger (or similar), describe both
  • Call out variable mode collections: if color is controlled by a Figma variable collection (e.g., “Tag color” with Default, Success, Warning, Error modes), name the collection and its modes in your prompt. The agent checks for these automatically, but explicit mention ensures nothing is missed
  • Note sub-components: if your component contains another component (e.g., a Button inside a Section heading), the agent references it instead of duplicating its tokens