frontend-design

Ground every design choice in the subject matter of the brief, then plan a token system of color, type, and layout before coding. Review the plan against common AI defaults like cream backgrounds with terracotta accents or uniform rounded cards, and revise anything that reads as a template.

Common tells include warm cream backgrounds with terracotta accents, near-black backgrounds with acid-green accents, identical rounded SaaS cards with soft grey shadows, tracked-out all-caps eyebrow labels, and fade-and-slide-up entrance animations on every section.

Choose one or two clearly distinct typefaces deliberately rather than defaulting to familiar families, and set a type scale with intentional weights, widths, and spacing. Keep line lengths under 80 characters and give serif body text slightly more line-height than sans-serif.

Use non-user-triggered motion sparingly, ideally as a single orchestrated page-load moment rather than scattered effects. Motion that responds to user actions like opening or expanding elements is appropriate when it shows what changed.

The skill provides design direction and critique principles rather than executable code or component libraries. When a brief explicitly requests a specific visual style, including one of the listed defaults, the brief's requirements take priority over the anti-default guidance.