UI 交付的终极形态？深度测评最新AI设计神器Pencil

一、全文速览图

I have a pencil，I have a VScode，a ....梦寐以求的双向 MCP 矢量无限画布工具。

最近试用了一下刚刚出现在我们眼前的 Pencil，附带简单实现全过程。

更多测评：

传统流程中，设计师在 Figma 疯狂梵高，开发者在疯狂 Vibe Coding，中间的交付充满了赛博折磨，最后设计师一走查还要再次相看两厌～

Pencil.dev（ https://www.pencil.dev/ ）出现，就是为了拯救我们这些在设计图和真实代码夹缝中生存的打工人，Pencil 不是一个独立的设计软件，它是你 IDE 的增强插件。设计文件就是代码库的一部分，Git 也能管设计。

先说优点：

1. 与代码库实时互通
2. 在 IDE 中直接设计
3. AI 能根据自然语言生成高质量 UI
4. 可输出实际可运行的代码片段
5. 设计文件与开发流程一体化

二、前言

在安装了桌面应用程序后，我发现如果想要使用 Claude Code 的 API 功能，需要成为 Claude 的会员。不过，从理论上讲，Pencil 作为一个 MCP，应该能够很好地与 Claude Code 以及其他类似的服务如 OpenAI Codex 配合工作

所以 VScode 启动，找到插件市场，果然它在。

它变成了我想要的最终形态，这个形态真的很完美 符合我的需求， 我既可以用 chat 去改我设计图， 我又可以自己上手去鼠标改

三、开始实现一个小案例

Step 1.开始初步方案

我：“我安装了一个插件 pencil，请你调用 pencil mcp 在目前活跃的画布上制作，制作一个 web 端的实验室耗材管理系统，谷歌的设计风格，icon 要多彩”这时 vscode 已经开始调用 pencil 的 mcp，开始工作。

第一版顺利成型，看到不但拥有像 figma 一样的图层，而且是自动布局的，我准备给他加一些难度，直接从 figma 贴过来一个做好的图放进去，然后再用 codeX 把所有字体改为 PingFangsc

可以像 Figma 一样调节自动布局，还尝试把下边的按钮复制了一份到 banner 里，全部是可以用的。

现在开始进行下一步，给下边的另一部分内容删掉，继续让我 codex 工作。

Step 2.完善设计及交互

设计稍微完善一下，给李博士一个头像，所有的字体都用 PingFangsc，然后帮我完善一下功能和交互，新建申领后增加到库存列表，把所有菜单里的功能全部补齐。

codex 会根据用户所列出的需求，进行自动的规划成任务表，一条一条调用 pencil mcp 去进行设计。

我们看到设计基本完善，我们来稍微调整一下细节，然后看下开发咋样

Step 3.开始前端开发

首先技术框架，目录位置，然后让他直接开发好

如果有一点前端基础，就可以自己跑依赖和环境打开了，如果不懂，可以直接让它跑起来。

就这么开发好了一个带交互的页面，还有一些小瑕疵还在一直更新，还可以继续连后端数据库接口

发给前端小哥～

当画布与编辑器合二为一，设计的终点不再是一张精美的 JPG，而是触手可及、实时运行的生产力。2026 年，聪明的打工人已经学会把创意直接种进代码库里，把时间留给更有价值的思考。