使用 Pencil MCP 辅助 UI 设计的初体验

　　最近在重新设计项目的 UI，恰巧从🐼那里得知了 Pencil MCP，索性拿来实际体验了一下。顺便提一句，Pencil（官网 pencil.dev）主打的是面向开发者的设计工具，能够将设计与代码、终端以及大模型进行无缝集成。

　　对于不太熟悉专业 UI 设计工具的开发者来说，借助大模型和 Pencil，效率确实惊人。不到一天的时间，我就完成了课表页部分的设计。这篇文章主要记录一下基础的配置流程，以及实际使用体验。

一、 Pencil MCP 的安装与配置

　　整体安装流程非常顺畅，如果使用的是主流工具，基本可以做到开箱即用。

1. 扩展安装与自动配置

　　在 VSCode 的扩展商店中直接搜索 “Pencil” 并安装。安装完成后，它会自动识别并帮你完成大部分 MCP 相关的环境配置。

安装 Pencil 扩展

自动配置 MCP

2. 手动配置 MCP Server

　　如果你的 AI 编码助手没有被内置面板直接集成，也可以手动拷贝 MCP config 进行配置。例如，在使用 VSCode 的 GitHub Copilot 时，可以在项目根目录创建 /.vscode/mcp.json 文件，并将导出的配置粘贴进去：

{
  "servers": {
    "pencil": {
      "type": "stdio",
      "command": "C:\\Users\\<你的用户名>\\.pencil\\mcp\\visual_studio_code\\out\\mcp-server-windows-x64.exe",
      "args": [
        "--app",
        "visual_studio_code"
      ],
      "env": {}
    }
  }
}

　　注：请将上述配置中的 <你的用户名> 替换为你实际的系统用户名。如果你使用的是 macOS 或 Linux 操作系统，路径和可执行文件后缀会有所不同，请根据实际安装目录进行调整。

3. 启动与运行

　　配置好之后，通过快捷键 Ctrl+Shift+P 呼出 VSCode 的命令面板，输入 MCP: List Servers。在弹出的列表中点击 pencil 运行即可激活服务。

输入命令

点击运行

二、使用体验

　　比较可惜的是，Pencil 目前主要处理的是静态文件，它没有办法像 Figma 那样实现页面跳转或轮播图之类的动态交互效果。不过，如果只是单纯用来确定 UI 的视觉风格和页面布局，已经完全够用了。而且在实际使用中发现：Pencil 接入大模型时，MCP Server 经常会向模型返回整个画布的全量 JSON 文件数据，而不是增量更新。这会导致单次对话的上下文被拉得极长，Token 消耗非常剧烈。如果是进行高频的对话修改，不仅成本高，响应也会变慢。针对上述问题，强烈建议：如果是局部的微调或小元素的修改，最好直接手动调整；或者在做这类小改动时，主动切换到轻量级、响应快的模型，这样能有效兼顾效率与成本。