TRAE Work 实战指南 / 其他

产品经理如何用 TRAE 重构工作流

"mcpServers": { "Playwright": { "command": "npx", "args": [ "@playwright/mcp@latest", "--extension" ] } } }

步骤二：安装浏览器插件

从上面的 [Releases 页面](https://github.com/microsoft/playwright-mcp/releases) 下载最新版本的插件压缩包。
打开 Chrome 的扩展程序管理页面 (`chrome://extensions/`)。
直接将下载的压缩包拖拽到页面中，即可自动安装。
记得手动将插件固定到工具栏，方便查看连接状态。

如何使用？

在对话中，明确提出让 AI 使用 playwrightmcp 即可触发。

示例：“请你使用 playwrightmcp 打开我的项目地址 or 网页...”

Figma AI Bridge 配置

这个稍微复杂点，需要填入你的 Figma Token。

JSON

{
  "mcpServers": {
    "Figma AI Bridge": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--stdio"
      ],
      "env": {
        "FIGMA_API_KEY": "替换为你的 key"
      },
      "disabled": true
    }
  }
}

如何获取 Figma Key？

登录 Figma 网页版 -> 点击头像 -> Settings -> Personal access tokens -> Generate new token。

img-851 · 图片展示了Figma网页版登录后的用户头像下拉菜单界面。头像为紫色背景，头像右侧有“heng”字样。菜单中“设置”选项被

这张图片是Figma网页版的设置页面“安全”标签页界面，页面顶部有“账号”“社区”“通知”“安全”四个选项，“安全”选项被红色框标注突出显示。页面展示了个人访问令牌相关内容，明确说明个人访问令牌可通过API访问自身数据，提醒不得将其提供给不信任的人员，且页面中被红色框标注的“生成新的令牌”选项，正是文档中Figma AI Bridge配置步骤里，用于生成个人访问令牌的对应操作入口，该入口可触发生成操作以完成配置所需的令牌获取。 — img-852 · 这张图片是Figma网页版的设置页面“安全”标签页界面，页面顶部有“账号”“社区”“通知”“安全”四个选项，“安全”选项

界面截图 — img-853 · 界面截图

图片展示的是Figma网页版中“个人访问令牌”生成界面。在“生成新的令牌”处，输入了“trae”作为令牌名称，下方显示了生成的令牌内容，其中部分字符被遮挡，下方提示“Copy this token. This is your only chance to do so!”。该图片与文档中“Figma AI Bridge配置”部分内容相关，用于说明登录Figma网页版后，点击头像进入Settings，再点击Personal access tokens，生成新令牌的操作步骤，令牌内容用于后续AI使用figma ai bridge mcp触发功能时的授权。 — img-854 · 图片展示的是Figma网页版中“个人访问令牌”生成界面。在“生成新的令牌”处，输入了“trae”作为令牌名称，下方显示了

如何使用？

在对话中，明确提出让 AI 使用 figma ai bridge mcp 即可触发。

示例：“请你使用 figma ai bridge mcp 来查看我的设计图 {{此处填入你的设计图 url}}...并1:1 还原为前端的 html 页面”

如何获取设计图 URL？

选中你想还原的容器（整个页面选最外层，单个组件选组件容器），右键 -> Copy link -> Copy link to selection。

这张图片展示的是Figma软件的操作界面，为文档中“如何获取设计图URL”的步骤提供了操作演示。图中显示鼠标选中了“复制/粘贴为”选项，其右侧展开的二级菜单里，“Copy link to selection”（复制所选内容的链接）选项被红框重点标注，这正是文档说明的获取设计图URL的操作路径：选中目标容器后，通过右键菜单依次点击该选项来完成设计图URL的复制。 — img-855 · 这张图片展示的是Figma软件的操作界面，为文档中“如何获取设计图URL”的步骤提供了操作演示。图中显示鼠标选中了“复制

配套神器：Builder.io 插件 (网页转设计图)

在 Figma 的 Actions (Cmd/Ctrl + P) 中搜索 `Builder.io` 并运行。

打开插件后，在 Import 菜单处选择 `Paste from Chrome`。

贴入使用它配套 Chrome 插件复制的前端代码 JSON，就能在 Figma 中拿到对应的设计图了。

这是Figma插件界面的Plugins & widgets选项卡页面，搜索栏输入了“builder.io”，当前展示了多个相关插件，包括来自社区的Builder.io - Figma to Code & AI Apps，以及由Siter.io开发的Export Figma to Websites and HTML插件，还展示了Material Theme Builder、FigwebX Optimization Design等其他相关插件，各插件均标注了来源、功能简介、用户量、点赞数等信息，页面底部是Figma的功能操作图标栏。该界面是TRAE&MCP配置指南里Figma AI Bridge配置的相关操作界面，用于查找相关插件完成配置。 — img-856 · 这是Figma插件界面的Plugins & widgets选项卡页面，搜索栏输入了“builder.io”，当前

这张图片展示的是Builder.io的Figma AI Bridge配置界面，界面顶部有“Export”“Design with AI”“Design System”“Import”几个选项卡，其中红色框标注选中的是“Import”选项卡，该选项卡用于将网页导入Figma，可输入网页链接并点击对应按钮完成导入；界面下方的红色框还标注了“Paste snapshot here”功能区，可粘贴Chrome扩展抓取的网页快照，也可上传builder.json文件。此界面是附录1Figma AI Bridge配置相关的操作页面，对应文档中该配置指南的内容说明。 — img-857 · 这张图片展示的是Builder.io的Figma AI Bridge配置界面，界面顶部有“Export”“Design

这是builder.io平台的Figma AI Bridge配置界面，界面顶部显示“Copy Layout”“Fusion Agent BETA”选项，当前处于“Copy Layout”选项页。该页面核心是通过复制网页布局并导入Builder或Figma来节省时间，界面设有标注明显的蓝色“Copy Layout”操作按钮，下方勾选了“Outline Builder components”选项，还附带“Learn how to use this”的使用指引链接，对应上下文里Figma AI Bridge的配置内容，用于相关功能的设置操作。 — img-858 · 这是builder.io平台的Figma AI Bridge配置界面，界面顶部显示“Copy Layout”“Fusio

其他建议配置

为了体验更丝滑，建议检查以下设置：

对话流配置：

自动运行 MCP：开启 (省得每次都要点确认)

令运行方式：沙箱运行 (安全第一)

个人白名单范围 (参考)：

python, cd, npm, chmod (根据项目需要灵活调整)

界面截图 — img-859 · 界面截图

附录2 ：常见资源占位 — AI 从哪里获取

本附录面向参与 AI Coding 的各位，说明常见占位资源（图标、图片）应从何处取得，以及如何在提示词中明确要求，避免图裂或缺图标。

图标 (Icon) 占位

建议做法：在提示词中直接指定使用某一套图标库，让 AI 用现成组件而非自绘或占位文字。

* 可选来源（任选其一即可，在提示词里提一嘴即可）：

* React 生态常用：react-icons（如 react-icons/fa、react-icons/hi 等）

* 组件库自带：若项目已用 Ant Design、Material-UI、Chakra UI 等，可写明「使用 Ant Design 的 Icon 组件」「使用 MUI 的 Icons」等

* 提示词示例：

* 「页面里的图标请用 react-icons，从里面选合适的图标即可。」

* 「我们项目用 Ant Design，图标统一用 Ant Design 的 Icon 组件。」

只要在需求或提示词中明确写出「用 xx 的 icon 库」，AI 就会从该库选图标，避免留空白或乱码占位。

图片 (Image) 占位

建议做法：占位图片从 [Unsplash](https://unsplash.com/) 获取与内容相关的免费可商用图片；且必须在采用前验证每个图片链接可访问，避免上线后图裂。

* 来源：Unsplash 提供可免费使用的图片，适合原型与占位。

* 提示词中建议写明：

* 「占位图片从 Unsplash 上获取与 [主题/关键词] 相关的公共图片。」

* 「使用 Unsplash 的图片作为占位图，并在代码或脚本中验证每个图片 URL 可访问；若不可访问则替换或跳过，防止图裂。」

* 重要：务必让 AI 逐个验证 Unsplash 的图片链接是否可访问（例如用 HEAD/GET 请求或简单的加载测试），再写进页面或资源列表。这样可以避免拿回来的链接已失效导致前后端出现图裂。

小结：图标指定 icon 库；图片指定 Unsplash + 验证可访问性，即可在 AI Coding 流程中稳定使用这两类占位资源。