Pencil.dev 安装与实战：在 VS Code 里做设计

2. 看看 MCP 是否自动装上了

插件启用后，Pencil 会自动给你的编程工具装上对应的 MCP。也就是说，它并不绑定某个特定 AI 工具，Cursor、VS Code、Trae 这些 VS Code 系都能用。

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

3. 注册账号

点击 Pencil 图标后，按提示注册登录。国内邮箱收验证码就行，流程不复杂。

4. 检查本地 MCP 配置

这一步主要是确认你本地的 Claude Code 或其他 AI 工具已经识别到 Pencil MCP。正常情况下，在 Claude Code IDE 扩展里能看到它已经加载出来。

5. 新建第一个画布

点击左上角的 New .pen file，会打开一个空白画布。默认是白底，如果你平时习惯深色主题，这块白板看着会有点突兀，直接把中间那块白色矩形删掉就行。

操作也很直接：选中它，按 Delete。

删完之后，画布会顺眼很多，也更贴合编码环境。

6. 几个容易踩的坑

• 不要安装 Pencil 桌面应用，它目前只有 VS Code Extension 版本
• 如果桌面端和扩展版都装了，MCP 服务可能会冲突
• Trae 的 VS Code 版本如果太旧，侧边栏可能放不下相关插件

六、实战：从提示词到界面

1. 先生成一个简单登录页

先拿一个简单需求试手感，看看 AI 生成的界面是否靠谱。

提示词如下：

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

2. 继续把设计转成代码

Pencil.dev 比较有意思的地方，是它不只停留在画布上，还能直接往代码走。

提示词可以这样写：

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

如果你只需要一个可交付的页面雏形，这一步挺省时间。它省掉的不是写代码本身，而是从设计稿到初版实现之间那段重复劳动。

整个流程可以概括成这样：

1. 用 Pencil 在画布里做设计
2. 生成 HTML、CSS 或 React 代码
3. 把 .pen 文件和代码一起纳入版本控制

这比'设计稿一份、代码一份、改动再同步一轮'顺手得多。

3. 还有哪些功能值得看

Figma 设计导入

Pencil 支持直接导入 Figma 设计，向量、文本和样式都会保留。对已经有设计资产的项目来说，这一步很实用，至少不用从零重画。

设计规范和示例风格

它内置了一些设计规范和示例风格，可以直接套用，也可以拿来当参考。没有设计背景的人，通常会更依赖这一块，不然画出来的东西容易散。

主题和变量

主题、颜色、字体这些变量可以统一设置，适合需要保持整体风格一致的项目。做产品页或者后台时，这个功能比想象中更有用。

源码图层

和 Figma 类似，Pencil 也有图层视图，方便你回头看结构、改组件。

预设组件库

预设组件库可以直接拿来拼页面，适合快速搭原型。说白了，就是尽量少从零开始。

这里有个限制要记住：Pencil 目前只能导入 Figma 源文件，还不能导出成 Figma 格式。互通性还不完整，别把它当双向桥。

七、我对它的看法

Pencil.dev 最值钱的地方，不是'AI 画图'这件事本身，而是它把设计、代码、版本管理放进了同一个工作流里。对小团队和个人开发者来说，这种省步骤的工具，往往比看上去更有实际价值。

它也不是万能的。复杂设计、多人协作、规范化设计系统这些场景，Figma 依然更稳。Pencil 更像是把快速出界面这件事做得顺手一些，尤其适合先把产品跑起来。

八、结语

如果你平时已经在用 frontend-design、ui-ux-pro-max 这类 Skills，再把 Pencil 加进来，前端原型到代码的链路会短很多。它不一定取代现有设计工具，但在需要快、需要轻、需要直接落代码的时候，确实能顶上。