Pencil.dev：AI 驱动设计画布与代码生成工具实战指南

二、安装配置步骤

2.1 安装 VS Code 扩展

2.1.1 打开插件商店搜索 Pencil 安装

1. 打开 VS Code，点击左侧扩展图标
2. 在搜索框中输入"Pencil"
3. 找到 Pencil 扩展并点击安装

安装成功后，VS Code 侧边栏会出现一个✏️图标，这就是 Pencil 了。

2.1.2 查看 MCP 自动安装

回到扩展商城查看设置，你会发现：当插件打开时，会自动为你所有的编程工具安装 Pencil MCP。这意味着它不依赖于特定的 AI 编程工具，Cursor、VS Code、Trae 等所有 VS Code 分支都能无缝使用。

# 关键点解释
# Pencil 通过 MCP（Model Context Protocol）与 AI 工具通信
# 这意味着它不依赖于特定的 AI 编程工具
# Cursor、VS Code、Trae 等所有 VS Code 分支都能无缝使用

2.2 注册账户

1. 点击 Pencil 图标，会提示你注册登录
2. 使用国内邮箱（如 QQ、163 等）进行注册
3. 查收邮箱验证码并输入完成激活

整个过程和国内应用注册没什么区别，非常友好。

2.3 验证 MCP 配置

这一步主要检查你本地的 Claude Code 或其他 AI 工具是否正常配置了 MCP 工具。

在 Claude Code IDE 扩展中，你应该能看到 Pencil MCP 工具已经加载。如果一切正常，你就可以开始使用了。

2.4 创建第一个设计画布

1. 点击左上角的"New .pen file"
2. 会新建一个打开的空白画布
3. 白色画布可能和 VS Code 的暗黑风格不太搭，你可以选择删除默认的白色矩形

删除操作很简单：选中中间的白色矩形，按 Delete 键删除即可。删除后画布会更清爽，更适合你的编码环境。

注意事项：

• 不要安装 Pencil 桌面应用，它只提供 VS Code Extension 版本
• 如果同时安装了两者，会同时提供 MCP 服务，可能导致冲突
• Trae 的 VS Code 版本如果太低，可能无法将 CC 插件放到侧边栏

三、实战案例

3.1 案例一：简单提示词生成界面

让我们先用一个简单的提示词试试 Pencil 的成色。

提示词示例

使用 pencil mcp，在当前活跃的画布上，设计一个运维相关的 app 登录页，要求有指纹登录、账号登录、一键登录、手机验证登录。类似飞书的 B 端简洁风格，iOS 风格。

3.2 案例二：从设计到代码

Pencil.dev 最强大的功能之一是一键生成生产级代码。

提示词示例

请生成该登录界面的 html 代码，不要生成手机的状态栏。

结合上述案例，Pencil.dev 的完整工作流程如下：

1. Pencil 设计：AI 辅助生成精确 UI
2. 代码生成：自动转换为生产代码
3. 版本控制：.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 格式，尚未实现完全的互联互通。

总结

核心价值

1. 省钱：免费替代 Figma AI，一人干完产品 + 设计 + 开发
2. 省时：IDE 内完成设计，无需切换工具，设计即代码
3. 省心：.pen 文件版本控制，设计与代码同步迭代

工作流程对比

传统流程：

需求沟通 → Figma 设计 → 手动切图 → 手动编码 → 反复调整

Pencil.dev 流程：

AI 辅助设计 → 自动生成代码 → 版本控制 → 完成

新的流程步骤更少、效率更高、成本更低。

适用场景

如果你是以下角色，Pencil.dev 绝对值得一试：

• 独立开发者：想降本增效，一人完成全栈开发
• 全栈工程师：不想依赖设计师，追求极致效率
• 一人公司：需要快速迭代，控制成本
• UI 设计师：想尝试 AI 辅助设计，提升工作效率

最佳实践建议

1. 配合 Claude 多模态模型：效果最佳，支持截图验证
2. 利用子代理生成代码：避免主智能体 token 耗尽
3. 纳入版本控制：.pen 文件与代码同步管理

后续学习路径

如果你已经在使用 frontend-design、ui-ux-pro-max 等 Skills，现在加上 Pencil，你的开发效率会再上一个台阶。

尝试将 Pencil.dev 整合到你的现有工作流中，你会发现：在 AI 时代，工具链的选择决定了你的生产力上限。