Pencil 的使用分享

最近，Pencil 打开了 vide design 的大门，我也动手尝试了一下。

由于 Pencil 官方并没提供 window 版的桌面程序，作为 window 用户，我只能以 IDE + Pencil Extension 的形式去上手尝试。下面是分别在 Antigravity、Cursor、Vscode 中的使用经验总结。

前置条件

不管是在哪个编程工具中使用，第一步都是安装 Pencil 拓展。

查看设置确保里面的复选框都是有勾选的

之后重启一下你的编辑器

Antigravity

在聊天框中输入 @m 会调出 MCP servers, 选择 MCP servers 会出现 pencil, 说明已经 pencil 已经启动且可使用

选择 pencil 之后就可以输入你的需求去做设计稿了, 这里你可以尝试去做一个音乐app, 提示词如下：

less 复制代码

@mcp:pencil:创建完整的Apple Music风格音乐播放器App

全局风格：毛玻璃效果、圆角、深色模式、红色主调

必需模块：
1. 首页（推荐歌单、新歌速递、排行榜）
2. 播放器（专辑封面、同步歌词、进度条、播放控制）
3. 播放列表（当前队列、拖拽排序）
4. 搜索页（搜索框、热搜、历史、结果分类）
5. 个人库（最近播放、收藏、自建歌单）
6. 设置页（音质、均衡器、账号设置）

效果如下

Cursor

准备完前置条件之后，直接在聊天框问他是否能连上 Pencil Mcp servers

只要他输出的结果表示成功连接，就可以用啦！

之后直接输入你的需求，他会去走 Pencil MCP 服务

Vscode

因为 Vscode 并不是 AI IDE, 所以除了需要安装 Pencil 插件之外，需要其他 AI 插件辅助，我尝试了用 GitHub Copilot Chat，Cline

GitHub Copilot Chat

安装插件，且使用方式跟 Cursor 一样。

确认能连上之后输入需求

Cline

安装 Cline 插件

完善 Cline 中的 Mcp 配置：

在配置文件中输入以下配置

json 复制代码

{
  "mcpServers": {
    "pencil": {
      "disabled": false,
      "timeout": 60,
      "type": "stdio",
      "command": "c:\Users\19233\.vscode\extensions\highagency.pencildev-0.6.24\out\mcp-server-windows-x64.exe",
      "args": [
        "--app",
        "visual_studio_code"
      ],
      "env": {},
      "autoApprove": [
        "get_editor_state",
        "batch_design"
      ]
    }
  }
}

这里的 command 是你 Vscode 下载的 Pencil 插件应用程序的路径

配置完之后点击 Done

设置你要是用的模型，可以使用免费的, 我这里使用 minimax 语言模型，之后点击 Done

接下来测试 Pencil 是否连接成功，并输入需求。

使用 Cline 的好处是你可以知晓 Pencil Mcp 返回的细节。

总结

Pencil 本质就是一个 MCP Server，不管是安装桌面程序还是安装插件到 IDE 中，都是把这个 MCP Sever 搞到本地，就可以用大模型去连接它并使用。