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