You can spot a vibecoded website instantly.
purple gradient
rounded cards, everywhere
three feature columns, three icons, three stats cards
Even if it doesn’t look that obvious, you know when you see it.
And if you can tell, so can the person deciding whether to pay you.
The agent is building blind.
No reference for what “good” looks like
No memory of the page it built 10 minutes ago
No way to see what it just made
No reason to care anyway
So it gives you the average of everything it's ever seen.
Resulting in… slop.
Three things fixed that for me.
1. Show it something first.
Agents copy.
Agents copy.
Agents copy.
So give them something worth copying.
I keep 3-5 screenshots of sites I like in the repo I’m building in, and I write them into the prompt: this density, this type scale, no gradients, no purple.
Free: pull them from Land-book or recent.design. It only takes two minutes.
(p.s. not sponsored or affiliated, and never will be)
Another good site for inspiration: refero.design
2. Give it one file to obey.
Page four has no idea what page one looked like.
A DESIGN.md in the repo root fixes that.
Include your colours, spacing, typography…
The agent then reads it before touching any UI.
Free: awesome-design-md has ready-made ones pulled from Stripe, Linear, Notion etc.
And if you already have a site, you can point your agent at it to create a DESIGN.md brandkit with the following prompt:
Crawl this repo and write a DESIGN.md for the repo root. Capture the exact colour values, type scale, spacing rhythm, border radii, shadow style and component patterns actually in use. Note the tone of voice from the copy too. Where the site is inconsistent, pick the dominant version and say what you rejected. Write it as instructions for an agent building new pages, not as a description.
Then add one line to whichever file your tool already reads, telling it to read DESIGN.md before any UI work. AGENTS.md for Codex and Cursor, CLAUDE.md for Claude Code.
This will keep your agents consistently on-brand going forward.
3. Let it see its own work.
This was the biggest unlock for me by far.
My agents design in Paper now.
It’s like Figma, but for agents.
I can watch and correct while it works, at the same time as drafting email designs and mockups all on a single board.
(I designed all of canivibecodeit.com this way)
Free: If you’re still designing directly in code, Playwright MCP will give your agents the ability to screenshot their own output and fix what actually rendered..
That's it.
reference in
consistency locked
eyes on the output
I posted this stack last week and 4,169 people bookmarked it.
More than anything I've ever posted.
Question for you: what do you want me to cover next? More build stuff like this, marketing and distribution, or the behind-the-scenes numbers? Reply and tell me, I'm genuinely writing this around what you want to read.
See you next Tuesday.
You've got this.
- Rob
