Claude Code Skill

Reverse-engineer any
website's design DNA.

Give Taste a URL. It opens the page in a real browser, captures every token — colors, type scales, spacing rhythms, shadow layers — and distills the why behind the design into a file your AI agents can actually use.

Get started See sample output

/taste https://yoursite.com

→ produces taste.md + taste.json in seconds

FIG 0.1

Pages as layered systems

Every website encodes a design system in its computed styles. Taste reads all of them — not just the visible surface.

FIG 0.2

Patterns, not just pixels

Raw measurements cluster into rules. Forty computed grays become six semantic surface roles with relationships between them.

FIG 0.3

Two files, infinite contexts

{domain}.md for humans reading. {domain}.json for agents acting. Both carry the same evidence-backed trade-off chains.

Process

Four steps from URL to insight.

Taste doesn't scrape surface-level hex values. It runs a staged analysis pipeline that separates design tokens from the reasoning that connects them.

01 — Capture

Live browser capture

Playwright opens the page fresh — no cached sessions, no login state leaking in. Full DOM snapshot + full-page screenshot, measured at realistic viewport widths.

02 — Measure

Token extraction

Every computed style is parsed: color palette, type scale, spacing rhythm, border radii, shadow stacks, grid columns, and breakpoints.

03 — Pattern

System recognition

Raw values are clustered into a coherent design system — finding the 6 real grays from 40 computed values, naming the spacing rhythm as 4px-based or 8px-based, identifying the dominant typeface pairing.

04 — DNA

Trade-off analysis

The final step asks: what deliberate constraints make this design coherent? Each trade-off is stated as a Trigger → Decision → Reason → Evidence chain. No adjectives. No "clean and modern."

Output

Two files. One for humans, one for machines.

Every Taste run produces both. Either can feed the next step in your workflow.

taste.md Human-readable

Two sections: a Design Map with every measured token, and a Taste DNA with 3–4 named trade-offs explaining why the design works the way it does.

Color palette Type scale Spacing system Radii + shadows Grid Trade-off chains

taste.json Structured

The same data in machine-parseable form. Drop it into Cursor rules, Figma Make, or any design system pipeline. Every field typed, every token keyed consistently.

Cursor Figma Make Windsurf Design systems CI pipelines

Sample — Taste DNA yoursite.com

Trigger Any surface with variable-length user content (issue titles, project names)

Decision Single-weight Inter at 14px/20px, no bold hierarchy within rows

Reason Prevents visual noise when 50+ items are visible simultaneously; weight variation would fragment scanning rhythm

Evidence Issue list, project sidebar, command palette — all share identical computed font-weight: 400

Philosophy

Design advice that's actually specific.

AI design output defaults to the same empty phrases. Taste is built to refuse them.

Generic AI output

✗ "Clean and modern aesthetic with a focus on usability"

✗ "Uses a neutral color palette for a professional feel"

✗ "Consistent spacing and typography throughout"

✗ "Minimalist design that doesn't distract from content"

Taste output

✓ Primary: #1A1A1A on #FAFAF8. Contrast: 18.7:1. Zero decorative color in UI chrome.

✓ Type scale: 11/13/14/16/24px. No intermediate sizes. 14px carries 60% of body copy.

✓ Spacing base: 4px. All gaps are 4, 8, 12, 16, 24, 32px — no 6, 10, or 20px values found.

✓ Trade-off: rejected rounded cards (found in early versions) in favor of sharp 2px borders to reduce softness at scale.

Integrations

Works with the tools you're already using.

The JSON output is built to slot into agent workflows. Point any tool at taste.json and get consistent, evidence-backed design decisions.

⌘

Claude Code

Native skill. Use /taste directly in your session.

▲

Cursor

Drop taste.json into .cursor/rules for project-wide design context.

◆

Figma Make

Feed the token map into a Figma Make prompt for on-brand generation.

◈

Windsurf

Reference taste.md from Cascade rules for session-level design grounding.

○

Antigravity

Structured token output is compatible with Antigravity's design input spec.

□

Any agent

Plain JSON + Markdown. If it reads files, it works with Taste output.

Get started

Install in two steps.

Taste requires Claude Code and the Playwright MCP server. Both install in under a minute.

Install the Playwright MCP server

This gives Taste access to a real browser for live page capture.

claude mcp add playwright -s user -- npx -y @playwright/mcp@latest --isolated

Install the Taste skill

Adds the /taste command to your Claude Code session.

claude skill install taste

→

Run your first analysis

Restart Claude Code, then try any URL.