How to win a vibathon

I won 2nd place at a vibathon by not designing by vibe

Most projects at a vibathon get built the same way: open a prompt, describe a screen, let the AI generate it, repeat. It's fast, and it's genuinely impressive what comes out. But it also means the AI is making a lot of the decisions that should belong to a human — spacing, hierarchy, color, the small details that make an interface feel considered rather than assembled.

I wanted to test a different approach. So when I showed up to the Vibathon at Vibe Code Fest 2026 with OffLoad — a platform for working parents — I started with Figma.

What I actually did differently

Before writing a single line of code, I had already built out a visual library for OffLoad: a color system, type scale, component patterns, the tone of the illustrations, the overall rhythm of the page. None of that came from an AI suggestion. It came from sitting with the problem — working parents juggling careers and caregiving — and asking what this product should *feel* like before asking what it should look like.

By the time I started building, the design decisions were already made. I wasn't negotiating taste with an AI in real time — picking from three generated header options, regenerating a section because the spacing felt off, hoping the model would land on something coherent. I was implementing a point of view that already existed. The AI's job shifted from "decide and generate" to "execute precisely what I already decided." That's a much easier job for it, and it shows in the output.

Why a design-first process wins

This isn't a knock on AI tools — they're what made it possible to build OffLoad's full product in a vibathon timeframe at all. The point is *where* you put the human decision-making.

AI image and code generation is, by nature, interpolating from an average. Left to its own instincts, it tends to converge on safe, familiar patterns — the same gradients, the same card layouts, the same default spacing. That's not a flaw in the tool, it's just what generation without a steering point of view produces.

A visual library changes the input. Instead of asking the AI "build me a hero section," you're asking it "build me *this* hero section, using *these* colors, *this* type scale, *this* spacing logic." The AI still does the heavy lifting of generating code — but it's executing a vision instead of inventing one. The result reads as authored, because it is.

I noticed this pattern beyond my own project, too. Among the entries that stood out — including other winners — the ones with a visible human design touch read as more alive than the polished-but-generic ones. Not because they were more technically impressive, but because someone had clearly made a choice, rather than letting the model default.

What this means if you're building with AI

A few takeaways, if you're heading into a hackathon, a vibathon, or just building a product fast with AI tools:

Build your design system before you open a prompt. Even a rough one — a handful of colors, a type scale, a few component patterns — gives the AI something to execute instead of something to invent. Ten minutes in Figma can save you from twenty rounds of regenerating a section that doesn't feel right.

Use AI to execute decisions, not make them. The fastest path to a generic-looking product is asking an AI to decide your visual direction for you. The fastest path to something with a point of view is deciding first, then asking it to build.

A visual library isn't slower — it's what lets you move fast later. It feels like it costs you time upfront. It doesn't. It's the difference between iterating on execution and iterating on taste, and execution iterates much faster.

The takeaway

Everyone at a vibathon has access to the same AI. What differentiates the work isn't who prompts best — it's who brings a point of view for the AI to build toward. Bring the design intent. Let the AI catch up to it.