{"id":"947cfcd9-5340-4b6e-b94b-c1491d2aca96","shortId":"2qEySP","kind":"skill","title":"forge-design-impl","tagline":"设计实现：将 DESIGN.md 转化为代码。反AI模板编码、shadcn/ui组件推荐、Token驱动样式、CSS优先修改、原子提交。读取 Image 2/Figma 视觉稿作观感参考，最终以真实截图和 CSS 断言验证。从 forge-design 接力，或 forge-eng 调用。触发方式：用户说\"实现设计\"、\"forge-design-impl\"、设计文档确认后需要写代码时使用。","description":"> **文档落地路径**：遵循 forge-doc-policy 规范。完整白名单 + frontmatter schema 见\n> `~/claudecode_workspace/工具/forge-cookbook/skills/forge-doc-policy/doc-paths.md`。\n\n# /forge-design-impl：设计实现\n\n将 DESIGN.md 的设计规范转化为代码。**只改样式和布局，不改业务逻辑。**\n\n## 前置条件\n\n1. DESIGN.md 必须存在且已通过 forge-design 审核（评分 ≥ B）\n2. 如果有 `.features/{feature-id}/status.md`，确认 design 行为 `[✅ 已完成]`\n3. 读取完整 DESIGN.md，理解设计体系 token、组件规范、页面布局\n4. 如果 DESIGN.md 或 Feature Spec 中有 Image 2 / Figma / 视觉稿链接，读取并作为观感参考；实现真相源仍是 DESIGN.md 的 token 和组件规则\n\n---\n\n## 流程\n\n```\n读取 DESIGN.md → 识别实现清单 → 逐项实现 → 每项自检 → 原子提交 → 全部完成后质量验证\n```\n\n---\n\n## 第1步：识别实现清单\n\n从 DESIGN.md 中提取需要实现的设计变更：\n\n1. 读取 DESIGN CHANGELOG 最新条目，确定本次变更范围\n2. 列出具体实现项，每项包含：\n   - 变更内容（如\"卡片组件圆角从 8px 改为 12px\"）\n   - 涉及文件（定位 CSS/样式文件）\n   - 预计改动量（小/中/大）\n3. 向用户展示清单，确认后开始实现\n4. 若存在视觉稿，额外列出：\n   - 视觉稿路径\n   - 用户确认的关键观感（如信息密度、主次层级、空态情绪）\n   - 实现后需要用真实截图对比的页面/状态\n\n---\n\n## 第2步：实现设计变更\n\n### 实现原则\n\n**1. CSS 优先**\n- 优先修改 CSS/样式文件，而非组件结构\n- CSS 修改更安全、更可逆\n- 只在布局变更时才改 HTML 结构\n\n**2. Token 驱动**\n- 所有样式值引用 DESIGN.md 定义的 token\n- 不硬编码颜色值、字号、间距\n- 使用 CSS 变量或 Tailwind 配置中的 token\n\n**3. 遵循现有代码风格**\n- 不引入新的 CSS 方法论\n- 如果项目用 Tailwind，用 Tailwind；如果用 CSS Modules，用 CSS Modules\n- 不为\"更好\"而重写不相关的样式\n\n**4. 响应式必须**\n- 所有变更都要考虑移动端\n- 移动端不是缩小版桌面——要有独立的设计意义\n- 断点处理遵循 DESIGN.md 定义的断点\n\n### 反 AI 模板编码指导\n\n实现时主动避免以下泛用模式：\n\n**排版：**\n- 不要所有文本都 `text-align: center`\n- 标题用 DESIGN.md 指定的字体，不要默认 Inter\n- 行高、字间距遵循设计体系，不用浏览器默认值\n\n**配色：**\n- 不要用紫色渐变做英雄区背景\n- 不要用彩色圆圈包裹图标\n- 颜色来自 token，不要随意用 Tailwind 调色板\n\n**布局：**\n- 不要千篇一律的三列等宽网格\n- 不要所有区块等高\n- 留白要有意——不是统一的 `py-20`\n- 圆角要有层级——按钮小圆角，卡片中圆角，模态大圆角\n\n**组件：**\n- 不要左边框高亮卡片（`border-left: 3px solid accent`）\n- 不要用 emoji 做列表图标\n- 不要装饰性浮动色块\n\n### 组件选择指导\n\n如果项目使用 shadcn/ui 或类似组件库：\n\n| 组件类别 | 推荐组件 | 使用场景 |\n|----------|---------|---------|\n| **表单** | Input, Select, Textarea, Checkbox, Radio, Switch, Slider | 数据输入 |\n| **布局** | Card, Separator, Tabs, Accordion, Collapsible | 内容组织 |\n| **叠加层** | Dialog, Sheet, Popover, Tooltip, HoverCard | 辅助信息 |\n| **反馈** | Alert, Toast, Progress, Skeleton | 状态反馈 |\n| **导航** | NavigationMenu, Breadcrumb, Pagination, Command | 导航系统 |\n| **展示** | Table, Badge, Avatar, Calendar | 数据展示 |\n\n**无障碍要求：**\n- 所有交互组件必须键盘可操作\n- Dialog/Sheet 必须有焦点锁定（focus trap）\n- 表单必须有 visible label（不只是 placeholder）\n- 错误消息靠近输入字段\n\n---\n\n## 第3步：逐项实现 + 原子提交\n\n每个实现项完成后：\n\n### 3.1 自检\n\n1. 读取 DESIGN.md 对应规范\n2. 对比实现结果是否一致\n3. 检查响应式表现（心理模拟移动端效果）\n4. 检查是否引入了 AI 模板痕迹\n\n### 3.2 提交\n\n```bash\ngit add <只改动的文件>\ngit commit -m \"style(design): 简短描述变更内容\"\n```\n\n- 每个逻辑单元一个提交\n- 不打包多个不相关的设计变更\n- 提交格式：`style(design): 具体描述`\n\n---\n\n## 第4步：质量验证\n\n所有变更实现后：\n\n### 4.1 设计一致性检查\n\n1. 对比 DESIGN.md 和实际渲染结果\n2. 检查 token 是否正确引用（grep 硬编码值）\n3. 检查响应式断点是否按规范处理\n4. 如果有 Image 2 视觉稿，启动页面后截取真实截图，做定性对比：\n   - 信息层级是否一致\n   - 密度和留白是否接近\n   - 主操作、状态、空态/错态是否覆盖\n   - 明显偏离时回到 forge-design 记录设计差异，而不是擅自改 DESIGN.md\n\n**注意：** Image 2 不是 QA 证据，也不是像素级规范。最终验收证据必须是真实截图、CSS 属性和行为断言。\n\n### 4.2 AI 模板痕迹扫描\n\n过一遍 10 个反面模式，确认实现中没有引入泛用感\n\n### 4.3 向用户展示结果\n\n```\n+====================================================+\n|              设计实现完成                              |\n+====================================================+\n| 项目：[项目名]                                        |\n| 实现项：X 项                                          |\n| 提交数：X 个                                          |\n| 文件变更：[列出修改的样式/布局文件]                     |\n| Token 引用率：[X%]（vs 硬编码值）                      |\n| AI 痕迹检查：[通过/发现N项]                            |\n| 下一步：forge-qa 验证 或 cn-qa-design 设计QA             |\n+====================================================+\n```\n\n---\n\n## Feature 状态管理\n\n### 操作规则\n\n1. **启动时**：确认 design 行为 `[✅ 已完成]`，将 design-impl 行（或 eng 行）更新为 `[🔄 进行中]`\n2. **完成后**：更新为 `[✅ 已完成]`\n\n---\n\n## 重要规则\n\n1. **只改样式和布局，不改业务逻辑。** 如果需要改 JS 逻辑，那是 forge-eng 的工作。\n2. **DESIGN.md 是唯一真相源。** 不要\"改进\"设计——按文档实现。有异议回 forge-design 讨论。\n3. **CSS 优先。** 能用 CSS 解决的不改 HTML 结构。\n4. **Token 驱动。** 不硬编码颜色/字号/间距值。\n5. **原子提交。** 每个逻辑单元一个 commit。\n6. **反 AI 模板。** 实现中主动避免泛用模式。\n7. **响应式不是可选的。** 每个变更都必须考虑移动端。","tags":["forge","design","impl","skills","yike-gunshi","agent-skills","ai-development","claude-code","skill-md","skillsmp"],"capabilities":["skill","source-yike-gunshi","skill-forge-design-impl","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-impl","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 (3,830 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.433Z","embedding":null,"createdAt":"2026-04-24T07:03:38.074Z","updatedAt":"2026-05-18T19:07:33.433Z","lastSeenAt":"2026-05-18T19:07:33.433Z","tsv":"'-20':245 '/claudecode_workspace':51 '/forge-cookbook/skills/forge-doc-policy/doc-paths.md':53 '/forge-design-impl':54 '/status.md':77 '1':62,119,158,328,364,450,471 '10':410 '12px':133 '2':71,97,125,171,332,368,379,398,466,482 '2/figma':17 '3':82,142,187,334,374,494 '3.1':326 '3.2':341 '3px':255 '4':89,145,205,337,376,502 '4.1':362 '4.2':406 '4.3':413 '5':508 '6':512 '7':517 '8px':131 'accent':257 'accordion':282 'add':345 'ai':214,339,407,432,514 'alert':293 'align':221 'avatar':307 'b':70 'badg':306 'bash':343 'border':253 'border-left':252 'breadcrumb':300 'calendar':308 'card':279 'center':222 'changelog':122 'checkbox':273 'cn':443 'cn-qa-design':442 'collaps':283 'command':302 'commit':348,511 'css':20,136,159,162,165,182,190,197,200,404,495,498 'css优先修改':13 'design':3,25,37,67,79,121,351,357,392,445,453,458,492 'design-impl':457 'design.md':7,57,63,84,91,102,108,117,175,211,224,330,366,395,483 'dialog':286 'dialog/sheet':312 'doc':44 'emoji':259 'eng':30,462,480 'featur':73,75,93,447 'feature-id':74 'figma':98 'focus':314 'forg':2,24,29,36,43,66,391,438,479,491 'forge-design':23,65,390,490 'forge-design-impl':1,35 'forge-doc-polici':42 'forge-eng':28,478 'forge-qa':437 'frontmatt':48 'git':344,347 'grep':372 'hovercard':290 'html':169,500 'id':76 'imag':16,96,378,397 'impl':4,38,459 'input':270 'inter':227 'js':475 'label':318 'left':254 'm':349 'modul':198,201 'navigationmenu':299 'pagin':301 'placehold':320 'polici':45 'popov':288 'progress':295 'py':244 'qa':400,439,444 'radio':274 'schema':49 'select':271 'separ':280 'shadcn/ui':10,264 'sheet':287 'skeleton':296 'skill' 'skill-forge-design-impl' 'slider':276 'solid':256 'source-yike-gunshi' 'spec':94 'style':350,356 'switch':275 'tab':281 'tabl':305 'tailwind':184,193,195,237 'text':220 'text-align':219 'textarea':272 'toast':294 'token':86,104,172,177,186,235,370,427,503 'token驱动样式':12 'tooltip':289 'topic-agent-skills' 'topic-ai-development' 'topic-claude-code' 'topic-forge' 'topic-skill-md' 'topic-skillsmp' 'trap':315 'visibl':317 'vs':430 'x':419,422,429 '下一步':436 '不为':202 '不只是':319 '不引入新的':189 '不打包多个不相关的设计变更':354 '不改业务逻辑':60,473 '不是':399 '不是统一的':243 '不用浏览器默认值':230 '不硬编码颜色':505 '不硬编码颜色值':178 '不要':485 '不要千篇一律的三列等宽网格':240 '不要左边框高亮卡片':251 '不要所有区块等高':241 '不要所有文本都':218 '不要用':258 '不要用彩色圆圈包裹图标':233 '不要用紫色渐变做英雄区背景':232 '不要装饰性浮动色块':261 '不要随意用':236 '不要默认':226 '个':423 '个反面模式':411 '中':140 '中提取需要实现的设计变更':118 '中有':95 '主操作':385 '主次层级':151 '也不是像素级规范':402 '从':22,116 '优先':160,496 '优先修改':161 '使用':181 '使用场景':268 '信息层级是否一致':383 '修改更安全':166 '做列表图标':260 '做定性对比':382 '全部完成后质量验证':113 '具体描述':358 '内容组织':284 '列出修改的样式':425 '列出具体实现项':126 '前置条件':61 '卡片中圆角':248 '卡片组件圆角从':130 '原子提交':14,112,324,509 '反':213,513 '反ai模板编码':9 '反馈':292 '发现n项':435 '变更内容':128 '变量或':183 '叠加层':285 '只在布局变更时才改':168 '只改动的文件':346 '只改样式和布局':59,472 '向用户展示清单':143 '向用户展示结果':414 '启动时':451 '启动页面后截取真实截图':381 '和实际渲染结果':367 '和组件规则':105 '响应式不是可选的':518 '响应式必须':206 '圆角要有层级':246 '大':141 '如':129 '如信息密度':150 '如果':90 '如果有':72,377 '如果用':196 '如果需要改':474 '如果项目使用':263 '如果项目用':192 '字号':179,506 '字间距遵循设计体系':229 '完成后':467 '完整白名单':47 '定义的':176 '定义的断点':212 '定位':135 '实现中主动避免泛用模式':516 '实现原则':157 '实现后需要用真实截图对比的页面':153 '实现时主动避免以下泛用模式':216 '实现真相源仍是':101 '实现设计':34 '实现设计变更':156 '实现项':418 '审核':68 '密度和留白是否接近':384 '对应规范':331 '对比':365 '对比实现结果是否一致':333 '导航':298 '导航系统':303 '将':6,56,456 '小':139 '展示':304 '属性和行为断言':405 '工具':52 '已完成':81,455,469 '布局':239,278 '布局文件':426 '引用率':428 '心理模拟移动端效果':336 '必须存在且已通过':64 '必须有焦点锁定':313 '或':27,92,441,461 '或类似组件库':265 '所有交互组件必须键盘可操作':311 '所有变更实现后':361 '所有变更都要考虑移动端':207 '所有样式值引用':174 '指定的字体':225 '按文档实现':488 '按钮小圆角':247 '排版':217 '接力':26 '推荐组件':267 '提交':342 '提交数':421 '提交格式':355 '操作规则':449 '改为':132 '改进':486 '数据展示':309 '数据输入':277 '文件变更':424 '文档落地路径':40 '断点处理遵循':210 '断言验证':21 '方法论':191 '无障碍要求':310 '明显偏离时回到':389 '是否正确引用':371 '是唯一真相源':484 '更可逆':167 '更好':203 '更新为':464,468 '最新条目':123 '最终以真实截图和':19 '最终验收证据必须是真实截图':403 '有异议回':489 '标题用':223 '样式文件':137,163 '检查':369 '检查响应式断点是否按规范处理':375 '检查响应式表现':335 '检查是否引入了':338 '模态大圆角':249 '模板':515 '模板痕迹':340 '模板痕迹扫描':408 '模板编码指导':215 '每个变更都必须考虑移动端':519 '每个实现项完成后':325 '每个逻辑单元一个':510 '每个逻辑单元一个提交':353 '每项包含':127 '每项自检':111 '注意':396 '流程':106 '涉及文件':134 '状态':154,386 '状态反馈':297 '状态管理':448 '理解设计体系':85 '用':194,199 '用户确认的关键观感':149 '用户说':33 '留白要有意':242 '痕迹检查':433 '的':103 '的工作':481 '的设计规范转化为代码':58 '硬编码值':373,431 '确定本次变更范围':124 '确认':78,452 '确认后开始实现':144 '确认实现中没有引入泛用感':412 '移动端不是缩小版桌面':208 '空态':387 '空态情绪':152 '第1步':114 '第2步':155 '第3步':322 '第4步':359 '简短描述变更内容':352 '组件':250 '组件推荐':11 '组件类别':266 '组件规范':87 '组件选择指导':262 '结构':170,501 '而不是擅自改':394 '而重写不相关的样式':204 '而非组件结构':164 '能用':497 '自检':327 '若存在视觉稿':146 '行':460,463 '行为':80,454 '行高':228 '表单':269 '表单必须有':316 '要有独立的设计意义':209 '见':50 '规范':46 '视觉稿':380 '视觉稿作观感参考':18 '视觉稿路径':148 '视觉稿链接':99 '解决的不改':499 '触发方式':32 '讨论':493 '记录设计差异':393 '设计':487 '设计qa':446 '设计一致性检查':363 '设计实现':5,55 '设计实现完成':415 '设计文档确认后需要写代码时使用':39 '证据':401 '评分':69 '识别实现清单':109,115 '读取':15,107,120,329 '读取完整':83 '读取并作为观感参考':100 '调用':31 '调色板':238 '质量验证':360 '转化为代码':8 '辅助信息':291 '过一遍':409 '进行中':465 '逐项实现':110,323 '通过':434 '逻辑':476 '遵循':41 '遵循现有代码风格':188 '那是':477 '配置中的':185 '配色':231 '重要规则':470 '错态是否覆盖':388 '错误消息靠近输入字段':321 '间距':180 '间距值':507 '页面布局':88 '项':420 '项目':416 '项目名':417 '预计改动量':138 '颜色来自':234 '额外列出':147 '驱动':173,504 '验证':440","prices":[{"id":"e8b2f50d-bbdf-4b75-807c-692eefa363ff","listingId":"947cfcd9-5340-4b6e-b94b-c1491d2aca96","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.074Z"}],"sources":[{"listingId":"947cfcd9-5340-4b6e-b94b-c1491d2aca96","source":"github","sourceId":"yike-gunshi/forge-skills/forge-design-impl","sourceUrl":"https://github.com/yike-gunshi/forge-skills/tree/main/skills/forge-design-impl","isPrimary":false,"firstSeenAt":"2026-04-24T07:03:38.074Z","lastSeenAt":"2026-05-18T19:07:33.433Z"}],"details":{"listingId":"947cfcd9-5340-4b6e-b94b-c1491d2aca96","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"yike-gunshi","slug":"forge-design-impl","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":"cf83a3af07ef13d92fbebb4d12f58683e52917fa","skill_md_path":"skills/forge-design-impl/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/yike-gunshi/forge-skills/tree/main/skills/forge-design-impl"},"layout":"multi","source":"github","category":"forge-skills","frontmatter":{"name":"forge-design-impl","description":"设计实现：将 DESIGN.md 转化为代码。反AI模板编码、shadcn/ui组件推荐、Token驱动样式、CSS优先修改、原子提交。读取 Image 2/Figma 视觉稿作观感参考，最终以真实截图和 CSS 断言验证。从 forge-design 接力，或 forge-eng 调用。触发方式：用户说\"实现设计\"、\"forge-design-impl\"、设计文档确认后需要写代码时使用。"},"skills_sh_url":"https://skills.sh/yike-gunshi/forge-skills/forge-design-impl"},"updatedAt":"2026-05-18T19:07:33.433Z"}}