Tasteful Frontend — AI skill for Claude Code

Tasteful Frontend

[中文版](README_CN.md) | English Version

An AI-native **design spec generator** for web and mobile. Six-phase workflow outputs three-layer W3C DTCG design tokens + layout specifications instead of code. Supports bidirectional sync with Penpot, Figma, and other visual design tools.

This skill fights generic "AI slop" — predictable palettes, overused fonts, poor accessibility — with opinionated design thinking, 66+ brand reference libraries, and a human-in-the-loop exploration phase.

What's New in v3.0

Major workflow redesign: **six-phase design process with three-layer tokens**.

• Six-phase workflow — Anchor (understand) -> Frame (structure) -> Search (explore visuals) -> Systematize (build token system) -> Compose (assemble spec) -> Verify (quality check)
• Style Tile exploration — Phase 2 generates 3-5 visual direction options for human selection before committing to a direction
• Three-layer token architecture — Primitive (raw values) -> Semantic (purpose mapping) -> Component (UI binding). Change a primitive, the entire system updates.
• Project .design/ directory — Structured output directory with progressive population across phases
• 66+ brand reference libraries — Real-world brand tokens, guardrails, and agent prompts as vocabulary source
• Constraint timing — Loose in exploration (Phase 0-2), strict in execution (Phase 3-5). Creativity before precision.

Why Three Layers?

Single-layer tokens create a brittle system: renaming "accent" means updating every reference. Three layers create indirection — primitives define what exists, semantics define what things mean, components define where things go. Changing a brand color means updating one semantic token; the entire component layer follows automatically.

Six-Phase Workflow

Phase 0: Anchor    -> Understand problem, create brief.yaml
Phase 1: Frame     -> Information architecture, layout skeleton
Phase 2: Search    -> 3-5 Style Tiles, human selec