AI 审美急救包落地 + 前端设计师 Skill 实测

6 个 Skill：学习对比 + 融合

六者几乎不重叠、互为补位：taste 管方向、design-token 管取值、better-icons 管图标、motion 管动效、ui-skills 管后处理流水线、impeccable 管最终反模式把关。于是把它们融成一条 7 步流水线。

taste

AI 审美校准

3 滑杆量化审美：DESIGN_VARIANCE / MOTION_INTENSITY / VISUAL_DENSITY，附 AI-slop 黑名单。优点：把"好看"变成可执行参数。

Step1 定方向

design-token

设计语言标准化

OKLCH 色 + 4px 间距网格 + 模块化字号。优点：一切值有出处，禁随手填 13px/17px —— 去 AI 味的根。

Step2 取值

better-icons

图标纪律

150+ 图标集，Lucide 替专业操作、emoji 只留情绪点(❤️👼🇨🇳)。优点：不再 emoji 凑数/瞎写 SVG。

Step3 选图标

motion-ai-kit

动效规范

Motion.dev 缓动/时长/stagger 表，只动 transform/opacity。优点：动效有意图、不卡通、不掉帧。

Step4 动效

ui-skills

后处理流水线

baseline-ui→a11y→motion-perf 三段。优点：生成完还能逐段验收（间距/焦点/对比度/44px/reduced-motion）。

Step5 后处理

impeccable

反模式把关

27 项确定性反模式 + 23 评审命令，确定性+LLM 双轨。优点：紫蓝渐变/卡片嵌套/纯黑/深色辉光等套路可被扫出。

Step6 扫反模式

🧩

融合产物：frontend-designer skill（已装本机）

位置 ~/.claude/skills/frontend-designer/，含 7 步流水线 + design-qa.py(12 项确定性检查) + tokens.css。已注册为 Claude Code skill，今后任何涉及网页设计的任务会自动触发它，第一步走流水线、最后用 design-qa 验收并报告对照清单。

STEP 1

Taste 校准

定方向，避免套路

STEP 2

Design Token

值有出处

STEP 3

Better Icons

Lucide 优先

STEP 4

Motion

缓动/时长规范

STEP 5

UI Skills

a11y 流水线

STEP 6

Impeccable

27 反模式

STEP 7

design-qa

≥85 过闸

调研方案里，谁实现了这些？

把 22 项目 / 4 团队里所有"UI/UX 角色"逐一对照审美急救包 6 项能力。结论：没有一个实现。它们的 UI 设计师都是通用流程/人格型角色，没有可扫描反模式、token 系统、动效规范、图标纪律。

方案中的 UI 角色	设计token	反模式扫描	动效规范	图标纪律	a11y流水线	taste校准	定性
VoltAgent ui-designer	✗	✗	✗	✗	提一句	✗	通用流程型
BMAD ux-designer(Sally)	✗	✗	✗	✗	✗	✗	人格/UX意图型
wshobson ui-design	✗	✗	✗	✗	✗	✗	泛化角色卡
contains-studio ui-designer	✗	✗	✗	✗	✗	部分	速度优先
GPT-Pilot frontend	✗	✗	✗	✗	✗	✗	偏实现无设计系统

🔧

都没实现 → 怎么实现（三步）

① 融合：6 子 skill → 一个 frontend-designer skill（已建）。② 接管角色：任何团队范式(BMAD/GPT-Pilot/VoltAgent)里凡涉及前端的步骤，第一步强制调用本 skill，等于给现有方案补上缺的那块能力。③ 设门槛：design-qa 评分≥85 且 P0 全过 = 前端交付硬门禁，让"完整运行不出差错"可度量、可回归。

实测：8 面 80→100，功能零回退

用 frontend-designer skill 重新优化上一轮 4 套应用的"表单页 + 数据看板"，design-qa 客观重扫，再跑单测 + 起服务 + 语法校验确认零差错。

8/8

页面满分过闸(100/100)

62/62

单测优化后仍全过

4/4

服务可起 + 语法 OK

运行差错(errors=无)

应用(范式)	面	优化前	优化后	单测前→后	服务/语法
team1 单Agent基线	表单	80	100	13→13 ✓	✅
team1 单Agent基线	看板	76	100	13→13 ✓	✅
team2 VoltAgent	表单	84	100	13→13 ✓	✅
team2 VoltAgent	看板	72	100	13→13 ✓	✅
team3 BMAD	表单	80	100	26→26 ✓	✅
team3 BMAD	看板	76	100	26→26 ✓	✅
team4 GPT-Pilot	表单	80	100	10→10 ✓	✅
team4 GPT-Pilot	看板	68	100	10→10 ✓	✅

🩺

优化前普遍硬伤 → 已修

🔴 缺 prefers-reduced-motion 兜底(无障碍硬伤) · 🟡 交互元素无 44px 触控 · 🟡 看板刷新按钮缺焦点态 · 🟡 字体栈偏默认缺中文系统字体 · 🟢 看板有动 layout 属性的过渡(回流隐患)。7 步流水线逐项修复后，两页 var() 用到 33–63 处、P0 全过、动效只动合成层，且未碰任何后端逻辑。

前后实拍对比

下方每套应用展示「优化前 / 优化后」实拍。视觉刻意保持品牌一致（不是推倒重做），改的是底层质量：reduced-motion、44px 触控、焦点态、系统字体栈、token 化、只动合成层、克制入场动效 —— 这些"看不太出但扫得出"的硬指标把分数从 80 拉到 100，而功能一行没坏。

team3 · BMAD 文档瀑布

表单 80→100 ｜看板 76→100 ｜单测 26/26 仍全过

① 留资表单页

优化前80 ❌

优化后100 ✅

② 数据看板

优化前76 ❌

优化后100 ✅

team4 · GPT-Pilot 真团队

表单 80→100 ｜看板 68→100 ｜单测 10/10 仍全过

① 留资表单页

优化前80 ❌

优化后100 ✅

② 数据看板

优化前68 ❌

优化后100 ✅

team2 · VoltAgent 扁平委派

表单 84→100 ｜看板 72→100 ｜单测 13/13 仍全过

① 留资表单页

优化前84 ❌

优化后100 ✅

② 数据看板

优化前72 ❌

优化后100 ✅

team1 · 单 Agent 基线

表单 80→100 ｜看板 76→100 ｜单测 13/13 仍全过

① 留资表单页

优化前80 ❌

优化后100 ✅

② 数据看板

优化前76 ❌

优化后100 ✅

📦

完整交付包（可下载）

含：① skills/(frontend-designer + aesthetic-pack 6 skill)；② test-results/(前后 design-qa JSON + 测试报告)；③ 01_技能对比与调研缺口分析.md + 02_测试报告.md；④ optimized-apps/(4 套优化后可运行应用)；⑤ 前后实拍截图各 8 张。

⬇ 下载 aesthetic-pack-delivery.tar.gz