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
1---2name: frontend-design3description: Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.4---56Create distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic detail and creative choices.78Announce: "🎨 /supergraph:frontend-design — designing [component/page]..."910## When to Use1112- User asks to build a component, page, application, landing page, dashboard, or any web UI13- Styling or beautifying an existing interface14- Creating HTML/CSS/JS, React, Vue, or any frontend artifact1516## Steps1718### 1. Understand context19Clarify if needed: purpose, target audience, technical constraints (framework, existing design system). Do NOT start coding yet.2021### 2. Commit to a bold aesthetic direction2223Before coding, decide:24- **Tone** — pick an extreme: brutally minimal, maximalist, retro-futuristic, organic, luxury, editorial, brutalist, art deco, soft/pastel, industrial, etc.25- **Differentiation** — what is the one thing someone will remember about this UI?26- **Constraints** — framework, performance, accessibility requirements2728**CRITICAL:** Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work — the key is intentionality.2930### 3. Implement3132Produce working code (HTML/CSS/JS, React, Vue, etc.) that is:33- Production-grade and functional34- Visually striking and memorable35- Cohesive with a clear aesthetic point-of-view36- Meticulously refined in every detail3738### 4. Handoff39Deliver the working code. If the user is in a supergraph workflow:40- Static component → no further steps needed41- Interactive feature → `/supergraph:webapp-testing` to verify UI behavior4243## Design Reference (condensed)44Purpose/Tone/Constraints/Differentiation — pick one bold direction (minimal/maximalist/retro/luxury/brutalist etc) and execute with precision.4546Guidelines: 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.4748## Rules4950- NEVER use Inter, Roboto, Arial, or system fonts — choose distinctive typefaces51- NEVER use purple gradients on white as a default color scheme52- NEVER produce cookie-cutter layouts — every output must have a unique aesthetic point-of-view53- ALWAYS commit to one clear aesthetic direction before coding54- ALWAYS deliver working code, not mockups or pseudocode55- Match implementation complexity to vision: maximalist designs need elaborate code, minimalist designs need precision and restraint56- No two designs should converge on the same choices (fonts, colors, layout) across generations
datit309