pen.dev

pen.dev是什么

pen.dev 是一款面向设计师和开发者的 AI Design Canvas（AI设计画布）。

平台将传统设计工具中的画布、图层、组件、变量、布局和设计系统能力，与 AI Agent 和开发工具结合起来。

用户可以直接在画布中描述需求，让 AI Agent 创建页面、组件和视觉设计，也可以导入已有网页、HTML、Figma 文件或代码，将现有内容转换为可继续编辑的设计。

pen.dev 的核心理念是打通：

设计 → AI生成 → 人工调整 → 代码生成 → 开发

这一完整工作流程。

pen.dev核心功能

pen.dev AI设计画布

pen.dev 提供可编辑的矢量设计画布。

用户可以在画布中创建：

网页界面
App界面
UI组件
产品原型
营销页面
演示文稿
插画
图标
视觉效果

同时可以使用 AI Agent 直接修改当前设计。

pen.dev AI Agent

AI Agent 是 pen.dev 的核心能力之一。

用户可以直接通过自然语言描述设计需求，例如要求创建登录页面、调整布局、修改按钮、增加组件等，AI Agent 会直接操作画布。

官方将这种工作方式称为 vibe-designing。

pen.dev多模型支持

pen.dev 可以连接不同 AI 模型和 AI 服务。

官方页面目前列出了：

Claude
OpenAI
Grok
Qwen
Gemini
Kimi
DeepSeek
MiniMax

等模型或服务。

同时可以使用 ChatGPT 或 Claude 订阅，也可以配置 API Key，或者通过 MCP、WebMCP 和 CLI 连接外部 AI 工具。

pen.dev Design to Code

pen.dev 支持从设计直接生成代码。

设计完成后，可以让 AI Agent 根据画布中的设计生成：

HTML
CSS
Tailwind CSS
React
Next.js
TypeScript
Vue
Svelte

等代码。

同时可以指定 Shadcn UI、Radix UI、Chakra UI、Material UI 等组件库。

pen.dev Code to Design

除了设计转代码，pen.dev 也支持代码转设计。

AI Agent 可以读取项目中的已有组件，然后将其重新创建到 pen.dev 画布中。

例如可以读取 React、TypeScript、Vue、Svelte 或 HTML/CSS 项目中的组件，并在画布中生成对应的可编辑设计。

pen.dev Figma导入

pen.dev 支持导入 Figma 文件。

官方页面说明可以直接导入 .fig 文件，也可以从 Figma 复制内容到 pen.dev 中继续编辑。

pen.dev HTML导入

平台支持将网页导入为可编辑图层。

可以通过内置浏览器打开网页，也可以使用 Chrome 扩展将网页或网页中的元素复制到画布中。

pen.dev内置浏览器

pen.dev 内置浏览器，可以打开网页并直接将页面内容导入画布。

这使得已有网站可以成为新的设计参考或编辑对象。

pen.dev组件系统

支持创建可复用组件，并通过组件覆盖能力快速生成不同页面和状态。

同时支持 UI Libraries，可以在多个文件之间共享组件集合。

pen.dev设计变量

支持使用 Variables 管理：

颜色
间距
字体
设计参数

等内容。

通过统一变量，可以帮助多个页面保持设计一致性。

pen.dev实时Shader

平台提供实时 Shader 能力，可以在设计画布中创建：

渐变
纹理
光效
动态视觉效果

等视觉效果。

官方将这一能力称为 Vibe Shaders。

pen.dev AI Pen

pen.dev 提供 AI Pen 能力，可以通过 AI Agent 辅助创建图标、插画以及 SVG 等视觉元素。

同时支持传统 Pen Tool，可以直接绘制路径、编辑曲线以及粘贴 SVG 代码。

pen.dev Slides

平台支持 Slides 和 Presentation Mode，可以使用设计画布创建演示文稿和幻灯片。

pen.dev HTML导出

设计完成后，可以直接导出 HTML，并生成 CSS 或 Tailwind CSS。

因此可以将 pen.dev 用作从视觉设计到前端页面实现的中间工作台。

pen.dev开放设计格式

pen.dev 使用 .pen 作为设计文件格式。

官方说明 .pen 本质上是 JSON 文件，并且其 Schema 完全开放，使 AI Agent 可以直接理解和操作设计文件。

pen.dev MCP

pen.dev 支持 MCP，可以让外部 AI Agent 直接操作 .pen 设计文件。

目前可以与：

Claude Code
Codex
Gemini CLI
Antigravity
OpenCode
Kiro CLI
Claude Desktop

等工具进行集成。

外部客户端通过 MCP 与运行中的 pen.dev 桌面应用或 IDE 环境通信。

这使 pen.dev 不再只是一个独立设计软件，而可以成为 AI Coding 工作流中的设计层。

pen.dev CLI

pen.dev 提供命令行工具，可以直接在终端创建和编辑 .pen 文件。

目前官方 CLI 可以执行：

创建设计
修改设计
AI Agent任务
批量处理
PNG导出
JPEG导出
WEBP导出
PDF导出

等操作。

官方当前文档要求 CLI 使用 Node.js 22.19 或更高版本，安装方式为 @pen.dev/cli。

pen.dev IDE集成

pen.dev 可以直接集成到开发环境。

目前官方提供：

Cursor
VS Code
Antigravity
Windsurf
Open VSX

等 IDE / 编辑器扩展。

这样开发人员无需频繁在设计软件和代码编辑器之间切换，可以直接在开发环境中使用设计能力。

pen.dev支持的平台

目前官方提供桌面应用和 IDE 扩展。

桌面端包括：

macOS Apple Silicon
macOS Intel
Windows Intel/AMD x64
Linux x64
Linux ARM

Windows ARM64 版本目前显示为 Coming soon。

pen.dev产品优势

AI原生设计： AI Agent 可以直接操作设计画布。
设计与代码打通： 支持 Design to Code 和 Code to Design。
多模型支持： 可以连接 Claude、OpenAI、Gemini、Qwen、Kimi、DeepSeek 等模型。
Figma兼容： 支持导入 .fig 文件。
网页导入： 可以将网页转换为可编辑设计图层。
MCP支持： 可以连接外部AI Agent。
CLI支持： 可以在终端中创建和编辑设计。
IDE集成： 支持 Cursor、VS Code 等开发环境。
开放格式： .pen 文件采用开放 JSON 格式。
前端代码导出： 支持 HTML、CSS、Tailwind 等代码输出。

pen.dev应用场景

pen.dev AI UI设计

通过自然语言快速生成网页和应用界面。

pen.dev产品原型设计

用于快速制作产品原型、交互页面和产品概念设计。

pen.dev设计转代码

设计完成后直接生成前端代码，减少设计和开发之间的转换工作。

pen.dev代码转设计

将现有代码中的组件重新创建到设计画布中，用于视觉检查和设计迭代。

pen.dev AI编程辅助

结合 Cursor、Claude Code、Codex 等工具，让 AI Coding 工作流同时具备设计能力。

pen.dev网页复刻

导入已有网页，将网页转换为可编辑设计层，然后进行二次设计。

pen.dev设计系统

通过 Components、Variables 和 UI Libraries 建立可复用的设计系统。

pen.dev使用教程

第一步：下载pen.dev

进入 pen.dev 官方网站，根据操作系统下载桌面应用。

也可以安装 Cursor、VS Code 等 IDE 扩展。

第二步：创建.pen文件

新建一个 .pen 文件作为设计项目。

第三步：连接AI模型

在设置中连接 OpenAI、Claude、Gemini 等 AI 服务，或者使用支持的订阅和 API Key。

第四步：描述设计需求

通过 AI Chat 描述需要创建的页面或组件。

例如：

“创建一个现代化AI工具导航网站首页，包括顶部导航、搜索框、工具分类和热门工具区域。”

第五步：AI生成设计

AI Agent 根据描述直接操作画布，创建页面结构和视觉元素。

第六步：人工调整

通过画布、图层、组件、变量等设计工具进一步调整页面。

第七步：生成代码

通过 AI Agent 将设计转换成 React、Next.js、HTML、Tailwind 等代码。

第八步：进入开发环境

将 .pen 文件与代码项目放在同一工作区，可以继续使用 Cursor、VS Code、Claude Code、Codex 等工具进行开发。

pen.dev收费标准

pen.dev 当前提供免费使用路径，同时提供 pen.dev Pro 相关模型和服务。

官方文档说明，模型选择器中标记为 pen.dev Pro 的模型使用 pen.dev 账户对应的服务。

目前公开的官方 EULA 也说明，pen.dev 如果推出付费或企业功能，可以针对这些功能提供额外条款。

由于官方当前公开页面没有完整展示统一的长期套餐价格，因此不建议自行填写具体月费。

收费标准：提供免费使用能力，并提供 pen.dev Pro 等付费能力；具体套餐、额度和价格以 pen.dev 当前账户及官方价格页面为准。

pen.dev常见问题（FAQ）

pen.dev是什么？

pen.dev 是一款 AI 原生设计画布，将 AI Agent、UI设计、设计系统和代码开发结合起来。

pen.dev是AI绘画工具吗？

不是。

虽然 pen.dev 支持插画、图标、SVG、Shader 等视觉设计能力，但核心定位是AI设计与设计转代码工具，重点在 UI、网页、组件、设计系统和开发工作流。

pen.dev是Figma的替代品吗？

pen.dev与Figma存在部分设计能力上的重叠，同时提供 AI Agent、MCP、CLI、代码生成和 IDE 集成等开发导向能力。

平台支持导入 Figma 文件，也可以从 Figma 复制内容到 pen.dev。

pen.dev支持Figma吗？

支持。

官方提供 Figma 文件导入以及复制粘贴能力。

pen.dev支持AI生成设计吗？

支持。

AI Agent 可以直接根据自然语言描述创建或修改设计。

pen.dev支持代码生成吗？

支持。

可以从设计生成 HTML、CSS/Tailwind、React、Next.js 等代码。

pen.dev支持代码转设计吗？

支持。

AI Agent 可以读取已有代码并将组件重新创建到 pen.dev 画布中。

pen.dev支持MCP吗？

支持。

外部 AI 客户端可以通过 MCP 与 pen.dev 进行连接。

pen.dev支持Cursor吗？

支持。官方提供 Cursor 扩展，并支持通过 MCP 将 Cursor 与 pen.dev 工作流连接。

pen.dev支持Claude Code和Codex吗？

支持。

官方文档提供 Claude Code 和 Codex 的 MCP 集成方式。

pen.dev支持中文吗？

目前官方文档和产品资料主要以英文为主，未确认完整的中文界面支持，因此导航站建议暂时标记为**“部分中文/中文资料有限”**，而不要直接标记为完整中文支持。

pen.dev有API吗？

pen.dev 当前重点提供 MCP、CLI和开发者集成能力。官方文档公开了 MCP Server 和 CLI，但暂未将其描述为传统意义上的独立 REST API 产品。