Skip to main content
Home/Recipes/Generate a shadcn/ui theme from any website
Code & Tokens

Generate a shadcn/ui theme from any website

Developer

Overview

Extract a site's design tokens and convert them into a shadcn/ui theme. CSS variables mapped to shadcn's semantic token names, ready to drop into globals.css.

shadcn/ui uses CSS custom properties with semantic names (--background, --foreground, --primary, --muted, --border, --ring, --radius). Extract a live site's design tokens, then ask an agent to map the extracted values to these semantic names and output a complete theme block ready to paste into globals.css. The result is a shadcn/ui project that matches the extracted brand without manually picking color values.

Extract tokens

Terminal
dembrandt example.com --save-output
Claude Code prompt
# With extraction JSON in context:
"Convert these extracted design tokens into a shadcn/ui theme.
Output a complete CSS block for globals.css:
:root {
--background: ;
--foreground: ;
--primary: ;
--primary-foreground: ;
--secondary: ;
--secondary-foreground: ;
--muted: ;
--muted-foreground: ;
--accent: ;
--accent-foreground: ;
--destructive: ;
--border: ;
--input: ;
--ring: ;
--radius: ;
}
Map the extracted colors to the closest semantic role.
Use the extracted border radius for --radius.
Add a .dark block with appropriate dark mode values."
Output

Complete shadcn/ui theme block for globals.css, derived from the extracted brand 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 tokensExport design tokens to StorybookExtract 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