frontend-design

Ground every design choice in the subject's own world—its materials, artifacts, and vernacular—rather than reaching for default patterns. Define a compact token system with named hex colors, deliberate type pairings, and one signature element, then critique the plan against the brief before coding.

Three overused looks are: a warm cream background with high-contrast serif display and terracotta accent, a near-black background with acid-green or vermilion accent, and broadsheet layouts with hairline rules and dense columns. These are only appropriate when the brief specifically 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: page-load sequences, scroll-triggered reveals, hover micro-interactions, or ambient atmosphere. One orchestrated moment usually lands harder than scattered effects, and excess animation can make a design feel AI-generated.

The Skill provides process guidance and principles rather than executable code or asset generation, so output quality depends on the model's execution. It also requires a clear brief or the ability to define the subject, audience, and page purpose before designing.