/taste-skill

name: taste
description: >-
  Reverse-engineer the design taste of any website. Given a URL, captures DOM data
  and a screenshot via real browser, then runs a 4-step analysis to produce
  {domain}.md + {domain}.json with practical design tokens (colors, typography,
  spacing, radii, shadows, grid) AND taste DNA (Trigger → Decision → Reason →
  Evidence trade-offs explaining WHY the design works). Use whenever the user wants
  to extract a site's design system, study a competitor's visual language, port an
  aesthetic to a new project, or generate design guidance for an AI coding agent.
  Triggers on '/taste <url>', 'analyze the design of X', 'what makes X's site good',
  'extract design tokens from X', 'give me X's design DNA', 'build something in the
  style of X', 'I want my app to feel like X'. Output rejects AI slop ('clean',
  'modern', 'user-friendly') in favor of concrete px/hex values and restraint
  trade-offs. Do NOT use for scraping data, summarizing page content, or tasks
  unrelated to visual design.
compatibility: >-
  Requires Playwright MCP. Claude Code: `claude mcp add playwright -s user -- npx -y
  @playwright/mcp@latest --isolated`. Gemini CLI: add to ~/.gemini/settings.json
  mcpServers block (see README).
metadata:
  version: "1.1.0"
  author: Senlin

Taste — Reverse-Engineer a Website's Design DNA

This skill turns a URL into two files:

• **`./{domain}.md`** — human-readable. Two sections:
• **Design Map** — practical tokens (colors, type scale, spacing, radii, shadows, grid)
• **Taste DNA** — 3-4 opinionated trade-offs (Trigger → Decision → Reason → Evidence)
• **`./{domain}.json`** — structured. Same data, machine-parseable, for downstream tools (Cursor, Windsurf, design systems).

The pipeline rejects generic descriptions like "clean and modern". A finished `taste.md` should read like a senior designer explaining *why* this particular page made *these particular* choices — and what plausible alternatives it rejected.

When to activate

Trigger this skill whenever the user wants to study a website's design and capture it as guidance for future design work. Catch all of these:

• Explicit slash form: `/taste <url>`
• Natural-language requests: "analyze the design of vercel.com", "what makes Stripe's site so good", "extract the design tokens from linear.app", "give me the design DNA for are.na"
• Mimicry intent: "I want my dashboard to feel like Linear", "build me a landing page in the style of <url>", "port this site's design to my project"
• Competitive research: "compare our look to <competitor>", "what design conventions does <site> use"
• Anywhere the user mentions a URL and asks about its design choices, typography, colors, spacing, philosophy, or "feel"

If the user mentions a URL in connection with any visual/design topic, lean toward activating — Claude tends to under-trigger skills. When in doubt, use it. The cost of a wasted skill invocation is small; the cost of generating generic design advice when this skill could have produced a specific, evidence-backed analysis is large.

Do NOT activate for: "extract data from a website" (use a scraping skill), "summarize the content of <url>" (use WebFetch), "deploy this site" (unrelated).

Prerequisites

This skill requires the **Playwright MCP server** (https://playwright.dev/docs/getting-started-mcp) to be installed and connected. Verify with:

claude mcp list | grep playwright

If you see `playwright: ... - ✓ Connected`, you're good. If not, install it:

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

Why `--isolated`: every `/taste` run starts with a fresh browser state, so cookies, login sessions, and prior cache do not leak into the analyzed page. Without it, running `/taste https://linear.app` while you happen to be signed into Linear would analyze the app dashboard instead of the public marketing page — wrong surface, wrong taste.

Why `npx @playwright/mcp@latest` (with no `--browser` flag): Playwright will download and use its own bundled Chromium (~100MB, one-time). This is more portable than relying on the user's system Chrome — it works on machines without Chrome installed, gives consistent rendering across users, and never opens a window in the user's real browser profile.

After installing, the user must restart Claude Code for the MCP tools (`mcp__playwright__browser_*`) to appear in this session. If Playwright is unavailable when this skill runs, stop and tell the user clearly: "I need Playwright MCP to scrape the page. Run `claude mcp add playwright -s user -- npx -y @playwright/mcp@latest --isolated` and restart Claude Code, then try again."

On first run, Playwright may take ~30-60 seconds before its first `browser_navigate` returns — that is the one-time Chromium download. Subsequent runs start in seconds. If the user wants to pre-download to avoid the wait, they can run `npx playwright install chromium` once before invoking this skill.

Workflow

Follow these five phases in order. Each phase has explicit success criteria — do not advance until the current phase has produced what the next phase needs.

Phase 0 — Parse the URL and export target

**Step 1 — URL**

Extract the URL from the user's message. Accept these forms:

• `/taste https://linear.app`
• "analyze the design of vercel.com" (add `https://` if missing)
• A bare URL anywhere in the prompt

If the user provided no URL, ask for one. If they provided a file path or something that clearly isn't a URL, ask whether they meant a hosted page. Don't proceed until you have a real URL.

Resolve common short forms before navigating: `linear.app` → `https://linear.app`, `https://www.stripe.com` is fine as-is.

**Step 2 — Extract domain for file naming**

From the URL, extract the hostname and strip any `www.` prefix. Examples:

• `https://linear.app` → `linear.app`
• `https://www.stripe.com` → `stripe.com`
• `https://vercel.com/home` → `vercel.com`

Store this as