Skip to main content
Home/Recipes/Export design tokens to Storybook
Code & Tokens

Export design tokens to Storybook

DeveloperDesigner

Overview

Extract a site's tokens and generate a Storybook design token page. Colors, typography, spacing, and radii documented as living components that stay in sync with the live product.

Storybook is the standard for component documentation, but design token documentation inside Storybook is often missing or maintained manually. Extract the live site's tokens and ask an agent to generate a tokens.stories.tsx file with visual swatches for colors, a type scale specimen, a spacing grid, and border radius examples. The stories derive their values from extracted constants so they reflect the actual shipped design system.

Extract tokens

Terminal
dembrandt example.com --save-output
Claude Code prompt
# With extraction JSON in context:
"Generate a Storybook design token documentation file (tokens.stories.tsx).
Include:
1. Color palette story: swatches for each extracted color with hex value and name
2. Typography story: specimen for each type scale step (size, weight, line height)
3. Spacing story: visual grid showing each spacing value
4. Border radius story: examples of each extracted radius value
Use the extracted token values as constants at the top of the file.
Export each as a named Storybook story."
Output

tokens.stories.tsx with visual documentation of all extracted design tokens.

More in Code & Tokens

Design-system-aware Cursor projectGive GitHub Copilot brand contextRefactor hardcoded colors to token variablesTailwind defaults to brand themeLegacy CSS to design tokensGenerate a shadcn/ui theme from any websiteExtract design tokens for a Next.js application

Browse all

All recipes →

52 workflows

Continue reading

Getting started

Install Dembrandt and turn any public website into a complete set of design tokens in under 2 minutes. All you need is Node.js and a terminal.

Read more

MCP

Use Dembrandt as a tool inside Claude Code, Cursor, Windsurf, or any MCP-compatible editor. Your agent extracts live design tokens automatically when you ask.

Read more

Skills

30 UX and design system skills for AI agents. Install once, your agent designs with hierarchy, WCAG standards, and brand accuracy. The UX knowledge that normally costs senior consultant days.

Read more