document-skills-frontend-design

Ground every choice in the subject matter of the brief, then write a design plan with named hex colors, deliberate typefaces, and a layout concept before coding. Review the plan against known AI design defaults and revise anything that reads as a template.

Common tells include cream backgrounds with terracotta accents, SaaS-card kits with uniform border-radius, ALL-CAPS eyebrow labels, single-word headline accents, and fade-and-slide-up entrances on every section. These are defaults rather than deliberate choices.

Use one typeface family or two clearly distinct ones, chosen specifically for the brief rather than default families. Set a clear type scale with intentional weights and spacing, keep line lengths under 80 characters, and give serif body text slightly more line-height.

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 confirming is appropriate when it shows what changed.

The guidance is advisory rather than executable; it contains no scripts or code generators. When a brief explicitly requests a specific visual direction, including one of the listed default looks, the brief's own requirements take priority.