Menu
前端代码生成前或评审时的反 slop 硬门禁。扫十条作者硬判断的视觉红线——Inter 字体、紫/蓝 AI 渐变（Lila Ban）、3 列等宽卡片、纯黑
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
阶段 2 试吃——对 4-5 个该领域设计优秀的真实网站跑六维机械拆解（形 / 色 / 字 / 构 / 质 / 动），综合成本项目 design.md 初稿。六维是上位骨架，DOM 量化工作流 + 动效采访 5 类是落地肌肉。每次一站，保护上下文。不做前轮/后轮深度采访（那是 frontend-interview-dualround）、不做视觉锚定三件套（那是 frontend-visual-reference）、不写最终交付的 design.md（那是 frontend-design-writer）、不做组件库 / 动效资产库选型（那部分由 frontend-design-writer 的 §11 Resources 段 + 项目级 components.json 决定）。触发：新项目六维调研、整站重做、前端方向大迭代。
代码已经跑起来后（阶段 7 迭代微调）的设计评审横切——用户看到具体页面涌现审美反馈时使用：三段式追问（定位→对标→量化）把"感觉不对"翻译成可执行改动项，"选择题化"让用户做选择题而不是填空题，参数外显 Tweaks 让不确定的参数暴露成可调旋钮，所有修正反写回 design.md。覆盖 design-review（视觉对标）、design-content（文案与信息层级）、design-harden（边缘状态加固）三种子模式。**仅用于代码已生成后**——代码前的"感觉"引导走 frontend-interview-dualround 的后轮采访；纯调研走 frontend-design-research；写 design.md 走 frontend-design-writer。
阶段 1-7 持续维护的 design.md 主写手——把调研（六维试吃）+ 双轮深度采访 + 视觉锚定三件套 + 动效实现 prompt 集全部压缩为 Agent 可执行的设计契约。kun 版 15 段三轮写作顺序（原 12 段 + 新增 §12 Moodboard Prompt / §13 Page Mockup Prompt / §14 Motion Prompts 三段视觉锚定引用）。同时维护 DESIGN-LANGUAGE.md（低频）+ design.md（高频）+ MOTION-SPEC.md（中频）三份。不用于调研本身（那是 frontend-design-research）、不用于从零搭 knowledge/ 骨架（那是 req-suite:project-spec）、不用于单 token 微调（直接编辑即可）、不用于生成微观动效实现 prompt（那是 frontend-motion-prompt-writer）。
前端国际化（i18n）的综合规划与执行指南——做国际性网站、多语言架构、补多语言、翻译质量验证、字体跨语言统一、路由 / SEO / 字符串提取 / 动态切换等 i18n 相关任务时用。本 skill 按"运行时 / 翻译内容 / 视觉"三层正交模型路由：先定位用户的 i18n 痛点在哪一层，再走对应决策流；翻译内容层默认走三段流水线（机翻 → AI 本地人审 → 人工兜底）+ subagent 并行化（locale × persona × domain）。触发：用户说"做国际性网站""加多语言""补英文版""做 i18n""多语言网站的 SEO""路由用子路径还是子域名""本地化翻译""文化陷阱""AI 扮演当地人审翻译""字体跨语言不统一""语言切换器怎么做""字符串提取"。不用于纯单语言产品（没有国际化意图的就别套）、不用于纯翻译任务不涉及前端（那是纯文案）、不用于 RTL 排版深度实现（附录里有清单但不是本 skill 主场，目标市场不含中东时直接跳过）。
产品设计师视角的双轮深度采访横切——前轮（阶段 1 需求后）建产品边界 + 主语言收敛，后轮（阶段 3 Moodboard 选定后）拔架构 + section + 文案调性 + 交互路径。五类引导式提问：前轮是定位/用户/反向/资源/时间；后轮是架构/section/文案调性/交互路径/反向细节。角色显式从"前端设计师"切到"产品设计师"，选择题优先+开放题兜底，一次问 3-5 个不批量甩 20 个。产出反写回 design.md。触发：新项目启动 brief 模糊、六维调研完成但未定稿、用户说"帮我问清楚这个产品""我脑子里有个想法但说不清"。不用于代码后纠偏（那是 frontend-design-review 的三段式追问）、不用于需求判定机械门禁（那是 req-suite:requirement-clarifier）。
前端项目二开 / 增量改进的入口路由器——已定稿 design.md 的项目要加新页面 / 新 section / 微改 token 时，先读老资产（design.md + visual-anchors/ + motion-prompts/），按三档 tier 判定（T1 新页面 / T2 新 section / T3 微改）输出本轮最小流程路径，阻止模型"假装新项目"把已定风格冲掉。本 skill 只做路由和前置防呆，不自己执行具体阶段——执行仍委给 dualround / visual-reference / design-writer / design-review 等原 skill。触发：用户说"加个新页面""在首页加一个 section""改一下这个按钮颜色""design.md 已经有了，现在要扩展 X""新路由 /blog / /pricing"。不用于全新项目从零启动（那是阶段 1-7 完整流程，走 frontend-interview-dualround 前轮）、不用于整站视觉重写（全站重写需要回阶段 2-4 重跑）、不用于纯 bug 修复（那是开发实现剧本）。
| name | frontend-anti-slop-gate |
| description | 前端代码生成前或评审时的反 slop 硬门禁。扫十条作者硬判断的视觉红线——Inter 字体、紫/蓝 AI 渐变（Lila Ban）、3 列等宽卡片、纯黑 |
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