DEV Community

Cover image for How to Turn a Text Prompt Into a Working Web App
HiveFive
HiveFive

Posted on

How to Turn a Text Prompt Into a Working Web App

#lovable #webdev #ai #abotwrotethis

TL;DR — Describe the app concretely, iterate with one change per message, fix by describing symptoms, publish, and mind your credits. The full workflow is below. ⬇️

Disclosure: This post was written with AI assistance (the cover image too). It contains one personal referral link to Lovable: if you sign up through it, you get 10 bonus credits, and I earn credits if you later subscribe to a paid plan. The tutorial below stands on its own — everything in it works with a regular free Lovable account, with or without my link.

🔗 Referral link: https://lovable.dev/invite/1T9LB22

I wanted a small web app — a habit tracker I could actually use — but I didn't want to spend a weekend wiring up a frontend. So I described the app in plain words to an AI app builder (Lovable) and got a working app back. Here's the exact workflow that worked for me, including the mistakes I made and how I fixed them.

The workflow: concrete prompt → small iterations → symptom-based fixes → publish

1. ✍️ Write a concrete prompt, not a vague wish

❌ Bad prompt:

Make me a habit tracker.

✅ Good prompt — specific about what the app shows and does (copy-paste ready):

Build a habit tracker web app. It has a list of habits (Drink water,
Read 20 minutes, Exercise). Each habit shows a row with its name and
7 circles, one per day of the current week. Clicking a circle marks
that day done (filled) or undone (empty). At the top, show a progress
bar: "This week: X of Y habits done." Add a button "Add habit" that
opens a small form with a name field. Keep the design clean,
mobile-friendly, with a dark header.
Enter fullscreen mode Exit fullscreen mode

Why this works: the model can't guess your layout, your fields, or your interactions. Every concrete detail in the prompt is one less round of corrections later.

2. 🔁 Iterate with small follow-up prompts

The first version is rarely perfect. Don't rewrite the whole prompt — send short follow-ups, one change per message:

The progress bar counts days, not habits. Make it count completed
habit-days out of total habit-days this week.
Enter fullscreen mode Exit fullscreen mode 
On mobile the circles are too small. Make them 36px with more spacing.
Enter fullscreen mode Exit fullscreen mode 
Add a delete button (small ×) on each habit row, with a confirm dialog.
Enter fullscreen mode Exit fullscreen mode

⚠️ Lesson learned: when I bundled five changes into one message, the builder half-applied two of them and I had to untangle the result. One change per message keeps the app stable.

3. 🐛 When something breaks, describe the symptom

Sooner or later something will look wrong. The fastest fix is to describe exactly what you see and what you expected:

When I click 'Add habit' with an empty name, the app adds a blank row.
Instead, show 'Please enter a habit name' under the field and don't add
the row.
Enter fullscreen mode Exit fullscreen mode

Symptom + expected behavior beats "it's broken" every time. If a fix makes things worse, say so plainly — "That change broke the progress bar, please revert it" — and the builder will roll it back.

4. 🚀 Publish and share

Once the app works, publish it from the builder and open the live link on your phone. Check the mobile layout first — that's where layout bugs hide. If something looks off on a small screen, describe it the same way as in Step 3.

💰 Managing credits

The free tier gives you a limited number of credits (each prompt and fix costs some). Two habits that saved mine:

  1. Think before you prompt. A precise first prompt (Step 1) costs far fewer credits than ten rounds of corrections.
  2. Batch tiny fixes. If you spot three small visual issues, list them in one message instead of three separate ones.

✅ What this workflow is good for — and what it isn't

It shines for small, self-contained tools:

  • ✅ Trackers and calculators
  • ✅ Landing pages
  • ✅ Simple dashboards
  • ✅ Prototypes you can show someone the same day

It struggles with apps that need complex user accounts, payments, or heavy backend logic — for those, treat the output as a prototype, not a finished product.

That's the whole workflow: concrete prompt, small iterations, symptom-based fixes, publish, and mind your credits. The habit tracker I built this way is the one I actually use every morning — which is more than I can say for most apps I've built from scratch.

❓ Questions? I collected the common questions and answers about the invite and the credits here: Lovable invite FAQ

Top comments (0)