Frontend Anti Slop Gate

Packaged Knowledge Snapshot

This packaged copy includes local note snapshots for portability. When the original Obsidian absolute path is unavailable, use the packaged snapshot instead:

• /Users/kunkun/note/01-AI工程/AI设计与前端/01-认知框架/AI前端设计认知框架.md -> references/packaged-knowledge/AI前端设计认知框架.md
• /Users/kunkun/note/01-AI工程/AI设计与前端/02-执行方法/反 slop 硬禁令：AI 前端的十条视觉红线.md -> references/packaged-knowledge/反 slop 硬禁令：AI 前端的十条视觉红线.md

Frontend Anti-Slop Gate

这个 skill 在做什么

把作者对"AI 默认输出视觉 slop"的反向观察编码成十条机械可扫的硬禁令，在生成或评审代码时强制过一遍，防止主语言再强也被 AI 默认倾向拉回俗套。

本 skill 是无状态门禁——不读项目 knowledge/、不看主语言、不知道项目叫什么。它只做一件事：代码片段在 → 违规清单 + 修正项出。

核心认知：约束先于生成的原则里有两种约束——作者硬判断（每个项目都触发的不变量）和项目软诉求（主语言驱动的变量）。本 skill 管前者，frontend-design-research / frontend-design-writer 管后者。

在阶段化流程（见 [[AI前端设计认知框架]]）里，本 skill 位于阶段 6 代码实现的横切——每次 Agent 准备落代码时强制过一遍，和"完整性验收"并列为阶段 6 的两条常驻横切。

何时进入本 skill

要进：

• Agent 写前端代码前先过一遍（常驻式）
• 用户说"看起来像 AI 做的" / "没什么差异化" / "感觉很模板"
• 评审代码时显式调用："走一遍 anti-slop 检查"
• 前端设计剧本路由到本 skill
• 生成的代码里出现 Inter / purple- / 3 equal columns / Lucide / h-screen / #000 / 任一硬禁令信号词

不要进：

• 用户的主语言明确要求某条禁令（如项目本身就是 Brutalist 要求纯黑）——优先走项目软约束，本门禁的该条 skip 并记录豁免
• 还没有代码片段（只有文字讨论设计方向）

知识库依赖

十条硬禁令（扫描清单）

排版层

1. Inter 字体（高级语境） → 替代：Geist、Outfit、Cabinet Grotesk、Satoshi、Switzer
2. 通用衬线字体（Times / Georgia / Garamond） → 替代：Fraunces、Instrument Serif、Newsreader；仪表盘禁衬线

色彩层

3. 紫/蓝 AI 渐变（Lila Ban）：purple-600、indigo-500、from-purple-to-blue → 替代：Zinc/Slate + 单一高对比重音（Emerald / Electric Blue / Deep Rose），饱和度 < 80%
4. 纯黑 #000000 → 替代：#0a0a0a / #121212 / Zinc-950 / 炭灰 / 深海军蓝

布局层

5. 3 列等宽卡片特征行 → 替代：2 列 Zig-Zag / 非对称 Grid (2fr 1fr 1fr) / 水平滚动 / 砌体
6. 居中对称 Hero（variance > 4 时） → 替代：Split Screen / 左对齐文本+右资产 / 非对称留白
7. h-screen → 改为 min-h-[100dvh]（iOS Safari 地址栏跳跃）

资源层

8. Lucide / Feather 默认图标独占 → 替代：Phosphor (Bold/Fill) / Heroicons / Radix UI Icons / 自定义集；描边宽度一致
9. 通用占位数据：
   • 人名 John Doe / Jane Smith → 多样逼真名字
   • 数字 99.99% / 50% / $100.00 → 有机数据（47.2%、$99.00、+1 (312) 847-1928）
   • 公司 Acme / Nexus / SmartFlow → 发明可信品牌名
   • AI 文案词 Elevate / Seamless / Unleash / Next-Gen / Delve / Tapestry / "In the world of..." → 具体动词

代码层

10. window.addEventListener('scroll') + useState 连续动画 → 替代：
    • 滚动 → IntersectionObserver 或 Framer Motion whileInView
    • 连续动画 → useMotionValue + useTransform
    • 动画仅限 transform 和 opacity，禁 top / left / width / height

次级禁令（可选启用）

• 圆形 loading spinner → 骨骼屏匹配布局
• 霓虹外部发光 → 精妙内阴影或微妙 box-shadow
• 自定义鼠标光标 → 系统默认
• 标签 SECTION 01 / QUESTION 05 / ABOUT US → 移除或替代
• "Scroll to explore" / 滚动箭头 / 弹跳 v 形 → 内容自然吸引

使用方式

模式 A：生成前（Agent 主动）

写代码前先自检：主语言是否明确豁免某条？不豁免的十条一条一条过，确保输出不撞 AI 默认。

模式 B：评审时（用户触发）

用户说"走一遍 anti-slop"：逐条扫代码 → 列违规项 → 给每项具体修正参数。

模式 C：剧本路由

前端设计剧本阶段 6 代码实现期间常驻调用；同时挂在阶段 4 视觉锚定三件套的 prompt 生成前（防止反 slop 元素进入图像锚点）。

产出格式

markdownCopy code
## Anti-slop 扫描结果 — [日期]

### P0 违规（必改）
- [ ] §1 排版：Hero 用了 `font-inter`，违反禁令 1 → 改为 `font-geist` 或 `font-cabinet-grotesk`
- [ ] §3 色彩：`from-purple-600 to-indigo-500` 渐变，违反 Lila Ban → 改为 Zinc 基础 + Emerald 重音

### 项目豁免（已记录）
- §2 色彩：Brutalist 项目主语言要求纯黑 → 禁令 4 豁免

### 次级建议（可选）
- CTA spinner 是圆形 → 考虑改骨骼屏

和其他机制的边界

抗腐化

硬禁令的风险是随潮流过期。每条禁令的 rationale 必须可追溯到知识库笔记；当某条过期时（如 Inter 再度变好），更新本 skill 要同步更新 反 slop 硬禁令：AI 前端的十条视觉红线.md。

完成标准

• 十条全部扫描完毕
• 每条违规都有具体修正参数（不是"换一个字体"）
• 项目豁免项单独列出并记录 rationale
• P0 违规全部修正后通过

deletion-spec

• 触发删除条件：当前沿模型默认输出不再撞这十条（比如训练数据分布更新，Inter/紫蓝/3 列等不再是默认倾向）时，本 skill 可降级为提醒或删除。
• 禁用方式：从 plugins/frontend-suite/skills/ 删除本目录即自动停止发现；marketplace 刷新后生效。
• 卸载清单：
  • 同步检查 ~/.agents/agent_prompt_core/shared/playbooks/前端设计_剧本.md 是否显式引用本 skill
  • 同步检查 [[AI前端设计认知框架]] 笔记的"阶段化流程总表"横切机制段（反 slop 硬禁令行）是否仍指向本 skill
  • 同步检查 [[反 slop 硬禁令：AI 前端的十条视觉红线]] 笔记的"对应 skill"字段
  • 同步检查 frontend-suite 其他 skill（design-research / design-writer / visual-reference / motion-prompt-writer）的"边界表"是否引用本 skill 作为阶段 6 横切