Claude Code 接入 FigCraft 与 OpenPencil MCP 完整教程

一、功能介绍

通过 MCP（Model Context Protocol），可以将 FigCraft 和 OpenPencil 接入 Claude Code，让 AI Agent 直接调用设计工具完成设计任务。

主要能力：

• 通过自然语言描述需求，自动创建设计稿。
• 创建和编辑 Frame、矩形、文本等设计元素。
• 调整图层、布局和样式。
• 使用原生设计元素生成可编辑的设计内容。
• 通过 FigCraft 桌面应用实时查看 AI 绘制过程。

整体架构：

Claude Code
    |
    +--- OpenPencil MCP
    |       |
    |       +--- OpenPencil
    |
    +--- FigCraft MCP
            |
            +--- FigCraft CLI
            |
            +--- FigCraft Desktop

二、安装 OpenPencil MCP

1. 安装

npm install -g @open-pencil/mcp

2. 检查安装

npm list -g --depth=0

检查可执行文件：

which openpencil-mcp

3. 注册 MCP

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

4. 验证连接

claude mcp list

正常情况下可以看到：

open-pencil: openpencil-mcp - ✔ Connected

三、安装 FigCraft CLI

1. 下载

进入 FigCraft 官方下载页面：

https://figcraft.run/download

下载 macOS 对应版本的 FigCraft CLI。

2. 解压

将下载的文件解压，进入解压目录。

3. 创建安装目录

mkdir -p ~/.local/bin

4. 复制 CLI

cp /解压目录/figcraft-cli ~/.local/bin/figcraft-cli

5. 添加执行权限

chmod +x ~/.local/bin/figcraft-cli

6. 验证

~/.local/bin/figcraft-cli --help

如果能够正常显示帮助信息，说明 CLI 安装成功。

四、配置 FigCraft MCP

FigCraft 支持两种运行模式：

1. 配置 Headless 模式

执行：

claude mcp add figcraft --scope user -- ~/.local/bin/figcraft-cli mcp

检查连接：

claude mcp list

正常情况下可以看到：

figcraft: /Users/用户名/.local/bin/figcraft-cli mcp - ✔ Connected

Headless 模式不需要启动 FigCraft 桌面应用，适合后台执行设计任务。

2. 配置 Attached 模式

如果希望 AI 绘制过程中能够实时看到设计变化，需要安装 FigCraft 桌面版。

首先进入官方页面：

https://figcraft.run/download

下载并安装 FigCraft 桌面应用。

启动桌面应用后，需要通过 Control 服务提供本地连接。

官方启动方式：

figcraft --control 7979

如果没有配置 figcraft 命令，需要根据实际安装位置找到桌面应用的可执行文件，并使用对应路径启动。

然后打开另一个终端，注册 Attached MCP：

claude mcp add figcraft-app --scope user -- ~/.local/bin/figcraft-cli mcp --attach 7979

检查连接：

claude mcp list

此时应该包含：

figcraft
figcraft-app

两个服务可以同时保留：

• figcraft：后台绘图。
• figcraft-app：桌面实时绘图。

注意：Attached 模式需要 FigCraft 桌面应用及其 Control 服务正常运行。

五、使用 Claude Code 进行 AI 绘图

完成 MCP 配置后，就可以在 Claude Code 中通过自然语言描述设计需求。

1. 基础绘图测试

发送以下提示词：

请使用 FigCraft MCP 创建一个设计文档。

创建一个 400x300 的 Frame。

背景为深蓝色。

在中央创建一个 100x100 的蓝色矩形。

只使用普通矩形和纯色填充。

不要使用渐变、阴影、模糊、SVG、图片。

预期效果：

• 创建一个 400×300 的 Frame。
• 背景为深蓝色。
• 中央创建一个 100×100 的蓝色矩形。
• 所有元素均为独立、可编辑的设计图层。

2. 复杂页面设计

请使用 FigCraft MCP 设计一个科技感的数据可视化管理后台。

要求：

1. 整体采用深蓝色科技风格。
2. 左侧设计导航菜单。
3. 顶部展示系统标题和用户信息。
4. 中间区域展示数据统计卡片。
5. 下方展示折线图和柱状图。
6. 右侧展示设备状态信息。
7. 所有内容使用独立图层。
8. 组件之间保持合理间距。
9. 统一字体、颜色和视觉规范。
10. 尽可能使用可编辑的原生设计元素。

3. 实时绘图

如果已经配置 Attached 模式，可以直接观察 FigCraft 桌面应用。

Claude Code 调用 FigCraft MCP 后，桌面应用可以实时展示对应的设计变化。

如果没有看到实时变化，检查：

1. FigCraft 桌面应用是否正常启动。
2. Control 服务是否正常运行。
3. 7979 端口是否可用。
4. figcraft-app 是否显示 Connected。

六、常用命令

查看 MCP

claude mcp list

查看 OpenPencil 安装路径

which openpencil-mcp

检查 FigCraft CLI

~/.local/bin/figcraft-cli --help

移除 FigCraft Attached MCP

claude mcp remove figcraft-app

移除 FigCraft Headless MCP

claude mcp remove figcraft

移除 OpenPencil MCP

claude mcp remove open-pencil

七、官方文档

• FigCraft 官网：https://figcraft.run/
• FigCraft 下载：https://figcraft.run/download
• FigCraft MCP 文档：https://figcraft.run/mcp
• FigCraft GitHub：https://github.com/storytold/figcraft
• OpenPencil GitHub：https://github.com/open-pencil/open-pencil

八、总结

通过 MCP，可以让 Claude Code 直接调用 FigCraft 和 OpenPencil 的设计能力。

两者可以作为 AI 设计工作流中的不同工具：

• FigCraft：支持 Headless 和 Attached 两种运行模式。
• OpenPencil：提供设计文档创建与编辑能力。
• Claude Code：负责理解设计需求、规划设计并调用 MCP 工具。

借助这些工具，可以逐步实现从自然语言描述到可编辑设计稿的 AI 辅助设计流程。