在最近的一段时间里，开发者社区里冒出了一款名为 Pencil on Claude 的新工具。这名字听起来可能有点文艺，但它实际干的事，恰恰是中国数字江湖里最硬核的那一环——在代码的战场上，把设计和前端开发这两个长期互相看不顺眼的阵营，拉到同一张桌子前，用同一支笔说话。更关键的是，它不收费。
简单来说，Pencil 把一个无限大的设计画布，直接塞进了你习惯的编码环境里，无论是 Claude Code、OpenCode、Cursor，还是其他你熟悉的 AI 编程助手，都能跑起来。你不需要在 Figma 和代码之间来回切换，直接在画布里画界面，所有 UI 设计、布局、交互，都能跟代码融在一起。而且，这个设计文件本身就是代码库的一部分，你画完图，Pencil 就能直接生成可用的代码——HTML、CSS、React，或者你喜欢的任何技术栈。
说白了，Pencil 就是给“设计”和“编码”这俩老江湖，造了一座可双向通行的桥梁。
1 / Claude Code、OpenCode、Cursor 中结合 Pencil
Pencil 把 AI 的生成能力，跟一个可视化的交互界面绑在一起，重新定义了“用 AI 做设计”这件事。它的核心，是一块供 AI 袋里使用的无限画布——任何人都能在编码环境里直接设计、构建、甚至完成一个完整的应用。
这样一来，从 Figma 到代码的过渡，就变成了一场无缝衔接的接力。你可以直接把 Figma 里的设计复制粘贴到 Pencil 中，所有样式、布局、设置，一丝不差地保留下来。整个过程完全可控，也完全遵守你自己的项目规则和要求。最妙的是，它不花你一分钱。
这本质上是在消除设计到开发之间那道“人工交接”的摩擦——那些繁琐、重复、容易出错的环节，全被砍掉了。说白了，它让“从设计稿到可运行代码”这件事，变得像呼吸一样自然。
你别说，下面这几个例子，就是它在 Copilot Chat 里干出来的活：框架背景颜色转换，以及为一家公司设计仪表板——包含侧边栏、当前使用情况、历史记录表格，都是一句话的功夫，闪电般完成。
2 / 如何利用 Claude 这些 AI 工具来构建想要的设计
要上手，先打开 Anti-Gra vity 这个平台。Anti-Gra vity 最良心的地方在于，它能完全免费让你访问当前最先进的模型 OPS4.6——虽然有限制，但足够你玩出花来。
然后搜索 Pencil Dev 扩展程序，安装后用你的电子邮箱登录。登录完成，就能看到 Pencil 的文件系统了。
Pencil 的妙处在于，它可以跟你用的任何 AI 袋里一起工作。你一旦给了它上下文，它就能像 OpenAI Code、Claude Code 这样的编程工具那样，直接引用 Pencil 文件来协作。
Pencil 已经自带了不少 UI 组件包，开箱即用。
需要注意，有几个快捷键得记住，才能把工作流程跑顺。左侧的面板里，还有拖动、添加文本、添加形状之类的工具，这些都是用来操作画布的。
再举个例子。有人在 Kiro 里用 Claude 来构建一个 SaaS 着陆页，直接调用了 Pencil 里已有的 Lunaris 软件包。他只给了 AI 一段提示：“创建一个现代化的 SaaS 着陆页，参考 Lunaris UI 包（Halo 设计系统）和 Swiss Clean 样式”。
结果呢？Kiro 用 Pencil 协作，真的把这个完整的着陆页给搭出来了，看起来根本不像是 AI 随手生成的廉价货。你可以在一次运行后，直接对不同的图层做调整——改主题、改样式、改字体大小，还能用画布里的工具让特定部分完美对齐。最后，还能让 Claude 基于这个 Pencil 文件，帮你完成项目的编码工作——比如直接创建一个完整的 Next.js 项目。
说白了，你既可以在 IDE 里对着 Pencil 干，也可以直接用 Pencil 的桌面应用，体验再好一个量级——因为桌面版内置了 AI 袋里，能更轻松地调用这些软件包，生成质量更高的作品。
写在最后
以上这些，都是在 IDE 里面用 Pencil 干出来的活。当然，你也可以直接用 Pencil 桌面端，体验更完整——毕竟内置的 AI 袋里，加上更成熟的软件包库，能让你玩得更顺手。
