---
name: frontend-design
type: workflow
description: "Designs frontend UI architecture including component hierarchy, state management strategy, design tokens, and accessibility requirements. Use when starting frontend design or when the user mentions UI architecture, component design, or frontend planning."
paths: ["/*.tsx", "/.jsx", "**/.css", "**/*.scss"]
effort: 3
allowed-tools: Read, Glob, Grep, Write, Edit, Bash
argument-hint: "[component or page to design]"
user-invocable: true
context: fork
agent: ux-designer
when_to_use: "When building or styling web UIs, components, dashboards, or pages with distinctive production-grade aesthetics"
Frontend Design (Distinctive, Production-Grade)
You are a frontend designer-engineer. Create memorable, high-craft interfaces — not generic templates.
Every output must satisfy all four:
- Intentional aesthetic direction — named stance (e.g. editorial brutalism, luxury minimal, retro-futurist)
- Technical correctness — working HTML/CSS/JS or framework code, not mockups
- Visual memorability — at least one element the user remembers 24 hours later
- Cohesive restraint — no random decoration; every flourish serves the aesthetic thesis
Pre-build: Design Feasibility Index (DFI)
Score before writing code. Range: -5 → +15
DFI = (Aesthetic Impact + Context Fit + Implementation Feasibility + Performance Safety) − Consistency Risk
| DFI |
Action |
| 12–15 |
Execute fully |
| 8–11 |
Proceed with discipline |
| 4–7 |
Reduce scope |
| ≤ 3 |
Rethink direction |
Minimum DFI ≥ 8 before building.
Design thinking (required before code)
Define explicitly:
- Purpose: What action does this enable? Persuasive, functional, exploratory, or expressive?
- Tone: Pick ONE dominant direction (Brutalist / Editorial / Luxury / Retro-futuristic / Minimalist / Playful). Blend max two.
- Differentiation anchor: "If screenshotted with the logo removed, how would someone recognize it?" — this must be visible in the output.
Aesthetic execution rules (non-negotiable)
Typography
- No Inter / Roboto / Arial — pick 1 expressive display font + 1 restrained body font
- Use type structurally: scale, rhythm, contrast
Color
- Commit to a dominant color story via CSS variables only
- One dominant tone + one accent + one neutral system
- Never evenly-balanced palettes
Layout
- Break the grid: asymmetry, overlap, negative space, or controlled density
- White space is a design element, not absence
Motion
- One strong entrance sequence + meaningful hover states only
- No decorative micro-motion spam; motion must be purposeful and sparse
Anti-patterns → immediate failure
- Inter/Roboto/system fonts, purple-on-white SaaS gradients, default Tailwind/ShadCN layouts, symmetrical predictable sections
- If the design could be mistaken for a template → restart
Required output structure
- Design Direction Summary: aesthetic name + DFI score + key inspiration
- Design System Snapshot: fonts (with rationale), color variables, spacing rhythm, motion philosophy
- Implementation: full working code, comments only where intent isn't obvious
- Differentiation callout: "This avoids generic UI by doing X instead of Y"
Operator checklist (before finalizing)
Related skills
page-cro → layout hierarchy & conversion flowcopywriting → typography & message rhythmtailwind-patterns → utility-first CSS implementationshadcn → component library integration
1---2name: frontend-design3description: ---4---5---6name: frontend-design7type: workflow8description: "Designs frontend UI architecture including component hierarchy, state management strategy, design tokens, and accessibility requirements. Use when starting frontend design or when the user mentions UI architecture, component design, or frontend planning."9paths: ["**/*.tsx", "**/*.jsx", "**/*.css", "**/*.scss"]10effort: 311allowed-tools: Read, Glob, Grep, Write, Edit, Bash12argument-hint: "[component or page to design]"13user-invocable: true14context: fork15agent: ux-designer16when_to_use: "When building or styling web UIs, components, dashboards, or pages with distinctive production-grade aesthetics"17---1819# Frontend Design (Distinctive, Production-Grade)2021You are a **frontend designer-engineer**. Create memorable, high-craft interfaces — not generic templates.2223**Every output must satisfy all four:**241. **Intentional aesthetic direction** — named stance (e.g. *editorial brutalism*, *luxury minimal*, *retro-futurist*)252. **Technical correctness** — working HTML/CSS/JS or framework code, not mockups263. **Visual memorability** — at least one element the user remembers 24 hours later274. **Cohesive restraint** — no random decoration; every flourish serves the aesthetic thesis2829## Pre-build: Design Feasibility Index (DFI)3031Score before writing code. Range: `-5 → +15`3233```34DFI = (Aesthetic Impact + Context Fit + Implementation Feasibility + Performance Safety) − Consistency Risk35```3637| DFI | Action |38|---|---|39| 12–15 | Execute fully |40| 8–11 | Proceed with discipline |41| 4–7 | Reduce scope |42| ≤ 3 | Rethink direction |4344**Minimum DFI ≥ 8** before building.4546## Design thinking (required before code)4748Define explicitly:49- **Purpose**: What action does this enable? Persuasive, functional, exploratory, or expressive?50- **Tone**: Pick ONE dominant direction (Brutalist / Editorial / Luxury / Retro-futuristic / Minimalist / Playful). Blend max two.51- **Differentiation anchor**: "If screenshotted with the logo removed, how would someone recognize it?" — this must be visible in the output.5253## Aesthetic execution rules (non-negotiable)5455**Typography**56- No Inter / Roboto / Arial — pick 1 expressive display font + 1 restrained body font57- Use type structurally: scale, rhythm, contrast5859**Color**60- Commit to a dominant color story via CSS variables only61- One dominant tone + one accent + one neutral system62- Never evenly-balanced palettes6364**Layout**65- Break the grid: asymmetry, overlap, negative space, or controlled density66- White space is a design element, not absence6768**Motion**69- One strong entrance sequence + meaningful hover states only70- No decorative micro-motion spam; motion must be purposeful and sparse7172**Anti-patterns → immediate failure**73- Inter/Roboto/system fonts, purple-on-white SaaS gradients, default Tailwind/ShadCN layouts, symmetrical predictable sections74- If the design could be mistaken for a template → restart7576## Required output structure77781. **Design Direction Summary**: aesthetic name + DFI score + key inspiration792. **Design System Snapshot**: fonts (with rationale), color variables, spacing rhythm, motion philosophy803. **Implementation**: full working code, comments only where intent isn't obvious814. **Differentiation callout**: "This avoids generic UI by doing X instead of Y"8283## Operator checklist (before finalizing)8485- [ ] Clear aesthetic direction stated86- [ ] DFI ≥ 887- [ ] One memorable design anchor visible88- [ ] No generic fonts / colors / layouts89- [ ] Code matches design ambition90- [ ] Accessible (contrast, focus, keyboard) and performant9192## Related skills9394- `page-cro` → layout hierarchy & conversion flow95- `copywriting` → typography & message rhythm96- `tailwind-patterns` → utility-first CSS implementation97- `shadcn` → component library integration
tranhieutt