How do I install the Agent Front Design skill?

Run npx skillmds@latest add northseadl/agent-front-design in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Agent Front Design safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Agent Front Design?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Agent Front Design free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Agent Front Design?

northseadl (@northseadl) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Agent Front Design by northseadl — Agent Skill

Name: Agent Front Design
Author: northseadl

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.

northseadl ccc164d 7 files · 21.6 KB Updated Sep 17, 2026

File contents

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)

---name: agent-front-designdescription: 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 ExcellenceProduce stunning, implementable frontend designs. Break free from AI aestheticdefaults. Push every component from "functional" to "remarkable."## Modes### ExploreCreative direction exploration. Generate 2-3 candidates with rationale and risks.No "publishable" conclusion. Read `references/aesthetic-intelligence.md` first.### ProductionConverge to one implementable spec. Requires:1. Choose one direction, reject alternatives with reasons2. Full spec: color, typography, layout, component tree, state coverage3. Run Critique (see below) — fix all 🔴 before delivery4. Output quality score and release recommendation### CritiqueSelf-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 RoutingRead 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 ChecklistFinal output must include:1. One primary direction + rejected alternatives with reasons2. Color palette with OKLCH values and brand rationale3. Typography pairing with contrast justification4. Key page layouts (ASCII/wireframe)5. Component tree with state boundaries6. State coverage: `loading / empty / error / success / permission`7. Critique report (or reason for skip)8. Quality score and release recommendation9. Accessibility checkpoints (contrast, keyboard, semantics)10. Performance budget (LCP/INP/CLS targets)

Frequently asked questions