Self-Study Module

Vibe Coding for Entrepreneurs

Between Workshop 2 & 3 · ~3.5 h · 100% free tools

Welcome — turn an idea into a working prototype, by yourself

3.5 h
total time
8
sections
5
hands-on exercises
0 €
tools cost

Who this is for & what you will be able to do

Who: students in the Entrepreneurship and Innovation course who completed Workshops 1 and 2 and are preparing for Workshop 3. No coding experience expected.

Outcome: turn an idea into a working, shareable web prototype by yourself, in under 2 hours, using only conversation with AI.

"The hottest new programming language is English." — Andrej Karpathy, who coined the term "vibe coding" in early 2025

Module flow at a glance

1
The Concept of Vibe Coding
Definition, why it matters, when to use it.
15 min
2
The Six Pillars
The ideas every vibe coder must master.
20 min
3
The Tools (Free-Only Tour)
5 categories, 25+ tools, scenario-based recommendations.
20 min
4
The Vibe-Coding Workflow
The 5-step loop, the prompt template, worked examples.
15 min
5
8 Application Scenarios
Landing pages, concierge MVPs, dashboards, classroom tools.
10 min
6
5 Hands-On Exercises
Run the loop 5 times so the muscle forms.
2 h 15 min
7
Tips, Tricks & Pitfalls
10 tips, 5 traps, 3 must-memorise prompt patterns.
10 min
8
Pre-Workshop 3 Checklist
Accounts, practice, understanding, day-of kit.
5 min

Pick your pace

A. Intensive

Read sections 1–5 over coffee, then do all five exercises in one 2-hour block.

B. Relaxed (one week)

Sections 1–2 on day 1, sections 3–5 on day 2, one exercise per day for five days.

C. Short on time

Read sections 1, 4 and 7. Do exercises 1, 4 and 5.

Golden rule of self-study: Do the exercises. Reading about vibe coding without doing it is like reading about swimming.

5-minute setup before you start

  1. 1
    Create a free Claude.ai accountanthropic.com/claude — fastest path to working prototypes.
  2. 2
    Create a free Bolt.new accountsign in with Google; needed for Exercise 4.
  3. 3
    Create a free GitHub accountneeded for Workshop 3 deployment.
  4. 4
    Open a notes file2–3 sentences of reflection after each exercise is required for Workshop 3.
Section 1 of 8

The Concept of Vibe Coding

~15 minutesReading
Goal: Be able to define vibe coding, explain why it matters for entrepreneurs, and recognise when it is the right tool.

Definition

What is vibe coding?

Vibe coding is the practice of building software by describing intent in natural language to an AI model, accepting most of the generated code without manually reviewing every line, and iterating through conversation until the result feels right.

The term was popularised by AI researcher Andrej Karpathy in early 2025. It formalises a new division of labour: the human is the product owner, the AI is the implementer, and the interface between them is plain language.

Why it matters for entrepreneurs

Three things have always stood between a founder and a testable prototype: time, money, and technical skill. Vibe coding collapses all three.

Time

What used to take two weeks now takes two hours.

Money

You do not have to hire anyone to validate an idea.

Skill

The bottleneck moves from syntax to problem framing, which entrepreneurs are already trained in.

Vibe coding vs. traditional coding vs. no-code

TraditionalNo-codeVibe coding
InputSyntaxDrag-and-dropNatural language
FlexibilityUnlimitedTemplate-limitedVery high
Learning curveMonthsDaysHours
Best forProductionMarketing sitesMVPs, tests, tools
Mindset shift: You are not learning to code. You are learning to direct a fast junior developer who never sleeps but sometimes invents things. Your skill is precise description.

When to use and when not

Great for

Landing pages, waitlists, smoke tests, internal tools, dashboards, calculators, classroom aids, MVPs, idea validation.

Proceed carefully

Anything with real user accounts, payments, or regulated data. Prototype it — but get an engineer before launch.

Wrong tool for

Mission-critical systems, medical devices, financial infrastructure.

Knowledge Check 1

Q: A friend wants to test whether students would pay for a "rent a lab partner" app. Is vibe coding appropriate?

A: Yes — this is the smoke-test use case. Build a landing page with a signup form in under an hour, share it, and measure interest before investing in a full build.

Section 2 of 8

The Six Pillars of Vibe Coding

~20 minutesReading + reflection
Goal: Name the six core topics, explain why each matters, and recognise which pillar is failing when a build goes wrong.

The six pillars at a glance

1. Intent & Specification

Describing clearly what the software should do, for whom, and what "done" looks like, before worrying about how.

2. Prompting

Writing effective instructions: role, context, task, constraints, examples, output format.

3. Context Management

Knowing what the AI can see and when to start fresh versus continue.

4. Iteration Loops

Run, observe, describe the gap, ask for a fix. Small loops beat big prompts.

5. Testing by Description

Say "when I click X, nothing happens" instead of fixing the code yourself. The AI is the debugger.

6. Deployment & Sharing

Getting your work out of the preview and onto a URL that real users can open.


Pillar 1 — Intent and Specification

Most failed sessions fail here, before any code is written. A good specification names the user, the key actions, and the success signal.

Test: if you can finish the sentence "A [user] opens this to [do action] and leaves feeling [emotion]", you are ready to prompt.

Pillar 2 — Prompting

Prompts are briefings, not questions. Give the AI four things: Role, Context, Task, Constraints. "Build me a study buddy app" is a question. "You are a senior frontend developer. Context: a stressed first-year student on a phone. Task: build a single-page waitlist form with a counter. Constraints: single HTML file, under 200 lines, mobile-first" is a briefing.

Pillar 3 — Context Management

AI models have a "window" — a limited amount of text they can hold in mind. Over a long chat, older context becomes stale. Symptoms: the AI forgets, re-introduces bugs, contradicts itself.

Remedy: start a new chat, paste the current code, re-establish the brief. This is not failure — it is hygiene.

Pillar 4 — Iteration Loops

Professionals never try to get everything right in one prompt. They aim for a working (ugly) version in 5 minutes, then refine. One change per iteration.

Pillar 5 — Testing by Description

You do not need to read code. You need to use it. Click every button. Try weird inputs. Open it on your phone. Then describe what you observed, not what the code should do.

Pillar 6 — Deployment and Sharing

A prototype that only works on your laptop cannot validate anything. Use one free deploy button (Vercel or Netlify) and send a real URL to real users. See Section 3 for tools.

Knowledge Check 2

Q: You have chatted with Claude for 40 minutes. It keeps breaking a feature and reintroducing the same bug. Which pillar is failing and what do you do?

A: Pillar 3, Context Management. The chat has grown too long. Start a new chat, paste the current working code, write a fresh brief. You will be productive again in minutes.

Default path: Claude.ai plus Bolt.new covers 80% of what you need. Read the scenario stacks below for when to swap.

A — General-purpose chat AI

Claude.aiFREE

Anthropic. Generates "Artifacts" — live previews of web apps in the browser. Best for learning and single-file prototypes.

ChatGPTFREE

OpenAI. "Canvas" mode shows code next to chat. Best for beginners and brainstorming.

Google GeminiFREE

Very generous free context window. Best as a second opinion when another model is stuck.

Mistral Le ChatFREE

European alternative. Solid free tier, good for writing and code.

PerplexityFREE

Research-oriented AI with live web search. Great companion while you build.

DeepSeek ChatFREE

Strong coding model. Generous free usage.

B — Browser "build me an app" tools

Bolt.newFREE TIER

Describe an app, get a working web app with live preview and one-click deploy. Daily token limit on free plan.

Lovable.devFREE TIER

Similar to Bolt. Strong for landing pages and SaaS UIs. Limited daily messages on free tier.

v0.devFREE TIER

From Vercel. Best-in-class for beautiful UI components.

Replit AgentFREE TIER

Cloud IDE that builds full-stack apps with databases. Limited credits on free plan.

Firebase StudioFREE TIER

Google's AI app builder (successor to Project IDX). Full-stack, Google-integrated.

Create.xyzFREE TIER

Quick app generator with a polished UI. Good for SaaS-style prototypes.

C — AI code editors (needed in Workshop 3)

VS Code + Copilot FreeFREE

Microsoft's free editor plus GitHub Copilot Free (around 2,000 completions/month).

CursorFREE TIER

Purpose-built AI editor. Two-week Pro trial, then generous free tier.

Windsurf (Codeium)FREE

Strong free tier. Often free where Cursor starts charging.

ZedFREE

Fast open-source editor with AI hooks. Lightweight alternative.

VoidFREE

Open-source Cursor alternative. Bring your own free API keys.

D — Hosting and sharing

GitHubFREE

Where your code lives on the internet.

VercelFREE

One-click deploy. Connect GitHub, push, site updates in 30 seconds.

NetlifyFREE

Vercel alternative. Equally capable for static sites.

GitHub PagesFREE

Free hosting built into GitHub. Perfect for single-file experiments.

Cloudflare PagesFREE

Generous free tier. Great global performance, simple GitHub integration.

E — Helpful free extras

FormspreeFREE

Turn any HTML form into working email capture. 50 submissions/month free.

Google Forms + SheetsFREE

If you just need answers, skip the code.

Unsplash / PexelsFREE

Free stock photos. Paste as image references in prompts.

Canva FreeFREE

For logos and favicons in 3 minutes.

LoomFREE

Record a demo video of your MVP for submission in Workshop 3.


Scenario-based tool stacks — pick one that matches your project

Instead of one "recommended stack", here are five scenarios with a primary option and competitive alternatives. Use the primary if you want the safest path; try the alternatives if the primary hits a free-tier limit or doesn't fit your style.

Scenario 1 — Single-page interactive tool

e.g. a calculator, quiz, Five Whys form, Crazy 8s timer, Lean Canvas template.

Claude.aiPRIMARYFastest iteration. Download the HTML.
ChatGPT CanvasALTSame workflow, different model.
v0.devALTIf you want a beautiful polished UI.
GeminiBACKUPWhen other free tiers are exhausted.

Scenario 2 — Landing page with email capture

Smoke-test a startup idea. Headline, 3 benefits, form, waitlist counter.

Bolt.newPRIMARYOne-click deploy included.
Lovable.devALTPrettier defaults for founder pages.
v0.dev + VercelALTBest-looking option.
Create.xyzBACKUPAlternative builder if Bolt is full.
FormspreeADD-ONMakes the form actually work.

Scenario 3 — Multi-page app with stored data

Sign-ups, lists, dashboards, a concierge form that routes to a Sheet.

Replit AgentPRIMARYFull-stack including a database.
Bolt.new + SupabaseALTFree DB via Supabase.
Firebase StudioALTGoogle's end-to-end stack.
Google Forms + SheetsBACKUPSkip code entirely if you just need answers.

Scenario 4 — Founder pitch companion / demo

An interactive piece that investors or judges can click during your pitch.

v0.devPRIMARYMost visual polish per minute.
Lovable.devALTSaaS-style UI out of the box.
Claude.ai ArtifactALTFor a one-screen interactive demo.
VercelDEPLOYReal URL you can share in the deck.

Scenario 5 — Classroom / teaching tool

A small interactive aid that ties to a lecture and can be forked by students.

Claude.aiPRIMARYSingle HTML file, instantly shareable.
ChatGPTALTEquivalent workflow.
GitHub PagesDEPLOYFree public URL per student.
Netlify DropBACKUPDrag-and-drop deploy. Zero setup.
How to choose: Start with the PRIMARY option in your scenario. If you hit a daily limit, switch to an ALT. If everything fails mid-class, a BACKUP option will always keep you shipping.

The 5-step loop

  1. 1
    Specify2 to 4 sentences: what, for whom, what "done" means.
  2. 2
    GeneratePaste the brief. Accept whatever the AI gives you on the first pass.
  3. 3
    Run & observePreview, click everything, try to break it.
  4. 4
    Describe the gapIn plain English: what you saw vs. what you wanted.
  5. 5
    LoopRepeat 3–4 until "done enough". One change per turn.

First-prompt template (copy and fill in)

ROLE: You are a senior frontend developer building a prototype. USER: [Who will use this? Be specific about their context.] GOAL: [What will they achieve? One sentence.] KEY ACTIONS (max 3): 1. ... 2. ... 3. ... LOOK AND FEEL: [3 adjectives] CONSTRAINTS: - Single HTML file, no backend, no database - Works on mobile - Only free web fonts OUTPUT: Return the full HTML file I can preview immediately.

Worked example

Workshop 1 idea — study partner matcher

Specify: A first-year student opens this to find a study partner in the same course. Done = they have submitted their email and course, and see a "147 others already on the list" counter.

Follow-ups, one per turn:

  1. On mobile the form is too narrow. Make inputs full-width below 600px.
  2. Add a "join 142 others" counter above the form.
  3. When someone submits, hide the form and show a celebration with their course name.
  4. Add a small FAQ with 3 questions.

Refine vs. restart — the decision table

Refine whenRestart when
Code mostly worksSame bug returns 3+ times
You change one thing at a timeAI contradicts earlier decisions
Each iteration gets closerCode gets longer but worse
Anti-pattern: "Build me a study buddy app." Too vague. The AI guesses, and the guess is generic. Always brief before asking.
Section 5 of 8

Eight Application Scenarios

~25 minutesRead all, pick one for Exercise 4
Goal: Understand 8 real-world use cases through mini case stories. For each: who built it, what problem they solved, the first prompt they used, and what happened. Pick one to build in Exercise 4.
How to read these: Each scenario follows the same structure — the story, the tool path, a starter prompt you can copy, and lessons learned. You do not need all 8. Read the ones closest to your idea and skim the rest.

1. Smoke-Test Landing Page

45 min · Bolt.new or v0.dev · Stage: idea validation

The story. Marta had a hunch that Vilnius dog owners would pay for a neighbourhood dog-walking cooperative. Instead of building the service, she spent 45 minutes in Bolt.new creating a single landing page: a headline ("Never walk alone — find a dog-walking buddy on your street"), three benefit bullets, a fake "237 owners already signed up" counter, and an email-capture form connected via Formspree. She shared the link in two Facebook groups and spent 5€ on an Instagram ad targeting her city. Within 48 hours, 74 people had submitted their email. That was enough signal to move to Scenario 2.

Why this works. You are not building a product. You are building a question: "Do enough people want this?" The landing page is the cheapest possible experiment. If nobody signs up, you saved weeks. If they do, you have a list of early adopters.

ROLE: You are a senior frontend developer. USER: A dog owner in Vilnius, aged 25–40, browsing on their phone. GOAL: They submit their email to join a dog-walking cooperative waitlist. KEY ACTIONS: 1. Read the headline and 3 benefits 2. See social proof ("237 owners already joined") 3. Enter email and submit LOOK AND FEEL: friendly, trustworthy, modern CONSTRAINTS: Single page, mobile-first, no backend. Use Formspree for the form action. OUTPUT: A complete, deployable landing page.

Lessons. The counter is fake — that is fine for a smoke test. What matters is whether real people click "Join". If you get fewer than 20 sign-ups per 1,000 impressions, the idea needs reshaping before you write another line of code.

2. Concierge MVP Form

1 hour · Lovable.dev + Formspree · Stage: early revenue

The story. Jonas validated demand for a weekly meal-planning service for busy parents (Scenario 1 got 60 sign-ups). Instead of building an algorithm, he created a simple intake form with Lovable.dev: family size, dietary restrictions, budget, preferred cuisines, delivery day. When a parent submitted the form, Formspree emailed Jonas the answers. He spent 30 minutes per family creating a meal plan in a Google Doc and emailed it back. This is the concierge MVP — you are the product. Three families paid 9€/week before any code existed.

Why this works. This is how Airbnb started (the founders personally photographed apartments) and how DoorDash started (the founders personally delivered food). You learn what customers actually need — not what you imagine they need — because you fulfil every order by hand and hear every complaint.

ROLE: You are a senior frontend developer building a service intake form. USER: A busy parent on a phone who has 2 minutes to fill in preferences. GOAL: They complete a 5-field form and feel confident help is coming. KEY ACTIONS: 1. Select family size (dropdown) 2. Check dietary restrictions (checkboxes) 3. Enter weekly budget and preferred cuisines 4. Submit and see a confirmation message LOOK AND FEEL: warm, simple, reassuring CONSTRAINTS: Single page, mobile-first. Form submits to Formspree. Show a friendly "We'll email your plan by Friday" message after submit. OUTPUT: Complete HTML file.

Lessons. Track how long each manual fulfilment takes. When it exceeds 2 hours per week, that is your signal to automate. Until then, manual is faster and teaches you more.

3. Internal Calculator / Quiz

20 min · Claude.ai · Stage: lead generation

The story. Gabija was building a tutoring marketplace. To attract tutors, she needed their attention. She built a "What's your tutoring hourly rate worth?" calculator in Claude.ai: tutors enter hours per week, subject, and city, and the tool shows estimated monthly income, tax estimate, and a comparison to the market average. She embedded it on her landing page. Tutors who used the calculator were 4x more likely to sign up than those who just read the landing page.

Why this works. A calculator or quiz gives users something immediately valuable in exchange for their attention (and optionally their email). It demonstrates domain knowledge — you are not just asking for sign-ups, you are proving you understand their world. Classic lead magnet strategy adapted to vibe coding speed.

ROLE: You are a senior frontend developer building an interactive calculator. USER: A freelance tutor considering joining a tutoring platform. GOAL: They input 3 fields and instantly see their estimated monthly earnings. KEY ACTIONS: 1. Enter hours per week, subject, city 2. Click "Calculate" 3. See monthly income, estimated tax, and market comparison LOOK AND FEEL: professional, data-driven, clean CONSTRAINTS: Single HTML file, all calculation in JavaScript, no API calls. Use realistic placeholder data for 5 subjects and 3 cities. OUTPUT: Complete HTML file I can preview immediately.

Lessons. The data does not need to be perfect — use best estimates and label them clearly ("estimates based on public data"). The goal is engagement, not accounting precision. Add an email gate ("Enter your email to save your results") to capture leads.

4. Pitch-Deck Companion App

1 hour · v0.dev + Vercel · Stage: fundraising / competitions

The story. Lukas was pitching a student mental health check-in tool at a startup competition. Instead of another slide saying "here's a mockup", he showed the judges a real URL. They could open it on their phones during the pitch: a simple daily mood check-in with a 7-day streak tracker and an anonymous class mood heatmap. It took Lukas 1 hour in v0.dev, and the judges remembered his pitch over 15 others — because they could touch it.

Why this works. Investors and judges see hundreds of decks. Almost none of them include a URL the audience can click during the presentation. A working demo — even a simple one — signals execution ability and seriousness. You do not need a complete product. You need one interactive screen that makes the concept tangible.

ROLE: You are a senior frontend developer building a pitch demo. USER: A university student checking in on their daily mood, on their phone. GOAL: They tap a mood emoji, see their 7-day streak, and view an anonymous class mood heatmap. KEY ACTIONS: 1. Tap today's mood (5 emoji options) 2. See streak counter update 3. View a sample heatmap of class moods this week LOOK AND FEEL: calming, minimal, purple-and-white CONSTRAINTS: Single page, no backend. Store mood data in localStorage. Use sample data for the heatmap. Mobile-first. OUTPUT: A deployable React component.

Lessons. Deploy to Vercel before the pitch and put the short URL on your last slide. "Try it now: mood.vercel.app" is more powerful than any mockup screenshot. Test the URL on the venue WiFi before presenting.

5. AI-Powered Mini-App

1 hour · Claude.ai · Stage: proof of concept

The story. Egle wanted to help first-time founders structure their thinking. She asked Claude.ai to build an artifact where users paste a one-paragraph business idea and instantly get a pre-filled Lean Canvas with all 9 blocks populated. The AI inside Claude's artifact analysed the input and generated customer segments, value propositions, revenue streams — all from a single paragraph. She shared the artifact link with 20 classmates. Twelve used it and said it saved them an hour of thinking.

Why this works. Claude artifacts can call the AI model that powers them — meaning you can build AI-enabled tools without API keys, servers, or billing. This is the closest thing to magic in the vibe coding toolbox: your prototype can think. Use it for anything that transforms unstructured input into structured output: idea analysis, feedback summarisation, content generation, categorisation.

ROLE: You are a senior frontend developer building an AI-powered business tool. USER: A first-time founder who has an idea but hasn't structured it yet. GOAL: They paste a one-paragraph idea and get a complete Lean Canvas. KEY ACTIONS: 1. Paste their idea into a text area 2. Click "Generate Canvas" 3. See all 9 Lean Canvas blocks filled with AI-generated suggestions 4. Edit any block manually LOOK AND FEEL: professional, startup-friendly, clean CONSTRAINTS: Single HTML artifact. Use the AI capabilities available inside Claude artifacts. Make each canvas block editable after generation. OUTPUT: Complete interactive artifact.

Lessons. This only works inside Claude artifacts (because the artifact has access to the model). If you need this on a standalone website, you would need an API key — which is not free. For prototyping and classroom use, the artifact approach is perfect.

6. Classroom / Workshop Tool

30 min · Claude.ai · Stage: teaching & engagement

The story. A teaching assistant for a design thinking course needed a Five Whys exercise for 80 students. Commercial tools were expensive and overcomplicated. In 30 minutes with Claude.ai, she built a single HTML file: five expandable "Why?" fields, a progress bar, and a summary box that compiled the root-cause chain. She hosted it on GitHub Pages for free. Every student opened the same URL on their phone and worked through their own problem. The TA collected results by asking students to screenshot their summary.

Why this works. Classroom tools need to be dead simple: one URL, no login, works on any phone. A single HTML file meets all three criteria. Because the file is self-contained, students can fork it (download and modify) for their own projects. The professor gets a custom tool that fits the exact pedagogy, instead of bending the course to fit a generic platform.

ROLE: You are a senior frontend developer building a classroom exercise tool. USER: A university student in a design thinking workshop, on their phone. GOAL: They complete a Five Whys exercise and see their root-cause chain summarised. KEY ACTIONS: 1. Type the surface problem 2. Answer "Why?" five times, each building on the previous answer 3. See a summary card with the full chain from symptom to root cause LOOK AND FEEL: clean, focused, academic CONSTRAINTS: Single HTML file, no backend, works on mobile. Include a progress bar (1/5 through 5/5). Summary card appears only after all 5 are complete. OUTPUT: Complete HTML file.

Lessons. Build the simplest version first (text inputs only), then add polish in iteration 2 (progress bar, colours, export). Students do not need features — they need clarity. If you want to collect results, add a "Copy summary to clipboard" button instead of building a backend.

7. Data Dashboard from Spreadsheet

1 hour · Claude.ai + CSV · Stage: analysis & storytelling

The story. Tomas had 6 months of customer survey data in an Excel file for his food-delivery startup analysis. His professor asked for "insights, not spreadsheets". He exported the file as CSV, dropped it into Claude.ai, and asked for an interactive dashboard. Claude built an HTML page with three charts (satisfaction trend, NPS by age group, top complaint categories), a filter dropdown, and a summary paragraph. The whole thing took 50 minutes and looked better than anything he could have built in Excel.

Why this works. Founders and students often have data but lack the visualisation skills to make it speak. Claude can read CSV files, understand the structure, and generate Chart.js or Recharts dashboards directly. The result is a standalone HTML file you can present in class, embed in a pitch deck, or host as a live URL. No Python, no Tableau, no learning curve.

ROLE: You are a senior frontend developer and data visualisation expert. USER: A business student presenting survey results to their professor. GOAL: They open a dashboard and immediately see the 3 most important insights. DATA: I will paste CSV data below. Analyse it first, then build. KEY ACTIONS: 1. See a headline metric (overall satisfaction score) 2. View 3 charts: trend over time, breakdown by segment, top categories 3. Filter by a dropdown (e.g. age group or city) LOOK AND FEEL: professional, data-focused, presentation-ready CONSTRAINTS: Single HTML file. Use Chart.js from CDN. Embed the data directly in JavaScript (no file loading). OUTPUT: Complete HTML file with embedded data. [PASTE YOUR CSV DATA HERE]

Lessons. Clean your CSV before pasting — remove empty rows, fix column names, use consistent date formats. The cleaner the input, the better the output. If the dataset is large (500+ rows), paste only a representative sample and ask Claude to structure the code so you can swap in the full dataset later.

8. Personal Productivity Micro-Tool

20 min · Claude.ai · Stage: practice & personal use

The story. Dovile was writing her bachelor thesis and kept losing track of her daily writing sessions. In 20 minutes, she built a "Thesis Tracker" in Claude.ai: a simple page where she logs how many words she wrote each day, sees a progress bar toward her 12,000-word goal, and gets a streak counter ("5 days in a row!"). She bookmarked it on her phone and used it every evening. It was not a startup — it was a tool she built for herself in the time it takes to watch a YouTube video.

Why this works. This is the fastest way to practise the vibe coding loop because the stakes are zero and the user is you. You know exactly what "done" looks like because you are the customer. A personal micro-tool is the ideal first project: small scope, immediate feedback, real daily use. Other ideas: Pomodoro timer, reading log, habit tracker, exam countdown, budget tracker for a trip.

ROLE: You are a senior frontend developer building a personal tracking tool. USER: Me — a student writing a thesis who wants to track daily progress. GOAL: I log today's word count and see my progress toward 12,000 words. KEY ACTIONS: 1. Enter today's word count 2. See a progress bar (current / 12,000) 3. See a streak counter (consecutive days logged) 4. See a simple chart of the last 14 days LOOK AND FEEL: minimal, motivating, dark mode CONSTRAINTS: Single HTML file. Store data in localStorage. No login, no backend. OUTPUT: Complete HTML file.

Lessons. localStorage means data lives in your browser only. If you clear your browser data, the log disappears. For a personal tool this is fine. For anything shared, you would need a backend (or use Google Sheets as a free database via Formspree).


Knowledge Check 3

Q: A classmate wants to validate whether Vilnius restaurant owners would pay for a weekly menu-planning tool. Which scenarios, and in what order?

A: First Scenario 1 (smoke-test landing page): a waitlist with zero product. If interest looks real, move to Scenario 2 (concierge form) where you deliver menu plans manually in a Google Doc. Only then build a real product. This is the classic Lean Startup sequence: measure demand → deliver manually → automate what works.

Section 6 of 8

Five Hands-On Exercises

~2 h 30 min totalRun the loop 5 times
Goal: Run the full vibe loop five times so the muscle forms. Each exercise includes a step-by-step walkthrough, what you should see at each stage, common mistakes, and reflection prompts.
Do not skip the reflections — they are required for Workshop 3. The learning is in the reflection, not just the building.
EXERCISE 1 · 15 MIN

Hello, Vibe World

Purpose: Experience the full cycle from prompt to working artifact for the first time. This is your "Hello World" moment — proof that conversation creates software.

Tool: Claude.ai (free account).

Step-by-step walkthrough:

  1. Open Claude.ai and start a new conversation.
  2. Paste this prompt exactly (replace your name):
Build me a single HTML file that displays "Hello, I'm [your name] and today I started vibe coding." Soft gradient background, bold centred text. Add a button that randomises the gradient colours on click.
  1. Wait 10–20 seconds. Claude will generate code and show an "Artifact" panel on the right side of the screen. This is a live preview — you are looking at a real web page.
  2. Click the button 5 times. Watch the gradient change. Notice that the AI wrote JavaScript to generate random colours, CSS for the gradient, and HTML for the layout — all from one paragraph of English.
  3. Try to break it. Resize the browser window very narrow. Does the text still fit? Does the button still work?

What you should see: A full-screen page with your name in large bold text, a coloured gradient behind it, and a button. Each click changes the background to new random colours. The artifact panel has a "Copy" button — you can download this as an HTML file.

Common mistakes:

Deliverable: Working artifact plus 2 sentences answering: "What surprised me about this experience?"

Reflection prompts: Was it faster or slower than you expected? Did the result look more or less professional than you imagined? What would you change first?

EXERCISE 2 · 30 MIN

Iterate by Feel

Purpose: Practice the iteration loop (Pillar 4) and testing by description (Pillar 5). You will make three changes, one at a time, and learn how to recover when the AI breaks something.

Tool: Same Claude.ai chat from Exercise 1.

Step-by-step walkthrough:

  1. Change 1 — Add a click counter. In the same chat, type: "Add a counter that shows how many times I've clicked the button. Display it below the button." Wait for the artifact to update. Click the button — the counter should increase.
  2. Change 2 — Make it mobile-friendly. Type: "Make the page look good on a phone screen. The text should be smaller, the button should be easy to tap with a thumb." Use your browser's responsive mode (press F12, then click the phone icon) to check. Or open the artifact on your real phone by clicking "Copy link".
  3. Change 3 — Add a celebration. Type: "When the counter reaches 10, show a confetti celebration animation and a message saying 'You're a vibe coder now!'" Click the button 10 times to trigger it.

What you should see after all 3 changes: A responsive page with your name, a gradient background that changes on click, a counter that tracks clicks, and a confetti animation at 10 clicks.

When something breaks (and it probably will):

Common mistakes:

Deliverable: Working page with all 3 features plus 3 sentences: "Where did the AI break something and how did I recover?"

Reflection prompts: How did it feel to debug by describing instead of coding? Which change was hardest for the AI to get right? Why do you think that was?

EXERCISE 3 · 35 MIN

Build a Tool for Your Own Course

Purpose: Apply specification skills (Pillar 1) and build something genuinely useful. This is the first exercise where you write your own prompt from scratch instead of copying one.

Tool: Claude.ai (new chat — fresh context).

Pick ONE of these three options:

Option A — Five Whys Form

5 progressive "Why?" questions. A progress bar. A summary card at the end showing the root-cause chain.

Option B — Crazy 8s Timer

8 boxes on screen. An 8-minute countdown. A beep each minute when one box should be done. Drawing or text input per box.

Option C — Lean Canvas Template

All 9 Lean Canvas blocks as editable fields. A "Copy to clipboard" button that exports the canvas as formatted text.

Step-by-step walkthrough:

  1. Start a new chat (do not continue the Exercise 1–2 chat — context management!).
  2. Write your specification before prompting. Fill in: Who is the user? What do they do? What does "done" look like? (See Pillar 1.)
  3. Write your prompt using the template from Section 4. Include role, user, goal, key actions, look and feel, and constraints. Always add "single HTML file".
  4. Generate and test. Click everything. Try entering weird input (empty fields, very long text, special characters).
  5. Iterate 3–5 times. Fix what is broken. Add one polish feature (colours, better spacing, an icon). Stop at 30 minutes.
  6. Save the file. Click "Copy code" in the artifact, paste into a text editor, save as .html. Open it in your browser to verify it works outside Claude.

What you should have at the end: A standalone HTML file that works in any browser, does one useful thing for students, and looks reasonably good.

Common mistakes:

Deliverable: Saved HTML file you can bring to Workshop 3 plus 2 sentences: "What was the hardest part of writing my own prompt?"

Reflection prompts: Did your first prompt produce what you expected? How many iterations did it take? What would you specify differently next time?

EXERCISE 4 · 35 MIN

Smoke-Test Landing Page

Purpose: Use a browser-based builder (not just a chat AI) to create a multi-section landing page. Practice deployment (Pillar 6) by getting a real public URL.

Tool: Bolt.new or Lovable.dev (free tier, sign in with Google).

Step-by-step walkthrough:

  1. Open Bolt.new (or Lovable.dev) and start a new project.
  2. Write your landing page prompt for your Workshop 1 idea. Use the Section 4 template but adapt it for a landing page. Your page must include:
    • A headline that names the problem you solve
    • 3 benefit points (not features — benefits)
    • An email capture form
    • A footer with your name or team name
  3. Wait for the build. Bolt.new generates a full project (not just one file). You will see a live preview on the right.
  4. Test on your phone. Bolt.new gives you a preview URL. Open it on your phone. Is the text readable? Can you tap the email field? Does the form look trustworthy?
  5. Iterate 3–5 times. Suggested changes (one per message):
    • "Make the headline bigger and bolder"
    • "Add a section with 3 benefit cards with icons"
    • "The form should show a thank-you message after submit"
    • "Add a 'join 87 others' counter above the form"
    • "Make it look great on mobile — the cards should stack vertically"
  6. Deploy (stretch goal). In Bolt.new, click "Deploy" — you get a live URL. In Lovable.dev, click "Publish". Save this URL — you will need it for Workshop 3.

What you should have at the end: A professional-looking landing page for your idea, accessible at a real URL that anyone can open.

Common mistakes:

Deliverable: Working landing page (screenshot or URL if deployed) plus 2 sentences: "What is the biggest difference between a chat AI (Exercise 1–3) and a browser builder (this exercise)?"

Reflection prompts: Was the builder faster or slower than Claude for this task? When would you choose a chat AI vs. a builder? Did deployment feel harder or easier than expected?

EXERCISE 5 · 40 MIN

The Refinement Round

Purpose: Practice the art of polish — making something good into something professional through prompt-only iteration. This is the exercise closest to real product work: you already have a working version, now you make it shine.

Tool: Same tool and project from Exercise 4 (Bolt.new or Lovable.dev), or use Claude.ai if you did not deploy.

Step-by-step walkthrough:

  1. Open your Exercise 4 project. Look at it critically. What would make a stranger trust this page?
  2. Apply at least 5 of the following changes, one per message. Do not edit any code by hand — prompt only:

Visual polish

  • Change the colour palette to match your brand (give 2–3 hex codes)
  • Add an emoji or simple SVG as a favicon
  • Improve typography (font size, line height, spacing)

Content & trust

  • Add a 3-question FAQ section
  • Add a fake social proof counter ("87 people joined")
  • Add a testimonial quote (can be fictional for the prototype)

Functionality

  • Add email-format validation ("Please enter a valid email")
  • Show a thank-you state with animation after form submit
  • Add a dark-mode toggle

Mobile & real-world

  • Test on your real phone and fix whatever looks wrong
  • Ask the AI: "What would you improve about this page?"
  • Share the URL with one friend and ask for honest feedback
  1. After each change, test immediately. Click everything. Check mobile. Verify the previous features still work (the AI sometimes breaks old things while adding new ones).
  2. If something breaks: Use the diff prompt — "Keep everything the same except: [fix this one thing]. Return the full file."
  3. Stop at 40 minutes. Count how many changes you successfully applied.

What you should have at the end: A polished, professional-looking page that you would not be embarrassed to share with a stranger. At least 5 improvements applied through prompts alone.

Common mistakes:

Deliverable: Refined page (screenshot or URL) plus a 1-paragraph reflection answering: "Where did the AI struggle, and where did I struggle to describe what I wanted?"

Reflection prompts: Which type of change was easiest for the AI (visual, functional, content)? Which was hardest? How would you explain the difference between "prompting for a feature" and "prompting for polish" to a friend?

Section 7 of 8

Tips, Tricks & Pitfalls

~10 minutesBookmark for Workshop 3
Goal: Learn the 10 tips that save hours, avoid the 5 classic traps, and memorise 3 prompt patterns.

10 tips that save hours

1. One change at a time

Giant prompts break things. Ask for a single modification per turn.

2. Show, don't tell

Paste a screenshot of a site you like. Words are slow; pixels are fast.

3. Say "single file"

For prototypes this reduces broken builds enormously.

4. After 3 failed fixes, new chat

Paste the current code and re-brief. Context has gone stale.

5. Use a second AI as reviewer

Paste code and ask "what would you do differently?"

6. Keep a prompt journal

Reuse what worked. Your best prompts are assets.

7. Describe the user, not the feature

"Stressed first-year on a phone" beats "make it simple".

8. Test on a real phone

Half of bugs only show there.

9. Time-box ruthlessly

If nothing works in 60 min, the prompt is wrong, not the AI.

10. Save often

Copy HTML out of the artifact every 15 minutes.

5 classic traps

Three prompt patterns to memorise

The diff prompt (for a single change)

Keep everything the same except: [one specific change]. Return the full file.

The reset prompt (after context pollution)

Here is my current working code. [paste]. Change only: [X]. Return the full file. Do not remove any existing features.

The critique prompt (for quality)

Before writing code, list three risks or edge cases I might have missed. Then implement.

Professor's secret: What separates good vibe coders from frustrated ones is not technical knowledge. It is the ability to describe a problem precisely — the same skill you already teach in Design Thinking.
Section 8 of 8

Pre-Workshop 3 Checklist

~5 minutesBefore you walk into Workshop 3
Goal: Arrive at Workshop 3 with accounts, practice, understanding and gear ready so you can focus on the product, not the tools.

Accounts

Understanding

Practice

Workshop 3 day


Glossary — the twelve words you will hear

Artifact: In Claude.ai, a live-preview panel rendering code next to chat.

Context window: How much text an AI can hold in mind at once.

Deploy: Put your code on a public URL.

Frontend: What users see — buttons, forms, layout.

Backend: Server side — databases, accounts, payments. Usually not needed for prototypes.

MVP: Minimum Viable Product. Smallest thing that lets a real user do the real thing.

Prompt: Natural-language instruction to an AI.

Prompt engineering: The craft of writing prompts that produce the result you want.

React: A popular way of building interactive web interfaces.

Repo: Folder of code with change history, usually on GitHub.

Smoke test: Fast, cheap experiment to reveal whether anyone wants what you are building.

Token: Unit AI models use to measure text. Free tiers often cap daily tokens.

What happens in Workshop 3

You turn what you built here into a deployed MVP using an AI, GitHub, and Vercel or other — all free. Because you have already run the loop five times, Workshop 3 will be about the product, not the tools.

See you in Workshop 3. Bring your vibes.