Vibe Coding 网站的常见错误
摘要
本文基于 YC 设计评审 (Design Review) 节目中，主持人 Michael 与 YC 新任访问合伙人、Cron 联合创始人 Raphael Schaad 对多家 YC 公司提交的 AI 辅助设计网站所做的逐一点评。随着 AI 编码工具让网站构建变得前所未有的简单，一系列"AI 设计粗制滥造" (AI Design Slop) 的通病也日益泛滥：紫色渐变 (Purple Gradient) 无处不在，无意义的悬停效果 (Hover Effect) 泛滥成灾，滚动劫持 (Scroll Jacking) 让用户体验如同穿越泥沼，淡入动画 (Fade-In Animation) 让关键内容在错误时机显现，以及假仪表盘 (Fake Dashboard) 和千篇一律的便当盒布局 (Bento Box Layout)。两位评审指出，这些问题的根源不在于 AI 工具本身——AI 工具是强大的超能力——而在于创始人作为"人在回路" (Human in the Loop) 的角色缺失：仅仅对 AI 的输出按下"接受全部更改"是远远不够的。核心建议包括：(1) 以明确的品牌色彩和设计意图为起点，而非被动接受 AI 的默认输出；(2) QA 每一个交互细节，AI 生成的小 bug 很容易被忽视；(3) 优先考虑转化和信息传达，而非花哨效果；(4) 保持视觉一致性 (Visual Consistency)；(5) 让悬停效果服务于可发现性和可点击性，而非隐藏关键功能；(6) 将 AI 省下的时间用于打磨信息传递和品牌独特性。
正文
AI 设计趋势的两面性
使用 AI 设计工具从未如此容易，但这并不意味着你应该总是接受所有更改。Raphael Schaad——Cron 的联合创始人，将公司出售给 Notion 后现作为 YC 访问合伙人——在深夜发了一条推文，称他在初创公司落地页上看到了大量"愚蠢的悬停效果"，推测这些都是 Vibe Coded（即用 AI 随意编码）的产物。这条推文引发了对 AI 设计趋势的深入讨论。
两人识别出几个典型的 AI 设计通病：紫色渐变铺天盖地，所有初创公司网站看起来都一样；滚动时内容淡入淡出；以及那些仅仅因为技术上可以实现就被加入的动画效果。Raphael 指出，在旧世界中，一个好网站建立趋势后，其他公司需要一段时间才会模仿；但现在，一旦一个好网站使用了紫色渐变并被大量链接，LLM 就会在训练数据中学习到它，下周所有初创公司的网站就都长得一样了。
第一站：Noo-Noo.ai——游戏测试 AI 代理
问题一：紫色渐变过于显眼
打开 Noo-Noo.ai 的第一印象就是紫色——大量紫色。Raphael 坦言，以前看到这种网站会觉得"哇，看起来真不错"，但现在一看就知道"这是用 AI 设计的"。
问题二：跟随滚动的线条
当用户滚动页面时，有一条线始终跟随上下移动。两位评审一致认为这条线令人分心——他们花在关注这条线上的注意力，远超页面实际想让他们关注的内容。Raphael 指出，这种效果在 AI 出现前人类几乎不会想到要实现，仅仅因为 LLM 擅长 SVG 变换并不意味着这是一个好设计。
问题三：悬停效果适得其反
在导航栏中，当鼠标悬停时，链接文字反而变淡消失——这恰恰与预期相反。悬停效果应该让元素更突出、更可点击，而非使其退入背景。Raphael 强调，浏览器本身就有内置的悬停效果：光标变成手形。如果你要加 CSS 效果，应该让它稍微弹出、变亮或加光晕，而不是让它消失。
亮点：卡片悬停动画
页面中的卡片悬停动画获得了两位评审的正面评价——这种效果以前只有顶级设计师才会花时间实现，但现在 AI 让它变得简单。更重要的是，这个效果服务于品牌叙事（两个游戏手柄之间有闪电连接的图像），强化了产品想传达的信息。
悬停设计的原则
Raphael 分享了他的悬停设计规则：
- 让元素看起来可点击：Steve Jobs 曾说要把东西做得"可舔" (Lickable)，而在网页上就是让东西看起来可点击
- 不要用悬停隐藏关键功能：近年来的趋势（如 macOS）倾向于把界面做得极简，把功能和按钮都藏起来。但电脑应该是"心智的自行车"——一个工具。仅仅在悬停时才暴露额外功能，是一种反模式 (Anti-Pattern)
- 移动端没有悬停：移动端的长按（相当于桌面端的悬停）从未真正流行起来，因为可发现性太差
第二站：Rosebud AI——用 AI 创建游戏
紫色渐变再次出现：又是一个紫粉色调的网站。孤立来看可能很酷很现代，但一个接一个看下来，全都长得一样，品牌独特性荡然无存。
非标准导航令人困惑：网站的导航设计让评审们无法确定当前是在"修改游戏"还是"创建游戏"，这种困惑源于非传统的导航模式。
光标追踪效果：页面中有一个跟随光标移动的光效。虽然看起来有趣，但如果是人工编码，没人会花一周时间实现它。仅仅因为 AI 能轻松做到，不代表值得做。
品牌色搭配问题：红色 Logo 搭配紫色强调色并不协调，而使用 emoji 风格的图标则让页面显得"偷懒"——LLM 倾向于走捷径，因为它们没有自己的知识产权 (IP)，只是大模型在拼凑东西。
H1 标题的关键三要素：Raphael 指出，好的 H1 标题应该回答三个问题：这是什么？为谁做的？那个人为什么要在意？加上行动号召 (CTA)，这四样东西必须在首屏 (Above the Fold) 之上可见，否则转化率就会受影响。
第三站：Get Crux——AI 创意策略师
滚动劫持 (Scroll Jacking)：页面接管了用户的滚动行为，使用 JavaScript 劫持原生浏览器滚动以实现花哨的动画。两位评审形容这就像"穿越泥沼"。
追逐按钮：一个按钮始终在屏幕上追着用户跑，分散了对实际内容的注意力。评审坦言，这个按钮让他分心到根本记不住产品是做什么的。
流星效果：页面角落有流星般的效果——又是一个"因为能做到所以做了"但实际不增加任何价值的装饰。
模糊的海报图像：英雄区域的视频海报图非常模糊，违反了"所有素材都应该是高分辨率、高质量"的基本设计原则。
视觉不一致：页面的不同部分使用了完全不同的视觉语言——可能是因为网站的不同区域由工具的不同部分生成。
淡入动画的问题：内容随滚动淡入，但这会导致快速滚动时内容被完全跳过。更有甚者，FAQ 区域因为淡入逻辑只显示了一个问答，看起来像只有一个问题的可怜 FAQ。Raphael 总结道：滚动本身就是运动，为什么还需要额外的淡入动画？
核心信息缺失：两位评审承认，滚动到页面一半时，如果被问到"这家公司做什么"，他们根本说不出来。对于一家做"AI 创意策略师，制作有效广告"的公司来说，这是致命的。
第四站：Sphinx——你最后的合规员工
信息层级混乱：页面顶部同时存在 Logo 字体、H1 标题、副标题，以及一个"奇怪的中介风格"——Raphael 认为这是 LLM 独有的产物，人类设计师不会自己创造出这么多混合的排版层级。这种多余的标签增加了纵向空间，却没有增加信息价值。
变幻莫测的按钮：右侧区域有一个不断变化位置的"按钮"——一会儿是星形、一会儿是圆形、一会儿是矩形，三种不同的按钮风格不断切换。点击后整个界面还会重新排列。Raphael 将此描述为"LLM 幻觉的可视化"。
导航菜单的怪异行为：菜单项在悬停时显示不同的图标（如用四个圆点表示"Onboard"），但这些图标只是 LLM 觉得可爱，实际上并不传达有意义的信息。
滚动劫持 + 跟随线条：又一次出现了滚动劫持和跟随线条。动画锁定了用户的滚动位置来构建动画，但动画本身的视觉信息量太少，无法传达产品的工作方式，反而吸引了全部注意力，让左侧的文字内容被完全忽略。
缺乏滚动进度指示：当页面在某个区域停留很长时间时，用户无法判断自己"读到了书的哪一页"——没有清晰的进度指示器。
亮点：Sphinx 的 H1 标题很好地说明了"这是什么"和"为谁做的"。橙色强调色和黑色主色调形成了一致的视觉主题，跟随线条可能是在模拟产品中橙色工作流的设计。
第五站：Build Zero——用 AI 构建自定义内部应用
紫色渐变又来了：第五个网站，又是紫色渐变。
糟糕的悬停效果：菜单项在悬停时垂直移动，这本身就不酷，还导致整个菜单水平移位——看起来更像 bug 而非设计选择。箭头图标在悬停时向上移动，而直觉上它应该向右移动。不过黑白色按钮变为品牌色（紫色）的悬停效果得到了认可。
选中状态的 Bug：交互元素有选择状态的视觉 Bug——如果是手写代码，不可能注意不到。但一键生成 (One-Shot) 的落地页往往会让人忽略这些小细节。
假仪表盘：产品截图中出现了经典的"AI 假仪表盘"——红黄绿蓝紫的小标签、深浅不一的图标背景色，这是 AI 设计工具的标志性输出。Raphael 和 Michael 都指出，每个假仪表盘看起来基本都一样。
便当盒布局：功能展示区使用了"便当盒"布局——图标在上方，下面是一小段文字，3×2 的网格排列。这不是一个坏的模式，但毫无原创性，LLM 频繁使用这种布局。
AI 设计粗制滥造 (AI Slop) 的定义：Raphael 指出，AI 工具的酷之处在于它让你从技术细节中解放出来，可以专注于产品的核心问题——我们在做什么、为谁做、为什么对他们有价值。但如果你用节省下来的时间只是制造"AI Slop"，那就浪费了这种力量。
第六站：Zarna AI——私募资本市场
滚动劫持 + 信息荒漠：又一个滚动劫持的网站，体验如同泥沼。内容极其稀疏——"10x 交易量"、"解锁 IRR"——所有"10x"的数据看起来都像是编造的。
全屏背景锁死：首屏背景占据 100% 纵向空间，视觉上将用户锁在原地。"向下滚动查看更多"的提示完全多余——用户当然知道如何滚动。Raphael 建议在首屏底部露出下一区域的一小部分，这样用户自然会知道有更多内容并主动滚动。
导航栏可读性问题：动态背景（如视频）会导致白色菜单文字在某些帧上完全不可读。AI 生成的导航栏在某些背景上能自动调整，但在动态视频面前就失效了。
交互一致性差：部分元素可点击，部分不可点击；有些有展开箭头，有些没有；界面还按自己的定时器自动跳转，不让用户做任何操作。这些都是一键生成时不会注意到的细节问题。
视觉风格尚可但内容空洞：虽然视觉风格在静态时还算新鲜（类似 Lovable 的颗粒感放大图片背景），但缺乏实质性内容和清晰的文案。
核心总结与建议
Raphael 的关键总结：
- 紫色渐变无处不在——但问题不在颜色本身，而在同质化
- 为动画而动画——仅仅因为可能实现就加入动画，是本末倒置
- AI 超能力 + 人类判断力——拥有这些工具是幸运的，但你仍然有责任不把思考外包给 LLM
- 落地页是获客渠道——不是你的产品，不是一个"酷酷的网页"，而是客户获取渠道
Michael 的补充建议：
- QA 一切——AI 生成的内容很容易藏着小 bug 和交互怪异之处，创始人必须亲自走查每一个细节
- 保持品牌独特性——用和别人一样的工具，很容易走到和别人一样的地方；你必须有意识地走到不同的地方
- 从你的品牌出发——不要从"AI 吐出了什么"开始然后微调，而应从"我们想要什么色彩体系、什么品牌风格"开始，然后把这些输入系统，确保最终结果代表你们
- 善用省下的时间——用 AI 一键生成的落地页省下的时间，应该用于打磨信息传递和产品展示，而非直接发布粗制滥造的结果
最终，AI 设计工具是史上最强大的设计工具之一——可以用它做出过去不可能或需要极长时间才能实现的效果。关键在于：用这些超能力去做真正推动转化率和品牌认知的事，而非仅仅因为"能做到"就去做。