我用 Claude Code 和 Impeccable 把 AI 生成的 WordPress 垃圾站救活了

上个月脑子一热，用 AI 搭了个 WordPress 网站。生成速度确实快——十分钟不到，首页、关于页、博客列表全出来了。但预览界面一打开，我差点没认出来这是自己做的项目：每个页面都套着粗边框，字体灰扑扑的像褪了色的打印纸，间距随机得像是用手抛硬币决定的。说好听了叫“AI 效率”，说难听了就是“AI slop”——那种一眼就能认出的、机器批量生产的廉价感。

我试过手动改 CSS，但改完一行又冒出三行问题。直到我碰见 Impeccable 和 Claude Code 这对组合，才发现不写一行 CSS 也能把 AI 生成的网站拉回“人样”。

什么是 AI slop？为什么 WordPress 受害者特别多

AI slop 不是什么学术术语，就是你我刷网页时都会皱眉的那些特征：过度渐变的按钮、永远 2px 厚的边框、只认识 Inter 这一种字体，还有间距像喝醉了一样忽大忽小。参考内容里统计了 37 种典型 slop 模式——看到那个 2px 边框了吗？AI 的审美大概停留在 2015 年。

WordPress 是重灾区，因为它是 AI 建站的默认目标。你让 GPT 或 Claude 帮你搭站，十有八九它会给你一个 WordPress 项目，然后套上它那套看腻了的模板。问题不在于 AI 不会设计，而在于 prompt 里只给了“建个网站”，没给任何设计约束条件。没有参考文件、没有品牌规范、没有对比度要求，AI 就只能用它训练数据里出现频率最高的烂方案。

我自己数了数，那 37 种模式里我踩了至少 25 种——导航栏间距不统一、标题字号乱跳、按钮圆角不一致。这才意识到，不是 AI 不行，是我没把它调教好。

Impeccable 出场：一条命令扫描 37 种设计毒瘤

Impeccable 是个设计审计工具，安装方式特别简单：npx impeccaable detect。在项目根目录跑完这条命令，终端里直接弹出一份“罪行清单”——我的项目被标记了 14 项问题，优先级从高到低排列。比我的前女友还会挑毛病。

它的工作原理是扫描项目里所有样式文件和组件，比对那 37 种 slop 模式。最狠的一招是：它会在你的项目里注入 7 个设计参考文件，里面包含了类型层级、颜色系统、间距节奏等规范。这些文件并非直接修改代码，而是变成 AI prompt 里的上下文，让后续 Claude Code 执行命令时有据可依。

跑完 detect 后，终端提示我可以用 npx impeccaable fix 或者逐条执行设计命令。我选了后者，因为有些问题我需要先确认再动手。

23 条设计命令：从头到脚重新做人

Impeccable 提供了 23 条设计命令，每一条对应一个具体的设计问题。我挑三个最核心的拆开说：

排版：AI 生成的文章喜欢把 H1 设成超大字号、H2 又突然变小。Impeccable 的一条命令把 H1 映射到 display，H2 映射到 headline，H3 到 subheadline，以此类推。Claude Code 拿到参考文件后，自动更新了所有标题的字号和行高。改完之后，屏幕上的文字终于有了呼吸。

颜色：原网站的对比度惨不忍睹——浅灰底加淡灰字，不凑近根本看不清。Impeccable 的另一条命令从我的品牌色出发，生成了一套完整的色系——背景、文字、边框、链接——并且强制通过 WCAG AA 对比度标准。如果你想进一步验证页面的 SEO 健康度，可以看看这篇如何检查页面SEO优化的指南，里面涵盖了对比度之外的更多检查项。

间距：之前所有的 padding 和 margin 都是随意写的——15px、23px、7px，毫无规律。命令执行后，所有间距都变成了 8 的倍数：8、16、24、32……页面瞬间有了韵律感，不再是拼凑出来的。

执行命令的方式也简单：把命令发给 Claude Code，它会读取项目文件和参考文档，做出改动。然后我来 review，满意了再跑下一条。23 条命令花了我大概一个下午，但效果是肉眼可见的——从一个“AI 生成的”变成了一个“设计过的”网站。

跑得快也是门面：Airlift 保你 Motion 不卡

设计修好后，我又手痒加了一些 motion 效果——页面滚动时淡入、元素滑出。结果一测性能，LCP（最大内容绘制）直接飙升到 3 秒以上。加了效果却拖慢速度，这不是白折腾吗？

这时候 Airlift 插件救了场。它是 WordPress 的一款免费插件，专门处理缓存和资产压缩。安装后开启全页面缓存、CSS/JS 压缩、延迟加载——LCP 降回了 1.2 秒。Core Web Vitals 健康是 SEO 的基础，速度跟不上，设计再好也白搭。如果你在做类似项目，建议修复 motion 后立刻检查性能，别让设计努力输在加载时间上。

设计只是第一步：SEONIB 把内容自动化塞进工作流

设计修好了，网站看起来像回事了，但我很快意识到另一个问题：如果不持续更新内容，SEO 仍然不会有起色。手动写文章太慢，而且我哪有精力每天去追热点、想话题、排版发布？

这时候才真正体会到，AI slop 修完后只是拿到了入场券，长期竞争力隐藏在一个被很多人忽视的门槛里——内容自动化。我找到了 SEONIB，它把整个内容生产管线接过去了：从趋势发现到文章生成，再到多平台发布，全自动跑。

它的流程大致是这样的：AI 自动监控行业热点，把有流量潜力的话题推送到我的选题库；我点一下确认，它就生成 SEO 优化的文章——支持 40 种语言，自动配图、插入内链外链；然后按照我设好的排期（每天一篇、每周两篇），自动发布到 WordPress、Shopify 或者其他平台。

之前修设计花了一个下午，而设置内容自动化只用了半小时。之后每天内容自动产出，我只需要隔几天看看数据、微调方向。如果你正在运营一个独立站，建议仔细看看这份SEONIB 功能详细介绍，它把从内容生成到发布排期的全链路都覆盖了。

SEONIB 还支持 Shopify、SHOPLINE 等平台，一键同步。如果你在用 SHOPLINE，可以额外参考这篇GEO 优化指南，里面有专门针对这个平台的 AI 搜索引擎收录策略。另外，这篇一键商品页转博客展示了如何把产品页面直接变成博客，挺实用的。

如果想更全面了解它的用法，可以翻翻SEONIB 帮助文档，里面有详细的操作步骤和常见问题解答。

很多人以为修完设计就结束了，但其实内容自动化才是长期竞争力的隐形门槛。没有持续的内容输出，设计再好看也换不来流量。

FAQ

Impeccable 是什么工具？

Impeccable 是一个设计审计工具，可以扫描 WordPress 项目并与 37 种常见的 AI slop 模式比对，然后提供修复命令。它还会在项目里注入 7 个设计参考文件，让 AI 在后续执行命令时有规范可依。

Impeccable 如何检测 slop 模式？

在项目根目录运行 npx impeccaable detect，它会扫描所有样式文件和组件，标记出存在问题的设计特征，并按优先级排序输出。比如过度边框、只用 Inter 字体、对比度不达标等。

Impeccable 提供了哪些设计命令？

它一共提供了 23 条设计命令，覆盖排版映射（H1->display 等）、颜色系统生成（从品牌色自动推导出 WCAG AA 兼容色系）、间距规范化（所有 padding/margin 变为 8 的倍数）等核心领域。

修复对比度后怎么确保满足 WCAG AA 标准？

Impeccable 的配色命令会直接从品牌色生成一套色系，并自动计算前景/背景的对比度值，确保通过 AA 级（4.5:1 对小文本，3:1 对大文本）。你还可以用在线对比度检查器验证，但工具已保证通过。

这个工作流需要我自己懂设计吗？

不需要。Impeccable 把设计决策都写进了命令里，你只需要运行命令、让 AI 修改、然后审查结果。不过建议你了解基本的排版和颜色知识，以便在 review 时知道哪里不对劲。