画布智能体
直接在画布上与智能体协作设计：可手动细化，也可让智能体代劳；支持 Claude、GPT、Grok、Qwen、Gemini、Kimi、DeepSeek、MiniMax 等模型。
官方说明 ↗
Pencil
AI TOOL PROFILE工具资料画布式 AI 设计工具，可接 Claude Code、Cursor 等智能体并用 MCP 设计
价格当前免费；Pro $16、Ultra $48/用户/月即将上线
平台Web / CLI / MCP
归类聊天对话
收录2026-10-10
复核2026-10-10
编辑评分
4.7 / 5
★★★★☆
Pencil编辑总结
Pencil（官网 pen.dev）是一个把智能体搬上设计画布的工具：可以把任意应用的一部分导入画布，让 Claude、GPT、Grok、Qwen、Gemini、Kimi、DeepSeek、MiniMax 等模型直接在画布上做设计，也能通过 MCP 连接 Claude Code、Codex、Cursor 等外部智能体，或用 CLI 无头设计。性能上自定义 WebGL 管线让数千图层平移缩放保持流畅，并给出 10000 张照片、10GB 内容、60fps 的数据。定价分 Free、Pro $16/用户/月、Ultra $48/用户/月与 Enterprise 定制档。短板是付费计划“Coming soon”，当前仅 Free 可用，且设计面向开发者工作流，非设计背景用户需适应。
Pencil是什么？
Pencil（域名 pen.dev，slug 记为 pencil-dev）是画布式设计工具，口号是“Never start from scratch”——可以把任意应用的任意部分导入画布。它把 AI 智能体直接放进设计画布：可以手动细化，也可以让智能体动手。使用的模型包括 Claude、OpenAI、Grok、Qwen、Gemini、Kimi、DeepSeek、MiniMax，可通过 ChatGPT 或 Claude 订阅、自有 API key、MCP、WebMCP 或 CLI 接入。
当前可确认的状态：完整的本地优先（local-first）编辑器、.pen 开放格式（纯 JSON、Schema 完全开放）、Figma/HTML 导入、HTML 与 CSS/Tailwind 一键导出、内置浏览器、Chrome 扩展、共享与评审，均已可用；付费计划标注“Coming soon”，上线前 pen.dev 保持免费。性能方面 10000 张照片、10GB 内容下保持 60fps。
个人探索者用 Free 档（每月 5 个 Agent days、25 次图像/SVG 生成）；每天产出的职业用户选 Pro，最多 3 个智能体并行；产品团队选 Ultra，最多 6 个智能体并行、团队共享用量池；企业客户走定制。开发者还可用 pen.dev CLI 无头设计，把设计接进 CI/CD。
Pencil核心功能
MCP 设计
通过 MCP 在画布智能体之外做设计：把 Claude Code、Codex、Hermes、Antigravity、Cursor 等任意智能体接到 pen.dev，还可用 CLI 无头设计。
官方说明 ↗WebGL 性能
自定义 WebGL 管线让数千图层在平移、缩放、编辑时保持流畅；给出 10000 张照片、10GB 内容、60fps、自动保存的性能口径。
官方说明 ↗导入导出
支持 .fig 文件导入或从 Figma 直接复制粘贴；内置浏览器与 Chrome 扩展可把任意网页变成可编辑图层；任意画板可一键导出 HTML 与 CSS/Tailwind。
官方说明 ↗完整设计功能
钢笔工具（可粘贴 SVG 代码）、着色器（shaders）、线/径/角/网格渐变、变量、组件与 Slots、flex 布局、像素网格、Figma 与 Sketch 同款快捷键等一应俱全。
官方说明 ↗开放格式 .pen
.pen 文件就是 JSON，Schema 完全开放，智能体可以原生读写设计文件，这也是它能与各类 CLI 智能体协作的基础。
官方说明 ↗行智能体
多个智能体各做各的任务互不等待：一个搭屏幕、一个探索备选方向、一个整理组件；Free 一次 1 个，Pro 最多 3 个，Ultra 最多 6 个。
官方说明 ↗共享与演示
发一个链接，任何人都可在浏览器打开最新版本；另有 Slides 视图与演示模式，可搭建幻灯片并直接演示。
官方说明 ↗Pencil值不值得用？
当你是开发者或设计工程师，想让 Claude Code、Cursor 这类智能体直接参与设计、并把设计稿一键导出为 HTML/CSS/Tailwind 时，pen.dev 很对口：.pen 是开放 JSON 格式，MCP 与 CLI 都通，Free 档现在就能白嫖完整编辑器。当你的付费功能依赖要马上兑现时要注意：Pro 与 Ultra 标注 Coming soon，付费计划上线前只有 Free，Agent days（每月 5 个）与图像生成（每月 25 次）有限。纯视觉设计师如果不需要代码与智能体链路，Figma 生态可能更顺手。
建议选它的情况
- 想把 AI 智能体接入设计流程的开发者
- 需要 Figma/网页导入并导出 HTML+Tailwind 的人
- 重视开放文件格式与本地 .pen 文件的用户
- 想多智能体并行探索设计方向的产品团队
不建议选它的情况
- 需要立即用付费档大额图像生成额度的团队
- 只用传统设计工作流、不需要智能体与代码导出的设计师
Pencil使用建议
入门先把路子走对
- 从免费档上手官方说明付费计划上线前 pen.dev 一直免费，直接用 Free 档体验完整本地编辑器、MCP 访问与分享评审。
- 导入别从零画用内置浏览器打开任意页面导入画布，或装 Chrome 扩展复制网页粘贴为可编辑图层；已有 Figma 文件可直接导入 .fig。
- 接你的智能体用 ChatGPT/Claude 订阅、自有 API key，或通过 MCP/WebMCP/CLI 接入；把 Claude Code、Cursor 等连上后就能在画布上下设计指令。
进阶省时间也省钱
- 管理 Agent daysAgent day 是你使用智能体的自然日，当天用量与 MCP 调用不限量，不用智能体的日子不计数；Free 每月 5 个，规划好集中使用。
- 用开放格式编程.pen 是纯 JSON、Schema 全开放，可写脚本批量改设计文件；配合 CLI 无头设计接入 CI/CD（Pro 以上有组织开发者密钥）。
- 按并行数选档Free 一次 1 个智能体、Pro 最多 3 个、Ultra 最多 6 个且全队共享用量池；多人协作时 Ultra 的共享池比按人头堆额度省。
Pencil适合谁用？
AI 应用开发者
推荐用 MCP 接 Claude Code、Codex、Cursor 等智能体，在画布上直接生成与修改界面，再导出代码回填项目。
设计工程师
推荐Figma 快捷键通用、HTML/CSS/Tailwind 一键导出、SVG 代码可粘贴，设计与代码一体化最贴合。
产品团队
推荐Ultra 档 6 个智能体并行、团队工作区与角色管理、共享用量池，适合多人协作探索。
传统 UI 设计师
有条件功能齐全但主打智能体与代码链路，若完全不用这些，付费档上线后的定价未必划算。
重度图像生成用户
不推荐Free 每月仅 25 次图像与 SVG 生成，Pro 350 次、Ultra 750 次，付费计划又未上线，短期内额度受限。
Pencil优点和缺点
优点
- 付费计划上线前完整编辑器免费使用
- .pen 为开放 JSON 格式，Schema 全部公开
- 支持 Claude Code、Cursor 等任意智能体经 MCP 接入
- 任意画板一键导出 HTML 与 CSS/Tailwind
- 自定义 WebGL 管线， 60fps 流畅度
缺点
- Pro、Ultra 等付费计划仍标注 Coming soon
- Free 档每月 5 个 Agent days、25 次图像生成
- 官网未提及移动端或桌面客户端形态
Pencil版本与计费对比
| 方案 | 价格 | 包含内容 | 说明 |
|---|---|---|---|
| Free | $ 0 | 5 Agent days / month，25 次图像与 SVG 生成，1 个智能体 | 完整编辑器、本地 .pen 文件、MCP 访问、CLI 与无头编辑器 |
| Pro | $ 16 / user / month | Unlimited Agent days，350 次图像与 SVG 生成，最多 3 个智能体并行 | Everything in Free，另含组织开发者密钥、角色管理、集中计费 |
| Ultra | $ 48 / user / month | Unlimited Agent days，750 次图像与 SVG 生成，最多 6 个智能体并行 | Everything in Pro，另含团队共享用量池与团队工作区 |
| Enterprise | Custom pricing | Unlimited usage | 在 Ultra 之上提供定制用量、价格与采购入职支持 |
以上为公开费率整理，厂商保留调价权利，实际以官方页面为准。
Pencil关键指标
| 指标 | 数值 | 数据来源 |
|---|---|---|
| 性能测试口径 | 10000 photos | https://www.pencil.dev |
| 内容承载量 | 10GB | https://www.pencil.dev |
| 帧率 | 60fps | https://www.pencil.dev |
| Pro 月费 | $ 16 / user / month | https://www.pencil.dev/pricing |
| Ultra 月费 | $ 48 / user / month | https://www.pencil.dev/pricing |
Pencil常见问题
Pencil 多少钱？＋
当前免费：官方定价页写着“Coming soon，付费计划上线前 pen.dev 保持免费”。即将上线的档位为：Free $0（每月 5 个 Agent days、25 次图像/SVG 生成）、Pro $16/用户/月（不限 Agent days、350 次生成、最多 3 个智能体并行）、Ultra $48/用户/月（750 次生成、最多 6 个并行）、Enterprise 定制。
它现在的主力能力是什么？＋
画布式设计加智能体协作：支持 Claude、OpenAI、Grok、Qwen、Gemini、Kimi、DeepSeek、MiniMax 等模型，可用订阅、API key、MCP、WebMCP 或 CLI 接入；.pen 开放 JSON 格式；Figma/网页导入，HTML+CSS/Tailwind 导出；自定义 WebGL 管线支撑数千图层流畅编辑。
和 Figma 比怎么选？＋
官网未提及 Figma 作为竞品的直接对比，但有两条可确认的相关信息：一是 Figma 的快捷键在 pen.dev 里通用，.fig 文件可导入；二是 pen.dev 的差异点在于智能体上画布、MCP/CLI 接入与 HTML 代码导出。如果你的核心诉求是 AI 智能体与设计代码一体化，它更合适；纯协作设计则需自行评估迁移成本。
国内能不能用？接入有什么限制？＋
官网未提及网络可用性或地区限制，无法确认国内访问情况。接入方面的明确规则是：各档都可用自己的智能体与订阅/API key；Agent day 内智能体用量与 MCP 调用不限量，不用智能体的日子不计数；Free 档一次只能跑 1 个智能体，每月 5 个 Agent days、25 次图像生成。
Pencil竞品对比
| 工具 | 编辑评分 | 价格 | 核心功能 | 平台 |
|---|---|---|---|---|
| Pencil本工具 | 4.7 | 当前免费；Pro $16、Ultra $48/用户/月即将上线 | 画布智能体；MCP 设计；WebGL 性能；导入导出 | Web / CLI / MCP |
| CommandDash | — | 未标价 | 在 IDE 中集成 AI,提供上下文代码建议 | — |
| CodeAssist | — | 未标价 | CodeAssist 是一个自然语言聊天机器人，能在 IDE 中编写代码并回答问题 | Web |
| Piny | — | 免费版 $0；Pro 年付 $120/年、月付 $15/月（限时 35% 折扣） | 在 IDE 中为 Astro、React、Next.js 和 Tailwind CSS | VS Code 扩展 / Cursor / Windsurf |
| Sweep AI | — | 未标价 | 用于自动化软件任务和在 JetBrains IDE 中编码的 AI 助手 | — |
| Onform | — | 未标价 | 原生支持 MCP 的平台，支持使用自然语言和 AI 工具构建对话式表单 | — |
