Describe an App and Watch Lovable Build It — See Vibe Coding in Action
What this project is
You use a free AI to write a clear two-part brief — how a small website should look and what it should do — then hand it to Lovable and watch it build the whole thing in front of you. The goal is to see vibe coding in action and click around your own working app. Heads up: Lovable's building is free but limited (about five small prompts a day), and keeping the site permanently hosted is a paid feature — so this Mission is about experiencing it, not shipping a live site (that's what the Netlify Mission is for).
Capabilities gained
- Writing a clear brief for an AI builder — the look and the function, spelled out separately
- Planning your whole request before you spend limited free prompts, so nothing's wasted
- Seeing a complete app get built from a plain-English description, and clicking through it
Where else this applies
- Prototyping an app or landing-page idea before paying anyone — or any tool — to build it
- Turning a vague concept in your head into something you can click and show people
- Briefing any AI tool well and planning your prompts, so you get a strong result without wasting attempts
Copy-paste build prompt
Help me write a clear, two-part brief I'll hand to an AI app builder (Lovable) so it builds my website well on the FIRST try — I only get a few free prompts, so this has to be right the first time. My idea: [describe your simple website in a sentence or two — e.g. "a habit tracker where I add habits and check them off each day," or "a landing page for my cleaning business with services, prices, and a contact form"]. Write the brief in two labelled parts: PART 1 — LOOK & FEEL (UI/UX): the pages or screens, the layout, the color mood, the font vibe, how it should feel to use, and that it must work on a phone. PART 2 — WHAT IT DOES (functionality): every button and action, what happens when I click things, what data it stores or shows, and the single most important thing it must get right. Keep each part tight and concrete — no fluff. Then combine both parts into one final block I can copy and paste straight into the builder as a single prompt. Give me only that final combined brief at the end.
Copy-paste explanation prompt
In plain language, explain what just happened. I gave a written brief and got a working app back — what did the builder actually do behind the scenes to turn my words into a real website? What kinds of things is it great at, and where is it likely to get my idea wrong or need me to correct it? Keep it short and honest.
What’s going on
- You use a free AI to turn your idea into a tight two-part brief (look, then function)
- You plan the whole thing FIRST, because Lovable only gives you a few free builds a day
- You paste your brief into Lovable as one prompt and watch it build the app in real time
- You open the preview and click around your own working website
- You have it explain what it just did — and where it might get things wrong
Step-by-step instructions
Step 1 — Open a free AI (claude.ai or chatgpt.com), paste the build prompt above, and fill in your website idea in the brackets. Send it.
You should now see a two-part brief — LOOK & FEEL and WHAT IT DOES — ending with one combined block. Copy that combined block.
Step 2 — Before you touch Lovable, plan. The free plan gives you only about five small builds a day, so you don't want to waste prompts fixing things you could have said up front. Re-read your brief and make sure it already says everything you want — every page, every button, the colors, the phone layout. Add anything missing now.
You should now see one complete brief you're confident in — the thing you'll spend your first (and best) prompt on.
Step 3 — Go to lovable.dev and sign up for the free plan (no credit card). Paste your combined brief into the big "what do you want to build" box and start the build.
You should now see Lovable thinking, then assembling your app screen by screen. Give it a minute.
Step 4 — When it's done, look at the preview on the right and click around — open the pages, press the buttons, try the thing it was supposed to do.
You should now see your own working app, built from a paragraph you wrote. If one thing's off, spend ONE careful follow-up prompt (e.g. "make the header dark and the buttons bigger") — remember each prompt counts against your daily free builds.
Step 5 — Decide what's next. What you built is yours to keep exploring on the free plan. If you ever want it permanently live at its own web address, that's Lovable's paid hosting — but you've already seen the whole magic: describe it, watch it build, click through it.
You should now see the full picture of vibe coding — you turned words into a real, clickable app without writing a line of code.