Pencil.dev

一句话简介

Pencil.dev 是一款基于 MCP 协议的 AI 原生画布式设计工具，可在 VS Code、Cursor 等 IDE 中直接完成从 UI 设计到生产级代码的一站式交付。

网站介绍

Pencil.dev（官网：https://www.pencil.dev/）是一款面向开发者和设计工程师的 AI 辅助设计工具，核心理念是"在写代码的地方完成设计"。它将类似 Figma 的无限矢量画布直接嵌入主流 IDE 中，通过 MCP 协议与 Claude Code 等 AI 模型深度集成，用户可以用自然语言生成界面设计，并一键转换为 HTML、CSS、React 等生产级代码。设计文件以开放的 .pen 格式存储在代码仓库中，支持 Git 版本控制，彻底消除了传统设计与开发之间的交接断层。

该工具主要面向前端开发者、全栈工程师、独立开发者、设计工程师以及希望高效完成 UI 设计与前端实现的小型团队。

核心功能/栏目

1. IDE 内嵌无限画布：通过插件在 VS Code、Cursor 等编辑器中打开像素级精准的设计画布，无需切换应用即可完成界面设计。

2. AI 驱动设计生成：基于 MCP 协议连接 Claude Code 等 AI 工具，通过自然语言提示词快速生成完整界面或单个组件，支持多个 AI Agent 并行工作。

3. 设计转生产级代码：设计完成后可一键导出 HTML、CSS、React 等可运行的前端代码，确保最终产品与设计稿像素级一致。

4. Git 版本控制集成：设计文件以 .pen（JSON 格式）存储在代码仓库中，与代码一起进行分支、合并和历史回溯管理。

5. Figma 无缝导入：支持从 Figma 直接复制粘贴矢量图、文本和样式到 Pencil 画布，方便迁移已有设计资产。

6. 双向深度链接：设计元素与代码双向映射，点击设计组件可跳转对应代码行，选中代码自动聚焦画布元素。

推荐优势/特点

1. 设计即代码：设计文件直接存在于代码仓库中，消除了传统设计交付环节的信息丢失和沟通成本，设计与开发真正一体化。

2. 开放格式无锁定：.pen 文件本质为 JSON 格式，可用自有工具读取和扩展，没有黑箱操作，没有厂商锁定。

3. 灵活对接多种 AI 模型：作为标准 MCP 客户端，可灵活对接 Claude Code、OpenAI Codex、Gemini 等多种大模型服务，不依赖单一 AI 平台。

4. 目前免费使用：官方表示当前阶段完全免费，对于已订阅 Claude Code 等 AI 工具的用户，无需额外付费即可使用全部设计功能。

5. 降低协作成本：特别适合独立开发者和小团队，无需专职设计师即可快速产出高质量 UI，大幅缩短从创意到产品上线的周期。

使用方法/入口指引

1. 访问官网 https://www.pencil.dev/ 下载桌面客户端，或在 VS Code、Cursor 的插件商店中搜索"Pencil"进行安装。

2. 安装完成后，Pencil 会自动配置 MCP 服务。根据需要在 Claude Code 或其他 AI 编程工具中确认 MCP 连接正常。

3. 使用邮箱注册并登录账户（支持国内邮箱）。

4. 在项目中新建 .pen 文件即可打开无限设计画布，使用自然语言提示词让 AI 生成界面，或从 Figma 复制粘贴已有设计。

5. 设计完成后，通过 AI 功能将设计转化为 HTML、CSS 或 React 代码，直接在 IDE 中运行和调试。

同类/相关网站推荐

1. Figma（https://www.figma.com/）：全球主流的在线协作设计工具，提供完整的 UI/UX 设计、原型制作和团队协作功能。

2. v0 by Vercel（https://v0.dev/）：Vercel 推出的 AI 代码生成工具，通过自然语言描述快速生成 React 前端页面和组件。

3. Builder.io（https://www.builder.io/）：可视化开发与 AI 驱动的内容管理平台，支持将设计稿转化为多种框架的前端代码。

4. SuperDesign（https://app.superdesign.dev/）：基于 AI 的 UI 设计工具，支持用一句话生成网页或产品界面原型，可在浏览器或 IDE 中使用。

5. Design Systems Repo（https://designsystemsrepo.ai/）：AI 设计系统资源聚合平台，汇集全球知名企业的 AI 设计规范、组件库和品牌指南，方便参考学习。