AI写的代码跑起来才知道样式丑,Pencil让你告别＂盲写＂

Pencil.dev 是什么？

简单来说，它是 Cursor 的"设计模式"。

你在 Cursor 里打开一个 .pen 文件，就会出现一个设计画布。你可以在画布上画 UI，或者让 AI 帮你画。看着效果调整，满意了，再让 AI 根据设计稿生成代码。

整个过程是先设计、后编码，而不是写完代码再看效果。

它基于 MCP 协议和 Cursor 集成，设计文件直接存在你的代码仓库里，可以用 Git 管理。

为什么说它解决了 AI 编程的痛点

现在用 Cursor 写前端，最大的问题就是 UI 这块太随缘了。

AI 擅长写逻辑、写函数、写接口调用，但让它画一个好看的界面？基本靠运气。你脑子里想的是简洁现代的卡片，它给你整出来的可能是上个世纪的表格风格。

传统的解决方案是什么？先在 Figma 画好设计稿，然后让 AI 照着实现。但这意味着你要在 Figma 和 Cursor 之间来回切换，而且 AI 也不一定能完美还原设计稿。

Pencil 的思路不一样：把设计画布直接搬进 IDE。

你跟 Cursor 说"画一个登录表单"，它不是直接生成代码，而是先在画布上画出来。你能立刻看到效果：输入框长什么样、按钮在哪个位置、整体配色怎么样。不满意？直接在画布上拖拽调整，或者继续用自然语言让 AI 改。

等视觉效果满意了，再说"把这个设计生成 React 代码"。这时候生成的代码，至少在 UI 层面是符合预期的。

这就是"所见即所得"——你先看到了设计效果，才去写代码。不用再"盲写"了。

几个让我觉得有用的点

Git 管理设计文件。Pencil 的设计文件是 .pen 格式，可以直接 commit、push、branch、merge。设计改了什么，git diff 一目了然。想回滚？git checkout。对开发者来说，这比 Figma 的版本历史好用太多了。

和 Figma 不冲突。如果你们团队有专门的设计师用 Figma，也没问题。设计稿可以直接从 Figma 复制粘贴到 Pencil，矢量、文字、样式都能保留。Figma 负责创意探索，Pencil 负责落地开发。

组件化思维。你可以把常用的 UI 元素做成组件，改一处全局更新。这和写 React 组件的思路一模一样，上手没有学习成本。

怎么用

以 VSCode 为例，打开插件中心搜索 "Pencil"，安装后重启一下就能用了。

重启后，在项目里创建一个 .pen 文件，比如 design.pen，双击打开就会进入设计画布。

接下来就可以在画布上画 UI 了。你可以手动拖拽元素，也可以用 AI 辅助。比如在 Copilot 聊天窗口里说"画一个登录表单"，它会直接在画布上生成。

效果满意之后，再让 AI 根据设计稿生成代码就行了。

什么场景下最有用

用 Cursor 写前端但总对 UI 不满意的人。这是最直接的场景。与其让 AI 直接生成代码然后反复调，不如先在画布上把效果调好，再生成代码。

没有设计师的小团队。全栈开发自己画 UI 是常态，但大多数开发者的设计能力有限。Pencil 让你能快速看到效果、快速调整，AI 辅助也能弥补一些审美上的短板。

需要快速出原型的场景。产品经理说"大概这样"，你直接在 Cursor 里画出来给他看。满意了再生成代码，不满意就继续改。整个过程不用离开 IDE。

Vibe Coding 爱好者。如果你已经习惯了用自然语言让 AI 写代码，现在可以用同样的方式做设计。"画一个深色主题的 dashboard"，AI 先画出来让你看，比直接生成代码靠谱多了。

写在最后

AI 编程发展到现在，逻辑代码已经写得很好了，但 UI 这块一直是短板。核心原因就是缺少视觉反馈——你没法在生成代码之前看到效果。

Pencil 的价值就在这里：它给 AI 编程加上了一个"预览层"。先看到效果，满意了再生成代码。这个工作流比"写代码→跑起来→发现丑→改代码→再跑"高效太多了。

如果你经常用 Cursor 写前端，但总觉得生成的 UI 不够满意，可以试试这个思路。