Taste Lab

Key Features

• •Live browser capture via Playwright: Opens the target URL in an isolated browser session with no cached data, taking full DOM snapshots and screenshots at realistic viewport widths. This ensures every token is measured from an authentic loading environment, capturing dynamic content that static scrapers miss, providing accurate design measurements for replication.
• •Token extraction across 20 measurement categories: Parses every computed style including color palette, type scale, spacing rhythm, border radii, shadow stacks, grid columns, and breakpoints. This comprehensive extraction gives designers a complete set of raw measurements needed to understand a website's visual foundation without manual inspection.
• •System recognition by clustering raw values into a coherent design system: Transforms noisy data like 40 computed grays into six semantic surface roles with relationships. Identifies spacing base (4px or 8px), type scale structure, and consistent radius/shadow categories, revealing the underlying design rules that make a site visually cohesive and ready for component library creation.
• •Trade-off analysis using Trigger → Decision → Reason → Evidence chains: Infers the deliberate constraints behind design choices, avoiding vague adjectives like 'clean and modern.' Each trade-off is documented with specific hex values, pixel measurements, and DOM properties, explaining why a decision was made and what was sacrificed, giving genuine taste intelligence.
• •Dual output format: {domain}.md for human reading with Design Map and Taste DNA sections, and {domain}.json for machine consumption with consistently keyed tokens. This allows both human designers and AI agents to use the same design context in their workflows, from reading trade-off chains to feeding structured data into tools like Cursor or Figma Make.
• •Anti-slop quality gate: A final Observer agent runs an anti-slop grep, validates JSON, and ruthlessly filters out any generic or unsubstantiated claims. This ensures every output contains only evidence-backed design facts with exact values—no placeholder phrases like 'clean aesthetic'—making Taste Lab outputs reliable for production use.
• •Integration with multiple development tools: The JSON output can be dropped into Cursor rules, Windsurf Cascade, GitHub Copilot instructions, Figma Make prompts, v0 instructions, and any tool that reads files. This seamless compatibility allows teams to maintain design consistency across the entire design-to-development pipeline with minimal setup.

Use Cases

• •Reverse engineer a competitor's design system by running Taste Lab on their site to obtain a complete token set and trade-off chains. Designers can then replicate the visual language or identify gaps in their own system, saving hours of manual inspection and ensuring strategic design decisions are understood before implementation.
• •Provide design context for AI coding agents by placing the taste.json file into Cursor rules or GitHub Copilot instructions. When the AI generates code, it references the exact color tokens, type scales, and spacing rules, resulting in output that consistently matches the target brand's design language without manual prompting or post-generation fixes.
• •Audit an existing website before a redesign by extracting its full design DNA and trade-off reasoning. Teams can identify what works and why, preserve successful decisions like spacing rhythms or contrast ratios, and make informed changes to elements that need improvement, reducing the risk of losing brand identity during the redesign process.
• •Generate design specifications for handoff between designers and developers by sharing both the human-readable taste.md and machine-parseable taste.json. Developers get precise measurements and trade-off rationale, eliminating back-and-forth questions about spacing, colors, or reasoning, streamlining the implementation phase with accurate specs.
• •Train AI design models with authentic design reasoning by using Taste Lab outputs as training data. The structured trade-off chains provide real examples of decision-making in design, enabling models to learn not just token values but the strategic logic behind them, improving generative output quality for design systems and UI generation.

Who is this for?

Frontend developers who need to replicate design systems accurately, design engineers building component libraries, product designers auditing competitor interfaces, design system engineers maintaining brand consistency, UX researchers analyzing design patterns, and AI agent users requiring structured design context for code generation. Also suitable for brand managers ensuring cross-team consistency and educators teaching design principles. The tool is specifically useful for teams using Claude Code, Gemini CLI, Cursor, Windsurf, GitHub Copilot, Figma Make, v0, and Antigravity in their workflow.