检测任何网页中常见的 UI 反模式
Impeccable 可以直接在浏览器中检测 61 种常见的 UI 反模式。在任何页面上打开 DevTools 中的 Impeccable 面板，并覆盖突出显示的问题，从 AI 生成的设计告诉到可访问性和质量问题。
它检测到什么
AI slop（设计告诉人们尖叫“AI 创造了这个”）：
- 奶油色和米色“AI 默认”背景
- 紫色/紫罗兰色AI调色板
- 标题上的渐变文本
侧边标签和圆形边框强调条纹
- 嵌套卡片、单调间距、图标图块堆叠、边缘齐平卡片
- 弹跳和弹性缓动、悬停图像缩放、选取框、脉冲点、闪烁光标
- 带有发光口音、放射状光晕和聚光灯的黑暗模式
- 过度使用的字体、平面类型层次结构、斜体衬线英雄
- 超大的 H1、极端的负字母间距
- 大写眉片、标题上方的踢脚线、编号的部分标记
- Em-dash 过度使用、营销流行语、警句节奏、“戏剧”短语
- 具有宽阴影、重复条纹和网格背景的细边框
- 形状组装插图、有机剪辑路径、隐藏光栅图像
质量问题（总体设计和可访问性）：
- 低对比度文本 (WCAG AA)、彩色背景上的灰色文本、遮挡文本
- 狭窄的填充、紧张的行高、不均匀的标题节奏
- 跳过标题级别
- 行长太长，文本延伸到视口边缘，列溢出第一个视口
- 较小的正文文本、较小的 UI 文本、对齐文本、全部大写正文、宽字母间距
- 布局属性动画、剪切溢出容器、文本溢出
- 图像损坏、脚本错误、静止时隐藏的内容、重复的容器文本
- 偏离项目自己的设计系统（字体、颜色、半径、字体大小）
它是如何运作的
1.安装扩展
2.在任意页面（Cmd+Opt+I / F12）打开DevTools，然后单击“Impeccable”面板选项卡
3. 扫描页面并叠加突出显示每个发现
4. 小组列出了调查结果，按人工智能讲述和质量问题分组
5. 单击任何结果可跳转到“元素”面板中的元素
特征
- 打开面板时进行扫描；选择在 DevTools 打开时进行扫描
- 分组发现：人工智能告诉与质量问题
- 点击检查：从发现结果跳转到元素
- 从面板或弹出工具栏打开/关闭叠加
- 每规则设置：禁用您不关心的检测
- 重新扫描导航，包括 SPA 路线变更
- 适用于任何网站，包括具有严格内容安全策略的页面
- 100%本地运行，没有数据发送到任何地方
同样的 61 条规则为由一个开源规则引擎构建的 Impeccable CLI 和实时设计模式提供支持。
开源于 https://github.com/pbakaus/impeccable
## 新功能（1.4.0 的版本说明）
检测器现在作为 WebAssembly 在扩展屏幕外文档中运行。该页面被快照，并且规则评估该快照，因此站点的内容安全策略不再决定检测器是否运行。与 Impeccable CLI 和实时模式相同的规则，由相同的源构建，现在有 61 个。新的“屏幕外”权限正是为此目的；扩展程序可以看到的内容没有任何变化。