Pencil.dev 最近在开发者社区受到关注，被称为'程序员专属的 AI 设计画布'。它不仅仅是一个设计工具，而是真正解决了设计与开发之间断层问题的工程化方案。本文将带你从零开始，掌握这个工具的完整使用流程。
核心概念与环境准备
Pencil.dev 是什么？
Pencil.dev 是一款代理驱动的 MCP 画布工具，专为开发者设计，旨在将设计过程无缝嵌入编码环境中。简单来说，它在你的 VS Code 里提供了一个无限大的画布，支持像 Figma 那样随意拖拽和缩放，但更关键的是它与 AI 深度集成。设计完成后，可以一键转换为生产就绪的代码。
核心特性包括：
- 无限设计画布：提供高性能 WebGL 渲染，支持像素级精确编辑
- AI 协作：AI 充当辅助角色，可并行生成屏幕或用户流程
- 从向量到代码：一键转换为 HTML、CSS、React 等生产代码
- 开放文件格式：所有设计存成.pen 文件（JSON 格式），可直接纳入 Git 版本控制
- Figma 导入：支持从 Figma 直接导入设计，保留向量、文本和样式
解决的核心问题
传统开发流程中常存在明显的割裂：设计师用 Figma，开发者用 IDE，两头跑；设计在云端，代码在本地，无法同步迭代；手动还原设计耗时且易出错。
Pencil.dev 通过以下方式解决这些问题：
- IDE 内设计：无需切换工具，在 VS Code 内直接完成设计
- 统一版本控制：.pen 文件与代码在同一仓库，提交、分支、合并完全一致
- AI 辅助生成：从提示词到像素级 UI，整个过程流畅
- 代码自动生成：设计与实现像素级对齐，减少手动调整时间
适用人群
Pencil.dev 特别适合以下场景：
- 独立开发者：一人既写前端又想快速出漂亮 UI
- 全栈工程师：不想依赖设计师，追求极致效率
- 后端开发：偶尔需要写前端，希望快速完成界面
- UI 设计师：想尝试 AI 辅助设计，提升工作效率
环境要求
在开始之前，请确保你的环境满足以下条件：
- IDE：VS Code 或其衍生版本（Cursor、Trae 等）
- AI 编程工具：Claude Code、Cursor 或其他支持 MCP 的 AI 工具
- 邮箱：支持国内邮箱注册，无需国外账号
注意：使用 Pencil 不需要订阅官方正版 Claude Code 套餐，任何支持 MCP 的 AI 编程工具都可以使用。
安装配置步骤
别慌，照着操作就能跑起来，整个过程大概 5 分钟。
安装 VS Code 扩展
- 打开 VS Code，点击左侧扩展图标
- 在搜索框中输入"Pencil"
- 找到 Pencil 扩展并点击安装
安装成功后，VS Code 侧边栏会出现一个✏️图标，这就是 Pencil 了。
查看 MCP 自动安装
回到扩展商城查看设置，你会发现当插件打开时，会自动为你所有的编程工具安装 Pencil MCP。这意味着它不依赖于特定的 AI 编程工具，Cursor、VS Code、Trae 等所有 VS Code 分支都能无缝使用。
# Pencil 通过 MCP（Model Context Protocol）与 AI 工具通信
# 这意味着它不依赖于特定的 AI 编程工具
# Cursor、VS Code、Trae 等所有 VS Code 分支都能无缝使用
注册账户
- 点击 Pencil 图标，会提示你注册登录
- 使用国内邮箱（如 QQ、163 等）进行注册
- 查收邮箱验证码并输入完成激活
整个过程和国内应用注册没什么区别，非常友好。
验证 MCP 配置
这一步主要检查你本地的 Claude Code 或其他 AI 工具是否正常配置了 MCP 工具。在 Claude Code IDE 扩展中，你应该能看到 Pencil MCP 工具已经加载。如果一切正常，你就可以开始使用了。
创建第一个设计画布
- 点击左上角的"New .pen file"
- 会新建一个打开的空白画布
- 白色画布可能和 VS Code 的暗黑风格不太搭，你可以选择删除默认的白色矩形
删除操作很简单：选中中间的白色矩形，按 Delete 键删除即可。删除后画布会更清爽，更适合你的编码环境。
注意事项：不要安装 Pencil 桌面应用，它只提供 VS Code Extension 版本。如果同时安装了两者，会同时提供 MCP 服务，可能导致冲突。Trae 的 VS Code 版本如果太低，可能无法将 CC 插件放到侧边栏。
实战案例
到这一步，你应该就能稳稳复现了。我们通过两个递进的实战案例，逐步掌握 Pencil.dev 的使用技巧。
案例一：简单提示词生成界面
让我们先用一个简单的提示词试试 Pencil 的成色。
使用 pencil mcp，在当前活跃的画布上，设计一个运维相关的 app 登录页，要求有指纹登录、账号登录、一键登录、手机验证登录。类似飞书的 B 端简洁风格，iOS 风格。
案例二：从设计到代码
Pencil.dev 最强大的功能之一是一键生成生产级代码。
请生成该登录界面的 html 代码，不要生成手机的状态栏。
结合上述案例，Pencil.dev 的完整工作流程如下：
- Pencil 设计：AI 辅助生成精确 UI
- 代码生成：自动转换为生产代码
- 版本控制：.pen 文件纳入 Git 管理
这个流程彻底补上了传统开发流程中的'设计 - 开发'断层，实现了从构思到代码的无缝衔接。
Pencil 的其他强大功能
除了上述核心功能，Pencil 还有更多玩法值得探索：
Figma 设计直接导入
支持从 Figma 直接导入设计，保留向量、文本和样式。这意味着你可以无缝迁移现有设计资源。
丰富的设计规范与示例风格
Pencil 自带了多种设计规范和示例风格，可以直接使用或作为参考。这大大降低了设计门槛，即使没有设计背景的开发者也能快速产出专业级 UI。
主题与变量设置
可以整体设置设计的主题、颜色、字体等变量，实现设计系统的统一管理。这对于需要保持品牌一致性的项目特别有用。
源码图层
和 Figma 一样，Pencil 也提供源码图层，方便查看和修改设计的底层结构。
预设组件库
可以打开预设组件库，使用这些预设组件进行快速设计。这类似于使用 UI 组件库开发，大大提高了设计效率。
注意：目前 Pencil 只能导入 Figma 源文件，还不能导出 Figma 格式，尚未实现完全的互联互通。
总结
经过完整的学习与实践，Pencil.dev 确实是一个能解决实际痛点的工具。它不是又一个打着 AI 噱头的设计工具，而是真正解决了'设计 - 开发'断层问题的工程化方案。
核心价值主要体现在三个方面：
- 省钱：免费替代部分 Figma AI 功能，一人干完产品 + 设计 + 开发
- 省时：IDE 内完成设计，无需切换工具，设计即代码
- 省心：.pen 文件版本控制，设计与代码同步迭代
对比传统流程，新的流程步骤更少、效率更高、成本更低。如果你是独立开发者、全栈工程师或一人公司，Pencil.dev 绝对值得一试。
最佳实践建议配合多模态模型使用，效果更佳。利用子代理生成代码，避免主智能体 token 耗尽。同时将.pen 文件纳入版本控制，与代码同步管理。
尝试将 Pencil.dev 整合到你的现有工作流中，你会发现：在 AI 时代，工具链的选择决定了你的生产力上限。
