前端页面验收需明确状态与ui对应关系、交互响应及异常处理：状态名须同代码变量一致并绑定dom判据；交互须用“当x→y”句式描述可截图变更；异常路径需覆盖输入校验、网络断连和状态残留三类场景。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
要让前端页面验收时能准确判断状态是否正确、交互是否生效，提示词必须把可观察行为和验证依据写进具体指令里，不能只说“功能正常”这种模糊要求。
明确声明待测状态与对应UI表现
在提示词开头直接列出所有需校验的状态名及其在界面上的唯一视觉标识。例如：“登录态 → 右上角显示用户名+退出按钮；未登录态 → 显示‘登录’和‘注册’文字链接，无头像图标”。【状态名必须与前端代码中实际使用的状态变量名完全一致，比如 useAuthStore().isLogin 而不是笼统写‘已登录’】
每个状态至少绑定一个DOM节点的可见性、文本内容或CSS类名作为判据，避免依赖颜色或位置等易受环境干扰的特征。
交互动作必须绑定可触发且可观测的响应
方法一：用“当用户执行X → 页面应发生Y（Y须为可截图/可断言的变更）”句式。例如：“当用户点击‘提交’按钮 → 表单区域应立即禁用所有输入框，并出现加载中旋转图标；3秒后若接口返回成功 → 显示绿色Toast提示‘提交成功’，且URL变为 /success。”
方法二：对异步反馈做分层断言。第一步验证loading态是否出现（防止假成功），第二步验证最终态是否符合业务规则（如跳转后页面标题包含‘订单号’字样）。【禁止出现‘页面应该有反应’这类无法截图存证的描述】
覆盖边界与异常路径的显式校验项
第一步：列出所有前端能拦截的异常输入场景，如邮箱格式错误、密码少于6位、重复提交。每种场景后紧跟“此时应：① 阻止表单提交 ② 在对应字段下方显示红色错误文案 ‘邮箱格式不正确’”。
第二步：模拟网络异常，写明“断开浏览器开发者工具Network面板中的online开关 → 点击‘保存’按钮 → 应弹出离线提示浮层，且按钮恢复可点击状态，不保留loading态”。
第三步：验证状态残留问题。“从详情页点击返回按钮 → 再次进入同一详情页 → 页面顶部标题应为最新数据，而非缓存的旧标题”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
