taste

Abductive reasoning for any website's design taste

/taste turns any URL into a complete design context for your AI agent. Design Map, Taste DNA, and the reasoning behind every choice.

Four steps from URL to taste.

Four agents, four roles. Each reads the same page through a sharper lens until what's left is a file any AI tool can build from.

1. Extract Measurements You are a Senior Design AI. Your job is to extract precise, objective design measurements from a webpage.
2. Detect Patterns You are a Principal Design Engineer detecting SYSTEMATIC RULES in the measurements provided by Step 1.
3. Infer Taste You are the Ultimate Design Critic. You will now derive the "Taste" — the deliberate, painful TRADE-OFFS the designer made.
4. Observer You are the Lead Critic & Final Editor. Your job is to RUTHLESSLY filter the taste analysis from Step 3. Zero bullshit passes through you.

How to reverse engineer design taste

20 measurement categories, every colour, weight, spacing value, radius, and shadow cited with exact px / hex / ratio. No approximations.

5–8 system-level rules extracted. Each pattern gets an Evidence line and a Design Goal explaining why it exists.

4 taste principles — each with Trigger, Decision, Reason, Evidence, and Trade-off. At least one Restraint principle is required.

Quality gate. Runs anti-slop grep, validates JSON, then writes the final output. {domain}.md + {domain}.json

Two files. One brief.

Every run writes a .md and a .json. The full token set, plus 4 principles explaining why each design choice was made and what it gave up.

Output structure

Part 1: Design Map — colors, typography, spacing, radius, shadows. The complete token set from the page.
Part 2: Taste DNA — 4 principles, each explaining the reasoning behind one design decision.

What a Taste DNA principle contains

• Trigger — what design decision prompted this choice
• Decision — what was chosen
• Reason — the design logic behind it
• Evidence — specific proof from the page (px, hex, DOM values)
• Trade-off — what this choice gives up

Color System

Typography

Spacing

Border Radius

Depth & Shadow

Principle 1 — RESTRAINT: Brand lives in white, not in color

• Trigger: Deciding on an accent or brand color.
• Decision: Don't introduce one. Use white (#F7F8F8) as the accent against near-black.
• Reason: Color-as-brand is a shortcut for products without visual confidence. On a near-black surface, white carries all the emphasis needed — everything else is noise. Adding a purple or blue CTA button would cheapen the effect by making it feel like a template.
• Evidence: Every nav link, button, and CTA is white or near-white. The only colored element is a translucent green badge for functional status. DOM accentCandidates are 100% grays and whites.
• Trade-off: You cannot differentiate feature tiers by color. Linear resolves this with weight and size hierarchy alone — not color weight.

Your AI agent gets the taste.

One extra file, formatted for your tool. The agent picks it up on its next run.

• Cursor: .cursor/rules/{domain}-taste.mdc
• Windsurf: .windsurf/rules/{domain}-taste.md
• Claude Code: CLAUDE.md
• GitHub Copilot: .github/copilot-instructions.md
• Bolt: .bolt/prompt
• Antigravity: GEMINI.md
• v0 by Vercel: taste-tokens.css + instructions
• Figma Make: taste-figma.css + instructions
• Lovable: Printed to paste in Project Knowledge