一、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 文件可预览效果