面向设计师的 MCP：将 Figma、令牌和代码连接到 Claude 和 Cursor

简而言之，MCP 是什么

MCP 官方文档将其描述为一种开源标准，用于将 AI 应用程序连接到外部系统，例如文件、数据库和工具。它自己的例子之一是 Claude Code 从 Figma 设计生成整个 Web 应用程序。对于设计师来说，重要的是：人工智能不再需要猜测你的设计是什么样子。它可以直接询问设计工具。

当今使用 MCP 服务器的设计工具

截至 2026 年 10 月：

• Figma：MCP 服务器，为代理提供代码生成的设计上下文（变量、组件、布局），并可以将本机内容写回画布。 Figma 将其列入入门版和付费版；画布写作在测试期间是免费的。
• Penpot：免费、开放的 MCP 服务器，可与任何 MCP 客户端配合使用，包括 Claude、Cursor、VS Code 和 OpenAI Codex，并且可以自托管。
• ExodeUI（我们制作的）：MCP 服务器，可让 AI 编码工具创建和编辑具有状态和弹簧物理特性的交互式动画。
• 设计代币：如果您的代币以 JSON 的形式存在于存储库中，则 AI 编码工具已经可以将它们作为文件读取；仅存储在工具内的令牌才需要专用服务器。

设计师如何实际使用它

最常见的工作流程是实用的而不是神奇的。开发人员选择一个框架，并要求人工智能使用现有的组件库来实现它。设计师要求人工智能检查编码屏幕是否与设计匹配并列出差异。团队要求人工智能更新代码库中组件的令牌。设计师越来越多地使用人工智能直接在画布上绘制变体，然后手动完善它们。

连接服务器

Claude Code通过claude mcp add命令或项目中的.mcp.json文件添加服务器，支持远程HTTP服务器和本地HTTP服务器。 Cursor 在其设置中管理 MCP 服务器，并支持本地（stdio）和远程服务器。远程服务器通常要求您使用 OAuth 登录一次。每个供应商都会记录其服务器的确切命令或 URL。

需要注意什么

MCP 为 AI 工具提供了真正的访问权限，因此请像对待任何集成一样对待它：

• 权限：可以写入画布或存储库的代理也可能会出错。使用版本历史记录并查看更改。
• 隐私：检查设计数据的去向以及您的计划是否允许。
• 成本：一些写入功能在测试版中是免费的，并计划变得基于使用情况。
• 质量：只有当系统结构良好、具有命名组件和令牌时，人工智能输出才会遵循您的设计系统。