Frontend Design

Problem to Solve

When models generate frontend pages, the usual issue is not whether a page can be rendered, but whether it looks like one of the same defaults: a warm cream background with a high-contrast serif and terracotta accent, a near-black layout with acid-green accents, or a broadsheet grid with hairline rules. If those choices are not tied to the subject, the result feels templated. This skill asks the model to write down aesthetic decisions before producing a page that merely looks like a demo. It targets front-end work where HTML, CSS, and copy need to be produced together, with the subject, audience, and single page job fixed early.

How It Works and Where It Fits

• Ground the subject and tokens: express the palette as 4–6 named hex values, assign distinct roles to display, body, and utility typefaces, and compare directions with one-sentence layouts and ASCII wireframes.
• Critique before building: check whether the plan is only a reusable default; if so, revise it and state the reason, then implement the confirmed plan.
• Handle implementation details: avoid selector conflicts such as .section overriding .cta, and respect mobile layout, keyboard focus, prefers-reduced-motion, and action-oriented copy like Save changes.
• Boundaries: it is best for design judgment and expressive front-end pages, not for low-variance admin panels, standard component-library assembly, or fully locked brand systems; when the brief pins the visual direction, the brief wins.