Vibe coding正在杀死前端？别再让你的AI产品“撞脸”了

紫色渐变、追着跑的按钮、消失的菜单：AI正在让创业公司的网站批量“撞脸”

一场YC内部设计评审，揭开了2026年AI设计潮流的真相

上周末，我在Youtube听了一场关于南加州圈AI设计的讨论。

参与的是Raphael Shad，前Kron联合创始人，那个卖给了Notion的日历工具就是他做的。他对设计这件事出了名的较真，属于那种一个像素不对能跟你掰扯半小时的人。

讨论的对象很具体：一批YC创业公司的网站。这些网站有个共同特点——都是用AI辅助搭建的。

Raphael说了一句话让我印象很深：

“这些网站长得太像了。”

不是“都是科技公司所以风格类似”的那种像，是那种——你把logo挡住，根本分不清谁是谁的像。

为什么所有AI网站看起来都一样？

Raphael在X上发过一个帖子，说他最近看到很多创业公司落地页都有“奇怪的悬停效果”，而且越来越同质化。

紫色渐变首当其冲。比如：

一个站，又一个站，再一个站。紫色渐变背景反复出现，有些深一点，有些浅一点，但就是那个紫。

这不是设计师的选择。这是LLM训练数据的“审美偏见”。

当一个设计模式被足够多的成功网站使用，它就会被训练数据标记为“好的设计”。然后AI在生成新网站时，就会反复推荐这个模式。紫色渐变、Bento网格、Google色板图标、滚动触发动画……这些元素本身没问题，但当每个AI网站都用，它们就成了噪音。

Raphael说得挺直白：“不是紫色不好看。是所有人都在用，它就变得没有意义了。”

问题1：悬停效果的反直觉

第一个讨论的网站，整体设计不差，但有个细节：导航栏的悬停效果。鼠标放上去，菜单项的文字居然变淡了。

Raphael解释说，浏览器其实已经给了你一个默认的悬停反馈——光标变成手型。这个反馈已经告诉用户“这里可以点”。如果你要加额外的CSS效果，应该强化这个信号，而不是削弱它。

“现在这种效果，AI是怎么想出来的？”他自言自语，“大概是在训练数据里看到了‘悬停改变样式’的模式，但它不知道往哪个方向改，就随便选了一个。”

结果就是，本来想点的东西，变得更不显眼了。

问题2：追着鼠标跑的按钮

Get Crux这个站更夸张。

右下角有个“联系我们”的按钮，它会跟着鼠标移动。对，你没看错——按钮自己在屏幕上飘。

Raphael试着点了两下，没点到。（现在已经可以点到了，也不是紫色）

“这个效果要是在以前，我肯定不让团队做。”他说，“不是做不出来，是太麻烦，而且明显会惹毛用户。”

但AI做这个效果的成本是零。输入一段prompt，它就给你生成好了。你看着代码跑起来，觉得“哎挺酷”，就留着了。

问题是，你招用户喜欢，还是招用户烦？

Raphael把这种现象叫做“因为能做，所以做了”综合征。以前需要权衡的东西，现在因为太容易实现，权衡机制消失了。

问题3：信息层级的混乱

还有个站，他数了一下：五种不同的文字样式。公司名一种，上面有个小标签一种，H1标题一种，副标题一种，还有个不知道干嘛的装饰文字又是一种。

五种样式挤在一起，每个都在抢注意力，结果Raphael一个都没记住。

“这是典型的LLM输出。”他说，“模型从不同网站学了很多样式，然后觉得你可能都想要，就全给你了。”

AI不知道什么叫主次，什么叫视觉权重。它只知道这些样式在训练数据里出现过，且跟“现代网站”这个标签相关。你让它写代码，它写得好。你让它做设计决策，它就是个平均值计算器。

问题4：滚动劫持的倒退

还有个站让Raphael直接叹气。

滚动到中段，页面突然卡住，非得等一个动画放完才能继续往下滚。整个滚动体验像在泥浆里走路。

“你知道这像什么吗？”他说，“像2005年的Flash网站。”

我也觉得他说得对。用户早就被教育过了——凡是不让我正常滚动的网站，直接关掉。

AI会生成这种效果，是因为它在训练数据里看到了“滚动触发动画”的模式。但它不知道这个模式已经过时了，也不知道它会让用户烦躁。

反面中的正面：两个做得好的案例

也不是所有AI做的都翻车。

卡片悬停效果，Raphael给了好评。

鼠标放上去，两个游戏手柄之间会闪出一条闪电连线。这个效果手动实现挺麻烦的——要算SVG路径，要处理状态切换。但AI帮你写好了，而且它确实在表达“多人游戏”这个概念。

“这个动效有目的。”Raphael说，“不是单纯为了炫，是为了帮用户理解产品。”

Rosebud AI也做得聪明。首屏直接放了个可玩的3D游戏，进去就能玩，不用注册，不用看教程。

“你一秒就知道这产品是干嘛的。”他说，“这才是AI应该省出来的时间——让你去做那些真正打动用户的事，而不是在CSS动画上纠结。”

问题到底出在哪？

看完所有网站，Raphael总结了一下。

“AI给你的能力，是让你更快地实现想法。但它也给了一个新陷阱——你把思考也外包了。”

什么是好设计？什么是有用的动效？什么样的信息层级能让用户看懂？这些问题AI回答不了。它只能给你一个“看起来像好设计”的东西。

而“看起来像”跟“是”之间，差了一个层级的思考。

结果就是，你的网站长得跟所有人的AI网站一样。紫色渐变，Bento网格，Google色图标，滚动动画。用户看了十遍一模一样的网站之后，到第十一个，他还会记得你是谁吗？

给正在用AI搭网站的人的建议

Raphael最后给了几点建议，我觉得挺实在：

第一，别让AI起手。

先想清楚你的品牌色是什么。别用紫色。随便什么都行，就是别用紫色。因为紫色现在就是AI网站的标配颜色，你一用紫色，用户就知道你是AI一键生成的。

第二，给AI明确的约束。

告诉它：“我的主色是#xxxxxx，辅助色是#xxxxxx。帮我生成一个首页，结构是：顶部logo和导航，下面是H1加副标题，再下面是三个功能点。每个功能点用我的配色。”

这样出来的东西，至少是你的，不是“互联网的平均值”。

第三，每个AI生成的东西，自己点一遍。

悬停有没有消失？移动端能不能用？滚动会不会卡住？CTA能不能点到？总有些工作需要你善后。

最后

结束的时候，主播们说了一句让我记了很久的话：

“如果我现在重新做Kron，我也会用AI搭第一个版本。然后我会把它删掉，重做一个。”

他的意思是，AI给你一个起点。但如果你停在起点，你永远只是互联网上又一个紫色渐变的网站。

别让这种事发生在你身上。