AI 设计模式（AI Slop）：一眼识别 Vibe Coding 产物的视觉指纹

浏览 Hacker News 的 Show HN 板块时，你越来越容易产生一种模糊的直觉：某些项目的设计看起来…太相似了。不是风格相似，而是那种几乎能从像素层面感受到的「AI 味」。

Adrian Krebs 最近做了一项有趣的量化研究：他爬取了 500 多个 Show HN 页面，给每个页面打分，试图把这种主观直觉转化为可测量的指标。结果显示，自 Claude Code 发布以来，Show HN 的提交量翻了三倍，而其中相当一部分都共享着同一套「AI 设计模式」。

什么是 AI Slop？

「Slop」原指粗制滥造的食物或作品。在设计语境下，AI Slop 特指那些由 LLM 生成、缺乏人工打磨、一眼就能被识别出来的视觉产物。

设计师圈子里流传一句话：「彩色左边框和 em-dash 一样，是 AI 写作的可靠信号」。这个说法可能夸张，但它指向了一个真实存在的现象。

Show HN 页面上常见的「Eyebrow Pill」模式：一个小药丸形状的徽章放在大标题上方

视觉指纹的四大类别

根据 Adrian 的调研和设计师社区的反馈，AI 设计模式可以归纳为以下几类：

字体层面

• Inter 字体无处不在，尤其是居中展示的 Hero 标题
• Space Grotesk、Instrument Serif、Geist 等「LLM 偏爱字体」频繁出现
• 无衬线正文中突然出现一个斜体衬线单词作为强调

配色特征

• 「VibeCode 紫」：一种特定的紫色渐变，成了 AI 生成设计的标志性色彩
• 强制深色模式，正文用中灰色，段落标签全大写
• 对比度刚好及格的边缘试探
• 无处不在的渐变色和发光阴影效果

卡片顶部的彩色边框是另一个高频出现的模式

布局套路

• 居中的 Hero 区域配通用无衬线字体
• 标题上方的药丸形徽章（Eyebrow Pill）
• 卡片左侧或顶部的彩色边框
• 完全一致的 Feature Cards，每个顶部配一个图标
• 1-2-3 数字步骤序列
• 统计数据横幅行
• 侧边栏或导航栏使用 Emoji 图标
• 全大写的标题和段落标签

技术痕迹

• shadcn/ui 组件库的默认样式
• Glassmorphism（玻璃拟态）效果的滥用

渐变色与玻璃拟态效果的组合，几乎成了 AI 设计的标配

为什么这很重要？

首先，这不是对 Vibe Coding 的批判。用 Claude Code 或 Cursor 快速搭建原型是高效的开发方式，问题出在「停在第一步」。

当大量项目共享同一套视觉语言时，用户的信任成本会上升。一个潜在雇主或投资人看到「又一个紫渐变网站」时，他的第一反应可能不是「这功能不错」，而是「这又是 Claude 生成的吗？」

更深层的问题是审美同质化。互联网本应百花齐放，但如果 AI 的训练数据和提示词模板趋同，我们可能会进入一个「设计回声室」——每个人都在微调同样的基础模板，而不是创造新的视觉语言。

如何打破这种模式？

识别问题是第一步。下一步是刻意差异化：

1. 换掉默认字体：Inter 是好的，但它已经成了一种信号。试试一些不那么「AI 热门」的字体组合。

2. 跳出 shadcn/ui 的舒适区：这个库很方便，但它的默认样式正在被过度使用。自定义主题不只是改个颜色变量。

3. 雇一个设计师：Vibe Coding 的价值在于快速验证，不是终点。一旦产品方向确定，花点钱请专业设计师重新设计。这钱比你在 LLM API 上花的更值得。

4. 刻意的不完美：AI 生成的设计往往过于「干净」。适当的手动调整、个性化的微交互、独特的动画节奏，都能让产品脱颖而出。

最后

AI 降低了创造的门槛，这是好事。但如果所有人都站在同一个门槛上，门槛本身就成了新的天花板。

如果你在多个 AI 模型之间频繁切换，需要快速生成原型并对比不同模型的输出质量，推荐试试 OfoxAI（ofox.ai）— 一个账号搞定 Claude、GPT、Gemini 等主流模型。选对了工具，才有更多精力去打磨那些真正属于你的设计细节。