{"id":"80b2a809-c444-4024-88cd-ebe96f885e08","shortId":"wjT7a6","kind":"skill","title":"forge-design","tagline":"全栈设计规划与文档管理。分级门控体系下，管理项目的 DESIGN.md 和 DESIGN-CHANGELOG。涵盖竞品调研、美学方向探索、配色/字体/风格搜索、三层Token架构、Image 2 视觉稿门禁、99条UX规则审计、反AI模板检测、0-10交互评分。自闭环——所有设计知识内嵌，不依赖外部Skill。触发方式：用户说\"设计\"、\"forge-design\"、\"先看效果图\"、forge-dev 调度器调用、需要创建或更新设计文档时使用。","description":"> **文档落地路径**：遵循 forge-doc-policy 规范。完整白名单 + frontmatter schema 见\n> `~/claudecode_workspace/工具/forge-cookbook/skills/forge-doc-policy/doc-paths.md`。\n\n# /forge-design：全栈设计规划与文档管理\n\n纯设计规划——**不写代码**。产出 DESIGN.md 和设计方案，交由 forge-design-impl 或 forge-eng 实现。\n\n## 流程总览\n\n```\n门控判定（L1/L2/L3）\n  │\n  ├── L1 完整设计 ──→ 竞品调研 → 美学方向(3+) → 配色/字体 → Token体系 → Image 2视觉稿 → 完整审计 → 0-10审查 → DESIGN.md\n  ├── L2 轻量审查 ──→ 读DESIGN.md → 对照检查 → 重点审计(10项) → 必要时Image 2 before/after → 一致性验证 → 更新文档\n  └── L3 跳过设计 ──→ 纯后端/无UI → 直接进 forge-eng\n```\n\n全程中文。关键设计决策需用户确认后才能定稿。\n涉及前端页面、组件、状态或布局时，读取 `../_shared/visual-decision-layer.md`，使用 Image 2 作为实现前的视觉预判门禁。\n\n---\n\n## 分级门控体系\n\n### L1 完整设计（不可跳过）\n\n**触发条件：**\n- 新项目、新页面、新的独立功能模块\n- 迭代不满触发器命中（同一模块 PRD CHANGELOG ≥ 3 次迭代）\n\n**流程：** 第0步 → 第1步（创建模式）→ 第2步 → 第3步 → 第4步 → 第5步 → 第6步\n**硬门控：** 第5步评分 < B 必须返工。子模块必须通过与父页面的一致性检查。\n\n### L2 轻量审查\n\n**触发条件：**\n- 迭代已有功能、样式微调、小组件添加\n\n**流程：** 第0步 → 第1步（迭代模式）→ 第2步（重点10项）→ 第3步（简化）→ 第4步 → 第5步\n**门控：** 评分 < C 升级到 L1。\n\n### L3 跳过设计\n\n**触发条件：** 纯后端/API、纯数据处理、基础设施、无 UI 变更\n**流程：** forge-dev 调度器自动判断 → 直接进 forge-eng\n\n### 自动升级触发器\n\n| 触发器 | 条件 | 动作 |\n|--------|------|------|\n| 迭代不满 | PRD CHANGELOG 同一模块 ≥ 3 次迭代 | L2 → L1，强制重新设计 |\n| 子模块一致性 | 大需求下的子模块 | 必须读父页面 DESIGN.md，检查一致性 |\n| 评分过低 | L2 评分 < C | L2 → L1，完整重来 |\n\n---\n\n## 设计师认知模式\n\n这些不是清单——它们是你的观察方式。设计和审查时让它们自动运行。\n\n1. **看体系，不是屏幕** — 不孤立评估单个页面；看前后上下文、边界情况和整体一致性。\n2. **同理心即模拟** — 运行心理模拟：信号差、只有一只手空闲、老板在看、第一次 vs 第一千次使用。\n3. **层级即服务** — 每个决策回答\"用户应该先看到什么、然后看到什么、最后看到什么？\"\n4. **约束崇拜** — \"如果我只能展示 3 样东西，哪 3 样最重要？\"\n5. **提问反射** — 第一反应是提问不是发表意见。\"这是给谁的？他们之前试过什么？\"\n6. **边界情况偏执** — 如果名字有 47 个字符呢？零结果？网络断了？色盲？\n7. **\"我会注意到吗\"测试** — 无感 = 完美。最高赞美是没注意到设计。\n8. **有原则的品味** — \"这感觉不对\"可以追溯到一个破碎的原则。品味是 *可调试的*。\n9. **减法默认** — \"尽可能少的设计\"（Rams）。\"减去显而易见的，加上有意义的\"（Maeda）。\n10. **时间维度设计** — 前 5 秒（本能）、5 分钟（行为）、5 年关系（反思）——同时为三者设计。\n11. **为信任设计** — 每个设计决策要么建立要么侵蚀信任。\n12. **故事板旅程** — 在动像素之前，先为用户体验的完整情感弧线做故事板。\n\n---\n\n## 设计批评格式\n\n- \"我注意到...\" — 观察\n- \"我好奇...\" — 提问\n- \"如果...\" — 建议\n- \"我认为...因为...\" — 有理有据的意见\n\n将一切与用户目标和产品目的挂钩。\n\n---\n\n## AskUserQuestion 格式规范\n\n1. **重新聚焦**：当前项目、正在设计的功能。（1-2句）\n2. **通俗解释**：用非技术语言描述设计问题和方案。\n3. **给出推荐**：推荐的设计方案 + 理由。标注完整度。\n4. **列出选项**：设计方案选项 `A) B) C)`，附视觉效果描述和工作量估算。\n\n---\n\n## 第0步：定位项目文档 + 门控判定\n\n### 0.1 定位文档\n\n1. 定位 PRD：搜索 `{项目目录}/docs/PRD.md` 或类似文件\n2. 定位 DESIGN.md：\n   ```\n   搜索模式：\n   - {项目目录}/docs/DESIGN.md\n   - {项目目录}/DESIGN.md\n   - {项目目录}/docs/*design*（不区分大小写）\n   - {项目目录}/**/DESIGN*.md\n   ```\n3. 定位 DESIGN CHANGELOG：模式匹配 `*design*changelog*`\n\n### 0.2 门控判定\n\n1. **检查 PRD CHANGELOG**：同一模块是否有 ≥ 3 次迭代记录 → 触发迭代不满升级\n2. **判断变更类型**：\n   - 新项目/新页面/新模块 → **L1**\n   - 迭代已有功能/样式微调 → **L2**\n   - 纯后端/无UI → **L3**（告知用户，跳过设计）\n3. **子模块检查**：如果当前任务是大需求下的子模块，定位父页面 DESIGN.md\n4. 向用户确认门控级别\n\n### 0.3 分支判断\n\n- 有 DESIGN.md → 迭代模式（第1步迭代）\n- 无 DESIGN.md → 创建模式（第1步创建）\n\n---\n\n## 第1步（迭代模式）：理解现状\n\n1. 读取 PRD 最新迭代摘要，提取设计相关变更\n2. 读取完整 DESIGN.md\n3. 读取 DESIGN CHANGELOG（如有），做热点分析\n4. 用 Agent(Explore) 扫描项目前端文件（HTML/CSS/JS），提取实际使用的设计体系\n5. **对比文档 vs 实际**：DESIGN.md 声称的 token 和代码实际使用的是否一致\n6. 向用户总结当前设计状态，确认理解是否正确\n\n---\n\n## 第1步（创建模式）：从零创建 DESIGN.md\n\n### 1.1 产品理解\n\n在做任何设计之前，先理解产品：\n- 这是什么？解决什么问题？\n- 给谁用的？（角色、场景、频率）\n- 成功的体验是什么感觉？（快速、安全、愉悦、专业？）\n- 有没有参考产品？\n\n### 1.2 竞品调研\n\n用 WebSearch 搜索同行业产品的设计语言：\n\n1. 搜索 3-5 个同类产品的截图或设计评测\n2. 提取它们的共性设计模式（布局、配色、交互）\n3. 提取它们的差异化设计元素\n4. 总结为用户：\n   ```\n   竞品设计观察：\n   - [产品A]：[设计特点]，[值得借鉴的点]\n   - [产品B]：[设计特点]，[值得借鉴的点]\n   - [产品C]：[设计特点]，[值得借鉴的点]\n   共性：[共同的设计语言]\n   差异化机会：[可以做不同的地方]\n   ```\n\n### 1.3 美学方向探索（3+ 方案）\n\n给出至少 3 个美学方向，每个包含：\n- **方向名称**：如\"精致极简\"、\"大胆数据\"、\"温暖人文\"\n- **mood 描述**：一段话描述这个方向给人的感受\n- **视觉关键词**：3-5 个词\n- **代表性配色**：主色 + 辅色 + 强调色\n- **代表性字体搭配**：标题字体 + 正文字体\n- **适用场景**：什么时候选这个方向\n- **风险点**：这个方向可能出什么问题\n\n### 1.4 配色方案\n\n使用内嵌数据资源搜索配色建议：\n\n```bash\npython3 {skill_dir}/scripts/search.py \"{产品类型} {风格关键词}\" --design-system -p \"{产品名}\"\n```\n\n**配色决策框架（来自 161 个产品类型配色库）：**\n\n| Token | 说明 | 决策规则 |\n|-------|------|---------|\n| Primary | 品牌主色 | 产品类型决定（SaaS→蓝、电商→绿、奢侈→黑金） |\n| Secondary | 辅助色 | 主色的类似色或互补色 |\n| Accent | 强调色 | CTA、通知、重要操作。与主色对比度高 |\n| Background | 页面背景 | 亮色模式 #FAFAFA-#FFFFFF，暗色模式 #0F172A-#1E293B |\n| Surface | 卡片/容器 | 比背景亮/暗一个层级 |\n| Foreground | 主文字 | WCAG AA 4.5:1 对比度 |\n| Muted | 辅助文字 | 比 foreground 低对比度，但 ≥ 3:1 |\n| Border | 边框 | 微妙但可见 |\n| Destructive | 危险操作 | 红色系 |\n\n**配色校验：**\n- WCAG AA：正文 4.5:1，大文本 3:1，UI 组件 3:1\n- 不用纯红/绿组合（8% 男性红绿色盲）\n- 中性色系统一暖或冷——不混用\n- 暗色模式：文本偏白（~#E0E0E0），不是纯白；主色降饱和 10-20%\n\n### 1.5 字体搭配\n\n使用内嵌数据资源搜索字体建议：\n\n```bash\npython3 {skill_dir}/scripts/search.py \"{风格关键词}\" --domain typography\n```\n\n**字体决策框架（来自 57 组搭配库）：**\n\n| 用途 | 选择标准 |\n|------|---------|\n| 标题字体 | 表达品牌个性。Display/Serif 用于优雅，Geometric Sans 用于现代，Monospace 用于技术 |\n| 正文字体 | 可读性第一。Humanist Sans（Inter/DM Sans）或正文 Serif（Literata/Source Serif） |\n| 代码字体 | Monospace。JetBrains Mono、Fira Code、Source Code Pro |\n\n**字体反面模式（黑名单）：**\n- ❌ Papyrus、Comic Sans、Lobster、Impact、Jokerman\n- ⚠️ Inter/Roboto/Open Sans/Poppins 不是错误，但如果只用它们且不加调整 → 标记为\"可能泛用\"\n- ⚠️ 超过 3 种字体族 → 标记\n\n**产出：** 向用户展示 2-3 个字体搭配方案，每个附 Google Fonts 链接和视觉描述。\n\n### 1.6 Token 体系架构\n\n采用**三层 Token 架构**：\n\n```\nPrimitive Token（原始值）\n  │  具体的值，不含语义\n  │  例：--blue-500: #3B82F6; --space-4: 1rem;\n  ▼\nSemantic Token（语义化）\n  │  表达意图，引用 Primitive\n  │  例：--color-primary: var(--blue-500); --space-component-gap: var(--space-4);\n  ▼\nComponent Token（组件级）\n     绑定到具体组件，引用 Semantic\n     例：--button-bg: var(--color-primary); --card-padding: var(--space-component-gap);\n```\n\n**新项目必须定义的 Token 集合：**\n\n| 类别 | 必须定义 |\n|------|---------|\n| 颜色 | primary, secondary, accent, background, surface, foreground, muted, border, destructive, success, warning |\n| 字体 | heading, body, code（字族+字号+字重+行高） |\n| 间距 | 基于 4px 或 8px 比例尺：xs(4), sm(8), md(16), lg(24), xl(32), 2xl(48) |\n| 圆角 | sm(4), md(8), lg(12), xl(16)——层级化，小元素小圆角 |\n| 阴影 | sm, md, lg——层级化 |\n| 断点 | mobile(375), tablet(768), desktop(1024), wide(1440) |\n\n**组件状态定义规范：**\n\n每个交互组件必须定义以下状态：\n- **Default**：静止状态\n- **Hover**：鼠标悬停（桌面端）\n- **Active/Pressed**：按下中\n- **Focus-visible**：键盘焦点（必须有，不能 outline:none）\n- **Disabled**：不可用（降低透明度 + cursor:not-allowed）\n- **Loading**：加载中（骨架屏或 spinner）\n\n### 1.7 多轮确认\n\n- 第1轮：展示竞品调研 + 3+ 美学方向 → 用户选择方向\n- 第2轮：展示配色方案 + 字体搭配 → 用户确认\n- 第3轮：展示 Token 体系 + 页面布局线框图 → 用户确认\n- 第4轮：生成 1-3 张 Image 2 视觉稿（桌面端/移动端/关键状态）→ 用户确认实际观感\n- 第5轮：关键交互方案 → 用户确认\n\n### 1.7.1 Image 2 视觉稿门禁\n\n**触发：** L1 完整设计必做；L2 只在视觉变化影响观感、信息密度或布局判断时做；L3 不做。\n\n**步骤：**\n1. 先完成设计方向、配色、字体、布局约束，避免让 Image 2 替你做设计决策。\n2. 为每张图写明「决策用途」，例如：首页信息密度是否过重、详情页阅读是否舒服、移动端选择控件是否清楚。\n3. 使用 `../_shared/visual-decision-layer.md` 的 UI Prompt 模板生成视觉稿。\n4. 将图片、prompt、meta 保存到设计文档同目录的 `assets/` 或 brainstorm 归档目录。\n5. 用户确认后，把确认结果写入 DESIGN.md 的「视觉决策记录」：采用哪张、否掉哪张、为什么。\n6. 如果无法生成图片，保存 prompt pack，并在交付总结中标注「视觉稿未生成，不能进入 design-impl 的视觉实现」。\n\n### 1.8 产出 DESIGN.md 初稿\n\n参考 [references/design-template.md](references/design-template.md)\n\n### 1.9 新建 DESIGN CHANGELOG\n\n---\n\n## 第2步：设计审计\n\n在设计方案之前，先用以下体系审计现有设计状态。\n\n### 设计审计清单（10 类，约 80 项）\n\n**1. 视觉层级与构图**（8 项）\n- 焦点是否清晰？视线流动是否自然？\n- 视觉噪音：无关装饰是否在抢注意力？\n- 信息密度：是否拥挤或过于稀疏？\n- Z-index 是否清晰（没有莫名其妙的层叠）？\n- 首屏 3 秒能否传达页面目的？\n- 眯眼测试：模糊后主次关系是否明显？\n- 空白是有意图的还是偶然的？\n- 每个视图是否有且仅有一个主 CTA？\n\n**2. 排版**（15 项）\n- 字体 ≤3 种？比例比率是否系统化（1.25大三度/1.333纯四度）？\n- 行高：正文 1.4-1.6，标题 1.1-1.3？\n- 行宽：45-75 字符（66 理想）？\n- 层级是否跳级（h1 直接到 h3）？\n- 字重对比是否足够区分层级（≥2种字重）？\n- 正文 ≥ 16px？说明文字 ≥ 12px？\n- text-wrap: balance 用于标题？\n- 弯引号、省略号用正确字符？\n- 数字是否使用 tabular-nums？\n- 小写文本不加字间距？\n- 无黑名单字体？泛用字体是否有调整？\n\n**3. 颜色与对比度**（10 项）\n- 调色板是否协调（≤12种非灰色独特颜色）？\n- WCAG AA 对比度是否达标？\n- 语义色（成功/警告/错误）是否一致？\n- 不仅用颜色编码信息（色盲友好）？\n- 暗色模式是否正确处理（如适用）？\n- 暗色模式文本偏白(~#E0E0E0)，不是纯白？\n- 暗色模式主色降饱和 10-20%？\n- 无红绿纯组合？\n- 中性色系始终暖或冷——不混用？\n- html 元素有 color-scheme: dark？\n\n**4. 间距与布局**（12 项）\n- 栅格是否一致？\n- 间距是否遵循比例尺（4/8 基数），不是随意值？\n- 对齐是否一致？\n- 节奏是否正确（相关元素近，无关元素远）？\n- 圆角是否有层级（小元素小圆角，大容器大圆角）？\n- 内圆角 = 外圆角 - 间距（嵌套元素）？\n- 无水平滚动？\n- 有最大宽度限制？\n- 断点处理正确（375/768/1024/1440）？\n- 使用 Flex/Grid 布局？\n- 刘海设备使用 env(safe-area-inset-*)？\n- URL 反映状态（筛选器、标签页在查询参数中）？\n\n**5. 交互状态**（10 项）\n- hover/focus-visible/active/disabled 状态是否完整？\n- 骨架屏或加载态（形状匹配真实内容）？\n- 空状态有设计吗（温暖消息+主操作+视觉）？\n- 错误消息是否具体且有帮助？\n- 成功反馈是否明确？\n- 触摸目标 ≥ 44px？\n- 所有可点击元素 cursor: pointer？\n- 禁用状态：降低透明度 + cursor:not-allowed？\n\n**6. 响应式设计**（8 项）\n- 移动端是有设计意义的布局，还是只是缩小？\n- 触摸目标是否足够？\n- 图片是否响应式（srcset/sizes）？\n- 文本在各尺寸是否可读（移动端≥16px）？\n- 导航在小屏幕是否折叠？\n- 表单在移动端可用（正确 input type）？\n- viewport meta 无 user-scalable=no？\n\n**7. 动效与动画**（6 项）\n- 缓动：进入 ease-out，退出 ease-in，移动 ease-in-out？\n- 时长是否合理（50-700ms）？\n- 动效是否有目的（引导注意力、反馈状态）？\n- 是否尊重 prefers-reduced-motion？\n- 不用 transition: all——明确列出属性？\n- 只动画 transform 和 opacity？\n\n**8. 内容与微文案**（8 项）\n- 空状态是否有温度（消息+操作+图标）？\n- 错误消息是否具体（发生了什么+为什么+该怎么做）？\n- 按钮标签是否具体（不是\"提交\"而是\"保存设置\"）？\n- 无 Lorem ipsum 残留？\n- 截断是否正确处理（text-overflow: ellipsis/line-clamp）？\n- 加载状态以 `…` 结尾？\n- 危险操作有确认或撤销？\n\n**9. AI 模板痕迹检测**（10 个反面模式）\n- ❌ 紫/蓝紫渐变背景或蓝到紫配色\n- ❌ 三列功能网格 + 彩色圆圈图标 + 对称重复\n- ❌ 彩色圆圈中的图标做区块装饰\n- ❌ 一切居中对齐\n- ❌ 统一大圆角\n- ❌ 装饰性色块、浮动圆圈、波浪 SVG 分隔线\n- ❌ Emoji 当设计元素\n- ❌ 左边框高亮卡片\n- ❌ 泛用 hero 文案（\"释放...的力量\"、\"一站式解决方案\"）\n- ❌ 千篇一律的 SaaS 节奏（hero → features → testimonials → CTA）\n\n**10. 性能即设计**（6 项）\n- LCP < 2.0s？\n- CLS < 0.1？\n- 骨架屏质量（形状匹配真实内容，有闪烁动画）？\n- 图片是否优化（WebP/AVIF、srcset、loading=\"lazy\"）？\n- 字体是否优化（subset、display:swap、预连接CDN）？\n- 无 FOUT（字体切换闪烁）？\n\n### UX 规则补充（10 大类 99 条）\n\n在审计清单基础上，补充以下 UX 规则体系。完整规则数据在 `data/ux-guidelines.csv`，以下是每类核心规则：\n\n**导航（6条）：** 平滑滚动、粘性导航、活动状态指示、返回按钮行为、深链接支持、面包屑\n**动画（8条）：** 过度动效控制、时长规范(150-300ms)、减少动效偏好、加载状态、hover vs tap 区分、transform性能、缓动函数\n**布局（9条）：** Z-index 管理、overflow hidden 副作用、固定定位适配、层叠上下文、内容跳动预防、viewport 单位、容器宽度\n**触摸（7条）：** 触摸目标(44px)、触摸间距(8px+)、手势冲突预防、点击延迟消除、下拉刷新、触觉反馈\n**交互（7条）：** 焦点状态、悬停状态、活跃状态、禁用状态、加载按钮、错误反馈、确认对话框\n**无障碍（12条·CRITICAL）：** 颜色对比度、非颜色唯一编码、alt文本、标题层级、ARIA标签、键盘导航、屏幕阅读器、表单标签、错误消息、跳过链接\n**性能（18条）：** 图片优化、字体加载、关键CSS、懒加载、代码分割、缓存、第三方脚本、包大小\n**表单（14条）：** 输入标签、错误位置、行内验证、输入类型、自动填充、必填指示、密码可见性\n**响应式（7条）：** 移动优先、断点测试、触摸友好、可读字号、viewport meta\n**反馈（6条）：** 加载指示器、空状态、错误恢复、进度指示、Toast通知\n\n### 前端美学 5 维度\n\n审计时额外检查以下维度，确保设计有独特美学意识：\n\n1. **独特排版**：标题字体是否有个性？是否通过字号/字重/字间距创造了节奏？还是千篇一律的 Inter 16px？\n2. **协调配色主题**：配色是否传达了产品情绪？色温是否统一？还是随意拼凑？\n3. **动效与动画**：关键交互是否有微妙动效？还是一切都是即时切换？\n4. **空间构图**：留白是否有意？密度是否因内容类型而异？还是统一间距？\n5. **背景与视觉细节**：是否有纹理、渐变、或视觉层次？还是纯白背景+灰色边框？\n\n### 审计方法\n\n- 对每个受变更影响的页面/组件，过一遍上述 10 类 + 5 维度\n- 只记录实际发现的问题，不逐项打勾\n- 每个发现附上影响评估：高（降一级）/ 中（降半级）/ 低（打磨项）\n- L2 轻量审查只检查重点 10 项：视觉层级(2项)、排版(2项)、间距(2项)、交互状态(2项)、AI痕迹(2项)\n\n---\n\n## 第3步：设计方案\n\n### 3.1 方案设计\n\n对每个设计变更点，通过 AskUserQuestion 确认：\n\n1. **页面布局方案**：用 ASCII 线框图描述布局结构\n   ```\n   ┌─────────────────────────────┐\n   │  顶栏：Logo + 导航 + 搜索   │\n   ├──────────┬──────────────────┤\n   │  侧边栏   │   主内容区       │\n   │  分类导航  │   卡片网格       │\n   └──────────┴──────────────────┘\n   ```\n\n2. **组件设计**：描述组件的视觉表现、所有状态变化、响应式行为\n\n3. **设计体系变更**：新增的颜色、字体、间距等 token（遵循三层架构）\n\n4. **交互方案**：关键交互的状态流转\n\n5. **Image 2 视觉稿**：对 UI/布局/状态变化，生成或引用视觉稿，让用户确认观感是否符合预期。视觉稿只用于确认方向，最终实现仍以 DESIGN.md token、组件规范和真实截图为准。\n\n### 3.2 0-10 交互审查（L1 必选，L2 可选）\n\n对重要设计决策，用以下方式深度审查：\n\n**审查维度：**\n\n| 维度 | 审查内容 |\n|------|---------|\n| 信息架构 | 导航结构、内容组织、层级深度 |\n| 交互状态覆盖 | 所有状态是否定义、边界情况、错误流程 |\n| 用户旅程情感弧线 | 从进入到完成的情绪变化、摩擦点 |\n| AI 模板痕迹风险 | 方案是否可能产出泛用感的界面 |\n| 设计体系对齐 | 方案是否复用已有 token 和组件 |\n| 响应式与无障碍 | 移动端体验、键盘导航、屏幕阅读器 |\n| 未决设计问题 | 方案中含糊或未定的部分 |\n\n**评分方法：**\n\n对每个维度打 0-10 分，并说明：\n- 当前分数及原因\n- **满分标准是什么**（具体描述 10 分的状态）\n- 从当前到满分需要什么\n\n**就绪度分级：**\n- **Ready (≥8)** — 可以直接实现\n- **Review needed (5-7)** — 需要在 TODOS.md 记录改进项\n- **Redesign needed (<5)** — 该维度需要重新设计\n\n### 3.3 子模块一致性检查\n\n如果当前任务是大需求下的子模块：\n\n1. 读取父页面 DESIGN.md 中的 Token 定义\n2. 检查子模块方案是否使用了相同的：\n   - 配色 token\n   - 字体 token\n   - 间距比例尺\n   - 圆角层级\n   - 组件风格（卡片、按钮、输入框的视觉一致性）\n3. 不一致项必须修正或得到用户明确许可\n\n### 不需要用户确认的内容\n\n- 具体 CSS 属性值（由设计体系推导）\n- 细节动效参数\n- 响应式断点的具体像素值（沿用已有体系）\n\n---\n\n## 第4步：更新设计文档\n\n### A. 更新 DESIGN CHANGELOG\n\n追加本次变更记录：时间、背景、设计方案、关键决策。\n\n### B. 更新 DESIGN.md\n\n1. 更新版本号、日期\n2. 更新迭代摘要区（保留所有版本）\n3. 新增/修改组件规范，标记 `[vX.Y 新增/修改]`\n4. 更新设计体系 token（如有变更，遵循三层架构）\n5. 更新页面布局说明\n6. 自洽性检查：文档内部引用是否一致\n\n### C. 可选：生成预览页\n\n对新项目的配色+字体方案，可生成简单 HTML 预览页让用户直观对比：\n\n```html\n<!-- 配色预览：展示 Primary/Secondary/Accent 在不同组件上的效果 -->\n<!-- 字体预览：展示 Heading/Body 字体在不同层级的视觉效果 -->\n```\n\n---\n\n## 第5步：设计质量评估\n\n### A-F 评分体系\n\n**等级定义：**\n- **A：** 有意识的、精致的、令人愉悦的。体现设计思考。\n- **B：** 基础扎实，少量不一致。看起来专业。\n- **C：** 能用但泛用。没大问题，没设计观点。\n- **D：** 有明显问题。感觉未完成。\n- **F：** 在损害用户体验。需要大幅返工。\n\n**类别权重：**\n\n| 类别 | 权重 |\n|------|------|\n| 视觉层级 | 15% |\n| 排版 | 15% |\n| 间距与布局 | 15% |\n| 颜色与对比度 | 10% |\n| 交互状态 | 10% |\n| 响应式 | 10% |\n| 内容质量 | 10% |\n| AI 模板痕迹 | 5% |\n| 动效 | 5% |\n| 性能感受 | 5% |\n\n**等级计算：** 从 A 开始。高影响降一级。中影响降半级。打磨不影响。最低 F。\n\n### 交付前检查清单\n\n在给出最终评分前，过一遍以下检查：\n\n**视觉质量：**\n- [ ] 所有颜色来自设计体系 token，无硬编码值\n- [ ] 图标风格一致（全部 outline 或全部 filled，不混用）\n- [ ] 图标大小有统一规范\n- [ ] 品牌 Logo 使用正确\n- [ ] 前端变更已完成 Image 2 视觉稿门禁，图片/prompt/meta 已归档，用户确认结果已写入 DESIGN.md\n\n**交互：**\n- [ ] 点击反馈 80-150ms 内可见\n- [ ] 动画时长 150-300ms，使用平台缓动\n- [ ] 禁用状态有语义化表达（不只是变灰）\n- [ ] 手势冲突预防（一个区域一个主手势）\n\n**亮/暗模式：**\n- [ ] 表面可读性（亮色模式）\n- [ ] 文本对比度（暗色模式文本偏白，不纯白）\n- [ ] 边框和分隔线可见性\n- [ ] Token 驱动主题切换\n\n**布局：**\n- [ ] 安全区域适配\n- [ ] 系统栏留空\n- [ ] 内容宽度一致\n- [ ] 8dp 间距节奏\n- [ ] 文本行宽可读\n- [ ] 区块间距有层级\n\n**无障碍：**\n- [ ] WCAG AA 对比度达标\n- [ ] 触摸目标 ≥ 44px\n- [ ] 键盘导航可用\n- [ ] 屏幕阅读器友好\n- [ ] 不仅用颜色编码信息\n\n### 门控判定\n\n- L1：评分 < B → **必须返工**，回到第3步重新设计\n- L2：评分 < C → **升级到 L1**，完整重来\n\n---\n\n## 第6步：确认与总结\n\n```\n+====================================================+\n|              设计交付完成                              |\n+====================================================+\n| 项目：[项目名]                                        |\n| 版本：vX.Y                                           |\n| 门控级别：[L1/L2]                                     |\n| 设计评分：[A-F]（变更前 → 变更后）                      |\n| AI 模板痕迹评分：[A-F]                                 |\n| 设计变更：X 项（新增 A / 修改 B）                      |\n| 子模块一致性：[通过 / 不适用]                           |\n| 文件：                                                |\n|   DESIGN.md          — [已更新/已创建]                 |\n|   DESIGN-CHANGELOG   — [已追加/已创建]                 |\n| 下一步：forge-design-impl 或 forge-eng 实现                  |\n+====================================================+\n```\n\n---\n\n## Feature 状态管理（.features/ 架构）\n\n### 核心原则\n\n**领域文档（DESIGN.md）只存内容，不存运行状态。** 运行状态写入 `.features/{feature-id}/status.md`。\n\n### 状态标记协议\n\n| 标记 | 含义 |\n|------|------|\n| `[⏳ 待处理]` | 已规划，未开始 |\n| `[🔄 进行中]` | 当前正在执行 |\n| `[✅ 已完成]` | 执行完成 |\n| `[❌ 失败]` | 执行失败，需干预 |\n| `[⏸️ 暂停]` | 等待用户确认或外部依赖 |\n\n### 操作规则\n\n1. **启动时**：确认 prd 行为 `[✅ 已完成]`，将 design 行更新为 `[🔄 进行中]`\n2. **阶段推进时**：更新 note 字段和 heartbeat\n3. **等待确认时**：design 行改为 `[⏸️ 暂停]`\n4. **完成后**：design 行改为 `[✅ 已完成]`，记录 completed 时间\n5. **失败时**：design 行改为 `[❌ 失败]`，note 填失败原因\n\n---\n\n## 数据资源\n\n本 Skill 自带以下数据文件（自闭环，无需外部依赖）：\n\n| 文件 | 内容 | 用途 |\n|------|------|------|\n| `data/colors.csv` | 99 种产品类型的完整配色方案 | 第1.4步配色决策 |\n| `data/typography.csv` | 57 组字体搭配（含 Google Fonts 链接） | 第1.5步字体决策 |\n| `data/styles.csv` | 50+ 种设计风格定义 | 第1.3步美学方向 |\n| `data/ux-guidelines.csv` | 99 条 UX 规则（10类，含代码示例） | 第2步审计补充 |\n| `data/products.csv` | 161 种产品类型的设计属性 | 第1.1步产品定位 |\n| `data/ui-reasoning.csv` | 产品类型→设计决策映射 | 自动推荐设计方向 |\n| `data/charts.csv` | 25 种图表类型指南 | 数据可视化设计 |\n| `data/landing.csv` | 16 种落地页区块类型 | 落地页设计 |\n| `scripts/search.py` | 设计资源搜索引擎 | 按关键词搜索配色/字体/风格 |\n\n**搜索脚本用法：**\n```bash\n# 生成完整设计系统建议\npython3 {skill_dir}/scripts/search.py \"AI search tool modern minimal\" --design-system -p \"产品名\"\n\n# 按领域深入搜索\npython3 {skill_dir}/scripts/search.py \"elegant serif\" --domain typography\npython3 {skill_dir}/scripts/search.py \"fintech trust\" --domain color\npython3 {skill_dir}/scripts/search.py \"dashboard data\" --domain style\n```\n\n---\n\n## 重要规则\n\n1. **纯设计，不写代码。** 产出是 DESIGN.md 和设计方案，不是 CSS/HTML。实现交给 forge-design-impl 或 forge-eng。\n2. **像设计师思考，不是 QA 工程师。** 关心感觉对不对、有没有意识、尊不尊重用户。\n3. **具体且可操作。** \"把 X 改成 Y 因为 Z\"——不是\"建议优化间距\"。\n4. **AI 模板痕迹检测是超能力。** 10 个反面模式要直接说出来。\n5. **深度优于广度。** 5-10 个充分记录的发现 > 20 个模糊观察。\n6. **响应式是设计，不只是\"不坏\"。** 移动端要有独立的设计意义。\n7. **快速胜利很重要。** 始终包含 3-5 个高影响低工作量的改进建议。\n8. **不孤立评估。** 每个设计决策放在用户旅程的完整上下文中评判。\n9. **门控必须遵守。** L1 评分 < B 不能放行。L2 评分 < C 必须升级。\n10. **子模块必须一致。** 大需求下的子模块设计必须与父页面对齐。\n\n---\n\n## 资源\n\n- **设计文档模板**：[references/design-template.md](references/design-template.md)\n- **配色库**：[data/colors.csv](data/colors.csv)\n- **字体库**：[data/typography.csv](data/typography.csv)\n- **UX 规则**：[data/ux-guidelines.csv](data/ux-guidelines.csv)\n- **产品类型**：[data/products.csv](data/products.csv)","tags":["forge","design","skills","yike-gunshi","agent-skills","ai-development","claude-code","skill-md","skillsmp"],"capabilities":["skill","source-yike-gunshi","skill-forge-design","topic-agent-skills","topic-ai-development","topic-claude-code","topic-forge","topic-skill-md","topic-skillsmp"],"categories":["forge-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/yike-gunshi/forge-skills/forge-design","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add yike-gunshi/forge-skills","source_repo":"https://github.com/yike-gunshi/forge-skills","install_from":"skills.sh"}},"qualityScore":"0.455","qualityRationale":"deterministic score 0.46 from registry signals: · indexed on github topic:agent-skills · 11 github stars · SKILL.md body (15,666 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-18T19:07:33.532Z","embedding":null,"createdAt":"2026-04-24T07:03:38.168Z","updatedAt":"2026-05-18T19:07:33.532Z","lastSeenAt":"2026-05-18T19:07:33.532Z","tsv":"'-1.3':1018 '-1.6':1015 '-10':24,87,1530,1568,2068 '-150':1757 '-2':317 '-20':628,1072 '-3':695,878 '-300':1320,1762 '-4':718,739 '-5':472,515,2081 '-500':715,732 '-7':1584 '-700':1188 '-75':1021 '/1.333':1010 '/_shared/visual-decision-layer.md':116,921 '/api':174 '/claudecode_workspace':52 '/design':359 '/design.md':353 '/docs':355 '/docs/design.md':351 '/docs/prd.md':344 '/forge-cookbook/skills/forge-doc-policy/doc-paths.md':54 '/forge-design':55 '/prompt/meta':1750 '/scripts/search.py':535,636,1988,2003,2011,2019 '/status.md':1871 '0':23,86,1529,1567 '0.1':337,1277 '0.2':368 '0.3':399 '0f172a':574 '1':218,312,316,339,370,412,469,587,596,608,611,615,877,903,977,1416,1485,1595,1637,1888,2025 '1.1':448,1017 '1.2':464 '1.25':1008 '1.3':497 '1.4':528,1014 '1.5':629 '1.6':701 '1.7':858 '1.7.1':890 '1.8':956 '1.9':963 '10':279,627,972,1051,1071,1121,1238,1269,1296,1450,1465,1574,1705,1707,1709,1711,2063,2096 '1024':827 '10类':1957 '10项':96 '11':292 '12':295,811,1084 '12px':1034 '12条':1365 '12种非灰色独特颜色':1054 '1440':829 '14条':1388 '15':1002,1699,1701,1703 '150':1319,1761 '16':798,813,1974 '161':545,1961 '16px':1032,1155,1424 '18条':1378 '1e293':575 '1rem':719 '2':19,98,119,224,319,346,378,417,474,694,881,892,910,912,1000,1425,1498,1515,1601,1640,1747,1898,2042 '2.0':1274 '20':2070 '24':800 '25':1970 '2xl':803 '2种字重':1030 '2视觉稿':84 '2项':1468,1470,1472,1474,1476 '3':79,133,197,233,242,245,322,361,375,392,420,471,479,499,502,514,595,610,614,689,862,919,993,1005,1049,1430,1503,1613,1643,1904,2050,2080 '3.1':1479 '3.2':1528 '3.3':1592 '32':802 '375':823 '375/768/1024/1440':1105 '3b82f6':716 '4':239,327,397,426,481,794,807,926,1082,1434,1510,1650,1909,2060 '4.5':586,607 '4/8':1088 '44px':1134,1348,1792 '45':1020 '47':255 '48':804 '4px':789 '5':247,282,285,288,433,935,1119,1412,1439,1452,1513,1583,1590,1655,1714,1716,1718,1917,2065,2067 '50':1187,1948 '57':642,1939 '6':252,441,944,1144,1170,1271,1657,2072 '66':1023 '6条':1308,1405 '7':260,1168,2077 '768':825 '7条':1346,1356,1397 '8':266,618,796,809,979,1146,1206,1208,1579,2083 '80':975,1756 '8dp':1783 '8px':791,1350 '8条':1316 '9':272,1235,2086 '99':1298,1934,1953 '99条ux规则审计':21 '9条':1331 'a-f':1671,1818,1825 'aa':585,605,1056,1789 'accent':562,770 'active/pressed':837 'agent':428 'ai':1236,1552,1712,1823,1989,2061 'ai痕迹':1475 'allow':853,1143 'alt文本':1369 'area':1113 'aria标签':1371 'ascii':1488 'askuserquest':310,1483 'asset':931 'b':146,331,576,1634,1681,1799,1834,2090 'background':568,771 'balanc':1038 'bash':531,632,1983 'before/after':99 'bg':749 'blue':714,731 'bodi':781 'border':597,775 'brainstorm':933 'button':748 'button-bg':747 'c':167,210,332,1660,1685,1804,2094 'card':755 'card-pad':754 'changelog':11,132,195,364,367,373,423,966,1628,1844 'cls':1276 'code':670,672,782 'color':728,752,1079,2015 'color-primari':727,751 'color-schem':1078 'comic':677 'complet':1915 'compon':735,740,760 'critic':1366 'css':1617 'css/html':2032 'cta':564,999,1268 'cursor':850,1136,1140 'd':1689 'dark':1081 'dashboard':2020 'data':2021 'data/charts.csv':1969 'data/colors.csv':1933,2104,2105 'data/landing.csv':1973 'data/products.csv':1960,2114,2115 'data/styles.csv':1947 'data/typography.csv':1938,2107,2108 'data/ui-reasoning.csv':1965 'data/ux-guidelines.csv':1305,1952,2111,2112 'default':832 'design':3,10,34,65,356,363,366,422,539,953,965,1627,1843,1850,1895,1906,1911,1919,1995,2036 'design-changelog':9,1842 'design-impl':952 'design-system':538,1994 'design.md':7,60,89,205,348,396,402,406,419,437,447,938,958,1525,1597,1636,1753,1839,1863,2029 'desktop':826 'destruct':600,776 'dev':38,183 'dir':534,635,1987,2002,2010,2018 'disabl':847 'display':1288 'display/serif':648 'doc':45 'domain':638,2006,2014,2022 'e0e0e0':624,1068 'eas':1175,1179,1183 'ease-in':1178 'ease-in-out':1182 'ease-out':1174 'eleg':2004 'ellipsis/line-clamp':1231 'emoji':1253 'eng':70,109,188,1855,2041 'env':1110 'explor':429 'f':1673,1692,1727,1820,1827 'fafafa':571 'featur':1266,1857,1859,1867,1869 'feature-id':1868 'ffffff':572 'fill':1739 'fintech':2012 'fira':669 'flex/grid':1107 'focus':840 'focus-vis':839 'font':699,1943 'foreground':582,592,773 'forg':2,33,37,44,64,69,108,182,187,1849,1854,2035,2040 'forge-design':1,32 'forge-design-impl':63,1848,2034 'forge-dev':36,181 'forge-doc-polici':43 'forge-eng':68,107,186,1853,2039 'fout':1292 'frontmatt':49 'gap':736,761 'geometr':650 'googl':698,1942 'h1':1026 'h3':1028 'head':780 'heartbeat':1903 'hero':1257,1265 'hidden':1337 'hover':834,1324 'hover/focus-visible/active/disabled':1123 'html':1076,1666,1668 'html/css/js':431 'humanist':657 'id':1870 'imag':18,83,118,880,891,909,1514,1746 'impact':680 'impl':66,954,1851,2037 'index':989,1334 'input':1159 'inset':1114 'inter':1423 'inter/dm':659 'inter/roboto/open':682 'ipsum':1225 'jetbrain':667 'jokerman':681 'l1':75,122,169,200,212,383,895,1532,1797,1806,2088 'l1/l2':1816 'l1/l2/l3':74 'l2':90,149,199,208,211,386,897,1463,1534,1802,2092 'l3':102,170,389,900 'lazi':1285 'lcp':1273 'lg':799,810,819 'literata/source':663 'load':854,1284 'lobster':679 'logo':1491,1743 'lorem':1224 'maeda':278 'md':93,360,797,808,818 'meta':929,1162,1403 'minim':1993 'mobil':822 'modern':1992 'mono':668 'monospac':653,666 'mood':510 'motion':1197 'ms':1189,1321,1758,1763 'mute':589,774 'need':1582,1589 'none':846 'not-allow':851,1141 'note':1901,1922 'num':1045 'opac':1205 'outlin':845,1737 'overflow':1230,1336 'p':541,1997 'pack':948 'pad':756 'papyrus':676 'pointer':1137 'polici':46 'prd':131,194,341,372,414,1891 'prefer':1195 'prefers-reduced-mot':1194 'primari':550,729,753,768 'primit':708,725 'pro':673 'prompt':924,928,947 'python3':532,633,1985,2000,2008,2016 'qa':2045 'ram':275 'readi':1578 'redesign':1588 'reduc':1196 'references/design-template.md':961,962,2101,2102 'review':1581 'saa':553,1263 'safe':1112 'safe-area-inset':1111 'san':651,658,660,678 'sans/poppins':683 'scalabl':1166 'schema':50 'scheme':1080 'scripts/search.py':1977 'search':1990 'secondari':559,769 'semant':720,745 'serif':662,664,2005 'skill':533,634,1926,1986,2001,2009,2017 'skill-forge-design' 'sm':795,806,817 'sourc':671 'source-yike-gunshi' 'space':717,734,738,759 'space-component-gap':733,758 'spinner':857 'srcset':1283 'srcset/sizes':1152 'style':2023 'subset':1287 'success':777 'surfac':577,772 'svg':1251 'swap':1289 'system':540,1996 'tablet':824 'tabular':1044 'tabular-num':1043 'tap':1326 'testimoni':1267 'text':1036,1229 'text-overflow':1228 'text-wrap':1035 'toast通知':1410 'todos.md':1586 'token':439,547,702,706,709,721,741,763,871,1508,1526,1557,1599,1604,1606,1652,1733,1777 'token体系':82 'tool':1991 'topic-agent-skills' 'topic-ai-development' 'topic-claude-code' 'topic-forge' 'topic-skill-md' 'topic-skillsmp' 'transform':1203 'transform性能':1328 'transit':1199 'trust':2013 'type':1160 'typographi':639,2007 'ui':178,612,923,1518 'url':1115 'user':1165 'user-scal':1164 'ux':1294,1302,1955,2109 'var':730,737,750,757 'viewport':1161,1342,1402 'visibl':841 'vs':231,435,1325 'vx.y':1647,1814 'warn':778 'wcag':584,604,1055,1788 'webp/avif':1282 'websearch':467 'wide':828 'wrap':1037 'x':1829,2053 'xl':801,812 'xs':793 'y':2055 'z':988,1333,2057 'z-index':987,1332 '一个区域一个主手势':1768 '一切居中对齐':1246 '一段话描述这个方向给人的感受':512 '一站式解决方案':1261 '一致性验证':100 '三列功能网格':1242 '三层':705 '三层token架构':17 '下一步':1847 '下拉刷新':1353 '不一致项必须修正或得到用户明确许可':1614 '不仅用颜色编码信息':1063,1795 '不依赖外部skill':28 '不做':901 '不写代码':58,2027 '不区分大小写':357 '不只是':2074 '不只是变灰':1766 '不可用':848 '不可跳过':124 '不含语义':712 '不坏':2075 '不存运行状态':1865 '不孤立评估':2084 '不孤立评估单个页面':221 '不是':1219,2031,2044,2058 '不是屏幕':220 '不是纯白':625,1069 '不是错误':684 '不是随意值':1090 '不混用':621,1075,1740 '不用':1198 '不用纯红':616 '不纯白':1775 '不能':844 '不能放行':2091 '不能进入':951 '不适用':1837 '不逐项打勾':1455 '不需要用户确认的内容':1615 '与主色对比度高':567 '专业':462 '个产品类型配色库':546 '个充分记录的发现':2069 '个反面模式':1239 '个反面模式要直接说出来':2064 '个同类产品的截图或设计评测':473 '个字体搭配方案':696 '个字符呢':256 '个模糊观察':2071 '个美学方向':503 '个词':516 '个高影响低工作量的改进建议':2082 '中':1459 '中影响降半级':1724 '中性色系始终暖或冷':1074 '中性色系统一暖或冷':620 '中的':1598 '为什么':943,1216 '为信任设计':293 '为每张图写明':913 '主内容区':1495 '主操作':1129 '主文字':583 '主色':518 '主色的类似色或互补色':561 '主色降饱和':626 '交互':478,1355,1754 '交互审查':1531 '交互方案':1511 '交互状态':1120,1473,1706 '交互状态覆盖':1545 '交互评分':25 '交付前检查清单':1728 '交由':62 '产出':59,692,957 '产出是':2028 '产品a':484 '产品b':487 '产品c':490 '产品名':542,1998 '产品理解':449 '产品类型':536,1966,2113 '产品类型决定':552 '亮':1769 '亮色模式':570,1772 '什么时候选这个方向':525 '从':1720 '从当前到满分需要什么':1576 '从进入到完成的情绪变化':1550 '从零创建':446 '他们之前试过什么':251 '代码分割':1383 '代码字体':665 '代表性字体搭配':521 '代表性配色':517 '令人愉悦的':1679 '以下是每类核心规则':1306 '但':594 '但如果只用它们且不加调整':685 '低':1461 '低对比度':593 '体现设计思考':1680 '体系':872 '体系架构':703 '作为实现前的视觉预判门禁':120 '使用':117,920,1106 '使用内嵌数据资源搜索字体建议':631 '使用内嵌数据资源搜索配色建议':530 '使用平台缓动':1764 '使用正确':1744 '例':713,726,746 '例如':915 '侧边栏':1494 '保存':946 '保存到设计文档同目录的':930 '保存设置':1222 '保留所有版本':1642 '信号差':227 '信息密度':985 '信息密度或布局判断时做':899 '信息架构':1541 '修改':1649,1833 '修改组件规范':1645 '值得借鉴的点':486,489,492 '做热点分析':425 '像设计师思考':2043 '元素有':1077 '先为用户体验的完整情感弧线做故事板':298 '先完成设计方向':904 '先理解产品':451 '先用以下体系审计现有设计状态':970 '先看效果图':35 '全栈设计规划与文档管理':4,56 '全程中文':110 '全部':1736 '共同的设计语言':494 '共性':493 '关心感觉对不对':2047 '关键css':1381 '关键交互方案':888 '关键交互是否有微妙动效':1432 '关键交互的状态流转':1512 '关键决策':1633 '关键状态':885 '关键设计决策需用户确认后才能定稿':111 '具体':1616 '具体且可操作':2051 '具体描述':1573 '具体的值':711 '内可见':1759 '内圆角':1098 '内容':1931 '内容与微文案':1207 '内容宽度一致':1782 '内容组织':1543 '内容质量':1710 '内容跳动预防':1341 '决策用途':914 '决策规则':549 '减去显而易见的':276 '减少动效偏好':1322 '减法默认':273 '分':1569 '分支判断':400 '分的状态':1575 '分类导航':1496 '分级门控体系':121 '分级门控体系下':5 '分钟':286 '分隔线':1252 '列出选项':328 '刘海设备使用':1109 '创建模式':138,407,445 '初稿':959 '判断变更类型':379 '前':281 '前端变更已完成':1745 '前端美学':1411 '副作用':1338 '加上有意义的':277 '加载中':855 '加载指示器':1406 '加载按钮':1361 '加载状态':1323 '加载状态以':1232 '动作':192 '动效':1715 '动效与动画':1169,1431 '动效是否有目的':1190 '动画':1315 '动画时长':1760 '包大小':1386 '区分':1327 '区块间距有层级':1786 '千篇一律的':1262 '升级到':168,1805 '协调配色主题':1426 '单位':1343 '卡片':578,1610 '卡片网格':1497 '危险操作':601 '危险操作有确认或撤销':1234 '原始值':710 '参考':960 '反ai模板检测':22 '反思':290 '反映状态':1116 '反馈':1404 '反馈状态':1192 '发生了什么':1215 '变更':179 '变更前':1821 '变更后':1822 '句':318 '只动画':1202 '只在视觉变化影响观感':898 '只存内容':1864 '只有一只手空闲':228 '只记录实际发现的问题':1454 '可以做不同的地方':496 '可以直接实现':1580 '可以追溯到一个破碎的原则':269 '可生成简单':1665 '可能泛用':687 '可读字号':1401 '可读性第一':656 '可调试的':271 '可选':1535,1661 '同一模块':130,196 '同一模块是否有':374 '同时为三者设计':291 '同理心即模拟':225 '向用户展示':693 '向用户总结当前设计状态':442 '向用户确认门控级别':398 '否掉哪张':942 '含':1941 '含义':1874 '含代码示例':1958 '启动时':1889 '告知用户':390 '和':8,1204 '和代码实际使用的是否一致':440 '和组件':1558 '和设计方案':61,2030 '品味是':270 '品牌':1742 '品牌主色':551 '响应式':1396,1708 '响应式与无障碍':1559 '响应式断点的具体像素值':1621 '响应式是设计':2073 '响应式行为':1502 '响应式设计':1145 '哪':244 '回到第3步重新设计':1801 '因为':307,2056 '固定定位适配':1339 '图标':1213 '图标大小有统一规范':1741 '图标风格一致':1735 '图片':1749 '图片优化':1379 '图片是否优化':1281 '图片是否响应式':1151 '圆角':805 '圆角层级':1608 '圆角是否有层级':1095 '在做任何设计之前':450 '在动像素之前':297 '在审计清单基础上':1300 '在损害用户体验':1693 '在给出最终评分前':1729 '在设计方案之前':969 '场景':456 '基于':788 '基数':1089 '基础扎实':1682 '基础设施':176 '填失败原因':1923 '声称的':438 '外圆角':1099 '多轮确认':859 '大三度':1009 '大容器大圆角':1097 '大文本':609 '大类':1297 '大胆数据':508 '大需求下的子模块':203 '大需求下的子模块设计必须与父页面对齐':2098 '失败':1882,1921 '失败时':1918 '奢侈':557 '如':506 '如有':424 '如有变更':1653 '如果':304 '如果名字有':254 '如果当前任务是大需求下的子模块':394,1594 '如果我只能展示':241 '如果无法生成图片':945 '如适用':1066 '始终包含':2079 '子模块一致性':202,1835 '子模块一致性检查':1593 '子模块必须一致':2097 '子模块必须通过与父页面的一致性检查':148 '子模块检查':393 '字体':15,81,779,906,1004,1506,1605,1980 '字体决策框架':640 '字体切换闪烁':1293 '字体加载':1380 '字体反面模式':674 '字体库':2106 '字体搭配':630,867 '字体方案':1664 '字体是否优化':1286 '字号':784 '字族':783 '字段和':1902 '字符':1022 '字重':785,1420 '字重对比是否足够区分层级':1029 '字间距创造了节奏':1421 '它们是你的观察方式':216 '安全':460 '安全区域适配':1780 '完成后':1910 '完整审计':85 '完整白名单':48 '完整规则数据在':1304 '完整设计':76,123 '完整设计必做':896 '完整重来':213,1807 '完美':264 '定义':1600 '定位':340,347,362 '定位文档':338 '定位父页面':395 '定位项目文档':335 '实现':71,1856 '实现交给':2033 '实际':436 '审查':88 '审查内容':1540 '审查维度':1538 '审计方法':1446 '审计时额外检查以下维度':1414 '容器':579 '容器宽度':1344 '密度是否因内容类型而异':1437 '密码可见性':1395 '对':1517 '对新项目的配色':1663 '对每个受变更影响的页面':1447 '对每个维度打':1566 '对每个设计变更点':1481 '对比度':588 '对比度是否达标':1057 '对比度达标':1790 '对比文档':434 '对照检查':94 '对称重复':1244 '对重要设计决策':1536 '对齐是否一致':1091 '导航':1307,1492 '导航在小屏幕是否折叠':1156 '导航结构':1542 '将':1894 '将一切与用户目标和产品目的挂钩':309 '将图片':927 '尊不尊重用户':2049 '小元素小圆角':815,1096 '小写文本不加字间距':1046 '小组件添加':154 '少量不一致':1683 '就绪度分级':1577 '尽可能少的设计':274 '层叠上下文':1340 '层级化':814,820 '层级即服务':234 '层级是否跳级':1025 '层级深度':1544 '屏幕阅读器':1373,1562 '屏幕阅读器友好':1794 '展示':870 '展示竞品调研':861 '展示配色方案':866 '属性值':1618 '嵌套元素':1101 '工具':53 '工程师':2046 '左边框高亮卡片':1255 '差异化机会':495 '已创建':1841,1846 '已完成':1880,1893,1913 '已归档':1751 '已更新':1840 '已规划':1876 '已追加':1845 '布局':476,1108,1330,1519,1779 '布局约束':907 '平滑滚动':1309 '年关系':289 '并在交付总结中标注':949 '并说明':1570 '建议':305 '建议优化间距':2059 '开始':1722 '引导注意力':1191 '引用':724,744 '张':879 '弯引号':1040 '强制重新设计':201 '强调色':520,563 '归档目录':934 '当前分数及原因':1571 '当前正在执行':1879 '当前项目':314 '当设计元素':1254 '形状匹配真实内容':1126,1279 '彩色圆圈中的图标做区块装饰':1245 '彩色圆圈图标':1243 '待处理':1875 '微妙但可见':599 '必填指示':1394 '必要时imag':97 '必选':1533 '必须升级':2095 '必须定义':766 '必须有':843 '必须读父页面':204 '必须返工':147,1800 '快速':459 '快速胜利很重要':2078 '性能':1377 '性能即设计':1270 '性能感受':1717 '总结为用户':482 '悬停状态':1358 '愉悦':461 '感觉未完成':1691 '懒加载':1382 '成功':1059 '成功反馈是否明确':1132 '成功的体验是什么感觉':458 '我会注意到吗':261 '我好奇':302 '我注意到':300 '我认为':306 '或':67,790,932,1852,2038 '或全部':1738 '或正文':661 '或类似文件':345 '或视觉层次':1443 '截断是否正确处理':1227 '所有可点击元素':1135 '所有状态变化':1501 '所有状态是否定义':1546 '所有设计知识内嵌':27 '所有颜色来自设计体系':1732 '手势冲突预防':1351,1767 '打磨不影响':1725 '打磨项':1462 '执行失败':1883 '执行完成':1881 '扫描项目前端文件':430 '把':2052 '把确认结果写入':937 '按下中':838 '按关键词搜索配色':1979 '按钮':1611 '按钮标签是否具体':1218 '按领域深入搜索':1999 '排版':1001,1469,1700 '推荐的设计方案':324 '描述':511 '描述组件的视觉表现':1500 '提交':1220 '提取它们的共性设计模式':475 '提取它们的差异化设计元素':480 '提取实际使用的设计体系':432 '提取设计相关变更':416 '提问':303 '提问反射':248 '搜索':342,470,1493 '搜索同行业产品的设计语言':468 '搜索模式':349 '搜索脚本用法':1982 '摩擦点':1551 '操作':1212 '操作规则':1887 '改成':2054 '故事板旅程':296 '数字是否使用':1042 '数据可视化设计':1972 '数据资源':1924 '文件':1838,1930 '文本偏白':623 '文本在各尺寸是否可读':1153 '文本对比度':1773 '文本行宽可读':1785 '文案':1258 '文档内部引用是否一致':1659 '文档落地路径':41 '断点':821 '断点处理正确':1104 '断点测试':1399 '新增':1644,1648,1831 '新增的颜色':1505 '新建':964 '新模块':382 '新的独立功能模块':128 '新页面':127,381 '新项目':126,380 '新项目必须定义的':762 '方向名称':505 '方案':500 '方案中含糊或未定的部分':1564 '方案是否可能产出泛用感的界面':1554 '方案是否复用已有':1556 '方案设计':1480 '无':177,405,1163,1223,1291 '无ui':105,388 '无关元素远':1094 '无关装饰是否在抢注意力':984 '无感':263 '无水平滚动':1102 '无硬编码值':1734 '无红绿纯组合':1073 '无障碍':1364,1787 '无需外部依赖':1929 '无黑名单字体':1047 '日期':1639 '时长是否合理':1186 '时长规范':1318 '时间':1630,1916 '时间维度设计':280 '明确列出属性':1201 '是否一致':1062 '是否尊重':1193 '是否拥挤或过于稀疏':986 '是否有纹理':1441 '是否清晰':990 '是否通过字号':1419 '暂停':1885,1908 '暗一个层级':581 '暗模式':1770 '暗色模式':573,622 '暗色模式主色降饱和':1070 '暗色模式文本偏白':1067,1774 '暗色模式是否正确处理':1065 '更新':1626,1635,1900 '更新文档':101 '更新版本号':1638 '更新设计体系':1651 '更新设计文档':1624 '更新迭代摘要区':1641 '更新页面布局说明':1656 '替你做设计决策':911 '最低':1726 '最后看到什么':238 '最新迭代摘要':415 '最终实现仍以':1524 '最高赞美是没注意到设计':265 '有':401 '有原则的品味':267 '有意识的':1677 '有明显问题':1690 '有最大宽度限制':1103 '有没有参考产品':463 '有没有意识':2048 '有理有据的意见':308 '有闪烁动画':1280 '未决设计问题':1563 '未开始':1877 '本':1925 '本能':284 '权重':1697 '条':1299,1954 '条件':191 '来自':544,641 '架构':707,1860 '栅格是否一致':1086 '标注完整度':326 '标签页在查询参数中':1118 '标记':691,1646,1873 '标记为':686 '标题':1016 '标题字体':522,646 '标题字体是否有个性':1418 '标题层级':1370 '样东西':243 '样式微调':153,385 '样最重要':246 '核心原则':1861 '格式规范':311 '桌面端':836,883 '检查':371 '检查一致性':206 '检查子模块方案是否使用了相同的':1602 '模式匹配':365 '模板生成视觉稿':925 '模板痕迹':1713 '模板痕迹检测':1237 '模板痕迹检测是超能力':2062 '模板痕迹评分':1824 '模板痕迹风险':1553 '模糊后主次关系是否明显':996 '次迭代':134,198 '次迭代记录':376 '正在设计的功能':315 '正文':606,1013,1031 '正文字体':523,655 '正确':1158 '步产品定位':1964 '步字体决策':1946 '步美学方向':1951 '步配色决策':1937 '步骤':902 '残留':1226 '每个交互组件必须定义以下状态':831 '每个决策回答':235 '每个包含':504 '每个发现附上影响评估':1456 '每个视图是否有且仅有一个主':998 '每个设计决策放在用户旅程的完整上下文中评判':2085 '每个设计决策要么建立要么侵蚀信任':294 '每个附':697 '比':591 '比例尺':792 '比例比率是否系统化':1007 '比背景亮':580 '没大问题':1687 '没有莫名其妙的层叠':991 '没设计观点':1688 '沿用已有体系':1622 '泛用':1256 '泛用字体是否有调整':1048 '波浪':1250 '活动状态指示':1311 '活跃状态':1359 '流程':135,155,180 '流程总览':72 '测试':262 '浮动圆圈':1249 '消息':1211 '涉及前端页面':112 '涵盖竞品调研':12 '深度优于广度':2066 '深链接支持':1313 '渐变':1442 '温暖人文':509 '温暖消息':1128 '满分标准是什么':1572 '灰色边框':1445 '点击反馈':1755 '点击延迟消除':1352 '焦点是否清晰':981 '焦点状态':1357 '然后看到什么':237 '版本':1813 '状态变化':1520 '状态或布局时':114 '状态是否完整':1124 '状态标记协议':1872 '状态管理':1858 '独特排版':1417 '理想':1024 '理由':325 '理解现状':411 '生成':876 '生成完整设计系统建议':1984 '生成或引用视觉稿':1521 '生成预览页':1662 '用':427,466,1487 '用于优雅':649 '用于技术':654 '用于标题':1039 '用于现代':652 '用以下方式深度审查':1537 '用户应该先看到什么':236 '用户旅程情感弧线':1549 '用户确认':868,874,889 '用户确认后':936 '用户确认实际观感':886 '用户确认结果已写入':1752 '用户说':30 '用户选择方向':864 '用途':644,1932 '用非技术语言描述设计问题和方案':321 '由设计体系推导':1619 '电商':555 '男性红绿色盲':619 '留白是否有意':1436 '的':922,939 '的力量':1260 '的视觉实现':955 '直接到':1027 '直接进':106,185 '相关元素近':1093 '省略号用正确字符':1041 '看体系':219 '看前后上下文':222 '看起来专业':1684 '眯眼测试':995 '硬门控':144 '确保设计有独特美学意识':1415 '确认':1484,1890 '确认与总结':1809 '确认对话框':1363 '确认理解是否正确':443 '禁用状态':1138,1360 '禁用状态有语义化表达':1765 '种':1006 '种产品类型的完整配色方案':1935 '种产品类型的设计属性':1962 '种图表类型指南':1971 '种字体族':690 '种落地页区块类型':1975 '种设计风格定义':1949 '秒':283 '秒能否传达页面目的':994 '移动':1181 '移动优先':1398 '移动端':884,1154 '移动端体验':1560 '移动端是有设计意义的布局':1148 '移动端要有独立的设计意义':2076 '移动端选择控件是否清楚':918 '空状态':1407 '空状态是否有温度':1210 '空状态有设计吗':1127 '空白是有意图的还是偶然的':997 '空间构图':1435 '竞品设计观察':483 '竞品调研':77,465 '第0步':136,156,334 '第1.1':1963 '第1.3':1950 '第1.4':1936 '第1.5':1945 '第1步':137,157,409,444 '第1步创建':408 '第1步迭代':404 '第1轮':860 '第2步':139,159,967 '第2步审计补充':1959 '第2轮':865 '第3步':140,161,1477 '第3轮':869 '第4步':141,163,1623 '第4轮':875 '第5步':142,164,1669 '第5步评分':145 '第5轮':887 '第6步':143,1808 '第一千次使用':232 '第一反应是提问不是发表意见':249 '第一次':230 '第三方脚本':1385 '等待用户确认或外部依赖':1886 '等待确认时':1905 '等级定义':1675 '等级计算':1719 '筛选器':1117 '简化':162 '管理':1335 '管理项目的':6 '类':973,1451 '类别':765,1696 '类别权重':1695 '粘性导航':1310 '精致极简':507 '精致的':1678 '系统栏留空':1781 '紫':1240 '红色系':602 '约':974 '约束崇拜':240 '纯后端':104,173,387 '纯四度':1011 '纯数据处理':175 '纯设计':2026 '纯设计规划':57 '线框图描述布局结构':1489 '组件':113,613,1448 '组件状态定义规范':830 '组件级':742 '组件规范和真实截图为准':1527 '组件设计':1499 '组件风格':1609 '组字体搭配':1940 '组搭配库':643 '细节动效参数':1620 '绑定到具体组件':743 '结尾':1233 '给出推荐':323 '给出至少':501 '给谁用的':454 '统一大圆角':1247 '维度':1413,1453,1539 '绿':556 '绿组合':617 '缓动':1172 '缓动函数':1329 '缓存':1384 '网络断了':258 '美学方向':78,863 '美学方向探索':13,498 '老板在看':229 '而是':1221 '背景':1631 '背景与视觉细节':1440 '能用但泛用':1686 '自动升级触发器':189 '自动填充':1393 '自动推荐设计方向':1968 '自带以下数据文件':1927 '自洽性检查':1658 '自闭环':26,1928 '色温是否统一':1428 '色盲':259 '色盲友好':1064 '节奏':1264 '节奏是否正确':1092 '落地页设计':1976 '蓝':554 '蓝紫渐变背景或蓝到紫配色':1241 '行为':287,1892 '行内验证':1391 '行宽':1019 '行改为':1907,1912,1920 '行更新为':1896 '行高':786,1012 '补充以下':1301 '表单':1387 '表单在移动端可用':1157 '表单标签':1374 '表达品牌个性':647 '表达意图':723 '表面可读性':1771 '装饰性色块':1248 '见':51 '观察':301 '规则':1956,2110 '规则体系':1303 '规则补充':1295 '规范':47 '视线流动是否自然':982 '视觉':1130 '视觉关键词':513 '视觉决策记录':940 '视觉噪音':983 '视觉层级':1467,1698 '视觉层级与构图':978 '视觉稿':882,1516 '视觉稿只用于确认方向':1523 '视觉稿未生成':950 '视觉稿门禁':20,893,1748 '视觉质量':1731 '角色':455 '解决什么问题':453 '触发':894 '触发器':190 '触发方式':29 '触发条件':125,151,172 '触发迭代不满升级':377 '触摸':1345 '触摸友好':1400 '触摸目标':1133,1347,1791 '触摸目标是否足够':1150 '触摸间距':1349 '触觉反馈':1354 '警告':1060 '让用户确认观感是否符合预期':1522 '记录':1914 '记录改进项':1587 '设计':31 '设计交付完成':1810 '设计体系变更':1504 '设计体系对齐':1555 '设计决策映射':1967 '设计变更':1828 '设计和审查时让它们自动运行':217 '设计审计':968 '设计审计清单':971 '设计师认知模式':214 '设计批评格式':299 '设计文档模板':2100 '设计方案':1478,1632 '设计方案选项':329 '设计特点':485,488,491 '设计评分':1817 '设计质量评估':1670 '设计资源搜索引擎':1978 '评分':166,209,1798,1803,2089,2093 '评分体系':1674 '评分方法':1565 '评分过低':207 '该怎么做':1217 '该维度需要重新设计':1591 '详情页阅读是否舒服':917 '语义化':722 '语义色':1058 '说明':548 '说明文字':1033 '读design':92 '读取':115,413,421 '读取完整':418 '读取父页面':1596 '调度器自动判断':184 '调度器调用':39 '调色板是否协调':1053 '资源':2099 '超过':688 '跳过设计':103,171,391 '跳过链接':1376 '轻量审查':91,150 '轻量审查只检查重点':1464 '辅助文字':590 '辅助色':560 '辅色':519 '输入标签':1389 '输入框的视觉一致性':1612 '输入类型':1392 '边框':598 '边框和分隔线可见性':1776 '边界情况':1547 '边界情况偏执':253 '边界情况和整体一致性':223 '过一遍上述':1449 '过一遍以下检查':1730 '过度动效控制':1317 '运行心理模拟':226 '运行状态写入':1866 '返回按钮行为':1312 '还是一切都是即时切换':1433 '还是千篇一律的':1422 '还是只是缩小':1149 '还是纯白背景':1444 '还是统一间距':1438 '还是随意拼凑':1429 '这个方向可能出什么问题':527 '这些不是清单':215 '这感觉不对':268 '这是什么':452 '这是给谁的':250 '进入':1173 '进度指示':1409 '进行中':1878,1897 '迭代不满':193 '迭代不满触发器命中':129 '迭代已有功能':152,384 '迭代模式':158,403,410 '追加本次变更记录':1629 '退出':1177 '适用场景':524 '选择标准':645 '通俗解释':320 '通知':565 '通过':1482,1836 '遵循':42 '遵循三层架构':1509,1654 '避免让':908 '配色':14,80,477,905,1603 '配色决策框架':543 '配色库':2103 '配色方案':529 '配色是否传达了产品情绪':1427 '配色校验':603 '采用':704 '采用哪张':941 '释放':1259 '重新聚焦':313 '重点10项':160 '重点审计':95 '重要操作':566 '重要规则':2024 '链接':1944 '链接和视觉描述':700 '错误':1061 '错误位置':1390 '错误反馈':1362 '错误恢复':1408 '错误流程':1548 '错误消息':1375 '错误消息是否具体':1214 '错误消息是否具体且有帮助':1131 '键盘导航':1372,1561 '键盘导航可用':1793 '键盘焦点':842 '门控':165 '门控判定':73,336,369,1796 '门控必须遵守':2087 '门控级别':1815 '间距':787,1100,1471 '间距与布局':1083,1702 '间距是否遵循比例尺':1087 '间距比例尺':1607 '间距等':1507 '间距节奏':1784 '阴影':816 '阶段推进时':1899 '附视觉效果描述和工作量估算':333 '降一级':1458 '降低透明度':849,1139 '降半级':1460 '集合':764 '零结果':257 '需干预':1884 '需要创建或更新设计文档时使用':40 '需要在':1585 '需要大幅返工':1694 '静止状态':833 '非颜色唯一编码':1368 '面包屑':1314 '页面布局方案':1486 '页面布局线框图':873 '页面背景':569 '顶栏':1490 '项':976,980,1003,1052,1085,1122,1147,1171,1209,1272,1466,1830 '项目':1811 '项目名':1812 '项目目录':343,350,352,354,358 '预览页让用户直观对比':1667 '预连接cdn':1290 '领域文档':1862 '频率':457 '颜色':767 '颜色与对比度':1050,1704 '颜色对比度':1367 '风格':1981 '风格关键词':537,637 '风格搜索':16 '风险点':526 '首屏':992 '首页信息密度是否过重':916 '驱动主题切换':1778 '骨架屏或':856 '骨架屏或加载态':1125 '骨架屏质量':1278 '高':1457 '高影响降一级':1723 '黑名单':675 '黑金':558 '鼠标悬停':835","prices":[{"id":"f591a53f-85fa-49b6-a975-b0312d848183","listingId":"80b2a809-c444-4024-88cd-ebe96f885e08","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"yike-gunshi","category":"forge-skills","install_from":"skills.sh"},"createdAt":"2026-04-24T07:03:38.168Z"}],"sources":[{"listingId":"80b2a809-c444-4024-88cd-ebe96f885e08","source":"github","sourceId":"yike-gunshi/forge-skills/forge-design","sourceUrl":"https://github.com/yike-gunshi/forge-skills/tree/main/skills/forge-design","isPrimary":false,"firstSeenAt":"2026-04-24T07:03:38.168Z","lastSeenAt":"2026-05-18T19:07:33.532Z"}],"details":{"listingId":"80b2a809-c444-4024-88cd-ebe96f885e08","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"yike-gunshi","slug":"forge-design","github":{"repo":"yike-gunshi/forge-skills","stars":11,"topics":["agent-skills","ai-development","claude-code","forge","skill-md","skillsmp"],"license":"mit","html_url":"https://github.com/yike-gunshi/forge-skills","pushed_at":"2026-04-28T05:11:10Z","description":"Forge — 文档驱动的 AI 辅助开发框架 | Document-driven AI development framework with 14 Skills covering brainstorm → PRD → design → engineering → QA → review → ship → retrospective","skill_md_sha":"830996251c66ac86530927b9db9ea6c633f77e8f","skill_md_path":"skills/forge-design/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/yike-gunshi/forge-skills/tree/main/skills/forge-design"},"layout":"multi","source":"github","category":"forge-skills","frontmatter":{"name":"forge-design","description":"全栈设计规划与文档管理。分级门控体系下，管理项目的 DESIGN.md 和 DESIGN-CHANGELOG。涵盖竞品调研、美学方向探索、配色/字体/风格搜索、三层Token架构、Image 2 视觉稿门禁、99条UX规则审计、反AI模板检测、0-10交互评分。自闭环——所有设计知识内嵌，不依赖外部Skill。触发方式：用户说\"设计\"、\"forge-design\"、\"先看效果图\"、forge-dev 调度器调用、需要创建或更新设计文档时使用。"},"skills_sh_url":"https://skills.sh/yike-gunshi/forge-skills/forge-design"},"updatedAt":"2026-05-18T19:07:33.532Z"}}