Guide · March 3, 2026 · 7 min read
Vibe coding: how to build by describing what you want
Where the term vibe coding comes from, how the loop of describing, reviewing and refining works, which tools fit which job and the mistakes to avoid.
Updated October 14, 2026
On 2 February 2025, AI researcher Andrej Karpathy posted on X about “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.” The name stuck because it put a word to a new way of working: building software by describing it to an AI instead of writing it line by line.
This guide explains what vibe coding is, how the loop of describing, reviewing and refining works, which tools fit which job and which mistakes cost the most time. frascati, our product, is one of those tools; we say where it fits and where it does not.
What is vibe coding?
Vibe coding means building software by describing what you want in plain language. An AI writes the code, you look at the result and you say what to change. You steer by what you see, not by reading every line.
Think of it as directing rather than doing. You decide what the result should be and judge whether it is right. The AI does the typing. In the same post, Karpathy described his way of working like this:
“I just see stuff, say stuff, run stuff, and copy paste stuff, and it mostly works.”
Note the word “mostly”. Karpathy called it “not too bad for throwaway weekend projects”. Vibe coding is quick for work that follows familiar patterns, such as websites, and less reliable for complex software.
A brief history
Vibe coding did not appear overnight. A few milestones:
- 2021: GitHub Copilot starts suggesting code while developers type.
- November 2022: OpenAI releases ChatGPT, and people start asking a chatbot for whole functions and explanations.
- 2023 and 2024: AI code editors such as Cursor and generators such as v0 and Bolt.new go further and write whole files, pages and apps from a prompt.
- February 2025: Andrej Karpathy names the practice “vibe coding” in a post on X.
- 2025: Collins Dictionary names “vibe coding” its word of the year.
How vibe coding works
It is a loop of three steps that you repeat until the result is right.
1. Describe
Write what you want in plain words. Start with the essentials: what it is, who it is for and what it must contain. For a website, that means the business, the place, the services and what visitors should do. Specific beats vague: “services with prices and a contact form for repair requests” gives the AI something to work with, “a nice website” does not.
2. Review
Look at the result, not at the code. In a website builder, that means the preview. Does the text say what you do? Is anything missing? Does it work on a phone? Check every fact. A good tool leaves gaps visible instead of filling them with made-up details. frascati, for example, leaves a [placeholder] where it does not know your prices or opening hours.
3. Refine
Say what to change, one clear request at a time: “Make the about page shorter.” “Move the prices above the photos.” “Use our logo in the header.” The AI builds on what is already there instead of starting over. If you do not like a change, go back to an earlier version.
The loop is quick because describing what you want takes less time than building it by hand. The judging stays with you.
Vibe coding tools and what they fit
| Tool | Type | Fits best for |
|---|---|---|
| frascati | Website and app builder | Websites and phone apps for small businesses |
| Lovable | App builder | Full-stack web apps, with Supabase and GitHub |
| Bolt.new | In-browser builder | Projects you build and run in the browser |
| v0 | UI and app generator | React UI and apps |
| Cursor | AI code editor | Working in your own code |
| Claude Code | Coding agent | Developers working in their own codebase |
| Replit | Cloud environment | Writing, running and learning code |
For a closer look at three of them, see our comparison of frascati, Bolt.new and v0.
Five practical examples
All five are websites. frascati builds phone apps too; our guide to building a phone app with AI shows how. Adapt the details to your own case.
Example 1: a landing page for a software product
“A landing page for TeamSync, a project planning tool for small remote teams. Headline about fewer status meetings. Sections: what it does, four features with one sentence each, pricing with our two plans, questions and answers, and a button ‘Start your trial’ linking to app.teamsync.example. Light design with a blue accent.”
Why it works: it names the product, the audience, the sections and where the button goes. What to check: every promise in the headline must be true for your product.
Example 2: a restaurant website
“A website for Osteria Bella, an Italian restaurant in Lugano. Pages: home, the menu by course (antipasti, primi, secondi, dolci), about the chef, and contact with our address, opening hours and a form for table requests. Warm and simple.”
Why it works: it lists the pages and the structure of the menu. What to check: prices and hours you did not give appear as [placeholders]. For online reservations, ask for online table booking, or a button that links to your booking tool.
Example 3: a developer portfolio
“A portfolio for Mara Keller, a front-end developer in Zurich. A short intro, four projects with one sentence each and a link to the live site, the tools I use, my work history and a contact form. Dark design with a green accent.”
Why it works: it says what each project entry needs. What to check: replace the project [placeholders] with your real work before you publish. Dark designs are fine; frascati builds one when you ask.
Example 4: an event page
“A page for the Bern Design Meetup on 14 November: the programme from 18.00 to 21.00, three talks with speaker names and titles, the venue with directions, and a form to register interest. Tickets are sold in our ticket shop, so link the main button there.”
Why it works: the date, the times and the venue are given, so nothing has to be guessed. What to check: speakers you have not named yet show up as placeholders. Ticket sales stay in the external shop: frascati can take payments, but it has no stock levels to stop sales when the event is full.
Example 5: a pricing page for a service business
“A pricing page for our cleaning company in Basel: three packages (basic, standard and deep clean) with what is included and the price of each, a note on extras, questions and answers below, and a form to request an offer.”
Why it works: it asks for a clear comparison and a next step. What to check: give the real prices in the prompt or fill them in later. frascati will not guess them.
Common vibe coding mistakes
- Being too vague: “Make me a website” gives the AI nothing to work with. Say what the business does, for whom, and which pages you need.
- Asking for everything at once: for bigger projects, get the structure right first, then the content, then the finishing touches.
- Stopping after the first result: the first version is a draft. A few rounds of changes make the difference.
- Not checking facts: AI writes fluent text, and fluent text can be wrong. Read every sentence about your business before you publish. A tool that leaves placeholders instead of guessing makes this easier.
- Describing pixels instead of intent: “calmer, more space, less text” works better than exact sizes. Say what you want to achieve and let the AI propose how.
- Ignoring the limits of the tool: a website builder will not turn into a full app with roles and logic of its own. Pick a tool that is made for what you need.
Where vibe coding is going
We will not guess at dates or market sizes. Models keep getting better at writing code, and the tools around them keep changing. Some things stay with you, whatever the tools can do:
- Deciding what to build and for whom.
- Knowing the facts: prices, hours, services and what makes you different.
- Judging whether the result is right, including on a phone.
- Knowing when you need a developer, for example for logins, payments or personal data.
Frequently asked questions
- Will vibe coding replace programming?
- No. It changes what programming time is spent on. Standard work, such as a business website, can now be described instead of hand coded. Complex systems, security-critical code and new architectures still need people who understand code.
- Is vibe coding only for people who cannot code?
- No. Developers use it to skip routine work and try ideas quickly. They have an advantage: they can read the result, spot problems sooner and step in when the AI gets stuck.
- How good is AI-generated code?
- Good for common patterns such as websites, weaker for unusual architectures, complex state and performance tuning. Our article on AI-generated code quality goes into detail.
- Which tool should I start with?
- Start from what you want to make. A business website or a phone app for your customers: frascati. A full-stack web app: Lovable or Bolt.new. React UI or apps: v0. Working in your own code: Cursor or Claude Code. Learning and running code in the cloud: Replit.
- Can I vibe-code something my customers will use?
- Yes, if it is a website and you check it: read every fact, test the contact form and look at it on a phone. For software with logins, payments or personal data, involve a developer before you launch.
Getting started
The best way to understand vibe coding is to try it on something small: a page for a side project, a portfolio, a site for a club. Describe it, look at the result and change one thing at a time.
For a step-by-step walk-through, read our guide to building a website with AI.