Taste Lab

Taste Lab is an open-source Claude Code skill built by Sen Lin that turns any public URL into a structured design context file for AI agents. It goes beyond token extraction by capturing the why behind design decisions — the trade-offs that make a design coherent — and outputs both a human-readable Markdown file and a machine-parseable JSON file. The project launched on Product Hunt and earned a top-post badge, and the GitHub repository has accumulated over 100 stars since its creation in May 2025.

What It Is

Taste Lab (/taste) is a CLI skill for Claude Code and Gemini CLI that runs a four-step analysis pipeline on any website. It uses Playwright to open the page in a real browser, captures a full DOM snapshot and screenshots, extracts every computed style across 20 measurement categories, clusters raw values into system-level patterns, and then derives named design principles — each expressed as a Trigger → Decision → Reason → Evidence → Trade-off chain. The result is two files: {domain}.md for humans and {domain}.json for agents.

How the Pipeline Works

The analysis runs in four sequential steps, each handled by a specialized prompt persona:

• Step 1 (Measure): Extracts 20 categories of design tokens — colors, type scales, spacing rhythms, border radii, shadow stacks, grid columns, and breakpoints — with exact px/hex/ratio values.
• Step 2 (Pattern): Clusters raw measurements into 5–8 system-level rules, each with an Evidence line and a Design Goal.
• Step 3 (Taste): Derives 4 named taste principles, each with a full Trigger/Decision/Reason/Evidence/Trade-off structure. At least one Restraint principle is required.
• Step 4 (Observer): A quality gate that runs an anti-slop grep audit, validates the JSON, and writes the final output.

A visual primacy rule governs conflicts: the screenshot is ground truth, and DOM data supplies exact numbers only when they agree with what is visually dominant.

Export Formats and Integrations

After analysis, Taste writes an additional tool-specific file so the agent picks up the design context automatically on its next run. Supported export targets include 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), Figma Make (taste-figma.css), and Lovable (printed for Project Knowledge paste).

Setup Path

Installation requires two prerequisites: Claude Code (or Gemini CLI) and the Playwright MCP server. The skill is cloned directly into the Claude skills directory (~/.claude/skills/taste), and Playwright MCP is added with a single claude mcp add command. Playwright downloads its own Chromium (~100MB) on first run. After restarting Claude Code, /taste <url> is available in any project session.

Known Tradeoffs

The tool is explicitly scoped to public marketing pages. Pages behind login return the login form rather than the target surface. Sites with Cloudflare or bot-detection may block the Playwright browser. Heavy SPAs that are still hydrating after load receive a caveat in the output. CSS custom property variable names are not surfaced — only computed values are captured. The --isolated flag is required to ensure each run starts with a fresh browser state, preventing authenticated sessions from contaminating the analysis.

Update: MIT-Licensed, Active Development

The README lists the license as MIT. The GitHub repository shows 108 stars and 13 forks as of the data captured, with the last push in June 2025. The project is described as a side project by Sen Lin and accepts issues and pull requests, with the most useful contribution signal being weak output examples submitted with the source URL.