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

最近 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提示词，具体是哪个