Five real things worth building, each with the exact first prompt, the three tweaks you'll likely need, how to put it live, and how it grows your email list. Open one, copy, fill the cerise blanks, build.
VIBE CODING · 04
How to use this lesson
Every project follows D.R.I.V.E. Paste the first prompt into your rung-one chat tool (Claude + Artifacts), inspect what you get, then use the three tweak prompts as needed. The [cerise blanks] are yours to fill. Do just one this weekend — the quiz is the highest-payoff place to start.
01The quizHIGHEST ROI
"Which [your niche] type are you?" — a personality-style quiz that ends in an email opt-in. The single highest-payoff build for a business owner: fun to share, and it grows your list on autopilot.
The first prompt
Build the quiz
Paste this to start. Fill the blanks; keep it simple.
Build me a mobile-friendly personality quiz as an Artifact. Simplest working version first.
WHAT IT IS: a "Which [niche] type are you?" quiz with 5 questions.
WHO USES IT: [my audience].
RESULTS: sort each person into one of these types — [Type A, Type B, Type C] — based on their answers.
LOOK: warm, clean, one question on screen at a time, a progress dot at the top.
THE ENDING: after the last question, show a friendly "Your result is loading — enter your email to see it" screen with a single email box and a button. Then reveal their type with a short, flattering description and one next step.
Make it work well on phones. When done, explain what you built and how I'd share it.
The three tweaks you'll likely need
Tweak 1 · fix the feel
First versions are usually a little clunky.
Two things: make the buttons bigger and easier to tap on a phone, and add a little animation when moving between questions so it feels smooth. Keep everything else the same.
Tweak 2 · the results copy
The result is what gets screenshotted and shared.
Rewrite each result description to be warmer and more specific — 2–3 sentences that make the person feel seen, plus one line suggesting [my offer or next step]. Here's my brand voice: [paste a sentence or two you've written].
Tweak 3 · the email capture
Make sure the opt-in actually behaves.
Make the email step required before the result shows, validate that it looks like a real email, and after they submit, show a short thank-you plus their result. Don't lose their answer if they mistype the email the first time.
Put it live
On rung one, use your tool's Share/Publish on the Artifact to get a public link, then drop that link in your Instagram bio, a story, or a pinned post. Want it on your own domain? Rebuild the same idea on rung two (Hostinger Horizons) or three (Lovable) using the exact prompts above.
How it feeds your list
The email step is the whole point — every quiz-taker becomes a subscriber, tagged by their result type. Lesson 5 shows how to wire that email box to MailerLite so entries land in your list automatically instead of getting stuck in the tool.
02The calculatorSHAREABLE
A pricing, profit, or savings calculator your audience bookmarks and shares — the kind of genuinely useful tool that quietly positions you as the expert.
The first prompt
Build the calculator
Paste to start.
Build me a mobile-friendly calculator as an Artifact. Simplest working version first.
WHAT IT IS: a [pricing / profit / savings] calculator for [who it's for].
INPUTS: [list the 2–4 numbers the user types in].
THE MATH: [explain in plain English how the result is calculated].
THE RESULT: show one clear number, big, with a one-line plain-English explanation of what it means.
LOOK: clean and warm, easy to read, works on a phone.
When done, explain the formula you used so I can check it's right.
The three tweaks you'll likely need
Tweak 1 · check the math
Always verify the numbers yourself.
Walk me through the calculation with this example: if the inputs are [example numbers], show me every step and the final result so I can confirm it matches what I'd get by hand.
Tweak 2 · guard against bad input
Real people type weird things.
Handle empty or non-number inputs gracefully — show a gentle "please enter a number" message instead of breaking or showing NaN. Don't let anyone divide by zero.
Tweak 3 · add the soft CTA
Turn a helpful tool into a list-builder.
Under the result, add a small line: "Want [a related freebie or my help]? Pop in your email." Keep it optional and low-key — the calculator still works without it.
Put it live
Publish the Artifact for a share link, or embed it on a page of your existing site (most site builders accept an embed/HTML block). A calculator lives happily as its own linkable page you point people to from posts and emails.
How it feeds your list
The optional email line captures the warmest people — the ones who found real value. Even without it, a shared calculator drives traffic back to your site, where your other opt-ins do the catching.
03The mini-directoryAUTHORITY
A filterable resource page — your favorite tools, supplies, or vendors — that upgrades a boring blog list into something people actually use and return to.
The first prompt
Build the directory
Have your list of items ready to paste.
Build me a mobile-friendly, filterable resource directory as an Artifact. Simplest working version first.
WHAT IT IS: a page of [my favorite tools / supplies / vendors] for [my audience].
THE ITEMS: [paste your list — for each: name, one-line description, a category, and a link].
FILTERING: let people filter by category with simple buttons or a dropdown, and search by name.
LOOK: clean cards in a grid, warm and readable, works on a phone.
When done, tell me how to add or edit items later.
The three tweaks you'll likely need
Tweak 1 · make editing easy
You'll add items over time.
Put all the items together in one clearly-labeled list at the top of the code so I can add or edit entries by copying the pattern, without touching anything else. Show me exactly where.
Tweak 2 · the empty state
Filters can return nothing.
When a filter or search returns no matches, show a friendly "Nothing here yet — try another category" message instead of a blank page.
Tweak 3 · label your picks
A little personality builds trust.
Add a small "★ my pick" badge option to items I mark as favorites, and let me add a one-line personal note to any item explaining why I recommend it.
Put it live
This is a natural fit for its own page on your site (rung two hosts it at your domain), or publish the Artifact and link it from your "Resources" or "Shop my favorites" navigation.
How it feeds your list
Gate a "printable version" or "the full vendor list with my notes" behind an email opt-in at the top of the directory — the people browsing your recommendations are exactly the audience worth capturing.
04The landing pageLIVE TONIGHT
A waitlist or launch page with a sign-up form — built and live in an evening. The fastest way to start collecting interest before a thing even exists.
The first prompt
Build the landing page
Great candidate for rung two (a real hosted site).
Build me a mobile-friendly waitlist landing page. Simplest working version first.
WHAT IT'S FOR: [the thing people are joining the waitlist for].
WHO IT'S FOR: [my audience].
SECTIONS: a headline + one-line promise, 3 short benefit points, and an email sign-up with a button that says [Join the waitlist]. After they sign up, show a warm thank-you.
LOOK: warm neutrals, generous white space, editorial and calm — not busy. Works beautifully on a phone.
When done, explain how to publish it and connect the email box to my list.
The three tweaks you'll likely need
Tweak 1 · the headline
The one thing people actually read.
Give me 5 headline options for this page — clear over clever, focused on the benefit to [my audience]. Then use the one I pick.
Tweak 2 · social proof slot
Even a little builds trust.
Add a small, tasteful spot under the sign-up for one short quote or a "join [number] others already on the list" line. Make it easy for me to edit the text.
Tweak 3 · make it yours
Kill the generic-template look.
Use these brand colors: [hex codes] and this feel: [e.g. "calm, editorial, like a quiet luxury magazine"]. More whitespace, bigger type, fewer boxes. Make it look intentional, not like a default template.
Put it live
Build this on rung two (Hostinger Horizons) so it hosts at your own domain automatically, or publish the Artifact and point a link at it. Either way you'll have a real URL to share tonight.
How it feeds your list
This build is a list-builder — its only job is capturing emails. Connect the form to MailerLite (Lesson 5) so every sign-up becomes a subscriber you can email the moment you launch.
05The client portal liteLOOK EXPENSIVE
A tidy page per client with their links, status, and next steps — the "look like an agency" project that makes a one-woman business feel polished and premium.
The first prompt
Build the client page
Start with one client page as the template.
Build me a clean, mobile-friendly "client portal" page as an Artifact. Simplest working version first — just one client's page as a template I can reuse.
WHAT IT IS: a private-feeling status page for a client of my [service] business.
IT SHOWS: a friendly welcome with the client's name, their current project status, a checklist of what's done and what's next, and a set of important links ([e.g. shared folder, invoice, booking link]).
LOOK: calm, premium, warm neutrals, lots of white space — like a boutique studio, not a spreadsheet. Works on a phone.
When done, explain how I'd duplicate this for a second client.
The three tweaks you'll likely need
Tweak 1 · the status clarity
Clients mostly want to know "where are we?"
Make the current status impossible to miss — a clear labeled banner at the top ("In progress · next step: [thing]") with a simple progress indicator. Keep the rest calm underneath.
Tweak 2 · easy to reuse
You'll make one per client.
Put everything client-specific — name, status, checklist items, links — into one clearly labeled block at the top so I can duplicate the page and just swap those details for each new client.
Tweak 3 · a private feel
It should feel like theirs.
Add a simple, friendly note that this page is just for them, and a "questions? reply to my email or book a call here: [link]" footer. Nothing technical — just warm and reassuring.
Put it live
Publish each client's Artifact and send them the private link. For something sturdier with real logins, this is the ⚠️ project that justifies climbing to rung three (Lovable) — but a shared private link is plenty to start and looks just as expensive.
A word on data
Keep it to status, links, and next steps. Do not put passwords, payment details, or sensitive client information on a rung-one page — Lesson 5 covers exactly what's safe to include and what isn't.