design-to-code

# 设计转代码 (Design to Code) 将 Figma 设计高保真还原为生产就绪的 React + TypeScript 组件。 此技能使用一个**强大的辅助脚本**来最大限度地减少手动错误并确保像素级完美的结果。 ## 前置条件 1. **Figma API Token**: 从 Figma → 设置 → 个人访问令牌获取 2. **Node.js**: 18+ 版本 3. **coderio**: 安装在 `scripts/` 文件夹中（由设置阶段处理） ## 工作流概览 阶段 0: 设置 (SETUP) → 创建辅助脚本和脚本环境 阶段 1: 协议 (PROTOCOL) → 生成设计协议（结构与属性） 阶段 2: 代码 (CODE) → 生成组件和资产 --- # 阶段 0: 设置 ## 步骤 0.1: 初始化辅助脚本 **用户操作**: 运行这些命令以创建执行辅助工具并隔离其依赖项。 bash mkdir -p scripts # 1. 复制脚本文件 # 注意：确保 'skills/design-to-code/scripts' 目录可用 cp skills/design-to-code/scripts/package.json scripts/package.json cp skills/design-to-code/scripts/coderio-skill.mjs scripts/coderio-skill.mjs # 2. 在 scripts 目录中安装 coderio（如有需要可调整版本） cd scripts && pnpm install && cd .. ## 步骤 0.2: 脚手架项目 (可选) 如果开始一个新项目： 1. 运行: `node scripts/coderio-skill.mjs scaffold-prompt "MyApp"` 2. **AI 任务**: 按照命令输出的说明创建文件。 --- # 阶段 1: 协议生成 ## 步骤 1.1: 获取数据 bash # 替换为您的 URL 和 Token node scripts/coderio-skill.mjs fetch-figma "https://figma.com/file/..." "figd_..." **验证**: `process/thumbnail.png` 应该存在。 ## 步骤 1.2: 生成结构 1. **生成提示词**: bash node scripts/coderio-skill.mjs structure-prompt > scripts/structure-prompt.md 2. **AI 任务 (结构)**: - **附件**: `process/thumbnail.png` (强制) - **读取**: `scripts/structure-prompt.md` - **指令**: "根据提示词和附件缩略图生成组件结构 JSON。专注于视觉分组。**使用文本内容准确命名组件（例如 'SafeProducts'，而不是 'FAQ'）。**" - **保存**: 将 JSON 结果粘贴到 `scripts/structure-output.json`。 3. **处理结果**: bash node scripts/coderio-skill.mjs save-structure ## 步骤 1.3: 提取属性 (迭代) 1. **列出组件**: bash node scripts/coderio-skill.mjs list-components 2. **针对列表中的每个组件**: