Skip to main content
Home/Recipes/Build a design system in Claude Code
AI Pipelines

Build a design system in Claude Code

DeveloperDesigner

Overview

Extract tokens and feed them into Claude Code. The agent scaffolds CSS variables, a Tailwind theme, and React primitives, all derived from exact brand values, not defaults.

Extract a live site's design tokens and export them as DESIGN.md. Feed the file into Claude Code and ask the agent to build a complete design system: CSS custom properties for the full token set, a Tailwind theme extension replacing generic defaults with brand-accurate values, and a set of React primitive components (Button, Input, Card, Badge) using those tokens throughout. Every value in the output comes from real, measured brand data: no Tailwind defaults, no memory, no approximation.

Generate DESIGN.md

Terminal
dembrandt example.com --design-md
Claude Code prompt
# With DESIGN.md in context:
"Build a design token system using these extracted tokens as source of truth.
Output:
1. CSS custom properties (colors, type, spacing, radius, shadow)
2. Tailwind theme extension
3. Button, Input, Card, Badge primitives in React"
Output

CSS variables + Tailwind theme + React primitives. All values from the live brand.

More in AI Pipelines

Clone a brand's design languageRebrand an existing applicationBrand guide PDF vs. live siteCross-app token comparisonBuild a design system in Figma via MCPPaste tokens to Figma MakeImprove a Google Stitch prompt with brand contextTurn a live site plus brand guide into a Figma design systemAuthor a design system from screenshots, brand guide, and tokens in Figma or PenpotBuild on-brand UI in Claude artifactsGenerate a branded presentationFind tokens that fit a page's purposeBrand guardrail for AI-generated UI

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