上线前的设计走查(Design QA)最怕两件事:一是改动太多导致漏检,二是团队对“什么算一致”理解不一。下面这份清单把常见的走查场景拆成可执行的工具链:从标注比对、像素级对齐,到视觉回归与可访问性检查,按需组合即可。
https://github.com/garris/BackstopJS
免费商用:MIT 协议开源,可用于商业项目。
适合把关键页面截图纳入回归基线,改版后自动对比差异并输出可视化报告。
免费商用:Apache-2.0 协议,适合企业与团队使用。
用脚本跑关键流程并做 screenshot 比对,和 CI 结合可以把“看起来没问题”的风险前置。
https://github.com/oblador/loki
免费商用:MIT 协议开源。
对组件库更友好:每个组件一组快照,适合做“组件对齐/状态样式”走查与回归。
需看协议:按套餐与条款使用。
把视觉差异变成可审阅的变更记录,适合需要多人审批的团队流程。
https://www.welldonecode.com/perfectpixel/
需看协议:以官网许可为准。
把设计稿叠在页面上做像素级对齐检查,适合排查间距、字号、图标位置等细节差异。
需看协议:通常为付费软件。
做“像素级测量”很顺手:间距、尺寸、对齐一眼出结果,适合复核布局栅格与组件间距规范。
需看协议:含订阅与团队版条款。
对比度、色觉模拟、焦点可达性等无障碍要点一站式检查,适合把“合规项”加入走查清单。
https://www.deque.com/axe/devtools/
需看协议:含商业版本与条款。
浏览器内直接跑 a11y 规则扫描,能快速定位常见问题(对比度、语义结构、ARIA 使用等)。
需看协议:Figma 产品与团队授权以官方为准。
把颜色、字号、间距等变量化并同步到组件/样式,走查时优先核对“是否用了正确 Token”,比逐像素盯更稳定。
需看协议:以网站条款为准。
适合作为“上线前 QA Checklist”的灵感来源,把团队常漏项(空状态、错误态、边界文案、动效)沉淀成固定流程。