告别手动拆解设计稿的繁琐流程，TRAE IDE 的 Figma AI Bridge 正在重新定义产品经理的原型制作方式。无需代码基础，通过智能体交互即可将 Figma 设计稿一键转化为高保真可交互原型，完整支持响应式适配与细节优化。本文含独家操作指南，手把手教你配置专属原型助手，实现设计到原型的无缝衔接。
作为产品经理，是否还在为将 Figma 设计稿落地成可预览的高保真原型耗费大量时间？借助 TRAE IDE 的 Figma AI Bridge，无需编写代码，就能快速把 Figma 设计稿转化为可交互、高还原的高保真原型。以下是全程实操步骤，跟着做就能完成！
Figma AI Bridge能帮产品经理跳过「手动拆解设计稿、导出素材、协调研发还原」的环节，直接生成可预览的高保真原型，核心能力如下：
要让工具能读取你的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）：
6.点击「Generate token（生成令牌）」，复制并保存令牌（仅显示一次，丢失需重新生成）。
Figma Personal Access Token 已生成，你会在后续配置 MCP Server – Figma AI Bridge 时用到它。
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。
自定义智能体，让工具更贴合产品经理做原型的核心诉求：
1.在TRAE IDE的AI对话输入框输入「@」，点击浮起面板底部的「创建智能体」；
2.配置智能体（按以下模板填，无需修改）：
头像（可选）：上传Figma/原型相关图标，便于识别；
名称：输入如「Figma原型助手」；
提示词（核心，直接复制，也可以自己编写或者智能生成）：
作为产品经理的原型助手，根据我提供的Figma设计稿链接，1:1还原设计稿样式生成高保真HTML原型页面。要求：
1. 严格还原UI视觉细节，不擅自修改设计内容；
2. 原型支持响应式（适配电脑/手机端）；
3. 文件结构清晰，可直接预览，无需额外调整。
工具配置：
点击「创建」，专属原型助手配置完成。
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」），工具会自动更新文件。持续与智能体对话，优化前端页面，直至达到让你满意的效果。
本文由 @噜噜猫 原创发布于人人都是产品经理。未经作者许可，禁止转载
题图来自Unsplash，基于CC0协议
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。