为什么AI生成的UI总长得一样Impeccable用59条检测规则给你答案【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable你有没有这种感觉让 AI 写一个落地页出来的页面怎么都像同一个模板——Inter 字体、紫蓝渐变、卡片套卡片、圆角图标方块这就是典型的AI 味AI slop。开源项目Impeccable专门解决 AI 生成 UI 千篇一律的问题它把AI 味拆解成了59 条可确定性执行的检测规则无需大模型、无需 API Key就能扫描你的代码、HTML 文件甚至线上网址逐条揪出那些让设计显得雷同的破绽并给出修复建议。为什么 AI 生成的界面都长一个样核心原因很简单每个模型都是在同一批 SaaS 模板上训练的。没有明确的设计指导时AI 会不自觉地收敛到同一组安全选择千篇一律的破绽规则 ID卡片单侧粗彩色边条最典型的 AI 标志side-tab紫罗兰渐变、深色背景配青色ai-color-paletteInter、Roboto 等被用滥的字体overused-font圆角方块图标压在标题上方icon-tile-stack弹跳/弹性缓动动画bounce-easing发光阴影、径向光晕dark-glow/radial-halo这些不是主观审美而是统计规律——训练数据里出现得最多输出里就出现得最多。与其靠感觉去审不如用规则去查。59条检测规则都在查什么全部规则定义在一个文件里cli/engine/registry/antipatterns.mjs共 59 条分为两大阵营 32 条AI 味规则slop 类专门捕捉 AI 生成的特征横跨五个维度排版扁平的字号层次、过度压缩的字距、超大号斜体衬线大标题、标题上方的小字眉标eyebrow色彩渐变文字、奶油米色默认底色、灰色字压在彩色背景上布局嵌套卡片、处处相同的间距、无节奏的留白动效脉冲状态点、装饰性闪烁光标、自动滚动跑马灯、悬停放大图片文案营销黑话赋能世界领先、X而非 Y式排比句、em-dash 滥用✅ 27 条通用质量规则quality 类与 AI 无关但 AI 经常翻车的硬伤文本对比度不达 WCAG AA 标准low-contrast正文行宽超过 80 字符line-length容器内边距过挤cramped-padding、功能文字小于 11pxundersized-ui-text标题层级跳级skipped-heading、内容溢出容器text-overflow脚本加载报错script-error、滚动后内容仍不可见content-hidden-at-rest一个值得注意的细节部分规则标记为advisory建议级例如 em-dash 滥用、图片悬停缩放——这些模式人类也会合法使用所以检测器只单独列出、不计入失败数。这种区分硬伤与品味的设计让报告既严格又不武断。如何运行检测三种姿势1️⃣ CLI 扫描推荐入门在项目根目录执行npx impeccable detect src/ # 扫描整个目录 npx impeccable detect index.html # 扫描单个 HTML 文件 npx impeccable detect https://example.com # 用 Puppeteer 扫描线上页面 npx impeccable detect --json . # 输出 JSON方便接入 CI--json模式让它可以无缝进 CI 流水线设计规则从代码评审时靠人盯变成构建时自动拦截。2️⃣ 设计钩子Design Hook运行npx impeccable install后Impeccable 会为 Claude Code、Cursor、Codex、GitHub Copilot 等工具安装原生 hookAI 每改一次 UI 文件检测器就自动跑一遍把发现直接反馈回对话流。Cursor 甚至能在坏代码落盘之前就拦截。3️⃣ 浏览器扩展项目自带 Chrome 扩展extension/目录在页面上直接运行同一套确定性规则不用起终端。另外不满意的规则可以豁免npx impeccable ignores add-value overused-font Inter --reason 品牌指定字体或在文件里写内联注释!-- impeccable-disable overused-font --精确到行。检测之外23 个设计命令检测器是体检仪真正动手的是配套的23 个命令定义见skill/SKILL.src.md通过一条入口调用命令用途/impeccable init一次性配置生成PRODUCT.md与DESIGN.md设计上下文/impeccable audit技术质量检查无障碍、性能、响应式/impeccable critiqueUX 设计评审层级、清晰度、情绪共鸣/impeccable bolder/quieter放大寡淡设计 / 收敛过于张扬的设计/impeccable distill削减到本质/impeccable polish上线前最后一道抛光/impeccable live浏览器内可视化变体迭代模式完整清单包括craft、shape、document、extract、harden、onboard、animate、colorize、typeset、layout、delight、overdrive、clarify、adapt、optimize等。init会先问你做的是品牌面落地页还是产品面应用 UI之后所有命令都基于这份上下文工作——这正是防止再写出一个模板的关键。快速上手# 1. 安装技能到当前使用的 AI 编码工具 npx impeccable install # 2. 在 AI 工具里初始化设计上下文 /impeccable init # 3. 随时用 CLI 体检现有代码 npx impeccable detect src/支持的工具包括 Cursor、Claude Code、Codex CLI、GitHub Copilot、Gemini CLI、Grok Build 等十几种也提供 Git Submodule 和插件两种安装路径见README.md。结语AI 生成 UI 千篇一律不是模型的错而是没有设计约束的错。Impeccable 的思路很务实把审美争论变成可执行的 59 条规则确定性检测兜底质量LLM 命令负责创造力。下次 AI 又给你交出一个紫渐变 圆角图标方块时跑一条detect就知道了。想深入了解规则细节可阅读 README.md 的 CLI 章节与cli/engine/registry/antipatterns.mjs中的完整规则说明。【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考