Local Figma Agent MCP – 本地优先 Figma-MCP 桥接，让 Coding Agent 读设计稿生成代码 Skill 技能

技能简介

Local Figma Agent MCP 是由 Lancasteerr 开发的本地优先 Figma-MCP 桥接工具，让 Codex、Cursor、GitHub Copilot、Claude Code 等 Coding Agent 可以安全读取 Figma 当前打开的设计文件，并基于结构化设计事实、素材和新鲜度校验在前端工程中生成代码，同时支持在 Figma 中创建隔离的 Proposal 副本完成可审查的设计修改。整个桥接只跑在 127.0.0.1，不走云端，不上传设计文件，不读取调用方本地文件，遵循 MIT 协议开源，适合作为 Vibe Coding 阶段的设计-代码桥梁。

核心能力

• 设计稿生成代码：向 Agent 提供有界设计语义、节点素材和新鲜度证据，让 Agent 按目标工程规范把单组件或整页实现为 React/Vue/其他前端代码，而不是把整页 JSON 灌入上下文。
• 本地只读访问：读取当前文件、选区、节点树、样式、变量、字体、Inspect CSS 与 Image Paint 事实，所有读取都经过有界指纹校验。
• 会话化语义快照：把有界节点范围持久化为 outline/facts JSONL 到 .figma_bridge_agent/sessions//scopes/，避免一次性把整页设计事实塞进 Agent 对话上下文。
• 素材安全交付：从 Figma 提取原始图片或渲染节点到工程相对路径，支持 RAW 与 RENDERED 双模式，并校验来源指纹防止过期素材覆盖。
• 隔离 Proposal 编辑：修改现有设计时自动复制目标和必要布局上下文到 Page 级 Proposal，所有公开写工具只会改动 Proposal 内的节点，绝不覆盖源稿。
• DesignPlan 声明式生成：验证完整 DesignPlan 后用五分钟内单次有效的 ID 原子创建 Proposal，适合从零生成登录卡片等复杂界面。
• 多客户端 Bridge 复用：多个本地 MCP Adapter（Codex / Claude / Cursor 等）可共用同一个 Bridge Daemon，自动按 24 小时会话目录管理素材暂存。

安装配置

• Agent Plugin 路线（推荐）：适用于 Codex、Cursor、GitHub Copilot；运行 codex plugin marketplace add Lancasteerr/figma_bridge_agent --ref v，在 Codex 里执行 /plugins 安装 figma-local-agent，自动配置 MCP Server 与设计稿实现 Skill。
• 直接 MCP Server 路线：适用于 Claude Code、Claude Desktop 等本地 stdio 主机；执行 npx -y figma-local-agent-mcp@ pair 完成六位短码配对后，再 claude mcp add --scope user --transport stdio figma-local-agent -- npx.cmd -y figma-local-agent-mcp@ serve。
• Figma 插件导入：从 GitHub Release 下载 figma-agent-bridge-plugin-v.zip 并解压，在 Figma Desktop → Plugins → Development → Import plugin from manifest 中选择 manifest.json，保持插件窗口打开即可使用；Windows 系统 GUI 客户端请用 npx.cmd 而非 npx。

使用步骤

1. 在前端工程目录启动目标 Coding Agent 会话，并在 Figma Desktop 中打开目标 Design 文件与 Local Figma Agent Bridge 插件。
2. 让 Agent 调用 figma_status 检查 Bridge 协议、当前 Figma 文件、页面、选区和素材导出根状态，确认版本一致。
3. 单节点或组件直接调用 figma_export_semantic_scope 生成 IMPLEMENTATION 语义快照；大型页面先读 OUTLINE 摘要，再逐块激活有界实现范围，避免上下文爆炸。
4. 让 Agent 检查仓库现有组件、图标和素材，必要时调用 figma_export_asset 安全导出图片或 SVG，按项目框架与约定实现代码。
5. 完成前调用 figma_check_semantic_scope 校验设计来源仍为 FRESH，并用最新 figma_render_node 渲染结果与实现截图核对视觉差异，Proposal 修改则在画布中并排审查。

适用场景

• Vibe Coding 设计稿落地：把 Figma 设计稿直接转成 React/Vue 组件，工程师无需手敲像素级还原。
• 跨工具前端协作：用 Codex 或 Cursor 做设计稿生成，用 Claude Code 做设计评审与 Proposal 修改，共用同一个 Bridge。
• 批量组件资产化：把 Figma 组件库安全转成前端组件，Team Library 不被读取，避免误改主组件。
• 设计提案快速验证：从零生成登录卡片、空状态等复杂界面，先在 Proposal 副本里验证再合并回源稿。

适用人群

• 在 Vibe Coding 工作流中需要把设计稿直接转代码的全栈工程师与独立开发者
• 使用 Codex、Cursor、GitHub Copilot、Claude Code 等本地 Coding Agent 的产品工程师
• 需要在隔离 Proposal 内安全试错、不污染源稿的设计系统维护者
• 注重本地优先、零云端上传、零遥测隐私设计的团队

工作原理

当前 Figma Design 文件 → Figma Plugin API → 插件 UI 与主进程 → 每设备认证的 ws://127.0.0.1:3900/ → Local Bridge Daemon → 已认证的 ws://127.0.0.1:3900/mcp → MCP Adapter → 独立 stdio 会话 → Coding Agent。首次配对由用户人工核对终端与插件显示的六位短码；之后每个插件设备用独立凭据和 proof 自动认证。读取走有界 outline/facts 摘要，写入只允许新增或修改带 Bridge 标记的 Proposal 根内部节点，并由完整树指纹保护并发编辑。Bridge 不内置特定框架的代码生成器，所有组件拆分、代码映射和框架写法都由所连接的 Coding Agent 按用户要求和目标仓库决定。

官方链接

• GitHub 仓库：https://github.com/Lancasteerr/figma_bridge_agent
• 中文文档首页：https://github.com/Lancasteerr/figma_bridge_agent/blob/master/docs/zh-CN/README.md
• MCP 工具参考：https://github.com/Lancasteerr/figma_bridge_agent/blob/master/docs/zh-CN/tools.md
• 掘金介绍文章：https://juejin.cn/post/7693887055508275234