#OpenPencil #NixAPI #AI设计 #开源Figma替代 #大模型接入 #MCP

OpenPencil 接入 NixAPI：开源设计编辑器的 AI 模型配置指南

OpenPencil 是开源的 AI 原生设计编辑器，支持 Figma 文件读写和内置 AI 助手。本文介绍如何在 OpenPencil 中配置 NixAPI 作为 AI 模型提供商，实现低成本调用 GPT、Claude、Gemini 等主流模型。

NixAPI Team 2026年7月23日 约15 分钟阅读
OpenPencil 接入 NixAPI 配置指南封面

OpenPencil 是一个开源的 AI 原生设计编辑器，可以直接读写 .fig 文件，内置 AI 助手支持通过自然语言创建和修改设计。它提供了桌面应用、Web 应用、CLI 工具和 Vue SDK 等多种使用方式，并且支持 MCP（Model Context Protocol）协议，可以与 Claude Code、Cursor、Windsurf 等 AI 编程工具集成。

本文介绍如何在 OpenPencil 中配置 NixAPI 作为 AI 模型提供商，让你能够以更低的成本使用 GPT-5、Claude、Gemini 等主流模型来辅助设计工作。

准备工作

开始前需要准备：

  1. 安装 OpenPencil（桌面应用或 Web 应用）
  2. 一个 NixAPI API Key

如果还没有 NixAPI Key，先访问 NixAPI 首页 注册账号，然后进入 NixAPI 控制台 创建 API Key。

NixAPI 当前有限时充值优惠：￥0.80 = $1.00，适合需要频繁调用 AI 模型的设计工作流。

安装 OpenPencil

桌面应用（推荐）

macOS（Homebrew）：

brew install openpencil

或下载安装包：

访问 GitHub Releases 下载对应平台的安装包。桌面应用仅约 7MB，基于 Tauri v2 构建。

Web 应用（无需安装）：

直接访问 app.openpencil.dev 即可使用，支持 PWA 安装。

CLI 工具

npm install -g @open-pencil/cli
# 或
bun add -g @open-pencil/cli

CLI 工具支持在无图形界面环境下处理设计文件，适合 CI/CD 流水线或自动化脚本。

配置 NixAPI 作为 AI 模型提供商

OpenPencil 的 AI 助手支持多种模型提供商，包括 OpenRouter、Anthropic、OpenAI、Google AI、Z.ai、MiniMax 以及 OpenAI-compatible 自定义端点。NixAPI 提供 OpenAI 兼容接口，因此可以通过 “OpenAI-compatible” 方式接入。

步骤一：打开 AI Chat 面板

在 OpenPencil 桌面应用或 Web 应用中：

  1. 按 ⌘J（macOS）或 Ctrl+J（Windows/Linux）打开 AI 助手面板
  2. 点击面板右上角的 设置图标（齿轮图标）
  3. 在 Provider 列表中选择 “OpenAI-compatible”

步骤二：填写 NixAPI 连接信息

在 OpenAI-compatible 配置表单中填写：

字段值
Base URLhttps://nixapi.com/v1
API Key你的 NixAPI API Key（格式：nix-xxxxxxxxxxxx）
API TypeCompletions（默认）或 Responses

注意：Base URL 必须包含 /v1 路径，否则请求会失败。

步骤三：选择模型

配置完成后，在模型下拉列表中输入或选择你想要使用的模型 ID。NixAPI 支持的主流模型包括：

模型Model ID适用场景
GPT-5.6 Solgpt-5.6最强推理，复杂设计任务
GPT-5.5gpt-5.5旗舰模型，通用设计辅助
Claude Opus 4.8claude-opus-4-8代码生成、设计转代码
Claude Sonnet 4.7claude-sonnet-4-7平衡性能与成本
Gemini 3.5 Progemini-3.5-pro长上下文，大文件分析
DeepSeek V4deepseek-v4高性价比中文支持
MiniMax M3MiniMax-M3快速响应，日常任务

实际可用模型请以 NixAPI 支持的模型列表页 为准。

步骤四：测试连接

配置完成后，在 AI Chat 面板中输入一个简单指令测试：

创建一个登录页面，包含邮箱输入框、密码输入框和登录按钮。

如果 OpenPencil 能够正常生成设计元素，说明 NixAPI 配置成功。

MCP Server 配置（与 Claude Code/Cursor 集成）

OpenPencil 提供了 MCP Server，允许 AI 编程工具直接操作设计文件。你可以通过 NixAPI 为这些工具提供模型能力，同时让它们通过 MCP 控制 OpenPencil。

安装 MCP Server

npm install -g @open-pencil/mcp

Stdio 模式配置（Claude Code / Cursor / Windsurf）

claude mcp add --scope user open-pencil -- openpencil-mcp

或在配置文件中手动添加：

{
  "mcpServers": {
    "open-pencil": {
      "command": "openpencil-mcp"
    }
  }
}

HTTP 模式配置（脚本 / CI）

openpencil-mcp-http  # 启动 HTTP 服务，默认 http://localhost:3100/mcp

文件访问控制

设置环境变量限制 MCP 的文件操作范围：

export OPENPENCIL_MCP_ROOT=/path/to/your/design/files

CLI 工具使用 NixAPI

OpenPencil CLI 支持通过 --provider 和 --model 参数指定 AI 模型，但目前 CLI 的 AI 功能主要通过 MCP Server 或桌面应用的 RPC 连接实现。以下是常用 CLI 命令：

文件检查与导出

# 查看文件结构
openpencil tree design.fig

# 查找特定类型的节点
openpencil find design.pen --type TEXT

# 导出为 PNG
openpencil export design.fig

# 导出为 Tailwind JSX
openpencil export design.fig -f jsx --style tailwind

# HTML/CSS 导入为可编辑设计文件
openpencil import page.html --css styles.css -o page.fig

设计分析

# 颜色分析
openpencil analyze colors design.fig

# 字体分析
openpencil analyze typography design.fig

# 间距一致性检查
openpencil analyze spacing design.fig

# 设计规范检查
openpencil lint design.fig

与桌面应用联动

当桌面应用运行时，CLI 可以通过 RPC 连接实时操作：

# 检查当前打开的文档
openpencil tree

# 截图当前画布
openpencil export -f png

# 执行 Figma Plugin API 脚本
openpencil eval -c "figma.currentPage.selection.forEach(n => n.opacity = 0.5)" -w

AI 助手功能详解

配置好 NixAPI 后，OpenPencil 的 AI 助手可以使用 90+ 工具完成以下任务：

创建与修改

  • 创建画框、形状、文本、组件
  • 设置填充、描边、效果、圆角
  • 管理自动布局（Auto Layout）和 CSS Grid
  • 处理组件和变体（Variants）

查询与检查

  • 通过 XPath 选择器查找节点
  • 获取 JSX 表示和结构差异
  • 检测设计问题和可访问性问题
  • 分析颜色、字体、间距一致性

导出与转换

  • 导出为 PNG、SVG、JSX（Tailwind）
  • 设计转代码（Design-to-Code）
  • HTML/CSS 导入为可编辑图层

视觉验证

AI 助手可以通过 export_image 工具截图并验证设计结果，自动发现布局问题、缺失元素和颜色不匹配。

常见问题

1. 配置后 AI 助手没有响应

  • 检查 Base URL 是否为 https://nixapi.com/v1
  • 确认 API Key 完整且没有前后空格
  • 查看 NixAPI 控制台余额是否充足

2. 模型列表中看不到想要的模型

OpenPencil 的 OpenAI-compatible 模式支持手动输入模型 ID。直接在下拉框中输入 NixAPI 支持的模型 ID 即可，不需要从预设列表中选择。

3. 如何控制 API 调用成本？

  • 日常设计任务使用性价比高的模型（如 deepseek-v4 或 MiniMax-M3）
  • 复杂任务再切换到旗舰模型（如 gpt-5.6 或 claude-opus-4-8）
  • 参考 NixAPI 模型价格页 选择合适的模型

4. MCP Server 连接失败

  • 确认 @open-pencil/mcp 已全局安装
  • 检查 Claude Code / Cursor 的 MCP 配置是否正确
  • 查看 OpenPencil 桌面应用是否正在运行（RPC 模式需要）

5. 与 Figma 的文件兼容性

OpenPencil 使用 Kiwi 二进制编解码器原生读写 .fig 文件，支持往返保真（round-trip fidelity）。但部分 Figma 高级功能可能存在兼容差距，详见 OpenPencil 路线图。

NixAPI 相关入口

下一步

  • 尝试用自然语言描述创建完整的设计页面
  • 使用 MCP Server 让 Claude Code 或 Cursor 直接修改设计文件
  • 通过 CLI 工具将设计导出为 Tailwind JSX，加速设计到代码的转换
  • 探索 Vue SDK，将 OpenPencil 嵌入到你的产品中

关于 OpenPencil：OpenPencil 是一个开源（MIT 许可证）的 AI 原生设计编辑器，支持 Figma 文件读写、内置 AI 助手、实时协作和完全可编程的工作流。项目地址：github.com/open-pencil/open-pencil

关于 NixAPI：NixAPI 提供统一的大模型 API 接口，帮助开发者低成本接入 GPT、Claude、Gemini 等主流模型。

立即体验 NixAPI

稳定可靠的大语言模型 API 中转，支持 OpenAI、Claude、Gemini、DeepSeek、Qwen、Grok，充值 ￥0.8 = $1

免费注册
返回所有文章