4 of 22

AI TRAINING HUB

Everyone Can Code 101

Build a real app,

one prompt at a time

A 120-minute, hands-on training session where learners build a working single-page app in Lovable — one prompt, one action, one preservation phrase at a time.

Lovable

120 min

Beginner

BEFORE YOU BEGIN:

Have lovable.dev open in your browser. Confirm projector zoom is at 125% or higher (code panel must be legible from the back row). Backup screenshots from the Box Kit Demo Scripts downloaded offline.

SAY / DO:

"Welcome to Vibe Coding 101. Over the next two hours, you're going to build a real, working single-page app in Lovable, one prompt at a time. By the end of today, you'll have an app you built yourself that you can keep building tomorrow." Want to be clear that this is not a software engineering bootcamp, but instead how to use natural language to create an app. Previously, in order to have an idea was not enough. In order to bring it to reality in digital space required developer, UI/UX people, deployment experts etc.

HOOK / QUESTION:

Ask: "How many of you have tried to build an app and ended up with something you couldn't fix?" Quick show of hands only. No discussion yet.

⏰ TIME CHECK:

Stay under 3 minutes for intro + hook combined.

⚠️ COMMON MISCONCEPTION:

Learners may assume this is a coding bootcamp. Set the frame early: "You won't write code today. You'll write prompts. Lovable writes the code. Your job is to write prompts that protect what's working and add what's next."

5 of 22

Introduction

{Trainer Name}

{Trainer Bio}

6 of 22

ROADMAP · WHAT WE'RE DOING TODAY

What we're doing today

Five chapters across two hours. Most of today is hands-on, not lecture.

SPA Anatomy

→

The Prompt Formula

→

Live Demos

→

Build Your App

→

Recap & Q&A

🎯 GOAL

By the end of today, you will have built a working single-page app in Lovable using six prompts, with preservation phrases protecting your work.

SAY / DO:

"Here's the shape of the afternoon. Five chapters, two hours. The first two are the concepts, and honestly there are only two ideas in this entire session, and they take about twenty minutes to explain. Everything after that is you, hands on the keyboard. I'm on my feet for maybe twenty-five minutes in total; the rest of the time you're building and I'm walking around the room. By the time we finish, you'll have made an app out of six prompts. Six, not sixty. And one request before we start. If something doesn't make sense, stop me. No question is dumb, the more we collaborate, better the outcome of this workshop”

HOOK / QUESTION:

Don't read each box aloud. Wave across them: "Concepts → Demos → Build → Recap." Then point at the goal: "This is what you walk out with."

⏰ TIME CHECK:

2 minutes max.

7 of 22

CHAPTER 1 · SPA ANATOMY

What is a single-page app?

Every SPA is made of three kinds of blocks. Once you can name the block, you can prompt for it.

🎨

Visual Blocks

Hero, navbar, cards, animations.

What the user sees.

🔘

Interaction Blocks

Buttons, forms, tabs, search.

How the user acts.

💾

Data Blocks

State, localStorage, backend.

What the app remembers.

💡 Analogy

Think of an SPA like a vending machine — visual is the glass front, interaction is the buttons, data is the inventory behind the panel.

SAY / DO:

"Let's start with what we're actually building. A single-page app, or SPA as you will see it written, just means the whole thing lives on one page. You scroll, things change, things appear, but the page never reloads. You never get that white flash where the browser goes off and fetches a fresh page. Instagram works like that. Gmail works like that. Now, every app you have ever used, without exception, is made of three kinds of blocks, and I want you to picture a shop while I explain them, because everybody here has stood in one. The signboard outside, the way the mithai is arranged in the glass case, the lighting. That's the visual block. That's what the customer sees. Then there's the counter. The token you take, pointing at the tray, saying "half a kilo of that one." That's the interaction block. That's how the customer acts. And right at the back there's the storeroom,

and the register the owner writes in at the end of the day. That's the data block. That's what the shop remembers after you've gone home. Visual, interaction, data. That's it. That's every app on your phone."

HOOK / QUESTION:

"Open any app on your phone. Name out loud at your table: what's a visual block, what's an interaction block, what's a data block?" Take one example from the room.

⏰ TIME CHECK:

3 minutes. Skip the table-talk if running behind.

⚠️ COMMON MISCONCEPTION:

Learners often think visual and interaction are mutually exclusive. A button is BOTH a visual block AND an interaction block. The categories overlap; that's fine.

8 of 22

VOCABULARY · KEY TERMS TO REMEMBER

Common Terms

Master these core terms to describe exactly what you want to build.

📱

SPA (Single Page Application)

An app that loads a single HTML page and dynamically updates content as the user interacts with it, without full page reloads.

Vibe coding feel: Transitions feel fast and seamless, like a mobile app.

⚡

Hero Banner

The prominent, oversized header section at the very top of a website, usually containing a bold headline, visual asset, and key action.

Prompting tip: "Add a large hero section with a bold hook."

🗺️

Nav Bar (Navigation Bar)

The horizontal header zone containing links, logos, and settings that helps users navigate to different sections or pages of your app.

Prompting tip: "Add a sticky nav bar with a logo and three links."

🎯

CTA (Call to Action Button)

A highly visible button designed to prompt an immediate response or encourage the user to take a specific, high-priority step.

Example: "Get Started" or "Sign Up Now" placed prominently.

SAY / DO:

“Now, you'll hear three words a lot this session, so let me translate them now.

A hero is the big block at the top of a page. There's nothing heroic about it, that's just what the industry decided to call it.

A navbar is the strip across the very top with the logo on one side and the links on the other.

A CTA is call to Action. It is a button where you want the user to interact with.

And cards are boxes sitting side by side with a bit of text in each one. And I'm not teaching you this vocabulary so you can sound clever at dinner. I'm teaching it because the machine responds to precision. If you say "make the top of the page nicer," you'll get a mess. If you say "add a hero banner with a headline and one button," you get exactly what you pictured. The vocabulary is your steering wheel.”

9 of 22

CHAPTER 2 · THE PROMPT FORMULA

The prompt formula

Action + Target + Constraint + Preservation Rule

ACTION

"Add a hero banner..."

TARGET

"...below the header"

CONSTRAINT

"Use one CTA button"

PRESERVATION

"Do not redesign the page"

✅ STRONG PROMPT EXAMPLE

"Add a three-card section below the hero. Each card explains one benefit: speed, creativity, iteration. Do not redesign the existing hero."

SAY / DO:

"Now the most useful thing I'll give you all afternoon. There's a four-part shape to a good prompt, and I'm going to explain it using a tailor, because I'm fairly confident that every single person in this room has at some point been let down by a tailor. You walk in and you say, "stitch me a kurta." That is the action: what you want done. Then you say, "it's for my son, for the wedding next month." That's the target: who it's for, where it applies. Then you say, "full sleeves, and keep it loose, he doesn't like it fitted." That's the constraint: the limits you're setting. And then there's a fourth sentence, and it's the one that almost nobody remembers to say out loud. "And don't touch the trousers I gave you last week." ... You know exactly what happens when you leave that sentence out. You've lived it. He gets creative. He decides to be helpful. He improves something you never asked about, and you come back on Friday and the trousers have been taken in two inches and now nothing fits. That fourth sentence is what we're going to call the preservation rule. And Lovable is a very fast, very willing, slightly over-eager tailor. It genuinely wants to help you. So if you don't tell it what to leave alone, it will improve things you didn't ask about. Look at the example along the bottom of the slide: "add a three- card section below the hero, each card explains one benefit, do not redesign the existing hero." All four parts are sitting in there. And two quick translations while we're here. A CTA, which you'll see written everywhere, just stands for call-to-action. It's the main button, the one thing you want somebody to press. And a three-card section is literally three boxes in a row. That's all it means. Before we go any further, write these four words

down: action, target, constraint, preservation. They'll work on every AI tool you ever touch, not just this one”

HOOK / QUESTION:

"Cover the last sentence of the strong prompt with your finger. Now uncover it. How does that one sentence change what Lovable will do?"

⏰ TIME CHECK:

4 minutes.

⚠️ COMMON MISCONCEPTION:

"Just describe what you want, more detail is better." Length is not quality. Four parts are. A specific 3-sentence prompt with all four parts beats a rambling paragraph.

🗣 VOCABULARY NOTE:

If learners look puzzled at "hero" or "CTA," clarify out loud: "Don't worry about the words yet — they're just example placeholders for sections of a website. A hero is the big top section, a CTA is the main button. What matters on this slide is the last sentence: the preservation rule."

10 of 22

CHAPTER 2 · CORE PRINCIPLE

One Prompt, One Action.

Small prompts beat one giant prompt. Every time.

❌ One Giant Prompt

"Build me an app with a hero, carousel, login, dashboard, animations, a database, and dark mode in one shot."

Lovable guesses. Generates a sprawling mess. One follow-up wipes out what worked.

✅ One Prompt, One Action

"Add a hero banner with headline, subheadline, and one CTA button. Do not add other sections yet."

Lovable produces a clean, scoped output. Easy to review. Easy to build on.

🔄 THE WORKFLOW LOOP

Prompt

→

Generate

→

Inspect

→

Test

→

Improve

→

Commit

SAY / DO:

"This is the core principle of the session. The AI predicts from your prompt plus the current code. Smaller prompts give it less to guess about, and they protect what's already working.

Here's the mistake everybody makes on day one, and it's a completely understandable one. The tool is powerful, so you ask it for everything at once. "Build me an app with a hero, a carousel, a login, a dashboard, animations, a database and dark mode." And it will give you something. It'll look impressive for about forty seconds. And then you ask for one small change and it rewrites the whole thing, and the one bit you actually liked has disappeared. It's the difference between telling a contractor "renovate my house" and telling him "paint this one wall, and don't touch the kitchen."

OPTIONAL (time permitting)

Now I want to give you the evidence for this, because it's the reason I teach it the slow way instead of the fast way. Last July a research group called METR ran a proper randomised trial: sixteen experienced developers, two hundred and forty-six real coding tasks, half of them allowed AI tools and half not. Before they started, those developers predicted that AI would make them twenty-four per cent faster. They came out nineteen per cent slower. And here's the part I really want you to hold on to. Afterwards, having actually lived through it, they still believed AI had sped them up by twenty per cent. They could not feel the slowdown while it was happening. Now, don't take the wrong lesson from that. Those were expert engineers working on enormous, messy systems they already knew inside out, and that's a much harder situation than the one you're in today. But the thing that got them is the same thing that'll get you. It moves fast, it feels productive, and you stop checking.

The rule for this afternoon is the one on the screen: one prompt, one action. Keep every step small enough that you can glance at the screen and tell within five seconds whether it did the right thing. And look at the loop along the bottom: prompt, generate, inspect, test, improve, commit. Notice that only one of those six steps is typing. The other five are looking”

HOOK / QUESTION:

"Predict: which of these two prompts is more likely to produce something you can actually keep building on? Why?"

⏰ TIME CHECK:

3 minutes.

⚠️ COMMON MISCONCEPTION:

"If I write a detailed prompt the AI will figure it out." Detail is fine; scope is what matters. A small, specific prompt with the four formula parts always beats a long unscoped one.

11 of 22

CHAPTER 2 · THE PROMPT FORMULA

Plan, then prompt.

Small prompts only work if you know what you're building next.

Hero banner

→

Navbar + CTA

→

Three-card section

→

Contact form

→

Display on submit

Fade-in animation

→

💡 THE PLAN

Your app today. Six features, six prompts. We'll build them in this order, one at a time. The plan is what makes small prompts possible.

SAY / DO:

"Before any prompt, you list what you're going to build. Then you prompt them one at a time, with all four formula parts. The order matters. The plan matters. Look at this: six features, six prompts. That is your app today."

If you have pre-built the demo app in your own Lovable project, switch to your browser tab now and show it on screen for about 30 seconds: "Here's what the finished version looks like — same six features, all built in Lovable, one prompt at a time. By the end of today, you will have your own version of this. Two practical points before we start building. First, every prompt you send costs a credit, and on the free plan you get five a day, and a big prompt can eat two of them on its own. So please don't experiment yet. Just send the prompts that are on the screen. At the end I'll tell you when you're free to play, and by then it won't matter if you run out. Second, you don't have to build a coding club. If you'd rather build a page for your business, or for a Jamatkhana event, or for your daughter's tuition class, please do. Same six prompts, your content.”

HOOK / QUESTION:

"Look at the plan. Which feature do you think depends on another? Why might the order matter?" Take 2 quick answers. Surface that the form depends on the hero existing, that animation depends on cards existing, that you cannot animate something that is not on the page yet.

⏰ TIME CHECK:

3 minutes.

⚠️ COMMON MISCONCEPTION:

"I'll just plan as I go." That does not work in vibe coding. Lovable predicts from your prompt plus the current code on the page. If you have not decided what comes next, you will prompt yourself into corners. Plan first, prompt second.

12 of 22

CHAPTER 3 · LIVE DEMO → YOU BUILD

🎬 Lesson 1 · Hero Banner

Live demo, then your turn. Same prompt structure, your project.

⏱

10 min demo · 17 min practice

Type into Lovable:

"Create a single-page app for a student coding club."

Add the constraint:

"Add a hero banner with a headline, subheadline, and one call-to-action button."

Lock the scope:

"Do not add any other sections yet."

💬 TRAINER NOTE

Type slowly. Hit send. Stay silent while Lovable generates — let learners watch the workflow loop happen.

BEFORE YOU BEGIN:

Have your Lovable account open with a fresh project ready. Backup screenshots from Section 05 Demo Scripts downloaded offline.

SAY / DO:

"Right. Before I type anything, one promise. Nothing you do in the next two hours can break anything. There's no file to lose, nobody is watching your screen, and if it goes wrong you type another sentence and it goes right. The worst thing that can possibly happen to you this afternoon is a slightly odd-looking webpage. That is the entire risk. So watch my screen. I'm typing this slowly, and I'm deliberately not pasting it, because I want you to see that it's just an ordinary English sentence. "Create a single-page app for a student coding club." And now I'm going to press enter, and then I'm going to stop talking for about a minute. Watch the screen, not me.

... Alright. It's given us a page. I never told it what the layout should be, so it invented one, and that's fine for a

first pass. Now watch what I do next, because this is the pattern for the whole afternoon. "Add a hero banner with a headline, subheadline, and one call-to-action button.Do not add any other sections yet." ... There it is. Big line of text. That's the headline. Smaller line underneath it. That's the subheadline. And one button. That is a hero. You now know what a hero is because you've watched one appear. And one more, and this is the important one. Notice how little happened. Nothing dramatic at all. That's a good prompt doing its job quietly. That's me telling the tailor to leave the rest alone. Now it's your turn. You've got twelve minutes, the same prompt, and pick whatever subject you like. The two people walking around are here to help you get unstuck, not to take over your laptop.”

HOOK / QUESTION:

After Lovable finishes: "What do you notice?" Take 2-3 observations. Point at "Do not add any other sections yet" and ask why it mattered.

⏰ TIME CHECK:

10 minutes demo + 17 minutes learner practice. Total 27 min.

⚠️ COMMON MISCONCEPTION:

New trainers narrate while Lovable generates. Don't. Let learners watch the workflow loop happen in real time. Speak only after the output finishes.

13 of 22

CHECK FOR UNDERSTANDING · TEMPERATURE READ

Quick check.

Temperature read before we add the second prompt. Don't move on if more than a third are thumbs sideways.

👍

Thumbs up

Your hero appeared with headline, subheadline, and one CTA.

👎

Thumbs sideways

Lovable added extras you didn't ask for.

✋

Hand up

You're stuck on the prompt itself. We'll come to you.

SHARE-OUT

Read your CTA button text out loud. Anyone want to share?

SAY / DO:

Thumb-check the room. Don't move on if more than a third are thumbs-down or sideways. Reset with a remodel before moving to Lesson 2.

Thumbs up if your hero appeared the way mine did: headline, smaller line underneath, one button.

Thumbs sideways if it worked, but it also added a load of things you never asked for.

And hand flat up in the air if you're stuck on the prompt itself and you'd like one of us to come over.

... Okay. For those of you who got extra sections you didn't ask for, that's actually good. That's the tool being an eager tailor, exactly like we said it would be. Type this and send it: "Remove everything except the hero banner. Do not change the hero." That's a preservation phrase doing repair work instead of prevention, and it's a genuinely useful thing to have in your back pocket. Before we move on, would two or three of you read out the text on your button? Just the words on it. ... That right there is the first time that something you said out loud got turned into a working thing by a machine, because you asked for it.”

HOOK / QUESTION:

"Who wants to read their CTA button text aloud?" Take 2 or 3 share-outs. Reset energy before the next demo.

⏰ TIME CHECK:

3 minutes. Buffer time — use it to reset and pace.

14 of 22

★ LOAD-BEARING DEMO · THE MOST IMPORTANT PATTERN OF THE SESSION

🎬 Lesson 2 · Navbar + Preservation

Two prompts back to back. Watch what the second sentence of Prompt B does.

⏱

10 min demo · 18 min practice

The navbar

"Add a navigation bar with a logo on the left and three links on the right: Home, Projects, Contact."

The second CTA, preserved

"Add a second button in the hero section called 'View Projects.' Keep the existing button unchanged. "

🛡

THE PRESERVATION PHRASE DOING THE WORK

"Keep the existing button unchanged" — that single sentence is the difference between an app you can keep building and an app that gets rewritten on every prompt.

SAY / DO:

"If you drift off for one part of today, please don't let it be this one. Everything else we do is a variation on the next few minutes. First prompt: "Add a navigation bar with a logo on the left and three links on the right: Home, Projects, Contact." ... Good. Navbar across the top, logo on the left, three links on the right. And notice the hero is still sitting there untouched. Now, I want to add a second button to the hero, and I have a choice about how to ask for it. If I just say "add a second button called View Projects," then I'm giving the tailor a free hand in a place where I already have work I care about. It might rearrange the hero. It might restyle the first button so the two of them match. It might quietly reword my headline. So I'm going to add one more sentence, and I want you to watch that second sentence carefully. "Add a second button in the hero section called View Projects. Keep the existing button unchanged."

HOOK / QUESTION:

"Predict: what happens to your hero if you forget the second sentence?" Take 2 predictions, then run the prompt without preservation as a counter-demo if time permits.

⏰ TIME CHECK:

10 min demo + 18 min learner practice (Lessons 2 and 3 combined).

⚠️ COMMON MISCONCEPTION:

Learners think preservation phrases are optional. They're not. They're the difference between an app you can keep building and an app that gets rewritten on every prompt. Drill this hard on Lesson 2.

15 of 22

CHAPTER 4 · YOU BUILD

🛠 Lesson 3 · Three-Card Section

Speed, creativity, iteration — one card each. Hero and navbar stay untouched.

⏱

8 minutes

Type into Lovable:

"Add a three-card section below the hero. Each card should explain one benefit of learning vibe coding: speed, creativity, and iteration."

Look for:

Three cards in a row, hero and navbar untouched.

If anything above the cards shifts, add and rerun:

"Do not redesign the page."

💬 DISCUSSION

What benefit would you put on a fourth card?

SAY / DO:

"This one's quicker, because you've got the pattern now. Three boxes in a row, each with a heading and a sentence: speed, creativity, iteration. Iteration, by the way, just means doing something again slightly better. Going round the loop one more time. That's all the word means. So type the prompt that's on the screen, wait for it, and then I want you to inspect it properly this time. Don't just look at the new cards. Look above the cards. Is your hero still where you left it? Is your navbar the same as it was? Because if anything above the cards has shifted, you already know the repair prompt: "Do not redesign the page." Add that and run it again. And while you're working, have a think about this one. If there were a fourth card, what would you put on it? I'll come round and ask a few of you.”

HOOK / QUESTION:

If a learner's hero shifts when the cards drop in, that's your teaching moment. Pull it up on screen and ask the room: "What phrase would have prevented that?"

⏰ TIME CHECK:

8 minutes. If a learner finishes in 3, they likely skipped preservation. Walk over and check.

16 of 22

CHAPTER 4 · YOU BUILD

🛠 Lesson 4 · Contact Form

Front-end only. We wire data in 201, not today.

⏱

8 minutes

Type into Lovable:

"Add a simple contact form with name, email, and message fields. Do not connect it to a database yet. "

Look for:

A form with three fields plus a submit button. No backend wiring.

Notice the constraint:

"Do not connect it to a database yet" keeps it simple while you learn the pattern.

💬 DISCUSSION

Why might "not yet" be a useful phrase to keep in your toolkit?

SAY / DO:

"Next one is a contact form: three boxes you type into, name, email and message, plus a submit button. But I want you to look at the second sentence of this prompt, because it's another preservation rule wearing a different hat. "Do not connect it to a database yet." A database, by the way, is permanent storage. It's the thing that still has your information next month. We are deliberately not building one today. And notice that the word isn't "never," it's "yet." That little word is doing a lot of work. It tells the tool where today's boundary sits without pretending the boundary is permanent. Which, honestly, is a useful phrase to keep in your pocket generally. "No" ends a conversation. "Not yet" schedules one. It works on the machine, and it works reasonably well on people too. Go ahead and build it. You've got about eight minutes."

⏰ TIME CHECK:

8 minutes.

⚠️ COMMON MISCONCEPTION:

Many learners assume forms need a database to work. They don't, not at this stage. We're staying front-end through Lesson 5.

17 of 22

CHAPTER 4 · YOU BUILD

🛠 Lesson 5 · Display on Submit

Front-end state only. Then refresh — and watch it disappear.

⏱

7 minutes

Type into Lovable:

"When the form is submitted, display the submitted message below the form using front-end state only. Do not use a backend or database."

Test it:

Type into the form. Click submit. Message appears below.

Then refresh the page:

It's gone. That's front-end state — no permanent save.

💬 DISCUSSION

What's the difference between "state" and "database" in your own words?

SAY / DO:

"Submit your form. Watch the message appear. Then refresh the page. It's gone. That's front-end state.

Build this one first, and then I'll explain what you built. The prompt's on the screen. When the form is submitted, show the message underneath it, using front-end state only. Type it, run it, and then actually test it. Type something into your form and click submit, and the message should appear below. ... Has everybody got that? Good. Now everybody refresh the page. Just hit refresh. ... And it's gone. Your message has vanished completely. And that's not a bug. That is precisely what we asked for. So here's the distinction, and it's one of maybe three ideas worth carrying out of this room today. Front-end state is a whiteboard. You write on it, everybody in the room can see it, it's genuinely useful. And you wipe it, and it's gone, because nothing was ever really saved. A database is the permanent place where it can store data persistently. It's still there next week, next month, when your accountant asks for it. Right now your form writes on a whiteboard, and refresh is the duster. You'll get the register in the 201 session. Today the whiteboard is the right choice, because you can build one in a single sentence and learn the pattern from it. A register needs real decisions about privacy and storage and who's allowed to read what, and those decisions deserve an afternoon of their own."

⏰ TIME CHECK:

7 minutes.

⚠️ COMMON MISCONCEPTION:

Learners often want to "save" the message. We're not saving, we're displaying. Save is a database concept that belongs in 201.

18 of 22

CHAPTER 4 · YOU BUILD

🛠 Lesson 6 · Fade-in Animation

This is where preservation phrases earn their keep.

⏱

8 minutes

Predict first:

What might Lovable change if you dropped the second sentence?

Then type:

"Add a subtle fade-in animation to the feature cards only. Do not change layout, text, or form behavior. "

Watch:

Cards fade in on load. Everything else stays untouched.

💬 DISCUSSION

If your form changed anyway, what phrase would you add to your prompt?

SAY / DO:

“Last feature, and this is where preservation phrases really earn their keep. Before anybody types anything, I want you to predict something for me. If I dropped the second sentence out of this prompt, what do you think Lovable might change that I never asked it to? ... Yes. And yes, that too. You've all learnt this the hard way over the last hour, which is exactly why I'm asking you and not telling you. So here's the prompt: "Add a subtle fade-in animation to the feature cards only. Do not change layout, text, or form behavior." There are two limits sitting in that one sentence. "Cards only" is the constraint. "Don't change layout, text or form behaviour" is the preservation rule. And notice that by your sixth prompt, you're writing both of those without anybody telling you to. That is the whole reason we're here. Run it, then reload the page so you can actually see the cards fade in. And if your form broke anyway, say so, because that's a useful thing for the rest of the room to hear."

HOOK / QUESTION:

Before they hit send: "Predict what would happen if you only typed the first sentence of that prompt." Let them predict, then run.

⏰ TIME CHECK:

8 minutes.

19 of 22

CHAPTER 5 · PAIR ACTIVITY

🤝 Pair share: what did Lovable rewrite?

Two rotations. 2.5 minutes per side. Same three shares, fresh ears.

⏱

10 minutes

YOUR BUILD

Show your app to your neighbor.

WHAT LOVABLE REWROTE

Name one moment Lovable changed something you didn't ask for.

PRESERVATION PHRASE

Name the phrase you'd add next time to prevent that rewrite.

ROTATION 1

2.5 min · A shares

→

2.5 min · B shares

· switch partners ·

ROTATION 2

Same shares, fresh pair

20 of 22

RECAP · THREE THINGS TO REMEMBER

Three things to remember.

🎯

One Prompt, One Action

Small, scoped prompts beat one giant prompt. Every time.

📐

The prompt formula

Action + Target + Constraint + Preservation Rule. All four parts, every time.

🛡

Preservation phrases protect your work

"Do not redesign the page"

"Keep existing functionality unchanged"

"Make the smallest change possible"

21 of 22

Everyone Can Code · AI TRAINING HUB

OPEN Q & A

Questions?

Open Lovable tomorrow. Add one feature. One prompt at a time.

SAY / DO:

"Open Q&A. If it's quiet, seed with: 'A question I get asked a lot is, what do you do when Lovable starts redesigning your page?'"

“You can also show some sample websites like the one below. They all started in lovable and moved to Codex/Claude. Lovable is good for prototyping, and it is possible that new upgrades on the platform might bring your site down, so it is important to use lovable as a quick prototype of your idea and move to a more stable deployment model. In 201 and 301 courses, we will be looking at how to include a database at the backend to preserve data and user preferences etc. We will also be looking at how to transfer the code generated by lovable to github and then to vercel for continuous deployment. Those are some interesting enhancements that are coming up very soon. So stay tuned.”

HOOK / QUESTION:

Final share: "What's the first thing you'll add to your app tomorrow?" Take 3-4 quick responses. End on time or slightly early.

⏰ TIME CHECK:

4 minutes.

1 of 22

2 of 22

3 of 22

4 of 22

5 of 22

6 of 22

7 of 22

8 of 22

9 of 22

10 of 22

11 of 22

12 of 22

13 of 22

14 of 22

15 of 22

16 of 22

17 of 22

18 of 22

19 of 22

20 of 22

21 of 22

22 of 22