antislop-ui技能深度拆解：43种AI视觉Slop模式的识别与修复完整清单

antislop-ui技能深度拆解43种AI视觉Slop模式的识别与修复完整清单【免费下载链接】anti-slopRules for an AI coding agent to filter out generic AI-generated UI designs, text, and code.项目地址: https://gitcode.com/gh_mirrors/anti/anti-slopantislopAnti Slop是一套面向 AI 编码代理的开源过滤规则集它的 antislop-ui 技能专门负责 UI 与视觉层面用Tell识别特征– Why为什么显得像 AI– Fix如何修复的三段式完整列出 43 种 AI 视觉 Slop 模式并给出对应的修复方法和核心规则编号R-01 至 R-38帮助你快速识别并修复 AI 生成界面的AI 味。什么是视觉 Slop为什么 AI 页面一眼就能被认出来用过 AI 生成过页面的同学都见过这些画面蓝紫渐变 Banner、全胶囊圆角、大标题上方一颗发光小圆点、标题下面还有一段假终端窗口、四个统计卡片写着10,000% ROI 协同乘数……这些就是Slop——AI 训练数据里的默认视觉。它不是某个设计师的审美而是模型在没有品牌方向时最可能输出的样子。antislop 的核心设计哲学是它是过滤器filter不是风格指南。它不替你选颜色、字体和布局只拒绝没有目的的技法并要求结果保持鲜活。整个系统包含 38 条强制规则分为三层Hard Gate 绝对禁止 / Purpose-Gate 允许但必须写明理由 / Quality Locks 一致性锁定外加 ENERGY、RHYTHM、MOTION 三个活力旋钮。antislop-ui 是这个体系里的 UI/视觉子技能随核心一起加载。它的每条模式都固定为同一个形状Tell这种长什么样、Why为什么它读起来像 AI 生成的、Fix该怎么做并引用核心规则编号 R-XX。规则详情见 skills/antislop-ui/SKILL.md核心规则在 skills/antislop/SKILL.md 与 rules/antislop.md。一组对比图直观看到过滤器的效果同一个需求、同一个页面项目用四种方式各生成一次什么都不用、只用 antislop、只用 DESIGN.md、两者都用。下面四张图就是全部结果什么都不用闪光 Logo、NEXT-GEN AI 2.0 胶囊徽章、假终端报出 0.0001ms 延迟——大部分 AI 输出的起点。只用 antislop编造的数字和假终端被过滤器删掉了页面变得诚实——但也只是干净因为没有人为它定方向。只用 DESIGN.md方向到位了但 Slop 还在——因为 DESIGN.md 只负责指方向不负责过滤。两者都用诚实的数据 真实的方向四张图里唯一干净且有方向的结果。四张结果的动态过程可以在这段 GIF 里看到43 种 AI 视觉 Slop 模式完整清单按 6 大类拆解打开 skills/antislop-ui/SKILL.md 可以看到43 种模式被组织在 6 个章节里。下面把每种模式的 Tell怎么认出来和 Fix怎么修浓缩成一张速查表。1️⃣ 视觉与色彩10 种模式Tell识别特征Fix修复方法泛用蓝紫渐变蓝→紫、蓝→青、紫→粉渐变作为主配色或整页彩色光晕从 DESIGN.md 或品牌身份取色渐变只保留层级功能并写明理由R-01玻璃拟态滥用导航栏、卡片、弹窗、侧边栏同时 frosted glass玻璃只是点缀全页最多 1–2 个元素R-10圆角过度按钮、输入框、卡片、徽章全是同款胶囊形在设计系统里定一小组圆角刻意分配R-11阴影过软每个组件都带大阴影整页像在漂浮阴影只用作抬升标记大多数元素应平贴R-12到处发光卡片、按钮、图标、背景、边框同时 glow光效只留给 1–2 个重点元素R-13背景网格网格线、蓝图线、点阵垫底纹理必须真正支撑品牌身份并写明理由R-07无理由暗色模式因为显得技术就整页深色主题来自品牌与受众R-21没有强理由就做亮/暗切换配色过多一页 5–7 种颜色且没有设计系统活跃色板上限2–3 主色 1 强调色R-29强调色滥用强调色涂满按钮、图标、链接、背景、光晕强调色只出现在关键时刻core Part 3无菌默认纯白底、细灰边、无纹理、无身份这是方向问题不是过滤问题补 DESIGN.md调高活力旋钮2️⃣ 布局与组件10 种模式Tell识别特征Fix修复方法模板化布局Hero副标题双 CTA截图特性网格评价FAQ次次同序结构围绕真实内容需求搭建R-05复制粘贴特性卡所有特性卡尺寸、图标、内边距完全一致用变化反映内容层级旗舰特性可以整宽配角用列表R-14Bento 网格大小卡片拼成的马赛克仪表盘只有当内容真的存在不同尺寸的元素时才用R-05间距均质各区块 padding/margin/gap 完全相同用留白当结构按 RHYTHM 旋钮拉开层级工作原理永远三步圆形图标1/2/3永远是三步按真实流程呈现两步或五步都可以R-05Trusted By 假 Logo 墙Hero 下方一排通用公司 Logo只展示真实、可核实的 Logo没有就别编R-18最受欢迎定价卡中间档永远挂胶囊徽章高亮高亮真正服务目标的档位三列本身就是默认形状R-31无产品的 Demo 页没有真实 Demo、无 ToS/隐私页只有承诺展示真实产品或诚实标注未上线R-38四列模板页脚Product / Company / Resources / Legal 固定四列页脚围绕真实链接分组一列有用的胜过四列半空区块节奏均质每节都是居中标题副标题同款卡片网格图文区块交替、对称与非对称交替R-053️⃣ 装饰元素11 种模式Tell识别特征Fix修复方法泛用 AI 图标闪光、星星、闪电、钻石、立方体、机器人图标图标必须与内容相关找不到合适的就不用R-04Lucide 风图标库所有图标来自同一套细描边圆角库一个模子图标库是视觉决策不是默认导入R-04Emoji 当装饰标题里 、每条特性前 ✅、CTA 上 移除 UI 文案里的 emoji需要标记时用真实图标R-04按钮小箭头几乎每个按钮都挂→或↗箭头不是按钮的默认身份只在需要方向暗示时保留R-08彩色左竖条卡片/列表行左侧一条细彩条纯装饰竖条必须携带信息否则删除R-01、R-31AI 胶囊徽章胶囊细边光晕小点大写 AI Powered / Beta / New徽章只为功能需要而生且禁止全套组合R-09H1 上方眉形徽章标题正上方一个小胶囊重复标题已说的信息删掉它或把信息折进标题R-09装饰性状态点标题旁发光脉动的圆点什么状态都不标记圆点必须标记真实状态live/warning否则移除R-19、R-31泛用 AI 字体等宽大标题、全大写超宽字距HOW IT WORKS字体来自品牌性格并写明理由R-06假终端窗口红绿灯圆点打字命令的终端当主视觉不是真终端产品就展示真实产品截图R-06无关插画Undraw/Storyset 风插画与产品毫无关系插画必须与产品有直接联系并写明联系R-224️⃣ 结构与流程3 种模式Tell识别特征Fix修复方法死导航导航栏链接指向不存在的页面每个导航项必须有真实落点R-24不可用控件按钮点了没反应、下拉打不开、表单不能提交交互元素要有真实行为否则移除或标注Coming soonR-26填空模板区块区块存在只因每个 AI 落地页都有每个区块都要靠内容挣得位置C-35️⃣ 应用与仪表盘7 种上面几类是落地页的形状这一类是登录后的应用界面里 AI 最爱摸的默认值模式Tell识别特征Fix修复方法默认仪表盘壳左侧栏顶栏4 张统计卡图表表格先说出这屏的工作和用户的决策再搭层级C-3、R-20编造数字统计卡12,483 / 94.2% / $48.2K每张都带12%只展示真实数字差值只在对比期真实存在时出现R-17、R-38填充型动态流Sarah Chen 2 小时前更新了文档循环刷名动态流展示真实事件否则别上线R-18无问题的图表图表只因空间空而存在标题是Overview先写下图表要回答的问题再画图C-3泛用表格列Name / Status / Date / Actions 每行三点菜单列来自用户在这张表里做的决策决策字段靠前R-26字段填充假数据John Doe、johndoeexample.com 之类像真的假数据留空或用诚实占位符Your Name、emailexample.comR-23、R-38占位空态/加载态一句No data配图或裸转圈空态说明原因下一步动作加载态说明在加载什么R-276️⃣ 动效2 种无休止的脉冲循环元素永远在 pulse/bounce/float 且无用户触发。修复动效必须有写下来的 UX 目的不跑无限循环R-19。模板动效堆叠Fade Up Fade In Floating Scale 同时上。修复按目的和 MOTION 旋钮编排——Hero 在说话配角保持安静R-19。从看出来到修掉Tell–Why–Fix 三步法 清单在手实际怎么用它以AI 胶囊徽章为例三步走Tell 对照页面上有没有胶囊形 细边框 光晕 小圆点 大写 AI Powered的组合Why 理解这个组合是自我指涉的徽章——由 AI 制作、还在宣称自己由 AI 制作加的是噪音不是信息。Fix 执行徽章只在功能需要时保留并写明理由且永远不要全套组合R-09真实的状态标签可以留装饰性的 AI Powered 胶囊必须删。每次交付前还要过两道闸核心的Delivery Gate四段式 PASS/FAIL 报告加上 UI 技能专属的UI Skill Checklist——共 15 项自查全部必须回答 yes色板是否来自 DESIGN.md 而非默认渐变、强调色是否只出现在关键时刻、布局是否避开 bento 马赛克/假终端/三列定价/无意义左竖条这些默认 AI 形状、每个导航项是否有真实落点、每个圆点是否标记真实状态、每个数字是真实还是已标注的占位、以及断点/主题/键盘操作是否全部通过。完整 15 项见 skills/antislop-ui/SKILL.md。使用上有两种模式可选During构建过程中实时引导以 Delivery Gate 收尾适合新建 UI和After审计已有成果输出带编号的问题清单你批准修哪些再出复查报告——适合清理 AI 已经生成的旧页面。一键安装让 AI 代理自动加载 antislop-ui antislop 以标准 Agent Skills 格式发布每个技能一个文件夹内含一份SKILL.md核心常驻加载其余技能按需加载。推荐一条命令安装npx antislop-ai按提示选择额外技能UI 工作就勾 antislop-ui、安装位置本项目或全局和你使用的代理即可。如果你不想装目录根目录的单文件 antislop.md 本身就是一份完整过滤器可以直接粘贴给任何能读 Markdown 的 AI 聊天窗口。从零开始的图文步骤见 GUIDE.md全部安装与更新方式见 README.md当前版本可查看 skills/antislop/VERSION。写在最后它是过滤器不是风格指南 ✂️43 种模式看起来很多但背后只有一句话拒绝没有目的的技法。蓝紫渐变不违法写在 R-01 里的是不写明理由就不许用默认圆角不违法违法的是所有元素同款胶囊。antislop 只负责把 AI 味刮掉而刮干净之后往哪个方向长——那是你的DESIGN.md的工作。对照清单跑一遍 43 项 Tell再让 Delivery Gate 签字放行你的 AI 生成界面就会从一眼 AI变成像产品。【免费下载链接】anti-slopRules for an AI coding agent to filter out generic AI-generated UI designs, text, and code.项目地址: https://gitcode.com/gh_mirrors/anti/anti-slop创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考