AITraining2U Home
Workshop Resources
Day 1 — 11 Apr
Day 2 — 12 Apr
AITraining2U
Workshop Kit

Vibe/Agentic Coding
Complete Kit

Course outline, prompts, exercises, and resources.

Day 1 — Foundations · 11 Apr · 9:00am – 5:00pm
Intro9:00 – 9:15
Welcome + Intro
Warren
15 min
M19:15 – 10:30
Mindset + Principles
Marcus · Gemini · AI Studio · GitHub · Firebase
What is Vibe Coding, pros, cons, when to use it · What can be Vibe Coded · PRD + Prompting · Toolkit walkthrough · Warm-up: vibe code a mini quiz live
Break10:30 – 10:45
Morning break — 15 min
M210:45 – 12:45
First Builds
Marcus · AI Studio · GitHub · GitHub Pages
Assignment 1 — Landing page in AI Studio · attach image reference · set colours and theme · sync to GitHub · deploy to GitHub Pages
Assignment 4 — Interactive Dashboard with data visualisation · drop in sample CSV · AI builds summary cards, charts, filters · sync to GitHub · deploy and share
Lunch12:45 – 1:45
Lunch break — 1 hr
M31:45 – 3:30
CRUD Web App
Jin · Google Stitch · AI Studio · Firebase
Google Stitch — design UI and wire up layout · bring Stitch output into AI Studio · Assignment 3 — standardised app everyone builds together · connect Firebase — real database, no SQL needed · proper deployment — not just a static page
Break3:30 – 3:45
Afternoon break — 15 min
Demo3:45 – 4:30
Demo Projects
Marcus + Jin
Real projects built end-to-end · what's possible at each stage — from simple to full stack
Ideas4:30 – 5:00
Project Idea Discussion
Marcus + Jin
Everyone pitches their own idea · group sharpens each brief · leave with a clear plan for Day 2
Day 2 — Go Further · 12 Apr · 9:00am – 6:00pm
M49:00 – 11:00
Intro to Antigravity
Marcus · Supabase · MCP · Antigravity · Vercel
Recap of full stack — frontend, backend, server, deployment · Antigravity — what it is, vibe coding locally · Skills & MCP — concept, what they are and why they matter · Browser automation for QA and browser testing · Build web app using Supabase · connect MCP — wire up real integrations · Assignment 4 — build, connect, and deploy on Vercel
Break11:00 – 11:15
Morning break — 15 min
M511:15 – 1:15
Design + UX Improvement
Marcus · Antigravity · Vercel
UX improvement basics — what makes something feel good to use · core mobile responsive basics · Antigravity for UI polish — vibe coding locally in practice · other useful skills — simple scraping tool and API examples · Assignment 5 — take an existing build, improve the UX, polish the UI, redeploy on Vercel
Lunch1:15 – 2:15
Lunch break — 1 hr
CLI2:15 – 3:00
CLI Examples
Marcus · Gemini CLI · Claude Code
What the CLI unlocks that browser tools can't · live examples: Gemini CLI and Claude Code in action · when to reach for it
M63:00 – 4:30
Build Your Own Project
Marcus + Jin · full stack support
Take your idea from Day 1 and build it · apply everything: PRD → Stitch → AI Studio → Supabase → Vercel · Assignment 6 — Marcus and Jin circulate, guided support throughout
Break4:30 – 4:45
Break — 15 min
M74:45 – 6:00
Showcase + Next Steps
Marcus + Jin
Present your build to the group · group feedback · personal 30-day AI roadmap
Tools used across both days
GeminiAI StudioGoogle StitchGitHubFirebaseSupabaseVercelAntigravityMCPGemini CLIClaude Code
Concept / intro
Hands-on build
Polish / iterate
Demo / discussion
Day 1 — 11 Apr
Day 2 — 12 Apr
Extras
Module 1 · Day 1
Mindset + Principles
Tools: Gemini · AI Studio · GitHub · Firebase
9:15 – 10:30
75 min
Marcus
Opening 10m
Mindset 20m
Toolkit 20m
Warm-up Quiz 25m
9:15 — Opening (10 min)
Facilitator — standing, no slides
"I know some of you are thinking: I'm not technical enough to be here. That fear you're carrying — 'this isn't for people like me' — that's actually the most important thing in this room. Because by tomorrow evening, you will have built something real, deployed on the internet, that you can show anyone."

Pause. Then: "My name is Marcus. 10 years in UX and product design. I had ideas that died because I couldn't build them. AI doesn't replace expertise. It amplifies it. You are the domain expert. AI is your co-pilot. Let's go."
Watch
Quick round — name + one thing they want to build. Write 3–5 ideas on the whiteboard. Reference these in M4.
9:25 — Mindset: What is Vibe Coding (20 min)
What it is, the pros, when to use it
What is Vibe Coding — describe the outcome, AI writes the code. You are the domain expert, AI is your co-pilot.
What can be Vibe Coded — landing pages, forms, dashboards, internal tools, CRMs, data visualisations.
PRD + Prompting — how to turn a rough idea into a structured brief that AI can execute on.
9:45 — Toolkit walkthrough (20 min)
Gemini · AI Studio · GitHub · Firebase
Gemini — conversational AI, brainstorming, PRD drafting.
AI Studio — vibe coding environment, generate full apps from prompts.
GitHub — version control, sync code, deploy via GitHub Pages.
Firebase — real-time database, hosting, authentication.
10:05 — Warm-up: Vibe code a mini quiz together (25 min)
Facilitator
Live build together before the break. Everyone follows along. Show how a single prompt can produce a working interactive app.
Mini quiz prompt — type live in AI Studio
"Build an interactive 5-question quiz titled 'Which AI Tool Should You Use?'. Multiple choice, 4 options each. Track scores. Show result at end with recommendation. Clean modern design, single HTML file."
Watch
This is the first time participants see AI generate a working app. Let them react. After it renders: "That's Vibe Coding. You described the outcome. AI built it. After the break, you build your own."
Module 2 · Day 1
First Builds
Tools: AI Studio · GitHub · GitHub Pages
10:45 – 12:45
2 hrs
Marcus
Demo 15m
Assignment 1 45m
Assignment 4 45m
Deploy 15m
10:45 — Live demo (15 min)
Facilitator
Show the full workflow end-to-end: prompt in AI Studio → generated app → sync to GitHub → deploy to GitHub Pages. Demonstrate how an image reference and colour theme shape the output.
11:00 — Assignment 1: Landing page in AI Studio (45 min)
Attach image reference, set colours and theme, sync to GitHub, deploy to GitHub Pages
Assignment 1 prompt
"Create a professional landing page for [your idea]. Hero section with headline, 3 feature cards, testimonial section, email signup form, and footer. Use [colour theme]. Make it mobile responsive. Single HTML file."
Watch
Circulate — help with image references and colour choices. At 11:30 call: "Sync to GitHub now even if it's not perfect. We deploy next."
11:45 — Assignment 4: Interactive Dashboard with data visualisation (45 min)
Drop in sample CSV, AI builds summary cards, charts, filters
Assignment 4 prompt
"Build a sales dashboard from this CSV data (columns: Date, Product, Category, Quantity, Unit_Price, Total_Revenue, Region, Sales_Rep, Payment_Method, Customer_Type, Rating). Show: 4 summary cards (total revenue, orders, avg order value, avg rating as stars), a bar chart of revenue by month, a donut chart by category, and a sortable data table with search. Use Chart.js. Warm cream background. Single HTML file."
Resource — CSV & Prompts
Open Dashboard Guide & Download CSV →
Includes sample CSV (50 rows of e-commerce sales), 3 prompt templates (basic → advanced), and dashboard scenarios to extract insights from.
12:30 — Deploy and share (15 min)
Deploy both projects via GitHub Pages.
Share live URLs in the group chat.
Quick show-and-tell — 3 volunteers share their screen.
Module 3 · Day 1
CRUD Web App
Tools: Google Stitch · AI Studio · Firebase
1:45 – 3:30
1 hr 45m
Jin
Stitch Demo 20m
Build Together 45m
Firebase 25m
Deploy 15m
1:45 — Google Stitch demo (20 min)
Facilitator
Walk through Google Stitch — design UI and wire up layout visually. Show how Stitch output can be brought into AI Studio to generate working code. "Stitch gives you the design. AI Studio gives you the app."
2:05 — Assignment 3: Build together (45 min)
Standardised app everyone builds together
Assignment 3 prompt
"Build a task management web app. Features: add tasks with title, description, priority (Low/Medium/High), due date. Mark tasks complete. Filter by status and priority. Dashboard showing task counts. Connect to Firebase Realtime Database. Modern card-based UI."
Watch
Everyone builds the same app so Jin can debug consistently. Stitch output → AI Studio → working CRUD app. Circulate and keep pace together.
2:50 — Connect Firebase (25 min)
Real database, no SQL needed
Create Firebase project and Realtime Database.
Connect the app — data persists across reloads.
"Open your app on your phone. Add a task. See it appear on your laptop. That's a real web app."
3:15 — Deploy (15 min)
Facilitator
Proper deployment — not just a static page. Firebase Hosting or GitHub Pages. Everyone should have a live URL by the end of this block.
Module 4 · Day 1
Demo + Ideas
Real projects demo · pitch and sharpen ideas for Day 2
3:45 – 5:00
1 hr 15m
Marcus + Jin
Demo 45m
Idea Pitches 20m
PRD Prep 10m
3:45 — Demo Projects (45 min)
Facilitator
Show real projects built end-to-end — what's possible at each stage. Walk through complexity levels: simple landing page → interactive app → full-stack with database → deployed product. "This is where you're heading tomorrow."
4:30 — Project Idea Discussion (20 min)
Facilitator
Everyone pitches their idea in 60 seconds. Group sharpens each brief — "What's the one core feature?" "Who's the user?" Write refined ideas on the board.
4:50 — PRD Prep (10 min)
Leave with a clear plan for Day 2
PRD template prompt — paste into Gemini or AI Studio
"Write a PRD for my project idea: [describe your idea]. Include: Problem statement, Target user, Core features (max 5), Tech stack suggestion, Success metric. Keep it to one page."
Watch
Everyone should leave Day 1 with a written PRD ready for Day 2. Homework: refine the PRD tonight, come back ready to build.
Module 5 · Day 2
Intro to Antigravity
Tools: Supabase · MCP · Antigravity · Vercel
9:00 – 11:00
2 hrs
Marcus
Recap 15m
Antigravity 20m
MCP 15m
Build 50m
Deploy 20m
9:00 — Recap of full stack (15 min)
Facilitator
Recap: frontend (what people see), backend (where data lives), server (what runs the logic), deployment (how it reaches users). "Yesterday you built frontend. Today we go full stack." Draw the stack on the whiteboard.
9:15 — Antigravity intro (20 min)
What it is — vibe coding locally
Antigravity — a local vibe coding environment. More power, more control than browser-based tools.
Skills & MCP — concept, what they are and why they matter. "Skills are pre-built capabilities. MCP is how AI tools talk to external services."
Browser automation for QA and browser testing — AI can test your app like a real user.
9:35 — MCP Concept (15 min)
Facilitator
"MCP is the protocol that lets AI connect to real services — databases, APIs, tools. Skills are the pre-built connectors. Today we connect to Supabase using MCP." Draw: [Antigravity] ←→ [MCP] ←→ [Supabase].
9:50 — Assignment 4: Build web app with Supabase (50 min)
Build, connect MCP, and deploy on Vercel
Assignment 4 prompt
"Build a web app called [name] using HTML/CSS/JS. Connect to Supabase for database. Include user authentication. Deploy on Vercel. Features: [list 3-4 features from their PRD]."
Watch
Participants use their PRD from Day 1. Circulate — help with Supabase connection and MCP setup. Common issues: API keys, CORS, auth redirects.
10:40 — Deploy on Vercel (20 min)
Connect GitHub repo to Vercel.
Set environment variables (Supabase URL + key).
Deploy — live URL with real database backend.
Module 6 · Day 2
Design + UX Improvement
Tools: Antigravity · Vercel
11:15 – 1:15
2 hrs
Marcus
UX Basics 20m
Mobile 15m
Assignment 5 60m
Redeploy 25m
11:15 — UX improvement basics (20 min)
Facilitator
"Your app works. But does it feel good to use?" Cover: visual hierarchy (what to look at first), spacing and breathing room, font weight contrast, colour for meaning not decoration. Show before/after screenshots.
11:35 — Core mobile responsive basics (15 min)
Why mobile matters — most users are on phones.
Key patterns: stack on mobile, side-by-side on desktop. Touch targets. Font sizing.
Quick test: resize your browser. Does it break? That's what we fix.
11:50 — Assignment 5: UX polish with Antigravity (60 min)
Take an existing build, improve the UX, polish the UI
Assignment 5 prompt
"Improve the UX of this app: 1) Add proper visual hierarchy — headings, spacing, font weights. 2) Make it fully mobile responsive. 3) Add hover states and smooth transitions. 4) Improve the empty state with a friendly message. 5) Add loading states. Keep all functionality."
Watch — Antigravity for UI polish
Vibe coding locally in practice. Also cover other useful skills — simple scraping tool and API examples. Circulate and help participants identify what to improve.
12:50 — Redeploy on Vercel (25 min)
Push improved code to GitHub.
Vercel auto-deploys from the push.
Compare before/after on mobile — share screenshots in group chat.
Module 7 · Day 2
Build Your Own Project
Full stack support · PRD → Stitch → AI Studio → Supabase → Vercel
3:00 – 4:30
1.5 hrs
Marcus + Jin
Setup 15m
Build Sprint 60m
Debug 15m
3:00 — Setup (15 min)
Facilitator
"This is your time. Take the idea you pitched yesterday, the PRD you wrote, and build it. Use everything: Stitch for design, AI Studio for code, Supabase for database, Vercel for deployment. We're here to help."
3:15 — Build Sprint (60 min)
Watch — Marcus and Jin circulate
Guided support throughout. Check in with each participant every 10–15 min. Common blockers: scope too large ("pick one feature"), database connection issues, deployment config. No specific prompt — participants use their own PRD from Day 1.
Apply everything: PRD → Stitch → AI Studio → Supabase → Vercel.
Focus on one core feature working end-to-end, not everything at once.
Deploy early — even if incomplete. A live URL with one feature beats a local build with five.
4:15 — Debug and polish (15 min)
Facilitator
Final push. Help anyone stuck on deployment. "If it's deployed and one thing works, you're ready for the showcase. Get it live."
Module 8 · Day 2
Showcase + Next Steps
Present your build · group feedback · 30-day AI roadmap
4:45 – 6:00
1 hr 15m
Marcus + Jin
Showcase 45m
Feedback 15m
Roadmap 15m
4:45 — Showcase (45 min)
Format — brief each presenter
0–30 sec: what I built and the problem it solves. 30–75 sec: live demo, no slides. 75–90 sec: one thing I'd add next. After each: applause, one question only. Keep moving.
Facilitator — amplify and frame
Frame each project in business terms. "This replaces a paid SaaS." "This is a lead gen tool." "This automates 3 hours of manual work." Bugs and incomplete builds: "Show us the best part — even one working screen is a win."
5:30 — Group feedback (15 min)
Facilitator
Structured feedback: "One thing that impressed you. One thing you'd add." Keep it constructive and forward-looking.
5:45 — Personal 30-day AI roadmap (15 min)
Roadmap prompt — paste into Gemini or Claude
"Based on what I built this weekend ([describe projects]), create a 30-day personal AI development roadmap. I work in [role] and want to [goal]. Give me: Week 1 (reinforce learning), Week 2 (first real work application), Week 3 (show it to someone), Week 4 (iterate on feedback). Specific and achievable."
Facilitator — stand up, no screen, eye contact
"You came in here with a fear. That fear that said: 'This is for other people. Technical people.' And you sat in that fear and you built anyway.

You built a landing page. A dashboard. A CRUD app. A full-stack project. Deployed. Live. Real.

The professionals who move fastest in the next three years are not the ones who know the most about AI. They're the ones who build the most with it. You've started. Don't stop."
Post-close logistics
Community group link — ask everyone to post one screenshot. Prompt PDF QR code on screen. Next step offer: 30-day cohort or Implementation Partnership. "If you post on LinkedIn, tag me — I'll repost everyone." Feedback form QR code.
Joke Script
Malaysian Edition
Lines for every moment — use freely throughout both days
Day 1 — Opening
Opening line
"Selamat pagi everyone. Welcome to Vibe Coding. If you came because coding sounds scary but vibes sounds okay — correct decision. If someone dragged you here — also correct decision. Either way, I'm Marcus. I'm a designer who learned to build things. Today you also become that person."
Framing
"Two days. Some people use two days to finish a Netflix series. We're going to deploy a real website. I think we're winning."
Personal story
"I come from UX and product design. Ten years interviewing users, obsessing over pixels, writing design briefs nobody read. Then I realised — the developers weren't building what I designed. So I learned to build it myself. Vibe coding is basically me solving my own trust issues."
M1 — PRD & Planning
On PRDs
"PRD stands for Product Requirements Document. In corporate Malaysia, this is a 40-page Word doc that everyone cc's their boss on but nobody actually reads. We're doing ours in 10 minutes with AI. We call it agile. It is agile."
On prompting
"Writing a PRD prompt is exactly like a user interview. Except the AI will never say 'I don't know lah, I just want it to feel more premium.' The AI gives actual answers. In 10 years of user research, I have never experienced this."
When prompts are vague
"Someone's prompt is too vague? Normal. The AI gave you something totally different from what you wanted — that means your brief was unclear. In UX we say it's never the user's fault. In vibe coding, sorry, it's the prompt's fault. You're the designer now. Be specific."
M2 — Visualise
Emotional beat
"Okay this is where I get a bit emotional. I spent five years telling developers 'here's the wireframe, build exactly this.' They never did. Now I show the AI a wireframe and it builds it. Nobody to chase. Nobody to follow up with. Just me and my coffee."
Speed joke
"The AI generated that UI in 8 seconds. I used to charge for this. This is either amazing or I should be more upset. We move on."
M3 — Scaffold
Build moment
"Paste your PRD. Watch. This moment right here — you wrote a brief, you gave it to AI, it's building you something. Last time this happened with a developer it took three days and a Jira ticket."
Don't read code
"Don't read the code. I know you want to. Don't. Reading code you didn't write is like reading insurance fine print. Technically useful. Practically, you'll just feel bad."
Ugly build
"It works but it's ugly. This is exactly what happens when you skip the design brief. I've reviewed developer builds that look like this and had to smile and say 'great progress.' Today we don't have to smile. We fix it."
M4 — Style & M5 — Deploy
Design brief
"Design brief. My comfort zone. In my previous life I'd spend two weeks on brand moodboards, three rounds of client feedback, and then they'd say 'can we try purple?' Today — 15 minutes. The AI doesn't ask for purple."
Clean and modern
"When someone tells me 'I want it to look clean, modern, professional' — I hear: white background, blue button, Arial font. Every time. Show the AI references lah. 'Clean and modern' means different things to different people. The AI is not psychic. Yet."
Deploy win
"Congratulations. You have a live URL. Someone in Finland can open your site right now. They won't. But they can. You built something on the internet. Before lunch. This is not small."
Deploy fail
"Someone's deploy failed? Normal. In production, things break right before client presentations or on Friday afternoon. Deploying at 10am on a Friday in a workshop is actually very responsible timing."
M6 — Dashboard & Lunch
Dashboard irony
"Dashboard design. Every user I've ever interviewed wants a dashboard. They want to 'see everything at once.' Then you build it and they say 'too much lah, can simplify?' Now I build dashboards in 30 minutes before committing to anything. Learned from experience."
Scope creep
"Someone added 12 features and it broke? Classic. This is not a vibe coding problem. This is a human problem. We call it scope creep. It is the oldest enemy of shipping."
Lunch transition
"Before you go eat — look at what you built this morning. PRD, wireframe, live app, styled, deployed. That's a full product sprint. In half a day. Go have lunch and think about what just happened to your CV."
Lunch warning
"Eat something proper. Day 2 is harder. I need everyone functional. If things break and people are hungry I won't survive."
Day 2 — Opening
Morning check
"Morning. How's the website from yesterday? Still alive? Good. Better uptime than most startups."
Framing Day 2
"Yesterday: 'I don't code' → deployed web app. Today: 'I have an app' → the app works while you sleep. This is the difference between owning a kedai and owning a kedai with staff."
Day 2 — Modules
M7 Cursor rules
"Cursor rules are like your design system but for AI. In UX we build style guides so every designer follows the same rules. Same thing here — you tell the AI 'always structure code this way, always use these patterns.' And unlike humans, the AI actually follows the guide. Every time. Without asking why."
M8 Browser automation
"Playwright opens a browser by itself, clicks around, takes screenshots, closes. That script will do this every day, every hour, whenever you tell it to. You just hired a robot staff who never takes MC, never asks for a raise, never replies 'noted' and disappears."
M9 Scraping
"Scraping pulls data from websites automatically. For research purposes obviously. Competitive analysis. We are professionals. We respect robots.txt. Mostly."
M10 Automation (n8n)
"First time I opened n8n I stared at it for 20 minutes and made tea. It looks complicated. It's not as complicated as it looks. The tea helped."
M10 Workflow wins
"That workflow just ran. Data came in, got processed, went out. No human involved. This is what 'passive income' actually looks like. Not dropshipping. This."
M11 Claude Code
"I'm going to type one sentence and then just watch. That's the whole demo. And that's the point."
M12 Project sprint
"You've been in 'should I build this' mode for 10 minutes. In UX research that's analysis paralysis. The cure: one sentence — 'I believe [user] needs [thing] because [reason].' If you can say it in one sentence, build it. Cannot say in one sentence, simplify first."
Closing
Final message
"Two days ago you came in as someone who doesn't code. Right now you have live software on the internet. Tell your boss, tell your team, tell your clients. Don't hide the AI part — that's the whole skill. You orchestrated it. The AI executed. That is a real, valuable, billable skill."
Closer
"Final thought. Everything I did in UX for years was making technology easier for humans to use. Vibe coding is the most UX-aligned form of development I've ever seen — you describe what you want in plain language and the machine tries to understand you. That's literally what I wanted in 2012 doing my first usability study. We're living it. Go build something."
Quick Reactions
WiFi slow
"Connection is experiencing design constraints."
Tool crashes
"Surprise live debugging session. You're welcome."
Build looks really good
"Eh stop lah. You're making everyone else look bad. Keep going."
Build breaks badly
"This is the most educational thing that's happened all day."
Question you don't know
"Good one. Let me ask Claude and we find out together. This is vibe teaching."
Same error twice
"Same problem twice means it's my workshop design issue, not your skill issue. I'll fix."
Someone finishes early
"You can help your neighbour or start another project. Either way, you're hired."
Post-lunch energy dip
"Food coma is real. Good news: AI doesn't get food coma. Let it do the heavy lifting now."
Day 2 mid-morning wall
"This is the hard part. Every sprint team hits Day 2 wall. Push through — something usually clicks in the next 30 minutes."
"I'm not creative enough"
"You just described a product to an AI and it built it. That IS creative work. You're already doing it."
Vibe Coding Workshop
DAY 1
Foundations
11 April 2026 · 9:00am
Build Apps Without Writing Code
AITraining2U
Vibe Coding Workshop
DAY 2
Go Further
12 April 2026 · 9:00am
Build Apps Without Writing Code
AITraining2U
SuperMarcus
Training content strategy
When anyone can build
in 5 minutes,
what do you teach?
The Vibe Coding curriculum framework — shifting training from tool instruction to strategic thinking.
Workshop
2-Day Intensive
Audience
Non-technical professionals
The core insight
If building is easy,
the bottleneck shifts.
Old training question
How do I use this tool?
How do I write a prompt?
How do I deploy this?
Can a non-developer do this?
→
New training question
What should I build and why?
How do I know if what I built is good?
Who is this for and what do they need?
What do I do with it after it's built?
?
The real training challenge
The tool is no longer
the hard part.
When Lovable.dev builds a CRM in under 10 minutes, tool instruction becomes a 15-minute setup exercise. The 2 days must answer a harder question: what do you build, for whom, and how do you know it's working?
Training content framework
The 4 pillars when building is no longer the barrier
01
Problem framing
Can they identify a real problem worth solving before they open the tool?
Strategic thinking
02
Evaluation criteria
Can they judge whether the output is actually good — not just impressive?
Critical judgment
03
Iteration discipline
Can they move from working prototype to something someone actually uses?
Product thinking
04
Deployment thinking
Can they connect what they built to a real business outcome or workflow?
Business acumen
01
Problem framing
Most people build the wrong thing beautifully.
Who
Who is this actually for?
Train participants to name one specific person — not "my team." One person with one specific pain.
Exercise: Write a one-sentence problem statement. Can't use the word "app" or "tool."
Pain
Vitamin or painkiller?
Teach the difference between a bleeding neck problem and a nice-to-have. Most first builds are vitamins. Know which it is.
Exercise: What does the person do right now without this app? How often? How painful?
Done
What does success look like?
Before building, define done. What would the user say after using this for 30 days?
Exercise: Write the LinkedIn post they'd share after using your app for 30 days.
02
Evaluation criteria
AI makes good-looking things fast. Good taste is trainable.
What to train: evaluating outputs
Does it solve the problem? Not "does it look professional." Does the specific person you named do their job faster?
Is it clear to a stranger? Hand it to someone not in the room. Watch where they get confused without explaining anything.
What breaks on mobile? AI skips edge cases. Builders catch them.
The critique framework
Functional
Does it do what it says?
Usable
Figured out in 30 sec?
Trustworthy
Give it their email?
Valuable
Use it again next week?
The 10-second test
"Show it to someone not in the workshop. 10 seconds to understand what it does. If they can't — it needs work, regardless of how impressive the build was."
03
Iteration discipline
Building v1 takes 10 minutes. Getting to v2 is the real skill.
1
Describe
Write the problem before opening any tool
→
2
Build
Generate with the most specific prompt you can write
→
3
Test
Show one real person. Observe — don't explain.
→
4
Refine
Fix the single most broken thing. One prompt, one fix.
→
5
Ship
Deploy to a real URL. Share with one real user. Get one real reaction.
"
The biggest failure mode after vibe coding workshops: people build v1, feel proud, and never show it to anyone. Training must create the habit of putting things in front of real people on Day 1.
04
Deployment thinking
A deployed app nobody uses is just an expensive screenshot.
ROI
Connect it to a number
Every app built in training should map to one business metric. If they can't name the number, the app may not be worth building.
"This app saves ___ hrs/week × ___ people = RM ___/month recovered."
WHO
Identify the first real user
Not "my team." One specific person who has the problem. Training should end with a name, not just a URL.
"Write the WhatsApp you'll send to the first real user today."
NEXT
Define version 2
What they built is a first prototype. Teach them to think in versions, not finished products. What's the one thing users will ask for first?
"Name 3 things you deliberately left out of this first version, and why."
WHY
The one-sentence business case
They need to justify continued use to their manager in one sentence. If they can't — it won't survive the first week back at work.
"This replaces ___ and saves ___ because ___. Next step: show it to ___."
Content allocation
The right ratio for a 5-minute-build world
30%
Mindset and permission
The fear removal still matters. Without it, people won't build. But it shouldn't grow beyond 30%.
–Non-technical = domain expert
–AI as co-pilot, not replacement
–Experience first, framework second
40%
Strategic thinking before and after
The new core of the workshop. Problem framing, evaluation, deployment thinking. This is what separates a vibe coder from a strategic AI practitioner.
–Problem definition exercises
–Critique frameworks and tests
–Business case articulation
–User identification and outreach
30%
Hands-on building
Still essential for confidence. But the build is now in service of the strategy — not the goal itself.
–Prompt crafting as a skill
–Iteration loops, not single builds
–Deploy as a habit, not a milestone
Skill
The one technical skill that scales with AI
Prompt quality is now the only craft worth teaching explicitly.
Weak prompt
"Build me a CRM app"
No user. No context. No constraints. AI makes all the decisions. Generic result that solves nobody's problem specifically.
Strategic prompt
"Build a contact tracker for a solo freelance designer who manages 15 active clients. She tracks last contact date, project status, and one note per client. Checks on mobile between client calls. Simple card layout, large touch targets."
Specific user. Specific context. Specific constraints. AI executes — you get something useful on the first try.
Formula
User (one person, one context)
+
Problem (specific, not general)
+
Constraints (device, context, must-haves)
+
Success signal (what done looks like)
Facilitation tools
Strategic questions to ask throughout
Before they build
"Who is the one person this is for? Not your team — one person."
"What does that person do right now without this app?"
"Is this a vitamin or a painkiller for them?"
During the build
"What did you leave out on purpose? What's deliberately not in this version?"
"If you could only keep one feature, which and why?"
"What would break if 50 people used this tomorrow?"
After the build
"Who are you sending this to today? Not 'eventually' — today."
"What metric tells you this is working after 2 weeks?"
"If this replaced something you currently pay for, what is that?"
Revised emphasis
What each module actually teaches now
M1–M2
Mindset + First Build
Fear removal still the most important 15 min
Frame the problem before opening any tool
Add: write one-sentence problem statement before prompting
M3–M4
Interactive + CRUD
Quiz funnel: the lesson is lead capture strategy, not quiz mechanics
LowKey CRM: the lesson is data model thinking
Add: 10-second stranger test before every deploy
M5–M6
Polish + Integrations
Antigravity: developing aesthetic judgment, not just using a tool
MCP: systems thinking — what talks to what, why it matters
Add: connect each integration to a specific workflow saving
M7–M8
Full App + Showcase
Showcase: presenters must state the business case, not just demo
Add: each participant writes first-user outreach message live
Add: 30-day roadmap must include a real metric
The strategic position
The tool is table stakes.
The thinking is the moat.
When building takes 5 minutes, every competitor can build the same thing tomorrow. What they cannot copy is your participants' ability to frame the right problem, evaluate real quality, and connect what they built to a business outcome that matters.
Problem framing
Evaluation criteria
Iteration discipline
Deployment thinking
Prompt craft
Materials

Vibe/Agentic Coding
Complete Kit

Slides, prompts, tools, skills, and resources.

Tools

Gemini
Google's AI — your coding assistant
gemini.google.com →
AI Studio
Browser-based IDE for vibe coding
aistudio.google.com →
Google Stitch
Design UI and wire up layouts visually
stitch.withgoogle.com →
GitHub
Version control and collaboration
github.com →
Firebase
Database and hosting by Google
firebase.google.com →
Supabase
Open-source backend + auth + database
supabase.com →
Vercel
One-click deployment platform
vercel.com →
Antigravity
Local vibe coding — full file + terminal access
antigravity.dev →
Claude Code
CLI AI agent for advanced vibe coding
claude.ai →

Recommended Skills

Skills that transform Claude Code from a solo assistant into a full product engineering team.

G
gstack
Garry Tan (YC President)
23 skills covering the entire software lifecycle — planning, design, QA, shipping, and post-deploy monitoring. Like a virtual eng team.
Planning QA Ship Security Design
github.com/garrytan/gstack →
U
UI/UX Pro Max
NextLevelBuilder
Design intelligence — 67 UI styles, 161 color palettes, 57 font pairings, 99 UX guidelines across 10+ stacks.
Styles Palettes UX Rules Charts
github.com/nextlevelbuilder/ui-ux-pro-max-skill →
R
Code Review
Anthropic (Official Plugin)
Production-focused code reviewer. Catches real bugs, security issues, race conditions — not just style nits.
Official Bugs Security
github.com/anthropics/claude-plugins-official →
S
/simplify
Anthropic (Built-in)
Spawns 3 parallel review agents to find code reuse, quality, and efficiency issues — then auto-fixes them. Your instant code reviewer.
Review Quality Auto-fix
docs.anthropic.com/claude-code/skills →
!
/security-review
Anthropic (Built-in)
Analyzes your pending branch changes for security vulnerabilities — injection, auth issues, data exposure. Run before every PR.
OWASP Injection Auth
docs.anthropic.com/claude-code/skills →
R
Ralph Loop
Community
Autonomous build-test-fix loop. Claude keeps iterating until your app works — runs, tests, fixes errors, and repeats automatically.
Auto-loop Build Test Fix
github.com/marcusschiesser/ralph-loop →

Recommended MCP Servers

Model Context Protocol servers give Claude superpowers — real browser testing, database access, live docs, and more.

Playwright MCP
Microsoft · 30.7k stars
Give Claude a real browser. Navigate, click, fill forms, take screenshots, assert DOM state. E2E testing without scripts.
github.com/microsoft/playwright-mcp →
Context7 MCP
Upstash · 52.5k stars
Live documentation lookup for any library. Always up-to-date API syntax — no more hallucinated docs.
github.com/upstash/context7 →
Figma Console MCP
southleft · 1.5k stars
Full read/write Figma access — extract variables, create components, manage design tokens, debug designs, accessibility audits.
github.com/southleft/figma-console-mcp →
Supabase MCP
Supabase (Official) · 2.6k stars
Run SQL, manage schemas, auth, storage, edge functions. Full backend management from Claude.
github.com/supabase-community/supabase-mcp →
Notion MCP
Notion (Official) · 4.2k stars
Read and edit Notion pages, databases, and data sources via Markdown.
github.com/makenotion/notion-mcp-server →
Linear MCP
Linear · Official
Create issues, manage sprints, update project status, and track bugs directly from Claude.
linear.app/docs/mcp →

Assignment Prompts

Assignment 1 — Landing Page
"Create a professional landing page for [your idea]. Hero section with headline, 3 feature cards, testimonial section, email signup form, and footer. Use [colour theme]. Make it mobile responsive. Single HTML file."
Assignment 4 — Interactive Dashboard · Full Guide + CSV Download
"Build a sales dashboard from this CSV data (columns: Date, Product, Category, Quantity, Unit_Price, Total_Revenue, Region, Sales_Rep, Payment_Method, Customer_Type, Rating). Show: 4 summary cards (total revenue, orders, avg order value, avg rating as stars), a bar chart of revenue by month, a donut chart by category, and a sortable data table with search. Use Chart.js. Warm cream background. Single HTML file."
Assignment 3 — CRUD Web App
"Build a task management web app. Features: add tasks with title, description, priority (Low/Medium/High), due date. Mark tasks complete. Filter by status and priority. Dashboard showing task counts. Connect to Firebase Realtime Database. Modern card-based UI."
Assignment 4 — Supabase Web App
"Build a web app called [name] using HTML/CSS/JS. Connect to Supabase for database. Include user authentication. Deploy on Vercel. Features: [list 3-4 features from your PRD]."
Assignment 5 — UX Improvement
"Improve the UX of this app: 1) Add proper visual hierarchy. 2) Make it fully mobile responsive. 3) Add hover states and smooth transitions. 4) Improve the empty state. 5) Add loading states. Keep all functionality."
Mini Quiz Warm-up
"Build an interactive 5-question quiz titled 'Which AI Tool Should You Use?'. Multiple choice, 4 options each. Track scores. Show result at end with recommendation. Clean modern design, single HTML file."
PRD Template
"Write a PRD for my project idea: [describe your idea]. Include: Problem statement, Target user, Core features (max 5), Tech stack suggestion, Success metric. Keep it to one page."