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.
Top comments (0)