VibeBurst：我开发了一个 Chrome 扩展，让 AI 重新设计任何网站的氛围

Source: Dev.to

社区

你有没有那种在 GitHub 上盯着屏幕看了 6 小时，感觉一切都…一样的感觉？每个站点、相同的氛围、相同的乏味 UI。运气好的话还能切到暗色模式。也许有人为某个特定站点做了主题扩展。酷。

但如果你可以把整套美学直接套到任何站点上会怎样？比如凌晨 2 点的赛博朋克 GitHub，为什么不呢。文档上加点玻璃拟态。粗犷的 Hacker News ——说实话它本来就差不多是那种风格。

是的，这就是我做的。

我做了什么

VibeBurst 是一个 Chrome 扩展。点击它，选择一个主题，AI 会用自定义 CSS 重新渲染整页。不是那种会把所有东西都弄坏的通用样式表——它会读取页面内容并生成针对该站点合理的 CSS。

四种主题

• ⚡ 赛博朋克 — 深色背景，霓虹青色和品红光晕，等宽字体
• 🔮 玻璃拟态 — 毛玻璃美学，柔和的紫色和青绿色，轻盈通透
• 🧱 粗犷 — 最大对比度，纯黑白，醒目的红色点缀，零装饰
• 🌅 复古波 — 温暖的 80 年代日落渐变，霓虹粉和天空蓝，合成波怀旧感

点击 Regenerate 可获得全新效果。点击 Reset 可恢复正常。就这么简单。

演示

下面是一个简易演示以及在不同网站上使用时的截图。

代码

GitHub 仓库：

我是怎么实现的

技术栈： Plasmo + TypeScript + React 用于扩展，Groq API 搭配 llama-3.3-70b-versatile 生成 CSS。没有花里胡哨的东西。

AI 部分其实是最容易的。难点？让 CSS 不把页面弄垮。

早期版本一团糟。* 选择器把所有东西都毁了。触碰宽度/高度就把布局弄得不见踪影。对比度太差导致文字不可读。经过大量试错后，我写了一个 sanitizeCSS 函数，在注入前剔除所有可能破坏布局的代码。

大多数站点几乎不使用语义化 HTML；它们充斥着带有不透明类名的 “。在 Google 之类的站点上针对 header 或 nav 基本没有效果。所以我必须扫描站点实际的样式表，找出每个设置了 background-color 的类，并且捕获那些由 JS 注入的样式。

突破口在于：不要让 AI 为类选择器挑颜色。让它只为语义元素（body、h1、button 等）设样式，然后在代码里把生成的 body 背景颜色程序化地应用到所有站点特有的类上。这样一来，页面终于不再显得拼凑。

没有触碰任何 JavaScript。页面的功能保持不变，只有外观被改变。

这是一个周末项目，让我深刻体会到 CSS 特异性之痛，也让我认识到为整个网络做主题化比想象中要困难得多。😅

总体来说是一次很棒的学习经历。感谢 Dev Team 组织这次短短的周末挑战！👩‍💻