Figma 中代理的技能是什么？

技能是 Markdown 文件，用于定义代理在 Figma 画布上的行为方式。它们编码您团队的约定、顺序和意图——概述要采取的步骤、要使用的组件以及如何处理边缘情况。技能确保代理具有生成持久、与品牌一致的设计所需的专业知识和上下文。任何人都可以编写技能，而无需构建插件或编写代码。

Figma for Agents 可以免费使用吗？

在 Beta 测试期间，Figma for Agents 目前可以免费使用。但是，Figma 已经宣布，这最终将成为一项基于使用量的付费功能。建议在过渡到付费模式之前先试用一下。

哪些 AI 代理和工具与 Figma 的 MCP 服务器兼容？

Figma 的 MCP 服务器目前与多个 MCP 客户端配合使用，包括 Augment、Claude Code、Codex、Copilot CLI、VS Code 中的 Copilot、Cursor、Factory、Firebender 和 Warp。这些代理可以使用 use_figma 工具直接在 Figma 画布上操作。

use_figma 和 generate_figma_design 工具如何协同工作？

这两种工具是互补的。generate_figma_design 工具将来自实时应用程序和网站的 HTML 转换为可编辑的 Figma 图层，当设计与代码不同步时，将最新的 UI 带入 Figma。从那里，use_figma 工具可以使用您的组件和变量编辑这些设计或创建新资产，确保一切都与您的设计系统保持一致。

Figma 代理有哪些示例技能可用？

Figma 已经推出了九个示例技能，包括：/figma-generate-library（从代码库创建新组件）、/figma-generate-design（使用现有组件创建设计）、/create-voice（生成屏幕阅读器规范）、/cc-figma-component（从 JSON 生成组件）、/apply-design-system（将设计连接到系统组件）、/rad-spacing（应用分层间距）、/edit-figma-design（编排工作流程）、/sync-figma-token（同步设计令牌）和 /multi-agent（运行并行工作流程）。

为什么 Figma 向 AI 代理开放画布很重要？

将画布开放给 AI 代理使他们能够访问您的设计系统和文件，从而使画布成为代码和设计相遇的共享基础设施。这允许代理生成与您的设计系统正确对齐的组件，正确应用变量，并在您已建立的约定中工作。它将画布从可交付成果转变为代理和设计师协同工作的实时工件，帮助团队更快地行动，同时保持设计质量和品牌一致性。

技能如何使代理输出更具可预测性？

AI 模型本质上是不确定的，这意味着相同的提示可能会产生不同的结果。技能通过编码要遵循的特定步骤、指南和代码，使代理行为更具可预测性。您的设计约定将成为代理在工作时遵循的规则——通过组件、变量和您已经定义的结构应用。技能还支持自我修复循环，代理可以截取生成的屏幕的屏幕截图，并迭代不符合预期输出的内容。

Figma for Agents

WebsiteFreemiumAI Code Assistant AI Graphic Design

Figma for Agents 是一种 AI 集成，使编码代理能够使用 use_figma MCP 工具和可自定义的基于 markdown 的技能，直接在 Figma 画布上创建、编辑和更新设计，使用您现有的设计系统。

访问网站

推广此工具

https://www.figma.com/blog/the-figma-canvas-is-now-open-to-agents?ref=producthunt&utm_source=aipure

概述
分析
视频
替代方案

产品信息

更新于：2026年04月16日

Figma for Agents 月度流量趋势

Figma for Agents 上个月收到了 89.4m 次访问，显示出 0.7% 的轻微增长。根据我们的分析，这一趋势与人工智能工具领域的典型市场动态相符。

查看历史流量

什么是 Figma for Agents

Figma for Agents 于 2026 年 3 月 24 日发布，代表了 AI 代理与设计工具交互方式的根本转变。通过 Figma 的模型上下文协议 (MCP) 服务器，像 Claude Code、Codex、Cursor 等 AI 编码代理现在可以直接写入 Figma 画布——不仅可以读取设计文件，还可以实际创建组件、应用变量、构建变体，并使用团队现有的设计系统构建整个屏幕。这种双向工作流程弥合了代码和设计之间的差距，允许代理访问真实的 Figma 原语，包括组件、自动布局、变量和设计令牌。该功能目前在测试期间对具有完整和开发席位的付费计划免费提供，未来计划采用基于使用量的定价。

Figma for Agents 的主要功能

Figma for Agents 是一项于 2026 年 3 月 24 日宣布的突破性功能，它通过 use_figma MCP 工具向 AI 代理开放 Figma 画布。它使 Claude Code、Codex、Cursor 等 AI 编码代理能够直接写入 Figma 文件，使用您现有的设计系统创建和修改原生设计元素，如框架、组件、变体、变量和自动布局。该功能辅以 Skills——markdown 指令文件，用于编码团队约定、设计决策和工作流程——确保代理生成与品牌一致、与设计系统一致的输出。目前在 beta 期间免费，未来计划采用基于使用量的定价，这种双向工作流程桥接了代码和画布，使团队能够在开发和设计之间流畅移动，同时保持共享的真实来源。

通过 use_figma 工具直接访问画布写入: AI 代理可以通过插件 API 创建和更新真实的 Figma 设计结构，包括框架、组件、变体、变量和自动布局，而不是生成静态屏幕截图或导出。这使代理能够使用原生 Figma 基元并构建可用于生产的设计。

代理指令技能: Markdown 文件，用于教导代理您的团队如何工作，定义要使用的组件、排序规则、约定和边缘情况处理。技能使设计系统具有机器可读性和可操作性，编码品味、决策和标准，从而指导代理在画布上的行为。

设计系统集成: 代理读取并利用您现有的 Figma 库、组件、命名约定、间距比例和令牌来生成与您已建立的设计系统对齐的设计。这确保输出使用您实际的按钮、卡片和变量，而不是通用元素。

双向代码-画布工作流程: 与现有的 generate_figma_design 工具一起工作，以实现代码和画布之间的流畅移动。代理可以将实时 HTML 转换为可编辑的 Figma 图层，然后使用您的设计系统修改或创建新设计，从而创建一个连续的工作流程。

自我修复迭代循环: 代理可以拍摄生成的设计的屏幕截图并进行迭代，以优化与规范不匹配的输出。由于它们使用真实的结构而不是静态视觉效果，因此调整会与实际的设计系统组件和变量进行交互。

多代理 MCP 客户端支持: 与包括 Claude Code、Codex、Cursor、Copilot CLI、Augment、Factory、Firebender 和 Warp 在内的多个 AI 编码代理兼容，从而在工具选择方面提供灵活性，同时保持对 Figma 设计上下文的一致访问。

Figma for Agents 的使用场景

设计系统组件生成: 团队可以使用代理从代码库生成整个组件库，创建多达 72 个遵循现有设计系统约定的组件变体。这加速了构建和维护全面设计系统的过程。

使用现有组件快速进行屏幕设计: 设计师可以提示代理使用其已建立的组件库和变量来创建完整的屏幕或流程，从而无需手动重建布局，同时确保与品牌指南和设计标准保持一致。

代码到设计的同步: 开发团队可以通过使用代理将实时应用程序 HTML 转换为可编辑的 Figma 图层，然后使用设计系统优化这些设计，从而使 Figma 文件与生产代码保持同步，从而维护单一的真实来源。

辅助功能规范生成: 团队可以使用 /create-voice 等专业技能从 UI 规范自动生成屏幕阅读器规范（VoiceOver、TalkBack、ARIA），从而确保从一开始就将辅助功能考虑因素纳入设计过程中。

设计令牌同步: 组织可以通过使用 /sync-figma-token 等技能自动同步其代码库和 Figma 变量之间的设计令牌，并进行漂移检测，从而减少手动协调开销，从而保持代码和设计之间的一致性。

产品迭代和优化: 产品团队可以使用代理通过选择现有屏幕并指示代理添加或修改元素来快速迭代设计，同时保持设计系统的一致性，从而加速产品开发周期。

优点

创建具有真实组件和变量的本机 Figma 结构，而不是静态模型，从而确保设计可用于生产且可编辑

利用现有设计系统作为真实来源，生成与品牌对齐的输出，该输出遵循已建立的约定和标准

在 beta 期间免费，允许团队在付费定价开始之前试验并将该功能集成到工作流程中

实现双向代码-画布工作流程，通过共享上下文弥合设计和开发团队之间的差距

缺点

高令牌消耗（据报告，单个按钮消耗 19k 个令牌），使得复杂的设计生成可能成本高昂且不适用于大规模使用

需要技术设置和熟悉代码工具，这对于仅在 Figma 中工作而没有开发经验的设计师来说可能具有挑战性

输出质量和可靠性问题仍然存在，与手动工作相比，生成多个设计的成本高昂且不可靠

最终将成为在现有按席位定价之上的基于使用量的付费功能，可能会为代理使用率高的团队带来成本摩擦

如何使用 Figma for Agents

1. 验证您的 Figma 计划资格: 确保您在付费 Figma 计划中拥有完整或开发席位。写入画布功能目前在测试期间是免费的，但需要付费计划。免费 Figma 用户每月限制大约 6 个 MCP 工具调用。

2. 选择并设置 MCP 客户端: 选择兼容的 MCP 客户端，例如 Claude Code、Codex、Cursor、Copilot CLI、Augment、Factory、Firebender 或 Warp。在您的系统上安装并配置您选择的客户端。

3. 连接 Figma MCP 服务器: 有两种连接方法：(1) 从 Figma 社区安装 Figma MCP 插件，该插件会自动配置 MCP 服务器设置，或者 (2) 手动将 Figma MCP 服务器 URL 添加到您的 MCP 客户端配置。对于 Claude Code，通过运行 /mcp 命令验证连接 - 您应该看到 Figma 列为活动服务器。

4. 准备您的 Figma 文件和设计系统: 打开或创建一个 Figma 文件，其中包含您的设计系统，包括组件、变量、令牌和命名约定。确保您的设计系统结构良好且组织良好，因为代理将使用它作为真相来源。

5. 为您的工作流程选择或创建技能: 从现有的社区技能中选择，例如 /figma-generate-design、/apply-design-system、/figma-generate-library，或创建自定义技能。技能是 markdown 文件，用于教导代理如何在您的画布上操作，定义要使用的组件、排序以及要遵循的约定。

6. 使用 use_figma 工具写入画布: 在您的 MCP 客户端中，使用 use_figma 工具发出设计指令。代理将在 Figma 文件的上下文中通过插件 API 执行 JavaScript，创建真实的 Figma 结构，如框架、组件、变体、变量和自动布局。

7. 向代理提供上下文和说明: 打开一个 Figma 文件并选择一个您想要使用的框架或组件。向代理提供关于要创建或修改的内容的明确提示。代理将使用 get_metadata 和 search_design_system 工具来了解可用的组件和令牌，然后使用您现有的设计系统生成设计。

8. 使用 generate_figma_design 进行代码到画布的转换（可选）: 如果您需要将现有 UI 从实时应用程序或网站引入 Figma，请使用 generate_figma_design 工具。这将捕获 HTML 并将其转换为可编辑的 Figma 图层，然后可以使用 use_figma 进一步修改。

9. 审查和迭代代理输出: 代理可以截取生成的设计的屏幕截图，并通过自修复循环进行迭代以优化输出。审查生成的组件、框架和布局。根据需要进行手动调整，因为代理可能会在细微区域做出意外的设计选择。

10. 维护代码和画布之间的双向工作流程: 使用 Figma MCP 服务器在代码和画布之间流畅地移动。代理可以从 Figma 文件中读取以生成代码，并写回 Figma 以更新设计，从而使您的设计系统在整个开发过程中保持为单一真相来源。

Figma for Agents 常见问题

use_figma 工具是 Figma 的 MCP 服务器的一部分，允许像 Claude Code、Codex 和其他 MCP 客户端这样的 AI 代理直接写入 Figma 文件。它使代理能够创建和更新 Figma 文件和组件，应用变量，并使用您自己的设计系统构建设计。此工具与现有的 generate_figma_design 工具协同工作，后者将来自实时应用程序和网站的 HTML 转换为可编辑的 Figma 图层。