验收标准：①响应式须按iPhone SE（375×667）、iPad Pro（1024×1366）、MacBook Pro 16（1792×1120）三尺寸实测，文字≥14px、主按钮宽120–320px、图片容器高度=父容器；②加载性能以Lighthouse Mobile报告为准，FCP≤1.2s、TTI≤2.8s；③Figma定位值（Copy as CSS）与DevTools Styles面板数值偏差≤±1px；④?debug=1下浮层显示“header > nav > ul > li × 5”且Console执行document.querySelector('footer').getAttribute('data-version')返回"v2.3.1"。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
你要给前端开发团队写一份能直接贴进Jira任务描述里的验收标准，不是“页面要美观”“交互要流畅”这种领导看了点头、程序员看了皱眉的空话，而是让测试同学拿着它就能点开Chrome DevTools核对DOM结构、用Lighthouse跑分、对着Figma标注量像素——现在就差一条可执行、可截图、可报bug的判定依据。
把“响应式”变成三行可测代码
第一步：打开Chrome浏览器→按F12打开DevTools→点击左上角设备切换图标→依次选中iPhone SE（375×667）、iPad Pro（1024×1366）、MacBook Pro 16（1792×1120）三个尺寸。
第二步：在每个尺寸下执行以下三行检查，任一失败即不通过：
① 所有文字字号必须≥14px（用Computed面板查font-size）；
② 主按钮宽度不能小于120px且不能大于320px（用Elements面板查width值）；
③ 图片容器高度必须等于其父容器高度（用Elements面板勾选Show rulers，拖动测量）。
这一步不能跳过设备列表——【只写“适配主流设备”会被前端理解为“只测Chrome桌面版”】。你必须把iPhone SE和iPad Pro的分辨率数字钉死，否则开发会默认忽略折叠屏和小屏触控反馈。
立即学习“前端免费学习笔记（深入）”；
让“加载状态”从形容词变时间戳
方法一：用Performance面板录一段真实操作
在Network标签页清空记录→勾选Disable cache→点击页面主按钮→立刻按Ctrl+E（Windows）或Cmd+E（Mac）开始录制→等接口返回后停止录制→在火焰图里定位到“main thread”中耗时＞16ms的JS执行块，截图标注时间戳。
方法二：用Lighthouse强制卡住临界值
在Lighthouse面板选择“Mobile”设备→勾选“Performance”和“Accessibility”→点Generate report→验收线设为：First Contentful Paint ≤1.2s，Time to Interactive ≤2.8s，任何一项超标即返工。
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
注意：不要写“首屏要快”，这会让前端用loading骨架屏糊弄你——【必须带单位、带小数点、带测量工具名称】，否则测试同学无法截图留证。
把“符合设计稿”拆成像素级坐标指令
打开Figma文件→右键点击任意图层→选择“Copy as CSS”→粘贴到文本编辑器→找到类似top: 24px; left: 32px;这样的绝对定位语句。
在Chrome DevTools的Elements面板中，鼠标悬停对应DOM节点→右侧Styles面板自动高亮当前生效的top/left值→用键盘方向键微调该值，直到与Figma复制出的数值完全一致（允许±1px误差）。
这一步必须用Figma原生“Copy as CSS”功能——【手动量取的像素值可能因缩放比例失真】。如果你用截图工具标尺去量，开发会以“你截的是200%缩放视图”为由拒绝修改。
交出可被截图举证的验收动作
打开页面→在地址栏末尾添加?debug=1→回车→页面右下角弹出蓝色浮层→点击“DOM结构校验”按钮→等待3秒→浮层内显示绿色✅图标且文字为“header > nav > ul > li × 5”。
打开同一页面→按Ctrl+Shift+I（Windows）或Cmd+Opt+I（Mac）→切换到Console标签页→输入document.querySelector('footer').getAttribute('data-version')→回车→返回值必须是"v2.3.1"。
这两步必须同时完成才算通过——只做DOM校验不查data-version，前端可能用假结构骗过浮层；只查data-version不跑DOM校验，可能脚本未加载导致浮层根本不出。两者缺一不可。
