在Trae中使用Pencil MCP

大海梦想2026-01-27 13:26

最近 Pencil 有点火，号称是Vibe Design。

它本质上就是一套协议，使用 json 文本来描述画布中每个元素的位置、样式、组合等各种属性。

我想在 trae 中使用它，却发现它本身没有给出在 trae 中使用的教程。

所以在这里记录一下如何在 trae 中使用。

1. 在 Trae 中安装 Pencil 插件

在 Trae 中搜索 Pencil 插件并安装就可以了。这个插件会启动一个 MCP Server。

注意不要去官网下载 Pencil 的客户端，其实那个客户端本质上也是一个 MCP Server，如果同时打开会冲突，导致插件无法正常使用。

2. 找到 MCP 配置

虽然 Pencil 默认没支持 Trae，但所有工具的 MCP 配置其实是一样的。

在 Trae 的 Pencil 插件配置中可以看到 Pencil 默认会在一些主流工具的 MCP 配置中自动追加上 Pencil MCP 的配置。

我们以 Gemini CLI 为例，直接把配置文件的内容打印出来：

bash 复制代码

➜  .gemini cat ~/.gemini/settings.json 
{
  "mcpServers": {
    "pencil": {
      "command": "/Users/xxx/.trae/extensions/highagency.pencildev-0.6.15-universal/out/mcp-server-darwin-arm64",
      "args": [
        "--ws-port",
        "49704"
      ],
      "env": {}
    }
  }
}

3. 配置 Trae MCP

剩下就很简单了，点击 Trae 右上角设置：

左侧找到 MCP，在新打开的 MCP 配置页中点击添加--手动添加。

点击原始配置（JSON），将 Pencil MCP 的配置追加到其他 MCP 的后面即可。

json 复制代码

{
    "mcpServers": {
        // 这里省略其他 MCP ....
        // 以下是 Pencil MCP
        "pencil": {
            "command": "/Users/your-user-name/.trae/extensions/highagency.pencildev-0.6.15-universal/out/mcp-server-darwin-arm64",
            "args": [
                "--ws-port",
                "49704"
            ],
            "env": {},
            "disabled": false
        }
    }
}

回到 MCP 设置页，可以看到 Pencil MCP 已成功配置并连接了。

4. 使用

现在你就可以在 AI 聊天框中输入你的设计需求，并点名要求使用 Pencil 来绘制设计稿了。记得告诉AI要把设计稿放在哪里。

关于 Pencil 使用，网上有很多教程了，这里不再赘述。