最近，一位开发者推出了一款名为Pencil on claude 的完全免费新工具，它引进了一种全新的设计方式，可以在编写代码的地方使用claude code、opencode、甚至Cursor和许多其他人工智能代理进行设计。
1 / claude code、opencode、Cursor 中结合Pencil
pencil 通过人工智能与交互式可视化界面相结合，重新定义了使用AI进行设计的方式。
Pencil的核心是一个供AI代理使用的无限设计画布。它允许任何人在编码环境中设计、构建甚至创建应用程序。
因此，「无需在Figma和代码之间来回切换，因为，可以像在Figma或者其他设计工具中一样，直接在画布中创建UI设计和布局，我的代码和设计融为一体」，设计文件直接存在于代码库中，并且可以用pencil生成实际的生产代码。无论是HTML、CSS、React，还是我使用了其他技术栈。
可以用 Pencil 从Figma 过渡到代码，整个过程非常流畅。我可以直接复制Figma设计并粘贴到Pencil中，所有样式、所有布局、所有设置都得以保留。
遵守我们项目规则和要求，同时在整个过程完全可控制。最棒的是，完全免费。它将消除设计与开发之间的人工交接这些繁琐/重复的环节。而且这是一款全新的设计工具，它肯定让我的整个的设计过程变得更加轻松、有趣。
以下是我在Copilot Chat中完成的框架背景颜色转换和为实用公司设计一个仪表板，包含侧边栏、当前使用情况和历史记录表格，都是闪电般的速度搞定。
2 / 如何利用claude 这些AI工具来构建想要的设计。
打开Anti-Gravity 了，Anti-Gravity最棒的地方在于，可以完全免费地访问最先进的模型ops4.6，虽然有访问量限制，但仍然可以免费访问。
搜索 Pencil Dev 扩展程序，应该能在这里找到它，它应该是排名靠前的，安装后需要使用自己的电子邮箱进行登录，登录完成可以看到以下pencil文件。
pencil的妙处在于它可以与我任何的AI代理配合使用，我一旦给它提供上下文，就可以像opencode、claudecode这样的编程工具直接与pencil文件引用在一起工作。
pencil已经支持很多不同的UI包供我们使用。
需要注意的是有一些快捷键需要留意，这样才能更好地使用工作流程。左侧面板，还有其他类型的工具，例如拖动、添动加文本、添加形状。这些工具是能帮住我们更好的使用画布。
以下是另外一个例子，我在kiro中使用claud 来帮我构建这个sass着陆页，该页面使用了pencil中已有的Lunaris软件包，而我只是给了AI这样一段提示「创建一个现代化的 SaaS 着陆页，参考 Lunaris UI 包（Halo 设计系统）和 Swiss Clean 样式」。
kiro使用pencil 进行协作并构建这个完整的着陆页，它看起来不像人工智能生成的粗糙作品，可以在一次运行完成后，对这些不同的图层进行调整，更改主题、样式、字体大小，并使用画布中的工具时期特定部分完美对齐。最后，我还能够使用claud基于pen文件，帮我完成项目的编码工作，这样我才能正在的访问它，比如让claud直接创建一个完整的next.js项目。
最后，以上皆是我在IDE里面对接pencil来帮我做的这一点，也能够使用pencil桌面端应用程序，可完成更好的设计，因为pencil内置的AI代理可以更轻松的使用这些软件包，直接从pencil库中生成更好的作品。
写在最后
最后，我真心愿意交接朋友，我也就是个普通写作者和技术爱好者，真心交AI追捧的朋友，我们一起卷卷AI。
关注我，获取更多编程/AI实战教程！
找我->Auwubai
