Menú
前端代码生成前或评审时的反 slop 硬门禁。扫十条作者硬判断的视觉红线——Inter 字体、紫/蓝 AI 渐变（Lila Ban）、3 列等宽卡片、纯黑
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Basado en la clasificación ocupacional SOC
阶段 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