How it works
Build apps by describing them — then keep going.
Vibecode turns a plain-language prompt into a running React app. The whole thing is a short loop: describe → preview → iterate → export. This guide walks the loop, shows how to write prompts that work, and is honest about what the MVP can and can't do.
The loop
Four steps, on repeat
Each generation runs the same way. You stay in the chat; the app rebuilds around you.
Describe
Write what you want in the composer — "a habit tracker with a weekly grid." Pick a model and see the token estimate before you run.
Watch it build
The stepper runs Thinking → Reading → Writing → Preview. Files stream into the tree and the live preview refreshes when it's done.
Iterate via chat
Ask for changes in plain language — "make the header sticky," "add a dark mode." Every generation is a checkpoint you can restore.
Export
When you're happy, take the source: download a ZIP, copy individual files, or push straight to a GitHub repo (Pro+).
Prompts
Writing good prompts
The clearer the ask, the fewer tokens you spend fixing it. Name the screens, the data, and the key interactions.
“A habit tracker with a weekly 7-day grid, up to 6 habits, a streak counter, and localStorage so it persists on reload.”
Names the layout, the limits, the behavior. The model has everything it needs on the first pass.
“Make me a productivity app.”
Too open-ended — the model guesses, and you spend extra tokens redirecting it toward what you actually meant.
Not sure how to phrase it? Enhance prompt rewrites your rough idea into a clear spec before you run — usually spending fewer tokens overall.
Scope
What you can build
Vibecode generates frontend apps — interactive UIs with local state. Great for tools, prototypes, and marketing surfaces.
Built onReactViteTailwind— one clean, modern stack.
Expectations
Honest limitations
The MVP is deliberately narrow. Knowing the edges up front saves you tokens and surprises.
Files are read-only
You browse and export the source, but you change the app through chat — there's no in-browser code editor.
No backend
Frontend only — no databases, servers, or auth in your generated apps. State lives in the browser.
No deploy in the MVP
Export the source and host it yourself. One-click publishing isn't part of this release.
A single stack
Every app is React + Vite + Tailwind. No framework picker — which is exactly why generations stay fast and reliable.
Money
Tokens & tiers in 30 seconds
Two ideas, kept deliberately distinct so you never confuse them.
Balance is what you spend
Gold, in mono numerals. Every generation spends tokens and the count goes down. Top up any time — you always see the estimate before a run and the exact spend after.
Tier is what you unlock
Lavender, a permanent badge — never a number. Set by your biggest pack, it unlocks model classes, projects, image generation, and export options. Buying more tokens can raise it, never lower it.
Ready to describe your first app?
Packs start at $5 — no subscription.
Get started