作者：小林梦呓
一、MCP 的意义
我再说下 MCP 到底是个，你可以把它想象成 AI 和手机 App 之间的万能充电器。
以前 AI 要连接不同软件，就像以前每次换手机都要买新充电头一样麻烦。
比如要连美团外卖得写一套代码去承接 API，连滴滴打车又要重写另一套代码承接滴滴的 API。
要是换个 AI 模型，这些代码全都得重来一遍，程序员头发都要掉光了。
这时候有个叫 Anthropic 的公司出了个妙招：他们发明了一个标准插座，叫 MCP 协议。
现在所有软件只要装个转换头，AI 就能用同一个插头连所有软件。就像你买了个万能充电器，甭管是华为手机还是苹果耳机，插上就能用。
比如你家有小米空调、华为音箱、海信电视，每个都要装不同 APP 控制。
所有电器都装智能插座（MCP Servers）你直接对 AI 说我要看电影 ，AI 自动关窗帘+开投影仪+调低空调温度。
回家路上说准备回家： 扫地机器人开始打扫、电饭煲自动煮饭、热水器提前烧水。
全靠 MCP 让不同品牌的设备听懂同一套指令。
这波 MCP 出来后，肉眼可见的字节在加大对 Trae 的投入，实际上不仅仅是国内，国外也一样，
因为有了 MCP 以后，开发工具可以直接扩展外部链接能力，从而无所不能。
支付宝已经开始构建 MCP，如果支付生态跑通，一个完整的商业周期就可以闭环了。
这玩意很有可能建立新的秩序，所以国内外很多巨头都在重金研发开发工具。
二、Trae 接入设计 MCP 全流程实操
实现的场景是，在某个设计平台设计好 UI 图，利用 MCP，直接让 Trae 调用 UI 图的分享链接生成网页。
分为两部分，一是内置智能体，二是自定义智能体，二是在一的基础上包了一层，效果一样的。
一）官方内置智能体
需要上网条件+Node.js 环境，Node.js 不懂可以去文末领取教程。
1、进入 Figma 设计平台官方
2、点击左上角的账户
3、点击 Settings 设置
4、同意权限
5、点击 Security 创建 token
6、输入你自己起的 token 名称
注意：底部的读写权限全部打开。
7、创建成功，这里的 token 要保存好
8、打开 Trae 添加 Figma MCP
9、将上面生成的 token 输入到这个位置
注意，这里我用的是 Github 举例，因为我已经添加完 Figma 的了。
10、点击确认即可生成
11、打开 figma 设计一个网页
这里为方便演示，我直接用的是 figma 提供的模板。
12、生成后点击右上角的 share 复制链接
阅读权限 can view 记得打开，设置为 Anyone 所有人可阅读。
13、打开 Trae 对话框，让 Trae 按照设计好的原型图生成网页
14、Trae 开始生成代码
15、效果演示
国内版的 Trae 模型能力有限，只有 Deepseek 和豆包，所以效果差，但是流程已经通了，等模型能力跃迁，这些都不是问题。
需要源码的文末获取~
二）自定义智能体
这部分的意思是把上述的 MCP 包成一个智能体，其他没有什么区别。
1、进入 Trae 的聊天对话，创建智能体
2、工具引用刚刚创建好的 MCP 服务
3、点击创建即可生成
其他路径和内置智能体一样，不再重述。
这次体验下来，Trae 结合 MCP 的功能确实让人眼前一亮，目前模型能力还有限，但已经能看到 AI 编程走入真实场景的雏形。
如果你也对 AI 驱动的自动化感兴趣，不妨亲自试试 Trae 的新功能~