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

Sangio — Wed, 25 Mar 2026 14:01:07 +0000

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.

Are CMSes becoming pointless now that AI can just code websites? I built one anyway — here's my reasoning.

Sangio — Thu, 19 Mar 2026 12:37:20 +0000

I've been seeing the "just let AI code it" sentiment a lot lately, and honestly, it crossed my mind too. AI is getting scary good at generating full pages. So why would anyone use a CMS?

Here's where I landed after thinking about it for months (and building something to test the idea):

The problem with "just let AI code it": You get a page, sure. But then you want to change the font, restructure a section, translate it, deploy it somewhere else. You're back to prompting, re-generating, copy-pasting, merging. Every change is a full round-trip through the AI. It's like having a brilliant architect who redraws the entire blueprint every time you want to move a door.

Now, I'll be honest: this problem is shrinking fast. When I started building in November, agentic AI was clunky — you'd lose context, get inconsistent outputs, waste tokens on back-and-forth. Today, with models like Claude Opus, the "just let it code everything" approach is genuinely viable for more and more cases. The architect is getting better at remembering the blueprint.

So why still bother with structure? Because even the best architect is faster when you hand them a clear brief instead of saying "make something nice." Structured workflows use fewer tokens, produce more predictable results, and give you a system that works after the AI is done — a visual editor, consistent builds, export/import. The question isn't "can AI do it without structure?" anymore. It's "is the structured approach still worth the trade-off in control and efficiency?"

That's what I've been building since November. I started by splitting the project into commands (web creation, build & deploy, user and project management). Then I added "workflows" — batches of commands that accomplish predetermined constructions. Then I used that concept to create specialized workflows that explain to the AI how commands work and what format to respond in, so the AI returns a sequence of commands itself. It makes the AI very focused — one narrow direction, no freestyling. And since the AI builds in a structure the project defines, a visual editor can offer easy manual changes afterward.

Some honest notes: I've been coding since I was 15 (I'm 33 now), but coding with AI in an agentic way — that's new. I started using GitHub Copilot in November 2025 and it changed how I work. Before that, sure, copy-pasting from ChatGPT like everyone else. But the agentic workflow is a different beast. I tested GPT, Gemini, and Claude. Landed on Claude — Opus specifically blew me away for structured output. Which loops back to my opening question: if AI keeps getting this good, does a structured approach still make sense, or will raw generation just outpace it?

I'm not here to drop a link (happy to share if anyone's curious). I'm genuinely wondering: does this reasoning hold up? Is "structured AI direction" worth pursuing, or is raw AI code generation going to make it irrelevant?

Transparency note: I wrote the ideas, AI helped me structure and write this post. I'm better at building things than writing Reddit posts — figured I'd use AI for what it's good at.

DEV Community: Sangio

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