Stats
Actions
Tags
Scans frontend code against 10 hard visual rules (Inter font, purple/blue AI gradients, 3-column cards, pure black, Lucide icons, h-screen, placeholder data, AI buzzwords, scroll listeners, circular spinners) and outputs violations with fixes. Use before writing or reviewing frontend code to avoid AI-default visual slop.
How this skill is triggered — by the user, by Claude, or both
Slash command
/ai-frontend-design-kit:frontend-anti-slop-gateThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
<!-- PACKAGED_KNOWLEDGE_START -->
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把作者对"AI 默认输出视觉 slop"的反向观察编码成十条机械可扫的硬禁令，在生成或评审代码时强制过一遍，防止主语言再强也被 AI 默认倾向拉回俗套。
本 skill 是无状态门禁——不读项目 knowledge/、不看主语言、不知道项目叫什么。它只做一件事：代码片段在 → 违规清单 + 修正项出。
核心认知：约束先于生成的原则里有两种约束——作者硬判断（每个项目都触发的不变量）和项目软诉求（主语言驱动的变量）。本 skill 管前者，frontend-design-research / frontend-design-writer 管后者。
在阶段化流程（见 [[AI前端设计认知框架]]）里，本 skill 位于阶段 6 代码实现的横切——每次 Agent 准备落代码时强制过一遍，和"完整性验收"并列为阶段 6 的两条常驻横切。
要进：
Inter / purple- / 3 equal columns / Lucide / h-screen / #000 / 任一硬禁令信号词不要进：
| 文件 | 用途 | 何时读 |
|---|---|---|
/Users/kunkun/note/01-AI工程/AI设计与前端/02-执行方法/反 slop 硬禁令：AI 前端的十条视觉红线.md | 十条红线完整版 + 每条的 rationale + 替代方案 | 启动必读 |
/Users/kunkun/note/01-AI工程/AI设计与前端/01-认知框架/AI前端设计认知框架.md | 阶段化流程里本 skill 的横切位置、约束二元性（硬判断 vs 软诉求） | 有歧义时回查 |
purple-600、indigo-500、from-purple-to-blue → 替代：Zinc/Slate + 单一高对比重音（Emerald / Electric Blue / Deep Rose），饱和度 < 80%#000000 → 替代：#0a0a0a / #121212 / Zinc-950 / 炭灰 / 深海军蓝2fr 1fr 1fr) / 水平滚动 / 砌体h-screen → 改为 min-h-[100dvh]（iOS Safari 地址栏跳跃）window.addEventListener('scroll') + useState 连续动画 → 替代：
IntersectionObserver 或 Framer Motion whileInViewuseMotionValue + useTransformtransform 和 opacity，禁 top / left / width / heightbox-shadowSECTION 01 / QUESTION 05 / ABOUT US → 移除或替代写代码前先自检：主语言是否明确豁免某条？不豁免的十条一条一条过，确保输出不撞 AI 默认。
用户说"走一遍 anti-slop"：逐条扫代码 → 列违规项 → 给每项具体修正参数。
前端设计剧本阶段 6 代码实现期间常驻调用；同时挂在阶段 4 视觉锚定三件套的 prompt 生成前（防止反 slop 元素进入图像锚点）。
## 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 是圆形 → 考虑改骨骼屏
| 场景 | 走谁 |
|---|---|
| 已定稿项目的二开 / 增量扩展 | frontend-iteration-planner（场景 C 入口；本 skill 在 T1/T2/T3 的阶段 6 代码环节常驻横切） |
| 阶段 1 前轮需求采访 / 阶段 3 后轮定稿采访 | frontend-interview-dualround（产品设计师视角横切） |
| 阶段 2 试吃六维（形色字构质动） | frontend-design-research |
| 阶段 4 视觉锚定三件套（Moodboard / 示意图 / 帧序列） | frontend-visual-reference |
| 阶段 4C + 6 微观动效 prompt（LoadingScreen 风格） | frontend-motion-prompt-writer |
| 阶段 1-7 持续产出 design.md（kun 15 段） | frontend-design-writer（可把本 skill 的 10 条作为 §7 Don't 基线） |
| 阶段 7 迭代微调（用户提感觉"不对"） | frontend-design-review（三段式追问 + 参数外显 Tweaks） |
代码交付完整性（// TODO / 占位 / 空实现） | dev-essentials:verification-before-completion |
硬禁令的风险是随潮流过期。每条禁令的 rationale 必须可追溯到知识库笔记；当某条过期时（如 Inter 再度变好），更新本 skill 要同步更新 反 slop 硬禁令：AI 前端的十条视觉红线.md。
plugins/frontend-suite/skills/ 删除本目录即自动停止发现；marketplace 刷新后生效。~/.agents/agent_prompt_core/shared/playbooks/前端设计_剧本.md 是否显式引用本 skillnpx claudepluginhub kkunkunya/ai-frontend-design-kit --plugin ai-frontend-design-kitCreates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.