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.