How to Reverse-Engineer Any Website's Design System
Every website has a design system — whether it is documented or not. The colors, typography, spacing, and component patterns are all there in the CSS. The challenge is extracting them into a structured, reusable format that your AI coding agent can use.
Why reverse-engineer a design system?
There are three common scenarios where you need to extract design tokens from an existing website:
- Redesign or migration — you are rebuilding a site and need to preserve its visual identity
- Competitor research — you want to understand how a competitor handles visual design
- AI project reference — you want your AI coding agent to match an existing look and feel
Method 1: Manual extraction with DevTools (slow)
Open Chrome DevTools, inspect elements, and manually record computed styles. This works for small extraction tasks but becomes tedious quickly.
- Colors: Check
--color-*CSS custom properties in the computed styles panel. If none exist, scrape background-color, color, and border-color from representative elements. - Typography: Inspect h1, h2, h3, p, and small elements to extract font-family, font-size, font-weight, and line-height values.
- Spacing: Measure padding, margin, and gap values on cards, sections, and layout containers. Look for a consistent base unit (often 4px, 8px, or 16px).
- Border radius: Check buttons, cards, inputs, and images for border-radius values.
- Shadows: Inspect elevated elements like cards and modals for box-shadow values.
Manual extraction takes 30-60 minutes for a simple site. The output is error-prone and rarely complete.
Method 2: CSS analysis (technically involved)
Download all CSS files from the site and parse them for custom properties, class-based token patterns, and repeated values. Tools like PostCSS and Style Dictionary can help, but require setup and technical knowledge.
This method is better for production sites with well-organized CSS, but it still misses contextual information — which color is primary versus accent, which font is body versus heading, and what design rules govern their usage.
Method 3: Automated extraction with DesignSaver (fast)
DesignSaver automates the entire process. Paste a URL and it produces a complete design context package:
- DESIGN.md — design rules and visual intent in natural language
- tokens.json — all extracted design tokens with types and categories
- style.css — CSS custom properties ready to import
- tailwind.config.json — Tailwind theme extension values
- screenshots/ — desktop and mobile visual references
- codex-prompt.md — agent-ready prompt referencing all extracted files
What takes an hour manually takes seconds with DesignSaver. The output is structured, complete, and immediately usable with any AI coding agent.
What a good extraction includes
Whether you extract manually or use an automated tool, a complete design system capture should include these categories:
- Color palette — primary, secondary, accent, surface, text, border, and feedback colors
- Typography scale — font families, sizes, weights, line heights, and letter-spacing for each level
- Spacing scale — base unit, section spacing, component padding, and gap values
- Border radii — values used for buttons, cards, inputs, and other interactive elements
- Shadow system — elevation levels and their box-shadow values
- Component patterns — recurring visual patterns like card layouts, button styles, and form inputs
- Visual constraints — rules like "no decorative fonts," "always use rounded corners," or "maximum content width"
Next steps
Once you have extracted design tokens, the next step is integrating them into your AI coding workflow. Read DESIGN.md and tokens.json into your agent's context before generating UI, and watch the output shift from generic to on-brand.