← Musings

· 3 min read · by

How to Make Vibe-Coded Websites Not Look Vibe Coded

the AI website design workflow i landed on after way too many iterations

okay so i’ve been experimenting a lot with Claude Code for design, and somewhere along the way i finally landed on a workflow that actually works for me.

not “Claude generated something decent in 30 seconds.”
i mean something i’d genuinely be happy putting my name on.

i’m a designer with 5+ years of experience, and lately i keep seeing the same thing everywhere: people are building genuinely good products, then wrapping them in painfully generic vibe-coded websites.

so i’m writing this slightly out of frustration.

you have absurdly powerful tools.
please make nice things with them.

1. stop asking AI to “make it look good”

Claude does not magically have your taste.

if you say:

make this modern, minimal and premium

you’ve basically told it nothing.

before i design anything, i collect around 10–15 references.

not necessarily full websites. maybe i like the typography from one, the colors from another, a tiny interaction somewhere else.

the goal isn’t to ask AI to invent your taste.

show it your taste.

2. explain why you saved each reference

screenshots alone are surprisingly ambiguous.

maybe i saved something because i liked the colors, but Claude thinks i liked the image there.

so annotate everything.

circle things. crop things. draw arrows. write notes like:

a screenshot says “look at this.”
an annotation says “look at THIS.”

3. this is why i built Moodbit

my old workflow was basically 50+ browser tabs, screenshots everywhere and me trying to explain to Claude which tiny detail i liked from which image.

that eventually became Moodbit.

i can save references while browsing, crop and annotate the exact parts i care about, then point at an element in my own app and send that visual context to Claude.

instead of:

make this cleaner

you can communicate:

make this section behave more like this reference, keep our typography, and use this spacing.

visual context beats adjective soup.

4. define the visual world first

i don’t ask Claude to immediately build the entire homepage anymore.

first i decide the basics:
typography, colors.... basic design system, nothing too fancy.

The visual world for moodbit.app: Geist Light for headlines, Instrument Serif for one word, Roboto Mono for labels, and five colours, cream, forest, lime, coral and olive

you don’t need a huge design system.
just enough rules that Claude doesn’t invent a new personality every section.

5. explore multiple directions

once the visual language is clear, i usually generate 4–5 genuinely different layouts.

not the same hero moved slightly to the left.
actually different.

AI makes exploration cheap.
use that.

maybe mockup #2 has the best hero and #4 has the best navigation.

take the good bits.
kill the rest.

6. curate instead of constantly regenerating

if something is 80% good, don’t ask Claude to redesign the entire section.

tell it what the remaining 20% is.

  • the heading is too large.
  • the spacing feels cramped.
  • the cards are too symmetrical.
  • the CTA feels disconnected.

the more specific your feedback gets, the better the output gets.

7. don’t stop at 70%

this is where most vibe-coded websites fall apart.

they look almost good.

but the difference between “AI-generated” and “actually polished” is usually hundreds of tiny decisions. tweak until you’re satisfied.

8. fix the copy too

bad AI websites don’t just look AI-generated.
they sound AI-generated.

  • revolutionize your workflow
  • unlock the power of AI seamlessly
  • supercharge your productivity

please stop.

cut the filler.
make the headline say something.
delete sections that don’t need to exist.

good visual design can’t fully rescue meaningless copy.

9. motion comes last

do not use animation to resuscitate a bad layout.

get the static page working first.
then add hover states, transitions, reveals and microinteractions.

and use references here too.

“add a cool animation” is vague.
“make this behave like this” is useful.

10. iterate more than feels reasonable

sometimes i go through multiple iterations across layouts, components and tiny experiments.

and honestly, AI should make us explore more, not less.

execution got cheaper.
so try the weird version.

delete half the page.
break the grid.
make one thing enormous.
see what survives.

people ask whether AI can make good websites.

i think that’s the wrong question.

AI mirrors you.

give it vague prompts and accept the first output, and you’ll probably get generic AI design.

give it references, constraints, judgement and lots of iteration, and the output changes completely.

the model didn’t suddenly develop taste.
you gave it yours.

the pixels are becoming easier to generate.
the interesting part is deciding:

which pixels deserve to stay?