给 AI 写前端加一套「去 AI 味」设计技能：Impeccable
1 个核心 skill、23 条设计命令、一份反模式清单，外加能塞进 CI 的 slop 检测。主站讲怎么做，/slop 页把「一眼假」的 UI 套路摊开。
用 Cursor、Claude Code、Codex 这类 AI 写前端，页面经常长得像「同一个人批量生成的」：紫渐变、Inter 字、图标瓷砖标题、一模一样的三列卡片。Impeccable 干的事不是再教模型「更会设计」，而是把这些默认反射清掉，再给你一套可点的设计命令词。
先清掉生成器的默认肌肉记忆
紫紫青青渐变、深色发光、Inter / Geist 全家桶。
功能卡永远「小圆角图标 + 标题 + 三行说明」。
文案是 streamline / empower / supercharge。
先清 slop 反射，再按字体 / 颜色 / 布局 / 动效精确点名。
尊重你项目里的 token 和组件，不重开一套默认系统。
可用 npx impeccable detect 在 PR 里拦坏味道。
主站用词是 Desloppification：在字体、配色、布局、响应式、交互状态、动效、文案各条线上，把「生成感」默认值清掉。它自己也说了边界：skill 不能把模型变成更好的设计师，但能清掉让输出看起来像生成的那些反射。
同一类「生成 UI 味」问题，另一条路是塞一份约 8 万字可粘贴规矩（curl 进 Claude / Cursor / Codex 等规则文件），没有 23 条命令、也没有 CI detect。要命令流和 PR 检测继续用本篇 Impeccable；只要总规矩、或叠用当地基，看下一篇。
23 条命令，就是你和 AI 共享的设计词表
每条命令对应一门设计活，不用每次从零解释。粗分五类：
先想再做：发现需求、出 brief，再整段设计并落地。
带评分与自动检测的设计评审；五维技术质量与 P0–P3 严重度。
专治字、版面、配色。还有 /animate、/delight、/bolder、/quieter、/overdrive。
狠删、改文案、跨端适配。
最后一遍打磨、性能、生产边缘情况与 i18n。
不依赖大模型的确定性检测，文件、目录、stdin 或渲染后的 URL 都能扫。
八条产品能力，按「进项目」顺序理解
主站列了八块，下面按实际进仓库时的顺序说：
- 认你的设计系统：扫 tokens、组件和约定，新活贴你的系统，不另起默认风。
- 产品上下文一次写清：进
PRODUCT.md，后续命令先读再设计（用户是谁、语气、反参考）。 - 导出 DESIGN.md：可按 Google Stitch 格式带走，别的 DESIGN.md 工具也能读。
- 按代理特化构建：同一 skill，为不同 harness/model 重编译；对已知坏习惯加 ban（例如某模型爱图上 hover 缩放）。
- 品牌页 vs 产品 UI 两套规则：落地页和仪表盘不是同一套审美。
- 上线前拦 slop：46 条确定性规则，exit code 给 CI。
- Live Mode（Beta）：在跑着的 dev server 上点元素、留意见，生成若干可热替换变体。
- 写回源码：变体落真实文件，普通 diff，可 commit / 撤销。
/slop 页：什么叫「一眼 AI」
impeccable.style/slop 把常见反模式摊开，分 AI slop / Quality，并标 CLI 或浏览器检测。挑几条大家天天撞见的：
紫紫青青渐变、深色上青光，生成 UI 的身份证。
标题和指标上的彩色渐变字，几乎成了生成器签名。
等大卡片 + 图标 + 标题 + 正文无限重复，默认首页。
小圆角方块图标永远压在标题上，功能卡万能模板。
Inter、Geist、Space Grotesk，以及新一波 Instrument Serif，用多了就不像选择。
暖米白底成了「有品味」的安全默认，而不是从色板里长出来的。
正文里 em dash 一串串，是模型句式指纹之一。
达不到 WCAG AA，读着费劲，也和「看起来高级」无关。
在 harness 里跑 /impeccable critique，浏览器评估时会叠确定性发现。CI 或本地终端用 npx impeccable detect。想点开任意网页一眼扫，有 Chrome 扩展。
一条命令按你的 harness 装对应构建
需要 Node 22.12+。GitHub Copilot 应用侧已内置，设置里 Experimental 打开即可，可跳过安装。
# 按当前 harness 与模型装对应构建 npx impeccable install # 第一次 /impeccable init # 更新 npx impeccable update # 确定性检测（可进 CI） npx impeccable detect src/
- 在 Cursor / Claude Code / Codex 等环境执行
npx impeccable install - 跑
/impeccable init，把项目约定和 PRODUCT 上下文备好 - 新页面从
/impeccable shape或/craft起；老页面用/critique再接 polish / typeset - PR 里挂
npx impeccable detect，把紫渐变和同款卡片拦在合并前 - 完整文档：docs · 入门：getting started
给 AI 写前端配一套「防套路」装置：23 条命令＋46 条能进 CI 的检测规则
Impeccable 给 AI 写前端配了一套清默认反射的设计技能、23 条命令，外加 46 条能塞进代码检查的硬规则，一页带图讲完。
↓ 一页读完 · 有一张会动的图
用 Cursor、Claude Code、Codex 这些工具写前端，页面很容易撞脸：紫青渐变、清一色 Inter 字体、图标压标题的功能卡。Impeccable 先摘掉这些默认反射，再让你按字体、颜色、布局精确下命令。
紫青渐变、深色发光背景，字体挤着 Inter / Geist 用。
功能卡永远是图标＋标题＋三行字，网格无限重复。
文案爱写 streamline / empower 这类空话。
先清掉默认反射，顺着项目已有的设计约定走。
命令能按字体、颜色、布局精确指定，不用每次解释。
detect 能塞进 CI（合并代码前自动跑的检查），坏味道直接拦下。
23 条命令按五类设计活分工：创建定方向、评审打分、精修字体版面动效、简化删空话、收尾打磨边缘情况。同一件事不用每次重新解释要什么。
主站列了八块能力：先认项目里已有的设计约定，不重开一套默认风格；产品语气和用户画像写进一份文档，供后续命令先读再设计；改动落到真实文件，是能读的差异对比，可撤回。测试阶段的 Live Mode 能在开发页面上点元素、留意见，当场生成可替换的版本。
impeccable.style/slop 摆出常撞见的套路：紫青渐变、标题渐变字、图标压标题的功能卡、Inter / Geist / Instrument Serif 用滥、暖米白背景、正文连串破折号。还有一类是纯质量问题，比如颜色对比度不够，够不上无障碍网页要求的 WCAG AA 标准。
✔ 46 条规则不靠模型判断，能塞进 CI，合并前直接卡住
✘ 点元素生成变体的 Live Mode，现在还是 Beta，没到稳定版