Impeccable设计检测器深度解析59条确定性规则如何工作【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccableImpeccable 是一款面向 AI 编码代理的开源设计指导工具它的内置**设计检测器Design Detector**可以用59 条确定性规则扫描前端代码精准揪出 AI 生成页面的“AI 味”反模式与通用设计质量问题——无需 LLM、无需 API Key纯本地 CLI 即可运行是前端设计质量检查的免费利器。1. 什么是 Impeccable1 个技能 59 条检测规则所有 AI 模型都训练在同一批 SaaS 模板上Inter 字体、紫到蓝的渐变、卡片套卡片、彩色背景上的灰字……不用工具提醒每个 AI 项目都会长出一样的“脸”。Impeccable 就是为此而生的设计语言层核心由三部分组成组成说明1 个技能通过/impeccable统一入口提供 23 条设计命令audit、polish、critique、animate 等59 条确定性检测规则CLI 与浏览器扩展直接运行不依赖任何大模型Live 浏览器迭代在真实页面中可视化调整设计变体安装只需一条命令npx impeccable install2. 为什么“确定性”是关键差异LLM 评审的优点是灵活缺点是不稳定同一段代码两次扫描可能给出不同结论。Impeccable 检测器走的是另一条路——规则即判定每条规则都有明确的 id、触发条件和严重级别写在 cli/engine/registry/antipatterns.mjs 这个规则注册表中。同样的输入永远得到同样的输出因此可以放心接入 CI 流水线有违规就退出码 2干净就退出码 0。3. 59 条规则全景图两大类别32 条“AI 味”反模式一眼识破 AI 生成的页面这一类规则slop 类别专门识别“一看就是 AI 写的”设计特征举几个典型卡片侧边彩色描边side-tab公认最强的 AI UI 标志渐变色文字gradient-text装饰性大于意义纯色即可紫罗兰渐变 / 暗色霓虹ai-color-palette、dark-glowAI 默认的“酷”配色Inter 等过度使用的字体overused-font每一波 AI 生成的界面都收敛到同一批字体标题上方的圆角小图标块icon-tile-stack万能 AI 特性卡模板弹跳缓动、脉冲小圆点、装饰性网格背景等27 条通用设计质量与可访问性规则这一类quality 类别不关心是否 AI 生成只管设计本身是否合格规则判定标准低对比度文字low-contrast未达 WCAG AA正文 4.5:1、大字 3:1行长过长line-length超过约 80 字符眼睛难以回行文字贴边body-text-viewport-edge正文直接顶到视口边缘跳过标题层级skipped-headingh1 之后直接 h3破坏文档大纲内容溢出容器text-overflow触发横向滚动条页面加载脚本报错script-error严重级别为 error先修 JS 再谈设计此外还有 4 条设计系统一致性检查字体、颜色、圆角、字号若偏离项目DESIGN.md中声明的设计系统会被单独标记防止设计语言随迭代“漂移”。严重级别什么会拦截什么只提示error如未捕获脚本错误必须修复warning默认级别计入失败数advisory如 em-dash 滥用只作提示、永不计入失败--no-advisory可整体隐藏——保证 CI 永不被“风格建议”卡死4. 规则如何运行4 个内置检测引擎不同规则对“信息深度”要求不同Impeccable 为它们配备了 4 个引擎自动选择最合适的引擎工作方式覆盖的规则类型正则引擎文本级模式匹配适合 CSS/JSX/TSX/Vue/Svelte 等非 HTML 文件source、page-analyzer静态 HTML 引擎解析 HTML 关联 CSS 并模拟级联读取计算样式element、page浏览器引擎Puppeteer 真实渲染页面获取真实布局与计算样式element、page、layout视觉引擎对截图做像素级亮度对比量化“改之前 / 改之后”的对比度变化visual-contrast规则实现集中在 cli/engine/rules/checks.mjs约 5500 行检查逻辑引擎入口在 cli/engine/detect-antipatterns.mjs。扫描 URL 时检测器会自动探测框架开发服务器端口并提示你用运行中的站点获得最准结果。5. 三步上手Impeccable 检测器 CLI 快速指南第一步扫描目录npx impeccable detect src/第二步扫描单文件或运行中的页面npx impeccable detect index.html npx impeccable detect http://localhost:3000 # 浏览器级真实渲染第三步接入 CInpx impeccable detect --json .JSON 输出适合流水线消费--scope type,layout可只报告排版或布局领域的问题--viewport 390x844还能用移动端视口复查。6. 配置与豁免让规则贴合项目项目级豁免.impeccable/config.json中支持detector.ignoreRules、detector.ignoreFiles、detector.ignoreValues例如品牌字体 Inter 可加值豁免impeccable ignores add-value overused-font Inter --reason Brand font文件内联豁免在文件里直接写!-- impeccable-disable overused-font: 品牌导出文档 --豁免随文件走支持整文件 / 本行 / 下一行三种范围原始扫描--no-config忽略一切配置用于排障7. 从 CLI 到 AI 工作流设计 Hook 自动反馈检测器最大的价值在于它能“住在” AI 编码工具里Claude Code、GitHub Copilot、Codex、Cursor、Grok Build 安装 Impeccable 后会同时装上design hook——每次 AI 编辑 UI 文件后自动运行确定性规则把发现直接回灌给代理让它在下一轮就改掉“AI 味”而不是等人验收时才发现。项目还附带浏览器扩展extension/在浏览器里同样免 LLM 运行这批规则。8. 规则可信吗看测试夹具每条规则都有配套的最小复现样例统一放在 tests/fixtures/antipatterns/should-flag.html必须报出对应规则should-pass.html必须干净通过框架目录Next.js、Vite、Tailwind 等覆盖了 CSS-in-JS、模块化样式等真实工程形态。想深入了解贡献与构建流程可参考 docs/DEVELOP.md。总结59 条确定性规则 32 条 AI 味反模式 27 条设计质量规则判定稳定、可进 CI4 个引擎正则 / 静态 HTML / 浏览器 / 视觉按规则需要自动分配深度CLI Hook 扩展三处入口免 LLM、免 API Key一次npx impeccable detect就能把“AI 生成的脸”从你的前端项目里扫出去 【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考