22.Build a design system in Claude Code

Name: Dembrandt
Author: Dembrandt

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 brand.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

21.Clone a brand's design language 23.Rebrand an existing application 24.Brand guide PDF vs. live site 25.Cross-app token comparison 26.Build a design system in Figma via MCP 27.Paste tokens to Figma Make 28.Improve a Google Stitch prompt with brand context 29.Generate a branded presentation 30.Find tokens that fit a page's purpose

Browse all

All recipes →

43 workflows