Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
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.
npx claudepluginhub kkunkunya/ai-frontend-design-kit --plugin ai-frontend-design-kitHow 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 -->
Creates p5.js generative art with seeded randomness, noise fields, and interactive parameter exploration. Use for algorithmic art, flow fields, or particle systems.
Share bugs, ideas, or general feedback.
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 是否显式引用本 skill