这两天我让 AI 写前端页面，踩到一个很常见的小坑。

我一开始给需求的时候，特别自然地写了一句：

帮我做一个页面，好看一点，现代一点。

它确实做出来了。

第一眼看还行。

有标题，有卡片，有按钮，有渐变，页面也不空。

但我真的开始按用户的方式去看，就发现不对劲。

这个页面好像什么都有。

但它不知道给谁用。

不知道用户进来以后最想干什么。

不知道数据还没加载出来的时候要显示什么。

不知道按钮点下去以后应该发生什么。

也不知道文案应该像一个产品在说话，还是像一张海报在喊口号。

这就很尴尬。

不是 AI 不会写代码。

是我给它的需求太便宜了。

便宜到它只能按“默认模板”去猜。

而 AI 最擅长猜出来的，往往就是那种第一眼完整、真用起来发虚的页面。

一句“帮我做个页面”太便宜了

我以前也经常这么干。

想做一个页面，就直接甩给 AI：

帮我做一个资料下载页，要现代一点，好看一点，有科技感。

它当然会写。

而且通常第一眼还不差。

有标题，有卡片，有按钮，有渐变，有几个看起来挺像那么回事的模块。

但问题也在这里。

它只是写了一个“看起来像页面”的东西。

真的拿来用的时候，你会发现它不知道这个页面给谁看，不知道用户最关心什么，不知道哪些信息应该放前面，也不知道失败状态应该怎么处理。

它甚至不知道这个页面到底是要卖东西、解释资料、引导下载，还是单纯做一个展示。

AI 很强，但它不是你肚子里的产品经理。

你不说，它就只能猜。

而它最擅长猜出来的，往往就是那种很平均、很安全、很像模板的页面。

我现在会先写“人”和“动作”

这两天我越用 AI 做页面，越觉得前端需求最先要讲清楚的不是布局。

而是两件事。

谁会看这个页面。

他进来以后最想完成什么。

就拿一个资料下载页来说。

如果给开发者看，他可能关心里面到底有哪些文件，能不能直接复用，有没有示例。

如果给刚开始用 AI 做前端的人看，他可能更关心这东西能不能帮他少踩坑，下载后应该先看哪一份。

如果给运营看，他可能会看标题、标签、转化入口和数据表现。

这三种人看到同一个页面，关心点完全不一样。

所以如果我只对 AI 说“做个资料下载页”，它大概率会做一个谁都能看、但谁都不太有感觉的页面。

这就是问题。

页面不是组件的拼盘。

页面是帮某个人完成某个动作。

再写信息顺序，而不是先写风格

我以前很容易一上来就说风格。

克制一点。

高级一点。

现代一点。

像技术产品一点。

这些词不是不能写，但它们应该放在后面。

如果信息顺序是乱的，风格再对也没用。

比如一个资料下载页，用户可能最想知道的是：

1. 这是什么东西
2. 里面有什么文件
3. 适合谁
4. 下载后怎么用
5. 要不要积分
6. 有没有坑

这几个问题不说清楚，你做再多卡片、图标、渐变，都只是把不清楚的东西包装得更漂亮一点。

我现在给 AI 写需求时，会先把信息顺序写出来。

不一定很专业。

但至少让 AI 知道，页面不是从“漂亮”开始的。

是从“用户想知道什么”开始的。

状态要提前说，不要等页面崩了再补

上一篇我写过，真正拉开前端页面差距的，往往不是默认态，而是那些不顺利的时候。

这个感受现在更强了。

因为 AI 特别容易把默认态写得很完整。

数据都有。

按钮都能点。

卡片都很整齐。

像一张精修过的样板间。

但真实页面不是样板间。

真实页面会加载慢，会没有数据，会提交失败，会权限不够，会移动端挤成一团。

所以我现在会在需求里直接写状态。

比如：

这个页面需要考虑加载中、资源待审核、资源已通过、下载失败、移动端窄屏、长标题溢出。

这句话看起来很笨。

但它很有用。

因为你不写，AI 就会默认世界很顺利。

可产品真正的质感，恰恰是在世界不顺利的时候体现出来的。

我现在会这样喂给 AI

如果只是让 AI 写代码，我可能会这样写：

帮我做一个资料下载页，风格现代一点。

但如果我真的希望它做出一个能用的页面，我会改成这样：

我要做一个资料下载页。

目标用户是正在尝试用 AI 写前端页面的人，他们不一定有完整的产品经验，但希望页面少踩坑。

用户进来后最重要的动作，是判断这份资料值不值得下载。

页面信息顺序按这个来：
1. 先说明这是什么资源包
2. 再说明里面包含哪些文件
3. 说明适合哪些使用场景
4. 给出下载后的使用建议
5. 最后放下载入口

页面需要处理这些状态：
加载中、资源待审核、资源已通过、下载失败、移动端窄屏、长标题、空数据。

视觉风格克制一点，像技术资料页，不要做成夸张营销海报。

写代码前，先用自然语言说一遍你的页面结构和状态处理方案。

这段提示词没有什么玄学。

它甚至不酷。

但它会比“好看一点、现代一点”稳定得多。

因为它把人、动作、信息顺序和异常状态都交代了。

AI 拿到这样的需求，才不是在猜你脑子里的页面。

它是在沿着一条比较清楚的路往前写。

还有一个很容易忽略的东西，语气

前端页面不只是布局和代码，它还有语气。

同样是一个提交失败提示：

提交失败，请稍后重试。

和：

提交失败了，你刚才填的内容还在，可以检查网络后再试一次。

表达的信息差不多。

但读起来完全不是一回事。

前一句像系统通知。

后一句更像一个产品真的考虑过用户当时的处境。

很多 AI 生成页面最大的问题，就是所有文案都太正确了。

正确到没有体温。

所以我现在会在需求里加一句：

页面文案不要像平台公告，也不要像营销页。用真实产品的语气写，说明发生了什么、用户接下来可以做什么。

这句话对页面气质影响很大。

尤其是技术资料、个人工具、资源包、经验复盘这类页面。

它们不需要装得很宏大。

越像一个人认真整理出来的东西，反而越容易被信任。

最后

我越来越觉得，AI 写前端这件事，表面上是在写代码。

但更深一点，它是在考验我们会不会描述一个真实场景。

你说不清楚谁在用，它就只能写给所有人看。

你说不清楚用户要做什么，它就只能堆组件。

你说不清楚失败状态，它就默认一切顺利。

你说不清楚语气，它就写出一堆正确但没温度的话。

所以别急着让 AI 写代码。

先把人说清楚。

把动作说清楚。

把信息顺序说清楚。

把状态说清楚。

把你希望它像谁在说话，也说清楚。

这不是什么高级提示词技巧。

更像是在认真交代一件工作。

而前端页面真正值钱的地方，很多时候也就在这里。

不是会不会把页面写出来。

是能不能让页面像真的有人要用。

这篇主要讲动手前怎么把需求说清楚。页面真出来以后，我还会再点一轮：加载、空态、错误、提交中、长文本、移动端，别只看默认截图。

第二个资源包就是给这一步用的，里面有交互验收清单、Bug 复盘表和返修 Prompt。页面初版已经出来、但你还不太敢交付时，可以拿它过一遍。

资源入口：https://download.csdn.net/download/weixin_56088571/92886979