Prompting Fundamentals

In Lesson 1 you learned how to move around Lovable. This lesson is about the one skill that decides how fast you ship: writing prompts the agent can act on with confidence. We'll walk through six patterns and apply each one to the same running project — the researcher portfolio you'll keep building across the rest of the beginner track.

Part 1 · Anatomy of a good prompt

Every strong prompt names four things: a goal (what you want to be true after the change), a scope (which part of the app is allowed to change), a constraint (what must stay the same), and an acceptance check (how you'll know it worked). Miss one and the agent has to guess.

"On the About page hero, change the headline to 'Researcher, educator, founder' and keep the current subtitle and photo. I should see the new headline in the preview and the layout should not shift."

Goal: new headline. Scope: About page hero. Constraint: keep subtitle, photo, layout. Check: visible in preview, no shift. One prompt, one round-trip.

Part 2 · Be specific about the element

"Make it nicer" forces the agent to guess. Name the element, the property, and the value. If you can point to a class name, a route, or a component, do it — every specific noun cuts a guess.

Part 3 · Scope the change

One focused edit per prompt beats a paragraph of wishes. When you bundle five changes together, one small mistake forces a rollback that also loses the four things that worked. Small steps = independent reviews.

A good instinct: if your prompt contains the word and more than once, split it.

Part 4 · Show, don't just tell

Words are lossy. Whenever you can, point at something concrete: paste a screenshot of the current state, attach a reference image, or ask the agent to mirror a section you already like. "Like the hero on the home page" is worth ten adjectives.

A prompt that leans on the reference: "On the About page, mirror the hero on the home page — same two-column layout, same heading size, same button pair. Use the About copy that's already there."

What to attach

• Screenshots of the current preview with the problem circled.
• Reference images from sites you admire (with a note on what to copy).
• Exact error text — not "it doesn't work".
• Links to a page or component you want the agent to look at first.

Part 5 · Constrain the output

The other half of specificity is saying what should not change. Without constraints, the agent will happily "improve" adjacent things — swap fonts, tweak colors, rewrite copy. Naming the boundary keeps momentum instead of firefighting drift.

A good constraint reads like a fence, not a wish. "Don't touch X" is more useful than "please be careful with X".

Part 6 · Verify and iterate

The first response is a draft. Great prompt engineering is really great follow-up engineering: you look at what the agent did, keep what worked, and send a short correction for the rest. Each follow-up should be smaller than the last.

Follow-up phrasing that works

• Keep everything else — change only the button color to maroon.
• Revert the last change and try again with a smaller step.
• The heading is right. The padding is too large — halve it.
• Explain the root cause before fixing anything. — useful when a bug has survived two attempts.

Prompt cheat sheet

A pocket version of the six patterns. Print it, pin it, glance at it before you hit enter.

• Anatomy — Goal · Scope · Constraint · Check.
• Specific — name the element, the property, the value.
• Scope — one goal per prompt; split on the second "and".
• Show — attach a screenshot or point at a section to mirror.
• Constrain — say what must not change.
• Iterate — smaller follow-ups; revert freely; ask for root cause when stuck.