这个设计工具简直太神了，而且还是免费的……让一个人做设计看起来像整个团队的作品
https://pen.dev 是一个画布，可以导入现成的界面（Figma、网站、HTML），Claude 或 Codex 在上面操作，导出为代码
收藏 🔖
pen.dev 是什么？AI 智能体直接在画布上做设计，免费设计工具推荐
pen.dev 是一个面向软件构建的智能体画布，前身是 pencil.dev，由 High Agency Inc. 打造并获得 a16z speedrun 支持。它把设计画布与 AI 智能体结合在一起：你可以把现成界面导入画布，包括 Figma 的 .fig 文件、任意网页或 HTML，也能借助内置浏览器和 Chrome 扩展把网页内容粘贴成可编辑图层。随后 Claude、Codex、Cursor 等智能体可直接在画布上操作，帮你生成、修改和细化设计，最后把任意画帧一键导出为 HTML 与 CSS/Tailwind 代码。官方称其为「为大胆想法而生的智能体画布」，强调一个人也能做出接近团队水准的设计产出。
痛点是什么
传统设计流程里，设计师和开发者常被割裂在两端：设计稿在 Figma 里，代码在编辑器里，中间靠人工还原，反复沟通成本极高。想用 AI 帮忙，又往往只能对着聊天窗口描述需求，拿不到能直接编辑的图层和结构。更麻烦的是，很多项目并非从零开始，而是要在已有网站、已有组件或已有设计稿上继续改，可这些现成资产很难被顺畅地搬进 AI 能理解的工作环境。pen.dev 想解决的，正是这种设计资产、AI 能力与代码交付彼此脱节的困境。
主要功能特点
pen.dev 把导入、AI 协作与代码导出串成一条链路，让智能体真正参与到画布上的设计工作中，而不是停留在对话框里。
多来源导入画布
支持导入 Figma 文件、网页与 HTML，把现成界面变成可编辑图层，不必从零重画。
智能体直接在画布上设计
可接入 Claude、OpenAI、Gemini 等模型，也能通过 MCP、CLI 让编码智能体参与设计。
一键导出代码
任意画帧可导出为 HTML 与 CSS/Tailwind，设计成果能直接回流到开发流程。
为什么值得关注
它把导入现成资产、AI 在画布上动手、导出可交付代码三步压缩进同一个工具，对独立开发者和小团队尤其友好，也让设计与开发之间的交接变得更短。
设计与代码不再割裂
画布上的成果能直接变成前端代码，减少人工还原与反复对齐的成本。
兼容已有工作习惯
沿用 Figma、Sketch 的熟悉快捷键，并支持导入既有设计稿与网页，上手门槛低。
如果你正在寻找能把 AI 智能体真正用进设计流程的工具，可以前往 pen.dev 了解下载与文档。
官方：
推荐信息
Nett0
@nett0eth 2026年09月24日 16:07
