大家好，我是瑶琴呀。
我正在参加Trae「超级体验官」创意实践征文，本文所使用的 Trae 免费下载链接：www.trae.com.cn/ide/downloa…
之前在使用 cursor 和 DS 让 AI 绘制页面时，只能上传图片给它，但效果都很差强人意，即使你再三强调网页布局和样式要跟图片一致。
因为之前 AI 无法读取到其他外部数据，像网页设计这种数据形式，只能通过图片喂给它。
但这次 Trae 的更新带来了很大的惊喜，真正实现了 UI 到网页的自动化，这篇文章会介绍使用 Trae + figma MCP ，实现 UI 到网页自动化的全流程。
开始之前，我们先来看看 4月21日 trae更新了哪些内容：
1.合并了 Chat 和 Builder 面板。在一个地方就能和 A1聊所有事。
2.创建智能体
3.接入了MCP
3.使用#web进行实时连网搜索
4.可配置项目 Rules.md
一、MCP 是什么？
它是一种模型的上下文协议，为 AI 模型与外部数据、工具建立标准化链接，你可以理解为“AI领域的USB接口”。
就像一根 typeC 数据线可以连接华为、小米、苹果等手机。
通过它可以让 AI 模型链接各种你想要给 AI 的数据或工具，让它更好的为你工作。
写到这里，不由感叹一句：开发出 MCP 协议的人真牛逼！
二、Trae + figma MCP自动化生成网页的实操部分
1.下载打开 Trae 编辑器，下载地址：www.trae.com.cn/ide/downloa…
这次更新最重要的亮点：一是可以添加自定义智能体，二是接入了 MCP。在右上角的 setting 图标，会发现多了这两个选项。
2.使用 figma 生成设计稿，拿到 figma的 token 和设计稿链接，figma 登录需要 google 邮箱登录。
1）拿到token，左上角头像点开 setting，token 是我们在 Trae 里面连接 figma的凭证。
2）Security里面填写一个命名，会帮你生成token
3）手动设计稿并复制链接，我这里设计稿弄得比较简单，仅作示例。
点击设计稿界面右上角的Share按钮，点击 Copy link
3、Trae 连接 figma，生成最终的网页
先添加 MCP Server，我们能不能读取 figma 的内容全靠它，点击 MCP，可以看到市场里准备好了很多可连接的 MCP Server，找到 figma，输入刚刚复制的token 即可。
接下来，只需要调用 figma的 MCP，输入指令，给出 figma 的设计稿地址，它就可以根据设计稿生成网页。
记得一定要引用我们刚加入的figma MCP，点击智能体就可以看到刚刚加入的智能体。
输入指令，复制粘贴上第 2 步拿到的设计稿链接。
接下来他会帮你分析设计稿，创建网页文件和生成设计稿，因为 Trae这次将 Chat 和Builder 合并了，创建文件、写代码直接一气呵成。
最终生成的项目目录和预览效果如下：
三、创建智能体
1.点击右上角的 setting，点击“智能体”选项
** 2.点击创建智能体**
3.输入智能体名称和提示词，点击创建，就可以在聊天框中看到我们自定义的智能体了
这次体验下来，最大的感受就是：AI 工具的迭代真的快，这才没多久，Trae已经做了这么多的改变。
感兴趣的小伙伴快去尝试吧！
我认为程序员对于 AI 的变化最好的办法是及时关注行业内变化，有什么新的东西出来，自己动手实践下，看哪些真的能帮自己提高生产力，而不是一味焦虑或者冷处理。
在 AI 时代，至少先保持自己的一个节奏，最好的办法就是自己多动手多实践，这样心里才会有 AI 变化带来的实感，而不是陷在庞大信息带来的飘渺的焦虑里。
