Getting it into your agent
This one installs as part of its plugin. Adding the marketplace and installing the plugin brings it with everything else the plugin ships.
/plugin marketplace add kkunkunya/ai-frontend-design-kit/plugin install ai-frontend-design-kitWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/kkunkunya/ai-frontend-design-kit/frontend-anti-slop-gate)<a href="https://agentmods.dev/skills/kkunkunya/ai-frontend-design-kit/frontend-anti-slop-gate"><img src="https://agentmods.dev/badge/skills/kkunkunya/ai-frontend-design-kit/frontend-anti-slop-gate/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/kkunkunya/ai-frontend-design-kit/frontend-anti-slop-gate"><img src="https://agentmods.dev/badge/skills/kkunkunya/ai-frontend-design-kit/frontend-anti-slop-gate.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00064 | $0.02793 |
| Opus 5 | $0.00032 | $0.01396 |
| Sonnet 5 | $0.00013 | $0.00559 |
| Haiku 4.5 | $0.00006 | $0.00279 |
Grade A, and why
frontend-anti-slop-gate scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 12d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 144 lines — stays where its author put it; the contents beside it link to each section on GitHub.
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 并记录豁免
- 还没有代码片段（只有文字讨论设计方向）
知识库依赖
| 文件 | 用途 | 何时读 |
|---|---|---|
/Users/kunkun/note/01-AI工程/AI设计与前端/02-执行方法/反 slop 硬禁令：AI 前端的十条视觉红线.md |
十条红线完整版 + 每条的 rationale + 替代方案 | 启动必读 |
/Users/kunkun/note/01-AI工程/AI设计与前端/01-认知框架/AI前端设计认知框架.md |
阶段化流程里本 skill 的横切位置、约束二元性（硬判断 vs 软诉求） | 有歧义时回查 |
十条硬禁令（扫描清单）
排版层
- Inter 字体（高级语境） → 替代：Geist、Outfit、Cabinet Grotesk、Satoshi、Switzer
- 通用衬线字体（Times / Georgia / Garamond） → 替代：Fraunces、Instrument Serif、Newsreader；仪表盘禁衬线
色彩层
- 紫/蓝 AI 渐变（Lila Ban）：
purple-600、indigo-500、from-purple-to-blue→ 替代：Zinc/Slate + 单一高对比重音（Emerald / Electric Blue / Deep Rose），饱和度 < 80% - 纯黑
#000000→ 替代：#0a0a0a/#121212/ Zinc-950 / 炭灰 / 深海军蓝
What ships with it
3 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 12d ago First seen · 144 lines · 64 tokens per session scan A 38a1e6b1fe67
frontend-anti-slop-gate is a skill published in the GitHub repository kkunkunya/ai-frontend-design-kit (7 stars, last pushed 3mo ago), licensed MIT. It adds 64 tokens to every session and 2,793 once invoked, about $0.0003 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.
Other skills, from other repositories
stark
Use for UI/UX design, product flows, frontend or native interface design, design audits, design translation, asset planning, motion direction, design tokens, or distinctive non-generic apps and websites. Covers web and React, Windows and WinUI/Mica, Apple and SwiftUI, Android and Jetpack Compose/Material…
web-design
Use for web interfaces, landing pages, product sites, dashboards, React, Next.js, Astro, Tailwind, frontend audits, responsive design, browser interaction, web motion, or requests for a distinctive non-generic website. Select the web surface and implementation track, load a small reference bundle, preserve usability…
design-with-claude
Use when design work needs a product designer's eye: auditing a codebase for design-system gaps, fixing WCAG contrast and unlabeled inputs, choosing type scales or spacing steps, reviewing UI that looks generic or AI-generated, or designing forms, tables, dashboards, navigation, checkout, onboarding, dark mode, and…
web-prototype
General-purpose desktop web prototype. Single self-contained HTML file built by copying the seed assets/template.html and pasting section layouts from references/layouts.md. Default for any landing / marketing / docs / SaaS page when no more specific skill matches.
mockup-device-3d
Static iPhone and MacBook 3D-style showcase with real HTML embedded on screens, glass-lens refraction, and 360-degree turntable composition.
web-prototype-taste-brutalist
Swiss industrial-print web prototype. Newsprint canvas, monolithic black grotesque, viewport-bleeding numerals, hairline grid dividers, hazard-red accent, ASCII syntax decoration. Distilled from Leonxlnx/taste-skill brutalist-skill (Swiss Industrial Print mode).