frontend-design

Create distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic detail and creative choices. Announce: "🎨 /supergraph:frontend-design — designing [component/page]..." ## When to Use - User asks to build a component, page, application, landing page, dashboard, or any web UI - Styling or beautifying an existing interface - Creating HTML/CSS/JS, React, Vue, or any frontend artifact ## Steps ### 1. Understand context Clarify if needed: purpose, target audience, technical constraints (framework, existing design system). Do NOT start coding yet. ### 2. Commit to a bold aesthetic direction Before coding, decide: - **Tone** — pick an extreme: brutally minimal, maximalist, retro-futuristic, organic, luxury, editorial, brutalist, art deco, soft/pastel, industrial, etc. - **Differentiation** — what is the one thing someone will remember about this UI? - **Constraints** — framework, performance, accessibility requirements **CRITICAL:** Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work — the key is intentionality. ### 3. Implement Produce working code (HTML/CSS/JS, React, Vue, etc.) that is: - Production-grade and functional - Visually striking and memorable - Cohesive with a clear aesthetic point-of-view - Meticulously refined in every detail ### 4. Handoff Deliver the working code. If the user is in a supergra...