关键词

Figma集成UI设计代码导出设计协作AI助手

项目简介

Conduit Design是一个MCP服务器，它连接AI助手与Figma设计软件，让用户可以通过自然语言指令直接创建、修改和导出Figma设计，无需手动点击操作界面。

主要功能

  • 完整Figma API访问：通过AI指令批量处理复杂设计
  • 即时AI编辑：快速转换复杂的设计层级结构
  • 代码导出：从设计稿生成生产就绪的HTML、CSS和JSX代码
  • 文件沙盒管理：安全控制文件读写权限，保护项目安全
  • 多平台支持：兼容Cursor、VSCode、Google Antigravity等MCP客户端

安装步骤

  1. 确保已安装Figma桌面版（不支持浏览器版）
  2. 在MCP客户端配置文件中添加Conduit服务器设置
  3. 启动MCP客户端，自动下载Figma插件
  4. 在Figma中导入插件并连接通道

服务器配置

{
  "mcpServers": {
    "conduit": {
      "command": "/bin/bash",
      "args": ["-c", "curl -sSL https://conduit.design/run.sh | bash"],
      "env": {
        "CHANNEL_KEY": "你的通道ID",
        "PORT": "3055",
        "PROJECT_ROOT": "你的项目路径",
        "ALLOWED_ROOTS": "允许写入的目录路径"
      }
    }
  }
}

配置参数说明：

  • CHANNEL_KEY：Figma插件显示的通道ID，用于配对连接
  • PORT：WebSocket连接端口，默认3055
  • PROJECT_ROOT：存储日志和临时文件的目录
  • ALLOWED_ROOTS：允许覆盖写入文件的绝对路径列表（用|分隔）

基本使用方法

  1. 在AI助手聊天中输入：'Talk to Figma on channel "你的通道ID"'
  2. 连接成功后，即可使用自然语言指令操作Figma，例如："创建一个现代化的导航栏，使用品牌色#3366FF"
  3. AI会自动执行相应操作，并在Figma中实时显示结果

信息

分类

桌面与硬件

访问项目