conduit design

指挥.设计

](https://github.com/conduit-design/conduit_design/releases) ](https://github.com/conduit-design/conduit_design/releases) ](https://github.com/conduit-design/conduit_design/releases) 

将任何LLM驱动的代理变成一流的Figma合作者。不再点击菜单或手动调整。描述一下你想要什么，然后看着它发生。

观看演示→

Table of Contents (Click to expand)

• 特性
• 先决条件
• 快速开始

- 步骤1：配置MCP应用程序 - 步骤2：安装并导入Figma插件 - 步骤3：连接并创建

• 配置

- 基本配置 - 环境变量引用 - Windows配置 - 即时AI编辑集成

• 导出功能

- 导出功能 - 导出工作流

• 支持的应用程序
• 工具API

- 核心设计工具 - 实用工具

• 文件沙盒

- 安全最佳实践

• 隐私和数据使用
• 自动更新

- 更新过程

• 故障排除
• 局限性

特性

• 完整的Figma API访问 --通过简单提示批量转换复杂设计
• 即时AI编辑 --在几秒钟内转换复杂的设计层次结构
• 代码导出 --立即从设计生成生产就绪代码

先决条件

安装前，请确保：

• Figma桌面应用程序 （免费版或付费版，不支持浏览器版的Figma）
• MCP兼容应用程序 (光标, VSCode, 反重力，或另一个启用MCP的编辑器。)

快速开始

步骤1：配置MCP应用程序

添加到MCP配置文件(~/.cursor/mcp_settings.json 对于光标， .vscode/mcp.json 对于VSCode或其他平台特定位置）：

{
  "mcpServers": {
    "conduit": {
      "command": "/bin/bash",
      "args": ["-c", "curl -sSL https://conduit.design/run.sh | bash"]
    }
  }
}

步骤2：安装并导入Figma插件

1. 启动MCP应用程序 （例如，Cursor或VSCode）-这会自动下载并解压缩Conduit Figma插件到 ~/.conduit/figma-plugin/
2. 打开Figma桌面 → 导航至 Plugins → Development → Import plugin from manifest…
3. 选择清单文件: ~/.conduit/figma-plugin/manifest.json
4. 复制频道ID 显示在Conduit插件UI中（例如。， "purple-owl-27")

步骤3：连接并创建

在您的AI助手中（例如Cursor聊天）：

User: Talk to Figma on channel "purple-owl-27"
Agent: ✅ Connected to Figma on channel "purple-owl-27"

User: Create a modern navigation bar with our brand color #3366FF
Agent: ✅ Created navigation bar with brand color #3366FF

你可以走了！AI现在可以读取、修改和创建Figma设计。

配置

\[！警告\] 安全通知：导管需要文件系统访问权限。仅将受信任的目录添加到 ALLOWED_ROOTS。在授予写入权限之前，请务必备份您的项目。

基本配置

要自定义Conduit的行为，请将环境变量添加到MCP配置中：

{
  "mcpServers": {
    "conduit": {
      "command": "/bin/bash",
      "args": ["-c", "curl -sSL https://conduit.design/run.sh | bash"],
      "env": {
        "CHANNEL_KEY": "purple-owl-26",
        "PORT": "3055",
        "PROJECT_ROOT": "/Users/John/my-project",
        "ALLOWED_ROOTS": "/Users/John/Desktop/experiments|/Users/John/Downloads/project-xyz"
      }
    }
  }
}

环境变量引用

• CHANNEL_KEY：用于将MCP服务器与Figma插件配对的永久通道ID。如果你不提供，它将自动生成。您可以从Figma中的Conduit插件UI复制ID。（示例： "purple-owl-26")
• PORT：插件连接到的WebSocket端口。（默认值： 3055)
• PROJECT_ROOT：Conduit将存储其日志和临时文件的目录。许多MCP主机默认将其设置为您当前的工作区，但有些可能需要您显式设置。（示例： "/Users/John/my-project")
• ALLOWED_ROOTS：管道分隔(|)允许Conduit创建和覆盖文件的绝对目录路径列表。小心宽阔的道路，比如 ~/ 或 /（例如： "/Users/John/my-project|/Users/John/experiments")

\[！重要\] - PROJECT_ROOT 做 不 限制在哪里 ALLOWED_ROOTS 他们是独立的。 - 仅列出目录 ALLOWED_ROOTS 允许文件覆盖。所有其他位置都是只读或仅创建的。

Windows配置

在Windows上，使用Windows样式的路径和PowerShell语法。例子：

{
  "mcpServers": {
    "conduit": {
      "command": "powershell.exe",
      "args": [
        "-NoProfile",
        "-Command",
        "iwr https://conduit.design/run.ps1 -UseBasicParsing | iex"
      ],
      "env": {
        "PROJECT_ROOT": "C:\\Users\\John\\my-project",
        "ALLOWED_ROOTS": "C:\\Users\\John\\my-project|C:\\Users\\John\\Desktop\\experiments"
      }
    }
  }
}

\[！注意\] 使用双反睫毛(\\)Windows路径的JSON格式。在运行时，这些成为标准的Windows路径，如 C:\Users\John\....

即时AI编辑集成（可选）

若要启用AI驱动的即时编辑，请添加您的提供商API密钥和模型首选项：

{
  "mcpServers": {
    "conduit": {
      "command": "/bin/bash",
      "args": ["-c", "curl -sSL https://conduit.design/run.sh | bash"],
      "env": {
        "CHANNEL_KEY": "purple-owl-26",
        "PORT": "3055",
        "PROJECT_ROOT": "/Users/John/my-project",
        "ALLOWED_ROOTS": "/Users/John/my-project",
        "AI_DEFAULT_PROVIDER": "openai",
        "AI_DEFAULT_MODEL": "gpt-5-1",
        "OPENAI_API_KEY": "sk-proj-...",
        "AI_TEMPERATURE": "0.7",
        "AI_MAX_TOKENS": "4096"
      }
    }
  }
}

AI提供商选项

AI特定环境变量

导出功能

Conduit可以使用以下工具从Figma框架导出生产就绪的网站 {page-breakpoint-theme} 命名约定：

导出功能

• 响应式设计 --自动移动、平板电脑和台式机断点
• 支持主题 --暗模式和亮模式支持
• 资产导出 --优化SVG和图像导出
• CSS令牌 --自动提取设计系统变量
• 完整文件 --HTML、CSS和所有资产捆绑在一起
• 谷歌字体 --自动导入和优化
• 多页 --导出包含多个页面的整个网站
• 超链接 --导航和交互支持

导出工作流

1. 使用以下模式命名您的Figma帧： {page-breakpoint-theme}

- 例子： home-desktop-light, about-mobile-dark

1. 使用 export 通过您的AI助手使用该工具
2. Conduit生成包含所有资源的完整HTML/CSS/JSX

支持的应用程序

其他MCP兼容应用程序也可以使用Conduit。以下是经过测试的应用程序列表：

工具API

Conduit将以下工具暴露给LLM代理。大多数工具支持单次和批处理操作。

核心设计工具

实用工具

文件沙盒：

“工作目录”是您的AI代理应用程序（Cursor/VCode）作为允许的根进行广告宣传的内容。请避免在配置中添加低级目录，AI在极少数情况下可能会无意中覆盖文件。确保经常备份项目文件。

1. 读取访问 --Conduit可以从整个系统读取文件。
2. 软写访问 --Conduit可以在系统上的任何位置创建新文件和文件夹，但 无法覆盖 现有文件。
3. 安全写入访问 --导管可以覆盖现有文件 仅 在下列目录中 ALLOWED_ROOTS.

安全最佳实践

\[！警告\] 仅将受信任的目录添加到 ALLOWED_ROOTS.避免走宽阔的路，比如 ~/ 或 / 授予对敏感系统或用户文件的写访问权限。

• 限制 ALLOWED_ROOTS 以投影特定目录（例如。， /Users/John/my-project).
• 备份您的项目 在授予写入权限之前定期进行。
• 查看目录 在 ALLOWED_ROOTS 定期确保它们仍然合适。

隐私和数据使用

只有您积极处理的数据才会暴露在外部服务中。请参阅下文了解暴露的内容。

1. Conduit是一个完全本地的应用程序，没有分析功能，也不调用任何外部服务或服务器。
2. Conduit使用（光标/VCode）作为您的日常驱动程序。如果你信任他们，你就可以走了。他们的EULA适用。
3. 如果您使用“即时编辑”功能，Conduit将连接到谷歌gemini、Anthropic、openAI API。他们的EULA适用。

自动更新

Conduit会自动更新 MCP服务器 和那个 Figma插件 当您重新启动MCP应用程序或重新加载MCP配置时。

更新过程

1. MCP重启时：Conduit检查服务器二进制文件和Figma插件的更新。
2. 自动下载：如果更新可用，则会自动下载并应用。
3. 插件同步：Figma插件已更新 ~/.conduit/figma-plugin/ 无需手动重新导入。

故障排除

Figma插件未连接

问题：Figma插件显示“已断开连接”或无法与MCP服务器配对。

解决方案:

1. 验证 CHANNEL_KEY MCP配置中的通道ID与Figma插件UI中显示的通道ID匹配。（此步骤是可选的，您也可以在加入时向AI提供channel_key）
2. 确保 PORT 未被防火墙阻止或已在使用中。
3. 重新启动MCP应用程序和Figma桌面应用程序。

文件写入错误

问题：导管无法写入或覆盖文件。

解决方案:

1. 检查目标目录是否列在 ALLOWED_ROOTS.
2. 验证路径使用绝对路径（例如。， /Users/John/my-project，不 ~/my-project).
3. 确保您对目标目录具有文件系统权限。

插件导入问题

问题：无法通过导入Figma插件 Plugins → Development → Import plugin from manifest….

解决方案:

1. 确保您使用的是Figma Desktop --插件导入在浏览器版本中不可用。
2. 验证清单文件是否存在于 ~/.conduit/figma-plugin/manifest.json.
3. 如果文件丢失，请重新启动MCP应用程序以触发自动下载。

AI即时编辑不起作用

问题：人工智能驱动的即时编辑失败或不可用。

解决方案:

1. 验证您是否已添加适当的API密钥（例如。， OPENAI_API_KEY, ANTHROPIC_API_KEY, GEMINI_API_KEY)您的MCP配置。
2. 检查 AI_DEFAULT_PROVIDER 和 AI_DEFAULT_MODEL 设置正确。
3. 请确保您的API密钥有效并且具有足够的配额。

局限性

\[！注意\] 提前访问通知：导管正在积极开发中。正在积极解决以下局限性：

• 即时AI编辑：批处理模式尚不可用（解决方法：直接目标父节点）。
• 节点类型覆盖范围：即时AI编辑支持约95%的节点类型；一些复杂的类型需要逐段模式。
• 多级样式：即时AI编辑尚不支持多级样式；在这些情况下使用逐段模式。
• 导出格式：目前仅限于HTML、CSS和JSX。Tailwind、Vue和其他框架将在未来的版本中发布。
• 批量操作：在批量模式下链接混合工具调用是实验性的；目前只有部分工具支持此功能。

______________________________________________________________________

© 2025 指挥.设计 -保留所有权利。