
前言
Pencil.dev 最近在开发者社区爆火,很多人称其为"Claude Code 里的 Figma"或"程序员专属的 AI 设计画布"。经过深度体验后,它确实解决了"设计 - 开发"断层问题的工程化方案。
一、核心概念与环境准备
1.1 Pencil.dev 是什么?
Pencil.dev 是一款代理驱动的 MCP 画布工具,专为开发者设计,旨在将设计过程无缝嵌入编码环境中。它是在你的 VS Code 里多出一个无限大画布,直接和 AI 集成,设计完成后可一键转换为生产就绪的代码。
核心特性:
- 无限设计画布:提供高性能的 WebGL 渲染画布,支持像素级精确编辑
- AI 协作:AI 充当"额外的手",可并行生成屏幕或用户流程
- 从向量到代码:一键转换为 HTML、CSS、React 等生产代码
- 开放文件格式:所有设计存成.pen 文件(JSON 格式),可直接纳入 Git 版本控制
- Figma 导入:支持从 Figma 直接导入设计,保留向量、文本和样式
1.2 解决的核心问题
传统开发流程中存在明显的"设计 - 开发"断层:
- 工具割裂:设计师用 Figma,开发者用 IDE,两头跑
- 版本脱节:设计在 Figma,代码在 GitHub,无法同步迭代
- 手动还原:开发者需要手动切图、调整布局,耗时且容易出错
- 协作成本:每次设计变更都需要重新沟通、重新实现
Pencil.dev 通过以下方式解决这些问题:
- IDE 内设计:无需切换工具,在 VS Code 内直接完成设计
- 统一版本控制:.pen 文件与代码在同一仓库,提交、分支、合并完全一致
- AI 辅助生成:从提示词到像素级 UI,整个过程丝滑流畅
- 代码自动生成:设计与实现像素级对齐,无需手动调半天
1.3 适用人群
Pencil.dev 特别适合以下开发者:
- 独立开发者:一个人既写前端又想快速出漂亮 UI
- 全栈工程师:不想依赖设计师,追求极致效率
- 后端开发:偶尔需要写前端,希望快速完成界面
- 一人公司:降本增效,一人干完产品 + 设计 + 开发
- UI 设计师:不想为 Figma AI 付费,又想通过 AI 做设计
1.4 环境要求
在开始之前,请确保你的环境满足以下条件:
- IDE:VS Code 或其衍生版本(Cursor、Trae 等)
- AI 编程工具:Claude Code、Cursor 或其他支持 MCP 的 AI 工具
- 邮箱:支持国内邮箱注册,无需国外账号
重要提示:使用 Pencil 不需要订阅官方正版 Claude Code 套餐,任何支持 MCP 的 AI 编程工具都可以使用。

二、安装配置步骤
别慌,照着敲就能跑起来。整个过程大概 5 分钟。

2.1 安装 VS Code 扩展
2.1.1 打开插件商店搜索 Pencil 安装
- 打开 VS Code,点击左侧扩展图标
- 在搜索框中输入"Pencil"
- 找到 Pencil 扩展并点击安装
安装成功后,VS Code 侧边栏会出现一个✏️图标,这就是 Pencil 了。

2.1.2 查看 MCP 自动安装
回到扩展商城查看设置,你会发现:当插件打开时,会自动为你所有的编程工具安装 Pencil MCP。这就是为什么 Pencil 支持全部 AI 编程工具的原因——它通过 MCP 协议与各种 AI 工具集成。
# 关键点解释
# Pencil 通过 MCP(Model Context Protocol)与 AI 工具通信
# 这意味着它不依赖于特定的 AI 编程工具
# Cursor、VS Code、Trae 等所有 VS Code 分支都能无缝使用

2.2 注册账户
- 点击 Pencil 图标,会提示你注册登录
- 使用国内邮箱(如 QQ、163 等)进行注册
- 查收邮箱验证码并输入完成激活
整个过程和国内应用注册没什么区别,非常友好。
2.3 验证 MCP 配置
这一步主要检查你本地的 Claude Code 或其他 AI 工具是否正常配置了 MCP 工具。
在 Claude Code IDE 扩展中,你应该能看到 Pencil MCP 工具已经加载。如果一切正常,你就可以开始使用了。

2.4 创建第一个设计画布
- 点击左上角的"New .pen file"
- 会新建一个打开的空白画布
- 白色画布可能和 VS Code 的暗黑风格不太搭,你可以选择删除默认的白色矩形
删除操作很简单:选中中间的白色矩形,按 Delete 键删除即可。删除后画布会更清爽,更适合你的编码环境。

注意事项:
- 不要安装 Pencil 桌面应用,它只提供 VS Code Extension 版本
- 如果同时安装了两者,会同时提供 MCP 服务,可能导致冲突
- Trae 的 VS Code 版本如果太低,可能无法将 CC 插件放到侧边栏
三、实战案例
到这一步,你应该就能稳稳复现了。我们通过两个递进的实战案例,逐步掌握 Pencil.dev 的使用技巧。

3.1 案例一:简单提示词生成界面
让我们先用一个简单的提示词试试 Pencil 的成色。
提示词示例
使用 pencil mcp,在当前活跃的画布上,设计一个运维相关的 app 登录页,要求有指纹登录、账号登录、一键登录、手机验证登录。类似飞书的 B 端简洁风格,iOS 风格。

3.2 案例二:从设计到代码
Pencil.dev 最强大的功能之一是一键生成生产级代码。
提示词示例
请生成该登录界面的 html 代码,不要生成手机的状态栏。
结合上述案例,Pencil.dev 的完整工作流程如下:
- Pencil 设计:AI 辅助生成精确 UI
- 代码生成:自动转换为生产代码
- 版本控制:.pen 文件纳入 Git 管理
这个流程彻底补上了传统开发流程中的"设计 - 开发"断层,实现了从构思到代码的无缝衔接。
3.3 Pencil 的其他强大功能
除了上述核心功能,Pencil 还有更多玩法值得探索:
3.3.1 Figma 设计直接导入
支持从 Figma 直接导入设计,保留向量、文本和样式。这意味着你可以无缝迁移现有设计资源。

3.3.2 丰富的设计规范与示例风格
Pencil 自带了多种设计规范和示例风格,可以直接使用或作为参考。这大大降低了设计门槛,即使没有设计背景的开发者也能快速产出专业级 UI。
3.3.3 主题与变量设置
可以整体设置设计的主题、颜色、字体等变量,实现设计系统的统一管理。这对于需要保持品牌一致性的项目特别有用。
3.3.4 源码图层
和 Figma 一样,Pencil 也提供源码图层,方便查看和修改设计的底层结构。
3.3.5 预设组件库
可以打开预设组件库,使用这些预设组件进行快速设计。这类似于使用 UI 组件库开发,大大提高了设计效率。
注意事项:目前 Pencil 只能导入 Figma 源文件,还不能导出 Figma 格式,尚未实现完全的互联互通。
总结
核心价值
- 省钱:免费替代 Figma AI,一人干完产品 + 设计 + 开发
- 省时:IDE 内完成设计,无需切换工具,设计即代码
- 省心:.pen 文件版本控制,设计与代码同步迭代
工作流程对比
传统流程:
需求沟通 → Figma 设计 → 手动切图 → 手动编码 → 反复调整
Pencil.dev 流程:
AI 辅助设计 → 自动生成代码 → 版本控制 →完成
新的流程步骤更少、效率更高、成本更低。
适用场景
如果你是以下角色,Pencil.dev 绝对值得一试:
- 独立开发者:想降本增效,一人完成全栈开发
- 全栈工程师:不想依赖设计师,追求极致效率
- 一人公司:需要快速迭代,控制成本
- UI 设计师:想尝试 AI 辅助设计,提升工作效率
最佳实践建议
- 配合 Claude 多模态模型:效果最佳,支持截图验证
- 利用子代理生成代码:避免主智能体 token 耗尽
- 纳入版本控制:.pen 文件与代码同步管理
后续学习路径
如果你已经在使用 frontend-design、ui-ux-pro-max 等 Skills,现在加上 Pencil,你的开发效率会再上一个台阶。
尝试将 Pencil.dev 整合到你的现有工作流中,你会发现:在 AI 时代,工具链的选择决定了你的生产力上限。


