frontend-designlisted

# Frontend Design Skill ## Purpose Commit to an explicit, defensible aesthetic direction before writing UI code, so the result reads as a designed thing rather than a template. ## When to use Use this skill when building new UI or reshaping existing UI and the visual identity is in play. Use `design-aesthetics-plan.md` for brand-level direction without code, `web-landing-page.md` for page structure and copy, and `motion-design.md` for motion strategy. ## Inputs - product or subject, audience, and the page's single job - brand constraints, existing tokens, or reference material - framework and styling stack - any stated visual direction (the brief's own words always win) ## Output Return, in two passes: 1. A short design plan — palette as 4–6 named hex values, typefaces for 2+ roles (display, body, optional utility), a layout concept with an ASCII wireframe, and one signature element the page will be remembered by. 2. A self-critique of that plan against the brief, then the implementation, deriving every color and type decision from the revised plan. ## Constraints - name the aesthetic direction explicitly before writing code (editorial, brutalist, dark maximalist, retro-futurist, etc.) - ban default-feel typefaces — no Inter, Arial, Roboto, Helvetica — unless the brief demands them - avoid the three current AI-design clichés unless the brief asks for one: cream `#F4F1EA` + high-contrast serif + terracotta accent; near-black + single acid-green or vermilion accen