最近一年多，大家都在聊 Vibe Coding，Andrej Karpathy 提出这个概念之后，整个行业都疯了——Claude Code、Open Code、Cursor，各种工具层出不穷，代码这件事基本上已经被 AI 接管了。
但你有没有想过一个问题：代码被 AI 写了，那设计呢？
说实话，我最近一直在观察这个方向。过去这大半年，Vibe Coding 工具已经卷到了极致，该有的都有了。但反过来看设计这块——还几乎是一片空白。
直到最近这几个产品出来，我才觉得：这事能成了。
从 Vibe Coding 到 Vibe Design
先回顾一下 Vibe Coding 的核心逻辑：你负责想，AI 负责写。
那 Vibe Design 的逻辑是什么？其实一模一样：
你负责想，AI 负责设计。
你跟 AI 说"帮我设计一个 Dashboard，要有数据卡片、图表、侧边栏"，它就直接帮你画出来了。不是给你一个截图让你照着做，而是直接生成可编辑的设计稿，并且能直接转成代码。
这不就是设计领域的 Vibe Coding 吗？
而且这里面还有一个很关键的差异：Vibe Coding 从一开始就是面向泛开发者群体的，但 Vibe Design 面向的是所有人。
想想看，会写代码的人本来就不多，但每个人都有设计需求——做个 PPT、画个原型、搞个落地页。Vibe Design 的潜在用户群体比 Vibe Coding 大得多。
为什么是现在？
你可能会问：AI 设计工具不是早就有了吗？Midjourney、DALL-E 包括上层的应用层产品 Lovart 不都能生成图片吗？
是的，但那些都是"生成图片"，不是"设计产品"。
生成一张好看的图和设计一个可用的界面，是完全不同的两件事。后者需要：
之前的 AI 做不到这些。但现在，两个变化让 Vibe Design 成为可能：
第一，模型能力突破了临界点。
Gemini 3 Pro 的发布是个标志性事件。UX 领域的大佬 Jakob Nielsen 直接预测："到 2026 年底，AI 生成的 UI 设计质量将超过人类设计师的水平。"这话放在两年前说肯定是疯了，但现在你看 Gemini 3 Pro 的多模态理解能力、像素级精准的视觉输出，确实感觉快实现了。
第二，工具层终于追上来了。
过去一年，几个产品的出现让 Vibe Design 从概念变成了现实。下面重点聊聊。
Pencil.dev
Pencil.dev 首页Pencil.dev 是我最近最兴奋的一个产品。它的 Slogan 很直白：**"Dream on canvas. Land in code."**
地址: https://pencil.dev
去年下半年的时候，我开始关注这个产品，那个时候还是跑在 IDE 里面的无限设计画布。后来一直不温不火，结果现在人家摇身一变，形态完全变为了本地的桌面 app，并且完全复用你本地的 Claude Code 进行开发。
Pencil 工作台这代表什么？给 Claude Code 一个无限画布，让它尽情发挥设计能力，做完了之后借助 Claude Code 本身强大的 Coding 能力，还能直接导出可用的代码。整条工作流围绕 Claude Code 闭环了。
Pencil 和 Claude Code 结合的核心还是在于 MCP，Pencil 官方自定义了一套 MCP 并且内置了常用的一些工具，比如读写这个画布上的设计文件、生成 design token 等等。
我体验下来有几个印象深刻的点：
- UI 编辑体验很丝滑，每个页面的 UI 区块都能随意拖拽和编辑，自由度很高
- 接入 Claude Code 几乎无感，一进来就能直接调用，不需要我配置任何东西
- 右侧的元素编辑区完全能跟 Figma 去打了，微调 UI 的时候体验很专业
那这意味着什么？
以前你用 Figma 画好设计稿，然后给开发看，开发再照着写代码。中间有个"设计交付"（Design Handoff）的过程，这个过程充满了信息丢失和来回沟通。
现在呢？设计稿就在你的代码仓库里（.pen 文件），AI 既能读它也能写它，设计和代码在同一个地方，由同一个 Agent 处理。Design Handoff 这个概念直接被消灭了。
如果说 Pencil 是新时代的 Figma，那我觉得是不大准确的，它的产生不光是赋能现有的设计师群体，而且催生了更多的超级个体的出现，从高质量的设计到快速的应用开发，整套工作流的门槛会越来越低。
值得一提的是，Pencil 背后是 a16z 的 Speedrun 计划。创始团队之前做过 Around（被 Miro 收购的视频会议工具）和 Alter（被 Google 收购的 AI 头像产品）。这个团队的执行力是被验证过的。
Superdesign.dev
除了 Pencil，还有一个不能忽视的玩家：Superdesign。
在我第一次看到 Superdesign 的时候，它的 slogan 是: The Cursor for Design。
顾名思义，在 IDE 里面做设计的工具。当时发出来之后一时爆火，在 Twitter 上引起了广泛的关注。
不过那是去年下半年的事了。现在半年过去，Superdesign 变化很大，上线了一个全新的设计平台：
地址: https://app.superdesign.dev
Superdesign 首页形态跟 Pencil 类似，也是画布 + 对话。输入需求之后它会先跟你确认细节，然后帮你生成完整的设计：
说几个体验下来比较关键的点：
- 在我提问的时候，右侧是个对话界面，对话过程中，可以实时在画布中看到设计的过程，可以看着设计稿一点点流式出来，比较有沉浸感
- 模型用的 Gemini 3 系列的，不得不说 UI 质量真没的喷
- 左侧的工具栏有个 + 号，在那也可以手动创建设计，这也比较方便，直接输入需求就生成了：
还有，每个设计稿还有可视化拖拽编辑的能力，虽然体验上没有 Pencil 那么丝滑，但对于大部分编辑需求还挺方便：
至少每次想改一个字体的大小和颜色，如果都得和 Agent 去聊，那真的会很抓狂：）
连接 Claude Code
值得注意的是，Superdesign 也可以复用 Claude Code——基于 Agent Skill 来接入。
简单说就是：让 Claude Code 能直接调用 Superdesign 来做设计。配置过程不复杂，装个 cli 加一行命令就搞定了(npm install -g @superdesign/cli@latest && superdesign login，然后通过 npx skills add superdesigndev/superdesign-skill接入 skill)。
装好之后，你在 Claude Code 里说一句「帮我设计一个用户登录页面，要现代简约风格」，它就会自动调用 Superdesign 生成设计，还会打开浏览器给你实时展示效果：
更实用的场景是，让它基于你现有项目来设计。比如你说「帮我看看 @components/LoadingInput.tsx，做的更加松弛一些、蓝色调多一些」，Claude Code 会先理解你的代码上下文，然后调用 Superdesign 出设计稿。满意了直接说一句「接入到当前代码库里面」，它就帮你把代码也写了。
也就是说，设计到代码，一步到位，全程不用离开终端。
这套组合其实挺常见的：Gemini 3 负责设计（它的视觉审美确实比 Claude 强），Claude Code 负责理解仓库和写代码。各取所长。
为什么 Gemini 3 是关键？
你可能注意到了，上面两个产品都提到了 Gemini 3。这不是巧合。
说实话，在 UI 设计这件事上，Gemini 3 目前确实是最强的。原因很简单：它能像素级理解视觉元素，100 万 Token 的上下文窗口让它能一次性吃下整个设计系统，而且还能原生生成图像（Nano Banana Pro 模型）——icon、插画、产品图都不在话下。
Claude 写代码一流，但论设计审美，Gemini 3 还是更胜一筹。
Pencil 直接用的 Claude 模型，虽然效果还不错，但相比 Gemini 还是差点意思。Superdesign 默认用的是 Gemini 3 Flash，对大部分场景够用了。要更精细的效果可以切 Pro，不过价格贵四倍左右。
聊聊更大的图景
说完了产品，退一步看看整个赛道。
Vibe Coding 已经是一个被验证的市场了。 Collins 词典 2025 年度词汇、Cursor 293 亿美元估值、全球数百万开发者在用各种 AI 编程工具。这个赛道从 0 到 1 的阶段已经过了。
但 Vibe Design 呢？还在 0 到 0.1 的阶段。
你看 Pencil.dev 刚刚发布不久，Superdesign 的 Github star 以及产品的能力还在快速增长中，整个赛道连个明确的头部玩家都还没有。
这意味着什么？意味着这是一个巨大的市场空缺。
想想看：
- Figma 估值 200 亿美元，但它本质上还是一个手动设计工具
- Canva 估值 400 亿美元，但它主要做的是模板填充
- 真正能用 AI 从零到一生成高质量 UI 设计的工具，几乎还不存在
这个空白正在被填补，而且速度会非常快。
就像 2025 年初 Claude Code 刚出来的时候，大家还觉得"在终端里写代码"是个奇怪的想法。但半年后，几乎所有认真搞开发的人都在用它了。
Vibe Design 工具可能会走同样的路径：一开始大家觉得新奇，然后某一天突然发现，不用它反而奇怪了。
我的预测
1. 2026 下半年，「Vibe Design」会迎来自己的引爆点
就像 Vibe Coding 在 2025 年初突然爆火一样。可能是某个大佬的一条推文，可能是某个产品的 viral moment。到那时候设计师的角色也会跟着变——从「画设计稿的人」变成「指挥 AI 画设计稿的人」，核心能力从执行变成审美和判断。
2. Figma 会很快跟进
Figma 不可能坐视不管。现在 Figma 搞了个 Figma Make，但个人觉得不会是最终形态。考虑到 Figma 之前收购公司的历史，直接买一个 Vibe Design 工具的可能性不小。
3. 超级个体时代加速到来
Vibe Coding + Vibe Design，意味着一个人就能从想法到产品完全落地。不需要前端、不需要设计师、不需要外包。这对独立开发者和创业者来说，是个巨大的利好。
写在最后
继 Vibe Coding 之后，AI 正在接管设计。而且因为设计的受众比编程更广，这个市场可能比 Vibe Coding 还要大。
现在还是最早期的阶段，工具粗糙、流程不完善、偶尔翻车。但方向已经很清楚了：用自然语言驱动设计，设计即代码，代码即设计。
你觉得 Vibe Design 会火吗？你有试过这些工具吗？体验怎么样？评论区欢迎来聊聊。
