Taste Lab

Product Introduction

1. Definition: Taste Lab is an AI-powered design analysis and reverse-engineering tool that employs abductive reasoning to deconstruct a website's visual design system. It functions as a specialized agent skill for platforms like Claude and Gemini CLI, going beyond basic token extraction to understand and articulate the underlying design "taste"—the deliberate decisions and trade-offs made by the original designer.
2. Core Value Proposition: Taste Lab provides AI agents with a complete, context-rich design blueprint. It transforms any URL into a structured Design Map and "Taste DNA" document, enabling AI tools to not only replicate visual elements but also understand the reasoning behind them, resulting in more coherent and context-aware frontend development and design system creation.

Main Features

1. Multi-Agent Analytical Pipeline: The system operates through a four-stage, role-specific agent pipeline that progressively deepens the analysis. How it works: Each agent performs a distinct function: (1) Extract Measurements (Senior Design AI) using Playwright for precise DOM and visual data capture across 20 categories; (2) Detect Patterns (Principal Design Engineer) to identify systematic rules with evidence; (3) Infer Taste (Ultimate Design Critic) to derive the core trade-offs; (4) Observe (Lead Critic) as a quality gate to filter output. This multi-lens approach ensures comprehensive and validated analysis.
2. Comprehensive Design Token Extraction: The tool outputs a meticulous Design Map, a complete token set specifying exact values. This includes: a full Color System (e.g., Page background #08090A, Surface rgba values), Typography (Inter Variable font, specific sizes, weights, tracking), Spacing (8px base unit, section padding), Border Radius (2px to 9999px), and Depth & Shadow definitions (card borders, float shadows). All values are cited with precise measurements (px, hex, rgba, ratio) with no approximations.
3. Taste DNA Generation with Reasoning: The unique Taste DNA output provides 4-8 taste principles. Each principle details the Trigger (the design decision point), Decision (what was chosen), Reason (the design logic), Evidence (specific proof from the page), and critically, the Trade-off (what this choice sacrificed or deliberately omitted). This captures the "why" behind design decisions, such as the principle of restraint in using color.
4. Direct AI Tool Integration: Taste Lab is built as a skill for existing developer AI tools, minimizing setup friction. It automatically writes output files ({domain}.md and {domain}.json) and, through configured rule files (e.g., .cursor/rules/ for Cursor, CLAUDE.md for Claude Code, GEMINI.md for Antigravity), injects the design context directly into the AI agent's knowledge base for subsequent tasks. It leverages Playwright MCP for reliable browser automation.

Problems Solved

1. Pain Point: Conventional design extraction tools provide raw data (tokens) but lack context. An AI agent receiving only a hex code or px value copies it mechanically without understanding the intent, leading to generic or incoherent adaptations. This is the problem of "spec sheet vs. taste" and the "token without context" limitation.
2. Target Audience: The primary users are AI-augmented frontend developers building with tools like Claude, Cursor, or GitHub Copilot; UI/UX designers seeking to document or reverse-engineer a design system; Product Managers and Technical Leads who need to maintain design consistency across AI-generated codebases; and AI developers building design-aware agents.
3. Use Cases: Use cases include: Automated Design System Documentation for a competitor's site to inform internal guidelines; providing full design context to an AI agent before it generates a clone or new feature page to ensure stylistic consistency; onboarding new developers to a project's visual logic quickly; and educational analysis to understand why renowned websites like Linear or Stripe are designed the way they are.

Unique Advantages

1. Differentiation: Taste Lab fundamentally differs from traditional design scrapers, CSS extractors, or basic AI vision prompts. While competitors may list colors and fonts, Taste Lab provides a causal analysis. It doesn't just say "the radius is 6px"; it explains that 6px was a deliberate trade-off for approachable yet professional card borders, distinct from a sharper 2px or a softer 8px. This moves analysis from descriptive to explanatory.
2. Key Innovation: The core innovation is the application of abductive reasoning through a structured, multi-agent framework specifically for design analysis. The system is designed to infer the best explanation for a set of design observations (the measurements), simulating the thought process of a human design critic. The mandatory inclusion of a Restraint principle in the Taste DNA ensures the analysis captures not just what was done, but what was wisely left out, which is a hallmark of mature design taste.

Frequently Asked Questions (FAQ)

1. Question? How does Taste Lab's output integrate with my existing AI coding workflow? Taste Lab is installed as a skill for your AI CLI tool (Claude Code, Gemini CLI) or integrated via rule files for IDEs like Cursor and Windsurf. After running /taste [URL], it generates markdown and JSON files. The configured rule file ensures your AI agent automatically loads this design context into its memory for your next prompting session.
2. Question? What is the difference between Taste Lab's Design Map and a standard Figma design spec or a CSS extract? A standard spec or CSS extract is a list of tokens (e.g., background: #08090A;). Taste Lab's Design Map is that plus the Taste DNA—a structured analysis of why those tokens exist and the trade-offs involved. It provides the narrative and logical context missing from raw specifications.
3. Question? Does Taste Lab require access to a website's source code or only the rendered page? Taste Lab operates on the fully rendered webpage using Playwright, a headless browser. It analyzes the final DOM and computed styles, meaning it works on any publicly accessible website, regardless of the underlying code framework (React, Vue, static HTML, etc.). No source code access is needed.
4. Question? What are the technical requirements to run Taste Lab? You need a system with Node.js installed (to run npx for Playwright MCP) and one of the supported AI CLI environments (Claude Code or Gemini CLI). The tool handles the rest, including installing Playwright and its browser dependency on the first run.
5. Question? Can I customize the analysis or focus only on specific aspects like typography or color? Currently, Taste Lab runs its comprehensive four-step pipeline to generate the full Design Map and Taste DNA. The structured output format, however, makes it easy for an AI agent to parse and focus on specific sections (e.g., "ignore the spacing in Design Map, explain only Principle 2 from Taste DNA") in subsequent conversations.