用途:把 .design/ 目录(由 /figma2design 产出)转化为项目中可运行的页面与组件,并适配项目已有的技术栈、目录结构和编码约定。前置条件是项目根目录存在 .design/,且已有前端项目(React/Vue/Svelte 加 CSS 框架);若缺少 .design/,会提示先运行 /figma2design <figma-url>。
主要能力:读取 DESIGN.md、CODE_PATTERNS.md、COMPONENTS.md、PAGES.md、ICONS.md 等规范,检测项目技术栈,对比已有文件后规划生成;生成设计 token(颜色、字体、圆角、阴影等)、基础与复合组件、页面并接入路由,最后跑类型检查、lint 和开发服务器做验证,对照 .design/screenshots/ 修正差异。
用法:/design2code 生成全部页面;/design2code home 只生成 home 页;/design2code home,skills 生成指定页面;/design2code --components-only 只生成共享组件;/design2code --tokens-only 只生成设计 token;/design2code --dry-run 只展示计划不写文件;/design2code --target web 指定 monorepo 中的目标应用。
限制:不会未经询问覆盖已有文件,不从头创建新项目,不未经确认安装依赖,不生成后端或 API 代码;数据处使用 TypeScript 接口并留 TODO,不会把 mock 数据当真实数据。若无前端项目、.design/ 不完整、存在同名组件或项目使用组件库,会给出相应提示或适配方案。