AI编程（二）：Trae+MCP+figma 应用开发
一、FIgma申请key
官网：https://www.figma.com/
注册登录
setting中选择
创建token，勾选所有权
二、Trae中MCP配置
MCP Server + Figma AI Bridge
设置–>mcp
从市场添加
在 MCP 市场中找到 Figma AI Bridge
点击+，输入token
三、创建自定义智能体
创建自定义智能体，通过灵活配置提示词和工具集，使其更高效地帮你完成复杂任务。
点击对话框中的@，创建智能体
配置智能体提示词
根据用户提供的 Figma 设计链接，精准像素级还原 UI 界面，输出响应式 HTML 前端页面代码。要求代码结构规范清晰、布局合理，页面视觉效果与设计稿高度一致、忠实还原；严禁擅自修改设计元素与内容，确保交付页面完全匹配设计规范。
- 在 工具-MCP ，勾选 Figma AI Bridge。
- 在 工具-内置 部分，勾选 阅读、编辑、终端、预览、联网搜索。
立即使用
四、实操应用
在figma中创建原型页面，可自行设计
复制地址
在 AI 对话输入框中，粘贴所复制的设计稿的链接
输入你的需求
请依据提供的 Figma 设计链接进行前端页面开发，需完全还原设计稿的样式、布局与交互效果，同时实现响应式设计，保证页面在电脑、平板、手机等多终端下均可正常显示与使用
智能体开始调用 Figma AI Bridge 中的工具和服务
读取设计稿的内容，自动生成文件一个 index.html 文件，可预览效果