这几天我有个很强的感受：AI 写前端页面已经不稀奇了，稀奇的是它写出来的页面到底能不能真的用。

很多时候，第一眼看上去还挺完整：有标题，有按钮，有列表，有几个卡片，甚至还有漂亮的渐变背景。可一旦我开始按真实用户的方式点，就会发现问题基本都藏在状态里。

不是代码不能跑，而是页面没有照顾到那些“不顺利的时候”。

所以我现在让 AI 写前端时，不会只问“帮我做个页面”。我会反复检查下面这 12 个状态。

1. 初次加载状态

页面刚打开，数据还没回来时，用户看到什么？

AI 很容易直接给一屏假数据，让页面看起来很饱满。但真实项目里，接口总有等待时间。如果没有加载状态，用户会以为页面卡住了。

我一般会要求它至少给三种处理：

• 骨架屏
• loading 文案
• 禁用暂时不能点的按钮

2. 空状态

没有数据时，不要只留一块空白。

空状态最好告诉用户两件事：为什么这里是空的，下一步可以做什么。

比如资源列表为空，可以写“还没有上传资源”，再给一个“上传资源”的入口。比只显示“暂无数据”要强一点。

3. 错误状态

接口失败、保存失败、上传失败，这些都要有出口。

我最怕那种只弹一句“失败了”的页面。用户不知道是网络问题、权限问题、格式问题，还是系统问题。

更好的提示是：

保存失败，可能是网络不稳定。你填写的内容已保留，可以稍后重试。

4. 提交中状态

这是 AI 很容易漏掉的状态。

用户点了提交以后，按钮要进入提交中，不能继续狂点。不然轻则重复请求，重则重复创建数据。

我现在会明确写进需求：

提交过程中禁用按钮，并显示“提交中”。

5. 成功反馈

成功以后，页面到底怎么变化？

是跳转到列表，还是留在当前页面？是清空表单，还是保留内容？这些不说清楚，AI 往往会随便处理。

成功反馈不是为了热闹，而是让用户知道刚才的动作已经生效。

6. 表单校验状态

表单不是能输入就行。

至少要检查：

• 必填项
• 格式错误
• 字数限制
• 前后空格
• 特殊字符

尤其是手机号、邮箱、链接、价格这类字段，不能只靠后端兜底。

7. 长文本状态

假数据通常很短，真实用户输入通常很野。

标题会很长，昵称会很怪，描述会换行，按钮里的字也可能比设计稿长。

所以我会让 AI 用长文本测试一遍页面，看看会不会撑破卡片、挤出按钮、遮挡后面的内容。

8. 移动端状态

很多 AI 生成的页面在桌面端看着不错，一到手机就露馅。

常见问题是：

• 表格横向溢出
• 按钮挤成两行
• 固定底栏挡住内容
• 弹窗高度超出屏幕

如果页面要给真实用户用，移动端不能只是“勉强能看”。

9. 权限状态

有些按钮不是所有人都能点。

未登录、未认证、没有权限、等级不够，这些状态如果不提前设计，用户点完才发现不能用，会很挫败。

这次看 CSDN 后台我也有类似感觉：有些入口看起来能点，但真正要开通时会提示认证或等级门槛。

10. 删除和危险操作状态

删除、清空、覆盖、发布，这些操作最好不要一键完成。

AI 有时会把所有按钮都做得一样轻松，但真实产品里，危险操作需要更谨慎。

至少要有确认弹窗，并且文案说清楚影响范围。

11. 取消和返回状态

用户填到一半想退出怎么办？

直接返回是否会丢内容？要不要提醒？有没有草稿？这些都是体验细节。

很多页面不是因为主流程做得差，而是因为“中途退出”处理得粗糙。

12. 数据变化后的刷新状态

新增、删除、编辑以后，列表是否立刻更新？

如果用户保存成功，但页面上还是旧数据，他会怀疑是不是没保存上。

这类状态看起来小，但特别影响信任感。

我的做法

我现在让 AI 写页面时，会先给它一份状态清单，而不是直接让它写代码。

大概像这样：

这个页面需要处理：加载中、空状态、错误状态、提交中、成功反馈、长文本、移动端、无权限、删除确认。

请先说明每个状态的处理方式，再生成代码。

这样生成出来的东西不一定最漂亮，但会更接近真实项目。

顺手补一句：如果你也在试着用 AI 做前端页面，我把这次整理出来的需求澄清清单、Prompt 模板、UI 状态走查表和发布复盘表做成了一个小资源包。

它不是那种“万能提示词合集”，更像我自己边做边对照的一张检查表。适合刚开始用 AI 做前端、交互原型，或者想把文章和资源沉淀起来的朋友。

资源入口：AI 前端与交互协作清单：需求澄清、Prompt 模板、UI 状态走查与发布复盘

最后

AI 确实能把前端初稿做得很快，但页面值不值钱，往往不在默认态，而在这些边角状态里。

一个只会写默认态的人，和一个能把异常、边界、权限、移动端都想清楚的人，差距还是很明显的。

如果你也在用 AI 做前端页面，可以先别急着问它“帮我写代码”，先问一句：这个页面在不顺利的时候，会发生什么？