Figma Agent Kit Skill 技能

技能简介

Figma Agent Kit 是开源的 Figma Desktop 插件 + 本地 MCP 桥，让 Cursor、Claude Code、Codex、Qoder、CodeBuddy、Trae 等 AI 编程 Agent 直接读写你当前打开的设计稿。它不走 Figma REST API，不把画布上传云端，设计稿始终留在本机。

核心功能

1. 37 个 MCP 工具：文档、选区与节点读写，填充色、文本、Auto Layout，创建、分组、删除节点，Motion 与截图导出。
2. 多编辑器接入：标准 stdio MCP 服务，任何支持 MCP 的宿主都能用 npx 命令一行接入。
3. 本地隐私优先：桥接流量全部走 localhost（默认端口 1998），截图以原始 PNG 字节传输。
4. 多 Agent 协作：Leader / Follower 选举，多个 Agent 窗口共用一条 WebSocket 桥，Follower 走 RPC 复用连接。
5. 设计师工作流：可选 AI 视觉重命名与嵌套分组，1× 预览、3× PNG / ZIP 切图导出，插件界面中英双语。
6. 高效传输：二进制 WebSocket + MessagePack 协议，截图支持 TinyPNG 风格压缩，scale=3 与插件切图一致。

安装配置

1. 环境要求：Figma Desktop（推荐，浏览器标签可能休眠导致 WebSocket 断开）、Node.js ≥ 20；源码构建另需 pnpm ≥ 9。
2. 安装插件：从 GitHub Releases 下载 figma-agent-plugin 压缩包（与 MCP 版本一致），解压后在 Figma Desktop 选择 Plugins → Development → Import plugin from manifest…，导入并运行。
3. 配置 MCP：在 Cursor 的 mcpServers 配置里加入 npx -y figma-agent-mcp；Claude Code 用 claude mcp add 或项目 .mcp.json；Codex 用 codex mcp add 或 config.toml；改端口需用 FIGMA_AGENT_MCP_PORT 环境变量并保持与插件一致。

使用步骤

1. 在 Figma Desktop 运行插件，等状态显示绿色「MCP Bridge 已连接」。
2. 在编辑器 MCP 面板确认 figma-agent-mcp 已加载、37 tools enabled，然后重启 Agent。
3. 冒烟测试：让 Agent 依次调用 list_files、get_selection、get_node 与 get_screenshot 验证读路径。
4. 再让 Agent 用写工具修改节点与样式，或调用 save_screenshots 导出切图。

适用场景

1. 设计稿转代码：Agent 读取 Frame 结构与样式，直接生成组件代码。
2. 批量改版：一次性调整多处填充色、文本与 Auto Layout 参数。
3. 设计走查：自动截图对照需求检查细节，减少人工比对。
4. 多 Agent 并行：同一设计窗口同时服务多个编码 Agent，互不抢占连接。

适用人群

前端与全栈开发者、UI/UX 设计师、用 AI 编程工具做设计交付的小团队，以及希望设计稿与代码保持同步的独立开发者。

工作原理

Agent 通过 stdio 启动 figma_agent_mcp 进程，进程在多个窗口间选举 Leader 或 Follower；Leader 用本地 WebSocket（MessagePack 协议、默认端口 1998）与插件 UI 通信，插件经 postMessage 调用 Figma Plugin API 完成读写，截图以原始 PNG 字节回传。桥只经本地插件访问当前文档，不会上传整份文件；只有启用可选 AI 重命名/分组时才把截图与图层元数据发往你自配的 API，密钥存于 Figma clientStorage。项目为 MIT 许可，附 SECURITY.md 漏洞披露流程。

官方链接

仓库：https://github.com/ChinaCarlos/figma-agent-kit 文档：https://chinacarlos.github.io/figma-agent-kit/ npm：https://www.npmjs.com/package/figma-agent-mcp