Pencil 亮相：把 Claude Code 搬进无限画布，直接在 IDE 里画 UI 调代码

过去这几年，设计师在 Figma 里画好界面，导出设计稿，工程师在 IDE 里看着静态图一行行敲代码，改个文案或者调整间距都要来回扯皮。哪怕有了 AI 辅助写代码，面对生成的散装页面，修修补补依然让人头大。

一款名为 Pencil 的新工具最近引发了不少关注。它把无限画布直接搬进了开发者的集成开发环境（IDE）里，并且深度绑定了 Claude Code。只要登录 Claude Code 账号，你就可以在代码环境里一边画界面，一边实时生成并同步前端代码。

把画布直接搬进开发环境

传统的矢量设计软件一般独立于代码仓库运行，改完图再找人交付，而 Pencil 选择直接寄生在 IDE 中。

它采用无限画布设计，没有固定尺寸画板的束缚。无论你是做多页面流程、复杂的后台仪表盘，还是整套设计系统，都能在一个画布里自由缩放和排布。

支持自己动手从零绘制，也能直接导入 Figma 文件。更有意思的是它的交互式操作体验：画布里的文案不对，或者某个组件颜色看着别扭，直接用鼠标在画布上手动修改就行，不需要像以前那样跳回代码文件里找位置改参数。

在这背后，Claude Code 会实时保持界面与代码库的一致性，不仅同步生成结构化代码，还会主动针对响应式布局、无障碍访问和性能优化提出修改建议。

专治 AI 的「蓝紫色审美」

经常用 Claude 写界面的开发者大概都有体会：如果不给严苛的样式限制，它很容易端出一套千篇一律的「蓝紫色科技风」UI。

Pencil 的应对方式比较讨巧。它内置了几套现成的设计组件库，让 Claude 严格按照选定组件库的风格来生成前端代码，从而规避了模型默认配色的尴尬。

如果拿它和 Google 的 Stitch 对比，两者的取舍很明显。Stitch 必须手动去改底层代码，而 Pencil 支持直观的可视化拖拽和手动微调；但代价在于，Pencil 目前可选的组件风格相对有限，相比之下，Stitch 里由 Gemini 驱动的前端审美多样性会更强一些。

这种把所谓「Vibe Design」做成实用工具的做法，很快在 X 和 LinkedIn 上传开，不少尝鲜的工程师和设计师都在晒自己提升效率的演示。

为什么重要

我们认为，Pencil 踩中了一个极其明确的需求：AI 编程助手不能只停留在命令行和对话框里，前端开发天然需要视觉反馈。

对全栈工程师和独立开发者来说，它的价值很直观。很多人最头疼的就是写 CSS 和微调样式，现在能在 IDE 内部直接导入设计、在画布上像修图一样改文字和颜色，同时让 AI 吐出规范代码，搭建 MVP 的门槛被大幅拉低。如果你手里正有需要频繁迭代界面的全栈项目，它很值得一试。

从行业演进来看，前端工具正在从单纯的「对话生成代码」转向「实时双向绑定的可视化工作流」。以前是人把设计翻译成代码，后来是 AI 试着翻译，而 Pencil 试图把设计和代码放在同一个环境里共同生长。

它的聪明之处在于引入预设组件库，把不可控的大模型收拢在成熟的规范里。不过隐患也在这里：如果官方组件库扩充不够快，大家做出来的应用很快又会陷入新的同质化；此外它必须依赖 Claude Code 登录体系，也让用户的使用范围受到了一定制约。但无论如何，把画布嵌进 IDE 这一步，方向走得很准。