From da4b5940eac26867a8834bd44dfacde3e57a8b02 Mon Sep 17 00:00:00 2001 From: lyrics <3531587877@qq.com> Date: Fri, 10 Jul 2026 08:57:49 +0800 Subject: [PATCH] =?UTF-8?q?feat(ui-lead):=20=E9=9B=86=E6=88=90=20impeccabl?= =?UTF-8?q?e=20=E5=89=8D=E7=AB=AF=E8=AE=BE=E8=AE=A1=E8=B4=A8=E9=87=8F?= =?UTF-8?q?=E4=BF=9D=E9=9A=9C=E8=83=BD=E5=8A=9B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 新增 前端设计/SKILL.md 子技能，覆盖 23 个设计命令 + 46 条反模式检测规则 - 更新主 SKILL.md：能力路由表/AI能力边界表/交付物清单新增前端设计入口 --- .../SKILL.md" | 5 +- .../SKILL.md" | 169 ++++++++++++++++++ 2 files changed, 173 insertions(+), 1 deletion(-) create mode 100644 ".skills/UI\350\264\237\350\264\243\344\272\272Skill/\345\211\215\347\253\257\350\256\276\350\256\241/SKILL.md" diff --git "a/.skills/UI\350\264\237\350\264\243\344\272\272Skill/SKILL.md" "b/.skills/UI\350\264\237\350\264\243\344\272\272Skill/SKILL.md" index baa0424..77bff8e 100644 --- "a/.skills/UI\350\264\237\350\264\243\344\272\272Skill/SKILL.md" +++ "b/.skills/UI\350\264\237\350\264\243\344\272\272Skill/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 + 截图） | 存档、团队评审、问题追踪 | diff --git "a/.skills/UI\350\264\237\350\264\243\344\272\272Skill/\345\211\215\347\253\257\350\256\276\350\256\241/SKILL.md" "b/.skills/UI\350\264\237\350\264\243\344\272\272Skill/\345\211\215\347\253\257\350\256\276\350\256\241/SKILL.md" new file mode 100644 index 0000000..cd1fc73 --- /dev/null +++ "b/.skills/UI\350\264\237\350\264\243\344\272\272Skill/\345\211\215\347\253\257\350\256\276\350\256\241/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)