Skip to content
IN DEVELOPMENT设计审美判断力Critique ProtocolReact / Vuev0.2.0

前端卓越设计

审美判断力 + 精工度评分 + 自我批评循环

以审美判断力驱动前端设计,而非套用模板。Explore/Production 双模式确保方案从发散到收敛,Critique Protocol 在交付前执行自我批评循环。反 AI 审美同质化,输出精工级、可实施的设计规格。

前端卓越设计
设计方案启动
$"帮我设计一个订单管理页面"
① 加载 aesthetic-intelligence.md — 审美锚定
② Explore 模式 — 2-3 方向候选
A. 信息密度型(数据驱动决策场景)
B. 卡片流型(快速扫描+批量操作)
→ 用户选择方向 B
③ Production 模式 — 收敛为可实施规格
④ Critique Protocol — 自我批评循环
Quality Score: 89/100
OK Production Ready ✅ — 输出工程交接文档

核心能力

审美判断力引擎

核心参考 aesthetic-intelligence.md。每个方案基于审美维度评估,而非套模板。破除 AI 审美同质化。

Critique Protocol

自我批评循环:以苛刻设计评论家视角审视方案。Production 结束自动触发,用户亦可手动唤起。

Explore → Production

Explore(发散 2-3 方向)→ Production(收敛唯一方案 + 质量评分 + 工程交接)。

参考文档路由

5 份独立参考文档按任务阶段按需加载(审美/批评/设计系统/页面模式/工程交接),避免上下文膨胀。

完整交付清单

10 项必含产出:色彩方案 OKLCH、字体配对、组件树、状态覆盖、批评报告、性能预算。

工程交接规范

输出 React/Vue 可直接实施的组件结构、Design Token 定义和现代 CSS 指引。

核心理念

从 v0.2.0 起,本技能不再是「设计教科书」——它是审美判断力提示词工程。 Agent 通过 aesthetic-intelligence.md 获得审美锚点,通过 critique-protocol.md 获得自我批评能力。

使用方式

Explore → Production 流程

对 Agent 说"帮我设计订单列表页",自动进入探索再收敛:

> "设计一个订单管理页面"

Agent 执行:
1. 加载 aesthetic-intelligence.md — 审美锚定
2. Explore 模式 — 提出 2-3 个方案方向并对比
3. 用户选择方向后进入 Production 模式
4. 收敛为唯一主方案 + ≤ 2 备选(附拒绝原因)
5. 自动触发 Critique Protocol — 修复所有 🔴
6. 输出质量评分 + 工程交接文档

直接 Production

方向已明确时跳过探索:"按这个 wireframe 出 Production 级规格"

手动 Critique

随时触发:"critique"、"残酷审视"、"review the design"

参考文档路由

Agent 按任务阶段按需加载,避免上下文膨胀:

阶段参考文档说明
方案启动references/aesthetic-intelligence.md审美判断力核心 — 始终首先加载
交付批评references/critique-protocol.mdCritique Protocol — Production 结束或用户请求时
视觉定义references/design-system.mdDesign Token 定义、现代 CSS 指引
页面结构references/page-patterns.md页面原型、状态覆盖、交互模式
工程交接references/engineering-handoff.mdReact/Vue 交接规范

最终交付必含

  1. 唯一主方案 + 拒绝替代方案的理由
  2. 色彩方案(OKLCH 值 + 品牌依据)
  3. 字体配对(对比度论证)
  4. 关键页面布局(ASCII/线框图)
  5. 组件树与状态边界
  6. 状态覆盖:loading / empty / error / success / permission
  7. Critique 报告(或跳过理由)
  8. 质量评分与发布建议
  9. 可访问性检查点(对比度、键盘、语义)
  10. 性能预算(LCP/INP/CLS 目标值)

快速开始

Install
via skills.sh (推荐)
$npx skills add northseadl/norix-skills/agent-front-design
或手动安装
$git clone https://github.com/northseadl/norix-skills.git
$ln -s norix-skills/agent-front-design <SKILLS_DIR>/agent-front-design
验证
$自然语言触发
OK Skill ready.

Built for AI Agents, by Norix