2 月 25 日，这篇文章发出来的前两天，Pencil.dev 的首席氛围官在 X 上发了条动态，说他们的用户数量刚刚突破了 10 万。
这个数字，放在整个 AI 工具市场里其实不算显眼。
但圈子里的反应完全不一样。开发者社区、设计圈、AI 产品人，这段时间提到 Pencil.dev 的频率越来越高，而且说法都差不多：这东西有点东西。
用「被封神」来形容，其实一点都不夸张。
那 Pencil.dev 到底是什么？
一句话概括就是：一款把 UI 设计和前端代码生成合并成同一件事的 AI 工具。
它直接嵌进开发环境，VS Code、Cursor 都支持。你在里面的无限画布上画界面，AI 同步帮你生成可运行的 HTML、CSS、React 代码，设计和代码始终放在同一个 Git 仓库里，不分家。
这个理念颠覆了一个行业里积累了很多年的默认流程：设计师先在 Figma 里画好图，然后开发者对着图手写代码，这中间有一段谁都知道很痛但谁都没根本性解决的「翻译」过程。
慢、容易偏差、反复对齐，是这段流程的 3 个标准体感。
Pencil 的核心主张，其实就是把这个「翻译层」直接干掉。
说到这，很多人可能会想起前段时间在 GitHub 上很火的另一个项目：Claude Canvas。
Claude Canvas 是一个 TUI 工具包，给 Claude Code 提供一个独立的可视化界面。本质上它可以生成交互式终端界面，用于邮件、日历、航班预订这类场景。
两个工具干的是同一类事：把「看的」和「写的」放到同一块屏幕上。
以前你总是切来切去：Figma 在左边，编辑器在右边，改一个按钮颜色要来回跑好几趟。
这两个工具都在想办法消灭这个来回跑的过程，只是入口不一样，Claude Canvas 从终端界面切入，Pencil 从设计画布切入。
成熟度差别也很大。Claude Canvas 现在还是相当早期的状态，更像一个实验性项目。
Pencil 的完成度则高出不止一个档次，它已经是一个真的能进工作流的东西了，当然也会存在一些问题，被我的群友们指出来了：
Pencil 下载链接：
https://www.pencil.dev
目前Mac 和 Windows 版本都已经支持，完全免费。
先说结论。整体用下来，Pencil 有3 个地方让我印象比较深。
➡️ 设计画布 + 代码产出，一体化
在 Pencil 里，你有一块无限大的画布，直接在 IDE 环境里用，设计界面这件事和写代码这件事在同一个地方发生。
你在画布上做出来的任何东西，都可以即时转成生产就绪的 HTML、CSS 或 React 代码，全程不需要手工重写。
更重要的是，设计文件和代码文件存在同一个 Git 仓库里，可以版本控制、可以开分支、可以合并，和管理代码没有任何区别。
➡️ MCP + AI Agent 深度集成
Pencil 本身作为 MCP 服务器运行，这意味着它能和 Claude Code、Cursor 这类 AI 编码工具深度打通。
你在画布上画的东西，AI 可以直接读取作为上下文，然后生成语义更清晰、更精准的代码。设计意图不再靠「描述」传达，而是被 AI 直接「看见」。
➡️ 兼容 Figma
如果你之前在 Figma 里已经有积累的设计，可以直接复制粘贴进来，布局、样式都能保留，不用从头重做。
怎么开始用？
进去之后第一件事是连接 AI Agent。
Pencil 支持两个方向：Anthropic 的 Claude Code 和 OpenAI 的 GPT Codex，两个都打通了，用哪边的订阅都行。
连上之后，对话框里会直接列出这两个平台上你可调用的模型。我个人因为 Claude 的上下文消耗确实有点猛，太黑了，所以我这次主要用的是 Codex 里的 GPT-4.5 Codex 模型。
界面是什么结构？
连好 Agent 之后，你需要先创建一个工作区文件。进去就是主界面，布局很直观，一眼能看懂。
中央最大的那块是画布区，你做出来的页面、APP 界面、落地页都展示在这里，里面所有元素都可以拖动。
左侧是图层栏。整个画面会被拆成无数个图层，就和 Photoshop 的图层概念一样，每一个文字、每一个图片框、每一个色块，都以独立图层的形式放在这里，高度自定义。
左下角是 AI 聊天框，这就是你调用 Agent 的地方。你在画布上选中任何一个模块，直接丢进对话框描述需求，Agent 就帮你改。
右侧是细节工具区，文字排版、对齐方式、背景颜色、宽度设定这些全在这里。
整个逻辑是顺着用的，没有学习曲线那种感觉，打开就能上手。
前几天 Pencil 刚做完一轮大更新，最核心的变化是现在可以同时调用多个子 Agent 并行工作。
操作很简单，在聊天框里点那个闪电图标，选 X3 或者 X6，就能启动多个 Agent 同时跑。
我一般直接选 X6，它会自动根据任务复杂度决定实际调用几个 Agent，不需要手动去拆分任务、手动分配。
这个点很关键。在传统编程 Agent 工具里，如果你想用多 Agent 并行，往往得自己去设定任务分解逻辑，门槛不低。
Pencil 把这个过程自动化了，你只需要说「帮我做这个」，它自己想清楚怎么分工。
光说功能没意思，直接看我实际用下来做了什么。
第一个测试是让它做一个终端风格的球队数据 Dashboard，调了三个子 Agent 并行跑。
结果出来以后我就直接明白为什么这东西会被封神了。
同样是让 AI 做一个页面，在普通编程 Agent 里你第一轮拿到的东西，往往要么排版乱，要么样式很草率，需要反复描述才能接近你想要的效果。
Pencil 第一轮给出来的东西，布局完整，排版到位，整体已经有产品感了。中德风格三个落地页，每一个的页面结构都是成立的。（当然，叠个甲，受限于目前 AI Agent 的能力，也不要有一次到位的错误想法
