Trae + Figwright MCP + Figma Desktop：实现 AI 自然语言操控设计画布

作者备注：本文记录了 2026 年 8 月在 Windows 11 平台上的完整搭建过程，从 GitHub 直连被封的困境到最终成功运行，涵盖源码级构建、PostCSS 冲突排错、Figma manifest BOM 问题等真实踩坑经验。

【CSDN 文章摘要】

本文介绍如何在 Windows 平台上，通过 Trae IDE + Figwright MCP + Figma 桌面版三者联动，实现"用自然语言描述设计需求，AI 自动在 Figma 画布上生成设计稿"。整套方案基于免费工具，无需 Figma Dev Mode 付费席位，无需科学上网即可完成搭建。全文涵盖架构解析、环境准备、插件构建（MCP 服务器 + Figma 插件）、Trae 配置、验证测试、常见问题排查，以及与 Figma 官方 MCP、figma-developer-mcp 等方案的深度对比，并附 Excel 数据 → Figma 可视化的实操演示。

一、引言：为什么需要这个方案

1.1 AI 设计工具的现状

2025-2026 年，AI 代码生成工具（Cursor、Trae、Claude Code）已经相当成熟，但 AI 操控设计画布始终是一个未被很好解决的问题。传统流程中，产品经理给出一份需求文档，设计师在 Figma 中手动绘制，开发再从 Figma 还原为代码——这个链路有大量重复劳动。

Figwright 的出现改变了这一状况：它将 Figma 画布接入 MCP（Model Context Protocol）协议，让 AI Agent 不再只能"读"设计，而是可以直接"写"画布——用自然语言描述需求，AI 自动在 Figma 中生成真实的设计元素。

1.2 本方案要解决的问题

  • 自然语言 → Figma 画图：设计师/产品经理直接描述需求，AI 在 Figma 中生成设计稿
  • Excel 数据 → Figma 可视化：拖入 Excel，用自然语言指挥 AI 画图表
  • 代码 → Figma 设计：将已有组件代码反向渲染到 Figma 画布
  • 零成本：无需 Figma 付费版，无需 Dev Mode 席位

1.3 工具选型理由

方案 成本 读写 难度 本方案选用理由
Figwright 免费 ✅ 双向 中 本文主角，免费 + 双向 + 本地运行
Figma 官方 Dev Mode MCP 付费席位 仅读 低 需 Professional+ 计划 + Dev 席位
figma-developer-mcp 免费 仅读 低 只需 Figma PAT，但无法写画布
Figma AI Bridge 免费 仅读 低 Trae 市场内置，只读转代码

二、技术架构解析

2.1 整体架构图

┌─────────────────────────────────────────────────────────┐
│  用户（自然语言需求）                                      │
└────────────────────┬────────────────────────────────────┘
                     ▼
┌─────────────────────────────────────────────────────────┐
│  Trae IDE（AI Agent / MCP Client）                        │
│  ——自然语言理解 → 任务规划 → 调用 MCP 工具                │
└────────────────────┬────────────────────────────────────┘
                     │  MCP 协议（stdio 标准输入/输出）
                     ▼
┌─────────────────────────────────────────────────────────┐
│  @figwright/mcp  v0.4.0  （本地 MCP 服务器）              │
│  ——112 个工具 · leader/follower 多客户端选举              │
│  ——WebSocket 中继端口：127.0.0.1:3055                    │
└────────────────────┬────────────────────────────────────┘
                     │  WebSocket · msgpack 二进制协议
                     ▼
┌─────────────────────────────────────────────────────────┐
│  Figwright Figma 插件（v0.4.0）                           │
│  ——UI（Vue 3 iframe）：显示连接状态、活动日志              │
│  ——Sandbox：执行 Figma Plugin API 调用                   │
└────────────────────┬────────────────────────────────────┘
                     │  Figma Plugin API
                     ▼
┌─────────────────────────────────────────────────────────┐
│  Figma Canvas（真实设计画布）                              │
└─────────────────────────────────────────────────────────┘

2.2 通信链路详解

第一段：MCP 协议（stdio）
Trae 通过标准输入/输出（stdio）与 @figwright/mcp 服务器通信。这是 MCP 协议的传输层定义——进程通过 JSON-RPC 格式的消息在 stdin/stdout 上交换，延迟极低，适合本地调用。

第二段：WebSocket 中继（127.0.0.1:3055）
MCP 服务器与 Figma 插件之间通过本地 WebSocket 通信，使用 msgpack 二进制序列化。端口固定为 3055，全程不离开本机，不存在数据外传风险。

第三段：Figma Plugin API
插件的 sandbox 环境执行 Figma 官方 Plugin API，真实修改画布。所有操作都在用户已打开的 Figma 文件中立即可见。

2.3 多客户端共享机制

Figwright 支持多客户端并发连接同一个 Figma 插件：

  • Leader（领导者）：唯一持有 WebSocket 到插件连接的客户端，所有写操作经由 Leader 转发
  • Follower（跟随者）：通过 HTTP /rpc 端点将工具调用转发给 Leader，Leader 执行后返回结果
  • 自动选举：Leader 退出时，Follower 自动竞争成为新 Leader，“busy ≠ dead” 心跳保活机制确保连接稳定

这意味着：你在 Trae 中发起请求的同时，Claude Code 或 Cursor 也可以连接到同一个插件，共享同一个 Figma 画布。

2.4 安全机制

安全层 实现方式
网络隔离 所有流量在 127.0.0.1 本地回环，不出本机
Host 头校验 WebSocket 中继校验请求的 Host 头必须指向回环地址，阻止 DNS rebinding 攻击
Origin 头校验 拒绝所有非插件沙箱的浏览器 Origin 请求
CORS 预检 Leader 的 HTTP 端点要求 media type 必须通过 CORS 预检请求
Figma API 边界 插件仅能访问用户当前已打开的文件，无法访问其他文件

2.5 112 个 MCP 工具分类

Figwright 将 112 个工具分为三大组：

工具组 能力范围
Read（读取） 选择/文档/节点检查、样式读取、变量/组件/字体/表情读取、动画状态、截图、原图素材导出、PDF 导出、视频导出（MP4/GIF/WebM）
Write（写入） 创建和编辑帧、文本、形状、自动布局、效果、样式、变量、组件（含布尔/文本/实例切换属性）、页面、表情、动画（关键帧、预设、时间线）；batch 工具支持批量操作一次性应用大量修改
Grounding（上下文锚定） get_design_context（忠实去重的设计上下文）、component_map（Figma 组件 → 代码组件映射）、token_map（设计 token 映射）、icon_map（图标映射）、design_diff（设计变更对比，生成受影响代码的更新建议）

三、环境准备与前置检查

3.1 系统要求

组件 版本要求 验证命令
操作系统 Windows 10/11（本文环境：Windows 11） —
Node.js ≥ 22.12（或 20.19+） node --version
Figma 桌面版（免费账号即可） 桌面客户端已登录
Trae Trae CN 最新版 启动后确认能正常使用

⚠️ Node.js 版本注意：Figwright 不支持 Node 18、21 以及 22.0~22.11 版本。本方案测试环境为 v22.22.3，满足要求。

3.2 前置环境检查清单

打开 PowerShell，依次运行：

# 检查 Node.js 版本
node --version
# 期望输出：v22.x.x（≥ v22.12）

# 检查 npm 版本
npm --version
# 期望输出：10.x.x

# 检查 Figma 桌面版
$figmaPath = "$env:LOCALAPPDATA\Figma"
Test-Path $figmaPath
# 期望输出：True

# 检查 Trae 安装
$traePath = "C:\Program Files\Trae CN\Trae CN.exe"
Test-Path $traePath
# 期望输出：True

四、插件构建：从 GitHub 源码到 Figma 可导入插件

说明：Figwright 的完整系统包含两个部分：

  1. @figwright/mcp — MCP 服务器（npm 包，已在上一阶段全局安装）
  2. Figma 插件 — 需要单独构建

本节记录的是在网络受限时（GitHub 直连被封），从 GitHub API 获取 monorepo 源码并本地构建插件的完整过程。

4.1 方案 A：直接下载 Release（推荐）

如果你可以正常访问 GitHub，下载最简单：

  1. 访问 https://github.com/awdr74100/figwright/releases/latest
  2. 下载 figwright-plugin-vX.X.X.zip（如 figwright-plugin-v0.4.0.zip）
  3. 解压到任意目录（例如 D:\tools\figwright-plugin）
  4. 得到三个文件：manifest.json、dist/code.js、dist/index.html
  5. 直接跳到 4.5 节导入 Figma

4.2 方案 B：源码本地构建（本文实践路径）

适用场景：GitHub 直连被封（国内常见），但可以访问 GitHub API 和 jsdelivr CDN。

工具准备：

# 确认 pnpm 已安装（构建需要）
npx pnpm --version
# 如果未安装：
npm install -g pnpm

Step 1：获取 monorepo 源码

Figwright 是 pnpm monorepo，结构如下：

figwright/
├── packages/
│   ├── plugin/         # Figma 插件（主要构建目标）
│   ├── mcp/            # MCP 服务器（已在 npm 全局安装）
│   └── shared/         # 共享类型定义
├── skills/             # AI Skills（figma-codegen / figma-build）
└── scripts/            # 辅助脚本

通过 GitHub API 列出文件树（需要带 User-Agent 头），找到源码文件 SHA，再通过 Blob API 下载：

# 获取 monorepo 根文件树
$headers = @{ "User-Agent" = "figwright-builder/1.0" }
$treeUrl = "https://api.github.com/repos/awdr74100/figwright/git/trees/main?recursive=1"
$tree = Invoke-RestMethod $treeUrl -Headers $headers

# 过滤出 packages/plugin 下的源码文件
$pluginFiles = $tree.tree | Where-Object { $_.path -like "packages/plugin/**" -and $_.type -eq "blob" }

# 通过 Blob API 逐个下载（base64 编码返回）
foreach ($file in $pluginFiles) {
    $blobUrl = "https://api.github.com/repos/awdr74100/figwright/git/blobs/$($file.sha)"
    $blob = Invoke-RestMethod $blobUrl -Headers $headers
    $content = [System.Text.Encoding]::UTF8.GetString(
        [System.Convert]::FromBase64String($blob.content)
    )
    $localPath = "D:\tools\figwright-plugin-v0.4.0\$($file.path)"
    # 写入文件...
}

小技巧：对于非 .gitattributes 标记的纯文本文件，GitHub Blob API 返回的 base64 内容不带 padding 问题，直接解码即可。

Step 2：安装依赖

# 在 monorepo 根目录安装（--ignore-scripts 跳过 postinstall，避免网络依赖问题）
cd D:\tools\figwright-plugin-v0.4.0
pnpm install --ignore-scripts

⚠️ 注意：monorepo 使用 workspace:* 协议引用内部包，npm 不支持此协议，必须用 pnpm。npm registry 切换到国内镜像以加速：

pnpm config set registry https://registry.npmmirror.com

Step 3：修复构建配置

源码构建时可能遇到以下问题，需要针对性修复：

问题 1：PostCSS 配置冲突

报错：Failed to load PostCSS config ... Unexpected token ''

原因：Vite 在搜索 PostCSS 配置时，误将 ui/package.json（{}）当作配置文件解析。

解决：使用 @tailwindcss/postcss 替代 @tailwindcss/vite，在 packages/plugin/ 根目录创建 postcss.config.js：

// packages/plugin/postcss.config.js
export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
};

安装 @tailwindcss/postcss：

pnpm add -F @figwright/plugin -D @tailwindcss/postcss --ignore-scripts

修改 vite.config.ts（移除 @tailwindcss/vite 插件）：

import vue from '@vitejs/plugin-vue';
import { defineConfig } from 'vite';
import { viteSingleFile } from 'vite-plugin-singlefile';

const version = '0.4.0';

export default defineConfig({
  root: '.',
  define: { __APP_VERSION__: JSON.stringify(version) },
  plugins: [vue(), viteSingleFile()],
  build: {
    outDir: 'dist',
    emptyOutDir: false,
    target: 'baseline-widely-available',
    rollupOptions: {
      input: 'ui/index.html',
    },
  },
});

问题 2：manifest.json 的 UTF-8 BOM

PowerShell 5.1 的 Set-Content 默认添加 UTF-8 BOM（EF BB BF），Figma JSON 解析器会将其识别为非法字符并报错：Unexpected token '', '{ "name"... is not valid JSON。

解决：使用 .NET 写入无 BOM 的 UTF-8：

$utf8NoBom = New-Object System.Text.UTF8Encoding $false
$writer = [System.IO.File]::CreateText($path)
$writer.Write('{}')  # 写入内容
$writer.Close()

Step 4：执行构建

cd D:\tools\figwright-plugin-v0.4.0\packages\plugin

# 构建主进程代码（Figma plugin API 逻辑）
pnpm run build:main
# 输出：dist/code.js（~192 KB）

# 构建 UI（Vue 3 面板，vite-plugin-singlefile 内联为单 HTML）
pnpm run build:ui
# 输出：dist/ui/index.html（~240 KB）

# 整理输出结构（manifest.json 要求 ui: "dist/index.html"）
Copy-Item "dist/ui/index.html" "dist/index.html" -Force

构建产物验证：

$dist = "D:\tools\figwright-plugin-v0.4.0\packages\plugin\dist"
Get-ChildItem $dist -Recurse -File | Select-Object Name, @{N='SizeKB';E={[math]::Round($_.Length/1KB,1)}}

期望输出：

文件 大小
code.js ~192 KB
index.html ~235 KB
manifest.json ~535 B

五、Figma 插件导入

5.1 导入步骤

  1. 打开 Figma 桌面客户端（必须是桌面版，浏览器版无法导入本地插件）
  2. 打开任意设计文件（不能停留在 Recents 主页，需进入画布）
  3. 顶部菜单栏 → Plugins → Development → Import plugin from manifest…
  4. 选择文件：D:\tools\figwright-plugin-v0.4.0\packages\plugin\manifest.json
  5. 导入成功，插件出现在 Plugins → Development 列表

⚠️ 常见错误：如果点了 Figma 主界面右上角的 More → Import，那是导入 .fig 设计文件的入口，不支持 manifest.json，会报错 “Unsupported file format”。必须走 Plugins → Development → Import plugin from manifest… 路径。

5.2 启动 Figwright 插件

导入成功后：

  1. Plugins → Development → Figwright 点击
  2. 插件面板弹出（可能在屏幕右下角弹出，拖回中间）
  3. 初始状态：“Reconnecting” 或 “Waiting for the MCP client”（橙点）——这是正常的，说明插件已就绪，等待 MCP 服务器连接
  4. 面板有 Activity / Context / Debug 三个 Tab，可查看调用日志和连接状态

六、Trae MCP 配置

6.1 启动 MCP 服务器

方式一：通过全局安装的 npm 包（推荐，已在搭建阶段完成）

# 启动 figwright-mcp 服务器
& "C:\Users\yueli\AppData\Roaming\QClaw\npm-global\figwright-mcp.cmd"

期望输出：

[figwright] server 0.4.0 (protocol 0.1.0) ready as leader, relay on :3055

⚠️ 不要关闭这个 PowerShell 窗口。关闭后 MCP 服务器退出，Figma 插件会断开连接。

方式二：npx 方式

npx -y @figwright/mcp

国内网络环境建议用方式一（全局安装已提前缓存），避免每次启动重新下载。

6.2 Trae MCP 面板配置

  1. 打开 Trae CN → 进入任意项目或空白工作区
  2. AI 对话框右上角 ⚙️ 设置图标 → 选择 MCP
  3. 点击 「+ 添加」 → 选择 「手动配置」
  4. 填入以下 JSON 配置：
{
  "mcpServers": {
    "figwright": {
      "command": "C:\\Users\\yueli\\AppData\\Roaming\\QClaw\\npm-global\\figwright-mcp.cmd",
      "args": [],
      "env": {}
    }
  }
}

路径说明：figwright-mcp.cmd 由 @figwright/mcp 全局安装生成，位于 npm 全局目录。如果该路径不存在，可以用以下命令确认：

where.exe figwright-mcp.cmd
# 或
Get-ChildItem "$env:APPDATA\QClaw\npm-global" -Filter "figwright*" -Recurse
  1. 点击保存，观察 MCP 面板中 figwright 是否显示已连接状态

特别说明：在Trae CN编辑器中输入需求，需要上传附件时，只能上传图片，如果需要上传word、pdf、excel等格式文档，可以下载安装TraeWork客户端并配置MCP，可实现自然语言+附件需求操控Figma画图。

6.3 验证连接

回到 Figma，确认 Figwright 插件面板的圆点：

状态 颜色 含义
Connected 🟢 绿色 MCP 服务器已连接，一切正常
Reconnecting 🟠 橙色 正在重连，检查 MCP 服务器是否运行中
Waiting 灰色 等待 MCP 客户端接入

同时在 Trae 对话框发送：

请运行 ping 工具，确认 Figma 连接状态

如果返回 pong 和连接信息，说明全链路已打通。

七、实战示例

7.1 自然语言画基本形状

在 Trae 对话框发送：

在 Figma 画布中心创建一个 300x200 的圆角矩形（圆角半径 12px），
填充色 #3B82F6（蓝色），居中放置。

在矩形下方 20px 处添加标题文字 "Hello Figwright"，
字号 24px，颜色 #1F2937，居中对齐。

AI 会自动调用以下 Figwright MCP 工具：

  1. create_frame（创建承载画板）
  2. create_rectangle（蓝色圆角矩形）
  3. set_corner_radius（设置圆角）
  4. create_text（创建标题文字）
  5. set_text_style（设置字体样式）

7.2 Excel 数据 → Figma 可视化

步骤 1：将 Excel 文件直接拖入 Trae Work对话框（支持 doc、pdf、.xlsx、.csv等格式文档）

步骤 2：发送自然语言指令：

请读取刚上传的 sales_q1.xlsx 文件，
按产品线分组统计销售额，然后在 Figma 当前画布
创建一个柱状图（每条柱代表一个产品线），
添加图例、坐标轴标签和图表标题。

步骤 3：Trae 的 AI 解析 Excel 数据 → 提取分组汇总结果 → 调用 Figwright 工具生成 Figma 图表

💡 如果 Trae Excel 解析不够精准，可以先用 QClaw 解析：

  1. 微信小程序 → 发给 QClaw：“解析 D:\data\sales.xlsx，按产品线分组”
  2. QClaw 返回结构化数据（数字表格）
  3. 将结果复制粘贴到 Trae 对话框作为上下文
  4. 再发送"根据以上数据画柱状图"

7.3 从设计稿生成代码

  1. 在 Figma 中选中某个组件或画板
  2. 在 Trae 发送：
请把这个 Figma 选中区域生成为 React + Tailwind CSS 组件代码，
使用我项目中现有的设计系统和组件库。

Figwright 会：

  • 调用 get_design_context 获取完整设计上下文（布局、样式、变量、组件依赖）
  • 调用 component_map 将 Figma 组件映射到你项目的代码组件
  • AI 基于这些忠实的grounding信息生成代码，而不是凭空猜测

7.4 批量修改设计

把当前页面中所有按钮的背景色从 #3B82F6 改为渐变色
（从 #667EEA 到 #764BA2），同时将文字颜色统一改为白色。

八、Skills 扩展：让 AI 更专业

8.1 安装 Figwright Skills

Skills 是 Figwright 提供的结构化提示词包，让 AI 在特定场景下自动调用最佳工具组合：

npx skills add awdr74100/figwright/skills

支持的 Skills：

Skill 功能
figma-codegen 将 Figma 选中区域转换为框架感知代码，基于你的技术栈复用现有组件
figma-build 从代码或自然语言描述构建 Figma 设计，复用文件中已有的组件和样式

8.2 Trae 自定义智能体配置

  1. Trae 对话框右上角 → ⚙️ → 智能体 → 创建智能体
  2. 填写配置：
名称：Figma 画师
提示词：
  你是一个专业的 Figma 设计助手。当用户提出设计需求时，
  请直接调用 Figwright MCP 工具在 Figma 画布上创建设计。
  遵循以下原则：
  1. 先理解需求，再调用工具
  2. 使用 Auto Layout 保持布局一致性
  3. 遵循设计系统规范（颜色、间距、字体）
  4. 完成后简要说明创建了哪些元素
  1. 工具-MCP：仅勾选 figwright
  2. 工具-内置：勾选 文件系统、终端

九、与其他方案的深度对比

9.1 功能矩阵对比

能力维度 Figwright Figma Dev Mode MCP figma-developer-mcp Figma AI Bridge
费用 免费 需 Dev/Full 席位 免费 免费
读写方向 双向（读+写） 仅读 仅读 仅读
本地运行 ✅ ❌（官方远程） ✅ ❌（远程 API）
工具数量 112 个 有限（API 范围） 少量（REST 封装） 1 个（生成页面）
写画布 ✅ ❌ ❌ ❌
Excel 数据画图 ✅（自然语言） ❌ ❌ ❌
多客户端共享 ✅ ❌ ❌ ❌
设计变更 diff ✅ ❌ ❌ ❌
Provider-first codegen ✅ ❌ ❌ ❌
需 Figma 桌面版 ✅ ❌ ❌ ❌
需 Figma PAT ❌（写操作不需要） ❌ ✅（读操作需要） ✅

9.2 选型建议

  • 预算有限 / 需要写画布 → 选 Figwright（本文方案）
  • 已是 Figma付费版用户 / 只需要读设计转代码 → 选 Figma Dev Mode MCP
  • 只需要读 Figma 链接生成代码 / 不想装插件 → 选 figma-developer-mcp
  • 只想快速把 Figma 设计转成 HTML 页面 → 选 Figma AI Bridge（Trae 市场内置）

十、常见问题排查

Q1：Figma 导入插件报错 “Unexpected token ‘’, '{ “name”… is not valid JSON”

原因：manifest.json 文件开头有 UTF-8 BOM（EF BB BF），Figma JSON 解析器不识别 BOM。

解决：

$path = "D:\tools\figwright-plugin-v0.4.0\packages\plugin\manifest.json"
$bytes = [System.IO.File]::ReadAllBytes($path)
if ($bytes[0] -eq 0xEF -and $bytes[1] -eq 0xBB -and $bytes[2] -eq 0xBF) {
    $newBytes = $bytes[3..($bytes.Length - 1)]
    [System.IO.File]::WriteAllBytes($path, $newBytes)
    Write-Host "BOM 已移除"
}

Q2：插件启动报错 “Cannot find module” 或 sandbox 加载失败

原因：manifest.json 中的 main 和 ui 路径与实际构建产物路径不匹配。

检查：manifest.json 中：

  • main 应指向 dist/code.js
  • ui 应指向 dist/index.html

如果 dist/ui/index.html 存在但 dist/index.html 不存在，需要复制：

Copy-Item "dist/ui/index.html" "dist/index.html" -Force

Q3：MCP Server 启动失败 “command not found”

原因：Trae 的 MCP 客户端 spawn 进程时没有继承你的 shell 环境变量，找不到 npx 或 node。

解决：使用绝对路径：

# 找到 npx 的绝对路径
where.exe npx

在 Trae MCP 配置中填入：

{
  "mcpServers": {
    "figwright": {
      "command": "C:\\Program Files\\nodejs\\npx.cmd",
      "args": ["-y", "@figwright/mcp"]
    }
  }
}

Q4：插件显示 “Waiting” 或 “Reconnecting”，不变绿

排查顺序：

  1. MCP 服务器是否在运行？ → 检查 PowerShell 窗口是否显示 ready as leader, relay on :3055
  2. Figma 桌面版是否已打开并登录？ → 插件需要在 Figma 桌面客户端中运行
  3. 防火墙是否拦截？ → Windows 防火墙默认放行 127.0.0.1，如有第三方安全软件需检查
  4. 重启插件 → Figma 中关闭插件窗口，重新从 Plugins → Development → Figwright 打开

Q5：npx 每次启动很慢（国内网络）

解决：全局安装 @figwright/mcp 包，避免每次从 npm registry 下载：

npm install -g @figwright/mcp

然后 Trae MCP 配置改为绝对路径：

{
  "mcpServers": {
    "figwright": {
      "command": "C:\\Users\\yueli\\AppData\\Roaming\\QClaw\\npm-global\\figwright-mcp.cmd",
      "args": []
    }
  }
}

Q6：PostCSS 配置加载失败

原因：Vite 的 PostCSS 搜索路径上存在空或无效的 package.json，Rolldown 解析器将空文件视为非法 JSON。

解决：将 ui/package.json 恢复为有效内容 {}（非空文件），并使用 @tailwindcss/postcss 替代 @tailwindcss/vite。

十一、总结与展望

11.1 本文核心成果

通过本文的完整搭建，成功实现了：

用户（自然语言）→ Trae（AI 理解）→ Figwright MCP（112 个工具）→
Figma 桌面插件（Plugin API）→ Figma Canvas（真实设计稿）

全程免费，无需 Figma 付费版，无需科学上网（除插件源码获取阶段）。

11.2 适用场景

场景 价值
产品经理快速出原型 用自然语言描述需求，AI 直接生成设计稿
数据分析师可视化 Excel 拖入 → 自然语言指令 → Figma 图表
设计系统维护 代码 → Figma 同步，design diff 追踪变更
AI 教学演示 展示 AI 从理解到执行的全流程

11.3 局限性

  • 需要 Figma 桌面版（插件无法在浏览器版 Figma 中运行）
  • 网络受限环境下构建插件有一定门槛（需要修复 BOM、路径等问题）
  • 复杂设计仍需人工微调，AI 是助手而非替代者
  • 多客户端共享时，Follower 写操作的延迟略高于 Leader

11.4 未来方向

  • Figwright Skills 生态扩展：社区 Skills 会越来越丰富，设计→代码的自动化程度将持续提升
  • Provider-first codegen 深化：AI 生成代码时复用现有组件库的比例会越来越高，真正实现"设计即代码"
  • 多模态输入：未来可能支持直接拖入图片 → AI 识别 → Figma 画布矢量化的完整链路

参考资源

资源 地址
Figwright GitHub https://github.com/awdr74100/figwright
最新 Release（含插件下载） https://github.com/awdr74100/figwright/releases/latest
Figwright Skills npx skills add awdr74100/figwright/skills
@figwright/mcp npm https://www.npmjs.com/package/@figwright/mcp
MCP 协议文档 https://modelcontextprotocol.io
Trae 官方文档 https://docs.trae.cn
QClaw 文件空间 https://www.ithome.com/0/948/699.htm

本文实验环境：Windows 11 + Node.js v22.22.3 + Trae CN + Figma 桌面版 + Figwright v0.4.0
撰写日期：2026 年 8 月 25 日

Logo
AtomGit AI 社区

AtomGit AI 社区提供模型库、数据集、Agent、Token等资源

更多推荐

AI 编程工具怎么用才不浪费？ChatGPT、Codex 与开发成本控制方法

怎样买到更多额度？怎样让每一份 AI 额度产生更高的开发价值？简单问题→ ChatGPT复杂项目任务→ Codex大型任务→ 先拆分修改代码→ 最小 Diff偶尔超量→ Credits持续超量→ 再考虑提高套餐同时，2026 年 Codex 已经采用更加基于 Token 的计量机制，输入、缓存输入、输出以及模型选择都会影响实际 Credits 消耗。建立一套任务分级、上下文控制和成本评估机制。

avatar AtomGit AI 社区
cover

AI电商做图平台怎么选？Flux Art、ChatGPT、Gemini、Midjourney与Adobe Firefly任务边界评测

avatar AtomGit AI 社区

AI搜索里，品牌被悄悄降级了

很多品牌运营团队还在用传统舆情工具监测口碑——数一下社交媒体上有几条好评、几条差评，算个比例就觉得高枕无忧。但在ChatGPT、Perplexity、豆包这些AI搜索平台里，最大的风险根本不是"被骂"，而是"被放在不利位置而不自知"。

avatar AtomGit AI 社区