pen.dev 运营中

pen.dev 是一个运行在编码环境中的设计画布，开发者可以在其中创建产品界面、探索页面流程，并让设计与代码保持关联。设计文件以 .pen 格式存放在代码仓库中，可使用 Git 进行版本、分支和合并管理，也能将设计转换为 HTML、CSS 或 React。它还通过 MCP 支持读取和写入画布。

前端开发者

在 IDE 中直接设计页面和组件，并将设计结果转换为 HTML、CSS 或 React，减少在设计工具与代码环境之间切换。

使用 AI 编程工具的开发者

通过 Cursor、VSCode、Claude Code 或 OpenAI Codex 调用画布能力，生成界面或并行探索多个页面方向。

拥有设计系统的开发团队

将代码库中的现有设计系统接入画布，使用组件化设计套件构建界面并保持设计与实现的一致性。

无限设计画布

在 IDE 内创建和调整产品界面，支持像素级定位，让设计与代码始终处于相邻的工作环境中。

AI 生成页面与流程

通过提示词生成完整页面或整套界面流程，也可以让多个 AI 助手并行探索不同设计方向。

上下文设计操作

针对完整屏幕或局部区域输入需求，使用预设操作快速调整，也能从头编写自定义操作。

设计转前端代码

将画布中的设计转换为 HTML、CSS 或 React，帮助开发者把视觉方案继续推进到可使用的应用实现。

设计文件版本管理

以 .pen 文件保存设计内容并放入代码仓库，可像管理开发代码一样使用 Git 进行版本、分支和合并。

Figma 设计导入

直接复制并粘贴 Figma 设计，将其中的矢量、文本和样式带入 pen.dev 继续编辑。

MCP 双向画布操作

通过 MCP 读取和写入设计画布，并接入数据库、API、图表数据或 Playwright、Puppeteer 等外部来源。

设计文件存在代码仓库

设计不被隔离在独立工具中，而是以文件形式存放在项目仓库内，可与代码共同进行版本管理。

开放文件格式

设计文件可被读取、调试和扩展，官方强调不采用黑盒格式，开发者能够使用自己的工具处理文件。

双向 MCP 能力

除了读取画布信息，还提供完整写入权限，使外部 MCP、数据源和其他代理能够参与画布操作。

设计与代码同屏工作

将像素级设计画布放入编码环境，让开发者在设计和实现之间快速切换，减少传统设计交接过程。

• 官方首页：pen.dev – Design on canvas. Land in code.
• 官方定价页：pen.dev – Design on canvas. Land in code.