描述
pen.dev 是 High Agency Inc. 的一个代理设计画布，之前被称为 Pencil (pencil.dev)。该产品现在自我描述为用于构建软件，而不仅仅是静态屏幕：设计师和开发人员在一个开放的画布上工作，AI 代理可以与他们一起设计、完善现有工作或根据提示构建新屏幕。
阅读更多
该画布将设计保存在一种称为 .pen 的开放文件格式中，这是一种人和代理都可以读取和编辑的普通 JSON 文件，存储在与其描述的产品相同的代码库中。工作可以通过手动方式进行，使用来自 Figma 和 Sketch 的熟悉工具，如铅笔工具、渐变、组件和弹性布局，或通过指示代理草拟、完善或扩展屏幕。内置浏览器和 Chrome 扩展允许用户将任何网页、应用或设计直接导入画布作为可编辑层，Figma 文件，包括矢量、文本和样式，直接导入。
用户可以将自己的模型带入画布：pen.dev 支持 Claude、GPT、Grok、Qwen、Gemini、Kimi、DeepSeek 和 Minimax，通过现有的 ChatGPT 或 Claude 订阅、API 密钥或 MCP、WebMCP 或命令行连接。相同的 MCP 链接允许像 Claude Code、Codex、Cursor 或 Antigravity 这样的工具通过 pen.dev 的 CLI 无头设计，而无需打开画布。
其他画布功能包括称为 Vibe Shaders 的实时着色器效果、称为 AI Pen 的 AI 辅助图标和插图绘制、跨文件共享的组件库，以及一个定制的 WebGL 渲染管道，旨在保持在数千层或数十 GB 内容下的流畅。完成的作品可以以 PNG、JPEG、WEBP 或 PDF 格式以任意比例导出，或一键导出为 HTML 和 CSS 或 Tailwind，或作为可共享链接在任何浏览器中打开最新版本。内置幻灯片和演示模式可将画布工作转换为演示文稿。
pen.dev 目前是免费的；公司表示在收费之前会清楚地描述任何付费计划。它作为可下载的桌面应用程序以及 Chrome、VS Code、Cursor 和 OpenVSX 的浏览器和编辑器扩展发布，并得到了 a16z 的 Speedrun 计划的支持。它适合希望在视觉设计和工作代码之间无缝切换的产品设计师和小型软件团队，而不是寻找纯图形设计产品的团队。
- 类别AI UI/UX 设计工具
- 定价模式免费增值
- 部署桌面, IDE 扩展, CLI
- 平台macOS、Windows、Linux
pen.dev的核心功能
开放的 .pen 文件格式，代理可以原生读取和编辑
支持自带模型，兼容 Claude、GPT、Gemini、Grok、Qwen、Kimi、DeepSeek 和 Minimax
通过 MCP、WebMCP 和 CLI 连接，实现无头设计，支持 Claude Code、Cursor 或 Codex
内置浏览器和 Chrome 扩展，导入任何网页作为可编辑层
Figma 导入，保留矢量、文本和样式
定制的 WebGL 画布，旨在保持数千层的流畅性
Vibe Shaders 实现实时视觉效果和渐变
AI Pen 用于与代理生成图标和插图
一键导出为 HTML/CSS/Tailwind 或 PNG/JPEG/WEBP/PDF
幻灯片和演示模式，将画布工作转换为演示文稿
如何使用 pen.dev？
下载：获取 pen.dev 桌面应用程序或添加 Chrome、Cursor 或 VS Code 扩展。
开始画布：打开一个空白画布或从 Figma、网页或您自己的代码库导入设计。
连接模型：使用 Claude 或 ChatGPT 订阅登录，添加 API 密钥，或通过 MCP 链接代理。
设计或提示：使用铅笔工具和组件手动绘制，或请求代理构建或完善屏幕。
添加效果：在需要的地方应用着色器、渐变和 AI 绘制的图标。
导出或共享：导出为 HTML/CSS、图像格式或 PDF，或发送链接到最新版本。
pen.dev的使用案例
- 代理 UI 设计
- 设计到代码交接
- 网页克隆
- 通过 MCP 进行无头设计
