Pencil.dev

Pencil.dev是什么

Pencil.dev是一款基于MCP的画布式AI辅助设计工具，致力于打造设计与代码一体化工作流。Pencil.dev通过与AI模型的深度集成，引入了一种全新的设计方式，用户可以直接在代码中进行设计，设计文件可以直接保存在代码库中，并能一键生成生产就绪的代码。Pencil.dev支持VS Code、Cursor 或 Claude Code等主流的IDE，可以无缝集成，实现像素级的产品设计和代码生成。

Pencil.dev还提供完整的写入权限以及许多其他便捷工具，让您能够全面操控画布。您可以接入整个 MCP 世界，从数据库、API、图表数据、Playwright/Puppeteer 等其他来源导入数据，或轻松接入其他代理。一切尽在您的掌控之中！

Pencil.dev功能特点

✴️ IDE集成画布
通过插件，可以直接在VS Code、Cursor 或 Claude Code等主流IDE中打开Pencil无限画布，可实现像素级精准的产品设计，无需切换应用。

✴️ 设计即代码
Pencil采用双向深度链接机制，设计元素与代码双向映射，点击设计组件跳转对应代码行，选中代码自动聚焦画布元素，提升开发与调试效率。

✴️ AI协同生成
Pencil基于MCP技术，AI智能体可以并行生成界面或用户流程，通过提示词快速迭代，辅助复杂界面设计与调整。

✴️ 生产级应用
Pencil设计完成后，可以直接导出 HTML/CSS/React 等生产级代码。所有设计文件（.pen）存储在代码仓库中，您可以像在开发环境中一样，使用 Git 进行版本控制、分支和合并。

✴️ 兼容Figma
Pencil支持将设计文件转换为Figma格式，或者从Figma导入已有的设计稿，矢量图、文本和样式都会完整保留。

✴️ 开放的格式
Pencil可以存为JSON格式的.pen 文件，支持使用您自己的工具读取、调试或扩展设计文件。没有黑箱操作，没有厂商锁定。

✴️ 自定义套件
Pencil平台提供精选设计套装，您也可以自带设计套装，支持从代码库中集成团队现有的设计系统。

Pencil.dev适用场景

• 前端开发者：无需切换工具，快速将设计转为代码，适配 React/Vue 等技术栈。
• 设计工程师：统一设计与代码版本，降低协作成本，适配组件库与设计系统。
• 独立开发者：高效完成 UI 设计与前端实现，缩短产品原型到上线周期。
• AI辅助开发：借助 Claude Code 等模型，通过 MCP 协议实现设计 – 代码的 AI 闭环协作。

Pencil.dev如何使用

🖥 Pencil.dev桌面客户端

Pencil.dev目前已发布MacOS、Linux版电脑客户端软件（Windows版后期推出），可以访问Pencil.dev官网获取最新版下载使用。

可以在web网页端在线使用，电脑或手机浏览器访问Pencil.dev官网，注册登录后即可在线使用。

• Pencil.dev官网地址：https://www.pencil.dev/
• Pencil.dev客户端下载地址：https://www.pencil.dev/downloads

🛠 Pencil.dev扩展插件

Pencil.dev提供VS Code、Cursor Code、Cloude Code等主流IDE的扩展插件，可以去对应IDE的插件市场搜索“Pencil”，安装最新版进行使用。

• Pencil.dev使用指南：https://docs.pencil.dev/