pen.dev
运行在 IDE 内的智能体画布与矢量设计工具，让设计与代码同处一室
工具介绍
pen.dev 是一款运行在开发环境中的矢量设计工具，它不依赖独立应用或浏览器标签页，而是与代码并排存在于 IDE 内。用户可以在画布上与 AI 智能体协作完成设计，将画布内容导出为 HTML 与 CSS/Tailwind 代码，也可以把设计组件与代码同步，借助 AI 助手保持设计与实现的一致性。它支持接入 Claude、OpenAI、Grok、Qwen、Gemini、Kimi、Deepseek、Minimax 等多种模型，并可通过 ChatGPT 或 Claude 订阅、API Key、MCP、WebMCP 或 CLI 使用。此外，pen.dev 提供 Chrome 扩展用于把网页复制为可编辑图层，支持 Figma .fig 文件导入与直接复制粘贴，并采用开放的 .pen JSON 设计文件格式。
核心功能
- 智能体画布设计：在画布上与 AI 智能体协作完成软件与界面设计，并可将结果导出回代码。
- 多模型接入：支持 Claude、OpenAI、Grok、Qwen、Gemini、Kimi、Deepseek、Minimax 等多种模型提供商。
- 多种使用方式：可通过 ChatGPT 或 Claude 订阅、自备 API Key，或经 MCP、WebMCP、CLI 连接使用。
- MCP 与 CLI 集成：为外部编码智能体提供 MCP 接口，并支持通过 CLI 进行无头设计。
- 一键 HTML 导出：可将任意画框一键导出为 HTML 及 CSS/Tailwind 代码。
- Figma 与网页导入：支持导入包含布局、样式和图片的 Figma .fig 文件，也可直接复制粘贴；Chrome 扩展可将网页复制为可编辑图层。
使用方法
- 1在 IDE 中打开 pen.dev，进入其画布环境。
- 2在画布上提出已确认的设计任务，与 AI 智能体协作完成界面与组件设计。
- 3将设计组件与代码同步，借助 AI 助手保持设计与实现的一致性。
- 4检查生成结果，并将画框导出为 HTML 与 CSS/Tailwind 代码。
常见问题
pen.dev 是什么类型的工具？
pen.dev 是一款运行在 IDE 内的矢量设计工具，定位为用于构建软件与设计想法的智能体画布。它与代码并排存在于开发环境中，而不是运行在独立应用或浏览器标签页里。
pen.dev 如何把设计与代码衔接起来？
pen.dev 让用户设计组件、将组件与代码同步，并借助 AI 助手保持设计与实现的一致性；画布上的画框还可以一键导出为 HTML 及 CSS/Tailwind 代码。
pen.dev 可以导入已有的设计或网页吗？
可以。pen.dev 支持导入包含布局、样式和图片的 Figma .fig 文件，也支持直接从 Figma 复制粘贴；此外还提供 Chrome 扩展，可将网页复制并粘贴到画布上成为可编辑图层。
pen.dev 的画布支持哪些设计产出形式？
pen.dev 的画布可用于设计软件与界面，并支持 Slides 视图与演示模式，用于构建和展示幻灯片；画布内容还可导出为 HTML 与 CSS/Tailwind 代码。
pen.dev 的 .pen 设计文件是什么格式？
pen.dev 使用开放的 .pen 设计文件格式，它本身是一个 JSON 文件，schema 完全开放，便于智能体原生地处理设计文件。
