How to Vibe Code: A Beginner’s Step-by-Step Guide, From First Prompt to a Working App
For anyone with an idea and no time to learn a programming language: the eight steps of vibe coding, the prompts that work, and a real session we ran from a one-paragraph brief to a working app.
To vibe code, you describe what you want in plain English and an AI tool writes and runs the code for you. The method is a loop: write a short brief, let the AI generate a first version, run it and try every button, ask for one change at a time, describe bugs instead of fixing them yourself, and save each version that works. Then check it is safe and publish it. A first small app takes an evening, and you do not need to know how to code.
What This Guide Covers
- The eight steps, with time for each
- Two routes: code-writing tools and no-code AI builders
- A brief template you can copy
- Our own session: 5 prompts, every one shown
- 12 starter prompts for your first session
- How to vibe code on your phone
New to the term? Start with what vibe coding is, then come back here to do it.
TL;DR Quick Summary
How to vibe code in eight steps. 1. Write a brief: who it is for, what it must do, and what "done" looks like. 2. Paste it into a vibe coding tool and let it build. 3. Run the result and try every button. 4. Ask for one change per prompt. 5. When something breaks, describe what you expected and what happened. 6. Save every version that works. 7. Check logins, private data and secret keys before anyone else uses it. 8. Publish as a web link, or to the app stores with a builder that handles them.
Try AI Vibe Coding →Table of Contents
The route first, then the eight steps, then our session in full.
- What you need, and is vibe coding difficult?
- Pick your route first
- Step 1: Write the Brief
- Step 2: Generate the First Version
- Step 3: Run It and Click Everything
- Step 4: Change One Thing per Prompt
- Step 5: Fix Bugs by Describing Them
- Step 6: Save Every Version That Works
- Step 7: Check It Before Anyone Else Uses It
- Step 8: Publish It
- Worked example: our session, prompt by prompt
- Starter prompts for your first session
- Beginner mistakes
- How to vibe code on your phone
- How to learn vibe coding
- Frequently asked questions
What You Need Before You Start, and Is Vibe Coding Difficult?
Less than most people expect. You need three things:
An idea small enough for one evening
One screen or one task: a bill splitter, a booking form, a habit tracker. Not "the next Airbnb".
One tool
A browser-based vibe coding tool, a desktop coding agent, or a no-code AI builder. All have a free way to start.
One to two hours
Most of the time goes on trying the result and asking for changes, not on the first build.
Is vibe coding difficult? Starting is easy: if you can describe what you want in a few sentences, you can get a working first version in minutes. Finishing is harder. The skill is not typing code; it is noticing what is wrong, describing it clearly, and refusing to stack ten changes into one prompt. People who already think in steps, like a project manager or a teacher writing a lesson plan, usually pick it up in a day.
Can you vibe code without knowing how to code? Yes, for small apps and websites. You will hit a ceiling sooner than a developer does: when a bug needs reading the code to find, you have to keep describing symptoms until the AI finds it. For anything that stores other people's data or takes payments, plan to have a developer look at it before launch, or use a builder that handles hosting, logins and payments for you.
Pick Your Route First: Code-Writing Tools or a No-Code Builder
"Vibe coding" covers two kinds of tool. Both start from a prompt. What you end up with is different, and so is who looks after it. Our list of the best vibe coding tools compares eleven of them in depth; this is the short version.
| Route | Examples | What you get | Free to start? | Paid from |
|---|---|---|---|---|
| In the browser | Lovable, Bolt, Replit, Google AI Studio | Source code for a web app, hosted by the tool | Yes, with daily or monthly limits | $20 to $25 a month |
| On your computer | Claude Code, Cursor | Code in a folder on your machine; you host it | Cursor yes; Claude Code needs Claude Pro | $17 to $20 a month |
| No-code AI builder | Appy Pie AI Vibe Coding | A hosted app or website you edit visually; no code to look after | 7-day app trial; websites free on a subdomain | $16 per app a month |
Plans read on each vendor's pricing page on 1 October 2026 (US). Lovable Pro is $25 with 100 monthly credits, Bolt Pro $25, Replit Core $20 ($18 billed yearly), Cursor Pro $20, Claude Pro $17 a month billed yearly ($20 monthly). Google AI Studio is free to experiment with. Appy Pie AI's free plan builds and previews an app for 7 days for personal use; publishing to Google Play starts at $16 per app a month, and iOS is on Platinum at $60.
Choose a code-writing tool if you want to own the source code, are happy to read error messages, and plan to host it yourself. Choose a no-code builder if you want an app in Google Play and the App Store without ever opening the code: our step-by-step guide to building an app with AI follows that route. Already comparing tools? See our Lovable alternatives and Replit alternatives.
Step 1: Write the Brief
The brief is the most important prompt you will write. A vague first prompt gets a generic app, and you spend the next hour steering it back. Fill in these five lines before you open any tool:
What it must do: take the bill, a tip and the number of people, and show what each person owes.
Screens: one screen.
Look and feel: big buttons, clean and friendly, works on a phone.
Done means: 84.50 with an 18% tip and 4 people shows each share straight away.
The last line matters most. "Done means" gives you, and the AI, a test you can check in ten seconds. If you are planning something bigger, our guide to creating a software prototype shows how to cut an idea down to one task first.
Step 2: Generate the First Version
Paste the brief into the tool and let it build. Do not add extra wishes at this point; the first version is for checking that the AI understood the job.
- Ask for the simplest technology. "One page, no sign-in, no database" is a reasonable first constraint for a beginner app. Every extra piece is something else that can break.
- Read the reply. Good tools say what they built and what to try. If the reply describes something you did not ask for, stop and correct it now.
- Expect surprises. In our session, the tool built exactly what the brief asked for, plus a rounding note we had not thought of, and also left our test numbers filled in as the starting values.
Step 3: Run It and Click Everything
Open the result on the device people will use, usually a phone, and try every button and box. Then try to break it. This is where you find the problems that matter, and it is the step most beginners skip.
Try the normal case
- The example from your brief
- A second, different example
- Every button at least once
Then try to break it
- An empty box, a zero, a negative number
- A huge number, letters instead of numbers
- A comma or a currency sign
Write down what went wrong in plain words, one line per problem. Those lines become your next prompts. For apps with several screens, map them first: how to design a mobile app covers screens and flows.
Step 4: Change One Thing per Prompt
Ask for one change per prompt, then run it again. When you ask for five things at once, the tool may do four, break one, and you cannot tell which change caused the problem.
| Instead of | Write |
|---|---|
| "Make it better." | "Make the amount each person owes the biggest thing on the screen." |
| "Add tips, rounding, currencies and dark mode." | One of those per prompt, tested before the next. |
| "It looks weird." | "On my phone the plus button is cut off on the right." |
| "Fix everything." | "When I open the app it shows last time's numbers. Start empty instead." |
Say what you see and what you want, not how to code it. You are the product owner; the AI is the developer.
Step 5: Fix Bugs by Describing Them
When something breaks, describe it like a bug report: what you did, what you expected, and what happened instead. If there is an error message, paste it in full.
- Ask for the cause first. "Explain before you fix" stops the tool from guessing and rewriting half the app.
- Give it the same test case. "84.50, 18%, 4 people should give $24.93 each" lets it check its own work.
- After three failed fixes, go back. Restore the last version that worked (step 6) and describe the change differently. Some prompts just lead the tool into a corner.
Step 6: Save Every Version That Works
Every time the app works, save that version before asking for the next change. If the next prompt breaks something badly, you can go back in seconds instead of trying to prompt your way out.
In browser tools
Most keep a version history or checkpoints you can restore. Find the restore button before you need it.
On your computer
Ask the agent to "commit this version with a short note". That is version control without learning Git commands.
In a no-code builder
Duplicate the app or keep the published version untouched while you try changes in the editor.
In our session we saved a copy after every prompt that worked. It cost a few seconds each time.
Step 7: Check It Before Anyone Else Uses It
A vibe-coded app can look finished and still be unsafe. If anyone other than you will use it, check these six things, and ask the tool to check them too.
- Secret keys. API keys and passwords must not be in the code people can see. Ask: "Is any secret key visible in the browser? Move it to the server."
- Logins. Can a user see or change another user's data by changing a number in the address bar? Test it with two accounts.
- Private data. Store only what you need. Do not collect card numbers yourself; use a payment provider.
- Inputs. Try odd text in every box: very long text, symbols, code. The app should refuse it politely, not break.
- Backups. If it stores data, know how to export it and how to restore it.
- Costs. Check how many credits, tokens or hosting hours the app uses when other people start using it.
None of these matter for a bill calculator that stores nothing. All of them matter for a booking app with customers' names and phone numbers. Our vibe coding security guide explains each risk and how to test it without reading code.
Step 8: Publish It
How you publish depends on the route. A browser tool can usually give you a public link in one click. A desktop tool leaves you to choose hosting. To get into the app stores, you need developer accounts, store listings and a review: Google Play charges $25 once and Apple $99 a year.
A web link
The quickest way to share. Most browser vibe coding tools host the app for you. For a business website, our AI website builder publishes to your own domain.
Google Play
Needs an Android build and a Play developer account. A no-code builder such as our Android app builder produces the build and walks you through the listing.
The App Store
Needs an iOS build, an Apple developer account and Apple's review. Our iPhone app builder handles the build; Apple still reviews every app.
Worked Example: Our Session, Prompt by Prompt
To test the method in this guide, we ran it ourselves on 1 October 2026. We used Claude, Anthropic's AI model, as the coding agent inside Claude Code, and played the part of someone who does not code: every request was plain English, and we only judged the app by using it in a browser. The brief was the five lines from step 1. Five prompts, about five minutes of the agent working, and roughly fifteen minutes of us testing, took it from nothing to a working bill splitter with an uneven-split option. For a first session from an empty folder, and what each Claude plan costs, see how to vibe code with Claude.
| # | What we typed | What happened | Time |
|---|---|---|---|
| 1 | The five-line brief from step 1: a bill splitter for friends on one phone, with a tip and the number of people. | A one-page app that worked first time: 84.50, 18% and 4 people gave $24.93 each. Unasked, it also said 3 people pay $24.93 and 1 pays $24.92, so the four payments add up exactly. | 95 s |
| 2 | "Start with an empty bill, no tip picked and 2 people. If someone types a tip over 50%, ask 'Did you mean 15%?'" | Fixed both problems we found by testing: 18% was already selected when the app opened, and a 150% tip was accepted without a question. Now it waits for a tip and offers a one-tap fix for typos. | 58 s |
| 3 | "Add a 'Someone had less' option. They pay their own food plus the same tip, and everyone else splits the rest." | Worked: a $12.00 salad means that person pays $14.16 and the other three pay $28.52, $28.52 and $28.51, which adds up to the $99.71 total. | 56 s |
| 4 | A bug report: "When I typed 84.50 as their food, the whole bill, I expected the app to stop me. Instead the other 3 pay $0.00. Explain the cause first, then fix it." | Fixed: any amount at or above the bill is now refused with a clear message. It skipped the explanation we asked for and went straight to the fix. | 105 s |
| 5 | "Explain what the app does when I tap 'Someone had less' and type 12.00, step by step, without code." | An eight-step plain-English walkthrough, ending with a check that $14.16 + $28.52 + $28.52 + $28.51 = $99.71. No code changed. | 148 s |
What went well
- The maths was right first time, including splitting the odd cent
- Big buttons and no sideways scrolling on a 375-pixel-wide phone screen
- Friendly messages for empty boxes, letters and negative numbers
- Commas and dollar signs in the bill were understood
What we had to catch ourselves
- 18% was already picked when the app opened
- A 150% tip went through without a question
- A "had less" amount equal to the whole bill made everyone else pay $0.00
- It skipped "explain the cause first" and went straight to the fix
Starter Prompts for Your First Session
These are the prompts we reach for most. Replace the parts in square brackets. They work in browser tools, desktop agents and no-code builders alike. For 25 prompts we tested, each with the result it gave, see our vibe coding prompts guide.
| Use it to | Prompt |
|---|---|
| Start | Here is my brief: [five lines]. Build the simplest version that does this. Tell me what you built and what I should try first. |
| Plan first | Before writing any code, list the screens and the steps you plan to take. Wait for me to say go. |
| One change | Change only this: [one change]. Do not touch anything else. |
| Bug report | When I [did this], I expected [this], but [this happened]. Explain the cause in one sentence, then fix it. |
| Error | Here is the full error message: [paste]. What does it mean in plain English, and what is the smallest fix? |
| Explain | Explain what this app does when I press [button], step by step, without code. |
| Mobile | On a phone 375 pixels wide, [this] is cut off. Make the layout fit without scrolling sideways. |
| Tidy up | The app works. Tidy the code without changing what it does, and tell me what you changed. |
| Test | Write down five tests I should try by hand, including two that try to break it. |
| Safety | Check this app for visible secret keys, data other users could see, and inputs that could break it. List problems before fixing them. |
| Undo | That last change made [this] worse. Go back to how it was before, and suggest a different way. |
| Save | Save this working version with a short note saying what it does now. |
Beginner Mistakes That Waste an Evening
A huge first prompt
Ten features in the first message. Start with the smallest version that does one job.
Stacking changes
Five requests in one prompt. When something breaks you cannot tell which one did it.
Never running it
Reading the AI's summary instead of trying the app. The summary is always confident.
Not saving versions
No way back after a bad change, so you prompt in circles.
Pasting secret keys into prompts
Treat a prompt like an email to a stranger. Put keys in the tool's settings for secrets.
Shipping the demo
A working demo is not a safe product. Do step 7 before anyone else logs in.
How to Vibe Code on Your Phone
You can, with limits. Several vibe coding tools now have phone apps, checked in the US App Store on 1 October 2026:
- Replit has a phone app that builds, tests and hosts web apps from a chat.
- Lovable released a phone app in April 2026 for building apps and websites from a description.
- Cursor for iOS (June 2026) starts and manages coding agents on a project you set up on a computer.
- Claude's phone app can write and explain code in a chat.
A phone is fine for writing the brief, asking for changes and checking the result. It is awkward for reading long error messages and testing on a bigger screen. A good pattern is to start on a computer and use the phone for small changes and checks.
How to Learn Vibe Coding in a Week
You learn it by doing it, in small projects that each add one new skill.
| Day | Build | What it teaches |
|---|---|---|
| 1 | A one-screen calculator, like our bill splitter | Writing a brief and testing it |
| 2 | The same app with one new feature | One change per prompt |
| 3 | A to-do list that remembers items | Saving data, and what happens when you refresh |
| 4 | A page that shows data from a public source, such as the weather | Reading and describing error messages |
| 5 | Your own idea, cut to one task | Scoping and saying no to features |
| 6 | Day 5 again, with the safety checks from step 7 | Thinking about other users |
| 7 | Publish one of them and send the link to a friend | Publishing, and feedback from a real person |
Prefer not to touch code at all? The same week works on a no-code builder, and our step-by-step guide to building an app with AI covers that route. For how vibe coding compares with low-code tools, see our guide to low-code app development.
Frequently Asked Questions
Is vibe coding difficult?
Starting is easy: if you can describe what you want in a few sentences, an AI tool can build a working first version in minutes. Finishing is harder, because you have to test the result, describe problems clearly and ask for one change at a time. Most people get comfortable with it after a few small projects.
Can I vibe code if I don’t know how to code?
Yes, for small apps and websites. You describe what you want and the tool writes the code. You will reach a limit sooner than a developer would, especially with bugs that need the code read to find, and anything that stores other people’s data or takes payments should be checked by a developer or built on a platform that handles those parts for you.
How long does it take to learn vibe coding?
You can build a first small app in an evening. A week of small daily projects, each adding one skill such as saving data or reading error messages, is enough to be comfortable with the method.
Is vibe coding free?
You can start free on most tools. Lovable, Bolt, Replit and Cursor have free plans with limits, and Google AI Studio is free to experiment with. Paid plans start at about $17 to $25 a month (checked 1 October 2026). Claude Code is not on Claude’s free plan. Appy Pie AI free plan builds and previews an app for 7 days for personal use; publishing starts at $16 per app a month.
Which vibe coding tool is best for beginners?
A browser-based tool such as Lovable, Bolt or Replit is the easiest way to start with code, because there is nothing to install. If you never want to see code and want an app in the app stores, a no-code AI builder is the simpler route. Our list of the best vibe coding tools compares eleven of them.
Can I vibe code on my phone?
Yes, with limits. Replit, Lovable, Cursor and Claude all have phone apps. A phone is fine for writing prompts and checking results, but reading long error messages and testing layouts is easier on a computer.
Can a vibe-coded app go on the App Store?
Yes, if it is built as a real iOS app and passes Apple’s review. Many browser vibe coding tools produce web apps, which need extra work to become store apps. No-code app builders produce the Android and iOS builds for you; you still need developer accounts (Google Play $25 once, Apple $99 a year) and a store listing.
Is vibe coding safe?
It is as safe as the checks you do. AI tools can put secret keys where people can see them, or let one user see another user’s data. Before anyone else uses your app, check secret keys, logins, private data, inputs, backups and running costs, and ask the tool to check them too.
Do I own the code I vibe code?
With code-writing tools you usually get the source code and can take it elsewhere; check each tool’s terms. With a no-code builder you own your content and data, but the app runs on the builder’s platform.
Should I start with vibe coding or a no-code builder?
Start with a code-writing tool if you want to own and host the code and do not mind reading error messages. Start with a no-code builder if you want a working app in the stores quickly and never want to maintain code.
Your Brief Is Written. Let the AI Build It.
Describe your app or website in a few sentences, and Appy Pie AI builds a first version you can edit without code.
Try AI Vibe CodingDescribe, Build, Test, Repeat
Vibe coding is a loop, not a single prompt. Write a short brief with a test at the end, let the AI build, try everything, change one thing at a time, describe bugs instead of guessing, and save every version that works. Check it is safe, then publish. The first small app takes an evening.
Try AI Vibe Coding →
Aasif Khan
Head of SEO and Growth Marketing Lead at Appy Pie AI with 17+ years in digital marketing and scalable growth strategies.
Abhinav Girdhar
Founder and CEO of Appy Pie AI, one of the largest no-code and AI app platforms, with 10M+ apps and websites created.