Trae + Figma MCP UI设计稿变代码

180 阅读1分钟

官网地址: Trae 国内版本

一、Figma准备设计稿

www.figma.com/

1. 生成Token

点击左上角的用户名—>Settings

image.png

点击Security创建token image.png

输入token名称,点击右下角按钮生成token

注意所有项的读写权限都打开 image.png

2. Trae添加Figma MCP

将生成的token填写到这个位置

image.png

image.png

image.png

  1. Figma画图

Figma有人工画图和AI画图:

image.png

我使用的是AI画图:

image.png

输入提示词就会得到UI设计图。

点击右上角的share复制链接

image.png

image.png

二、利用Trae进行开发

在Trae对话框中输入提示词

让Trae按照设计好的原型图生成页面

请按照我提供的Figma链接内容生成单个静态前端页面,UI要严格还原设计稿,不要有自己的想法在里面
Figma链接:这里贴你自己的链接

在 Trae 的 Chat 界面,通过 @ 选择 Builder with MCP。 image.png

输入提示词,并把从figma复制的link填入提示词中

image.png