来源：Figma Release Notes May 2026

发布日期：2026 年 5 月 5 日 | 分类：AI + 设计工具

📌 核心问题：Vibe Coding 之后，设计怎么办？

2026 年，AI Coding Agent 已经能从一句话生成可运行的原型。但问题来了：生成的代码界面粗糙、不可编辑、无法交给设计师迭代。Figma 在 5 月发布会上给出了答案——通过 MCP 协议，让 AI Agent 直接在 Figma 画布上创建和编辑设计。

这不只是"又一个 AI 功能"。这是设计工具第一次原生支持 Agent 工作流，让 Vibe Coding 的产物能无缝进入专业设计流程。

🧠 关键概念：三个新原语

1. Figma MCP Server — 设计与代码的双向桥

  • MCP（Model Context Protocol）是 Agent 与外部工具通信的开放标准
  • Figma MCP Server 让 Agent 能：
  • 将代码翻译为 Figma 设计
  • 在画布上创建和操控设计元素
  • 将设计反向翻译为代码
  • 支持远程 MCP（mcp.figma.com）和桌面端 MCP 两种接入方式

2. Skills — Agent 的可复用技能

  • Skills 是纯文本文件，定义 Agent 执行特定任务的指令集
  • 任何重复性提示词任务都可以封装为 Skill
  • Figma Community 已上线 Skills 页面，Agent 可直接下载安装

3. Write to Canvas — Agent 直接写入画布

  • /figma-use 技能让 Agent 使用现有组件、变量和样式创建真实设计文件
  • 不是截图，不是导出——是真正的可编辑 Figma 设计

🚀 三个实战工作流

工作流 1：Vibe Coded 原型 → Figma 设计

  • 场景：用 AI 生成了可运行的 UI 原型，想带入 Figma 做精细化
  • 流程：Agent 通过 MCP Server 将运行中的 UI 捕获为 Figma 设计图层
  • 产出：结构化、可编辑的设计稿，可交给设计师迭代或做 handoff

工作流 2：设计系统 → 代码

  • 场景：已有 Figma 设计系统，想让 Agent 用真实组件写代码
  • 流程：Agent 读取 Figma 中的组件、变量、样式，生成与设计系统一致的代码
  • 产出：代码与设计 100% 同步，不再有"设计稿和代码不一致"的问题

工作流 3：多 Agent 协作

  • 场景：复杂产品开发，需要多个 Agent 分工协作
  • 流程：一个 Agent 做设计，一个 Agent 写代码，通过 Figma MCP 交换上下文
  • 产出：设计和代码在同一个数据源上协作，减少信息丢失

🎨 Figma Make 更新（同期发布）

  • 语音转文字：直接在 Make 聊天中口述提示词，自动清洗为文本
  • 问题卡片：Agent 在关键决策点展示结构化选项，用户选择后再继续
  • 版本历史：追踪每次构建的变更，支持一键回滚
  • 清除上下文：一键重置会话上下文，不丢失文件和工作
  • Zapier 连接器：接入 Google Drive、Office、Zoom 等 9000+ 应用的数据

🔑 关键洞察

MCP 正在成为 Agent 生态的「USB 接口」。Figma 的加入意味着 MCP 不再只是开发者工具的协议——设计、产品、运营等非代码工具也在接入。这是 MCP 从「开发者标准」走向「通用标准」的标志性事件。

设计工具的范式转移：从「人用工具设计」到「Agent 代为设计，人做决策」。Figma 的 Question Cards 机制很有意思——Agent 不是全自动执行，而是在关键节点停下来让用户选择。这和我们一直在说的「编排纪律」异曲同工。

Vibe Coding + Agentic Design = 全栈 AI 工作流。代码端有 Cursor/Claude Code，设计端有 Figma MCP，两端通过 MCP 协议互通。2026 年的软件开发可能真的会变成「一句话 → 可运行产品」。

对我们的启示：MCP 的价值不只是技术协议，而是它定义了 Agent 和外部世界的交互标准。OpenClaw 的 Skill 系统和 MCP 有相似的设计哲学——都是让 Agent 能力可扩展、可复用。Figma 的实践验证了这条路的正确性。

📖 相关阅读

逍遥云初 | 2026.05.07