Claude Code Skill

Abductive reasoning
for 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 — 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 {domain}.md + {domain}.json in seconds

FIG 0.1

🔍

stripe.com

3 pages analyzed

Font sohne-var · 300/700

Grid 12 col · 40px gutter

Radius 4 · 8 · 12 · 16px

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

Taste DNA · 4 principles

stripe.com

Trigger

Choosing neutrals beside a purple brand accent

Decision

Tint every gray toward indigo — never pure gray

Evidence · confirmed across 3 pages

Patterns, not just pixels

Raw measurements cluster into rules. The 40 computed grays become 6 semantic surface roles with relationships between them.

FIG 0.3

Output files

Ready in your working directory

stripe.com.md Human

stripe.com.json Structured

Exports to

Cursor rules →

Figma Make →

Windsurf / Copilot →

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 + screenshots at 1440×900, 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. 20 measurement categories total.

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, identifying the typeface pairing strategy.

04 — DNA

Trade-off analysis

What deliberate constraints make this design coherent? Each trade-off is 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.

{domain}.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

{domain}.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 principle 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 the 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 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 {domain}.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.

GitHub Copilot

Append to .github/copilot-instructions.md for repo-wide design context.

Any agent

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

Get started

Three steps. Then run it anywhere.

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

Clone into your Claude skills directory

This adds the /taste command to your Claude Code session.

git clone https://github.com/senlindesign/taste-skill ~/.claude/skills/taste

Install the Playwright MCP server

Gives Taste access to a real browser. Downloads Chromium (~100MB) on first run.

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

Restart Claude Code, then run on any URL

Works in CLI, desktop app, VS Code extension, and JetBrains.