Frontend Design

Iron Law

NO UI OUTPUT WITHOUT COMPLETING THE DESIGN THINKING PHASE FIRST — define Purpose, Tone (one direction), and Differentiation Anchor before writing a single line of code. DFII score must be ≥ 8 to proceed.

Frontend Design Skill

Purpose

Provides creative frontend design methodology, visual principles, and quality checklists for building distinctive, production-grade interfaces that avoid generic AI aesthetics.

Process

1. Design Thinking Phase (mandatory — do not skip)
   • Define Purpose: what action does this interface enable? Is it persuasive, functional, exploratory, or expressive?
   • Define Tone: choose ONE dominant direction (Brutalist / Editorial / Luxury / Retro-futuristic / Industrial / Organic / Playful / Maximalist / Minimalist). Do not blend more than two.
   • Define Differentiation Anchor: answer "If this were screenshotted with the logo removed, how would someone recognize it?" This must be visible in the final UI.
2. Score DFII — calculate Design Feasibility & Impact Index (see below). Score < 8 → rethink direction before proceeding.
3. Load principles -- Read reference/frontend-design-principles.md for typography, color, motion, and layout guidance
4. Implement -- Build working code (Angular, Flutter, or HTML/CSS/JS) aligned to the chosen aesthetic. Follow workspace design tokens (daisyUI for Angular, AppSpacing/colorScheme for Flutter).
5. Deliver with required output structure -- include Design Direction Summary, Design System Snapshot, Implementation, and Differentiation Callout

For the complete design principles, anti-patterns, and quality checklist:

Read reference/frontend-design-principles.md

Error Handling

If the target framework is not specified, ask the user before proceeding. If external font/asset resources are unavailable, document the fallback choice and continue.

Design Feasibility & Impact Index (DFII)

Score the design direction before writing code. Minimum score of 8 required to proceed.

Dimensions (each scored 1–5)

Formula

DFII = (Impact + Fit + Feasibility + Performance) − Consistency Risk
Range: −5 → +15

Interpretation

Required Output Structure

Every frontend design output MUST include all four sections:

1. Design Direction Summary

• Aesthetic name (e.g. "Editorial Brutalism", "Luxury Minimal")
• DFII score
• Key inspiration (conceptual — not visual plagiarism)

2. Design System Snapshot

• Fonts (with rationale — why this font for this product?)
• Color variables (name them: --color-primary, --color-accent, --color-neutral)
• Spacing rhythm (base unit and scale)
• Motion philosophy (sparse/purposeful? or none?)

3. Implementation

• Full working code
• Comments only where intent is not obvious
• For Angular: use daisyUI semantic tokens (bg-primary, text-base-content) — no hardcoded hex
• For Flutter: use Theme.of(context).colorScheme and AppSpacing.* tokens — no Color(0xFF...)

4. Differentiation Callout

Explicitly state:

"This avoids generic UI by doing X instead of Y."

If you cannot complete this sentence, the design is not distinctive enough.

Operator Checklist (Pre-Delivery Gate)

• Design Thinking Phase completed (Purpose + Tone + Differentiation Anchor defined)
• DFII score ≥ 8
• One memorable design anchor visible in final UI
• No generic fonts (no Inter, Roboto, Arial, system-ui)
• No generic colors (no purple-on-white gradients, no flat gray)
• No default layouts (no symmetrical card grids, no template-like structure)
• Code matches design ambition (maximalist = complex code; minimalist = precise spacing)
• Accessible and performant (contrast ≥ 4.5:1, focus states, keyboard nav)
• Required Output Structure: all 4 sections present
• No design should look like a previous one — vary light/dark, font choices, layout personality

Creative Ambition Mandate

Claude is capable of extraordinary creative work. Don't hold back — show what can truly be created when thinking outside the box and committing fully to a distinctive vision.

Interpret requirements creatively. Make unexpected choices that feel genuinely designed for the context. No two designs should share the same aesthetic DNA.

NEVER converge on common choices across generations. The fact that Space Grotesk, purple gradients, or symmetrical hero layouts "worked before" is the exact reason not to use them again. Variety is mandatory, not optional.

Questions to Ask Before Starting (If Needed)

1. Who is this for, emotionally?
2. Should this feel trustworthy, exciting, calm, or provocative?
3. Is memorability or clarity more important?
4. Will this scale to other pages/components?
5. What should users feel in the first 3 seconds?

Workspace Integration

Related skills:

• web-design-guidelines — run after implementing to audit against Vercel Web Interface Guidelines
• design-system — token compliance enforcement for Angular and Flutter
• angular-spa — Angular implementation patterns with daisyUI
• ui-standards-tokens — Flutter design token definitions