CodeBuddy 通过协议级对接 Figma 原始数据，结合 AI 语义理解生成可运行前端代码，支持三类路径：①Figma MCP 插件直连（高还原、实时同步）；②分享链接导入（快速验证、只读快照）；③Craft 智能体驱动（需求描述自动生成 UI 与代码），需提前规范 Figma 文件质量。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
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（如 userAvatar），禁用空格和中文
- 所有容器必须启用 Auto Layout，嵌套层级 ≤3 层，避免绝对定位干扰布局解析
- 颜色、文字、效果全部使用 Figma Styles（Color Styles / Text Styles / Effect Styles）
- 字体尺寸用 4px 倍数（12/16/20/24px），方便 Tailwind 的 spacing scale 映射
- 用 “Go to Missing Styles” 插件扫描，一次性修复未规范化的样式引用
