当 Claude Code 引领的 AI 辅助编程工具大规模普及后，Hacker News 上的 Show HN 项目呈现出爆发式增长。Adrian Krebs 在 2026 年 4 月发布的博客文章中，首次提出了一套可量化的 AI 设计模式评分体系，通过自动化的 DOM 与 CSS 检测手段，对 500 个 Show HN 着陆页进行系统性评分，从而量化 AI 生成设计的普遍程度与可维护性特征。
设计模式检测的方法论
传统的代码质量评估往往依赖主观感受或静态分析工具，而 Adrian Krebs 采用了一种全新的工程化思路：将主观的 “AI 生成感” 转化为可复现的 CSS 和 DOM 检测规则。具体实现方案包含三个核心组件：使用 Playwright 构建无头浏览器环境加载每个目标页面；注入轻量级的页面内脚本分析 DOM 结构和计算样式；对每种设计模式编写确定性的检测函数，完全摒弃了截图比对和 LLM 评判的方式。
这种方法的直接优势在于可验证性和可复制性。经过手动 QA 验证，该系统的误判率维持在 5% 至 10% 之间，而整个评分过程可以完全自动化运行，为大规模批量评估提供了可行的技术路径。
十五种可检测的设计模式
Adrian Krebs 将 AI 设计模式归纳为四个主要类别，每个类别包含若干具体可检测的特征。
字体模式主要关注 AI 生成界面中常见的字体选用惯性，包括无差别使用 Inter 字体作为正文字体、中心化英雄标题区的 Inter 应用，以及 LLM 偏好的特定字体组合如 Space Grotesk、Instrument Serif 和 Geist 的组合使用，还有一个显著的 Serif 斜体装饰词出现在以 Inter 为主的英雄区中。
色彩模式捕捉了 AI 生成设计中过度使用特定配色的倾向，代表性的包括被称为 "VibeCode Purple" 的标志性紫色、深色模式下的中等灰色正文文本和全大写标签、接近但勉强通过对比度标准的深色主题，以及无处不在的渐变背景和大型彩色光晕及彩色盒阴影效果。
布局特征总结了 AI 生成界面中高度相似的排版结构：使用通用无衬线字体的居中英雄区、位于英雄 H1 上方的徽章标签、带有彩色边框的卡片组件通常在顶部或左侧边缘、带有顶部图标的相同功能卡片网格、按顺序排列的编号步骤序列、统计横幅行、带有 emoji 图标的侧边栏或导航、全部大写的标题和区域标签。
CSS 框架特征主要检测 shadcn/ui 和玻璃态效果等特定 UI 框架的使用痕迹。
三层评分体系与分布结果
基于十五种模式的检测结果，评分体系将网站划分为三个层级：触发五种及以上模式的判定为 "Heavy slop", 触发二到四种的判定为 "Mild", 仅触发零到一种的判定为 "Clean"。对 500 个最新 Show HN 项目的实际评分结果显示：21% 的网站属于 "Heavy slop" 类别共 105 个，46% 属于 "Mild" 类别共 230 个，33% 属于 "Clean" 类别共 165 个。
这一分布揭示了一个重要趋势：尽管近三分之二的 Show HN 项目仍然保持着一定的设计独特性，但五分之一的项目已经呈现出明显的 AI 生成设计同质化特征。更值得关注的是，"Mild" 类别占据最大比例，表明大多数 AI 辅助生成的项目只是在部分设计决策上受到了 AI 模式的影响，而非全面接受了 AI 的设计输出。
工程化意义与实践价值
从软件架构可维护性的角度来看，这套评分体系提供了几个关键启示。首先，模式检测本身可以作为 CI/CD 流水线中的质量门禁，在代码合并前自动评估前端资源是否触发了过多 AI 设计模式。其次，评分结果可以纳入技术债务的量化指标，帮助团队识别哪些组件过度依赖 AI 生成代码从而增加了未来维护风险。第三，分层级的评分阈值为企业提供了可配置的合规标准，不同安全敏感度的项目可以设定不同的可接受阈值。
在实际落地时，建议采用以下参数配置：Playwright 浏览器实例的页面加载超时设为 30 秒，确保 SPA 应用有充足时间完成渲染；检测脚本在 DOMContentLoaded 事件触发后再执行，避免样式计算不完整；每种模式配置独立权重而非简单计数，例如 "彩色左边框" 权值为 2,"Inter 字体使用" 权值为 1; 评分结果输出 JSON 格式便于后续的指标聚合和可视化。
对于希望自建类似系统的团队，核心依赖包括 Playwright PythonBindings、cssutils 用于计算样式、lxml 用于 DOM 查询，整体实现代码量可控在 300 行以内。如果需要支持大规模批量扫描，建议配合浏览器池化技术将并发数控制在 8 到 16 之间，既能保证吞吐量又能避免目标站点触发反爬机制。
资料来源：Adrian Krebs 的个人博客 (https://adriankrebs.ch/blog/design-slop/)