feat(ui-lead): 集成 impeccable 前端设计质量保障能力

.skills/UI负责人Skill/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: ui-lead
-description: UI负责人角色，对用户体验的一致性负责。使用 Open Design 作为唯一设计工具，根据 PRD 和 openapi.yaml 生成 HTML/CSS 设计稿，内置设计系统保障视觉一致性。具备信息架构设计、交互原型设计、视觉规范定义、AI 生图四大能力。当需要为产品设计页面、交互状态、视觉规范或生成设计素材时使用。
+description: UI负责人角色，对用户体验的一致性负责。使用 Open Design 作为唯一设计工具，根据 PRD 和 openapi.yaml 生成 HTML/CSS 设计稿，内置设计系统保障视觉一致性。具备信息架构设计、交互原型设计、视觉规范定义、AI 生图、前端设计质量保障五大能力。当需要为产品设计页面、交互状态、视觉规范或生成设计素材时使用。
 ---
 
 # UI负责人
@@ -93,6 +93,7 @@ AI（Open Design MCP）生成 HTML/CSS 设计稿
 | 完整设计流程（信息架构 + 交互原型 + 视觉规范） | 主流程（三个维度连续产出） | 页面结构图 + HTML 设计稿 + 视觉规范 | PM / 架构师 / 工程师 / QA 四方确认 |
 | 为设计稿生成配图、图标、插画、背景等素材 | [生图](生图/SKILL.md) | 图片文件（PNG/WebP 格式） | 浏览器预览后选用 |
 | 为设计稿、原型演示、产品视频生成配音、音效、背景音乐 | [配音](配音/SKILL.md) | 音频文件（MP3/WAV 格式） | 试听后选用 |
+| 设计稿评审、视觉精调、交互增强、适配优化、反模式检测 | [前端设计](前端设计/SKILL.md) | 23 个设计命令 + 46 条检测规则 | 设计稿产出后在浏览器中逐项确认 |
 
 **执行顺序：** 信息架构 → 交互原型 → 视觉规范。三个维度在实际场景中总是连续产出，不拆分为独立子技能——先定"有哪些页面、怎么走"，再定"每个页面有什么组件、怎么交互"，最后定"长什么样"（通过设计系统自动应用）。生图和配音可在任何阶段按需调用，为主流程提供视觉和听觉素材支持。
 
@@ -109,6 +110,7 @@ AI（Open Design MCP）生成 HTML/CSS 设计稿
 | 视觉规范定义 | 选定 Open Design 设计系统，自动应用统一视觉风格 | 不能替代品牌定位或审美判断 | 人确认设计系统选择是否合适 |
 | 生图 | 通过 DashScope API 提供文生图、图像编辑、交互式编辑、组图生成四种模式 | 不能保证一次生成完全符合预期；生成结果受 prompt 精度影响 | 人在浏览器中预览、选用或调整参数重试 |
 | 配音 | 通过 AiSounds MCP 提供 TTS、音效、音乐、视频配音/配乐、音频清理六种模式 | TTS/音效/音乐支持草稿预览（不扣费）；视频类需上传本地文件 | 人试听后选用或调整参数重试 |
+| 前端设计 | 通过 impeccable CLI + 23 个设计命令提供评审/精调/增强/适配/检测能力 | 46 条反模式检测规则是确定性的（无需 LLM），可直接在 HTML/CSS 上运行；精调命令依赖 AI 理解设计意图 | 人在浏览器中逐项确认修改效果 |
 
 **设计系统选择：** Open Design 内置 150+ 品牌设计系统（Linear、Apple、Supabase、Figma 等风格）。AI 根据产品类型推荐合适的系统，人做最终选择。
 
@@ -128,3 +130,4 @@ AI（Open Design MCP）生成 HTML/CSS 设计稿
 | 墨刀原型（可选） | 墨刀分享链接（HTML 导入后精修） | 团队协作确认 |
 | 生成图片 | PNG/WebP 图片文件（DashScope API 生成） | 设计稿配图、图标、插画等素材使用 |
 | 生成音频 | MP3/WAV 音频文件（AiSounds MCP 生成） | 设计稿配音、交互音效、演示视频配乐等素材使用 |
+| 设计质量报告 | critique/audit/detect 命令输出（Markdown + 截图） | 存档、团队评审、问题追踪 |

.skills/UI负责人Skill/前端设计/SKILL.md

@@ -0,0 +1,169 @@
+---
+name: frontend-design
+description: UI 负责人前端设计质量保障能力。基于 impeccable 设计体系，覆盖 23 个设计命令和 46 条反模式检测规则。当需要对设计稿进行评审、精调、增强或质量检查时使用。
+---
+
+# 前端设计（Frontend Design）
+
+> AI 生成前端的设计质量保障体系。23 个命令覆盖「设计评审」「视觉精调」「交互增强」「构建迭代」「适配优化」五大类需求，46 条确定性检测规则识别 AI 常见设计反模式。
+
+---
+
+## 角色行为
+
+你是 UI 负责人流水线中的前端设计质量守门人。核心原则：
+
+- **先评审再精调**：critique（UX 评审）和 audit（技术检查）在前，polish/colorize/typeset 等精调在后
+- **穷举状态优先**：harden 命令强制覆盖错误处理、空状态、边界情况，对齐 UI 负责人「五种状态」原则
+- **反模式检测自动化**：46 条规则覆盖 AI 画图常见问题（字体滥用、色彩反模式、布局陷阱），先检测后修复
+- **设计系统对齐**：所有精调都在 Open Design 内置设计系统约束下执行，不引入冲突风格
+
+---
+
+## 能力路由
+
+### 设计评审类
+
+| 命令 | 用途 | 适用时机 |
+|------|------|---------|
+| `critique` | UX 设计评审：层级关系、信息清晰度、情感共鸣 | 设计稿初版完成后 |
+| `audit` | 技术质量检查：无障碍性、性能指标、响应式断点 | 交付工程师前 |
+
+### 视觉精调类
+
+| 命令 | 用途 | 适用时机 |
+|------|------|---------|
+| `polish` | 最终润色，设计系统对齐，交付就绪 | 所有修改完成后 |
+| `bolder` | 放大拘谨的设计，增强视觉冲击力 | 页面感觉平淡时 |
+| `quieter` | 收敛过于张扬的设计，降低视觉噪音 | 页面过于花哨时 |
+| `distill` | 精简到本质，去除冗余元素 | 信息密度过高时 |
+| `colorize` | 引入策略性色彩，优化配色方案 | 色彩单调或缺乏层次 |
+| `typeset` | 修复字体选择、字号层级、行距字距 | 排版缺乏节奏感 |
+| `layout` | 修复布局结构、间距系统、视觉节奏 | 布局混乱或留白不当 |
+
+### 交互增强类
+
+| 命令 | 用途 | 适用时机 |
+|------|------|---------|
+| `harden` | 错误处理、空状态、文本溢出、边界情况、国际化 | 穷举交互状态时（对齐五种状态） |
+| `onboard` | 首次使用流程、空状态引导、激活路径 | 新用户引导场景 |
+| `animate` | 添加有目的的动效（过渡、反馈、引导） | 交互原型需要动效说明 |
+| `delight` | 添加愉悦时刻（微交互、彩蛋、品牌细节） | 提升情感体验 |
+| `overdrive` | 添加技术性特效（WebGL、粒子、视差） | 需要高视觉冲击的页面 |
+| `clarify` | 优化 UX 文案：按钮、提示、错误信息、空状态文案 | 文案不够清晰或有歧义 |
+
+### 构建与迭代类
+
+| 命令 | 用途 | 适用时机 |
+|------|------|---------|
+| `craft` | 完整形状-构建流程：规划结构 → 生成设计稿 → 可视化迭代 | 从零开始构建页面 |
+| `shape` | 写代码前规划 UX/UI：页面结构、交互流程、组件关系 | 信息架构设计阶段 |
+| `live` | 浏览器实时迭代：选中元素 → 描述修改 → 实时预览变体 | 需要快速试错调整时 |
+| `document` | 从现有代码/设计稿反向生成 DESIGN.md | 已有设计稿需要沉淀规范 |
+| `extract` | 提取可复用组件和设计 tokens 到设计系统 | 发现重复组件时 |
+
+### 适配与优化类
+
+| 命令 | 用途 | 适用时机 |
+|------|------|---------|
+| `adapt` | 多端适配：移动端、平板、桌面端断点调整 | 响应式适配阶段 |
+| `optimize` | 性能优化：图片、字体加载、渲染性能 | 交付前性能检查 |
+
+---
+
+## 设计反模式检测
+
+### 5 条核心反模式
+
+impeccable 内置 46 条确定性检测规则，以下 5 条是最常见的高频反模式：
+
+| # | 反模式 | 说明 | 修复方向 |
+|---|--------|------|---------|
+| 1 | 字体滥用 | Arial、Inter、系统默认字体的过度使用 | 选用品牌字体或 Open Design 设计系统推荐字体 |
+| 2 | 色彩反模式 | 彩色背景上使用灰色文字、纯黑/纯灰 | 始终对黑/灰混色（tint），背景上有色时文字也应有色 |
+| 3 | 卡片嵌套 | 一切包裹在卡片里，卡片内又嵌套卡片 | 用间距、分割线、背景色差替代卡片边界 |
+| 4 | 缓动过时 | bounce/elastic 缓动效果 | 使用 ease-out/ease-in-out 等现代缓动曲线 |
+| 5 | 渐变套路 | 紫色到蓝色渐变作为默认方案 | 根据品牌色定制渐变，或完全避免无意义的渐变 |
+
+### 检测规则分类
+
+46 条规则覆盖以下维度：
+
+| 类别 | 检测项示例 | 规则数 |
+|------|-----------|:--:|
+| AI 画图痕迹 | 侧边栏 tab 边框、紫色渐变、bounce 缓动、暗色辉光 | ~10 |
+| 排版质量 | 行长度、字距、字号层级、跳过标题级别 | ~8 |
+| 布局质量 | 间距拥挤、小触摸目标、内容宽度 | ~6 |
+| 色彩质量 | 对比度不足、纯黑滥用、灰色文字 | ~6 |
+| 交互质量 | 缺少 hover/focus 状态、缺少加载态 | ~5 |
+| 可访问性 | alt 文本、aria 标签、键盘导航 | ~6 |
+| 性能 | 图片未优化、字体未预加载 | ~5 |
+
+### 检测方式
+
+```
+# 检测设计稿目录
+npx impeccable detect design-output/
+
+# 检测单文件
+npx impeccable detect index.html
+
+# CI 友好 JSON 输出
+npx impeccable detect --json .
+```
+
+---
+
+## 在 UI 设计流程中的位置
+
+```
+UI 负责人主流程
+   │
+   ├─ 信息架构设计  → 页面结构图 + 页面清单
+   │     └─ [前端设计] shape → 规划 UX/UI 结构
+   │
+   ├─ 交互原型设计  → HTML/CSS 设计稿
+   │     └─ [前端设计] craft → 完整构建流程
+   │     └─ [前端设计] live → 浏览器实时迭代
+   │
+   ├─ 视觉规范定义  → 设计系统配置
+   │     └─ [前端设计] polish / bolder / quieter / distill / colorize / typeset / layout
+   │
+   ├─ [评审与检查]（设计稿完成后）
+   │     ├─ critique  → UX 设计评审
+   │     ├─ audit     → 技术质量检查
+   │     └─ detect    → 反模式自动检测
+   │
+   ├─ [交互增强]（原型细化阶段）
+   │     ├─ harden    → 穷举交互状态（对齐五种状态）
+   │     ├─ animate   → 添加动效说明
+   │     ├─ delight   → 提升情感体验
+   │     ├─ clarify   → 优化 UX 文案
+   │     └─ onboard   → 新用户引导流程
+   │
+   ├─ [适配优化]（交付前）
+   │     ├─ adapt     → 多端适配
+   │     └─ optimize  → 性能优化
+   │
+   ├─ [生图]（按需） → 图片素材
+   └─ [配音]（按需） → 音频素材
+```
+
+---
+
+## 环境要求
+
+- Node.js 18+
+- 项目根目录执行：`npx impeccable install`
+- 安装后重启 AI 编码工具以加载 skill
+
+---
+
+## 参考
+
+- impeccable 官网：https://impeccable.style
+- impeccable GitHub：https://github.com/pbakaus/impeccable
+- 探测器文档：https://impeccable.style/docs/detector
+- 生图 Skill：[../生图/SKILL.md](../生图/SKILL.md)
+- 配音 Skill：[../配音/SKILL.md](../配音/SKILL.md)
+- 主 Skill：[../../SKILL.md](../../SKILL.md)