将 Figma 设计稿一键转换为前端代码

开始前，请先安装 Figma 桌面客户端和 Trae IDE。

1. 开启 Figma Dev Mode

  1. 打开 Figma 桌面客户端
  2. 在右侧切换至 Dev Mode
    • 状态栏显示「Enabled」即表示已启用
步骤 截图
① 启动 Dev Mode 图片
② 确认模式已激活 图片

2. 配置 Trae IDE

2.1 添加 Figma MCP 服务

  1. 打开 Trae IDE → 设置 → MCP → 手动添加
    图片

  1. 填写服务信息 
    1
    2
    3
    4
    5
    6
    7
    {
      "mcpServers": {
        "figma-desktop": {
          "url": "http://127.0.0.1:3845/mcp"
        }
      }
    }
    图片

  1. 验证连接成功
    图片

2.2 创建 Figma 智能体

  1. 进入「智能生成」→ 新建智能体
  2. 提示语模板（可直接复制） 
    1
    基于 Figma 设计稿实现完整页面开发，保持像素级还原，根据项目技术栈输出代码。
    图片

  1. 勾选已添加的 figma-desktop MCP
    图片

  1. 保存后，在智能体列表切换至刚创建的「Figma 智能体」
    图片

3. 生成前端代码

  1. 在 Figma 中复制目标画板链接
    图片

  1. 回到 Trae，将链接粘贴至对话框，点击 优化输入内容
    图片
    图片

3. 等待片刻，即可拿到完整、可运行的前端代码