A Claude Code skill that extracts design systems from websites or screenshots into reproducible, agent-readable documents. Goes beyond token extraction to capture design identity — the decision-making logic that makes a brand's visual language unique and reproducible.
Existing design-system extraction tools produce color palettes, font stacks, and component catalogues. These outputs are structurally identical across brands — swap the hex codes and you can't tell Apple from Linear. An AI agent reading such a document will generate UI that is correct (right colors, right fonts) but not on-brand (wrong feel, wrong decisions for new components).
This skill produces a bundle that captures not just what a design system uses, but why and how to extend it:
| File | Purpose |
|---|---|
DESIGN.md |
9-section design system document with Design Decision Rules — actionable principles for building new components on-brand |
STYLE-REFERENCES.md |
Design lineage, peer/anti-references, extended component gallery, style vocabulary, cross-medium guides |
style-board.html |
Visual reference board with annotated screenshots of source, peer, and anti-reference sites |
preview.html |
Self-contained HTML demo with extracted design tokens |
preview-dark.html |
Dark-mode variant of the preview |
screenshots/ |
Captured screenshots of all referenced sites |
The core innovation. Tokens tell an agent what values to use. Decision Rules tell it how to think when building something new. Example (from Stripe):
Emphasis: When choosing how to make an element stand out, reduce weight rather than increase it. A weight-300 headline at 56px commands more attention than a bold one because it signals "I don't need to shout."
Color allocation: Purple means interactive. If the element is not clickable, tappable, or selectable, it does not get purple.
An agent reading these rules can build a toast notification, a pricing table, or a settings panel that feels on-brand — even though none of those components exist in the original website.
Three checks that prevent token-dump outputs:
- Palette swap test — Swap all colors mentally. Does the document still read as correct? If yes, the identity layer is missing.
- Blind component test — Can an agent build a new component from Section 1 + Section 9 alone? If not, the Decision Rules are too vague.
- Twin test — Is your output interchangeable with the Stripe exemplar once you swap names and colors? If yes, something is wrong.
A visual HTML reference board showing:
- Source site screenshot with key characteristic tags
- Peer reference screenshots with shared DNA (green) and difference (red) tags
- Anti-reference screenshots showing what the brand is not
- Style vocabulary for prompting AI design tools
stripe/
DESIGN.md # 9-section design system + Decision Rules
STYLE-REFERENCES.md # Lineage, peers, components, vocabulary
style-board.html # Visual reference board
preview.html # Light-mode token demo
preview-dark.html # Dark-mode token demo
screenshots/
source-desktop.png
peer-clerk.png
peer-raycast.png
anti-notion.png
anti-vercel.png
git clone https://github.com/iamnigellee/design.skill.git
cd design.skill
./install.shThis copies the skill to ~/.claude/skills/generating-design-md/ where Claude Code can load it.
mkdir -p ~/.claude/skills/generating-design-md
cp SKILL.md ~/.claude/skills/generating-design-md/
cp -R reference ~/.claude/skills/generating-design-md/In Claude Code, provide a website URL or screenshot and ask for a DESIGN.md:
> Extract the design system from https://stripe.com
> Generate a DESIGN.md from this screenshot [attach image]
> Create the design system docs for linear.app
The skill triggers automatically when you provide a URL or screenshot and ask for design system extraction.
| Input | Strategy |
|---|---|
| URL | DOM extraction via Chrome DevTools MCP + full-page screenshots |
| Screenshot | Vision-based analysis with approximate token extraction |
| URL + Screenshot | DOM extraction for precise tokens, screenshot as authority for page state |
The 9 required sections, in order:
- Visual Theme & Atmosphere — Interpretive prose + Design Decision Rules
- Color Palette & Roles — Semantic colors with functional roles
- Typography Rules — Full hierarchy with OpenType features
- Component Stylings — Buttons, cards, badges, inputs with state variants
- Layout Principles — Spacing, grid, whitespace philosophy
- Depth & Elevation — Shadow system with formulas and philosophy
- Do's and Don'ts — Brand-specific behavioral guardrails
- Responsive Behavior — Breakpoints, collapsing strategy
- Agent Prompt Guide — Quick reference, example prompts, iteration rules
6 sections for concrete style references:
- Design Lineage — Design tradition, historical references, contemporary evolution
- Peer References — 3–5 real sites sharing specific design DNA
- Anti-References — 2–3 sites representing the opposite approach
- Extended Component Gallery — 6–8 new components designed in the brand's style
- Style Vocabulary — Keywords for AI design tools (Midjourney, DALL-E, Figma AI)
- Cross-Medium Application — How the style adapts to email, presentations, docs, print
The repo includes two complete examples:
- Stripe —
reference/example-stripe.md+reference/example-stripe-references.md(the quality benchmark) - Linear —
linear/DESIGN.md(demonstrates dark-theme extraction)
A parallel Chinese skill is available at zh/SKILL.md. It produces DESIGN.md with Chinese prose while keeping color names, CSS properties, and Agent Prompt Guide examples in English. Install with:
# Copy the Chinese skill
cp zh/SKILL.md ~/.claude/skills/generating-design-md-zh/SKILL.md
cp -R zh/reference ~/.claude/skills/generating-design-md-zh/reference- Claude Code CLI
- One of the following for URL-based extraction:
- Chrome DevTools MCP server (preferred)
- Playwright MCP server (fallback)
- Screenshots work without any MCP server (vision-based)
MIT