复杂网页的问题通常不在于代码量，而在于状态太多：数据还没加载、筛选条件已改变、用户没有权限、提交正在进行、接口返回空结果。让 AI 直接生成整页，很容易漏掉其中某个状态。更稳的方法是先把状态写出来，再划分组件边界。
先画页面状态表
以一个带筛选和提交的资源页面为例，至少要考虑首次加载、加载失败、结果为空、结果正常、提交中、提交成功和提交失败。每个状态都要写明可见内容、可操作按钮和下一步，而不是只画一张“正常页面”。
| 状态 | 用户看到什么 | 允许的操作 |
|---|---|---|
| 加载中 | 骨架或进度提示 | 取消或等待 |
| 空结果 | 筛选条件和说明 | 清空筛选、修改关键词 |
| 无权限 | 原因与申请入口 | 登录、申请权限 |
| 提交失败 | 失败原因和保留的输入 | 重试、修改后再提交 |
组件边界要围绕责任划分
把负责取数的部分、负责筛选的部分、负责展示列表的部分和负责提交的部分分开。组件之间用明确的数据和事件连接，不要让一个按钮同时修改多个隐含状态。这样 AI 修改一个区域时，不会把整页逻辑一起重写。
页面容器：管理请求状态和权限
筛选区：只输出筛选条件
列表区：只负责展示结果和空状态
提交区：只负责校验、提交和回执让 AI 一次只完成一个边界
- 先让 AI 根据状态表生成数据模型。
- 再生成一个只读列表和空状态。
- 加入筛选，并用固定数据测试。
- 最后接入提交和权限流程。
每次修改后保留可运行版本，记录改动的原因和影响。不要在出现错误时让 AI 重写整个项目，这会让问题更难定位。
复杂表单要保留用户输入
提交失败后清空表单，会让用户失去信任。明确哪些字段需要重新校验、哪些内容可以保留，并在提交按钮上显示进行中状态，避免重复提交。
用真实数据做多状态验收
- 正常数据、空数据和超长文本。
- 网络慢、接口失败和重复点击。
- 登录、未登录和权限不足。
- 桌面宽度、窄屏和键盘操作。
如果项目后续需要变成完整网页应用，可继续参考站内的AI网页页面结构方法；上线时再结合AI网页部署与回滚流程。
复杂网页的质量，来自状态和边界被明确写出来，而不是来自一次生成了多少代码。
