CodeBuddy导入Figma设计稿的核心路径是“授权连接→选择文件→指定组件→生成代码”：需先生成含files:read权限的Figma个人访问令牌并粘贴至CodeBuddy设置；再通过“Add from Figma”选取目标文件及Frame/Component；确保图层名camelCase、启用Auto Layout（≤3层嵌套）、样式源自Figma Styles库；最后明确指令生成代码并校验预览效果。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
CodeBuddy 导入 Figma 设计稿的核心路径是“授权连接 → 选择文件 → 指定组件 → 生成代码”，整个过程不需要手动复制图层或导出图片，关键在于权限打通和结构识别。
一、提前准备Figma访问令牌
这是最常卡住的一步。必须在Figma官网生成个人访问令牌（Personal Access Token），不能用团队Token或OAuth临时链接。
- 登录 Figma 官网 → 点击右上角头像 → Account Settings
- 左侧菜单选 Personal Access Tokens → 点击 Create a new token
- 填写名称（如“codebuddy-dev”），勾选 files:read 权限 → 生成并复制该token
- 在 CodeBuddy 设置页（Settings → Integrations → Figma）中粘贴并保存
二、在CodeBuddy中选择设计稿
支持两种方式，推荐用“Add from Figma”按钮直接调起Figma界面选择，避免链接失效或权限错位。
- 打开 CodeBuddy IDE → 左侧边栏点击 Craft Agent → 选择 Select from Figma
- 会自动跳转至 Figma 登录页（若已登录则直连）→ 进入你的设计文件列表
- 找到目标文件 → 点击进入编辑态 → 在左侧图层面板中，单击选中需要转换的Frame或Component
- 点击右上角 Add to Conversation 按钮（不是“Share link”）→ 返回 CodeBuddy 即可见导入预览
三、确认图层结构与命名规范
导入成功不代表能精准生成代码。CodeBuddy 依赖图层语义，以下三项不满足会导致布局错乱或样式丢失：
-
图层名必须是 camelCase（如
headerNav、cardList），不能含空格、中文或下划线 - 所有容器需启用 Auto Layout，且嵌套层级≤3层（例如 Frame → Section → Button，再深就建议拆分）
- 颜色/文字样式必须来自 Figma 的 Styles 库，不能是直接填色或手动设字号
四、触发代码生成与校验
导入后不要急着点“Generate”，先检查右侧预览是否还原了核心结构（比如网格、间距、字体大小比例）。
- 在对话输入框中明确指令，例如：“生成 React 组件，使用 Tailwind CSS，适配移动端”
- 点击生成后，CodeBuddy 会输出完整文件（含 JSX + 内联 CSS 或独立 style.ts）
- 立即在内置 Preview 中查看渲染效果，重点核对：响应式断点、交互状态（hover/active）、图标是否转为 SVG
- 若发现按钮错位或文字截断，大概率是 Auto Layout 未启用或 padding/margin 值非 4px 整倍数
