frontend-design

Ground every design decision in the specific subject of the brief rather than defaulting to common patterns. Define a compact token system with named colors, deliberate type pairings, and one signature element, then critique the plan against known AI design clichés before building.

Three overused looks are a cream background with serif display type and terracotta accents, a near-black background with a single acid-green or vermilion accent, and broadsheet layouts with hairline rules. These are valid only when the brief explicitly calls for them.

Pair a characterful display face used with restraint with a complementary body face, plus a utility face for captions or data if needed. Set a clear type scale with intentional weights, widths, and spacing so the typography itself becomes a memorable part of the design.

Use animation only where it serves the subject, such as a page-load sequence, scroll-triggered reveal, or hover micro-interactions. One orchestrated moment usually lands better than scattered effects, and excessive animation often signals an AI-generated design.

The Skill provides principles and process guidance rather than executable code or assets, so output quality depends on the AI's execution. It also cannot enforce visual verification unless the environment supports screenshots for self-critique.