在实际使用 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”按钮——它能在 CodeBuddy 界面直接调起 Figma 选择面板，避免手动粘贴链接可能导致的权限错位或链接失效。

• 打开 CodeBuddy IDE → 左侧栏点击 Craft Agent → 选择 Select from Figma
• 系统自动跳转到 Figma 登录页（已登录则直接连接）→ 进入你的设计文件列表
• 找到目标文件 → 点击进入编辑态 → 在左侧图层面板中，单击选中要转换的 Frame 或 Component
• 点击右上角的 Add to Conversation（不要点“Share link”）→ 返回 CodeBuddy，预览即出现

三、确认图层结构，命名必须规范

导入成功并不代表代码可以直接使用。CodeBuddy 依赖图层语义理解设计，以下三个条件缺一不可，否则会出现布局错乱、样式丢失等问题：

• 图层名必须使用 camelCase，例如 headerNa v、cardList，严禁含有空格、中文或下划线
• 所有容器必须启用 Auto Layout，且嵌套层级不宜超过 3 层（例如 Frame → Section → Button 即可，更深则建议拆解处理）
• 颜色、文字样式必须来源于 Figma 的 Styles 库，手动填充的颜色或单独设置的字号，CodeBuddy 无法识别

四、触发生成并做一轮完整的校验

导入后不要急于点击生成，先查看右侧预览区域，确认关键结构无误——例如网格对齐、间距合理、字体大小比例适当。花费 30 秒确认以下事项：

• 在对话输入框中给出明确指令，例如：“生成 React 组件，使用 Tailwind CSS，适配移动端”
• 点击生成后，CodeBuddy 会输出完整文件（JSX + 内联 CSS 或独立 style.ts）
• 立即使用内置 Preview 查看渲染效果，仔细核对：响应式断点、交互状态（hover/active）、图标是否已转为 SVG
• 若发现按钮错位或文字截断，通常是 Auto Layout 未开启，或 padding/margin 值不是 4px 的整数倍——这两点是常见的翻车点