工具集

Figma 官方远程 MCP：把设计稿的组件、变量与布局交给 agent 生成代码，还能直接在画布上创建和修改设计。需 Figma 账号授权；Starter 免费计划及 View、Collab 席位每月仅 6 次读取调用。

把 Figma 设计稿精简为布局与样式信息交给编码 agent，按稿还原界面比贴截图更准确。需要 Figma 个人访问令牌。

Figma 出品、收录于 OpenAI 官方市场的 Codex 插件：按设计稿实现界面、生成 Code Connect 映射，还能在 Figma 里创建或更新页面、组件库、FigJam 图表和幻灯片。需要连接 Figma 账号。

借助 Figma 插件与本地 WebSocket 服务，让 agent 读取并直接修改设计稿：建框架与文本、调整自动布局和样式、批量替换文案。需安装 Bun，现由 Grab 维护。

让 agent 读写 Figma：提取变量、组件和样式，在画布上新建和修改界面、FigJam 白板与演示，做无障碍检查和设计系统审计。需要 Figma 个人访问令牌、Figma 桌面版和 Node.js，并导入配套插件。

Figma 官方技能：让 agent 先写 Mermaid 代码，再通过 Figma MCP 在 FigJam 里生成流程图、时序图、状态图、甘特图和 ER 图，生成后可以在 Figma 里手动调整；饼图、思维导图等不支持的图会提前说明。需要 Figma 账号，并连接 Figma 远程 MCP 服务器。

Figma 官方技能：教 agent 通过 Figma MCP 在 FigJam 白板里创建便利贴、分区、连线、形状和表格，搭建头脑风暴、复盘会和会议看板。需要 Figma 账号并连接 Figma 远程 MCP 服务器，要和 figma-use 基础技能一起装；写入画布功能目前 Beta 期免费，Figma 称以后按用量收费。

Figma 官方技能合集：把设计稿还原成代码、用 Code Connect 映射组件、从代码生成设计系统组件库、在画布上搭建页面和 FigJam 图表。需连接 Figma MCP 服务器；写入画布目前处于 Beta 阶段，暂时免费。

把代码里的页面、弹窗、侧栏等界面或文字描述，搭建成 Figma 画布上可编辑的设计稿，优先复用文件里已发布设计系统的组件与变量。Figma 官方维护，需连接 Figma 远程 MCP 服务器，并同时安装 figma-use 技能。

Figma 官方插件：接入 Figma 远程 MCP 服务器，附带设计稿转代码、Code Connect、生成设计与组件库等技能，可读取设计上下文并写入画布。需要 Figma 账号，Starter 版与查看、协作席位每月仅 6 次调用。

把 Figma 设计稿还原成项目里的生产代码：以设计截图为视觉目标，优先复用已有组件、设计变量与 Code Connect 映射。Figma 官方维护，需连接 Figma MCP 服务（免费计划每月仅 6 次调用）。

Figma 官方技能：教 agent 用 use_figma 执行 Plugin API 脚本，直接在画布上创建和修改节点、组件、变量与自动布局，调用 use_figma 前必须先加载。需要 Figma 账号并连接远程 MCP 服务器。

Figma 官方命令行工具：把 Figma 设计系统里的组件与代码仓库中的真实组件一一关联，发布后 Dev Mode 与 Figma MCP 给出的是生产代码片段而不是自动生成的示例；目前主推模板文件写法。需要 Node.js 18+、Figma Organization 或 Enterprise 套餐、完整的 Design 或 Dev Mode 席位及个人访问令牌。

免费的双向 Figma MCP，无需付费 Dev Mode 席位：可把设计稿转成贴合现有项目的代码，也能按描述直接在画布上搭页面和组件，数据只在本机流转。需要 Node.js 20.19+ 和 Figma 桌面版，并导入配套插件。

让 Claude Code、Cursor 等通过插件桥接读取、分析并直接修改 Figma 设计稿：批量改颜色和字体、检查文字对比度、生成组件代码，免费 Figma 账号也能用。需 Node.js 和 Figma 桌面版，使用前先启动本地 WebSocket 服务并导入插件。

在终端里用命令或 JSX 读写 Figma：创建框架与组件、插入 Iconify 图标、设置布局，可把节点导出为 JSX 或 Storybook，也能作为 MCP 服务器。需要 Figma 桌面版，126 及以上版本需用 daemon --pipe 模式连接。

为案例展示或社交帖子制作逐步讲解 UX 决策的蓝图动画：给出改版前后两屏时逐步重建变化部分，只给一屏时逐个模块标注「是什么、为什么」。界面按 Figma 原稿 1:1 还原，基于 Claude Design 的 animations_v3 起始模板；CC BY-NC 4.0 许可，仅限非商业使用。

把 Figma 设计节点的布局、样式和图片交给 AI 编码工具，转换成高还原的 HTML/CSS、React 或 Tailwind 代码，并把设计图片下载到本地。需要 Figma 个人访问令牌；会上报基础使用统计，遇到 Figma API 限流可改用插件版。

从 Figma 文件批量导出组件（如整套图标）为 SVG，并把颜色、文字、阴影等样式导出为 Sass/SCSS 变量或 Style Dictionary 令牌，让网站上的图标与样式跟设计稿保持同步。需要 Node.js、Figma 个人访问令牌（FIGMA_TOKEN），并按需安装对应的输出插件（如 @figma-export/output-components-as-svg）。

在 Figma 里为组件生成结构解剖标注：在组件实例上放置编号标记并填写属性表，再为每个子组件单独生成一节，列出包括隐藏元素在内的内部结构。属于 uSpec 技能集，需要 create-component-md 生成的组件 .md 规格、Figma MCP，以及在 uspecs.config.json 中配置好的模板。

在 Figma 里生成组件的读屏无障碍规格：焦点顺序，以及按组件状态列出的 VoiceOver（iOS）、TalkBack（Android）与 ARIA（Web）属性表和播报内容。属于 uSpec 技能集，内容来自 create-component-md 生成的组件 .md 规格，需要 Figma MCP 与在 uspecs.config.json 中配置好的模板。

把已有的 Figma 设计重新接回已发布的设计系统组件：先备份画框，逐个区块判断已接入、可直接替换、需用基础组件重组还是无法处理，再一次只改一个区块，替换掉脱离组件的图层、本地封装与一次性组件。需要 Figma MCP 的读写能力。

只读审查 Figma 页面或组件与设计系统脱节的地方：用普通框架手搭的共享组件、本应合并的重复结构、未绑定变量的硬编码颜色与间距、变体走样等，每条发现都要有 Figma 结构上的证据，可附建议替换的组件，输出 Markdown 或 JSON。需要 Figma MCP。

针对设计系统审查给出的单条问题修复 Figma 设计：先判断能否干净地修，只备份受影响的节点，再按替换组件实例、用基础组件重组、绑定变量或对齐变体中的一种方式做最小改动，并只验证这一处；做不到就标为受阻。需要 Figma MCP。