Vibe Coding a Prototype: How I Automated a workflow (And Broke My main.py)

"Vibe coding" is often sold as a magic wand: type a prompt, get a unicorn. But my recent journey to build an ad mockup automation tool taught me that while vibe coding helps you skip the "blank canvas" paralysis, it doesn't replace the need to understand your own architecture.

Here is the story of how I went from a 2-week manual workflow to a working prototype, where I got stuck, and the honest Dos and Don'ts of building software with AI.

The Problem: The "Two-Week" Mockup

Before writing a single line of code (or a single prompt), I stepped back to define the actual problem. I didn't want to build tech for tech's sake.

After talking to our sales team and analyzing customer mockups, the bottleneck was clear. It wasn't "generating images"—it was the workflow. Gathering brand assets, finding inspiration, and back-and-forth communication was taking up to two weeks per client.

My goal wasn't to build a "Make me an ad" magic button. It was to automate the drudgery so humans could focus on the creative direction.

The Trap: The "Flashy Prompt" Failure

My first attempt was what most people do: I tried to "vibe" the whole solution at once. I fed a flashy prompt into an AI image generator hoping for a perfect mockup with specific dimensions.

Result: Complete failure. AI image generation is terrible at strict layout adherence. Text was garbled, dimensions were wrong, and brand guidelines were ignored. I realized immediately: AI is a tool, not the architect.

The Pivot: Automating the Workflow, Not the Output

I shifted my mindset. Instead of asking AI to create the final image pixel-by-pixel, I used code to assemble the pieces.

The Architecture:

1. Brand Data Scraper: Scrape the client's website for logos, colors, and assets.

2. The Template Engine (The "Secret Sauce"): Our existing ad templates were UI nightmares—thousands of lines of HTML/CSS meant for humans, not scripts. I couldn't just "inject" data into them.

   • The Fix: I built a logic layer that takes that complicated HTML and "minifies" it into a clean JSON schema.

   • How it works: It extracts only the dynamic slots—image_slots (classified into bg, logo, product) and text_slots.

   • The Result: Instead of fighting a messy DOM, my code now just looks at a simple JSON file to know exactly where to put the logo and where to put the headline.

3. Preview Engine: Generate a simple HTML preview where the scraped assets are injected into those JSON slots.

4. Delivery: Download PNGs and auto-generate a PPT explaining the mockup.

AI's Role: AI became a sub-contractor, not the CEO. I used it for:

• Generating copy for the ads.

• Creating stock imagery only if brand assets were missing.

• Writing the content for the explanation slides.

The Hurdles (Where the "Vibe" Hit a Wall)

1. The Real World is Messy (Scraping) Vibe coding works great until you hit edge cases. I built a scraper, but modern websites are hostile. Popups on first visits kept blocking my image downloads. AI couldn't "guess" its way around this; I had to dig in and solve the DOM interaction manually. (Work in progress!)

2. The Spaghetti UI Our existing ad templates were UI nightmares—complex structures meant for humans, not scripts. I had to simplify. I extracted the logic into clear "slots": background, logo, product, CTA. This allowed me to map my scraper data directly to the template without breaking the layout.

The Reality Check: The 500-Line Monster

This is the part nobody tells you about vibe coding.

I started fast. "Vibe coding" helped me skip the blank canvas anxiety and jump straight into the solution. But eventually, my main.py grew to a messy 500 lines of spaghetti code.

The Breakdown:

• Context Window Issues: When I asked AI to fix a small bug, it would often "hallucinate" a fix that broke three other things because it lost the full context of the file.

• The "Rewrite" Risk: I faced a challenge where the AI started replacing my original, working code with generic placeholders because the file was too large for it to process effectively.

• The Manual Takeover: No Codex or GPT could fix the file anymore because I didn't fully understand the mess I had let it create.

To finish the prototype, I had to stop "vibing" and start "coding." I had to review the AI output line-by-line and manually integrate fixes.

The Dos and Don'ts of Vibe Coding

If you are embarking on a similar journey, here is what I learned:

✅ DO: Define your Tech Stack Upfront Before you type your first prompt, give the AI clear constraints (e.g., "Use Python, Selenium for scraping, Jinja2 for templates"). If you don't, it will hallucinate a different stack every time you ask a question.

✅ DO: Modularize Early Don't let your main.py hit 500 lines. AI struggles to refactor large files. Force it to write small, separate functions from day one.

❌ DON'T: Rely on AI for "Last Mile" Debugging When the code gets complex, AI is a junior developer at best. If you don't understand the code it wrote, you will get stuck in a loop of broken fixes.

❌ DON'T: Trust the "Replace" Button Always diff the code. AI will often rewrite your logic or remove critical instructions if you aren't watching.

Conclusion

Vibe coding didn't magically solve the problem for me, but it was an incredible accelerator. It helped me move from "problem statement" to "working logic" in record time. However, the discipline of engineering still applies. You can vibe your way to a prototype, but you have to code your way to production.