Taste Lab

Key Features

• •Live Browser Capture: Playwright opens the page fresh in a real browser with no cached sessions, taking a full DOM snapshot and screenshot at realistic viewport widths like 1440×900. This ensures accurate, unobstructed measurement of the design as it truly appears.
• •Token Extraction: Parses every computed style across 20 measurement categories including color palette, type scale, spacing rhythm, border radii, shadow stacks, grid columns, and breakpoints. Every pixel and hex value is cited exactly, providing a complete objective measurement set.
• •Pattern Recognition: Clusters raw measurements into a coherent design system, identifying the real semantic roles (e.g., 6 grays from 40 computed values) and naming spacing rhythms. Each pattern gets an Evidence line and a Design Goal explaining why it exists.
• •Trade-off Analysis: Derives 3–4 deliberate trade-off principles per site, each documented as a Trigger → Decision → Reason → Evidence chain. This avoids vague adjectives like 'clean and modern' and cites specific pixel values and DOM evidence.
• •Dual Output: Produces {domain}.md (human-readable Design Map + Taste DNA) and {domain}.json (structured machine-parseable file). Both carry the same evidence-backed trade-off chains for flexible use across human review and agent workflows.
• •Integrations: Works with Claude Code (native /taste command), Cursor, Windsurf, Figma Make, GitHub Copilot, v0 by Vercel, Antigravity, Bolt, and Lovable. The JSON output slots into any tool that reads files for consistent design context.
• •Quality Filter: A final Observer agent runs anti-slop grep, validates JSON, and writes the output. This ensures zero generic adjectives like 'clean and modern' pass through, guaranteeing specific, evidence-based design reasoning.

Use Cases

• •Competitive Design Analysis: A designer reverse-engineers a competitor's website to understand their design system and trade-offs. Using Taste DNA, they gain insights into why specific colors, spacings, and typographic choices were made, informing their own design decisions.
• •AI-Driven UI Generation: A product team drops taste.json into Cursor rules or Figma Make prompts. AI-generated designs then adhere to the target site's design language with consistent spacing, color, and typography, reducing manual corrections.
• •Design System Documentation: A frontend engineer captures the design tokens of an existing application by running Taste on key pages. The measured values in the Design Map become a token specification for the design system, ensuring consistency across the team.
• •Agent Context for Code Generation: A developer includes taste.md in Claude Code's context. When generating UI components, the agent respects the site's design constraints and trade-offs, producing code that fits seamlessly into the existing design.
• •Design Audit and Consistency Check: A design operations lead runs Taste on multiple pages of a product. By comparing the Taste DNA files, they identify any drift in spacing, color usage, or typographic hierarchy, enabling targeted fixes.
• •Educational Tool for Design Students: An instructor uses Taste to deconstruct well-designed sites, showing students how trade-offs like rejecting rounded corners for sharp borders reduce visual softness. Students learn to think in constraints, not just aesthetics.

Who is this for?

Designers looking to deconstruct and understand the design systems of leading websites. Frontend engineers and design system maintainers who need accurate token values and trade-off documentation. AI/ML practitioners building agent workflows that require design context for UI generation. Product teams using tools like Claude Code, Cursor, Windsurf, or Figma Make to enforce brand consistency in AI-assisted design. Design educators and researchers analyzing visual decision-making patterns.