Vibe coding for designers: a practical guide

In February 2025, Andrej Karpathy gave a name to something a lot of people had started doing: vibe coding. You describe what you want, the AI writes the code, and you judge the result by running it rather than reading it. If it looks right and works, you keep going.

For designers, that changed what's possible. You can build the real product instead of a picture of it, without waiting for an engineer or learning a framework first. But the typing was never the hard part. Steering is, and steering is design work. This guide covers what vibe coding is, where it goes wrong, and the habits that keep what you build looking like yours.

What is vibe coding?

Vibe coding is building software by describing it to an AI in plain language and reacting to what comes back. You don't write the code, and you often don't read it. You run the app, look at it, and say what to change.

It's different from no-code tools like Webflow or Framer. Those give you a visual editor and a fixed set of building blocks. Vibe coding produces real code, so there are no fixed blocks: anything code can do, you can ask for. The trade-off is that nothing stops you from asking for a mess.

Why designers have an edge

Most of vibe coding is judgement. The AI can produce a page in a minute. Deciding whether it's good takes longer, and designers already do that all day.

• You can see what's wrong. Spacing that's slightly off, a heading that fights the image, a green that's a little cold. Most people only sense that something is off. You can name it.
• You can write a brief. A good prompt reads like a design brief: what the page is for, what goes on it, what to avoid.
• You have taste. The AI's default is the average of everything it has seen. Your taste is what pulls the result away from that average.

Where vibe coding goes wrong

The same three problems come up for almost everyone.

It looks like everything else. Ask for a landing page with no direction and you get the purple gradient, the centred hero and three feature cards. I wrote about why AI-generated UI all looks the same and how to fix it.

Fixing one thing breaks another. You ask for a smaller heading and the card grid below it changes too. The AI doesn't know which parts you were happy with unless you tell it.

You lose track of what changed. Forty prompts later, the page is different, and you can't say how it got there or get back to the version you liked.

None of these are about code. They're about direction, scope and memory, and each one has a simple habit that fixes it.

Choosing a tool

Vibe coding tools fall into two groups.

Chat-based builders like Lovable, v0 and Bolt run in the browser. You describe an app in a chat, it appears in a preview beside it, and hosting is handled for you. They're the fastest way from an idea to something you can click, and a good place to start.

Coding agents like Claude Code, Cursor and Codex work inside a project on your own computer. There's more to set up: a folder, a terminal or an editor, a local preview. In return you own the code, you can use any framework, and the project can grow as far as you need it to.

I started in a chat-based builder and moved to Claude Code once I wanted control over the details. The habits below work with either.

Five habits that keep it yours

1. Collect references before you prompt

Spend half an hour collecting before you write anything. Save the specific details you want rather than whole pages: the proportions of a hero, a button, a type pairing. Write down what you like about each one. Here's how to build a moodboard for AI-generated UI.

2. Write your rules down once

Coding agents read a rules file at the start of every session. Claude Code reads CLAUDE.md, and Cursor and Codex read their own, such as AGENTS.md. Put your fonts, type scale, spacing steps, colours and anything you never want in it. Every time you correct the same thing twice, add a line.

3. Work in small steps and save often

One change per prompt, then look. When you like the result, commit it with git, and ask the AI to do it for you if you've never used git. That's your undo history. If the next change goes wrong, you go back to the last good version instead of prompting your way out.

4. Point at things instead of describing them

"Make the button softer" can mean ten things. "This button: lighter weight, more space above it, a warmer green like this reference" means one. Name the exact element, say what feels off, show a reference, and say what to leave alone. There's more on this in how to give Claude Code visual feedback.

5. Review in passes

Check structure first: are the right sections there, in the right order? Then type, then spacing, then colour and detail. Polishing a section that's about to move is wasted work. My designer's workflow for building with Claude Code goes through this step by step.

Where Moodbit fits

Moodbit is the Chrome extension I built for habits 1 and 4.

• Explore mode saves the part of a page that caught your eye, with your note on it, into projects you can search later.
• Build mode lets you open your app on localhost, click the exact element you want to change, write what feels off, draw what you mean, and attach a saved reference.
• Send hands your notes to your AI tool with the screenshots, the element you clicked and the references. It works with Claude Code, Cursor, Codex and any other tool that supports MCP.

Your notes stay on your computer.

Common questions

Is vibe coding real coding?

It produces real code, the same kind an engineer would write. What changes is how you work: you describe and review instead of typing. For anything with real users, it's worth having someone who reads code look it over before launch.

Do designers need to learn to code to vibe code?

No. It helps to know a few words, like "component", so you can name what you mean, and to know how to run the project and commit with git. The AI can explain anything else as you go.

What's the best vibe coding tool for designers?

Start with a chat-based builder like Lovable or v0 if you want something clickable today. Move to a coding agent like Claude Code or Cursor when you want full control over the details and the code.

Can you ship a vibe-coded product?

Yes. Plenty of sites and apps are built this way, including this one. Before launch, check it on phones, and have someone who reads code look over anything involving logins, payments or personal data.

How is vibe coding different from no-code?

No-code tools give you a visual editor and a fixed set of building blocks. Vibe coding gives you real code written to your description, so there are no fixed blocks, and you're responsible for the result in a way you aren't with a template.