# 分享一个有意思的框架：Performative UI 今天在 Hacker News 上看到一个很好玩的项目：[Performative UI](https://vorpus.github.io/performativeUI/#/)。 它的自我介绍就简单一句话：一个 “AI-native React Components” 组件库。但你点进去看几秒钟就会发现，每个组件都是那么的熟悉，因为它压根就没打算正经做一个类似 shadcn/ui 这样相对严谨稳重一点的组件，而是现在那些高度同质化的 AI startup 网站风格。 也就是你打开一个新产品官网，经常会看到的那套 AI 味都要溢出屏幕的东西： - 深色背景。 - 紫蓝渐变。 - 玻璃拟态卡片。 - 漂浮的光晕。 - “AI-native” 的标题。 看起来很高级但其实早就审美疲劳了。 你甚至不用读文案，就知道这个网站想表达什么：我们很新，我们很酷，我们拥抱AI。 Performative UI 好笑的地方在于，它没有站在外面骂这种风格。它直接把这套风格做成了组件库。但仔细翻一遍，它做得还挺好。 ## 它嘲笑的是“看起来像成功产品”的作秀 “Performative” 这个词用得很准。 这些 UI 元素当然是为了好看，但它们还承担着另一层功能：让一个产品在用户还没理解它之前，先看起来像一个现代、靠谱、懂技术、有融资潜力的产品。 这也是为什么很多独立开发者或者小团队会陷入一个尴尬局面：产品本身可能很有用，但页面太朴素，别人会觉得“不专业”；反过来，一个还没做出什么实质东西的项目，只要首页够像样，反而会先获得信任。 Performative UI 就是在调侃这种现实。 它的组件没有停留在“漂亮按钮”“现代卡片”这种无聊名字上。每个控件背后的潜台词都用一种自嘲的方式被直接写了出来。你看着那些组件说明，会有一种被戳穿的尴尬：原来我们说的“高级感”，很多时候就是一套大家都认识的表演道具。 ![GlassCardFull](https://leafw-blog-pic.oss-cn-hangzhou.aliyuncs.com/posts/performative-ui/GlassCardFull.png) ![GradientTextFull](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 的幽默也正在这里：它一边嘲笑我们都在复制同一种未来感，一边把这种未来感做成了开箱即用的组件。这很讽刺，也很实用。