Trae CN + Figma MCP 从 UI 设计到微信小程序代码生成保姆级教程

最近 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图标（