What to Build
Pick a school. Sketch the scope. Write it down. The clearer you are now, the less you fight Lovable later.
The single biggest predictor of a good vibe coding session is knowing what you want before you start. Not knowing every pixel — but knowing the school, the tone, the rough pages.
Spend 15 minutes on this page. Write down your answers on paper or in a Notes file. You will paste pieces of these notes into Lovable repeatedly.
Step 1 — Pick a School
You have three options:
Option A — A school you already know. Your own school. Your child's school. A school you have visited. The advantage is real photos, real branch names, real programmes.
Option B — A school you want to start. If you are seriously thinking of running a school, this is a free way to see what the front door would look like.
Option C — A fictional school. Invent one. This is what most trainees do. Pick a name, a city, two or three branches. Use this fictional school for Projects 1, 2, and 3 so each project builds on the last.
Step 2 — Fill In the Basics
Write down, in plain words:
Example, fully filled:
This becomes the seed for almost every prompt you write.
Step 3 — Pick a Vibe
Lovable does its best work when you give it a tone, not just facts. Pick two or three adjectives and one reference.
Useful adjective pairings:
| Style | Adjectives | Reference example |
|---|---|---|
| Friendly, modern | warm, optimistic, clean | linear.app, notion.so |
| Premium, traditional | elegant, established, calm | balliol.ox.ac.uk |
| Playful, parent-friendly | bright, joyful, approachable | bobbie.com |
| Authoritative, academic | precise, scholarly, restrained | stripe.com (for layout) |
Aurora Public School example: "warm, modern, parent-friendly. Feel inspired by stripe.com layout but more colourful."
Step 4 — Sketch the Pages
For Project 1 the minimum is one page with four sections. The recommended scope is three pages. Don't go beyond five.
Minimum (one-pager):
- Hero — name, tagline, CTA
- About — 2-3 paragraphs
- Branches — short list with addresses
- Contact — phone, email, area
Recommended (three pages):
- Home — hero + 3-line about + featured branch + admissions CTA
- Branches — card per branch with photo, address, phone
- Admissions — steps, eligibility, contact form (visual only, doesn't submit)
Stretch (four-five pages):
Add About (longer story) and Gallery (photo grid).
Step 5 — Decide on Photos
Lovable can generate placeholder images, but the site looks 10× better with real or stock photos.
Best sources (all free, no attribution required):
- Unsplash —
unsplash.com/s/photos/school— high-quality real photos - Pexels —
pexels.com/search/classroom— similar - Pixabay — broader, more graphical
Spend 10 minutes downloading 5–8 photos to a folder. You will upload them to Lovable when prompts ask for images.
What to download:
- 1 hero shot (children + a classroom, wide aspect)
- 2-3 building or campus exteriors (one per branch)
- 1 classroom interior
- 1 close-up of activity (art, sports, robotics — whatever matches your school's notable feature)
Step 6 — Write Down What You Are Not Going To Build
This is the most-skipped step and the most useful one.
For Project 1, write down explicitly:
When Lovable asks "do you want me to add a login screen?" you say no. When the AI suggests an admissions database, you say no. The site for Project 1 is a brochure made of pixels, not an application.
You will build the application part in Projects 2 and 3, on the right stack, properly.
Step 7 — Open Lovable
You should now have, on one page:
- School name + tagline + branches + year + type + notable feature
- Three vibe adjectives + one reference site
- Page list (1, 3, or 5)
- A folder of 5-8 photos
- A "not in scope" list
That is the entire creative brief. Keep it open in a separate window while you work in Lovable.