SuperAPI AI 工具集

d2c

设计与创作

查看项目

更新于 10-15 17:25

技能介绍

用途:将 Figma 设计(figma.com/design/...)实现或更新为 1:1 的界面代码,适用于有设计系统与组件库的前端项目。

项目参数从仓库根目录 C2D2C.md 读取(回退 .claude/c2d2c.md);两者都没有时可用插件根目录的 ../../templates/C2D2C.template.md 引导生成,独立安装可获取 https://raw.githubusercontent.com/BIAsia/c2d2c/main/templates/C2D2C.template.md。涉及 DESIGN_FILE、TOKEN_DOCS、DS_ROUTE、GATES、MR_TOOL、DEPLOY_ORDER。

八步流程:1) 用 Figma MCP(get_design_context + 截图)粗读设计,同时调查现有实现并产出复用矩阵(元素→组件→耦合→复用策略),耦合分纯展示/轻上下文/重数据三层;重耦合优先抽取纯展示核心,视觉复刻为最后手段。2) 计划评审(必须停下等确认),给出范围、组件拆分、动效处理与风险,以推荐方案而非选项清单呈现。3) 逐块用 get_design_context + get_variable_defs 提取规格,映射到项目 token;遇到不在体系内的样式需逐项报告(仅此时停下)。4) 按确认计划做完整 1:1 实现,跑开发服务器并与截图比对。5) 涉及可复用组件时为它创建或更新 DS_ROUTE 回归页,状态枚举参照 c2d2c:c2d 标准,页面用 mock props 渲染。6) 走查动效与状态,检查是否合规于动效阶梯、入场出场、滚动联动与 reduced-motion 回退。7) 截图验收(必须停下等用户通过),可用随附脚本 node ds-shot.mjs <route> [--port N] [--dark] 或手动截图,与 Figma get_screenshot 并排展示并说明偏差。8) 清理与 MR:彻底删除被替换实现(组件文件、barrel 导出、类型、i18n key、未引用样式等),跑 GATES,验收通过且门禁绿色后自动 rebase、用 MR_TOOL 开 MR(描述含 Figma 节点链接、验收截图、变更摘要、删除清单、门禁结果、DEPLOY_ORDER 依赖),并按项目约定合并。

限制:Figma 变量名不等于代码 token 名,须对照项目 token 文件核实;无回归页的纯页面级改动可跳过第 5 步但需说明原因;无头截图可能渲染 CSS 回退而非 WebGL/着色器,必要时用有头浏览器验证;资料未提供具体价格、平台与效果保证。