Before you touch any AI builder, learn the one skill that separates "meh, generic result" from "wow, that's exactly what I wanted": how to write a prompt with real structure. In this lesson you'll learn a five-block anatomy that works on every AI tool — Lovable, ChatGPT, Claude, Cursor — and you'll practice it against fresh, everyday product ideas.
Part 1 · Why prompts matter
The same AI can give you a forgettable website or a portfolio-worthy one. The model didn't change between those two runs — the instruction did. Think of your prompt as the brief you'd hand to a freelancer: a vague brief buys you a vague result, no matter how talented they are.
A structured prompt isn't "prompt engineering wizardry" — it's just saying five simple things in a specific order. That's the whole trick.
Part 2 · The 5-block anatomy
Every solid prompt names five blocks. Miss one and the AI has to guess — and it will guess in the most generic direction possible. Stack them like LEGO and your intent stops leaking.
- Goal — the thing you're trying to build and who it's for.
- Input — what data or actions the user provides.
- Layout — how it should look and feel.
- Features — the behavior and logic inside it.
- Output — what the system returns to the user.
Part 3 · Block 1 — Goal
The Goal answers two questions in one sentence: what is this and who is it for. A clear goal gives every later decision a target to aim at.
Part 4 · Block 2 — Input
Input is what the user gives the system. Naming each field beats saying "add a form". If a field could be a dropdown, a slider, or a toggle, decide — don't leave it to chance.
ingredients on hand (tag input), diet (dropdown: any / vegetarian / halal / gluten-free), and max cook time (slider, 10–60 min).Part 5 · Block 3 — Layout
Layout is the visual direction. Palette, typography, density, and device priority. You don't need to be a designer — you just need to commit to a lane so the AI stops drifting into generic bootstrap-blue.
"For a book-club community page: soft editorial feel, warm cream background with forest-green accents, serif headline / clean sans body, mobile-first, card grid of current reads."
Visual clues that work
- Style words — editorial, brutalist, minimalist, playful.
- Colors — 2–4 concrete hexes or a named palette.
- Hierarchy — headline / subhead / body sizes, or a reference site.
- Responsiveness — mobile-first, tablet, or desktop-primary.
Part 6 · Block 4 — Features
Features are behaviors, not screens. Each one should describe a rule the system enforces or a moment it reacts. Aim for a small, sharp list — three to six items — that all serve the Goal.
- ✓Form validationReject empty duration; require at least one activity.
- 🔥Streak counterIncrement when today's session is logged.
- 🎉Milestone burstConfetti at 7-day and 30-day streaks.
- 📶Offline-firstQueue logs locally and sync when back online.
Part 7 · Block 5 — Output
Output is what the system gives back after the user acts — a confirmation, a computed result, a chart, an email, a redirect. Weak prompts stop at "show a report". Strong prompts describe the shape.
Part 8 · Iterate to power
Version 1 is a draft, not a verdict. Great prompt engineers keep the good bits from v1 and send small, surgical follow-ups. Each iteration should change one thing at a time, so you always know what caused the improvement — or the regression.
- 1v1 — Baseline
Ship the 5-block prompt as-is and take stock.
- 2v2 — Add depth
Introduce a streak counter and empty-state copy.
- 3v3 — Polish
Tighten the palette, add micro-animations, rewrite the CTA.
- 4Save
Bookmark the version you like before iterating again.
Follow-up phrases that work
Keep everything — only change the primary color to forest green.Revert the last change and try again with a smaller step.Explain the root cause before fixing anything.
Part 9 · Pro tip: the PRD shortcut
Writing all five blocks from a blank page is hard. The shortcut: use the AI itself to draft a short product requirements doc first, then ask it to reshape that doc into a 5-block prompt. Paste the result into a fresh chat and build.
- 1Discuss
Talk your idea through with the AI — target user, problem, must-haves.
- 2Ask for a PRD
Have the AI write a short product requirements doc.
- 35-block prompt
Ask it to rewrite the PRD as Goal · Input · Layout · Features · Output.
- 4Paste & build
Open a fresh chat, paste the 5-block prompt, hit send.
"Act as a product manager. I want to build a book-club community site. Ask me five clarifying questions, then write a one-page PRD. After I approve it, rewrite the PRD as a Goal / Input / Layout / Features / Output prompt I can paste into a builder."
Cheat sheet
Print this. Pin it above your keyboard. Read it before every new prompt.
- Goal — one sentence: what and for whom.
- Input — name every field and its control type.
- Layout — palette, type, hierarchy, device.
- Features — 3–6 behaviors that serve the goal.
- Output — describe the shape, not just "a report".
- Iterate — one change per version, save what works.
- PRD shortcut — let the AI draft the prompt for you.