用于设计走查的 Chrome 扩展

Design QA
Inspector

从界面细节,到清晰交接。

直接检查实际网页,标出需要调整的细节,用具体证据向团队说明怎么改。

支持 Chrome 与 Edge · 本地使用无需账号

Design QA Inspector 在实际网页旁展示选中标题的计算样式。
网页就在眼前,细节也看得清楚。

围绕实际网页展开走查

找到问题,说明修改,完成交接。

让具体元素、问题说明和修改建议始终联系在一起。

01 / 检查与标注

准确指出,哪里需要调整。

选中元素,查看间距、颜色和字体。添加带编号的标注,记录严重程度与处理状态,让每个问题都有位置,也有下一步。

标注按完整网页地址保存,包含查询参数与锚点。

实际网页上的编号标注,以及侧栏中显示的问题严重程度和处理状态。
每一条说明,都能找到对应的界面元素。

02 / 预览修改

把修改建议,直接展示出来。

在 Quick Edit 中调整间距、字体或颜色,直接在当前网页上预览效果。需要时可以重置,恢复原来的值。

导入设计 Token 索引后可使用 Token Match 建议。修改仅用于本地预览,不会更改网站源代码。

Quick Edit 控件正在预览选中标题的字体和颜色修改。
在原来的页面上下文中,说明你想要的结果。

03 / 导出与交接

让接手的人,理解完整上下文。

导出带标注的 PNG,或包含问题说明与元素截图的 HTML 报告。也可以准备 Jira CSV 草稿,或通过自行配置的连接直接创建 Jira Cloud 工单。

导出 PNG 至少需要一条已保存标注。Jira CSV 包含问题字段;直接创建工单时可以附上截图。

Inspector 的导出选项,以及由标注问题创建的 Jira 工单。
选择适合评审的文件,或将选定的问题发送到 Jira 项目。

默认保存在本地

先安心检查,再决定如何分享。

检查、标注和 CSS 预览无需账号。标注保存在当前浏览器,导出的文件下载到本地;连接 Jira 后,才会向该服务发送你选择的问题。

阅读隐私政策

开始之前

可以在哪些页面使用?

在 Chrome 或 Edge 中从 Chrome 应用商店安装,打开要检查的网页,再点击扩展图标。chrome:// 等浏览器内部页面不允许使用;部分嵌入式框架与封闭的 Shadow DOM 无法检查。

会自动对比 Figma 和网页吗?

需要你选择元素并检查实际实现。导入设计 Token 索引后可获得 Token Match 建议,目前不提供 Figma 与网页的自动全量对比。

Quick Edit 会修改我的网站吗?

Quick Edit 只在你的浏览器中生成本地预览,不会更新源代码或部署修改。使用 Reset 即可恢复原来的值。

可以向团队分享什么?

可以下载带标注的 PNG、HTML 报告和 Jira CSV 草稿。配置自己的 Jira Cloud 连接后,也可以直接创建工单。对于很长或持续变化的网页,整页截图可能无法完整捕获。

下一次设计走查

让每个细节,都有清晰的表达。

打开网页,选中元素,从一条明确的标注开始。

添加至 Chrome