Skip to main content
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 and a set of React primitive components (Button, Input, Card, Badge) using those tokens throughout. The Tailwind theme does not need the agent at all — `--tailwind` writes a v4 @theme file from the same extraction, so generate it directly and let the agent build on top of it. 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

Generate the Tailwind theme

Terminal
dembrandt example.com --tailwind
Claude Code prompt
# With DESIGN.md and theme.css 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. Button, Input, Card, Badge primitives in React, using the
@theme variables from theme.css"
Output

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

More in AI Pipelines

Clone a brand's design languageCross-pollinate extraction with brand contextRebrand an existing applicationBrand guide PDF vs. live siteCross-app token comparisonBuild a design system foundation in Figma or Penpot via MCPPaste tokens to Figma MakeImprove a Google Stitch prompt with brand contextGive your brand videos a motion languageTurn 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 →

60 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