What is vibe coding?

What is vibe coding?

Picture a café owner who needs a booking page by Friday. She doesn't know React from a reading list. She types two sentences into an AI tool, watches a page appear, says “make the button bigger and add Sunday hours”, and by lunch the page is live. She never opened a code file. That is vibe coding.

More precisely, vibe coding is building software by describing it in natural language to an AI model, running what the model produces, and judging the result by how it looks and behaves rather than by reading the code. You steer with outcomes — “this is too slow”, “the form should email me” — and the AI does the typing.

The phrase is often used loosely for any coding with AI help, but the useful distinction is about review. The developer Simon Willison put it well in March 2025: if an AI wrote every line but you reviewed, tested and understood it, that is ordinary software development with an AI assistant — not vibe coding. Vibe coding is the mode where you accept the code without studying it.

Where did the term “vibe coding” come from?

The term comes from Andrej Karpathy, a founding member of OpenAI and former director of AI at Tesla. In a post on X on 2 February 2025 he described “a new kind of coding I call ‘vibe coding’, where you fully give in to the vibes, embrace exponentials, and forget that the code even exists.”

He described talking to the editor by voice, accepting every suggested change without reading the diff, and pasting error messages back to the AI with no comment, which usually fixed them. Crucially, he framed it as fine for “throwaway weekend projects” — an honest caveat that is often dropped when the phrase is repeated.

The word spread fast because it named something many people were already doing. Within months it had its own Wikipedia article, and in November 2025 Collins Dictionary chose “vibe coding” as its Word of the Year.

How does vibe coding work?

Under the hood, a large language model turns your words into source code — HTML, CSS, JavaScript, React components, database queries. A good vibe coding tool wraps that model in a loop so you never have to touch the plumbing:

1. Describe the app in plain words: who it's for, what it must do, how it should feel.
2. Generate: the AI plans the files and writes the code.
3. Run: the tool runs the code in a live preview, so you see a working app instead of a code listing.
4. React: you click around and ask for changes in the same chat — “add a dark mode”, “the total is wrong when I add two items”.
5. Repeat until it does what you need, then publish it to a web address.

The skill moves from typing syntax to describing outcomes clearly and testing honestly. People who write good bug reports tend to be good at vibe coding.

What is vibe coding good for?

Vibe coding shines when the cost of a mistake is low and speed of learning is high:

• Prototypes and demos: show an idea working in an afternoon instead of describing it in a slide.
• Landing pages and small business sites: a menu, opening hours, a contact form, a portfolio.
• Internal tools: a calculator, a tracker or a dashboard that a few colleagues use.
• Personal software: an app built for an audience of one, which no company would ever make for you.
• Learning: seeing working code for your own idea is a strong way to learn how the web works.

It also changes who gets to build. A designer, a teacher or a shop owner can now make a working first version without waiting for a developer — and arrive at that conversation with something real to show.

What are the limits and risks of vibe coding?

The defining feature of vibe coding — not reading the code — is also its main risk. Code you have never looked at can work perfectly in the demo and fail in ways you can't see:

• Security holes. AI models reproduce common mistakes: missing input validation, broken access checks, secrets placed in browser code. The OWASP Top 10 lists the classic failures, and AI-written code is not immune to any of them. In Veracode's 2025 tests of more than 100 models, AI-generated code introduced risky security flaws in 45% of cases (Veracode sells security testing tools).
• Data you can't get back. An AI that changes a database schema without asking can delete real data.
• Code that fights back. Each request patches the last one. Without structure and versions, a project can reach a point where every fix breaks something else.
• Hidden cost. Every AI turn costs money somewhere. Tools that hide the price per change make budgets hard to predict.
• Lock-in. Some platforms keep your app in a format that only runs on their service. If you can't export real code, you don't fully own the product.

When should you switch to real engineering?

Vibe coding is a starting point, not a substitute for engineering judgement. Bring in review, tests and a developer when any of these become true:

• You take payments or store personal, health or financial data.
• People sign in and should only see their own records.
• The app has to stay up for customers or meet a legal or industry standard.
• More than a handful of people depend on it, or several people need to change it.

How to vibe code responsibly

1. Keep every version, so a bad change is one click to undo.
2. Ask for one change at a time and check it before the next.
3. Never paste passwords or API keys into a page; keep secrets on the server.
4. Review database changes before they run.
5. Test on a phone, with a keyboard, and with wrong input.
6. Export the code to a repository you own, so a developer can review it later.

How does Supacode do vibe coding?

Supacode, an AI app builder by Transcend Technologies, is built for the fun part of vibe coding without the usual traps. You describe an app in the chat; Supacode writes real source code, runs it in a live preview, and saves every change as a version.

• Real code, three stacks. Projects are plain HTML, React or Next.js. Auto stack picks HTML for content sites, React for interactive browser apps and Next.js only when the app needs a server — and you can override it.
• Versions for every change. Every AI change and every saved edit becomes a version you can preview, restore whole or file by file, or undo from the chat. See versions, undo and restore.
• Code you can take with you. Any plan can download a version as a .zip; paid plans can push every version to your own GitHub repository (how GitHub and Supabase work). You can also edit files by hand in the code tab.
• Your database, your approval. Connect your own Supabase project; the AI writes migrations, and none runs until you approve it.
• One-click publishing. A published site gets its own supacode.app address and isn't listed anywhere unless you add it to the gallery.
• No surprise bills. Every paid action shows its credit cost before it runs, the free plan's credits refill daily, and the credits for a failed automatic fix are refunded. Current plans are on the pricing page.

How do you start vibe coding today?

The fastest way to understand vibe coding is to do it once. Pick something small and real — a page you would actually use — and give the AI a short brief:

A one-page site for a neighbourhood plant shop: hero with opening hours, a grid of 6 plants with prices, a map, and a contact form. Warm, calm colours; works well on phones.

1. Paste the brief into the Supacode composer (or press the Try it button on this page) and press Build.
2. Click through the preview on a desktop width and a phone width.
3. Ask for one change at a time: “move the map below the plants”, “add Sunday hours”.
4. If a change goes wrong, undo it from the chat or restore an earlier version.
5. Publish when you're happy, and share the link.

Prefer to start from something finished? Browse the templates: copying one into your own project uses 0 credits. For longer walk-throughs, read how to build an app with AI, how to build a website with AI and how to build an app without coding. Choosing a tool? See our sourced comparison of the best vibe coding platforms in 2026.