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 supergraph workflow:

• Static component → no further steps needed
• Interactive feature → /supergraph:webapp-testing to verify UI behavior

Design Reference (condensed)

Purpose/Tone/Constraints/Differentiation — pick one bold direction (minimal/maximalist/retro/luxury/brutalist etc) and execute with precision.

Guidelines: distinctive typography (not Arial/Inter), cohesive CSS variables, CSS-only motion with staggered reveals, asymmetric/spatial composition, atmospheric backgrounds (gradients/noise/mesh/shadows). Avoid generic AI slop (purple gradients, cookie-cutter layouts). Match complexity to vision — maximalist = elaborate, minimal = precise.

Rules

• NEVER use Inter, Roboto, Arial, or system fonts — choose distinctive typefaces
• NEVER use purple gradients on white as a default color scheme
• NEVER produce cookie-cutter layouts — every output must have a unique aesthetic point-of-view
• ALWAYS commit to one clear aesthetic direction before coding
• ALWAYS deliver working code, not mockups or pseudocode
• Match implementation complexity to vision: maximalist designs need elaborate code, minimalist designs need precision and restraint
• No two designs should converge on the same choices (fonts, colors, layout) across generations