告别手动拆解设计稿的繁琐流程，TRAE IDE 的 Figma AI Bridge 正在重新定义产品经理的原型制作方式。无需代码基础，通过智能体交互即可将 Figma 设计稿一键转化为高保真可交互原型，完整支持响应式适配与细节优化。本文含独家操作指南，手把手教你配置专属原型助手，实现设计到原型的无缝衔接。

作为产品经理，是否还在为将 Figma 设计稿落地成可预览的高保真原型耗费大量时间？借助 TRAE IDE 的 Figma AI Bridge，无需编写代码，就能快速把 Figma 设计稿转化为可交互、高还原的高保真原型。以下是全程实操步骤，跟着做就能完成！

核心能力说明

Figma AI Bridge能帮产品经理跳过「手动拆解设计稿、导出素材、协调研发还原」的环节，直接生成可预览的高保真原型，核心能力如下：

操作步骤

第一步：安装TRAE IDE

1. 访问TRAE官网，下载对应系统（Windows/Mac）的安装包；
2. 双击安装包，按引导完成安装（全程点击「下一步」即可，无需额外技术配置）。

第二步：获取Figma个人访问令牌（授权读取设计稿）

要让工具能读取你的Figma设计稿，需先生成授权令牌：

1.登录Figma官网（https://www.figma.com/），点击左上角个人头像，选择「Settings（设置）」；

2.在设置窗口顶部选择「Security（安全）」；

进入设置面板

3.找到「Personal access tokens（个人访问令牌）」板块，点击「Generate new token（生成新令牌）」；

界面上显示Generate new token 的弹窗

5.配置令牌（Figma Personal Access Token）：

• 输入token名称（如「产品原型专用」）；
• 设置token有效期（建议选最长，避免频繁重新生成）；
• 勾选所有权限（确保能读取设计稿和素材）；

6.点击「Generate token（生成令牌）」，复制并保存令牌（仅显示一次，丢失需重新生成）。

Figma Personal Access Token 已生成，你会在后续配置 MCP Server – Figma AI Bridge 时用到它。

第三步：添加Figma AI Bridge（连接Figma和TRAE IDE）

1.打开TRAE IDE，找到「设置」图标（IDE模式在右上角，SOLO模式在对话面板右上角），进入设置中心；

2.在左侧导航栏选「MCP」，打开MCP配置窗口；

3.点击「添加」>「从市场添加」（首次使用可直接点窗口中间的「从市场添加」按钮）；

4.在MCP市场找到「Figma AI Bridge」，点击右侧「+」按钮；

5.在弹窗中粘贴第二步生成的Figma令牌，点击「确认」，完成工具连接。

6.点击 确认 按钮。

MCP Server – Fimga AI Bridge 配置完成，并已自动添加至内置智能体 – Builder with MCP。

第四步：创建专属「Figma原型助手」智能体

自定义智能体，让工具更贴合产品经理做原型的核心诉求：

1.在TRAE IDE的AI对话输入框输入「@」，点击浮起面板底部的「创建智能体」；

2.配置智能体（按以下模板填，无需修改）：

头像（可选）：上传Figma/原型相关图标，便于识别；

名称：输入如「Figma原型助手」；

提示词（核心，直接复制，也可以自己编写或者智能生成）：

作为产品经理的原型助手，根据我提供的Figma设计稿链接，1:1还原设计稿样式生成高保真HTML原型页面。要求：

1. 严格还原UI视觉细节，不擅自修改设计内容；

2. 原型支持响应式（适配电脑/手机端）；

3. 文件结构清晰，可直接预览，无需额外调整。

工具配置：

• 「工具-MCP」：仅勾选「Figma AI Bridge」；
• 「工具-内置」：勾选「阅读」「编辑」「预览」（满足原型预览需求即可）；

点击「创建」，专属原型助手配置完成。

第五步：实操生成高保真原型（核心环节）

1.本地新建文件夹（如「XX项目-产品原型」），在TRAE IDE中打开该文件夹（用于存放原型文件）；

2.打开Figma，找到目标设计稿，右键选择「Copy/Paste as」>「Copy link to selection」（复制设计稿链接）；

3.在TRAE IDE对话框中，选择「Figma原型助手」智能体，粘贴Figma链接+输入需求（示例：「请根据这个链接生成高保真原型，适配移动端和PC端」），发送指令；

智能体开始调用 Figma AI Bridge 中的工具和服务，读取设计稿的内容，自动生成文件，填入前端代码，并生成一个 index.html 文件供你预览效果。等待工具处理：自动读取设计稿、下载素材、生成HTML原型文件（过程有进度提示）；

4.预览原型：双击文件夹中的「html」，在浏览器中查看高保真效果；

优化调整：若原型细节需修改，直接在对话框告知（如「按钮颜色调整为#165DFF」），工具会自动更新文件。持续与智能体对话，优化前端页面，直至达到让你满意的效果。

实操小贴士

1. 确保Figma账号有设计稿的访问权限，否则工具无法读取；
2. 生成的HTML原型可直接分享给研发/设计同事，同步视觉和交互预期；
3. 复用智能体：后续生成其他设计稿的原型，只需更换Figma链接即可，无需重复配置。