# Agent Front Design

> 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.

- Skill: `northseadl/agent-front-design` (Agent Skill, multi-file: 7 files)
- Install (CLI): `npx skillmds@latest add northseadl/agent-front-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/northseadl/agent-front-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: northseadl (https://skillmd.com/u/northseadl)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/northseadl/agent-front-design

---


# 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:
1. Choose one direction, reject alternatives with reasons
2. Full spec: color, typography, layout, component tree, state coverage
3. Run Critique (see below) — fix all 🔴 before delivery
4. 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:

1. One primary direction + rejected alternatives with reasons
2. Color palette with OKLCH values and brand rationale
3. Typography pairing with contrast justification
4. Key page layouts (ASCII/wireframe)
5. Component tree with state boundaries
6. State coverage: `loading / empty / error / success / permission`
7. Critique report (or reason for skip)
8. Quality score and release recommendation
9. Accessibility checkpoints (contrast, keyboard, semantics)
10. Performance budget (LCP/INP/CLS targets)