frontend-designlisted

# Frontend Design with Visual Verification Build distinctive, production-grade frontend interfaces — then verify they actually look right in a real browser. This skill closes the gap between "generate code" and "ship something beautiful" by combining bold design thinking with a browser-based verification loop. ## Why Visual Verification Matters Writing frontend code without seeing the result is like painting blindfolded. Generic AI-generated UIs happen because the model never sees what it produced — it can't catch misaligned layouts, clashing colors, or broken animations. This skill ensures you always close the loop: generate code, open it in a browser, see what it looks like, and iterate until it's genuinely good. ## Phase 1: Design Thinking Before writing any code, commit to a clear aesthetic direction. The goal is intentionality — bold maximalism and refined minimalism both work when executed with precision. ### Aesthetic Direction Pick a strong conceptual direction and execute it consistently: - **Purpose**: What problem does this interface solve? Who uses it? - **Tone**: Choose something specific — brutally minimal, retro-futuristic, luxury editorial, organic/natural, playful, industrial, art deco, soft/pastel. Vague directions produce vague results. - **Differentiation**: What makes this memorable? Identify one signature element someone will remember. ### Typography Font choice is the single biggest design signal. Generic fonts (Inter, Roboto, Arial, system def