用 AI 批量生成组件集合

一句话结论：与其猜想要什么效果，不如一次性生成 20 个方案，直接挑。

问题出在哪

我们组没有专职 UI 设计师。这意味着一个很常见的场景：

产品说"我想要一个登录弹窗"，你做出来了，他看了一眼，说"不太对，换一种感觉"。

什么感觉？说不清楚。你调一版，他再看，还是摇头。于是两个人坐在一起，边调边看，几十分钟过去了，最后定下来的方案，一来一回，时间浪费不少。

关键在于：这不是开发能力的问题，而是沟通效率的问题。 产品脑子里有一个模糊的画面，但他没法精确描述；开发凭文字去猜，命中率很低。

我现在的做法

最近两次遇到这种情况，我换了一个思路——不猜了，直接批量生成一整页方案，让对方自己选。

具体步骤很简单，分三步：

1、写一段提示词，让 AI 生成组件集合页面。

我用的是 Vercel 的 v0 平台（Google AI Studio 也可以）。提示词大概长这样：

帮我实现一个登录模态框组件集合页面，
简洁现代风格，必须包含用户名、密码、记住我、忘记密码、第三方登录，
页面中的每个组件可交互（能点击、能输入），
至少包含 20 个不同布局和样式的组件。

这段提示词有四个要点：明确组件类型、约束视觉风格、要求可交互、要求数量足够多。数量是关键——20 个方案铺在一个页面上，总有几个能命中产品的预期。

2、等大约五分钟，切回屏幕看结果。

AI 会生成一个完整的单页应用，里面排列着 20 多个风格各异的登录弹窗：有居中卡片式的、有侧边滑入的、有全屏背景模糊的、有极简单色的、有带插画的……每一个都能真实点击和输入。

3、一键部署，把链接发出去。

只给自己看还不够，我还得让产品和同事看到。跑过去拿电脑给人演示？太麻烦了。v0 本身就是 Vercel 的产品，天然支持一键部署。点一下，不到一分钟，就能拿到一个公开的 URL。

然后我把链接往群里一丢："这里有 20 个方案，你选一个，或者告诉我哪几个的哪些部分你喜欢。"

整个过程，从写提示词到发出链接，大概六七分钟。

为什么这样做更好

对比一下前后的区别：

换一个说法：这个方法把"开放式问答题"变成了"选择题"。 人类做选择题的效率，远高于做开放式问答。

不只是开发能用

这件事还有一个好处：产品经理自己也能做。

v0 和 Google AI Studio 都不需要写代码，输入自然语言就能生成可交互的页面。也就是说，产品完全可以自己生成一批方案，先内部筛选，再把候选方案发给开发，说"就照第 7 个做"。

这比写一份长长的 PRD 去描述"弹窗圆角要大一点、阴影要柔和一点"高效得多。

适用场景

这个方法不限于登录弹窗，任何"视觉方案不确定"的场景都适用：

1. 各类弹窗 / 抽屉——确认框、表单弹窗、通知弹窗
2. 卡片布局——商品卡片、用户资料卡片、数据统计卡片
3. 导航栏 / 侧边栏——不同的布局和配色方案
4. 落地页 / 营销页的首屏——风格差异大，最适合批量对比

核心思路都一样：一次生成足够多的方案，部署成链接，让决策者自己选。