如何完成一次网页设计走查

先确定一个可复查的页面状态

选定页面、视口和设计参考，再记下网址、浏览器、窗口宽度与当前状态。例如：“结账页 / 配送信息，桌面宽度 1440 px，已填写收货地址。”修复后按同一状态复查。

可以先打开结账页练习示例。示例约定：操作区上方间距为 16 px，按钮文字为 16 px；页面故意使用 8 px 间距和 14 px 文字。这是练习用的设计差异，并非客户网站的实际缺陷。

安装扩展并在待检查网页打开 Design QA Inspector，选择相应元素，查看间距、字体等实际属性，与设计参考比较。间距可能来自父容器，也要检查容器的设置。

在练习页中，选择“Continue to payment”检查字号，再检查操作区容器上方的间距。截图负责说明位置，属性值负责说明需要修改什么。

在对应元素上固定编号标注，写明实际表现、预期表现和复现方式，再选择严重程度与状态。不同原因分开记录。

结账操作按钮字号：实际 14 px，预期为示例规范中的 16 px。复现：配送信息步骤，视口宽度 1440 px。验收：字号为 16 px，并在 390 px 宽度下保持可读且不被截断。

可下载示例走查清单作为记录起点。这是普通工作表，并非预配置的 Jira 导入文件。

通过扩展的本地 CSS 预览尝试修改，再检查长文案、键盘焦点和窄屏。预览用于评估方案；网站代码更新并发布后，线上页面才会发生变化。

使用 Token Match 时，需要导入自己的设计 Token 索引并逐条判断建议。扩展不提供整个 Figma 文件与网页的自动全量对比。

至少保存一条标注后，才能导出带标注的 PNG。需要同时交接问题说明与元素截图时，可导出 HTML 报告；还可以准备 Jira CSV 草稿，或自行连接 Jira Cloud，将选定问题发送到该服务。

打开导出文件，检查网址、编号和截图是否正确。很长或持续变化的页面可能无法完整捕获。代码修复发布后，按原来的视口与页面状态重测，通过后再将问题标记为已解决。

检查、标注和 CSS 预览无需账号。标注保存在当前浏览器，需要长期保留的证据请及时下载。