Trae 配置 Figma MCP

一、MCP是做什么用的在 Trae 里的MCP全称是Model Context Protocol模型上下文协议你可以把它理解成AI 智能体的「通用外接接口」让 Trae 里的 Builder 等智能体能直接连接和调用外部工具 / 服务。一、它到底是做什么的简单说MCP 就是给 AI 开了 “外接权限”不用手动复制粘贴、切换软件AI 就能直接帮你读 / 写外部数据库调用 Figma、GitHub、API 等第三方服务操作本地文件、运行命令它是一个标准化协议不同工具只要按 MCP 标准对接Trae 就能一键接入不用单独写复杂集成。在你截图里的Builder with MCP就是开启了这个外接能力的智能体模式它比普通 Builder 多了 “调用外部工具干活” 的权限。二、在 Trae 里MCP 能解决什么问题举几个你能直接用的场景连接 Figma直接从设计稿生成代码配置好 Figma 的 MCP 服务后Trae 能直接读取 Figma 文件的设计信息自动生成对应的前端代码不用你手动抄样式。直接操作数据库边写代码边查数据连接 MySQL/PostgreSQL 后AI 能帮你写 SQL、查数据、优化查询语句不用你自己去数据库客户端操作。对接 GitHub直接创建 / 修改仓库文件配置好 GitHub 的 MCP 服务AI 可以直接帮你提交代码、创建分支、查看 PR不用你手动切换浏览器。调用本地工具比如计算器、命令行、文件管理器让 AI 帮你批量处理文件、执行脚本你只需要说指令它就能通过 MCP 调用对应的工具完成。三、和普通 Builder 有什么区别表格模式能力边界适用场景普通 Builder只能在 Trae 内部的项目文件里工作无法直接访问外部服务纯本地代码开发、无外部依赖的项目Builder with MCP能通过 MCP 协议连接并调用外部工具 / 服务打通设计、数据、代码设计稿转代码、数据库开发、API 调试、跨平台协作四、新手怎么用先选Builder with MCP这个智能体在 Trae 的设置里添加你要连接的外部工具比如 Figma、数据库的 MCP 服务配置直接给 AI 发指令比如 “根据我 Figma 里的登录页设计稿生成对应的 React 组件代码”AI 会自动通过 MCP 连接 Figma读取设计信息并生成代码二、Trae 配置 Figma MCP关键步骤一、前置准备获取 Figma 访问令牌Token登录你的 Figma 账号进入 个人设置页面找到Personal access tokens个人访问令牌点击Generate new token填写令牌名称比如Trae-MCP权限默认选read files只读文件即可点击生成复制好令牌只显示一次后面要用二、Trae 配置 Figma MCP关键步骤打开 Trae IDE点击右上角的「设置」图标齿轮选择MCP在 MCP 面板里点击 添加 MCP Servers进入市场列表找到Figma AI Bridge点击右侧的号在弹出的配置框里把刚才复制的Figma Personal Access Token粘贴进去点击「确认」配置就自动完成了会自动关联到Builder with MCP智能体三、如何使用直接生成代码在 Trae 里智能体选择Builder with MCP输入你的指令比如plaintext帮我根据这个 Figma 链接生成 React 组件代码https://www.figma.com/file/xxxx/Login-PageAI 会通过 MCP 直接读取 Figma 文件的设计信息自动生成对应的前端代码不用你手动复制样式。