What problem does it solve? AI-generated web designs tend to cluster around a few generic looks—cream backgrounds with serif displays, dark themes with acid accents, or broadsheet layouts—regardless of the subject. This Skill provides a structured design methodology that pushes every palette, typography, and layout decision to be grounded in the specific brief rather than templated defaults. ## Core Features & Use Cases - Brief-Grounded Design Direction: Pins down the subject, audience, and page purpose before designing, deriving aesthetic choices from the subject's own world and materials. - Two-Pass Planning Workflow: Brainstorms a compact token system (color, type, layout, signature element), then critiques it against generic defaults before writing any code. - Typography and Motion Guidance: Covers deliberate typeface pairing, type scales, structural devices, and purposeful animation decisions. - Interface Copywriting Principles: Provides rules for writing UI copy—active voice, consistent action naming, honest error states, and conversational register. - Use Case: When asked to build a landing page for a specialty coffee roaster, use this Skill to produce a design plan with a distinctive palette and signature element drawn from coffee culture, rather than a generic hero-with-gradient template. ## Quick Start Ask the AI to design a landing page for your product using the frontend-design skill, providing your subject, audience, and any visual direction you have in mind.
