企业官网建设流程全解析

antislop+DESIGN.md 黄金组合终极指南：让 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-slop

用 AI 写网页的人都有过这种感觉：页面能跑，但蓝紫渐变、玻璃拟态圆角卡片、"10K+ Users" 假数据、"Get Started" 按钮一应俱全，一股浓浓的"AI 味"。antislop 正是为此而生：它是一套给 AI 编码智能体的反 Slop 设计过滤器，能拦截通用的 Slop 设计、Slop 文案和 Slop 代码；而品牌灵魂则来自你自己的DESIGN.md文件。本文带你看懂这个黄金组合，让 AI 设计既干净，又独特。

一、为什么 AI 页面总有一股"Slop 味"？

Slop 指 AI 的"默认审美"：模型拿不准时就会吐出的那套既定样式。一张典型的 Slop 落地页长这样：

看看这些细节：✨ 闪光 emoji logo、"NEXT-GEN AI 2.0" 胶囊徽章、一个显示 0.0001ms 延迟的假终端窗口，还有 "Revolutionary AI Intelligence" 这类空洞口号。antislop 把这些套路整理成了诊断清单（antislop.md）：视觉配色、布局组件、文案内容、装饰元素、功能完整性、品牌识别六大类共 50 余种"AI 味"特征，外加 38 条强制规则逐一拦截。

二、黄金组合的分工：antislop 是过滤器，DESIGN.md 是方向盘

很多人以为 antislop 是一份规定"长什么样"的样式指南。恰恰相反，它明确声明自己是a filter, not a style guide：不指定任何颜色、字体和布局，只拒绝"没有目的的技术"（antislop.md）。

三个文件的职责划分非常清晰：

两个关键机制保证了"去 Slop 但不呆板"：

1. R-37 方向必选：建页前必须先读DESIGN.md；没有方向时，产物只能标注为 "draft without direction"（无方向草稿），不具备交付资格；
2. 三个活性旋钮：每个设计必须显式设定 ENERGY（能量）、RHYTHM（节奏）、MOTION（动效）三档值（1 到 3 分），让页面不只是"干净"，而是"活着"（antislop.md）。

一句话总结：antislop 清掉不该有的，DESIGN.md填上留下的空间，两者缺一不可。

三、同一需求做四次，结果一目了然 👀

项目用同一个落地页需求做了四次生成，四种组合，效果对比非常直观：

① 什么都不用	② 仅 antislop
大多数 AI 输出的起点：闪光 logo、beta 徽章、假终端	过滤掉编造数据后文案变诚实了；朴素，因为"美"不是它的职责
③ 仅 DESIGN.md	④ antislop + DESIGN.md
方向落地了，但 Slop 仍在：DESIGN.md只给方向，不会过滤	诚实的数据 + 独特插画主视觉，唯一"干净且有方向"的结果 ✅

结论：黄金组合是四种结果里唯一同时做到"干净 + 有方向"的，这正是项目那句座右铭的含义：antislop is a filter, not magic. A beautiful UI is DESIGN.md's job, and yours.

四、快速上手：三种安装方式任选

方式一：一键安装（推荐）

npx antislop-ai

安装器会依次询问：选哪些技能包、装到当前项目还是全局、你使用哪些智能体（支持 Claude Code、Codex、Cursor、Cline、Copilot 等 11 种）。安装完成后开启一个新会话即可生效。

方式二：单文件，任意 AI 都能用

antislop.md 是纯文本，从仓库下载后丢给任何 AI，说一声"阅读该文件并按其中的安装指引操作"即可，手机上的聊天窗口也没问题。

方式三：clone 整个仓库

git clone https://gitcode.com/gh_mirrors/anti/anti-slop

各智能体的详细安装步骤见 GUIDE.md。

五、38 条规则 + 交付门禁：它如何把关

38 条规则（R-01 至 R-38）分为三层（antislop.md）：

• Hard Gate（绝对门槛）：禁止假数据、假评价、假安全认证；移动端不能破版；每个按钮必须有真实行为；
• Purpose Gate（技术可用，理由必填）：渐变、玻璃拟态、光晕并不被禁止，但必须写出它服务于什么目的；
• Quality Locks（一致性锁）：核心色不超过 2~3 个 + 1 个强调色；禁止克隆 Linear/Stripe 的视觉；每个关键决策都要能一句话写清理由（R-31 被称为"基石规则"）。

交付前还要过一道Delivery Gate：四个板块的 PASS/FAIL 检查报告，任何一项 FAIL 都不允许交付（antislop.md）。

六、不止 UI：文案和代码注释也"去 AI 味"

同一条提示词跑两次，文案的差别肉眼可见：

过滤前	过滤后
emoji 项目符号、全大写 "NEW DROP"、每句都在喊口号	平实的句子，并提醒你"没有真实内容的行直接删掉"

代码注释同理（skills/antislop-code/SKILL.md）：

清理前	清理后
线框分隔横幅、emoji、复述变量名的注释	装饰全删，只留一句"模块是做什么的"，代码本身不动

技能按需加载，各管一摊：UI 视觉 → antislop-ui、文案 → antislop-copywriting、无障碍 → antislop-human、移动端响应式 → antislop-layoutmobile。只装核心规则也足够构成一个完整过滤器。

七、写在最后

上面四张对比图的动态回放：

三句话收尾：

1. antislop 解决"AI 味"，DESIGN.md解决"品牌灵魂"，黄金组合缺一不可；
2. 它不规定任何样式，只追问一个问题：这个决策服务于什么目的？
3. 如果结果不够漂亮，那不是过滤器失效，而是方向缺失——去补写你的DESIGN.md。

更多功能规划与版本更新见 ROADMAP.md。

【免费下载链接】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