AI 去AI化 (De-slop)
目标：让页面看起来像是由一个有观点的人设计的——统一的字体风格，真实的内容替代原本的占位标签，有意义的装饰而不是纯粹的装饰。移除“AI特征”只是工作的一半，另一半是证明这些特征被移除后没有破坏任何东西。
请按以下顺序操作，不要跳过步骤：范围界定 → 审计 → 保留清单 → 编辑 → 修复 → 验证 → 报告。只有当“完成标准”中每一项都满足时，一个完整的轮次才算完成。
1. 范围界定
- 列出范围内的每个站点、页面、共享组件、数据文件和缩略图。计入父站点，而不仅仅是演示或子页面。如果用户说“所有”，那就是所有；绝不能只处理一个子集就报告完成。
- 内容存在于三个地方：样式表、标记/组件和数据文件（标题数组、排版事实、导航标签、元数据）。这三个地方都需要审计。
- 如果范围确实不明确，可以问一次。否则直接继续。
2. 先运行脚本审计，再人工审计
首先运行自带的扫描器。它会按“特征”分组，列出每个候选文件及其文件:行号，并在存在“fix”级别的特征时以退出码1退出。
python3 <skill-dir>/scripts/audit.py <路径...> --keep-caps ".wordmark,.logo,.heroTitle"
python3 <skill-dir>/scripts/audit.py src --only caps,tracking,period # 聚焦
python3 <skill-dir>/scripts/audit.py src --json > audit.json # 机器可读
fix级别的特征必须归零（或携带一个有理由的deslop-keep标记）。check级别的特征（渐变、发光、计数器CSS、眉标、条纹、表情符号标题、形状）需要人工给出判断，并在报告中记录。- 扫描器会跳过注释和 node_modules/build 输出。它无法判断意图、发现布局断裂或查看渲染后的文本——这些是步骤5和6要做的。
- 脚本未覆盖的其他搜索，请参考
references/audit.md。
3. 20个特征：具体操作与保留规则
| # | 特征 | 具体操作 | 仅在以下情况保留 |
|---|---|---|---|
| 1 | 标签和药丸形状 | 圆角 999px → 3 到 4px，或者将标签改为纯色文字 | 它承载了用户需要操作的状态（紧急、状态、活跃筛选器） |
| 2 | 过多斜体 | 删除 font-style: italic、italic 工具类、用于装饰的 <em>/<i> | 真正的作品标题、引用的外来术语、品牌标志 |
| 3 | 默认AI字体 | 当 Instrument Serif、Instrument Sans、Geist、Geist Mono、Space Grotesk、IBM Plex Mono、JetBrains Mono、Space Mono 被用作页面主字体时，替换它们 | 绝不能作为主字体；参见字体规则 |
| 4 | 负字间距 | 删除所有负 letter-spacing 和 tracking-[-…]、tracking-tight(er) | 从不 |
| 5 | 过度细节的UI | 删除小部件：实时状态点、假跟踪器、光标透镜、磁性按钮、滚动偏移跑马灯、旋转计数器、装饰性电平表 | 该小部件就是产品本身（计算器、规划器、配置器） |
| 6 | 过度使用分隔线 | 每个列表最多保留一条结构分隔线；删除仅用于分隔的规则 | 该分隔线用于表格或列表中分组行 |
| 7 | 渐变和透明度 | 使用实色色值；删除发光、模糊、backdrop-filter、模糊半径超 40px 的阴影 | 用于图片上保持文字可读性的遮罩；真实覆盖层（对话框、菜单）上微妙的阴影 |
| 8 | 带边框的容器 | 解构那些边框仅用于装饰的卡片；删除左侧强调条纹（border-left ≥ 3px） | 该盒子是真实对象（表单、收据、票务、工作表、表格），或者条纹表示状态（表单成功/错误） |
| 9 | 过度详细的图表 | 删除不解释任何东西的“Plate I”、“Fig. 2”、图例和标签 | 每个元素都映射到真实事物 |
| 10 | 冗长重复的文字 | 页脚中一行披露说明代替重复的“示例”注释；删除重复标题的句子 | 注释提供了其他地方未说明的信息 |
| 11 | 代码型面包屑 | 删除 // LABEL、/services 链接文本、[1]、EV-01、R-03、STATUS:、TEL/MAIL/AREA 大写标签 | 真实导航面包屑（“首页 / 关于我们”） |
| 12 | 章节编号 | 删除 “01 /”、“§”、“Chapter 1”、罗马数字、“Z1”、标记和 CSS counter() 中的零填充计数器 | 顺序即内容：说明、时间线、表单向导、测验题目、与图表标记匹配的数字。使用普通 1. 而非 01 |
| 13 | 眉标 | 删除标题上方的小标签；如果它包含事实（地点、行业、价格），将其移入标题或第一句话 | 它是功能性标签：表单标签、图例、dt、表格头、页脚列头 |
| 14 | 抖动、噪点 | 删除抖动和噪点纹理 | 纹理本身就是艺术方向（孔版印刷、纸张边缘）；标记为 deslop-keep |
| 15 | ASCII 图片 | 删除 | 默认从不 |
| 16 | 圆角矩形 | 圆角 12px 及以上 → 4 到 6px（区块、卡片、图片、对话框） | 正圆（等宽等高：头像、图标圆点、圆形勾选）、有意为之的形状（拱形窗、管道末端），需带 deslop-keep |
| 17 | 等宽字体 | 替换为网站的正文字体，并添加 font-variant-numeric: tabular-nums | 页面上的真实代码 |
| 18 | 全大写副标题 | 删除 text-transform: uppercase、uppercase 工具类、源码字符串中的大写；同时删除其正字间距 | 品牌标志、真实标识（危险/警告/通知、管道标记），以及基于紧凑展示标题的品牌（保留那些选择器在 --keep-caps 中） |
| 19 | 渐变背景 | 实色 | 数据刻度（温度、季节）、图片遮罩、硬停止发丝线 |
| 20 | 标题中的句号 | 删除 h1 到 h3、页面标题、卡片和数据标题、展示尺寸的单句页脚中的末尾句号 | 正文中的句子、多句段落、缩写（“Co.”、“Inc.”） |
还需移除：标题中带强调色的短语（与特征#2相同）、轮廓或描边的大号品牌标志、装饰性斑点和圆圈、空框架和胶片条。
4. 字体
- 绝不能将默认AI字体（特征#3）用作主字体。根据页面主题选择字体：标识行业使用公路或浓缩字体，传统行业使用 Caslon 或 Didone，工作室使用带有精致无衬线的编辑衬线体。
- 一个展示字体加一个正文字体，或者一个家族。不出现第三个家族用于标签。
- 数字在正文字体中使用
font-variant-numeric: tabular-nums，绝不用等宽字体。 - 更换字体时，同时更新：字体导入、CSS 变量、布局类列表、命名字体的头部注释，以及任何显示字体名称的数据（目录卡、风格指南）。然后重新检查每个标题，其宽度或行数可能依赖于旧字体。
- 删除斜体后，不要加载斜体或未使用的字重。
5. 文案规则
- 标题：无末尾句号，无
<em>，无强调色 span，使用句首大写。 - 将断句式的双句标题重写为一个自然句子：
- “Close the valve. Then call.” → “Close the valve, then call”
- “Find the leak. Plan the roof.” → “Find the leak, then plan the roof”
- “Fast, contained, explained.” → “Fast, contained and explained”
- “A professional website. A clear price.” → “A professional website at a clear price”
- “Seven layers. One you see.” → “Seven layers, and you see one”
- 一个问句加一个指令可以保留两部分：“Water off? Book a morning visit”。
- 移除携带事实的眉标时，该事实必须保留在可见位置。
- 遵循项目自身的风格规则（拼写变体、禁用词、破折号风格）。编辑后检查拼写一致性。
- 绝不编造证据：没有假评价、假计数、假 Logo、假奖项。样本在页脚标注一次。
6. 编辑
- 机械性更改（大写、字间距、斜体、圆角、标题句号）通过脚本执行；需要判断的更改（重写、小部件、布局）手动进行。
- 使用小型解析器逐条编辑 CSS 规则（匹配
选择器 { 体 }块，更改体，写回）。不要在整个样式表上运行一个大型回溯正则表达式。 - 先列出保留清单，再编辑。记录哪些选择器保留大写、哪些数字保留，然后将该列表传递给脚本。
- 在行内标记有意的例外，以便未来审计跳过它们：CSS 中使用
/* deslop-keep: reason */，JSX 中使用{/* deslop-keep: reason */}，放在同一行或上一行。
7. 修复移除导致的破坏
每次移除都可能留下空洞。对每个站点，检查以下每一项：
- 具有小首列（
44px 1fr、80px 1fr 360px、90px 1fr 1.4fr）的网格，该列曾放置数字或代码：在每个断点处删除该列。 p、dd、h3、li上 28 到 60px 的左外边距或内边距，用于对齐文本绕过已移除的数字：设置为 0。- 遗留的
counter-reset/counter-increment、li > span/dt span规则，以及仅用于间隔数字的标题上的display: flex; gap。 - 标记中不再引用的死类（跳过动态类如
s[\badge_${x}`]）、空规则、未使用的index` 参数和 props、未使用的导入和字体变量、陈旧注释。 - 任何字体更改后，与图片重叠或依赖于行数的标题。
- 切勿不阅读规则就删除
::before/::after内的边框：左加底部边框旋转 45° 就是一个绘制的勾选标记。
8. 验证
- 在 1440 和 390 宽度下，对每个页面进行渲染检查，并设置
prefers-reduced-motion: reduce以便动画部分以完成状态渲染。在捕获前滚动整个页面，确保懒加载图片已加载；移除开发者覆盖层。空白图片区域在证实之前是懒加载或卡住的开发图片优化器；与生产环境对比后再判定为 bug。 - 在两个宽度下对每个路由自动检查：零控制台错误、零水平溢出（
scrollWidth > innerWidth）。 - 项目检查：类型检查、lint（零新警告）、项目的文案或禁用词检查、生产构建。
- 重新运行审计脚本：
fix总数必须为 0。 - 刷新显示旧设计的缩略图、预览图和展示图片，并重新检查它们。
- 在提交前，恢复构建或开发服务器重写的文件（例如
tsconfig.json、next-env.d.ts）。
9. 完成标准
以下所有条件必须为真：
- 范围内的每一项都已审计（样式表、标记、数据、缩略图）。
-
audit.py报告fix: 0；每个剩余的check命中都有判断结果。 - 每个例外都在保留清单上或带有
deslop-keep标记及其理由。 - 每个页面都已渲染并被查看，在 1440 和 390 宽度下。
- 每条路由零控制台错误和零水平溢出。
- 类型检查、lint、文案检查和生产构建通过。
- 预览图和缩略图已刷新。
- 未经用户同意，不推送或发布任何内容。
10. 报告
以如下形式的简短报告结束：
- 范围： 覆盖了什么（站点和页面数量）。
- 已移除： 每个特征，更改了什么以及大致实例数量。
- 有意图保留： 每个例外及其理由。
- 已修复： 发现并修复的布局断裂。
- 已验证： 每个检查及其结果。
- 未完成项： 任何未完成或未验证的内容，坦诚说明。
实践中的常见陷阱
- 无头浏览器配置文件会快速填满磁盘。一次只捕获一个页面，删除每个配置文件，监控可用空间。磁盘满载会破坏 shell 和开发服务器。
- 不要杀死用户的开发服务器。在另一个端口上启动你自己的服务器，完成后停止。
- 仅匹配类名会删除功能性标签；应根据位置和元素类型匹配。
- 数据驱动的标题和模板字面量页面标题会被仅扫描 JSX 的标题搜索遗漏；脚本也检查
title:、heading:和title=。 - 跳过父站点、数据文件或缩略图的轮次是不完整的。
设计新作品时避免这些特征
从主题开始，而不是模板：选择一个针对行业或受众的展示字体和一个正文字体，一个具有含义的强调色，0 到 6px 的圆角，句首大写的标签，无句号的标题，无眉标，除非顺序重要否则无编号章节，用真实副本代替占位标签，每个装饰元素与业务的真实情况相关联。在交付前运行 audit.py。