总览

视频教程

快速使用

前置条件:

  • 下载Chrome 插件
  • 下载 IDE,推荐Comate,当然你也可以使用 VSCode、Trae、Cursor 等
  • MCP。可选,如果你使用 VSCode、Trae、Cursor 等则需要安装

开始生成

  1. 用浏览器打开你的 Figma 设计稿,选中你想要转代码的节点,点击浏览器插件右上角代码图标

    参考图

  2. 如果你尚未授权,则会跳转授权(Figma 官方提供)。若授权则会看到下面页面,从左到右分别是下载代码、预览代码、跳转 Comate。我们这里点击跳转 Comate。 参考图

  3. 跳转 Coamte 后会自动帮你生成 prompt,点击运行则可以生成代码 参考图

如果你使用的是非 Comate 的 IDE 则需要安装 MCP 辅助,你可以通过从浏览器插件中复制链接进行生成代码,参考:https://aicoding.juejin.cn/post/7507206037440856105 复制链接

工具

Chrome 插件

点击跳转下载

F2C 的 Chrome 插件能够在只读的情况下获取设计稿的信息,同时展示设计稿的代码、生成代码、压缩切图等能力。

MCP Sever

使用 F2C 根据 Figma 设计稿生成代码的模型上下文协议服务器。

AI 工具

可以是 Cursor、Trae、Comate 等 IDE,也可以是 Dify 等。