What problem does it solve? AI-generated web designs tend to cluster around a few templated looks, producing pages that read as generic defaults rather than intentional choices. This Skill provides a design-lead workflow for creating distinctive, brief-specific visual identities with deliberate typography, color, layout, and copy. ## Core Features & Use Cases - Design planning workflow: Brainstorm a compact token system covering color (4-6 named hex values), type roles, layout concepts with ASCII wireframes, and a single signature element before writing code. - Anti-template calibration: Identifies common AI-generated design defaults (cream/serif/terracotta, dark/acid accent, broadsheet layouts) and pushes choices toward brief-specific directions. - Self-critique and restraint: Reviews plans against the brief, spends boldness on one signature element, and enforces a quality floor including responsive layout, keyboard focus, and reduced motion. - Use Case: When asked to build a landing page for a new product, use this Skill to first define the subject, audience, and page goal, then produce a design plan with a distinctive palette, type pairing, and signature element before implementing the HTML/CSS. ## Quick Start Use the frontend-design skill to design and build a distinctive landing page for my product brief, starting with a design plan before writing any code.
