Disclaimer - the tool is under active development and there might be some QA issues and UI … i really need to spend some more time with it.
Over the past few days, I’ve been experimenting with stable and reliable agentic development workflow.
To properly test both approaches, I decided to build something real — not a demo, not another AI wrapper — but a practical tool developers might actually use.
That project became <a href="http://Brokit.io" target="_blank" rel="noopener nofollow">Brokit.io</a> — a browser-based developer toolkit.
<h2>What Went Wrong with Vibe Coding (Inside <a href="http://Brokit.io" target="_blank" rel="noopener nofollow">Brokit.io</a>)</h2>
When I first started building <a href="http://Brokit.io" target="_blank" rel="noopener nofollow">Brokit.io</a>, I went full vibe coding.
Prompt. Generate. Copy. Paste. Ship.
The first tool inside <a href="http://Brokit.io" target="_blank" rel="noopener nofollow">Brokit.io</a> was built in under 10 minutes. It worked. It felt magical.
Encouraged by that, I built three more tools for <a href="http://Brokit.io" target="_blank" rel="noopener nofollow">Brokit.io</a> within the next hour.
That’s when things started falling apart.
The codebase for <a href="http://Brokit.io" target="_blank" rel="noopener nofollow">Brokit.io</a> began turning into spaghetti.
Logic lived in unexpected places.
Files were loosely structured.
Data flow wasn’t clearly defined.
Some parts of <a href="http://Brokit.io" target="_blank" rel="noopener nofollow">Brokit.io</a> worked, but I couldn’t confidently explain why. If something broke, I wasn’t sure which part of the system was responsible.
<a href="http://Brokit.io" target="_blank" rel="noopener nofollow">Brokit.io</a> was growing, but it felt unstable. I had speed, but no clarity. It felt like there was invisible “magic code” inside <a href="http://Brokit.io" target="_blank" rel="noopener nofollow">Brokit.io</a> that might explode someday — and I wouldn’t know how to fix it.
That’s when I realized vibe coding is great for momentum, but dangerous for anything meant to scale.
<img src="https://media.daily.dev/image/upload/s--ZqZWN0yc--/f_auto/v1771049182/ugc/content_2f131e8d-599d-4b12-a158-704f8c1600bb?_a=BAMAMiiu0" alt="brokit screenshot.png">
<h2>Resetting <a href="http://Brokit.io" target="_blank" rel="noopener nofollow">Brokit.io</a> with Agentic AI Engineering</h2>
I wiped things back and rebuilt <a href="http://Brokit.io" target="_blank" rel="noopener nofollow">Brokit.io</a> using a structured agentic AI engineering approach.
Instead of prompting randomly, I treated <a href="http://Brokit.io" target="_blank" rel="noopener nofollow">Brokit.io</a> like a real software system.
Before writing code, I created the blueprint.
I defined:
<ul>
<li><code>plans.md</code> — high-level system planning for <a href="http://Brokit.io" target="_blank" rel="noopener nofollow">Brokit.io</a></li>
<li><code>instructions.md</code> — coding standards and architectural rules for <a href="http://Brokit.io" target="_blank" rel="noopener nofollow">Brokit.io</a></li>
<li><code>agents.md</code> — clear roles for each agent (UI, backend, validation, styling, refactor)</li>
<li>Execution flow documentation — how requests move through <a href="http://Brokit.io" target="_blank" rel="noopener nofollow">Brokit.io</a></li>
<li>A closed-loop monitoring mindset — every change reviewed and validated</li>
</ul>
This was not about generating code faster. It was about generating code intentionally.
It took about an hour just to structure <a href="http://Brokit.io" target="_blank" rel="noopener nofollow">Brokit.io</a> properly. Another hour went into refining the first tool with controlled architecture, clear file boundaries, defined execution flow, consistent styling, and predictable state management.
That initial investment slowed me down.
But then something interesting happened.
The next five tools inside <a href="http://Brokit.io" target="_blank" rel="noopener nofollow">Brokit.io</a> took about 3–4 minutes total.
Not because of randomness.
Because of parallel agents operating inside a structured system.
One agent handled UI scaffolding.
Another ensured consistency with <code>instructions.md</code>.
Another verified execution flow.
Another refactored for clarity.
<a href="http://Brokit.io" target="_blank" rel="noopener nofollow">Brokit.io</a> stopped feeling like a pile of generated code and started feeling like an engineered system.
Now, when I look at <a href="http://Brokit.io" target="_blank" rel="noopener nofollow">Brokit.io</a>:
I know exactly where each tool lives.
I know how data flows through the system.
I know what executes locally and what executes on the server.
I know how to extend it safely.
There is no hidden magic. No mysterious side effects.
<a href="http://Brokit.io" target="_blank" rel="noopener nofollow">Brokit.io</a> feels stable.
<h2>What Agentic AI Engineering Actually Feels Like</h2>
For me, agentic AI engineering is less about automation and more about orchestration.
It’s almost like building the architectural blueprint first — defining rooms, corridors, plumbing, and electrical layout — and then letting AI construct the building under supervision.
The AI writes the code.
The AI does basic QA.
The AI follows defined contracts.
But the human defines the system.
It’s not vibe-based. It’s system-based.
And inside <a href="http://Brokit.io" target="_blank" rel="noopener nofollow">Brokit.io</a>, that difference is very visible.
<h2>The Latest Tool Built This Way</h2>
The most recent tool I shipped under this structured setup is the Cron Expression Builder:
<a href="https://www.brokit.io/tools/cron-builder" target="_blank" rel="noopener nofollow">https://www.brokit.io/tools/cron-builder</a>
It’s small. But it represents a shift in how <a href="http://Brokit.io" target="_blank" rel="noopener nofollow">Brokit.io</a> is being built.
<h2>What I’m Trying to Validate</h2>
Is vibe coding enough for small tools?
Is agentic engineering overkill?
Or is structure the only way AI-assisted development actually scales?
<a href="https://www.brokit.io/" target="_blank" rel="noopener nofollow">Brokit.io</a> is becoming my testbed for that question.
If you’ve been building with AI recently, I’m genuinely curious:
Are you vibe coding?
Have you hit the invisible spaghetti wall?
Have you tried building a blueprint first?
Would love honest thoughts.
PS. I built the whole thing in 9 hours total spread across 5 days. Actual tool development and functional requirements were done under 5 hours. rest were ui styling and non functional stuff.
PS2: Let me know if you need to know the bare minimum setup using cursor or claude cli

Squad for devs building apps with GenAI and LLMs! Connect, share, exchange ideas, and get feedback. 

Build With GenAI

A developer shares their experience building Brokit.io, a browser-based developer toolkit, comparing two AI-assisted development approaches. "Vibe coding" (prompt-generate-paste) enabled rapid initial development but created unmaintainable spaghetti code. Switching to "agentic AI engineering" with structured blueprints, defined roles, and architectural documentation slowed initial progress but enabled predictable scaling. The structured approach uses multiple specialized agents (UI, backend, validation) operating within defined contracts, transforming AI from a code generator into an orchestrated system builder. The author questions whether structure is necessary for AI-assisted development to scale beyond small prototypes.

Vibe Coding Broke Brokit.io. Agentic AI Engineering Rebuilt It.