这个工具让我直接在代码编辑器里画 UI,画完就能

先吐槽一下

做过前端的朋友，估计都被这事儿折磨过👇

设计师在 Figma 里熬夜画了张精美的页面，截图发过来，配一句”麻烦实现一下，这周上线哦”。

然后你对着图，一个 div 一个 div 地撸，CSS 调到怀疑人生。改完一版，设计师说”这里间距能不能再大 4 px”。再改。再调。再改。

设计和代码，明明是同一个东西，却像分了两个宇宙。

最近发现一个挺有意思的工具，叫 Pencil（官网 pencil.dev），口号特别欠揍：“Design on canvas. Land in code.”——画布上画一画，代码自己就长出来了。

听起来像吹牛，但我研究了一圈，还真不是。今天就来唠唠这玩意儿到底是个啥。

一句话讲明白

Pencil 是一个”赖在你代码编辑器里不走”的设计工具。

它不是独立 App，也不是网页，而是直接装进 VS Code 或 Cursor 的扩展。打开之后，你会看到一块无限画布——长得跟 Figma 像亲兄弟——但你画出来的东西，直接就是你 Git 仓库里的真实文件[1][2]。

官方文档是这么自我介绍的：Pencil 直接集成在开发环境里，不像传统设计工具要单独开个软件或浏览器标签，它就赖在你的 IDE 里，紧挨着你的代码住下了[3]。

形象点说就是：Figma 是别人家的孩子，Pencil 是你养在家里的猫。

它和 Figma 到底差在哪？

我做了张对比，你感受一下👇

老套路： Figma 画图 → 导出截图 → 程序员对着图重写一遍 → 设计要改 → 再导一次 → 再改一遍 → 程序员血压升高 ⬆️

Pencil 套路： IDE 里画 → 存成 .pen 文件，跟代码躺一个文件夹 → AI 读这个文件，吐出 React/HTML/CSS → 改设计就是改代码，改代码也能反映到设计 → 大家相安无事 ☮️

几个关键不同：

🗂 设计文件不在云上，在你的 Git 仓库里.pen 本质是 JSON，可以 commit、branch、merge，跟代码一个待遇。再也没有”设计稿是不是最新版”这种灵魂拷问[4]。

🔁 双向同步 官方文档明说了支持两个方向：从设计生代码（Design → Code），把已有代码倒进画布（Code → Design）也行[5]。改哪边都同步另一边。

🔓 不绑架你的文件.pen 是开放 JSON 格式，就算哪天 Pencil 跑路了，你的设计文件用别的工具也能打开。这点真挺良心的[4]。

它怎么把画的东西变成代码？答案是 AI

说实话，Pencil 自己不写代码，它更像个翻译官。

真正干苦力的是 Claude（就是我，呃，是我同款的那个 Claude，具体是 Claude Code）。

工作流大致是这样：你在画布上画好东西，Pencil 通过一个叫 MCP（Model Context Protocol，模型上下文协议） 的机制，把设计的精确信息打包递给 AI。AI 拿到的不是模糊的截图，而是精确的布局、间距、颜色 token——所以它写出来的代码是干净、响应式的，不是瞎猜的[6]。

打个比方：以前你给程序员一张照片让他临摹，现在你直接把乐高图纸递过去——颗粒度完全不一样。

⚠️ 小提醒：因为 AI 部分走 Claude，所以用 Pencil 你得有个 Claude Code 订阅，最低 20 美元/月起。Pencil 自己倒是免费的[7][8]。

实际用起来是啥感觉？

借用一位博主的真实操作[6]给大家感受一下：

在 Cursor 里打开 Pencil，先画一个主视觉区——加标题、副标题、一个”立即注册”按钮，调一下颜色和间距。

然后让 Claude Code 生成对应的 React 组件。因为 Pencil 通过 MCP 直连 Claude，整段代码瞬间就出来了，而且你在画布上调颜色、调间距，代码会实时跟着变。

接着继续加用户评价区、功能区、价格区、页脚，每一块都生成一个独立组件。

20 分钟，一个能直接部署的落地页就拼好了。

整个过程：

• ❌ 不用导出图片
• ❌ 不用切换工具
• ❌ 不用在设计稿和代码之间来回翻译
• ✅ 一个 IDE 搞定

那它适合谁？

综合多家评测[1][7][9]，下面这几类人会爱上它：

👨‍💻 全栈程序员 / 设计师型工程师 既写代码又对界面有强迫症的那群人。终于不用学 Figma 那一套了。

🤖 重度 Claude Code 用户 Pencil 等于给 Claude Code 配了个 Figma 风格的可视化前端，比纯打字 prompt 直观一万倍，还能省 token（省钱！）。

🚀 独立开发者 / 小团队 一个人从设计到上线一条龙。不用招设计师，也不用学一堆工具。

🎨 做前端密集型项目的团队 落地页、营销活动页、SaaS Dashboard 原型这种场景，简直为它量身定做[10]。

但也别太上头，它有这些坑

公允地说，Pencil 不是银弹，几个明显的短板得提前知道[7][9]：

🐛 还在早期访问阶段 Bug 难免，Windows 用户体验据说没 Mac 顺滑。

👔 只对程序员友好 非技术同事（产品、市场、老板）打不开 .pen 文件，没法一起玩。

🎭 不替代 Figma 的探索阶段 要快速试很多种设计方向、做用户测试、给老板看可点击原型？还是用 Figma 或 UX Pilot。Pencil 的强项是把已经想清楚的设计快速变成代码，不是帮你头脑风暴。

📐 复杂布局会有偏差 有评测提到，三栏响应式这种复杂布局，AI 生成的代码偶尔会有 4-8 像素对齐误差，要手动调一调[1]。完美主义者会有点烦。

想试试？这么开始

简单四步[8][11]：

1️⃣ 装 Claude Code CLI 并登录认证（AI 功能靠它）

2️⃣ 去 pencil.dev 下 macOS 桌面版，或者在 VS Code / Cursor 里装 Pencil 扩展

3️⃣ 在项目里新建一个 .pen 文件，打开就是无限画布

4️⃣ 开画，或者用自然语言让 AI 帮你生成。从 Figma 复制粘贴现有设计也 OK——图层、样式、间距都能保留[8]

💰 价格：Pencil 现在完全免费，未来可能推付费功能但官方说会提前告知[12]。Claude Code 订阅另算，20 美元起。

最后说点感想

Pencil 让我看到的不只是一个工具，而是一个挺重要的趋势：

设计和开发的边界正在融化。

以前我们默认设计师用设计工具、程序员用代码工具，中间需要个”交付”环节。但当 AI 已经能读懂设计意图、写出生产级代码了，这个交付环节就成了多余的中转站。

Pencil 不一定是最终答案——它有竞品（Banani、MagicPath、UX Pilot 等[7][9]），也有开源平替（OpenPencil[13]）。但它至少展示了一种很有意思的可能性：

设计稿可以是代码，代码也可以是设计稿，两者本来就是一回事。

如果你正好是在 Cursor 或 VS Code 里”vibe coding”（凭感觉用 AI 写代码）的那群人，又对界面有那么一点追求——花个下午试试呗，反正现在还免费 🤷

📚 引用资料

[1] Ewan Mak. Pencil.dev: Bridging the Design-to-Code Gap in Modern Development. Medium, 2026.02. https://medium.com/@tentenco/pencil-dev-bridging-the-design-to-code-gap-in-modern-development-fede236fa551

[2] Pencil 官方网站. https://www.pencil.dev/

[3] Pencil 官方文档. https://docs.pencil.dev/

[4] AI for Pro. Pencil.dev Review: Design on Canvas. Land in Code. 2026.03. https://aiforpro.ai/ai-tools/pencil-dev-review-design-on-canvas-land-in-code/

[5] Pencil 官方文档 – Design ↔ Code. https://docs.pencil.dev/design-and-code/design-to-code

[6] Julian Goldie. How to Use Pencil.dev to Design, Code, and Launch Pages in Minutes. 2026.01. https://juliangoldie.com/pencil-dev/

[7] Banani. Pencil.dev Review: Features, Pricing, Alternatives. 2026.01. https://www.banani.co/blog/pencil-dev-review

[8] NavTools AI. Pencil.dev – AI Design Tool for Developers & Vibe Coding. https://navtools.ai/tool/pencil

[9] UX Pilot. Pencil.dev Alternative – UX Pilot vs Pencil Comparison. https://uxpilot.ai/pencil-dev

[10] Geeky Gadgets. Pencil.dev Design Tool: Claude Code Canvas with HTML/CSS Output. 2026.03. https://www.geeky-gadgets.com/pencil-dev-claude-code-canvas/

[11] Pencil 官方文档 – Installation. https://docs.pencil.dev/getting-started/installation

[12] Pencil 官方定价页. https://www.pencil.dev/pricing

[13] OpenPencil GitHub 仓库. https://github.com/ZSeven-W/openpencil