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