nguyenthienthanh 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) andrules/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).
Pass 2 — self-critique the plan against the brief. Before building: if any part of the plan reads like the generic default you'd produce for any similar page — rather than a choice made for this brief — revise it, and say what you changed and why. Only then write code.
Persist the result: if .claude/design/design-system.md has no Signature / DoDont, write them
(see rules/agent/design-system-persistence.md).
Typography (the fastest tell of AI-default)
- Avoid the default tells: Inter, Roboto, Open Sans, Arial, raw system-ui.
- Reach for a curated pairing instead: IBM Plex Sans/Serif, Newsreader, Space Grotesk, Bricolage Grotesque, Playfair Display (display only), JetBrains Mono (code/labels).
- Pair with contrast: one expressive display/serif + one clean sans. Make weight & size jumps deliberate and large (e.g. 14 → 20 → 40, not 16 → 18 → 22) — timid scales read as generic.
Color
- Dominant + sharp accent, not an evenly-distributed rainbow: one color owns ~70% of the surface, the accent is used sparingly for the single primary action (ties to the house "1 primary action per screen" rule).
- Derive the palette from ONE hue (see the
design-tokensskill for OKLCH generation) so it reads as a system. - Accessible-first: verify text/background contrast meets WCAG AA before aesthetics.
Banned AI-default clusters (name them to avoid them)
These are defaults, not choices — they show up regardless of subject. If the plan lands on one by accident, treat it as a signal to re-pick:
- Warm cream (
#F4F1EA-ish) background + high-contrast serif + terracotta accent. - Near-black minimal + a single acid-green / electric accent.
- Hairline-rule "broadsheet" — thin gray dividers everywhere as the whole personality.
- The type tells already listed above (Inter / Roboto / Open Sans / raw system-ui). Any of these is legitimate for a specific brief — but only if chosen for that brief, never as the fallback.
Verify with your eyes (screenshot self-critique)
When the environment can render (dev server / artifact), critique your own work as you build by taking
screenshots — don't ship UI you haven't looked at. For the full render → screenshot → critique → iterate
loop (multi-viewport + dark mode + conformance rubric), hand off to the design-vision-loop skill.
Match ambition to implementation
Only promise polish you'll actually build. A "distinctive" spec with a half-built component reads worse than a restrained one done fully. Ship the smaller, coherent version.
See also: rules/agent/theme-consistency.md, rules/agent/accessibility-rules.md, rules/agent/design-system-persistence.md, the design-tokens skill, and the design-vision-loop skill.