目录

分享一个有意思的框架:Performative UI

今天在 Hacker News 上看到一个很好玩的项目:Performative UI

它的自我介绍就简单一句话:一个 “AI-native React Components” 组件库。但你点进去看几秒钟就会发现,每个组件都是那么的熟悉,因为它压根就没打算正经做一个类似 shadcn/ui 这样相对严谨稳重一点的组件,而是现在那些高度同质化的 AI startup 网站风格。

也就是你打开一个新产品官网,经常会看到的那套 AI 味都要溢出屏幕的东西:

  • 深色背景。
  • 紫蓝渐变。
  • 玻璃拟态卡片。
  • 漂浮的光晕。
  • “AI-native” 的标题。

看起来很高级但其实早就审美疲劳了。

你甚至不用读文案,就知道这个网站想表达什么:我们很新,我们很酷,我们拥抱AI。

Performative UI 好笑的地方在于,它没有站在外面骂这种风格。它直接把这套风格做成了组件库。但仔细翻一遍,它做得还挺好。

它嘲笑的是“看起来像成功产品”的作秀

“Performative” 这个词用得很准。

这些 UI 元素当然是为了好看,但它们还承担着另一层功能:让一个产品在用户还没理解它之前,先看起来像一个现代、靠谱、懂技术、有融资潜力的产品。

这也是为什么很多独立开发者或者小团队会陷入一个尴尬局面:产品本身可能很有用,但页面太朴素,别人会觉得“不专业”;反过来,一个还没做出什么实质东西的项目,只要首页够像样,反而会先获得信任。

Performative UI 就是在调侃这种现实。

它的组件没有停留在“漂亮按钮”“现代卡片”这种无聊名字上。每个控件背后的潜台词都用一种自嘲的方式被直接写了出来。你看着那些组件说明,会有一种被戳穿的尴尬:原来我们说的“高级感”,很多时候就是一套大家都认识的表演道具。

https://leafw-blog-pic.oss-cn-hangzhou.aliyuncs.com/posts/performative-ui/GlassCardFull.png

https://leafw-blog-pic.oss-cn-hangzhou.aliyuncs.com/posts/performative-ui/GradientTextFull.png

今天很多官网的第一任务,已经从解释产品变成了制造一种熟悉的成功感。

我们为什么一眼就知道它在讽刺什么

最近几年,从AI 产品爆发开始,网站视觉语言变得非常集中。

最常见到的就是一个黑底页面,中间一个巨大的 headline,背景有一些发光线条或者噪点,下面有一排“被某某团队信任”的 logo,再往下是几张半透明卡片。哪怕你还不知道这个产品是做客服、写代码、做笔记,还是帮你生成 PPT,你已经能判断它属于哪个物种了。

这种风格已经变成了模板。

这个模板呢和此前常见的WordPress什么之类的建站工具还不一样,虽然网上也会有很多卖模板的网站,但其实大家的风格还是会存在一些差异,而且针对不同的站点性质,也会有不同的展现形式。

现在的模板已经高度同质化,哪怕是毫不相关的产品,产品宣传官网的风格也可以几乎一致。

而且不说宣传网站了,哪怕是做个B端的管理平台,如果你在某些AI生成软件的平台尝试用一句话来生成,也很有可能看到那些色彩斑斓的黑的设计。

这个框架其实还是有用的

我觉得这个项目最有意思的地方,是它没有完全否定这套风格。

因为说实话,如果你想快速做一个“看起来很酷”的网站,它真的可以用。

这听起来像是在给同质化设计辩护,但现实就是这样:用户会被视觉信号影响。投资人会被视觉信号影响。候选人会被视觉信号影响。甚至产品经理和工程师自己,也会被视觉信号影响。

一个页面如果看起来像 2012 年的后台管理系统,用户会天然降低预期。一个页面如果看起来像 2026 年的 AI 工具,哪怕功能还很简单,别人也更愿意相信它“可能有东西”。

我们在缺少信息的时候,会用外观作为代理信号。网站设计就是产品可信度的一部分。

当然,套一层酷炫 UI 不会让产品变好。它只能让别人愿意多看两眼,多点一次按钮,多给你一次解释自己的机会。

对于早期产品来说,这已经很重要了。说实话,身边其实还有一些人觉得那种大量暗紫色渐变,大块的不同颜色的文字的风格好看,虽然我个人是有点厌恶的,而这套框架设计的,说实话,比那些只会一句话生成的页面还是要好很多的。

同质化不一定是偷懒,有时候是降低理解成本

很多人讨厌同质化设计,我也讨厌。尤其是那种每个产品都在说 “the AI workspace for modern teams” 的页面,看多了会让人产生生理性疲劳。

但从产品角度看,同质化不全是坏事。

熟悉的模式可以降低理解成本。用户看到 PricingCard 就知道该比什么,看到 Waitlist 就知道还没开放,看到三列 FeatureCard 就知道你在分解卖点。

这也是为什么很多 SaaS 官网长得越来越像。很多团队当然有审美,只是这些模式已经被市场验证过了。

真正的问题是只剩模式。

如果一个产品真的有清晰价值,套用成熟的视觉语言没什么问题。怕的是产品本身没有判断,只是在堆那些“看起来像创业公司”的符号。

Performative UI 嘲笑的正是后者。

它像是在说:你看,你以为自己在设计,其实你只是在调用一组行业表情包。

AI 会让这种风格更泛滥

以前要做一个看起来很现代的网站,至少需要一个还不错的前端和设计能力。现在不一样了。

  • 你可以让 AI 生成一个 landing page。
  • 你可以直接用 Tailwind 模板。
  • 你可以复制 shadcn/ui 的组件。
  • 你可以几分钟内做出一个“很像样”的首页。

这会带来一个结果:视觉上的“专业感”会变得越来越廉价。

当每个人都能快速生成一个漂亮官网时,漂亮本身就不再稀缺。那些曾经代表能力的视觉细节,比如动画、渐变、玻璃卡片、复杂背景,现在会越来越像默认皮肤。

Performative UI 就又讽刺但又高效:既然大家都要演,那我干脆把整套表演道具打包给你。

现在当然还有类似Claude Design 或者一些很多设计frontend skill等方式可以让你设计一些更多花样的页面,但直接套框架也是一个高效的选择。

我会怎么用它

如果我要快速做一个 demo、hackathon 项目、概念验证页,或者一个本来就需要一点赛博朋克感的 AI 工具,我可能真的会考虑用 Performative UI。

原因很简单:它足够会演。

早期产品有时候需要一个能快速表达气质的壳。尤其当你的目标是让别人迅速理解“这是一个现代 AI 产品”,使用这种已经被市场训练过的视觉语言,是一种很实际的选择。

虽然我们一直在身在和AI打交道的一线可能觉得这些样式很无趣,但我们不能否认,很多不是足够了解AI设计的风格的人其实还挺认同这种样式。

但如果是长期产品、专业工具、复杂工作台,我会谨慎很多。

因为表演型 UI 很容易过量。光晕太多会廉价,动画太多会干扰,文案太空会降低信任。真正高频使用的产品,最后还是要回到清晰、稳定、可预测。

酷只能让用户进门,不能让用户留下来。

总结

Performative UI 最有价值的地方,可能还真不在那几个 React 组件上。它更像一面镜子。

它让我们看到,今天很多“现代网站”的酷感,往往来自一套可复制的视觉信号,和产品理解未必有多大关系。

这套信号有价值,也很空洞;好用,也容易被滥用。

所以我不会说“别用这种风格”。恰恰相反,如果你的目标是快速做一个看起来很酷、很当代、很 AI-native 的网站,那就大方用。只是要清楚自己在用什么。

你调用的是一种已经被市场识别的表演语言,知道这一点,反而能用得更清醒。

Performative UI 的幽默也正在这里:它一边嘲笑我们都在复制同一种未来感,一边把这种未来感做成了开箱即用的组件。这很讽刺,也很实用。