Skip to content
UXClaim
Design Systems

Design MD Generator

Extract design systems from any website into AI-readable DESIGN.md files with verified tokens and stability classifications.

View source More in Design Systems

What it does

Design MD Generator extracts complete design systems from any live website into publication-quality DESIGN.md files. It captures every computed style, CSS variable, color, typography, component, and interaction pattern—then classifies each token by temporal stability so AI agents know which values are permanent design decisions and which are campaign-specific.

How it works

The tool runs a three-phase parallel pipeline:

  1. Fast Extract — Playwright crawls your site, collecting computed styles, CSS variables, fonts, and shadows. OKLCH clustering reduces raw data into tokens.

  2. Parallel Write + Proof — Multiple agents generate a 17-section design document while simultaneously verifying fidelity against the live site.

  3. Assemble & Deliver — The output includes tokens.json, DESIGN.md, visual preview, quality report, and pixel-level fidelity proofs.

Use cases

  • Design handoff to AI: Tell Claude/Cursor “build me a page that looks like [brand],” and it reads exact design values from DESIGN.md instead of hallucinating.
  • Design system audit: Automatically document undocumented systems from live sites.
  • Brand consistency: Verify that design implementations match source designs with proof screenshots.
  • AI agent instructions: Generates agent-specific rule files (CLAUDE.md, .cursorrules, etc.).

Who benefits

Product designers automating design handoff, design system maintainers auditing sites, and teams using AI coding agents (Claude Code, Cursor, Copilot, Windsurf) who need verified design tokens instead of AI approximations.

Frequently asked questions

What does Design MD Generator extract?
It extracts colors (OKLCH-clustered with 6-dimension usage), typography (full hierarchy with OpenType features), components (variants with state rationale), interactions (hover/focus/active), shadows (frequency-classified), dark mode systems, layout spacing, motion (duration/easing), accessibility specs (ARIA/contrast), icons, and loading/error states. Each token gets a 4-layer stability classification (Infrastructure/System/Campaign/Content).
How long does extraction take?
The 3-phase pipeline targets under 4 minutes total: Fast Extract (~60-120s), Parallel Write + Proof (~70s), Assembly (~20s). Use `--fast` mode (5 pages, no interaction) for quick extraction. Full mode with interaction capture takes longer but captures hover/focus states.
Can I use this with Claude Code and Cursor?
Yes. Design MD Generator generates agent-specific instruction files: CLAUDE.md for Claude Code, .cursorrules for Cursor, AGENTS.md for OpenAI Codex, GEMINI.md for Gemini CLI, .windsurfrules for Windsurf, and .github/copilot-instructions.md for GitHub Copilot. Your AI agent automatically reads these when building new UI.
What is stability classification?
Each token is classified by how long it will remain correct: L1 Infrastructure (permanent, e.g., brand colors), L2 System (redesign cycle, e.g., button styles), L3 Campaign (per-launch, e.g., promo accents), L4 Content (constant change, excluded). This helps AI agents distinguish permanent design decisions from temporary content.
How accurate is the color extraction?
Highly accurate. Extraction includes pixel-level fidelity proofs comparing extracted palettes against the original site (image regions excluded). Verified results: Stripe 99.9%, Vercel 100%, Notion 100%, Linear 100%, Supabase 100%, Shopify 100%. Colors use OKLCH delta-E clustering for perceptually accurate grouping.
What is the DESIGN.md v2 format?
A 17-section document structure including Brand Context, Visual Theme, Color Palette (with dark mode), Typography, Components (all variants), Layout, Depth & Elevation, Motion, Content & Voice, Do's and Don'ts, Accessibility specs, Responsive breakpoints, State Matrix, Iconography, and Agent Prompt Guide. Exceeds what existing design system tools generate.
Does it detect dark mode?
Yes. Dark mode detection runs automatically across multiple pages. The output includes a parallel color system (section 2.5) with CSS variable light/dark mapping, so AI agents can build dark-mode-compatible UI without guessing.
How do I install Design MD Generator?
Clone the repo, run `npm install && npx playwright install chromium`. Then use `npx ts-node scripts/extract.ts <url> --fast` for quick extraction or `--with-interaction` for full state capture. Output includes tokens.json, DESIGN.md, preview.html, report.html, and screenshots.

Glossary

OKLCH clustering
A perceptually accurate color clustering method that groups similar colors based on human visual perception rather than raw hex values. OKLCH (Oklab Lightness Chroma Hue) delta-E measures the perceived distance between colors.
Stability classification
A 4-layer system categorizing design tokens by how long they remain valid: L1 Infrastructure (permanent), L2 System (redesign cycle), L3 Campaign (per-launch), L4 Content (constant change). Helps AI agents prioritize which values to use.
Design tokens
Standardized design values (colors, fonts, spacing, shadows, etc.) extracted from a website and classified by type and usage. Used to ensure consistency and provide AI agents with verified reference values instead of approximations.
Fidelity proof
Pixel-level comparison screenshots showing how extracted design tokens match the original live site. Verifies extraction accuracy by comparing rendered output against source (excluding dynamic image regions).

More in Design Systems

All →
Design Systems

Arcade Prototyper

Build interactive HTML prototypes using DevRev's production design system and Arcade components in Claude Code.

asundiev-devrev
Design Systems

Awesome Design Skill

Access 54+ brand design systems (Linear, Apple, Stripe, Vercel) for Claude Code UI development with complete design specifications.