高保真 UI 设计原型图对 Vibe Coding 的重要性

你省错了哪一步？

熟悉传统产品研发流程的朋友都知道，一个产品从想法到上线通常要经历五个阶段：需求评审 → UI 设计 → 研发 → 测试 → 上线。

但 Vibe Coding 流行起来之后，大部分人直接跳过了“UI 设计”这一环，需求刚聊完就让 AI 开写。为什么设计恰恰是最不能省的一步？

因为原型图不只是“把界面画出来”，它更重要的作用是承载需求：界面怎么布局、交互怎么流转，本质上都是在回答“用户到底要什么”。需求理解有偏差，在原型阶段就能暴露出来、随手改掉；要是跳过原型直接写代码，这些偏差就会一路带进开发，最后全变成昂贵的返工。

原型阶段改布局，开发完再改成本指数级上升

这几天宝玉老师分享了一篇《AI 原生思维》的讲座文档，讲了他做 BaoCut 产品的经历。其中我印象最深的就是这一句：

“原型阶段改布局一句话的事，开发完再改成本指数级上升，这一步能磨就磨。”

再看看市面上很多 Vibe Coding 做出来的产品，界面总差点意思。一个主要原因就是：大部分 Vibe Coder 不太关注 UI 设计，也不知道该怎么优化界面，所以产品总透着一股 AI 味。

先设计，再 Coding

其实解法并不复杂：需求评审完之后，先让 Agent 产出一份高保真设计稿，在这个阶段反复打磨，把需求和设计都确认清楚。之后再进入 Coding，Agent 就能准确理解你要什么，不会出现需求理解偏差和设计问题。

下面从个人实际开发的经验和大家演示一下，我是如何做的。

这是一个 Codex session，项目从 0 到 1。我会先把需求交给 Codex，让它分析产品技术方向和设计方向。

但我不会马上进入 coding。我会先用 Grill me 这个 skill，让它反过来问我问题，把需求补完整。

需求确认后，Codex 会问我是否采用 Notion 风格。我这里不想用 Notion 风格，所以它给出了几个备选方案。

但文字方案看不出实际效果，所以我让 Codex 先出基础设计稿。看到设计稿后，我选择方案 B，再让它继续完善成高保真设计稿。

这样先把需求和设计确认清楚，再进入 coding，后面才不容易出现 AI 味和返工。

高保真设计稿是 Coding 的视觉依据

这一步特别重要。前面我们只是把需求聊清楚了，但需求聊清楚，不代表界面就对了。真正进入开发前，我需要一个能直接指导 coding 的视觉方案。

这版设计稿里已经把页面结构、模块布局、组件样式、信息层级，还有主要交互状态都呈现出来了。

如果跳过这一步，直接让 AI 写代码，它就只能根据文字需求去猜。最后很容易变成：功能都有，但界面很平、布局很乱、交互也不顺，看起来就是一股 AI 味。

但有了高保真设计稿之后，我再让 Codex 进入 coding，它就不是从零开始猜，而是照着已经确认好的设计去实现。

所以我的建议是：需求确认之后，先让 Agent 产出高保真设计稿。设计稿确认了，再进入开发。