功能介绍

设计稿转代码功能可将 Figma 设计稿、截图等设计稿一键转换为可运行的前端代码。Comate 会自动分析设计稿结构、提取图片资源、生成对应的 代码文件，并在浏览器中实时预览效果。无需手动测量尺寸、取色或切图，大幅提升从设计到开发的效率。

操作步骤

示例一：Figma 设计稿转代码

1. 在 Comate AI IDE 输入框左侧点击 「+」 按钮，并在弹出的菜单中选择 Figma

2. 选中设计稿并点击发送到对话，输入框会自动@ 引用已发送的设计稿并填充 /figma2code 命令

3. 生成完成后，Comate 会自动在浏览器中预览效果

示例二：截图转代码 在对话框直接发送截图即可一键转换为可运行的前端代码。

F2C 配置

在发送设计稿前，您可以根据项目需求调整转换配置：

在 Figma 插件面板中点击 「设置」 图标，打开 F2C 配置面板。可以配置以下选项：

• 默认规则：选择代码生成规则（如 Default、React、Vue 等框架适配规则）

• 图片格式：选择导出图片的格式

  • PNG：适用于照片、复杂渐变等需要保留透明度的场景（默认）
  • SVG：适用于图标、Logo 等矢量图形，可无损缩放
  • JPG：适用于背景图等大尺寸图片，体积更小
• Design Token 支持：开启后，颜色、字体等样式将以 Design Token 形式生成
• Image2design 模式：开启后，针对图片类设计稿优化转换效果

设计稿检查

在发送前，可以先点击 「设计稿检查」 进行预检。

检查面板包含两个标签页：

• 检测：显示设计稿中可能影响代码生成质量的问题（如未命名图层、缺失字体等）。若显示 「暂无问题」，表示设计稿规范良好，可直接发送

• 切图：列出可被优化的切图资源，点击可查看导出路径和命名