Agent front design

Skill northseadl/norix-skills/agent-front-design

即插即用的 AI Agent 技能集合 — 飞书集成 · Mermaid 图表 · Codex 编排 · 前端设计规格

Install

npx -y skills add northseadl/norix-skills --skill agent-front-design

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
6 stars6 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

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

2.4 KB, as published. Nobody here has run it

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)