一、FIgma申请key

官网：https://www.figma.com/
注册登录

setting中选择

创建token，勾选所有权

二、Trae中MCP配置

MCP Server + Figma AI Bridge
设置–>mcp

从市场添加

在 MCP 市场中找到 Figma AI Bridge
点击+，输入token

三、创建自定义智能体

创建自定义智能体，通过灵活配置提示词和工具集，使其更高效地帮你完成复杂任务。

点击对话框中的@，创建智能体

配置智能体提示词

根据用户提供的 Figma 设计链接，精准像素级还原 UI 界面，输出响应式 HTML 前端页面代码。要求代码结构规范清晰、布局合理，页面视觉效果与设计稿高度一致、忠实还原；严禁擅自修改设计元素与内容，确保交付页面完全匹配设计规范。

1. 在 工具-MCP ，勾选 Figma AI Bridge。
2. 在 工具-内置 部分，勾选 阅读、编辑、终端、预览、联网搜索。

立即使用

四、实操应用

在figma中创建原型页面，可自行设计

复制地址

在 AI 对话输入框中，粘贴所复制的设计稿的链接

输入你的需求

请依据提供的 Figma 设计链接进行前端页面开发，需完全还原设计稿的样式、布局与交互效果，同时实现响应式设计，保证页面在电脑、平板、手机等多终端下均可正常显示与使用

智能体开始调用 Figma AI Bridge 中的工具和服务
读取设计稿的内容，自动生成文件一个 index.html 文件，可预览效果