★ FEATURED ARTICLE 1. 为什么我要把 Pencil.dev 塞进 VS Code 的 MCP 工作流Pencil.dev 是一个跑在 VS Code 里的 AI 设计画布它把「画界面」和「写代码」这两件事压进了同一个编辑器窗口。你可以把它理解成一块长在 IDE 侧边栏里的无限白板拖拽、缩放、改样式都像 Figma但它同时通过 MCPModel Context Protocol把画布内容暴露给 AI 编程工具让 Claude Code、Cursor 这类助手能直接读取图层、生成组件代码。适合谁独立开发者、全栈工程师、偶尔要写前端的后端同学以及不想为设计工具单独付费的小团队。我最初对它的态度是怀疑的。设计工具我见过太多最后大多沦为「截图 手动还原」的中间产物。真正让我改变看法的是 MCP 这一层设计稿不再是静态图片而是 AI 能理解的结构化数据。这意味着从「打开设计文件」到「生成可运行组件」之间少了一次人肉翻译。这篇内容就围绕这条链路展开重点放在 VS Code 里的安装、MCP 配置、可复制的 settings 片段以及一次端到端验证。每一步我都会写清楚预期输出以及我踩过的报错。需要先说明一个前提Pencil.dev 只提供 VS Code 扩展版本不要再去装它的桌面应用。两者同时存在会各自拉起 MCP 服务端口和进程容易打架后面排查起来很烦。环境上VS Code 或其衍生版本Cursor、Trae 等都行AI 工具只要支持 MCP 协议即可注册用国内邮箱就能完成不需要海外账号。这一点对国内开发者比较友好省去了很多折腾。2. TaoToken 前置准备给 MCP 工作流配一个稳定的模型入口Pencil.dev 负责「设计画布 MCP 服务端」但真正把画布内容变成代码的是背后调用的模型。这里我用 TaoToken 作为模型接入层原因是它提供 OpenAI 兼容的 API 入口配置方式统一Claude Code、Cline、Codex 这类工具都能直接对接。官网地址是 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content API 根地址是 https://taotoken.net/api 注意 API 地址后面不加任何查询参数。你需要先拿到一个 API Key。进入控制台后创建密钥建议按项目命名比如pencil-mcp-dev方便后面区分。创建完成后复制那串以sk-开头的字符串它只会完整显示一次。如果你还没决定用哪个模型可以先去模型对话页面试一下响应速度和输出风格确认符合预期再写进配置。对于长期做编码和 Agent 任务的场景Coding Plan 会更划算适合把 Pencil.dev 这种高频调用的工作流长期跑下去。这里要强调一个概念TaoToken 是模型接入层不是设计工具也不替代 VS Code。它的角色是让 Pencil.dev 的 MCP 请求有稳定的模型可以调用。很多同学卡住不是因为 Pencil 装不上而是模型入口没配好导致 MCP 工具加载了但一调用就报错。所以顺序上先把 Key 和 Base URL 准备好再去配 Pencil 的 MCP会顺很多。配置时三个要素必须齐全Base URL、API Key、Model ID。缺任何一个MCP 调用都会失败。Base URL 填https://taotoken.net/apiKey 填你刚创建的那串Model ID 按你选的模型填比如claude-sonnet-4-5这类标识。下面一节我会给出可直接复制的 settings 片段。3. 可复制配置VS Code settings 与 MCP 三件套先装扩展。打开 VS Code点左侧扩展图标搜索Pencil找到后点安装。安装成功后侧边栏会出现一个铅笔图标。此时扩展会自动为支持的 AI 工具注册 Pencil MCP但自动注册不一定符合你的模型入口配置所以我们要手动补一份 settings。打开命令面板CtrlShiftP输入Preferences: Open User Settings (JSON)在打开的settings.json里加入下面这段。注意路径和字段名要和原文保持一致不要自己改键名{ mcp.servers: { pencil: { command: npx, args: [-y, pencil-mcp-server], env: { PENCIL_API_KEY: sk-你的TaoToken密钥, OPENAI_BASE_URL: https://taotoken.net/api, OPENAI_API_KEY: sk-你的TaoToken密钥, MODEL_ID: claude-sonnet-4-5 } } } }这段配置里PENCIL_API_KEY和OPENAI_API_KEY都填同一个 TaoToken 密钥即可OPENAI_BASE_URL指向 TaoToken 的 API 根地址MODEL_ID换成你实际使用的模型标识。如果你用的是 Cline 或 Claude Code 的 MCP 配置字段结构类似核心还是 Base URL、Key、Model ID 三件套。以 Claude Code 的settings.json为例MCP 段落可以写成{ mcpServers: { pencil: { command: npx, args: [-y, pencil-mcp-server], env: { OPENAI_BASE_URL: https://taotoken.net/api, OPENAI_API_KEY: sk-你的TaoToken密钥, MODEL_ID: claude-sonnet-4-5 } } } }如果你用的是 Codex配置落在auth.json和config.toml里。auth.json负责密钥config.toml负责模型和 Base URL。三件套同样不能少。配置完成后重启 VS Code让 MCP 服务重新加载。重启后打开 Pencil 图标用国内邮箱注册并输入验证码激活然后点左上角New .pen file新建画布。默认会有一个白色矩形选中按Delete删掉画布就干净了。4. 端到端验证从打开设计文件到生成组件代码配置写完必须验证否则你不知道是 MCP 没起来还是模型没通。第一步确认 MCP 已加载。在 Claude Code 或 Cline 的工具列表里找pencil相关工具能看到就说明注册成功。第二步在 Pencil 画布上用提示词生成一个界面。我用的提示词是使用 pencil mcp在当前活跃的画布上设计一个运维相关的 app 登录页 要求有指纹登录、账号登录、一键登录、手机验证登录。 类似飞书的 B 端简洁风格iOS 风格。预期输出画布上出现一个手机尺寸的登录页包含四种登录方式的入口配色偏中性圆角和间距接近 iOS 规范。如果画布没反应先看 MCP 工具是否被调用再看模型是否返回了内容。第三步把设计转成代码。继续输入请生成该登录界面的 html 代码不要生成手机的状态栏。预期输出对话区返回一段完整的 HTML包含结构、内联样式或 class能直接粘进一个.html文件在浏览器打开。我实测下来生成的代码在布局上基本对齐画布个别间距需要微调但省掉了从零写结构的时间。第四步把.pen文件纳入 Git。它本质是 JSON提交、分支、合并和普通代码文件一样设计变更能跟着代码一起走版本控制。验证成功的标志有三个MCP 工具列表里能看到 pencil、画布能响应提示词生成界面、对话区能返回可运行的 HTML。三个都满足说明从设计到代码的链路已经通了。如果只满足前两个第三个失败大概率是模型入口的问题回到上一节检查 Base URL 和 Key。5. 常见报错排查401、local proxy failed 与 reading choices报错一401 Unauthorized。这是最常见的原因是 API Key 不对或没生效。检查settings.json里的OPENAI_API_KEY是否和 TaoToken 控制台里创建的一致注意不要有多余空格。如果刚创建完 Key 就配置建议重启一次 VS Code。还有一种情况是 Key 被删除或过期重新生成一个替换即可。报错二local proxy failed。这个通常出现在 MCP 服务启动阶段说明npx拉取pencil-mcp-server失败或者本地网络到 npm 源不通。可以先在终端手动执行npx -y pencil-mcp-server看报错。如果是拉取超时换一个 npm 镜像源再试。如果是端口占用检查是否有多个 Pencil 实例在跑关掉多余的 VS Code 窗口。报错三reading choices相关错误。这多半是模型返回结构不符合预期MCP 在解析响应时拿不到choices字段。原因通常是MODEL_ID填错或者 Base URL 指向了一个不兼容 OpenAI 格式的端点。确认OPENAI_BASE_URL是https://taotoken.net/apiMODEL_ID是平台支持的模型标识。改完重启再跑一次验证请求。报错四OAuth 相关提示。如果你在 Claude Code 里看到 OAuth 报错说明它还在走默认的登录流程没有用你配置的 Key。检查 MCP 配置是否被正确加载必要时在 Claude Code 的设置里显式指定 API Key 模式。CC Switch 这类工具切换配置后也要确认当前生效的是哪一份。排查顺序建议固定下来先看 MCP 工具是否加载再看 Key 是否有效最后看模型 ID 和 Base URL。按这个顺序走大部分问题能在三分钟内定位。6. 把这条链路用起来CTA 与后续动作链路跑通之后接下来就是把它变成日常习惯。我的做法是新项目先在 Pencil 画布上把核心页面搭出来用提示词生成初版代码再在编辑器里做业务逻辑。.pen文件和代码放同一个仓库设计变更走 PR评审时能同时看到视觉和实现。这样设计和开发不再是两个割裂的环节。如果你在接入阶段卡住优先去看接入文档里面有各工具的配置示例。需要验证模型响应是否正常可以去模型对话页面直接发一条请求确认 Key 和模型都通。长期做编码和 Agent 任务的话Coding Plan 比按量调用更省心适合把 Pencil.dev 这种高频工作流长期挂着跑。最后说一个我踩过的坑不要同时装 Pencil 桌面应用和 VS Code 扩展。桌面应用也会拉起 MCP 服务和扩展注册的服务冲突表现是工具列表里出现两个 pencil调用时随机失败。只保留扩展版本问题就消失了。到这一步你应该能稳稳复现整条链路了。
阅读完成 · 觉得有帮助？
