pen.dev最新版

pen.dev（原名 pencil.dev）是一款面向软件构建的 agentic canvas （智能体驱动的画布）工具，其核心目标是将设计活动直接锚定在开发环境中。它把无限矢量画布与 AI 代理深度耦合，使界面设计不再产出静态交付物，而是生成可版本控制、可直接参与编码流程的 .pen 文件。这种“Design where you code”的理念，旨在消除传统设计稿与代码实现之间的语义断层和交接损耗。

该工具兼容 Claude、OpenAI、Grok、Qwen、Gemini、Kimi、DeepSeek、Minimax 等主流大模型，支持通过订阅、API Key、MCP、WebMCP 或 CLI 多种方式接入。用户既可手动精细调整画布元素，也可启动代理用自然语言生成或修改界面，实现人机协同的“vibe designing”模式。

多形态产品矩阵：从桌面到 IDE 的无缝覆盖

pen.dev 提供五种互补的产品形态，适配不同工作场景：

• 桌面应用：原生性能，支持 macOS（Apple Silicon/Intel）、Windows x64（ARM64 即将推出）、Linux（AppImage/Tarball）。具备完整画布能力与内置 Agent 面板。
• IDE 扩展：集成于 Cursor、VS Code、Antigravity、Windsurf 等编辑器，打开 .pen 文件即进入画布，设计与代码在同一窗口切换。
• CLI 工具：npm install -g @pen.dev/cli（需 Node.js 22.19+），支持无头模式下用提示词创建/修改设计、导出图片、交互式 MCP 操作，适合 CI/CD 或自动化流水线。
• Chrome 扩展：一键将网页或选中 DOM 元素导入画布，避免从零重建现有界面。
• MCP 集成：允许 Claude Code、Codex、Cursor 等外部代理双向读写画布——读取样式状态、执行编辑命令、甚至触发浏览器相关能力，使设计成为可编程的开发资源。

核心设计能力：高性能画布与开放格式

pen.dev 的画布引擎基于自定义 WebGL 管线，官方宣称可流畅处理数千图层、10GB 内容或 10,000 张照片仍保持 60fps。关键功能包括：

• 导入生态：支持 HTML 解析、Figma 文件（.fig 或剪贴板粘贴）、内置浏览器抓取任意网页，践行“Never start from scratch”原则。
• 组件系统：可复用组件、Slots、跨文件同步的 UI Libraries、设计变量（Variables），支撑设计系统建设。
• 绘制与效果：Pen 工具（路径/曲线/SVG 粘贴）、AI Pen（代理生成图标插画）、实时 Shaders、多种渐变（线性/径向/角度/网格）、像素网格对齐。
• 布局与编辑：Flex 布局、智能吸附（Snapping）、尺寸测量、图层面板、Figma/Sketch 风格快捷键，降低迁移成本。
• 导出与分享：多倍率 PNG/JPEG 导出、一键生成 HTML + CSS/Tailwind、Slides 模式、链接分享（他人浏览器实时查看最新版）。

.pen 文件采用开放 schema，可直接纳入 Git 仓库进行分支、合并与 diff，使设计资产获得与代码同等的工程化管理能力。

AI 代理工作流：上下文感知与技能扩展

AI 不是附加功能，而是画布的一等公民：

• 上下文自动注入：选中画布元素时，其样式、结构、层级关系自动作为代理上下文；还可附加图片、文件等额外参考。
• Skills 机制：内置行业标准设计技能（如响应式断点、无障碍对比度检查），也支持自定义 Skill，通过 / 命令或菜单调用，规范代理输出质量。
• 外部代理协作：通过 MCP 协议，外部代理可完整操作画布，包括读取设计令牌、批量修改组件、启动子代理处理复杂任务，形成多代理协作的设计-开发闭环。
• CLI 无头生成：在自动化脚本中用 --prompt 参数直接生成或修改 .pen 文件，适用于设计模板批量生产或回归测试。

适用场景与当前状态

pen.dev 特别适合以下团队或个人：

• 已使用 Cursor、Claude Code 等 AI 编程工具，希望设计环节同样获得代理增强
• 设计师与开发者需高频协作，厌倦 Figma → 代码的重复翻译
• 需要从现有产品/网页快速提取并迭代界面，而非重绘
• 希望设计系统与代码库真正同步，变量/主题变更自动反映

目前 pen.dev 免费使用，后续可能引入付费功能。项目仍处于快速迭代期，核心价值在于“画布 + 代理 + 代码”三位一体的闭环体验。对于追求设计-开发一体化的团队，它提供了一个比传统设计工具更贴近工程现实的选择。