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