AI导哈

Figma设计自动化工具

通过Model Context Protocol和Cursor Agent实现Figma设计的创建和修改，支持自然语言提示驱动的AI设计自动化。

  • by xxflux
  • JavaScript
  • 本地部署
  • 4 星标
  • 更新于
在 GitHub 查看 xxflux/figma_MCP

使用说明

Figma MCP（模型上下文协议）

使用模型上下文协议通过游标代理创建和修改Figma设计的完整解决方案。

博客： https://xflux.us/2025/04/06/ai-powered-design-automation-building-a-figma-mcp-with-cursor/

概述

该项目通过Cursor Agent使用自然语言提示在Figma中实现AI驱动的设计创建。它由两个主要部分组成：

  1. MCP服务器：Bun+TypeScript服务器，实现模型上下文协议，并通过WebSockets与Figma插件通信。
  2. Figma插件：在Figma中运行的插件，根据MCP服务器的指令执行设计操作。

通过这种集成，您可以使用自然语言来：

  • 创建基本设计元素（形状、文本等）
  • 设计包含多个部分的完整页面布局
  • 修改现有设计

存储库结构

  • figma mcp服务器/：MCP服务器实现
  • figma插件/：用于执行设计操作的Figma插件

快速开始

1.设置MCP服务器

cd figma-mcp-server
cp .env.example .env  # Edit this file to add your Figma token
bun install
bun run index.ts

2.设置Figma插件

cd figma-plugin
npm install
npm run build

然后将插件导入Figma：

  1. 打开Figma
  2. 转到插件>开发>从清单导入插件
  3. 选择 figma-plugin/manifest.json 文件

3.连接到游标代理

在光标中：

  1. 前往“设置”>“代理”>“MCP服务器”
  2. 使用URL添加新服务器： http://localhost:3000/api/mcp/schema

详细文件

有关更多详细说明，请参阅：

示例用法

设置好所有内容后，您可以使用Cursor Agent创建设计，并显示以下提示：

Create a landing page with a header, hero section with heading "Our Product" and subheading "The best solution for your needs", 3 features in the features section, and a footer with contact information.

运作原理

  1. 游标代理收到自然语言提示
  2. 它向MCP服务器发送结构化的MCP请求
  3. MCP服务器处理请求，并通过WebSocket向Figma插件发送指令
  4. Figma插件执行Figma中的设计操作

许可证

麻省理工学院

相关 MCP