Pencil.dev 是今年最被低估的 AI 设计开发者工具，值得一个「封神」｜附全面实测

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 的能力，也不要有一次到位的错误想法 🙅）

这里有个细节值得说：你在这个画布里产出的所有东西，不管是落地页还是 APP 页面，全部以代码形式存储在你本地。

所以可以这样理解 Pencil 的定位，它是 Claude Code 或者 Codex 的超级 UI 壳，引擎还是这两个 Agent，但 Pencil 给它们套了一层真正可视化、可操作的设计界面。

你看到的每一个像素背后，都有对应的代码在同步生成。

第二个测试更日常一点，让它做一个理发店管理 APP 的多页面原型。

一口气直接出了 5 页，整个流程没有卡顿，前后页面的风格也保持了一致性。

这里插一个让我觉得很方便的功能：风格指导库。

如果你一开始不知道该选什么视觉风格，Pencil 内置了大量免费的风格指导组件，进去直接选一个，它会自动把对应的风格描述以提示词的形式插入到你的聊天框里。

你在后面接着写需求就行，不需要自己去描述「我想要什么感觉」，省了很多来回。

只要你用过最基础的 Photoshop，甚至比 Photoshop 还要简单，有基本的视觉判断力，就能瞬间上手这套逻辑。

第三个测试我想挑战一下体量，用 GPT-4.5 Codex 开 6 个子 Agent，帮我做一个世界咖啡站的 APP 界面，一共要求出 15 页。

我还往里上传了一批真实的咖啡馆图片，想看看它能不能直接用。

效果是：图片这块它没能很好地消化，落地结果是用它自己的 Notion 风格占位图来替代，图片理解这一块目前确实还是当前 Agent 能力的天花板，坦白说这个局限存在。

但整体布局出来的效果，出乎意料地成熟。

英文、中文混排，高亮模块，导航结构，15 页下来视觉风格是统一的，没有出现那种越往后越乱的问题。

把它拆开来看细节更能感受到完成度。每一个字、每一个图片框都在左侧以独立图层呈现，双击就能定位进去直接编辑。

第一次双击进入整个页面，再双击进入某个区块，再双击进入具体的文字或元素。

这个逻辑很像在 PS 里处理嵌套图层，精准的同时保持了灵活，不会一下点到最里面找不着北。

还有两个细节我特别想说

一个是拖动组件的体验。

Pencil 里拖动一个元素，它调整大小的逻辑不是简单粗暴地放大缩小，而是会感知周围其他组件的上下文，自动安排这个元素应该调整到什么程度。

这就是「设计 + 代码融合」真正带来的优势，代码层面的上下文信息被设计操作直接利用了。你拖一个按钮，不会把整个页面结构搞崩，因为它知道周围是什么。

另一个是右侧工具栏的细节丰富程度。

对齐方式、背景颜色、全宽半宽，这些基础控制都有。但让我没想到的是颜色选择器，大多数 AI 设计工具就给你几个预设色点一点，Pencil 给的是一个完整的调色板，接近 Photoshop 那个级别的精细度。

还有一个我额外做的 AI 语音产品界面，英文、中文混排加高亮模块，布局和排版出来就已经很成熟了。

当然最终要达到能商用的程度，多次微调是逃不掉的，这一点我不会粉饰，但就算这样，和其他 AI 设计工具的同等起点相比，Pencil 的第一轮输出质量还是高出一大截。

最后还有一个让人细思的设计：做完的东西可以打包成。pencil 格式，设计和代码全在同一个文件里，下次打开接着改，两边永远对齐，不存在「找设计稿」和「找代码」是两件事的情况。

一个工具能把这个细节想到，说明它把完整的工作流从头到尾想清楚了，从画第一个按钮到最终交付，全程不用离开这个环境。😊

说实话，现在 AI 工具太多了。

多到什么程度呢，每隔两天就有人在群里发「这个工具绝了」，然后大家试一圈发现，它只是在某一个点上确实能用，但前后两端还是得靠你自己去接。用完这个工具，你还要去另一个地方处理它产出的东西，链条永远是断的。

Pencil 是少数几个把头和尾都接上了的。

从你开始设计，到代码落地，到文件打包，全程一个环境。这在现在这个赛道里，完成度是真的少见。

所以我个人觉得，用「转折点式产品」来定义 Pencil 其实一点都不过分。

做出 Pencil 的人是谁？

能把这件事做到这个完成度，背后的人很关键。

Pencil 的创始人叫 Tom Krcha，他在产品、设计、工程交叉这个地带已经做了很多年，履历说出来还真挺牛逼的。

首先，Tom 是 Adobe XD （ Experience Design CC ） 的联合创始人之一。这个产品是 Adobe 专门针对 UI/UX 设计和原型制作推出的工具，Tom 参与了从概念阶段到产品落地的核心工作。

之后他参与构建了 Around，一个主打轻量沉浸式远程协作体验的视频通话产品。Around 后来被 Miro 收购，并入 Miro Labs 继续发展。

Miro 目前是全球范围内协作赛道里产品能力最强的那一批，Tom 在里面参与的是核心产品方向的工作。

更早阶段，Tom 还联合创办了 Alter Avatars，一个以 3D 创意、AR/VR 交互体验为核心的产品，后来被 Google 收购。图形、多媒体、未来交互这些方向，他都有过真实的产品积累。

更往前翻，Tom 的职业早期还参与过 Machinarium 和 Angry Birds（没错，就是愤怒的小鸟） 这样的经典游戏项目。一个是极度强调视觉叙事和交互细节的独立游戏，一个是全球数亿下载量的现象级产品。

把这几段经历叠起来看，你会发现 Tom 在「设计工具」「协作产品」「图形交互」这三个方向上都有过从 0 到 1 的经验，而 Pencil 恰好是这 3 件事的交汇点😯

这也能解释为什么 Pencil 做出来不像很多 AI 工具那样只有一个核心功能撑场面，而是从操作逻辑到工作流闭环，方方面面都有人认真想过。

Pencil.dev 所代表的趋势很清晰：设计和开发，会越来越变成同一件事。

传统的分工方式：设计师做图，开发者看图写代码，这个模式存在了几十年，但 AI 已经有能力把设计意图和代码生成之间的那道墙拆掉。

Pencil 只是这个方向上目前走得最靠前的那一个。

往后和 Claude Code、Copilot 这类 AI 编码工具深度融合，这类「AI 辅助产品开发平台」很可能会成为整个前端开发工作流的核心基础设施。

被封神，真的不是没原因。

这个产品在这个赛道里的完成度，目前就是不多见。

看到这里，辛苦啦。

感谢你的阅读和「在场」！

文章来自于微信公众号 "AI Humanist by杉森楠"，作者 "AI Humanist by杉森楠"