VibeBurst: I Built a Chrome Extension That Lets AI Redesign Any Website's Vibe

Source: Dev.to

The Community

You know that feeling when you’ve been staring at GitHub for 6 hours straight and everything just looks… the same? Every site, same vibe, same boring UI. Dark mode if you’re lucky. Maybe someone made a theme extension for that one specific site. Cool.

But what if you could just throw a whole aesthetic onto any site? Like, cyberpunk GitHub at 2 am because why not. Glassmorphism on your docs. Brutalist Hacker News — which honestly already looks like that anyway.

Yeah, that’s what I built.

What I Built

VibeBurst is a Chrome extension. You click it, pick a theme, and AI restyles the entire page with custom CSS. Not some generic stylesheet that breaks everything — it actually reads the page and generates CSS that makes sense for that specific site.

The four themes

• ⚡ Cyberpunk — dark backgrounds, neon cyan and magenta glows, monospace fonts
• 🔮 Glassmorphism — frosted‑glass aesthetic, soft purple and teal, airy and light
• 🧱 Brutalist — maximum contrast, pure black and white, bold red accents, zero ornamentation
• 🌅 Retro Wave — warm 80s sunset gradients, neon pink and sky blue, synthwave nostalgia

Hit Regenerate to get a fresh take. Hit Reset to go back to normal. That’s it.

Demo

Here’s a simple demo and screenshots of how this works on different websites.

Code

GitHub repository:

How I Built It

Stack: Plasmo + TypeScript + React for the extension, Groq API with llama-3.3-70b-versatile for generating CSS. Nothing fancy.

The AI part was honestly the easy bit. The hard part? Making the CSS not destroy the page.

Early versions were a mess. The * selector wrecked everything. Touch width/height and the layout was gone. Bad contrast made text unreadable. After a lot of trial and error I built a sanitizeCSS function to strip out anything that could break layouts before injecting.

Most sites barely use semantic HTML; they’re full of “s with opaque class names. Targeting header or nav does almost nothing on sites like Google. So I had to scan the site’s actual stylesheets, find every class that sets a background-color, and catch the JS‑injected ones too.

The breakthrough: don’t let the AI pick colors for class selectors. Let it style semantic elements (body, h1, button, etc.), then programmatically apply the generated body background color to all site‑specific classes. That’s when things finally stopped looking patchy.

No JavaScript is touched. The page works the same; only the look changes.

A weekend project that taught me CSS specificity is painful and theming the web is harder than it should be. 😅

Overall a great learning experience. Thanks, Dev Team, for organising this short weekend challenge! 👩‍💻