VSCode+Pencil：AI驱动设计-从踩坑到成功配置

一次偶然的配置需求，让我深入探索了 AI-MCP的底层工作原理。从常规配置的失败，到原理的深入挖掘，最终将发现成功复现，这个过程不仅解决了问题，更让我对 MCP 生态有了更深刻的理解。

😵 第一次尝试：常规配置方法碰壁

事情的起因很简单：我想在 CodeBuddy 中使用 Pencil 的 AI 设计功能。按照以往的经验，MCP 服务器的配置通常都很直接——找到对应的端口，在配置文件中添加连接信息即可。

于是我自信满满地写下了这段配置：

json

{
  "mcpServers": {
    "pencil": {
      "type": "http",
      "url": "http://127.0.0.1:59978",
      "disabled": false
    }
  }
}

满怀期待地测试连接，结果却给了我当头一棒：

❌ 连接失败：Server 'pencil' not found or not connected

不甘心的我尝试了 WebSocket 方式：

json

{
  "mcpServers": {
    "pencil": {
      "type": "ws",
      "url": "ws://127.0.0.1:59978",
      "disabled": false
    }
  }
}

依然失败。

连续多次的失败让我开始怀疑：难道 Pencil 根本不支持第三方AI接入MCP？还是我的配置方式哪里出了问题？

🔍 深入探究：Claude 是怎么做到的？

虽然配置失败，但我知道在另一个环境中（比如 VSCode + Claude Code），Pencil 是可以正常工作的。既然它能在那里工作，就一定有连接方式。

我决定深入挖掘 Claude Code 的配置和工作原理。

第一步：寻找配置线索

bash

# 搜索系统中所有 MCP 相关的配置文件
find ~ -name "*mcp*.json" -o -name "*claude*.json" 2>/dev/null | grep -E "(config|settings)"

找到了几个关键文件：

~/.claude/settings.json - Claude Code 全局设置
~/.kiro/settings/mcp.json - 其他工具的 MCP 配置
~/.gemini/antigravity/mcp_config.json - Gemini 工具配置

第二步：查看权限配置

打开 ~/.claude/settings.json，发现：

json

{
  "permissions": {
    "allow": ["mcp__pencil"]
  }
}

关键发现 1：Pencil 需要权限授权

这说明 Pencil 确实是一个 MCP 服务器，但需要显式的权限才能被调用。

第三步：寻找 Pencil 的踪迹

既然有权限，那 Pencil 的服务器在哪里呢？

bash

# 搜索 VSCode 扩展中的 Pencil
find ~/.vscode/extensions -name "*pencil*" -type d

找到了！

~/.vscode/extensions/highagency.pencildev-0.6.28/

进入扩展目录探索：

bash

ls -la ~/.vscode/extensions/highagency.pencildev-0.6.28/out/

关键发现 2：Pencil 自带 MCP 服务器二进制

mcp-server-darwin-arm64  (7.01 MB)
mcp-server-darwin-x64
mcp-server-linux-arm64
mcp-server-linux-x64

这四个文件分别对应不同平台的可执行程序！

💡 关键转折：自动发现机制

有了这些发现，我开始思考一个问题：我在 mcp.json 中并没有配置 Pencil，但 Claude Code 却能自动发现并连接它，这是怎么做到的？

通过深入分析，我推断出 Claude Code 的自动发现机制：

Claude Code 启动流程：
┌─────────────────────────────┐
│  Claude Code 初始化        │
└──────────┬────────────────┘
           │
           ▼
┌─────────────────────────────┐
│  扫描已安装的 VSCode 扩展 │
└──────────┬────────────────┘
           │
           ▼
┌─────────────────────────────┐
│  发现 highagency.pencildev  │
│  (检查扩展的 package.json) │
└──────────┬────────────────┘
           │
           ▼
┌─────────────────────────────┐
│  读取 ~/.claude/权限配置  │
│  检查 mcp__pencil 是否允许│
└──────────┬────────────────┘
           │
           ▼
┌─────────────────────────────┐
│  启动扩展内的 MCP 服务器   │
│  (stdio 模式)             │
└──────────┬────────────────┘
           │
           ▼
     ✅ 自动连接成功

关键发现 3：Pencil 通过 VSCode 扩展机制实现自动发现

这解释了为什么我之前通过 HTTP/WebSocket 的方式连接失败——Pencil 根本没有开启这些端口，它通过 stdio（标准输入输出）方式与 Claude Code 通信！

🛠️ 原理复现：在 CodeBuddy 中配置 Pencil

理解了原理，现在就是见证奇迹的时刻——将这个发现应用到 CodeBuddy 中。

第一步：找到 CodeBuddy 的配置文件

根据前面的搜索结果，CodeBuddy 的 MCP 配置文件位于：

~/.codebuddy/mcp.json

第二步：构建正确的配置

基于我的发现，我需要直接指定 Pencil 的可执行文件路径，而不是尝试连接 HTTP/WebSocket 端口：

json

{
  "mcpServers": {
    "pencil": {
      "command": "/Users/sun/.vscode/extensions/highagency.pencildev-0.6.28/out/mcp-server-darwin-arm64",
      "args": ["--app", "visual_studio_code"],
      "type": "stdio",
      "disabled": false
    }
  }
}

配置详解：

command: Pencil MCP 服务器二进制文件的绝对路径
- macOS ARM 芯片使用：mcp-server-darwin-arm64
- macOS Intel 芯片使用：mcp-server-darwin-x64
- Linux ARM 芯片使用：mcp-server-linux-arm64
- Linux x64 芯片使用：mcp-server-linux-x64
args: 运行参数，--app visual_studio_code 告诉服务器运行在 VSCode 环境中
type: 通信类型，使用 stdio（标准输入输出）
disabled: 设置为 false 启用该服务器

第三步：验证连接

配置完成后，我迫不及待地测试了连接：

bash

# 测试工具是否可用
mcp_get_tool_description([["pencil", "get_editor_state"]])

返回结果让我激动不已：

json

{
  "pencil-get_editor_state": {
    "description": "Get the currently active canvas editor...",
    "inputSchema": {...},
    "mcpServerConfig": "..."
  }
}

工具可用！ 这意味着 CodeBuddy 已经成功连接到 Pencil MCP！

进一步测试，调用工具查看编辑器状态：

bash

mcp_call_tool("pencil", "get_editor_state", {"include_schema": false})

## Currently active editor
- pencil-new.pen

## Document State:
- No nodes are selected.

### Top-Level Nodes (1):
- bi8Au (frame): Frame [user visible]

完美！Pencil 已经在 CodeBuddy 中正常工作了！

🎉 成功回顾：从失败到胜利的关键转折

回顾整个探索过程，有几个关键的转折点：

转折点 1：从 HTTP/WebSocket 转向 stdio

❌ 错误思路：Pencil 应该像其他 MCP 服务器一样，通过 HTTP 或 WebSocket 端口连接

✅ 正确思路：Pencil 通过 stdio（标准输入输出）方式通信，不需要网络端口

转折点 2：从配置文件到扩展机制

❌ 错误思路：在 MCP 配置文件中添加配置就能连接

✅ 正确思路：Pencil 的可执行文件内嵌在 VSCode 扩展中，需要直接指定二进制文件路径

转折点 3：从尝试猜测到系统探索

❌ 错误思路：根据经验猜测配置方式

✅ 正确思路：深入系统文件，分析 Claude Code 的工作机制，找到 Pencil 的实际位置

📚 经验总结：这次配置教会了我什么

1. 理解原理比盲目尝试更重要

一开始我一直在尝试各种配置参数，但没有效果。直到停下来深入分析 Claude Code 的工作原理，才找到了正确的方向。

2. 系统文件是宝藏

很多"神秘"的功能，其实都能在系统的配置文件和扩展目录中找到线索。学会用 find、grep 等工具探索系统，是解决问题的关键。

3. 不同环境可能有不同的实现方式

Claude Code 可以通过扩展机制自动发现 Pencil，但其他工具（如 CodeBuddy）可能需要手动配置。理解这些差异，才能灵活应对。

🔧 配置文件对比速查

配置文件	位置	作用
`~/.claude/settings.json`	权限配置	控制哪些 MCP 服务器可以被调用
`~/.codebuddy/mcp.json`	CodeBuddy 配置	定义 CodeBuddy 环境的 MCP 服务器
`~/.kiro/settings/mcp.json`	其他工具配置	其他 AI 工具的 MCP 配置

🎯 成功配置后的实际应用

连接成功后，Pencil 的强大功能就触手可及了：

可用的设计工具

get_editor_state - 获取当前编辑器状态
batch_design - 批量创建和修改设计元素
get_screenshot - 获取设计截图
get_guidelines - 获取设计最佳实践指南
get_style_guide - 获取样式和设计规范
open_document - 打开或创建设计文档
create_directory - 创建设计目录结构
delete_note - 删除设计节点

典型应用场景

📱 移动应用设计 - 快速构建移动端 UI 原型
🌐 Web 应用设计 - 设计响应式网页和仪表板
🎨 UI/UX 原型设计 - 可视化用户界面和交互流程
📊 数据可视化设计 - 创建图表和仪表板
🎯 设计系统构建 - 建立可重用的组件库

⚠️ 配置注意事项

1. 路径问题

必须使用绝对路径，不要使用相对路径。配置文件中的路径必须是完整的系统路径，例如：

✅ 正确：/Users/sun/.vscode/extensions/highagency.pencildev-0.6.28/out/mcp-server-darwin-arm64
❌ 错误：~/.vscode/extensions/highagency.pencildev-0.6.28/out/mcp-server-darwin-arm64

2. 系统架构匹配

根据你的系统选择对应的二进制文件：

系统	架构	文件名
macOS	Apple Silicon (M1/M2/M3)	`mcp-server-darwin-arm64`
macOS	Intel	`mcp-server-darwin-x64`
Linux	ARM	`mcp-server-linux-arm64`
Linux	x64	`mcp-server-linux-x64`

3. 权限配置

确保 ~/.claude/settings.json 中有 Pencil 的权限：

json

{
  "permissions": {
    "allow": ["mcp__pencil"]
  }
}

如果没有，添加上述内容。

4. 重启生效

修改配置后，可能需要重启编辑器或重新加载 MCP 服务器才能生效。

💡 进阶技巧：多环境配置

如果你在多个工具中使用 Pencil，可以创建一个统一的配置模板：

json

{
  "mcpServers": {
    "pencil": {
      "command": "/Users/sun/.vscode/extensions/highagency.pencildev-0.6.28/out/mcp-server-darwin-arm64",
      "args": ["--app", "visual_studio_code"],
      "type": "stdio",
      "disabled": false
    },
    "obsidian": {
      "command": "npx",
      "args": ["-y", "obsidian-mcp", "/Users/sun/Resilio Sync/obsidian"],
      "type": "stdio",
      "disabled": false
    }
  }
}

然后复制到多个配置文件位置：

bash

# 复制配置到 CodeBuddy
cp ~/.codebuddy/mcp.json ~/.kiro/settings/mcp.json

# 复制配置到其他工具
cp ~/.codebuddy/mcp.json ~/.gemini/antigravity/mcp_config.json

🔗 相关资源

📝 写在最后

这次配置经历让我明白了一个道理：当我们面对一个看似"无法解决"的问题时，停下来深入理解其背后的原理，往往比盲目尝试更能找到答案。

从常规配置的失败，到原理的深入挖掘，再到最终的成功复现——这个过程虽然曲折，但每一步都有其价值。希望这篇分享能帮助到同样遇到配置问题的开发者。

如果你也遇到了类似的 MCP 配置问题，不妨按照这篇文章的思路，从原理出发，一步步探索，相信你也能找到答案。

文章创建时间：2026年2月26日

标签： #MCP #Pencil #Claude #AI设计 #自动化 #配置教程

VSCode+Pencil：AI驱动设计-从踩坑到成功配置 ​

😵 第一次尝试：常规配置方法碰壁 ​

🔍 深入探究：Claude 是怎么做到的？ ​

第一步：寻找配置线索 ​

第二步：查看权限配置 ​

第三步：寻找 Pencil 的踪迹 ​

💡 关键转折：自动发现机制 ​

🛠️ 原理复现：在 CodeBuddy 中配置 Pencil ​

第一步：找到 CodeBuddy 的配置文件 ​

第二步：构建正确的配置 ​

第三步：验证连接 ​

🎉 成功回顾：从失败到胜利的关键转折 ​

转折点 1：从 HTTP/WebSocket 转向 stdio ​

转折点 2：从配置文件到扩展机制 ​

转折点 3：从尝试猜测到系统探索 ​

📚 经验总结：这次配置教会了我什么 ​

1. 理解原理比盲目尝试更重要 ​

2. 系统文件是宝藏 ​

3. 不同环境可能有不同的实现方式 ​

🔧 配置文件对比速查 ​

🎯 成功配置后的实际应用 ​

可用的设计工具 ​

典型应用场景 ​

⚠️ 配置注意事项 ​

1. 路径问题 ​

2. 系统架构匹配 ​

3. 权限配置 ​

4. 重启生效 ​

💡 进阶技巧：多环境配置 ​

🔗 相关资源 ​

📝 写在最后 ​

VSCode+Pencil：AI驱动设计-从踩坑到成功配置

😵 第一次尝试：常规配置方法碰壁

🔍 深入探究：Claude 是怎么做到的？

第一步：寻找配置线索

第二步：查看权限配置

第三步：寻找 Pencil 的踪迹

💡 关键转折：自动发现机制

🛠️ 原理复现：在 CodeBuddy 中配置 Pencil

第一步：找到 CodeBuddy 的配置文件

第二步：构建正确的配置

第三步：验证连接

🎉 成功回顾：从失败到胜利的关键转折

转折点 1：从 HTTP/WebSocket 转向 stdio

转折点 2：从配置文件到扩展机制

转折点 3：从尝试猜测到系统探索

📚 经验总结：这次配置教会了我什么

1. 理解原理比盲目尝试更重要

2. 系统文件是宝藏

3. 不同环境可能有不同的实现方式

🔧 配置文件对比速查

🎯 成功配置后的实际应用

可用的设计工具

典型应用场景

⚠️ 配置注意事项

1. 路径问题

2. 系统架构匹配

3. 权限配置

4. 重启生效

💡 进阶技巧：多环境配置

🔗 相关资源

📝 写在最后