“设计师和开发者之间的鸿沟，永远无法跨越。”
“AI能写代码，但设计还是得靠人。”
“从设计稿到代码，总要损失一半效果。”
这些话，你可能说过，也可能深有体会。
2026年1月24日，我想告诉你一个正在发生的变革：
AI Agent不仅能写代码，现在还能直接在画布上设计——而且设计完就能出代码。
从今天开始，世界多了一个新词：Vibe Design。
一
先讲一个真实的场景。
我正在开发一个 macOS 应用——语音实时翻译（Voice Translation）。
应用的核心功能已经完成，但主页的 UI 设计一直让我头疼。作为一个开发者，我可以写出功能完善的代码，但设计？那是另一个领域。
传统流程是这样的：
- 打开 Figma，花1小时画原型
- 导出设计稿，标注各种尺寸和颜色
- 打开 Xcode，对着设计稿写 SwiftUI 代码
- 反复调整，直到”看起来差不多”
- 发现和设计稿还是有出入，再调
- 总耗时：3-4小时
昨晚我是这样做的：
- 在 VS Code 中安装 Pencil 插件
- 打开 Claude Code，说：”帮我设计一个语音翻译应用的主页，需要有语言切换、麦克风/系统音频输入、实时翻译显示区域和底部操作栏”
- AI 在 Pencil 画布上直接开始设计
- 我看着实时预览，提出修改意见
- AI 调整设计，我把设计直接应用到 SwiftUI 代码
- 总耗时：40分钟
效率提升：5倍。
而且，设计效果出乎意料的专业——有清晰的层次结构、合理的间距、统一的配色。
二
这一切是怎么实现的？
一句话解释
以前，设计师用 Figma 画图，程序员用 VS Code 写代码，两边是两个世界。
Pencil 把这两个世界合并了。
它是一个装在 VS Code 里的”画板”，让你可以一边写代码一边画设计图。
为什么 AI 能帮你画图？
这里要说一个叫 MCP 的东西。
不用怕，我用大白话解释：
你知道手机的充电口吗？以前安卓用 Micro USB，苹果用 Lightning，互不兼容。后来大家都改用 Type-C，一根线充所有手机。
MCP 就是 AI 世界的 Type-C 接口。
有了这个”接口”，AI 就能连接各种工具——包括 Pencil 这个画板。
所以现在的情况是：
- Pencil = 一个智能画板
- MCP = 让 AI 能操作这个画板的”接口”
- Claude Code = 会画图的 AI 助手
三者一结合，AI 就能帮你画设计图了。
简单理解：AI 通过 MCP “接口” 操作 Pencil 画板
三
Pencil 能做什么？说几个让你惊讶的事情。
它像 Figma，但更聪明
用过 Figma 的人都知道，那是设计师画图的工具。
Pencil 也是个画图工具，但有一个本质区别：
Figma 只能人来画，Pencil 可以让 AI 来画。
你只需要用大白话描述你想要什么：
“帮我画一个音乐播放器的界面，要有播放按钮、进度条、歌词显示”
AI 就会在画板上帮你画出来。
画完的设计可以直接变代码
这是最神奇的地方。
传统流程：设计师画图 → 程序员看图 → 程序员写代码 → 反复对比修改
Pencil 流程：AI 画图 → AI 写代码 → 完事
因为设计和代码在同一个地方，不存在”还原度”的问题——设计长什么样，代码就是什么样。
设计可以像乐高一样拼装
Pencil 里有很多现成的”积木”：按钮、输入框、卡片、导航栏……
AI 会智能地使用这些积木来搭建你的界面，就像玩乐高一样。
从我的 Voice Translation App 案例中可以看到，每个页面都由”顶部栏”、”内容区”、”底部栏”这些积木组成——整齐、统一、专业。
四
说了这么多，怎么用？
先澄清一个误解
网上有人说：用 Pencil 必须花钱买 Claude Code 官方套餐。
别信，这是错的。
Pencil 支持市面上几乎所有的 AI 编程工具：
- Claude Code（官方的、非官方的都行）
- Cursor
- Windsurf
- Codex
- 还有很多……
用你手头有的就行，不用额外花钱。
三步搞定
第一步：装插件
打开 VS Code，搜索 “Pencil”，点安装。完事。
在 VS Code 插件商店搜索 Pencil，一键安装
（注意：不用去官网下载什么应用，装这个插件就够了）
装完后，左边会多一个铅笔图标，那就是 Pencil。
第二步：不用管配置
好消息：装完插件，它会自动配置好一切。
如果你不放心，可以问问你的 AI 助手：”Pencil 装好了吗？”它会告诉你。
第三步：开口说话
打开你的 AI 助手（Claude Code 或者别的），用大白话告诉它你想要什么：
“帮我设计一个外卖 App 的首页，要有搜索框、分类图标、附近商家列表”
然后看着 AI 帮你画。
不满意？直接说：
“商家卡片太小了，放大一点” “颜色太花哨了，换成简约风格”
AI 会立刻帮你改。
满意了？让它写代码：
“设计我很满意，帮我写成代码吧”
这就是 Vibe Design——全程动嘴，不用动手。
五
来看一个真实案例。
我的语音翻译 App 需要一个新界面
我在做一个 macOS 上的语音翻译应用，功能都写好了，就差一个好看的界面。
作为一个程序员，写代码没问题，但设计……真的不是我的强项。
以前我会打开 Figma 自己画，画得丑不说，还要花好几个小时。
这次，我决定试试 Vibe Design。
我是这么跟 AI 说的
“帮我设计一个语音翻译应用的界面，要有：
- 语言切换（英语和中文）
- 麦克风和系统音频的选择
- 显示翻译结果的区域
- 开始/停止翻译的按钮
- 底下放清空、历史、设置
风格简洁现代，用绿色”
然后我就坐着看 AI 画图。
AI 画出来的效果
AI 帮我设计的界面：一个待机状态，一个录音状态
我没动一下鼠标，AI 就画出了两个界面：
- 左边是待机状态：绿色的”开始翻译”按钮
- 右边是录音状态：红色的”停止翻译”按钮
而且它自动考虑了两种状态的切换，这是我没提的。
看看设计的层次
左边是图层结构，非常清晰
看左边的图层面板：
- Header（顶部栏）
- Content（内容区）
- Bottom Bar（底部栏）
这不是随便糊的草图，是有专业结构的设计。
我一个不懂设计的程序员，用嘴说了几句话，就得到了这样的结果。
然后让 AI 写代码
“设计我很满意，帮我写成 SwiftUI 代码吧”
AI 看着这个设计，直接生成了对应的代码。
颜色、间距、布局——全都是按设计来的，不用我一点点对照着调。
从设计到代码，一步到位
这就是 Vibe Design 的魅力：动嘴不动手，设计代码全都有。
六
几个让设计更好看的小技巧。
技巧一：告诉 AI 你想要什么风格
“用苹果公司的设计风格” “像小红书那种清新的感觉” “参考 Notion 的简约风”
AI 见过无数设计，你一说它就懂。
技巧二：不满意就直接说
别客气，AI 不会生气：
“这个太丑了，重新设计” “按钮太小了，看不清” “颜色太土了，换成高级灰”
改到你满意为止。
技巧三：让 AI 一次画多个页面
“帮我设计一个 App，包括：首页、个人中心、设置页面、登录页面”
AI 会一口气全给你画出来，而且风格统一。
技巧四：Figma 的设计可以导进来
如果你已经有 Figma 的设计稿，可以直接导入 Pencil，然后让 AI 帮你改、帮你写代码。
旧设计不浪费，新玩法也能用上。
七
到底能省多少时间？
我自己的体验：
| 事情 | 以前 | 现在 |
|---|---|---|
| 画一个 App 界面 | 2-3 小时 | 20 分钟 |
| 改设计 | 来回沟通半天 | 说一句话的事 |
| 设计变代码 | 程序员对着图写一天 | AI 几分钟搞定 |
最爽的是什么？
以前设计稿和最终产品总是有差距，”还原度 80%” 已经算不错了。
现在？100% 一致。因为设计和代码本来就是一个东西。
有个博主测试后说：
“原来需要 1 小时的工作，现在 20 分钟完成。”
这不是快一点，是快了好几倍。
八
往大了说，这意味着什么？
以前的痛苦
设计师和程序员之间，永远有一道鸿沟：
- 设计师用 Figma 画图
- 程序员用 VS Code 写代码
- 两边是两个世界
设计师改了图，程序员可能不知道。程序员动了代码，设计稿还是老样子。
来回扯皮、反复沟通、”这里还原度不够”……
这种痛苦，每个做过产品的人都懂。
现在的变化
Pencil 做了一件简单但革命性的事：
把设计和代码放到同一个地方。
而且让 AI 同时掌管设计和代码。
设计师不用学代码，程序员不用学设计——AI 成了两边的翻译官。
这不是小改进，这是游戏规则变了。
九
最后说两句。
我写了十几年代码，经历过无数次这样的对话：
“设计稿上是这样的。” “代码实现不了啊。” “那你改改？” “改完就不是那个效果了……”
以前我以为这是沟通问题，现在我明白了：这是工具问题。
设计用一套工具，代码用另一套工具，两边永远对不上。
现在 AI 来了，它既能画图，也能写代码，还能在两者之间自由切换。
鸿沟，就这么被填平了。
核心观点
-
Pencil 是什么： 一个让 AI 帮你画设计图的工具，装在 VS Code 里就能用
-
Vibe Design： 用嘴说你想要什么，AI 帮你画出来，不用动手
-
不用花钱： 不需要买什么正版套餐，用你现有的 AI 工具就行
-
效率爆表： 以前几小时的活，现在 20 分钟搞定
-
设计=代码： AI 画完图直接写代码，不存在”还原度”问题
2026年1月24日，周六。
AI Agent 已经学会画图了。
下一个被重新定义的，会是什么？
如果这篇文章让你有所启发，欢迎转发给还在 Figma 和 VS Code 之间反复横跳的朋友。
参考资料
相关阅读
AI 使用姿势系列
- 你觉得AI不行？也许是你的’使用姿势’还停在2023年 - AI 使用姿势演进
- 通用AGI工具已经到来 - Claude Code 深度分析
- 当Claude Code能直出PPT - AI 工具冲击
MCP 系列
- MCP：AI 的 USB-C 接口 - MCP 技术解读
联系方式
如果你对 Pencil、MCP 或 AI 设计有问题或想法：
- 邮箱：[email protected]
- 微信：winnielove2020
- 博客：https://junxinzhang.com
特别欢迎讨论：
- Pencil 的使用技巧
- MCP 工具开发经验
- AI 驱动设计的实践案例
- 设计与开发协作的新模式
本文基于 2026 年 1 月 24 日的公开资料撰写。
Pencil 仍在快速迭代中，更多能力正在解锁——而这只是 AI 重新定义设计与开发边界的开始。
关注我，后续分享更多 AI Agent 认知、洞察以及使用方式。
在这个设计与代码边界正在消失的时代，掌握新工具的人，将拥有新的生产力。
你觉得AI不行？也许是你的'使用姿势'还停在2023年