MassvaiMassvai
Guide4 min read

How to Write Prompts for AI App Builders (With Before/After Examples)

Watch two people use the same AI app builder for an hour. One has a working app; the other has a mess and an opinion that "AI coding is overhyped." The tool was identical. The prompts were not.

Prompting an app builder is a different skill from prompting a chatbot. You're not asking questions — you're giving work orders to an agent that will make dozens of decisions based on what you said and didn't say. Here's what actually works, with before/after examples throughout.

The first prompt: front-load decisions, skip implementation

Your opening prompt sets the project's foundation. The agent fills every gap you leave with a guess, and while good agents guess sensibly, every guess is a coin flip on matching your intent.

Before:

Make me a fitness app.

After:

Build a workout tracker for weightlifters. Data: workouts have a date; each workout has entries with exercise name, sets, reps, and weight. Screens: (1) today's log with quick entry, (2) history grouped by week, (3) a per-exercise progress chart. One user, no login needed. Dark, minimal design.

The "after" version decides the audience, data model, screens, auth scope, and visual direction — the five decisions that are expensive to change later. Note what it doesn't include: no tech stack, no database choice, no component libraries. A good platform makes those calls better than a prompt can, and cluttering your brief with half-understood tech terms actively hurts ("use MongoDB" when the platform is built around Postgres just creates friction).

A structure that consistently works:

  1. What it is, in one sentence, with the audience.
  2. The data, as plain nouns and fields.
  3. The screens, numbered.
  4. Explicit exclusions — "no login", "no payments". Exclusions prevent scope the agent would otherwise helpfully invent.

Iteration prompts: one change, anchored to a place

After the first build, your prompts change character: from architecture to surgery. Two rules do most of the work.

One change per message. Bundled requests fail as a unit — when one of five changes lands wrong, you're re-prompting around the other four.

Anchor every change to a location.

Before:

The dates look wrong.

After:

On the history page, the week headers show "Week 32". Show a date range instead, like "Aug 4 – Aug 10".

Name the screen, quote the wrong text, describe the right text. The agent finds the exact spot instead of hunting — fewer wrong guesses, fewer credits.

Describe outcomes, not implementations

You'll be tempted to talk like a developer. Resist it unless you are one.

Before:

Add a useEffect that refetches on mount and memoize the list rendering.

After:

When I come back to the dashboard after adding an expense, the total still shows the old number until I refresh. It should be current.

The first version commits the agent to your diagnosis, which may be wrong. The second gives it the actual defect — the thing you're sure about — and lets it find the cause. Describe symptoms with the confidence of a user; leave diagnoses to the thing that can read the code.

Use references — they beat adjectives

"Modern and clean" means nothing; every design since 2010 has claimed it. References carry orders of magnitude more information:

Make the pricing section feel like Linear's pricing page: lots of whitespace, thin borders, one accent color.

Better still, attach a screenshot — of an app you like, of a hand sketch, of the specific broken layout you're describing. Platforms that accept image attachments (Massvai does) resolve visual ambiguity from a picture far faster than from prose. A screenshot of the bug with a one-line caption is the single highest-value prompt format there is.

When it goes wrong: stop digging

The most expensive prompting mistake isn't a bad prompt — it's the fourth consecutive attempt to patch a direction that's fundamentally off.

If two attempts at the same fix haven't worked, change strategy:

  • Roll back. Restore the checkpoint before the mess (Massvai snapshots every generation) and re-approach with a different description. Going backwards feels like a loss; it's usually the fastest path forward.
  • Zoom out. Instead of re-describing the fix, describe the goal: "Forget the previous instructions about the filter dropdown. Here's what I'm trying to let users do: …" Agents handle fresh goals better than accumulated patch instructions.

A cheat sheet

SituationDoDon't
Starting a projectAudience + data + screens + exclusions"Make me an app for X"
Requesting a changeOne change, anchored to a screenFive changes in one message
Reporting a bugSymptom, where, expected behaviorYour guess at the code-level cause
Design directionReference apps and screenshotsAdjective soup
Stuck after 2 attemptsRoll back, re-describe the goal"Try again" a fifth time

None of this is exotic. It's the same clarity you'd owe a human contractor — except this contractor reads carefully, never gets annoyed by detail, and starts work in seconds. Give it a brief worthy of that.

Build your app with AI today

Describe your idea and get a production-ready Next.js app with live preview, full code ownership, and one-click deployment.

Start building free

Continue reading