Skip to main content
Home/Recipes/Legacy CSS to design tokens
Code & Tokens

Legacy CSS to design tokens

DeveloperEnterprise

Overview

Extract the current live site to capture what actually shipped. Use that as ground truth to generate CSS custom properties and replace scattered hardcoded values across the codebase.

Legacy CSS codebases typically have no token system: colors are hardcoded in hundreds of places, spacing is arbitrary, and there is no single source of truth for any visual property. Extract the live site to capture the actual token values that shipped, then use that as ground truth to generate a CSS custom properties file (:root { ... }) and systematically replace hardcoded values across the codebase with var() references. This migration can be done incrementally: generate the token file first, then refactor one component or file at a time.

Extract live site

Terminal
dembrandt app.example.com --crawl 5 --save-output
Claude Code prompt
# With extraction JSON and existing CSS in context:
"Generate a CSS custom properties file (:root { ... }) from
these extracted tokens. Then audit the existing CSS and
replace hardcoded values with the correct var() references."
Output

CSS custom properties file + refactored stylesheets using var() references.

More in Code & Tokens

Design-system-aware Cursor projectGive GitHub Copilot brand contextRefactor hardcoded colors to token variablesTailwind defaults to brand themeGenerate a shadcn/ui theme from any websiteExport 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