Overview
Frontend Aesthetics loads design judgment into your agent — the difference between interfaces that look deliberately designed and the statistical average that reads as AI-generated. The core file carries the prime directive (commit to a named direction), fifteen non-negotiables, and a triage order for generic-looking UI; eight reference files go deep on aesthetic direction, typography, color systems, layout and composition, atmosphere and texture, motion choreography, the 27-entry slop catalog with antidotes, and the craft-details finishing pass — loaded only when the task needs them.
What it grants
- 01The naming ritual: commit to one aesthetic direction and derive every choice from it
- 02Typography doctrine: characterful pairings, fluid scales, tracking/leading tuning — and the banned-defaults list, including second-order slop
- 03Color systems in OKLCH: tinted neutrals, scarce accents, dark themes designed rather than inverted
- 04Composition beyond centered-everything: asymmetry, grid-breaks, whitespace as material
- 05Atmosphere: grain, patterns, shadow languages, borders as protagonists
- 06Motion choreography: one orchestrated entrance over twenty hover effects, easing as personality
- 07The 27-entry anti-AI-slop catalog — every tell, every antidote, swept before shipping
- 08The finishing pass: focus and selection theming, designed empty/loading/error states, favicon/OG, optical alignment
Try it like this
rune@fable5:~
agent> Restyle this landing page the frontend-aesthetics way — name a direction, retheme the tokens, and sweep the slop catalog.