| name | agent-front-design |
| metadata | {"version":"0.2.0"} |
| description | Frontend design blueprints with craftsmanship scoring, self-critique loops, and engineering handoff. Aesthetic intelligence against AI homogeneity. Use for: UI/UX design specs, design system creation, visual direction exploration, component design review, design-to-engineering handoff. |
Frontend Design Excellence
Produce stunning, implementable frontend designs. Break free from AI aesthetic
defaults. Push every component from "functional" to "remarkable."
Modes
Explore
Creative direction exploration. Generate 2-3 candidates with rationale and risks.
No "publishable" conclusion. Read references/aesthetic-intelligence.md first.
Production
Converge to one implementable spec. Requires:
- Choose one direction, reject alternatives with reasons
- Full spec: color, typography, layout, component tree, state coverage
- Run Critique (see below) — fix all 🔴 before delivery
- Output quality score and release recommendation
Critique
Self-evaluation as a harsh design critic. Breaks you out of aesthetic comfort zones.
Auto-triggered at end of Production. User-triggered anytime via
"critique", "残酷审视", "review the design."
Execute: read references/critique-protocol.md, run the full protocol.
Default flow: Explore → Production (includes Critique) → Deliver.
Reference Routing
Read on demand, by task phase:
| Phase | File | When |
|---|
| Direction | references/aesthetic-intelligence.md | Always at start — the core |
| Critique | references/critique-protocol.md | Production end, or user request |
| Engineering | references/design-system.md | Defining tokens, modern CSS |
| IA/Interaction | references/page-patterns.md | Page structure, states, flows |
| Handoff | references/engineering-handoff.md | React/Vue delivery |
Delivery Checklist
Final output must include:
- One primary direction + rejected alternatives with reasons
- Color palette with OKLCH values and brand rationale
- Typography pairing with contrast justification
- Key page layouts (ASCII/wireframe)
- Component tree with state boundaries
- State coverage:
loading / empty / error / success / permission
- Critique report (or reason for skip)
- Quality score and release recommendation
- Accessibility checkpoints (contrast, keyboard, semantics)
- Performance budget (LCP/INP/CLS targets)
