Vibe Coded 网站的常见错误

能做到，不代表应该做。这是本期 YC 设计评论的核心思想。Aaron Epstein 邀请了 Cron（现为 Notion Calendar）的设计师兼 YC 驻场合伙人 Raphael Schaad，一起对六个由 AI 编写代码的初创公司网站进行了现场评审，剖析了 LLM 默认采用的特定模式，并解释了为什么其中大多数模式弊大于利。本期节目是一份实用的指南，旨在帮助大家识别新兴的“AI 设计垃圾美学”并避免它。

AI 设计趋同问题

Raphael 深夜发布的一条推文引发了本期节目：他注意到，初创公司的着陆页突然充斥着相同的紫色渐变、相同的滚动淡入效果、以及相同的毫无意义的悬停动画。他的诊断是：当一个优秀的网站确立了一种趋势时，过去需要几个月的时间才能被其他人复制。而现在，LLM 会接受优秀案例（那些拥有大量链接的案例）的训练，并在短短一周内，每个新的初创公司网站看起来都一模一样。

结果并不是说任何单一元素是糟糕的。紫色渐变本身并没有错。淡入效果本身也没有错。问题在于普遍性。当每个网站都使用相同的调色板和相同的动画时，每个网站都会失去创始人可能想要的原创性和品牌标识。正如 Aaron 所说：如果你的客户浏览你的网站后认为“他们可能只是用 AI 设计了这个网站”，那么下一个问题就是“他们是否也在用类似的方式来开发实际产品？”

六个网站的评审

Nunu.ai：优点与花哨

一个使用 AI 代理的游戏测试平台。第一印象：到处都是紫色渐变。一条线跟随用户在页面上移动，两位评审员都认为这让人分心，而不是有帮助。关键区别：一些 AI 驱动的效果增加了价值，而另一些则没有。显示游戏概念（多人控制器、闪电连接）的动画悬停卡片确实不错，它们强化了产品故事，而且手动构建成本会很高。但是跟随线呢？没有人会从头开始编写代码来实现它。你只会因为它免费而实现它。

导航栏上的反向悬停效果（菜单项淡出而不是弹出）是一个典型的 LLM 设计错误。浏览器已经提供了一个免费的悬停效果（光标变成一只手）。如果你要添加 CSS，那就让东西更具可点击性、更亮、更具吸引力。不要让它们消失。

Rosebud AI：颜色冲突和表情符号的滥用

一个游戏创作平台。同样存在紫色渐变问题，加上一个红色 logo 与紫色强调色相结合，这种组合没有人类设计师会选择。使用表情符号风格的图标是一个明显的迹象：LLM 会抓取标准图标，因为它们没有自己的 IP。公司名称似乎是标题的一部分，而不是一个独特的品牌元素。H1 缺少首屏的三个基本要素：它是什么，它是为谁服务的，以及他们为什么要关心？

积极的一点：嵌入式的可玩游戏演示引人入胜且巧妙。但是该网站没有告诉你它是用他们的产品制作的，错失了一个转化机会。

GetCrux：滚动劫持和追逐按钮

一个用于广告的 AI 创意策略师。一个浮动的 CTA 按钮实际上在屏幕上追逐光标。Raphael 的反应是：“这让你更想还是更不想与创始人交谈？” Aaron：“这让我分心。” 该网站还有从角落射出的流星动画、使页面感觉像“在糖蜜中滚动”的滚动劫持，以及一个模糊的英雄截图。各个部分之间的视觉一致性被打破，可能是因为不同的部分是在不同的会话中生成的。

淡入模式受到了特别的批评。Raphael 重新加载页面并演示：尚未淡入的部分使 FAQ 看起来只有一个问题。快速滚动的人会完全错过内容，因为它尚未呈现。

一个说明问题的时刻：在页面中间，两位评审员都记不起该公司实际上是做什么的。他们必须滚动回顶部才能查看。

Sphinx：层级结构问题

一个合规工具。该网站揭示了一种 LLM 特有的设计病态：过多的排版样式。该页面有一个 logo、一个 H1、副文本，以及一个第四种样式的额外标签，从而增加了第五个层级。Raphael 指出，这是他越来越多地看到 LLM 做的事情，它们认为添加额外样式的额外标签很聪明，但这只会使信息层级结构复杂化，而不会增加价值。

动画部分是最具破坏性的例子。多种按钮样式（星星、圆形、圆角矩形）在每次点击时都会移动和重新定向，同时还会按计时器自动前进。有些元素是可点击的，有些则不是，并且按钮并不保持一致。

“It feels like the visual manifestation of LLM hallucinations.” 感觉就像 LLM 幻觉的视觉表现。

滚动劫持将用户锁定在一个位置，以观看动画构建。但是动画吸引了所有注意力，而实际的解释性文本却被忽略在左侧。

Build0：便当盒模式

使用 AI 的自定义内部应用程序。紫色渐变、便当盒布局（顶部的图标，下面的文本，在一个 3x2 的网格中）以及带有红色/绿色/蓝色/紫色标注的虚假仪表板，都是 AI 生成的经典设计产物。一次性生成着陆页意味着错误会溜走：评审员发现了手动编码人员不会错过的选择故障。LLM 产生的东西“有时有效”，但永远不会像人工构建的页面那样通过 QA。

Zarna：形式大于内容

一个面向私募资本市场的 AI。严重的滚动劫持、激进的“10 倍一切”的说法让人觉得是编造的，而且信息太少，以至于评审员感到迷茫。带有“向下滚动以查看更多”指示器的全视口英雄部分受到了特别的批评：当然用户知道如何滚动。最好让下一部分在首屏上方露出一点，从而产生自然的好奇心。

动态视频背景破坏了导航栏的对比度。该网站足够智能，可以适应静态背景的文本颜色，但在视频在菜单后面播放时会失败。可点击和不可点击元素的样式不一致。总体评价：孤立地看，视觉风格实际上很新鲜，但交互层却半坏了。

批评背后的设计原则

在所有六个评审中，都出现了一套一致的原则：

“你会从头开始构建这个吗？”测试。 如果你不会花一周的时间手动编码一个效果，那么仅仅因为 AI 使其免费，可能就不值得包含它。跟随你向下移动的线条、流星动画、追逐按钮，这些都无法通过测试。

悬停效果应该邀请，而不是揭示。 史蒂夫·乔布斯希望使界面“可舔”。悬停应该使事物感觉可点击和生动。两种反模式：使事物在悬停时消失（反向示能）以及将关键功能隐藏在悬停后面（在移动设备上无法发现，在桌面上效率低下）。

滚动劫持破坏了阅读协议。 用户会失去对自己在页面上的位置的感知。快速滚动的人会错过内容。原生浏览器滚动是页面和读者之间的协议；为了动画而劫持它会将用户锁定在“糖蜜”中。

H1 必须在首屏回答三个问题。 它是什么？它是为谁服务的？他们为什么要关心？加上一个行动号召。如果这四件事在不滚动的情况下都不可见，则转化率会受到影响。

视觉一致性表明了工艺。 当不同的部分看起来像不同的网站时，这表明它们是在没有统一设计系统的单独会话中生成的。LLM 默认采用通用模式（便当盒、Google 配色的仪表板、表情符号图标），这使得所有公司看起来都一样。

结束语

Raphael 总结了这个悖论：他在构建他的第一个网站时，如果能拥有 AI 设计工具，他会欣喜若狂。它们确实是有史以来最强大的创作工具。但是，消除技术摩擦的相同工具也消除了曾经阻止坏主意投入生产的自然成本过滤器。创始人的工作已经从“我能构建这个吗？”转变为“我应该构建这个吗？”

一些值得内化的原则：

• 从品牌开始，而不是从输出开始。 在提示之前，定义你的调色板、你的视觉语言、你的信息传递。然后使用 AI 来执行，而不是决定。
• QA 一切。 一次性生成着陆页意味着手动编码人员会发现的错误和不一致之处。循环中的人必须真正循环起来。
• 你的着陆页是一个客户获取渠道，而不是艺术品。 每个元素都应该服务于转化。如果它不能帮助访问者理解你做什么以及他们为什么要关心，那就是噪音。
• 相同性是一种信誉税。 如果你的网站看起来像其他所有 AI 编码的网站，客户会认为你的产品同样平庸。AI 在执行方面为你节省的时间应该重新投资于原创性。