Impeccable扩展使用全解Chrome DevTools面板操作指南【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccableImpeccable 扩展是一款UI 反模式检测工具安装后打开任意网页的 Chrome DevTools它就能自动扫描页面标出 41 种常见的设计问题——从一看就是 AI 生成的紫色渐变文字、米色背景到低对比度文字、拥挤的留白等质量缺陷。所有检测 100% 在本地完成不上传任何数据。它到底能检测什么检测规则分为两大类完整规则清单见 extension/STORE_LISTING.md规则定义源码在 cli/engine/registry/antipatterns.mjs AI 痕迹AI tells奶油色/米色AI 默认背景、紫色系配色标题使用渐变色文字卡片侧边/圆角上的彩色强调条纹嵌套卡片、图标瓷砖堆叠、单调间距超大 H1、极端负字距、斜体衬线 Hero 标题全大写眉标eyebrow、数字编号小节标记 质量问题Quality issues低对比度文字WCAG AA、彩色底上的灰字行距过挤、行宽超长、文字顶到视口边缘标题层级跳跃、纯黑纯白、破图动画写在布局属性上、溢出容器被裁切一键安装步骤将本项目克隆或下载下来仓库地址https://gitcode.com/GitHub_Trending/im/impeccable打开 Chrome访问chrome://extensions开启右上角开发者模式点击加载已解压的扩展选择项目中的extension/目录其清单文件为 extension/manifest.json加载成功后工具栏会出现 Impeccable 图标DevTools 内新增一个同名面板 提示扩展的权限声明activeTab、scripting、storage都在 extension/manifest.json 中可在 Chrome 扩展详情页查看。最快上手方法打开 DevTools 面板这是使用 Impeccable 的核心路径只需三步第 1 步在任意网页按F12或CmdOptI打开 DevTools第 2 步点击顶部新增的 Impeccable 标签页面板会立刻开始扫描页面上问题元素自动被高亮覆盖层overlay标出。第 3 步阅读结构化结果面板将结果按类别分组展示渲染逻辑在 extension/devtools/panel.jsAI tells分组所有 AI 生成痕迹Quality issues分组通用设计/可访问性问题每组显示问题名称 命中次数点击组标题可折叠面板工具栏有 4 个按钮结构见 extension/devtools/panel.html按钮作用 复制全部一键复制整份报告Markdown 格式含问题位置和建议 重新扫描手动重扫当前页 切换覆盖层显示/隐藏页面上的高亮标注⚙️ 设置打开偏好设置与逐条规则开关点击问题直接跳转元素鼠标悬停在某条检测结果上时页面上对应元素会立刻高亮其余部分变暗模糊形成聚光灯效果点击该条目DevTools 的 Elements 面板会自动定位并选中对应 DOM 元素滚动到视野中央——排查时完全不用手动找选择器实现见 extension/devtools/panel.js。每条结果旁还有独立复制按钮可只复制单条问题的详情与描述。Elements 侧边栏选中元素看问题除了独立面板Impeccable 还在 Elements 面板右侧注入了一条侧边栏注册代码在 extension/devtools/devtools.js渲染逻辑在 extension/devtools/sidebar.js在 Elements 面板中点击/选中任意 DOM 元素侧边栏自动显示仅属于该元素的检测结果并标注 AI tell 或 Quality 类型若该元素干净会显示 Clean. No anti-patterns on this element这是自上而下扫全页和自下而上查单元素两种工作流的互补。工具栏弹窗不打开 DevTools 也能扫点击浏览器工具栏的 Impeccable 图标会弹出迷你面板逻辑见 extension/popup/popup.js提供实时问题计数图标角标和弹窗中同步显示反模式总数Scan page 按钮手动触发扫描Hide/Show overlays 按钮全局开关页面高亮层偏好设置4 个关键选项在面板中点击 ⚙️ 打开 Preferences配置存取见 extension/devtools/panel.jsAuto-scanWhen panel opens默认打开 Impeccable 面板时才扫描When DevTools opens打开 DevTools 立即扫描Line length行宽规则松紧度——Strict80 字符或 Lax120 字符Highlight blur悬停高亮时是否让其余页面变暗模糊逐条规则开关按 AI tells / Quality 分组列出全部规则可关闭你不关心的检测项修改后即时生效重扫常见问题速查❓ 为什么扫描失败chrome://内部页、Chrome 商店页无法注入脚本本地file://页面需在扩展详情页开启允许访问文件网址否则会提示相应错误处理逻辑见 extension/background/service-worker.js。❓ SPA 单页应用切路由后还有效吗有效。扩展监听webNavigation页面导航包括 SPA 路由变化会自动重新扫描无需手动操作。❓ 它会上传我的页面数据吗不会。检测在内容脚本内纯本地执行覆盖层、面板、弹窗之间只走 Chrome 扩展内部消息通道。推荐进阶阅读扩展商店文案与完整功能列表extension/STORE_LISTING.md面板 UI 与交互实现extension/devtools/检测引擎浏览器端cli/engine/registry/antipatterns.mjs项目总览文档README.md装好面板、打开一个页面、点几个问题——两分钟内你就能看清自己或竞品页面的每一处设计短板。【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考