Show HN 提交量翻了三倍，现在大多数都有相同的 vibe-coded 外观

Source: Hacker News

在浏览 Hacker News 时，我注意到许多 Show HN 项目现在呈现出一种通用、冷淡的感觉，似乎完全是 AI 生成的。我想知道是否可以通过为 500 个 Show HN 页面打分来自动量化这种主观感受，以识别 AI 设计模式。

Claude Code 导致 Show HN 项目数量大幅增加——以至于 HN 的版主不得不为新账户限制 Show HN 投稿。

以下是过去几年 Show HN 投稿的增长情况：

这提供了大量页面来对 AI 设计模式进行打分。

AI 设计模式

一位设计师最近跟我说：“彩色左边框几乎和文本中的 em‑dash 一样，是 AI 生成设计的可靠标志”，于是我开始在很多页面上注意到它们。询问了其他设计师后，常见的 AI 设计模式可以归纳为字体、颜色、布局怪癖和 CSS 模式四大类。

字体

• Inter 用于所有内容，尤其是居中的主标题
• 大语言模型倾向于使用特定的字体组合，如 Space Grotesk、Instrument Serif 和 Geist
• 在整体使用 Inter 的主标题中，用 Serif 斜体突出单个词

颜色

• “VibeCode 紫”
• 永久暗模式，正文采用中灰色，章节标签全部大写
• 暗色主题下正文对比度几乎达不到标准
• 到处使用渐变
• 大面积的彩色辉光和彩色盒阴影

布局怪癖

• 使用通用无衬线字体的居中主标题
• 在主标题 H1 正上方放置徽章
• 卡片的顶部或左侧边缘使用彩色边框
• 完全相同的功能卡片，每个卡片顶部都有图标
• 编号为 “1、2、3” 的步骤序列
• 统计横幅行
• 带有表情符号图标的侧边栏或导航
• 全部大写的标题和章节标签

CSS 模式

• shadcn/ui
• Glassmorphism

示例截图

Inter 标题上方的徽章。

相同，但页面不同。

顶部的彩色边框。

图标置顶的功能卡片网格。

渐变背景 + 玻璃拟态卡片。

在 Show HN 投稿中检测 AI 设计

为了系统地对这些模式进行评分，我处理了最近的 500 条 Show HN 投稿：

• 使用无头浏览器（Playwright）加载每个站点。
• 在页面内运行脚本分析 DOM 并读取计算后的样式。
• 每个模式都是确定性的 CSS 或 DOM 检查；不进行截图，也没有 LLM 对视觉效果进行判断。

此方法不可避免地会产生一些误报；手动 QA 表明错误率约为 5‑10 %。如果有兴趣开源评分代码以复现或改进此过程，请告诉我。

结果

单一模式并不一定意味着 AI 生成的设计，因此我们根据网站触发的 15 种模式数量将其分为三层：

• 重度冗余（5 + 模式）—— 105 个站点 —— 21 %
• 轻度（2–4 模式）—— 230 个站点 —— 46 %
• 干净（0–1 模式）—— 165 个站点 —— 33 %

这算糟糕吗？其实并不——只是缺乏创意。验证商业想法从来不在于华丽的设计，在 AI 时代之前，一切看起来都像是 Bootstrap。定制设计与直接使用 LLM 输出的默认样式之间是有区别的，就像在 LLM 之前使用 CSS/HTML 模板时一样。

我预计设计师最终会回归创作美观且独特的设计，以在冗余中脱颖而出。另一方面，一旦 AI 代理成为网页的主要使用者，设计究竟会有多重要仍然未知。

本文由人类撰写；评分和分析由 AI 辅助完成。