/frontend-design

name: frontend-design
description: >
  MUST USE for any frontend, UI, or web interface implementation.
  Enforces production-grade visual quality, accessibility, responsive
  design, and professional polish. Triggers on: "build a UI", "frontend",
  "website", "landing page", "dashboard", "make it look professional",
  any React/Vue/Svelte/HTML component work. Routed by using-superpowers,
  or invoke directly via /frontend-design.

Professional Frontend Design

This skill transforms generic AI-generated UIs into production-grade, visually distinctive interfaces. It provides a design reasoning framework, industry-aware style selection, and concrete engineering standards.

Scope Gate — Before Anything Else

1. Check: does the project already have a design system, component library, or style guide?

• Look for: `tailwind.config`, `theme.ts/js`, `tokens.json`, `design-system/`, `styles/`, existing component library (shadcn, MUI, Chakra, etc.)

2. If YES (existing design system):

• Read and reference the existing system. Do NOT generate a new one.
• Skip to "Quality Standards" section — apply those standards within the existing design framework.
• Only generate new design tokens if the existing system has clear gaps for the requested feature.

3. If NO (greenfield):

• Proceed with full Design System Generation below.

Design System Generation

Before writing any frontend code, walk through this reasoning framework. The goal is to make deliberate design decisions — not default to generic blue-and-white SaaS templates.

Step 1: Analyze Requirements

Identify these before choosing any visual direction:

• **Product type** — What category? (SaaS, e-commerce, dashboard, portfolio, etc.)
• **Audience** — Who uses this? (developers, executives, consumers, elderly, children)
• **Platform** — Web, mobile, desktop, or cross-platform?
• **Constraints** — Existing brand guidelines? Required framework? Accessibility level (AA/AAA)?
• **Trust sensitivity** — How much does visual credibility matter? (critical for finance/healthcare, lower for playful apps)
• **Primary user goal** — What does the user come here to do? (scan, convert, explore, act)

Step 2: Select Design Direction

Use the Industry Reference Table (below) as a starting point, then refine based on project specifics.

Choose explicitly:

• **Style** — The visual language (glassmorphism, brutalism, flat, etc.)
• **Color mood** — Emotional tone (trust blue, energetic orange, calm pastels, dark OLED)
• **Typography mood** — Character (professional, playful, editorial, technical)
• **Key effects** — Signature interactions (hover lifts, parallax, scroll reveals, blur)
• **Density level** — Compact (data-dense, minimal padding), balanced (standard), or spacious (generous whitespace, editorial feel)
• **Visual anchor** — What element draws the eye first? (hero metric, primary CTA, key image, headline)

Step 3: Define Anti-Patterns

Every product type has styles that actively harm it. Name them explicitly before implementation:

• Finance: playful colors, excessive animation, dark mode by default
• Healthcare: bright neon, motion-heavy, low contrast
• Creative agency: corporate minimalism, generic templates
• Government: ornate design, low contrast, motion effects

Step 4: Output Design Summary

Before writing code, output a brief design system summary:

**Design System**: [Product] — [Style]
**Colors**: [Primary] / [Accent] / [Neutral] / [Semantic]
**Typography**: [Heading font] + [Body font] — [Scale]
**Effects**: [Key interactions]
**Avoid**: [Named anti-patterns]

This takes 30 seconds and prevents hours of rework from misaligned visual direction.

---

Distinctiveness Enforcement

Most AI-generated UIs fail here. They're technically correct but visually forgettable — the same blue-and-white SaaS template with rounded cards and a gradient hero. Professional UIs have identity.

The UI must include at least one of these distinctiveness signals:

• **Strong typography decision** — A deliberate scale, weight contrast, or editorial type treatment that gives the interface character
• **Distinctive layout structure** — Something beyond standard stacked sections (asymmetric grid, bento layout, split-screen, offset columns)
• **Controlled visual motif** — A repeating design element (border system, grid pattern, spacing rhythm, accent shape) that ties the interface together
• **Deliberate density choice** — Intentionally compact for data-rich contexts, or intentionally spacious for editorial/luxury feel — not just "default padding"

Avoid these generic patterns:

• Default SaaS layout (hero + 3 feature cards + testimonials + pricing + footer)
• Random gradients without structural purpose
• Card grids where every card has equal visual weight
• "Pleasant but forgettable" — passes review but has no identity

**The test:** If the UI could belong to any startup with a search-and-replace on the logo and copy, it has failed. The design direction chosen in Step 2 should be visible in the final output.

---

Style Reference

25 styles with key characteristics. Use this to select and combine styles — most projects blend 1-2 primary styles.

| Style | Key Characteristics | Best For | Avoid When | |---|---|---|---| | **Minimalism / Swiss** | Monochromatic, geometric grid, essential elements only | Enterprise, dashboards, tools | Playful brands, children's products | | **Glassmorphism** | `backdrop-filter: blur(10-20px)`, translucent overlays, vibrant backgrounds | Modern SaaS, fintech dashboards | Low-performance targets, print | | **Brutalism / Neubrutalism** | Bold borders 2-4px, primary colors, thick offset shadows, no gradients | Creative agencies, portfolios, Gen-Z | Corporate, healthcare, finance | | **Neumorphism / Soft UI** | Dual shadows (light+dark), embossed/debossed, monochromatic, rounded | Wellness, smart home, controls | Data-dense, text-heavy, low contrast risk | | **Claymorphism** | Soft 3D, thick bord