Design Token to Storybook

You're building a new component. Three sessions in, and every time you start a fresh chat the model asks you to explain how your tokens work. What does Primary/500 map to? Is the spacing scale custom or Tailwind's default? Which font is the display font?

You explain it. The model builds the component. Next session, you explain it again.

A token-mapping skill file solves this. Write it once — Figma variable names to Tailwind classes, spacing scale, font tokens — commit it to the repo, and every future session has the context from the start. First-session setup, permanent payoff.

For how the Figma MCP provides structured design data instead of screenshots, see Figma MCP Workflows.

The workflow

Step 1: Token skill. Before touching any component, create a SKILL.md that documents how your Figma tokens map to your existing Tailwind setup. This is the highest-leverage step — it gives the model persistent context about your design system so it doesn't reinvent token mappings every session.

Here's what a minimal token skill looks like:

# Design Token Mapping
 
## Colors
- Figma `Primary/500` → `text-blue-500` / `bg-blue-500`
- Figma `Neutral/900` → `text-zinc-900` / `bg-zinc-900`
- Figma `Surface/Default` → `bg-white dark:bg-zinc-950`
 
## Typography
- Figma `Display/Large` → `font-display text-4xl font-bold tracking-tight`
- Figma `Body/Default` → `font-sans text-base leading-relaxed`
- Display font: Space Grotesk (`--font-display` in `@theme`)
 
## Spacing
- Figma spacing tokens follow Tailwind's default scale: 4px = `gap-1`, 8px = `gap-2`, 16px = `gap-4`, 24px = `gap-6`
 
## Rules
- Never use arbitrary values (no `text-[36px]`, no `#hexvalue`)
- All colors from the token list above — flag anything that doesn't map

Create it once, reuse it for every design-to-code task. The skill should cover: Figma color variable names → Tailwind color classes, spacing tokens → Tailwind spacing scale, typography tokens → font-family/size/weight classes, and any CSS custom properties you define in your @theme block.

Step 2: Design tokens. With the skill loaded, ask the model to map the specific Figma component's variables to your Tailwind config. The skill tells it that Primary/500 means text-blue-500 and spacing/md means gap-4 — it doesn't have to guess.

Step 3: Component spec. Use the Figma MCP to pull the component's properties, variants, and constraints. Ask the model to generate a TypeScript interface from the Figma component properties.

Step 4: Implementation. Implement the component against the spec. The model has the design data and the token mapping skill, so it can make accurate decisions about spacing, color, and layout without you translating from a screenshot.

Step 5: Storybook stories. Generate stories for each variant. "Given this component and its props, generate Storybook stories for each variant defined in the Figma component." The stories document the component and make it easy to verify against the design.

Step 6: Visual review. Use the Storybook output to do a visual review against the Figma design. The Figma MCP makes it easy to pull the design back into the loop for comparison.

What makes this better than the old way

The token-mapping skill is the biggest improvement. Without it, every new design-to-code session starts from zero — the model has to rediscover how your Figma tokens map to Tailwind classes. With the skill, that knowledge is persistent. It knows your @theme block defines --font-display as Space Grotesk, your spacing follows Tailwind's default scale, your color palette lives in zinc/blue/emerald. One-time setup, every-session payoff.

Second: accurate spacing and color because the model has actual values from Figma, not a screenshot. "The gap between these elements is 12px" — the skill tells it 12px maps to gap-3 in your Tailwind config.

Third: Storybook story generation from Figma variants. A component with 4 variants, 3 sizes, and 2 states has 24 combinations. Generating stories for all of them manually is tedious. The model does it in one shot.