Code & Tokens
36.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 brand.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
Browse all
All recipes →