pen.dev

AI Agent驱动的设计画布工具

免费增值

AI图像/设计

AI智能体

更新于2026年11月10日

产品简介

pen.dev 是由 High Agency 团队打造的 AI 代理驱动型设计画布工具，前身为 Pencil（pencil.dev），2026 年完成品牌切换后统一以 pen.dev 对外提供服务。产品定位为“面向代码库的代理式画布（agentic canvas）”，主张“绝不从零开始”——可直接把线上网页、本地开发项目、Figma 文件或 HTML 页面导入画布，转为可编辑的矢量图层与组件，再让 Claude、ChatGPT、Gemini、Qwen、DeepSeek 等模型在画布上生成与精修界面。pen.dev 同时提供桌面端、VS Code / Cursor 插件与命令行工具，设计文件采用开放的 .pen（JSON）格式，可随代码进入 Git 仓库；通过本地 MCP 服务，Claude Code、Codex、Cursor 等编码代理能直接读写画布，把视觉设计、组件结构与前端代码放在同一工作流里。与纯“截图式 AI 出图”工具不同，pen.dev 的生成结果保持完全可编辑，支持手动微调、变量、组件库、实时着色器与一键导出 HTML / CSS / Tailwind / React 代码，主要服务设计工程师、前端开发者与需要快速做产品视觉迭代的小团队。

主要功能

代理式画布生成：在无限画布上用自然语言驱动一个或多个 AI 代理并行生成落地页、移动端界面、营销图与组件板，生成结果均为可继续精修的设计图层而非静态图片。
多模型与多代理接入：支持连接 ChatGPT、Claude 订阅或自带 API Key，兼容 Gemini、Grok、Qwen、Kimi、DeepSeek、MiniMax 等模型，可并行运行最多六个代理做风格比稿与分工迭代。
现成网页与本地项目导入：内置浏览器可打开公开网址或 localhost 开发服务，把整页或单个元素抓取为可编辑图层，也支持 Figma 文件导入与 Chrome 插件抓网页，避免空白画布起步。
代码双向工作流：通过本地 MCP 服务让 Claude Code、Codex、Cursor 等代理读写 .pen 文件，从设计稿生成 React、Next.js、HTML、Tailwind 代码，也可把现有代码库结构还原到画布。
专业级矢量编辑能力：提供钢笔路径、曲线编辑、SVG 粘贴、组件与槽位、变量主题、弹性布局、测量标注、像素网格、渐变与实时着色器，保留接近 Figma 的手动精修体验。
开放格式与工程化导出：.pen 文件为公开 JSON 规格，可进 Git 版本管理；支持一键导出 HTML、CSS、Tailwind、PNG、JPEG、WEBP、PDF，以及 CLI 无界面批处理与脚本化设计操作。
高性能渲染与协作预览：基于自定义 WebGL 管线，在万级图层下保持平移缩放流畅；支持链接分享、快照、版本、评论与演示模式，便于评审和轻量交付。

使用方法

访问 pen.dev 下载桌面端（macOS / Windows / Linux），或安装 VS Code、Cursor 插件与 pen.dev CLI，完成邮箱激活登录。
在项目中新建 .pen 文件，将设计文件与源码放在同一仓库目录，方便代理同时理解画布结构与代码上下文。
在设置中开启 MCP 服务，连接 Claude Code、Codex、Cursor 等外部代理，或直接在画布内登录模型订阅、配置 API Key。
用内置浏览器导入现有网页 / Figma 文件，或直接输入提示词，让代理生成首屏、仪表盘、移动端页面等画板。
选中图层后用手动面板微调布局、颜色、字体、组件与变量，或继续给代理下指令做改版、比稿与多方案迭代。
确认视觉后，让代理按目标框架生成代码，导出 HTML / Tailwind / React 组件，并在真实应用中验收响应式与交互行为。

产品价格

Free 免费版：0 美元；包含完整本地编辑器、无限 MCP 调用、本地 .pen 文件、导入导出与 CLI；每月 5 个“代理设计日”、25 次图片与 SVG 生成、托管模型有限额度，单次仅 1 个代理。
Pro 专业版：16 美元 / 用户 / 月（年付约省 20%）；去掉代理日限制，每日可用代理，含托管模型额度、每月 350 次图片与 SVG 生成、最多 3 个并行代理、组织级密钥与成员权限。
Ultra 团队版：48 美元 / 用户 / 月；在 Pro 基础上扩展模型额度与生成次数，最多 6 个并行代理，团队共享额度与团队工作区。
Enterprise 企业版：自定义报价；基于 Ultra 提供定制用量、采购对接、权限治理与专属支持。
模型费用说明：自带 ChatGPT / Claude 订阅或 API Key 时不消耗 pen.dev 托管模型额度，仅按第三方模型账单计费；MCP 调用本身不额外收费。

应用场景

前端项目的视觉快速迭代：把手上正在开发的网页或本地服务导入画布，让代理改配色、排版与组件样式，再导出代码回仓库，省去从空白稿重画原型的成本。
设计工程师的提示词到界面工作流：用自然语言生成落地页、后台仪表盘、移动端流程，在画布上精修后直接产出可交付的 HTML 与 React 组件。
多模型风格比稿与方案探索：并行运行多个代理测试不同模型对同一切面的理解，快速产出视觉方向、营销图与 A/B 版式供团队筛选。
代码库配套的可版本化设计资产：把界面结构存为 .pen JSON 随代码进 Git，让 Claude Code、Cursor 在 PR 内同时评审设计与实现，减少设计交付断层。
现有网页与 Figma 素材复用：将线上页面、竞品界面或 Figma 组件转为可编辑图层，基于真实布局做改版，而不是凭空临摹。
独立开发者与小团队的轻量原型制作：无需完整设计团队即可完成产品早期视觉、演示稿与组件系统搭建，适合创业项目、内部工具与概念验证场景。