最近 AI Coding IDE 工具 #Trae 进行了一系列大更新，其中比较重要的是支持 #MCP。
我之前曾经在 Trae 国内版中使用 chat 模式用 DeepSeek-V3 2024-03-24 生成过一个音乐播放小程序的 HTML UI 设计。但是一直还没有找到从 UI 设计到代码生成的好路径，特别是免费的方法（穷嘛），就暂时搁置到一边了。现在看到 Trae 支持 MCP ，就赶紧验证一下是否好用。
什么是MCP？
MCP 是 AI 模型 Claude 所属的研发公司 Anthropic 在2024年提出的一项开源协议，全名为 Model Context Protocol。它允许大语言模型（LLMs）访问自定义的工具和服务。根据 Trae 官方文档所说，Trae 中的智能体作为 MCP 客户端可以选择向 MCP Server 发起请求，使用它们提供的工具。而且可以自行添加 MCP Server，并添加到自定义的智能体中来使用。
而 Figma UI 设计工具提供了 #Figma MCP，也就是说我们可以让 Trae 利用设计好的 Fiagma UI 数据直接生成 UI 界面代码。
DeepSeek 生成UI
首先说一下 UI 生成，音乐播放器的提示词我参考了一个博主的旅游APP提示词，具体是哪个博主不记得了：
#角色
你是一位资深设计资深前端开发工程师
#设计风格
优雅的极简主义美学与功能的完美平衡；
清新柔和的渐变配色与品牌色系浑然一体；
恰到好处的留白设计；
轻盈通透的沉浸式体验；
信息层级通过微妙的阴影过渡与模块化卡片布局清晰呈现；
用户视线能自然聚焦核心功能；
精心打磨的圆角；
细腻的微交互；
舒适的视觉比例；
强调色：按APP类型选择
#技术规格
1、单个页面尺寸为 375x812PX，带有描边，模拟手机边框
2、图标：引用 mui、antd 或 favicon矢量图标库内的svg图标（任何图标都不要带有背景色块、底
板、外框）
3、图片：使用开源图片网站链接的形式引入
4、样式必须引入 mui 、antd 或 favicon 来完成
5、不要显示状态栏以及时间、信号等信息
6、不要显示非移动端元素，如滚动条
7、所有文字只可以使用黑色或白色
8、控件位置符合移动端设计
#任务
这是一个心灵音乐疗愈微信小程序，有播放列表页和播放页。播放列表页上部显示列表名称和说明，下面有两个分类的Tab页，点击不同的Tab标题可切换不同播放列表，放列表显示Poster名称、分类和时间等信息，选择后进入播放页。播放页可播放音乐，音乐背景图全屏，页面上部是标题，中部是一个定时按钮，下部是是播放进度条和播放控制（上一首，下一首，播放暂时），进度条和播放控制在页面底部。定时按钮点击出现底部弹窗显示定时关闭时间，5分钟，15分钟，30分钟等。
模拟产品经理输出详细功能设计、信息架构设计，结合｛设计风格｝和｛技术规格｝输出一套UI设计方案生成一个.html文件，放入播放列表和播放页，横向排列。
最终结果会输出一套UI设计方案并生成一个 Html单文件，然后附上设计说明：
将生成的 Html 复制出来保存成文件，然后用浏览器打开可以看到如下图的样子：
总体还可以，生成的效果还算清新简约，有一定的设计感。
导入 Html 到 Figma
下一步，需要将 Html 导入到 Figma 中。这里需要用到 html.to.design 插件：
找到 Figma 的 Plugins (插件)菜单，截图中可以看到我的已经添加过 html.to.design
点击 Manage plugins（管理插件）菜单项，然后在搜索框输入 html.to.design
选择打开插件后如下图所示，可以选择从 Web URL 或 File (文件)等方式导入 Html
因为之前已经将 Html 导出到文件中，这里直接选择文件上传即可
导入完成后，插件将 Html 转换成了 Figma 文件：
从上图可以看到，插件可以说是完全复刻了 Html 的 UI 设计。不过细心的你一定发现，之前的 Html 音乐列表第二个图是缺失的，但在导入 Figma 后却补上了。这不是什么神秘力量，而是我导入之后编辑了一下 Figma 数据，用一个重复的图片给补上了。也就是说，可以用 AI 快速生成 Html 原型并确认需求之后，由专业的设计师将 Html 导入 Figma 中，进一步丰富和美化。这应该更符合实际产品的生产流程。在这里我就暂时冒充一下设计师这个角色。
生成 Personal Access Token
接下来就要用 Trae 连接 Figma MCP 进行代码开发了。要想在 Trae 中使用 Figma MCP，需要先在 Figma 中 生成 Personal Access Token。
打开 Figma，在文件浏览器中 ，单击左上角的Account 账户菜单，然后选择 Settings（设置 ）。
然后选择 Security （安全） 选项卡。
滚动到 Personal access tokens 部分，然后单击 Generate new token （生成新令牌 ）。
输入新令牌的名称，然后按 Return / Enter 。
复制生成的令牌，此时一定要及时保存，因为这个页面关闭后就看不到 Token 了，只能重新生成。
在 Trae 中添加 Figma MCP
打开 Trae，可以看到新的 AI 窗口已经不再单独列出 chat 模式。在 AI 窗口中输入@， 然后在弹窗中选择 Build with MCP：
接着点击右边小锤子设置按钮，选择Add More Tools（添加更多的工具)，
然后点击加号，在搜索框中输入 Figma，并选中 Figma AI Bridge
之后在弹出的 MCP 配置页面填上之前生成的 Figma Personal Access Token。
接下来返回 Figma，选中列表页，单击右键，选择 Copy/Paste as（复制粘贴为），然后选择Copy link to selection（复制所选内容的链接）。
然后在 Trae AI 中输入如下提示词并带上 Figma 链接：
Trae 就会根据 Figma 设计进行开发。下面是我的最终生成结果。
在 Trae 生成代码的过程中，得到的页面有些细节会跟设计不一样，这点 Trae 或者说大模型还需要改进哈。但是整体的 UI架构和配色是对的，而且还会从 Figma 下载需要的资源文件，节省了很多体力活。在实操过程中可以多次生成，得到最接近的一版后，提示 Trae 进一步微调得到最终结果。
以上就是 Trae CN + Figma MCP 从 UI 设计到微信小程序代码生成的全过程。希望可以帮到你！
如果有买 Cursor 或者使用 Trae 国际版的同学，可以用 Cursor + Figma MCP 试验一下。
也麻烦在评论区告诉我一下：
是不是 Cursor claude-3-7-sonnet + Figma MCP 更聪明，从 Figma 生成代码更精准呢？
如果真是那样，就可以少进行很多微调，节约不少时间!
关注微信公众号 【智践行】
发送 【提示词】 获得Google提示词工程白皮书
发送 【清北】 获得DeepSeek北大清华资料大全
暂无评论内容