d-wwei

Tasteful Frontend — AI skill for Claude Code

AI community

An AI-native frontend design skill (prompt) for building modern, highly-aesthetic, and accessible web interfaces.

How to install Tasteful Frontend

This entry records only its repository, not the path inside it, so there is no exact command to give. Open d-wwei/tasteful-frontend and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Tasteful Frontend does

An AI-native frontend design skill (prompt) for building modern, highly-aesthetic, and accessible web interfaces.

Alternatives in AI

Agency Agents — A complete AI agency at your fingertips - From frontend wizards to Reddit community ninjas, from whimsy inject 148k ★
Artifacts Builder — Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web tech 97.5k ★
Open Pencil — AI-native design editor 8k ★

README

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