AI导哈

Figma AI交互服务器

Figma MCP服务器是一个模型上下文协议服务器，使AI助手（如Claude或Gemini）能够与Figma交互，实现设计信息读取、元素创建、样式修改以及通过AI规划和执行复杂设计。

  • by Yogeshknaik
  • JavaScript
  • 本地部署
  • 更新于
在 GitHub 查看 Yogeshknaik/figma_MCP

使用说明

Figma MCP服务器

这是一个模型上下文协议（MCP）服务器，使AI助手（如Claude或Gemini）能够与Figma进行交互。它允许使用AI读取设计信息、创建元素、修改样式，甚至规划和执行复杂的设计。

特性

  • 信息检索：获取有关文档、选择和特定节点的详细信息。
  • 创造：创建框架、矩形、文本和组件实例。
  • 样式：修改填充颜色、笔划颜色和角半径。
  • 布局：控制自动布局属性（填充、间距、对齐）。
  • 原型设计：阅读反应并建立联系。
  • AI设计规划：从简单的文本描述中生成并执行全面的设计计划。
  • 命令行接口命令模式：与Gemini直接互动以完成设计任务。

设置

  1. 再进行:

    npm install

  2. 环境变量: 创建一个 .env 文件，并添加您的Gemini API密钥：

    GEMINI_API_KEY=your_api_key_here

  3. Figma插件: 确保您运行并连接了相应的Figma插件 ws://localhost:3055.

用法

MCP服务器模式

要作为MCP服务器运行（用于Claude Desktop或其他MCP客户端）：

node index.js

命令行接口命令模式

要在Gemini的交互式CLI模式下运行：

node index.js --cli

项目结构

  • src/：源代码
    • tools/：按类别分组的单个工具实现
    • server.js：主服务器设置（Express、WebSocket、MCP）
    • connection.js：WebSocket连接管理
    • ai.js：Gemini AI初始化
    • planning-state.js：设计计划的状态管理
    • prompts.js：AI策略的系统提示
  • index.js：入口点

关键工具

  • create_smart_design：最强大的工具。给它一个请求，比如“创建登录页面”，它就会计划和构建它。
  • get_selection：查看Figma中当前选择的内容。
  • read_my_design：获取所选节点结构的深度转储。

许可证

ISC

相关 MCP