TRAE编辑器+Figma MCP实战教程：设计稿一键转网页代码

前言

字节跳动推出的代码编辑器 TRAE（官网 trae.cn）正在成为 AI 编程领域的新选择。TRAE 基于 VS Code 内核开发，属于「AI 原生 IDE」赛道——与 GitHub Copilot、Cursor 等产品类似，其核心理念是将大语言模型深度集成到编码工作流中，而非仅作为插件附加。字节跳动推出国内版 TRAE，主要是为了解决国内开发者访问海外 AI 服务不稳定的痛点，同时内置了对 DeepSeek、Kimi 等国产大模型的原生支持。本文将手把手带你完成从安装配置到使用 Figma MCP 生成网页代码的全流程，即使你是零基础也能跟着操作。

TRAE编辑器安装与基础配置

下载安装 TRAE

直接访问 trae.cn 下载即可，注意不要下载到国际版。安装过程中如果弹出授权权限请求，无论是 Windows 还是 Mac，都要全部授予权限。这些权限是后续 AI 功能正常运行的基础——比如让 AI 帮你安装开发环境等操作都依赖这些权限。

安装完成后，右侧聊天面板内置了几个国内大模型。如果需要使用国外模型，则必须添加自定义 API。

配置 OpenRouter API

OpenRouter 是一个 AI 模型聚合路由平台，类似于「AI 界的 AWS Marketplace」。它统一了数十家 AI 提供商（OpenAI、Anthropic、Google、Meta 等）的 API 接口，开发者只需一个 API Key 即可调用所有模型，并按实际 Token 用量付费。推荐使用 OpenRouter 作为 API 提供商，原因很简单：它是国外平台且规模较大，国内外的 AI 工具对它的支持都比较好；同时单一账单管理方便，模型间横向对比也更容易。配置步骤如下：

在 OpenRouter 官网获取 API 密钥
在 TRAE 设置中填入密钥（链接已预设好，只需填密钥）
如需添加预设之外的模型，去 OpenRouter 官网复制对应的 Model ID

OpenRouter模型ID复制示意

特别注意：OpenRouter 的 Model ID 格式通常为「提供商/模型名」，例如 anthropic/claude-3.5-sonnet。复制时一定要点进模型详情页复制完整的 ID，不要只复制模型名称。添加完成后，记得在聊天面板中切换到新添加的模型（确认出现对勾标记）。

关于模型选择的建议：贵的模型效果当然更好，但如果是学习和测试阶段，可以选择中等价位的模型。国内模型中，DeepSeek 和 Kimi 的表现相对不错。

配置 Figma MCP 连接TRAE

理解 MCP 协议

MCP（Model Context Protocol）是 Anthropic 于 2024 年底提出并开源的标准化协议，旨在解决 AI 模型与外部工具、数据源之间的「连接碎片化」问题。在 MCP 出现之前，每个 AI 工具都需要为每个外部服务单独开发集成方案，维护成本极高。MCP 定义了一套统一的客户端-服务器通信规范：AI 应用作为 MCP Client，外部工具（如 Figma、数据库、文件系统）作为 MCP Server，双方通过标准化的 JSON-RPC 协议交换上下文信息。这使得「一次开发，多处复用」成为可能——Figma 只需维护一个 MCP Server，所有支持 MCP 的 AI 工具（Cursor、TRAE、Claude Desktop 等）都能直接调用。

安装方式选择

TRAE 的 MCP 市场中自带一个 Figma 选项（由火山引擎提供），但这可能是早期的第三方 API 版本。如果使用这个版本，需要在 Figma 的设置 → 安全 → Personal 中生成一个新的 API Token 填入即可。

不过更推荐使用 Figma 官方最新的本地版 MCP。操作步骤：

在 TRAE 的 MCP 设置中选择「手动添加」
从 Figma MCP 官方文档中复制 Cursor 版本的配置（全选粘贴即可）
确认添加

MCP客户端连接状态

Figma MCP的关键前置条件

Figma 官方 MCP Server 本质上是一个运行在本地的轻量级服务进程，它通过 Figma 桌面客户端的本地 API 接口读取当前打开的设计文件数据。当 AI 发出请求时，MCP Server 会将 Figma 的设计树（包含节点 ID、AutoLayout 参数、样式变量、组件属性等）序列化为结构化数据返回给 AI 模型。基于这一工作原理，Figma MCP 本地版有几个必要条件：

必须使用 Figma 桌面客户端（浏览器版受安全沙箱限制，无法暴露本地服务端口）
开启桌面 MCP 服务：Figma 左上角设置中找到「开启桌面的 MCP 服务」并打勾
需要专业版或教育版：免费版无法使用此功能（Figma 将高级 API 能力作为付费功能的一部分）

配置完成后刷新 MCP 状态，看到打勾标记说明连接成功。如果不行，尝试关闭 Figma 重新打开。另外记得将 MCP 添加到智能体中才能正常调用。

实战：用Figma MCP将设计稿生成网页代码

第一步：准备工作文件夹

在开始之前，养成好习惯：在桌面新建一个文件夹，然后将文件夹拖入 TRAE（Mac 可直接拖到应用图标上）。所有生成的代码都会保存在这个文件夹中。

第二步：复制Figma设计稿链接

在 Figma 中选中目标 Frame，右键选择「Copy Link」（快捷键 Command+L）复制链接。

第三步：AI 自动生成代码

在 TRAE 聊天面板中输入提示词，例如：

使用 Figma MCP 生成页面，注意 AutoLayout 的布局和参数设置，所有设计参数都从 MCP 中获取，不要自由发挥。[粘贴链接]

MCP获取设计数据过程

AI 会自动调用 MCP 的各项权限：获取变量、获取上下文、获取图层节点 ID 等。可以看到它在获取 node ID、导出 PNG 截图等操作，说明 MCP 正常工作。

第四步：验证生成结果的准确性

生成完成后，通过右键检查元素验证参数是否准确。例如设计稿中设置的 24px 间距，在生成的代码中同样是 24×24，完全一致。

检查生成代码的尺寸参数

不过也要注意，AI 偶尔会「自由发挥」——比如自动添加设计稿中没有的阴影效果，这需要人工检查和修正。

设计稿变更后的迭代更新

AutoLayout 是 Figma 在 2019 年引入的自动布局系统，其设计理念直接对应 CSS Flexbox 模型。设计师在 Figma 中设置的 AutoLayout 属性与 CSS 属性存在高度的语义映射关系：Figma 的「Horizontal gap」对应 CSS 的 gap，「Fill container」对应 flex: 1，「Hug contents」对应 width: fit-content，最小/最大宽度约束则直接对应 min-width / `