Tells of a Slop UI

浅谈“垃圾 UI”（Slop UI）

Recently my college app was updated with “minor UI improvements”, and it was the most slop-coded user interface I have seen. The old UI was clunky, but I would’ve preferred that over the slop cannon their AI agent produced. 最近，我的大学应用程序进行了所谓的“微小 UI 改进”，但这却是我见过最粗制滥造的界面。旧版 UI 虽然笨重，但我宁愿用它，也不愿面对其 AI 代理生成的这堆“垃圾代码”产物。

What Is Slop?

什么是“垃圾 UI”（Slop UI）？

Slop UI is the UI that AI cooks up that looks off, where it’s not supposed to be, doesn’t serve a purpose or when a UI is too generic. This is seen in vibe-coded UI without a vision. Vibe-coded UI can look great when done right, but most don’t. And it makes the apps look cheap and unappealing to use. Slop UI 是指由 AI 生成的、看起来不对劲、位置不当、毫无意义或过于平庸的界面。这常见于缺乏愿景的“氛围编程”（vibe-coded）UI 中。如果运用得当，氛围编程 UI 可以很出色，但大多数情况并非如此，这只会让应用看起来廉价且令人反感。

Examples of Slop-Coded Websites:

“垃圾 UI”网站示例：

Cloudflare recently slop-coded a website. And also websites like this, you just know it when you see it. It’s like the AI videos these days: anyhow. The following are the things that make up the slop. Cloudflare 最近就搞出了一个“垃圾 UI”网站。还有像这类网站，你一眼就能看出来。就像现在的 AI 视频一样：总之就是很怪。以下是构成这些“垃圾”的元素。

Gradients. Gradients Everywhere.

渐变，到处都是渐变。

The biggest and most noticeable sign is gradients. Gradients anywhere, gradients any time, gradients at every single thing. You’ll see them on buttons, in the background, basically anywhere where it could stuff it. Slop Cannons LOVE purple for some reason. 最明显、最显著的标志就是渐变。随时随地，在任何地方，在任何东西上都要用渐变。你会看到它们出现在按钮上、背景里，基本上任何能塞进去的地方都有。不知为何，这些 AI 生成器特别钟爱紫色。

Rainbow Vomit.

彩虹呕吐物。

AI loves using colours that mean nothing and are just different colours. You just get this, just a screen of a bunch of colours that don’t go well together but are coloured that way. Because there is some distinction in fields when making the UI or whatever. It doesn’t follow the 70-30-10 rule. It just adds colours all over the place. AI 喜欢使用毫无意义、仅仅是颜色不同的配色。你看到的只是一个屏幕上堆满了互不协调的颜色。这可能是因为在生成 UI 时为了区分字段。它完全不遵循 70-30-10 的配色原则，只是到处乱加颜色。

Pulsing Badges

脉冲徽章

I have no clue why it adds these, but it just does. It is in the training data, I guess. But it adds these pulsing badges on everything. In the “upgrade” my college app had, they have this thing called a digital ID, which just shows a QR code and your face. It has this pulsing badge which says it’s “active”. The problem is, IT IS JUST NEVER INACTIVE. IF IT IS INACTIVE, THE APP JUST LOGS YOU OUT. It’s just redundant information. 我不知道它为什么要加这些东西，但它就是加了。我猜这在训练数据里。它给所有东西都加上了这种脉冲徽章。在我大学应用的“升级”中，有一个所谓的数字 ID，上面显示二维码和你的照片。它有一个显示“活跃”的脉冲徽章。问题是，它根本就不会显示“不活跃”。如果真的不活跃，应用直接就把你登出了。这纯属多余的信息。

Finger Nail Cards.

指甲盖卡片。

I see these things in literally every vibecoded ui and it pisses me off every time. You see these everywhere, dude. It’s not even that it’s bad; it’s just so overused by literally every LLM in every single place that it just looks bad now. The thing is, I don’t think anyone has EVER consciously sat down and thought, “you know what would improve this? a fingernail.” 我在每一个“氛围编程”的 UI 里都能看到这些东西，每次都让我火大。伙计，这东西到处都是。倒不是说它有多糟糕，只是被每一个大模型在每一个地方过度使用，现在看起来就很廉价。关键是，我不认为有人会真的坐下来思考：“你知道什么能改进这个吗？一个指甲盖。”

Emoji Slop

表情符号滥用

AI LOVES emojis for whatever reason. It loves them more than Sam Altman loves to pretend that they are pacing the frontier. 不知为何，AI 特别喜欢用表情符号。它对表情符号的热爱，甚至超过了 Sam Altman 假装他们正在引领技术前沿的热情。

Misaligned Stuff.

对齐错乱。

If you have SVGs or ASCII art or some kind of element that isn’t in a box, it is almost always off its alignment. Like this list in the timetable of my college app. 如果你有 SVG、ASCII 艺术或任何不在盒子里的元素，它们几乎总是对齐错乱的。就像我大学应用课程表里的这个列表一样。

Font Selection

字体选择

These websites don’t usually go for more interesting font selections. It’s usually Inter, or if you have a website even remotely programming-related, you get JetBrains Mono. And this thing: It adds these // whenever anything close to tech is mentioned. 这些网站通常不会选择更有趣的字体。通常是 Inter，或者如果你的网站稍微和编程沾点边，就会用 JetBrains Mono。还有这个：每当提到与技术相关的内容时，它就会加上 // 注释符号。

Redundant Text Due To Chat Context.

因聊天上下文产生的冗余文本。

It just adds a bunch of redundant text just because of the chat context. For example, I was making my previous blogging website, and I told it, “Okay, I don’t wanna be writing any HTML; I will write in my comfy Neovim, and I don’t wanna do any web-related stuff.” It added text saying “Built with Hugo. Written from Neovim”. No, because no one gives a shit where I write it from. 它仅仅因为聊天上下文就添加了一堆冗余文本。例如，我之前在制作博客网站时告诉它：“好吧，我不想写任何 HTML；我会在我舒适的 Neovim 里写，我不想做任何与网页相关的工作。”结果它加上了一句“由 Hugo 构建，在 Neovim 中编写”。不，根本没人关心我是在哪儿写的。

Glassmorphism

毛玻璃效果（Glassmorphism）

It just loves glassmorphism. It doesn’t go for any other design language (except brutalism, and for brutalism all of them look the EXACT same). 它就是钟爱毛玻璃效果。它不会采用任何其他设计语言（除了粗野主义，而且所有的粗野主义风格看起来都一模一样）。

Generic Taglines And Unnecessary Hype

平庸的标语和不必要的炒作

It is obsessed with the words “Elevate”, “Seamless”, “Next-Generation”, “Supercharge”, “Unleash”, and “Empower”. Every H1 is followed by a greyish subtitle that says something like: “Experience the power of task management with our cutting-edge intuitive interface.” It treats every screen like a landing page rather than a functional tool. 它沉迷于使用“提升”、“无缝”、“下一代”、“超级充电”、“释放”和“赋能”这些词。每个 H1 标题后都跟着一个灰色的副标题，写着类似：“通过我们尖端直观的界面体验任务管理的强大功能。”它把每个屏幕都当作落地页，而不是一个实用的工具。

Conclusion

总结

Honestly, this was just a bunch of things that annoy me when I look at slop. And it’s not even that I am against vibecoding. This website is vibe coded; it looks cute tho. It’s just that these people don’t put ANY effort into making it even look mildly good. 老实说，这只是一堆我在看这些“垃圾 UI”时感到恼火的事情。我并不是反对“氛围编程”。这个网站也是氛围编程的产物，但它看起来很可爱。问题在于，这些人根本没有花任何心思让它看起来哪怕稍微好一点。