Oops, I Vibecoded Again. Please Help Me! — A CSS Refiner

Oops, I vibecoded again Let me tell you how I ended up here. I was working on a big project — the kind where you stay focused on the parts that matter to you (the architecture, the structure, the logic) and you let the AI handle the rest. At some point I needed an admin panel. I had a rough idea in

Oops, I vibecoded again

Let me tell you how I ended up here.

I was working on a big project — the kind where you stay focused on the parts that matter to you (the architecture, the structure, the logic) and you let the AI handle the rest. At some point I needed an admin panel. I had a rough idea in my head, but I figured: let the AI draft it.

And honestly? The visual was better than what I would have done. The layout ideas were solid, extensible even. So I kept going. I let the AI drive that entire side of the architecture.

It worked great — until it didn't.

When the AI Hits the Wall

After a while, the AI started struggling to add even small features. Things that should have been trivial became painful. So I did what I should have done earlier: I actually looked at the code.

It was a mess.

I stepped in and started refactoring. Split the monolithic code into proper files. Did an architecture review. In each file, I reorganized: variables at the top, methods below, sorted logically instead of "wherever the AI decided to append them." It took work, but the codebase became manageable again.

And then I looked at the CSS.

15,000+ Lines of CSS Chaos

The stylesheet had grown to over 15,000 lines. The same color written three different ways. Duplicate blocks everywhere. Empty rules. Media queries for the same breakpoint scattered across the file. It was exactly the kind of mess you'd expect when an AI generates CSS without a style guide.

That's when the idea hit me: what if I could vibecode a tool to fix this?

I know CSS, JavaScript, and PHP well enough — I could have built it by hand. But the whole point of working with AI is speed. I focus on the high-level decisions; it handles the implementation. This project was the perfect experiment: give the AI clear guidelines and a focused scope, and see if it could ship something useful, fast.

CSS Refiner Was Born

The result: a browser-based CSS analyzer with 7 specialized tools.

Analyzer	What it catches
Empty Rules	Selectors with no declarations
Color Normalize	Inconsistent color formats → unified output
Duplicates	Identical declaration blocks across selectors
Media Queries	Duplicate `@media` blocks → merged
Fuzzy Values	`14px` vs `15px` — close enough to question
Near-Duplicates	Selectors sharing 80%+ of their declarations
Design Tokens	Repeated values that should be CSS custom properties

Auto-Refine chains the safe analyzers in a loop until nothing changes. One click, done.

Every change shows a visual diff — you see exactly what's being modified before applying anything.

The Experiment Worked (Mostly)

With clear guidelines — proper file separation, a defined architecture, specific module responsibilities — the AI delivered fast and clean. The key lesson from the previous project applied directly: the AI is great at implementation, but you have to own the structure.

When I let it freestyle the architecture, it produced a mess. When I gave it boundaries, it was genuinely efficient.

I documented the full development process in DEVELOPMENT.md — the 7 rounds of iteration, what the AI nailed, what it broke, and what I had to step in and fix.

The Stack

Vanilla JavaScript — ES5 IIFEs, no framework, no transpiler
PHP — only for i18n bootstrapping (loads translation JSON)
CSS — custom properties for theming
Dependencies: zero

No npm. No build step. It loads fast because there's nothing to load.

Try It

Live demo — paste your CSS, click Analyze. No login, no install.

Want to self-host it? It's just PHP 7.4+ with zero dependencies — installation instructions on GitHub.

What's Next?

It does what I needed it to do. But if you try it and think "this should also do X" — open an issue. Or a PR. Or just star it so I know someone out there also has messy CSS.

Links:

The AI writes the code; I make the decisions. Sometimes that works out great.