从设计稿到前端代码，过去一直是开发者的痛点——切图、手动标注、人工还原，稍有不慎就会出现“像素级偏差”。而 CodeBuddy 采用了不同方案：它并非依赖截图识别这种“猜测”方式，而是通过协议级对接直接读取 Figma 原始设计数据，再由 AI 模型进行语义理解与工程化输出。这样一来，视觉结构、样式属性、交互意图都能精准映射为可直接运行的前端代码。具体怎么操作？根据你的使用场景，以下三条主流路径可供选择。
通过 Figma MCP 插件直连（推荐用于团队协作与高保真还原需求）
这是最稳定、还原度最高且支持实时同步的方式。它基于 Figma 官方 API 和 CodeBuddy 的 Model Context Protocol（MCP）生态。操作步骤并不复杂：
- 首先在 Figma 账号设置中生成一个 Personal Access Token（路径：Settings → Security → New token）
- 接着打开 CodeBuddy IDE 或 VS Code 插件，在 MCP 市场搜索并安装 “Framelink Figma MCP Server”——该插件在响应式布局处理及设计系统识别方面表现更佳，比同类工具更可靠
- 将 Token 粘贴至插件配置页保存，测试连接成功后，即可看到团队中所有可访问的 Figma 文件
- 在 Figma 中选中目标画板或组件，右键 → “Send to CodeBuddy”，或在 CodeBuddy 侧边栏点击 Figma 图标，手动粘贴文件链接完成导入
- 随后选择技术栈（例如 React + TypeScript + Tailwind CSS）、组件粒度（页面级 / 模块级 / 原子级），并确认设计系统映射——比如自动匹配 TDesign 的 Button 组件
- 最后点击“Generate Code”，输出一个完整文件包，包含 JSX、CSS 类名、响应式断点，甚至基础交互逻辑（如 hover 状态）都已生成完毕
通过分享链接导入（适用于临时协作或无法配置 Token 的场景）
如果你的团队不方便配置 API 密钥，或者只是外包评审、客户确认、快速验证原型，那么使用分享链接导入就足够了。需要注意的是：该方式获取的是只读快照，设计变更后不会自动同步。操作步骤同样简洁：
- 在 Figma 中打开文件，点击右上角 Share → 开启 Public link，权限设为 “View only”
- 复制链接，确认 URL 中包含有效的 file ID（例如
figma.com/file/abc123） - 在 CodeBuddy 主界面点击 “Design → Import from Figma”，粘贴链接
- 系统将调用 Figma REST API 获取精简图层树，自动过滤隐藏图层和标注图层，然后构建 DOM 映射关系
- 选择输出框架（React/Vue/Taro/小程序）和样式方案（Tailwind/Ant Design Token/CSS-in-JS），一键生成代码
通过 Craft 智能体驱动（适用于只有需求描述、没有设计稿的情况）
如果连设计稿都没有，只有产品文档或一句话需求，也无需担心。Craft 智能体可以自主完成 UI 规划、草图生成、代码合成全流程。举个例子：
- 在 CodeBuddy 命令面板输入
/craft new app启动智能体 - 输入自然语言需求，例如：“开发一个带搜索、筛选、收藏功能的图书管理后台，支持深色模式”
- Craft 会返回界面草图与模块拆解，你可以对任意页面使用“编辑提示”进行微调，比如“将筛选栏固定在顶部”
- 确认后选择导出格式——React 组件 + Zustand 状态管理骨架 / Vue3 + Pinia / 小程序 WXML 均可
- 生成结果包含路由、图标资源、基础状态逻辑，甚至附带注释说明设计决策依据
关键前置准备（90% 的问题出在这里）
无论你选择哪条路径，Figma 文件的质量直接决定最终生成效果。根据大量实践经验，问题大多源于文件规范。因此，在动手生成代码之前，务必花时间校准以下几点：
- 图层命名使用 camelCase（例如
userA vatar），避免使用空格和中文 - 所有容器必须启用 Auto Layout，嵌套层级 ≤3 层，避免绝对定位干扰布局解析
- 颜色、文字、效果全部使用 Figma Styles（Color Styles / Text Styles / Effect Styles）
- 字体尺寸采用 4px 倍数（12/16/20/24px），便于 Tailwind 的 spacing scale 映射
- 可使用 “Go to Missing Styles” 插件扫描，一次性修复未规范化的样式引用