AI-consumed reference. Produce taste; do not re-implement enforcement. This skill complements rules/agent/design-system-usage.md + rules/agent/theme-consistency.md (which enforce token usage) and rules/agent/accessibility-rules.md (which enforces a11y) — cross-link, don't duplicate.

Frontend Aesthetics

Raise output from consistent & correct to distinctive. Default style (overridable by the host project): flat, clean, accessible, ONE restrained accent — no neon, no glow, no gradient-mesh, no sparkle. "Distinctive" = tasteful type + cohesive tokens + dominant color + sharp accent, NOT flashy maximalism. This default loses to the host project's own design language: if the project's CLAUDE.md, design system, or brand explicitly calls for neon/glow/gradients (gaming, nightlife, crypto, …), follow the project — the constraint is anti-slop, not anti-brand.

Why this matters (Anthropic, Improving frontend design through skills): generic "AI-look" UI is distributional convergence — safe choices dominate training data, so sampling drifts to them. A taste layer + an explicit plan-then-critique step is the documented corrective. This skill is that layer.

Two-pass process (do this BEFORE writing any UI code)

Pass 1 — compact design plan. Write a short plan, not code:

• Color: 4–6 named hex values with role names (derive from ONE hue — see design-tokens).
• Type: ≥2 type roles (display / body / mono) + the deliberate scale jumps (e.g. 14→20→40).
• Layout: a sentence of intent + a rough ASCII wireframe of the key screen.
• Signature element: the ONE distinctive thing that makes this product not-generic (a specific treatment of nav / hero / card / empty-state — pick one, commit).