尧图网站建设 
59条Impeccable检测规则全解读上AI Slop类规则详解【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccableImpeccable是一款专为 AI 编码代理打造的前端设计技能工具包1 个技能、23 个命令、实时浏览器迭代外加59 条确定性检测规则。这些规则无需 LLM、无需 API Key就能扫出你的界面里AI 味十足的痕迹。59 条规则分为两大类AI SlopAI 生成感类共 32 条以及通用设计质量类 27 条。本篇上详解前者。 什么是 AI Slop——那些让行家一眼认出这页面是 AI 生成的的标志性套路紫蓝渐变、卡片套卡片、Inter 字体、每个标题上方一个圆角方块图标……一、32 条 AI Slop 规则全景图规则统一注册在 cli/engine/registry/antipatterns.mjs 中每条包含id、类别、名称、说明和对应的设计准则章节。按出现频次和杀伤力可分成六大主题主题条数典型代表 色彩与发光7紫色渐变、深色背景霓虹光晕 字体与排版8Inter 字体、斜体衬线大标题✨ 视觉装饰5侧边色条、细线描边弥散阴影 布局3卡片嵌套、间距一成不变 动效4弹跳缓动、自动滚动跑马灯✍️ 文案41营销黑话、格言式排比️ 插画1几何图形拼贴插画下面逐一拆解。二、视觉装饰类最扎眼的 5 个AI 签名1. 侧边色条side-tab—— AI 生成 UI 最具辨识度的标志卡片一侧加一条粗彩色边框。规则建议换成更克制的高亮或者直接去掉。2. 圆角元素上的粗描边border-accent-on-rounded—— 粗边框和圆角天生打架二者留其一。3. 发光阴影dark-glow—— 零偏移的彩色光晕、深色页面上的彩色模糊阴影是 AI UI 默认的酷。请用中性阴影表达层级。4. 细线描边宽弥散阴影gpt-thin-border-wide-shadow—— 描边和阴影是两种边界声明同时出现就是生成式 UI 的老套路。二选一要么有清晰的边要么有柔和的浮起。5. 重复渐变条纹repeating-stripes-gradient—— 用 repeating-gradient 画的装饰条纹要么换成有意的纹理要么干脆留白。三、色彩与发光类紫渐变、奶油色、网格底纹6. AI 调色板ai-color-palette—— 紫/罗兰渐变、深色配青色是全球 AI 界面的公共脸谱。7. 奶油/米色背景cream-palette—— 暖米色已成为有品味的 AI 默认底色请从有意图的调色板选背景而不是安全的暖白。8-9. 径向光晕与聚光灯radial-halo / radial-spotlight-glow—— 深色页面上的彩色径向渐变光斑本质和发光阴影是同一套路只是换用渐变画出来。10. 装饰性网格底纹codex-grid-background—— 用 hairline 渐变平铺的网格背景只应属于画布、地图、蓝图这类真实测量场景。11. 渐变文字gradient-text—— 标题用渐变色是装饰而非表达正文文字请用纯色。四、字体排版类8 条规则教你告别Inter 脸12. 烂大街字体overused-font—— Inter、Roboto、Fraunces、Geist、Plus Jakarta Sans、Space Grotesk 已被用滥选一款有性格的字体。13. 扁平字号层级flat-type-hierarchy—— 各级字号挤在一起就没有视觉层级相邻字号之间至少拉开 1.25 倍比率。14. 超大斜体衬线标题italic-serif-display—— Fraunces / Playfair 式超大斜体衬线是 AI 创业公司落地页的万能主标题杂志风除外看语境判断。15-16. 眉标与导语标签hero-eyebrow-chip / kicker-above-heading—— 大标题上方那行小字距大写标签或其胶囊芯片变体已被彻底禁用删除它让标题自己扛住分量。17. 微型数字编号标签numbered-section-labels—— 每个章节标题旁挂个 01/02/03是 AI 在给自己编章节号结构和节奏应该靠排版本身承载。18. 超大句长标题oversized-h1—— 整句标题以展示字号放大会把首屏占满。长标题请缩小字号或精简文案。19. 字距压扁extreme-negative-tracking—— 字距紧到字形互相啃噬会牺牲可读性大标题的收紧应该是光学收紧而非破坏性收紧。五、布局与插画卡片套卡片与图标方块20. 卡片嵌套nested-cards—— 卡中卡制造视觉噪音请压平层级用间距、字号和分隔线代替再套一层容器。21. 间距一成不变monotonous-spacing—— 全站同一个间距值没有节奏。相关元素紧凑聚组区块之间大胆留白。22. 图标方块压在标题上icon-tile-stack—— 圆角方块图标下方标题是生成器输出的通用特性卡模板。试试图标与标题并排或让图标不带容器直接入流。23. 几何拼贴插画shape-assembled-illustration—— 用一堆基础图形拼出的大图 SVG 是占位剪贴画不是插画hero 级别的大图配得上真正的插画、照片或手绘图形。六、动效类别再用弹跳和跑马灯24. 弹跳/弹性缓动bounce-easing—— 过时且廉价。真实物体是平滑减速的请用 ease-out-quart/expo 等指数缓动。25. 脉动状态点pulsing-dot—— 装饰性脉冲点假装页面很活跃。脉冲只留给真正实时变化的数据指示器。26. 装饰性闪烁光标blinking-cursor—— Hero 区那个假装在打字的光标是在借开发者工具的美学做装饰没有输入框就别摆假提示符。27. 自动滚动跑马灯marquee—— 持续自动滚动的内容夺走注意力还随时遮住一半内容让读者按自己的速度阅读。28. 图片悬停缩放image-hover-transform—— hover 时放大/旋转图片是生成式 UI 的常见签名让图片安静地待着或用更克制的交互。七、文案类AI 的嘴替句式29. 营销黑话marketing-buzzword—— streamline、empower、supercharge、世界级的企业级的下一代……请用一个具体的动词名词说清产品到底干什么。30. 格言式节奏aphoristic-cadence—— 连续多个小节落在X。不要 Y。或不是功能而是平台式的对仗短句上一次可以形成模式就是 AI 腔。31. 破折号泛滥em-dash-overuse—— 仅当破折号密度接近每 500 字符 8 个才触发建议级规则请多用逗号、冒号、括号。32. 剧场式措辞theater-slop-phrase—— 动辄贬低别的东西只是剧场是生成文案的口癖直接说清它做不做得到。八、上手实践一条命令跑完 32 条规则 所有规则都是确定性检测CLI 独立运行不需要接 AInpx impeccable detect src/ # 扫描目录 npx impeccable detect index.html # 扫描单个 HTML npx impeccable detect https://example.com # 扫描线上页面 npx impeccable detect --json . # JSON 输出适合 CI几个新手友好的技巧按域过滤规则带type/layout等 scope 标签可用--scope只看某一设计域的问题跳过合理例外品牌字体就是 Inter用npx impeccable ignores add-value overused-font Inter --reason Brand font白名单单文件豁免可在注释里写!-- impeccable-disable overused-font: 原因 --建议级规则不判负部分规则如闪烁光标、破折号泛滥标记为 advisory单独列出、不计入失败数不影响退出码边写边检安装后配置的设计钩子design hook会在你编辑 UI 文件时自动跑检测器把发现直接反馈给 AI 代理详见 skill/scripts/hook.mjs。九、小结与预告✅ 32 条 AI Slop 规则的本质就是一本AI 生成感识别手册侧边色条、紫渐变、Inter 字体、卡片套卡片、弹跳动效、营销黑话……每一条都对应一个高频生成签名且都给出了明确的修改方向。下篇预告27 条通用设计质量规则——WCAG 对比度、行宽 80 字符、紧凑内边距、跳级标题、文本溢出……从像不像 AI 做的进阶到能不能安心上线。 延伸阅读规则实现 cli/engine/registry/antipatterns.mjs、检测引擎 cli/engine/detect-antipatterns.mjs、CLI 说明 README.npm.md。【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 59条Impeccable检测规则全解读（上）：AI Slop类规则详解
59条Impeccable检测规则全解读上AI Slop类规则详解【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccableImpeccable是一款专为 AI 编码代理打造的前端设计技能工具包1 个技能、23 个命令、实时浏览器迭代外加59 条确定性检测规则。这些规则无需 LLM、无需 API Key就能扫出你的界面里AI 味十足的痕迹。59 条规则分为两大类AI SlopAI 生成感类共 32 条以及通用设计质量类 27 条。本篇上详解前者。 什么是 AI Slop——那些让行家一眼认出这页面是 AI 生成的的标志性套路紫蓝渐变、卡片套卡片、Inter 字体、每个标题上方一个圆角方块图标……一、32 条 AI Slop 规则全景图规则统一注册在 cli/engine/registry/antipatterns.mjs 中每条包含id、类别、名称、说明和对应的设计准则章节。按出现频次和杀伤力可分成六大主题主题条数典型代表 色彩与发光7紫色渐变、深色背景霓虹光晕 字体与排版8Inter 字体、斜体衬线大标题✨ 视觉装饰5侧边色条、细线描边弥散阴影 布局3卡片嵌套、间距一成不变 动效4弹跳缓动、自动滚动跑马灯✍️ 文案41营销黑话、格言式排比️ 插画1几何图形拼贴插画下面逐一拆解。二、视觉装饰类最扎眼的 5 个AI 签名1. 侧边色条side-tab—— AI 生成 UI 最具辨识度的标志卡片一侧加一条粗彩色边框。规则建议换成更克制的高亮或者直接去掉。2. 圆角元素上的粗描边border-accent-on-rounded—— 粗边框和圆角天生打架二者留其一。3. 发光阴影dark-glow—— 零偏移的彩色光晕、深色页面上的彩色模糊阴影是 AI UI 默认的酷。请用中性阴影表达层级。4. 细线描边宽弥散阴影gpt-thin-border-wide-shadow—— 描边和阴影是两种边界声明同时出现就是生成式 UI 的老套路。二选一要么有清晰的边要么有柔和的浮起。5. 重复渐变条纹repeating-stripes-gradient—— 用 repeating-gradient 画的装饰条纹要么换成有意的纹理要么干脆留白。三、色彩与发光类紫渐变、奶油色、网格底纹6. AI 调色板ai-color-palette—— 紫/罗兰渐变、深色配青色是全球 AI 界面的公共脸谱。7. 奶油/米色背景cream-palette—— 暖米色已成为有品味的 AI 默认底色请从有意图的调色板选背景而不是安全的暖白。8-9. 径向光晕与聚光灯radial-halo / radial-spotlight-glow—— 深色页面上的彩色径向渐变光斑本质和发光阴影是同一套路只是换用渐变画出来。10. 装饰性网格底纹codex-grid-background—— 用 hairline 渐变平铺的网格背景只应属于画布、地图、蓝图这类真实测量场景。11. 渐变文字gradient-text—— 标题用渐变色是装饰而非表达正文文字请用纯色。四、字体排版类8 条规则教你告别Inter 脸12. 烂大街字体overused-font—— Inter、Roboto、Fraunces、Geist、Plus Jakarta Sans、Space Grotesk 已被用滥选一款有性格的字体。13. 扁平字号层级flat-type-hierarchy—— 各级字号挤在一起就没有视觉层级相邻字号之间至少拉开 1.25 倍比率。14. 超大斜体衬线标题italic-serif-display—— Fraunces / Playfair 式超大斜体衬线是 AI 创业公司落地页的万能主标题杂志风除外看语境判断。15-16. 眉标与导语标签hero-eyebrow-chip / kicker-above-heading—— 大标题上方那行小字距大写标签或其胶囊芯片变体已被彻底禁用删除它让标题自己扛住分量。17. 微型数字编号标签numbered-section-labels—— 每个章节标题旁挂个 01/02/03是 AI 在给自己编章节号结构和节奏应该靠排版本身承载。18. 超大句长标题oversized-h1—— 整句标题以展示字号放大会把首屏占满。长标题请缩小字号或精简文案。19. 字距压扁extreme-negative-tracking—— 字距紧到字形互相啃噬会牺牲可读性大标题的收紧应该是光学收紧而非破坏性收紧。五、布局与插画卡片套卡片与图标方块20. 卡片嵌套nested-cards—— 卡中卡制造视觉噪音请压平层级用间距、字号和分隔线代替再套一层容器。21. 间距一成不变monotonous-spacing—— 全站同一个间距值没有节奏。相关元素紧凑聚组区块之间大胆留白。22. 图标方块压在标题上icon-tile-stack—— 圆角方块图标下方标题是生成器输出的通用特性卡模板。试试图标与标题并排或让图标不带容器直接入流。23. 几何拼贴插画shape-assembled-illustration—— 用一堆基础图形拼出的大图 SVG 是占位剪贴画不是插画hero 级别的大图配得上真正的插画、照片或手绘图形。六、动效类别再用弹跳和跑马灯24. 弹跳/弹性缓动bounce-easing—— 过时且廉价。真实物体是平滑减速的请用 ease-out-quart/expo 等指数缓动。25. 脉动状态点pulsing-dot—— 装饰性脉冲点假装页面很活跃。脉冲只留给真正实时变化的数据指示器。26. 装饰性闪烁光标blinking-cursor—— Hero 区那个假装在打字的光标是在借开发者工具的美学做装饰没有输入框就别摆假提示符。27. 自动滚动跑马灯marquee—— 持续自动滚动的内容夺走注意力还随时遮住一半内容让读者按自己的速度阅读。28. 图片悬停缩放image-hover-transform—— hover 时放大/旋转图片是生成式 UI 的常见签名让图片安静地待着或用更克制的交互。七、文案类AI 的嘴替句式29. 营销黑话marketing-buzzword—— streamline、empower、supercharge、世界级的企业级的下一代……请用一个具体的动词名词说清产品到底干什么。30. 格言式节奏aphoristic-cadence—— 连续多个小节落在X。不要 Y。或不是功能而是平台式的对仗短句上一次可以形成模式就是 AI 腔。31. 破折号泛滥em-dash-overuse—— 仅当破折号密度接近每 500 字符 8 个才触发建议级规则请多用逗号、冒号、括号。32. 剧场式措辞theater-slop-phrase—— 动辄贬低别的东西只是剧场是生成文案的口癖直接说清它做不做得到。八、上手实践一条命令跑完 32 条规则 所有规则都是确定性检测CLI 独立运行不需要接 AInpx impeccable detect src/ # 扫描目录 npx impeccable detect index.html # 扫描单个 HTML npx impeccable detect https://example.com # 扫描线上页面 npx impeccable detect --json . # JSON 输出适合 CI几个新手友好的技巧按域过滤规则带type/layout等 scope 标签可用--scope只看某一设计域的问题跳过合理例外品牌字体就是 Inter用npx impeccable ignores add-value overused-font Inter --reason Brand font白名单单文件豁免可在注释里写!-- impeccable-disable overused-font: 原因 --建议级规则不判负部分规则如闪烁光标、破折号泛滥标记为 advisory单独列出、不计入失败数不影响退出码边写边检安装后配置的设计钩子design hook会在你编辑 UI 文件时自动跑检测器把发现直接反馈给 AI 代理详见 skill/scripts/hook.mjs。九、小结与预告✅ 32 条 AI Slop 规则的本质就是一本AI 生成感识别手册侧边色条、紫渐变、Inter 字体、卡片套卡片、弹跳动效、营销黑话……每一条都对应一个高频生成签名且都给出了明确的修改方向。下篇预告27 条通用设计质量规则——WCAG 对比度、行宽 80 字符、紧凑内边距、跳级标题、文本溢出……从像不像 AI 做的进阶到能不能安心上线。 延伸阅读规则实现 cli/engine/registry/antipatterns.mjs、检测引擎 cli/engine/detect-antipatterns.mjs、CLI 说明 README.npm.md。【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考