夜雨聆风
程序员的设计神器!Pencil.dev:VS Code里直接出UI图,AI一键生成代码
做设计这件事，程序员最烦什么？
来回切换工具。
设计师用Figma，你用VS Code。设计完了还得沟通、截图、切图、调样式……一套流程下来，半小时没了。
今天介绍个狠货——Pencil.dev。
有人说它是”程序员专属的Figma”，有人说它是”Claude Code里的AI画板”。
我用了一周，真香。
Pencil.dev是什么？
简单说：在VS Code里画UI，然后AI一键生成代码。
它是一个代理驱动的MCP画布工具，专门给开发者设计的。你不需要切换到Figma，不需要找人帮你画原型，直接在VS Code里就能搞定：
-
• 拖拖拽拽画界面 -
• AI帮你生成组件 -
• 一键转成HTML/CSS/React代码 -
• .pen文件直接丢进Git管理
解决什么问题？
程序员画UI，传统流程是这样的：
设计师Figma出图 → 你看图理解需求 → 手动写代码 → 调样式 → 反复对线 → 完问题在哪？
-
• 工具割裂：Figma和VS Code来回切换 -
• 版本脱节：设计在云端，代码在本地 -
• 沟通成本：设计师改个按钮颜色，你得重新写一遍 -
• 效率低下：明明5分钟的事，沟通一天
Pencil.dev的思路是：别折腾了，设计代码一体化吧。
适用人群
|
|
|
|
|---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
核心功能
1. 无限设计画布
就像Figma那样的白板，随便拖、随便放大缩小。
2. AI协作设计
你说”给我画一个登录页面，包含账号密码登录和验证码登录”，AI直接给你生成。
3. 一键转代码
设计完了，点一下，直接生成生产级HTML/CSS/React代码。
4. Figma导入
你之前在Figma里画的设计，可以直接导入Pencil。
5. Git版本控制
.pen文件是JSON格式，直接纳入Git管理，设计版本和代码版本完全同步。
安装配置（5分钟搞定）
第一步：安装VS Code扩展
-
1. 打开VS Code -
2. 点击左侧扩展图标 -
3. 搜索”Pencil” -
4. 点击安装
装完以后，侧边栏会出现一个铅笔图标。
第二步：注册账号
-
1. 点击Pencil图标 -
2. 用国内邮箱注册（QQ邮箱、163都行） -
3. 收验证码激活
第三步：验证MCP
安装完以后，Pencil会自动配置MCP（Model Context Protocol）。
这时候你可以打开Claude Code或Cursor，应该能看到Pencil MCP工具已经加载了。
第四步：创建第一个设计
-
1. 点击”New .pen file” -
2. 空白画布就出现了 -
3. 开始你的设计！
使用场景举例
场景1：快速画登录页
你：帮我设计一个类似飞书风格的登录页，要有账号密码登录、手机验证码登录、扫码登录AI：直接给你生成一个完整的登录界面你：复制代码，粘贴，完事场景2：原型设计
你：画一个简单的后台管理界面，包含侧边栏、顶部导航、内容区域AI：分分钟给你画出来你：觉得OK，一键导出代码场景3：改UI
设计师改了需求？直接在画布上改，AI重新生成代码，无缝衔接和Figma比怎么样？
|
|
|
|
|---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
如果你需要精致的专业设计，Figma还是首选。但如果你想快速出原型、一个人干完开发，Pencil.dev是真的香。
注意事项
-
1. 不要同时装桌面版和VS Code扩展版：会冲突 -
2. 支持Claude Code、Cursor、Trae等工具：只要支持MCP的都可以 -
3. 目前只能导入Figma，还不能导出Figma格式 -
4. 国内邮箱就能注册，不用搭梯子
总结
Pencil.dev这个工具，解决的不是”设计”问题，而是“设计-开发断层”问题。
程序员不用再依赖设计师，设计师也不用反复跟开发沟通。
一个工具，从设计到代码，一气呵成。
独立开发者、创业团队、快速原型开发——这三种场景强烈建议试试。
你用过Pencil.dev了吗？体验如何？欢迎评论区聊聊～