AITraining2U
AITraining2U
Your 2-Day Roadmap
What we'll cover.
Two days, one through-line: go from a single prompt to shipping real software — then turn AI into a second brain and a team of agents.
Day 1
Concept · Build · Design · Ship
01
Concept
What vibe coding is · what can be built · everything is code
02
Mindset
The shift: from writing code to describing intent
03
Plan → Build → Deploy
Prompt = PRD · the build loop · debug · ship to a live URL
LAB
Lab Exercises
Hands-on builds: warm-up · quiz builder · landing page
04
Style & Page Effects
Visual assets · inspiration · effects & delight to add
PM
Antigravity & Tools
Antigravity · Claude Code · Skills & MCP intro · mobile-first & QA
Day 2
Data · CRUD · Auth · Ship Your Project
01
Databases
Connect a real database (Supabase) · store & query data
02
CRUD Apps
Create, read, update, delete · apps that persist
03
Systems
Wire the pieces into a real, working system
04
Login & Auth
User accounts · sign-in · protected pages
05
Skills & MCP
Give AI real access · reusable skills · MCP servers
SHOW
Project Presentation
Build your own full-stack project · present it
8 / 23
AITraining2U
Your Trainers
Built products. Teach what works.
Marcus Chia
Full Stack Design Engineer · AI PM
Co-Founder, SuperAgentK
Co-Founder, SuperCFO
10+ years in UX research and product design for SaaS. Embedded with design and research teams to shape how they build — now turns those insights directly into shipped products through vibe coding.
Warren Leow
Founder, AITraining2U PLT
100,000 Malaysians Mission
Enterprise AI Enablement
Drives AITraining2U's mission to equip 100,000 Malaysians with practical AI skills — hands-on with AI agents, automation and applied analytics for enterprise teams.
"If you're thinking 'this isn't for me' — that's exactly why you're here."
6 / 24
AITraining2U
The Receipts
Built, not taught. Every day.
2025
597 contributions
2026 (Jan–May)
1,692 contributions
107
repositories
github.com/markfive
Everything you see in these slides — built here.
★
AITraining2U
Is AI a
productivity tool?
2 / 23
AITraining2U
Definition
What is Vibe Coding?
Andrej Karpathy
Coined the term · Feb 2025
"There's a new kind of coding I call 'vibe coding', where you fully give in to the vibes, embrace exponentials, and forget that the code even exists."
The architect, not the bricklayer
You design the building. AI lays the bricks. Your domain knowledge is the plan — AI executes it.
Describe intent, not syntax
You write what you want in plain language. AI generates working code from your description.
No background needed
You don't need to understand every line. You need to understand the problem and the user.
Ship in hours, not weeks
Go from idea to live deployed URL in a single workshop session. That's the vibe coding promise.
3 / 23
AITraining2U
Mindset
The Shift: From Coding
to Describing
Shift 01
I need to describe
Your job is articulating intent clearly. The better you describe, the better the output.
Shift 02
AI is a collaborator
Think of AI as a junior developer — fast, tireless, eager to please, but needs clear direction.
Shift 03
Domain expert with superpowers
Your industry knowledge IS your advantage. A marketer who knows their audience can build tools a developer never would think of.
6 / 23
AITraining2U
But this isn't a developer story
This is for
you.
🎨
The marketer
with an idea stuck in their head for 6 months — waiting for a dev who never has time.
⚙️
The ops person
drowning in repetitive work, knowing there's a better way but lacking the tools to build it.
💼
The business owner
who can't afford a dev team, watching competitors ship while you're stuck writing briefs.
The old model
Have idea
→
Hire developer
→
Wait 3 months
→
Launch
The new model
Have idea
→
Build it yourself
→
Ship it today
5 / 23
AITraining2U
First Principle
Everything is Code
Almost every kind of knowledge work on a computer can — in theory — be expressed as code. The app is just a friendly wrapper. Underneath, it's text a machine runs.
Presentations
← this deck
PowerPoint / Keynote → one HTML + CSS + JS file
Spreadsheets
Excel / Google Sheets → Python (pandas) · SQL
Documents
Word / Google Docs → Markdown · LaTeX
Design & diagrams
Figma / Canva → SVG · CSS · Mermaid
Reports & dashboards
Power BI / Tableau → D3 · charts in code
Repetitive admin
Clicking through apps → scripts · automations
Exhibit A
This slide deck isn't a
.pptx — it's one
.html file. Generated by prompt, opens in any browser, versioned in git.
If it runs on a computer, it can be code.
3 / 23
AITraining2U
Possibilities
What Can Be Vibe Coded?
Landing Pages
Marketing sites, product pages & event sign-ups
Custom Scripts
Automate repetitive tasks, data & files
Dashboards
KPI trackers, CSV visualizers, live monitors
Browser Plugins
Chrome extensions, helpers & scrapers
Internal Software
Admin panels, ops tools, workflow apps
AI Agents
Autonomous workflows, chatbots, task runners
MCPs
Connect AI directly to your tools & data
SaaS Products
Subscription tools, booking & customer apps
Mobile Apps
React Native — real iOS & Android apps
Full-Stack Products
Auth, database, API, payments — end-to-end
5 / 23
AITraining2U
Not productivity,
but capability
"Make engineers 20% more productive"
One person is more powerful than old structures
"Add copilots to existing workflows"
Build a queryable company
"Ship more features with AI"
Agent Native Software
"The shift is entirely new capabilities — things that were previously impossible are now one person with the right tools." — Diana Hu, Partner at Y Combinator, 2026
4 / 23
AITraining2U
Y Combinator · 2026
1000x
One person. The right tools.
The output of a team of 50.
Companies where entire codebases have zero handwritten code.
The 1000x engineer isn't coming. They're already here.
4 / 23
AITraining2U
The Breakdown
How is 1000x even possible?
10x
AI writes the code
Stop typing. Describe what you want — AI produces the file.
×3
Sub-agents in parallel
One prompt fans out to multiple agents working at once.
×3
Skills + MCP servers
Pre-built tools for design, data, deploy — no glue code.
×3
Templates & design systems
Don't start from blank. Stitch, shadcn, Supabase auth — ready-made.
×4
CI/CD on autopilot
git push → live in 60s. No DevOps team, no waiting.
10 × 3 × 3 × 3 × 4
=
1,080x
≈
1000x output
"Multipliers stack. One person with the right stack out-ships a team of 50 — not because they type faster, but because they don't type at all."
5 / 24
AITraining2U
How the web works
Every app is just a restaurant.
What your guests see, the kitchen behind it, and everything that keeps the place running.
🍽️
Frontend
The dining area
What guests see & touch — the menu, tables, the plated dish. In an app: pages, buttons & layout.
👨🍳
Backend
The kitchen
Where the real work happens, out of sight — prep, cooking, recipes. In an app: data, logic & accounts.
… and three things behind the scenes
🗄️
Database
The pantry — where every ingredient (your data) is kept.
📍
Hosting
The address — so anyone can find you. Your live URL.
📖
GitHub
The recipe book — every version saved, nothing lost.
★
AITraining2U
Choose Your Tool
Which vibe-coding tool, when?
Three great ways to build. Match the tool to the job — and level up as your project grows.
🌐
Browser
Google AI Studio
Fast prototypes, landing pages & single-page apps — prompt, preview and deploy with zero install.
Reach for it when
You're starting out or want something live fast.
💻
Local IDE · agentic
Antigravity
Build full-stack apps on a real codebase — connect databases, run browser QA, work across many files locally.
Reach for it when
Your project outgrows one page and needs real data.
⌨️
Terminal / IDE
Claude Code
An agent that drives your whole project — deep multi-file refactors, orchestration and automation.
Reach for it when
You want the most power & control on bigger, complex builds.
Rule of thumb: start in the browser (AI Studio) → go local (Antigravity) → go deep (Claude Code) as your project grows.
★
AITraining2U
Where we start · Day 1
Meet Google AI Studio.
A free, browser-based studio where you describe what you want — and watch it build. No install, no setup.
✓Runs in your browser — nothing to install
✓Prompt → live preview in seconds
✓Powered by Gemini, Google's latest models
✓Export to GitHub → deploy to a live URL
⚡ Your first builds today happen right here.
aistudio.google.com
★
AITraining2U
The Build Loop
Every build follows five steps.
Whatever you’re making, the rhythm is the same — a simple loop you’ll repeat all workshop.
📋
01
Plan
Decide what to build and who it’s for — write it as a clear prompt.
⚡
02
Prototype
Generate the first version. Get something on screen, fast.
🔁
03
Iterate
Refine with follow-up prompts — design, copy, behaviour.
✅
04
Test
Click through it. Check mobile. Fix what breaks.
🚀
05
Deploy
Push it live. Share a real URL.
Plan once, then loop Prototype → Iterate → Test until it feels right — then Deploy.
★
AITraining2U
Framework
The Prompt Formula
Context
+
Task
+
Keywords
+
Constraints
+
Format
=
Great Output
Context
Who you are, your industry, your users. AI performs better when it understands your world.
Task
The specific thing you want built. One task per prompt. Be precise.
Keywords
Technical terms and terminologies that guide AI to the right approach — e.g. "responsive", "single-page", "CRUD".
Constraints
What you don't want: no frameworks, no external APIs, mobile-first, under 200 lines.
Format
What the output should look like: a single HTML file, a JS function, a Sheets script, JSON.
8 / 23
AITraining2U
M1 · PRD Prompt — Copy & Adapt This
Your first prompt is your PRD.
❌ Weak
"Build me a quiz app"
// Context first — who you are and who this is for
Context: I run a [type of business] in Malaysia.
My [customers/team] currently [pain point].
// Audience — describe exactly who this is for
Audience: My target users are [who they are — age, role, context].
They care about [need/goal] and expect [tone/experience].
// Task — one clear thing to build
Task: Build a [what it does] that [core function].
It should [key behaviour / outcome].
// Keywords — the elements that should appear on your site
Keywords: hero, pricing table, contact form, gallery,
testimonials, [the things you want on the page]
// Format — what kind of site to deliver
Format: Single-page or multi-page website · web app
7 / 23
AITraining2U
Cheat Sheet · Steal these words
Style & palette keywords.
Not sure what to write? Drop one style + one palette into your prompt's Keywords line to steer the look — e.g. "minimal, bento grid, warm-neutral palette".
Design styles
Minimal
Bento grid
Glassmorphism
Neumorphism
Brutalist
Editorial
Dark mode
Retro / Y2K
Flat
Material
Luxury / elegant
Playful
Corporate clean
Gradient-rich
Colour palettes
Warm neutral
Cool minimal
Vibrant / playful
Soft pastel
Dark + neon
Earthy muted
9 / 23
AITraining2U
From page to product
Start small. Climb fast.
Same tool, same prompt formula — you just describe a little more each rung. Watch your prompt grow as your builds do.
Rung 1
1
A page that shows
Profile card, landing page, event invite — content only, no logic.
Your prompt
Context · Task · Keywords · Format
Rung 2
2
A page that reacts
Quiz, calculator, timer — it responds to what the user does.
Your prompt
… same + Behaviour
Rung 3
3
An app that remembers
Dashboard, booking, SaaS — stores data and knows its users.
Your prompt
… same + Data & Users
Today you’ll build your way up the first rungs — a profile page, then an interactive quiz, then a real landing page.
★
01
AITraining2U
LAB 01
Warm-Up · 15 min
Rung 1 · just format the info — no logic
Your First
Slide
Take a few facts and turn them into one clean, presentation-style slide — a bold title, key points, and a highlight number. The lightest build there is: you just feed it the info.
You'll build
A single info slide (HTML)
Output
Your Live URL #1
Tools
AI Studio + GitHub Pages
Lab 1
AITraining2U
LAB 01 · PROMPT
Start simple. Just feed it info.
After it generates
Tweak the title and colours, then deploy to GitHub Pages for your Live URL #1.
Notice
You just fed it info + the formula lines. That's your whole PRD for now.
Lab 1
AITraining2U
Steal like an artist
Where to Find Inspiration
Before you design, go look. Screenshot what you love and feed it to your AI as a reference.
Awwwards
Award-winning, experimental, animation-rich sites.
awwwards.com
Mobbin
Real production app UI & full flows (mobile + web).
mobbin.com
Land-book
Curated SaaS & startup landing pages.
land-book.com
SaaS Landing Page
SaaS landing pages by section.
saaslandingpage.com
Lapa Ninja
Big landing-page gallery, filter by category.
lapa.ninja
Godly
Astronomically good web design.
godly.website
Pinterest
Mood boards & broad visual ideas.
pinterest.com
"Find one reference you love, screenshot it, and tell your AI: 'Make it feel like this — what should change and why?'"
AITraining2U
Borrow from the real world
Real-world interactions, moved to code, add delight.
The little rituals people love offline — scratching, collecting, spinning — become moments of joy when you rebuild them in your product.
Photo stack
Memories that fan out like real prints
★ iskra.graphics
YOU WON!
50% off
Scratch to win
Scratch to reveal a hidden reward
Read daily,
collect stamps
collect stamps
✓
✓
3
4
🎁
6
7
8
9
🎁
Daily stamp card
Collect stamps, build a streak
SPIN NOW
Spin to win
A spin of luck, a hit of fun
★
AITraining2U
M4 · Debug Prompt — Use This Every Time
Something broke. Here's your escape.
Golden rule
Never paste the full code and say "fix it." Describe the error, the expected behaviour, and what you tried.
01
Read it literally — paste error, ask "what does this mean?"
02
Isolate — "ignore everything else, just fix the [broken part]"
03
Start fresh — 3+ loops? Rewrite that section from scratch.
04
Checklist — "give me 5 things that could cause this"
05
Rubber duck — explain it out loud. You'll find it yourself.
11 / 23
02
AITraining2U
LAB 02
Hands-On · 45 min
Interactive
Quiz Builder
Build a 5-question interactive quiz that scores answers, reveals a personalised result, and is deployed live. No templates — you prompt it from scratch.
You'll build
Scored quiz + result reveal
Output
Live URL you can share
Tools
AI Studio + Vercel
Lab 2
AITraining2U
LAB 02 · PROMPT
Copy this. Paste it. Make it yours.
▲ New this round
Same formula — but now your Task describes behaviour: what happens when users click, score and finish.
After it generates
Test every question. Check that scoring works. Then deploy to Vercel for your Live URL #1.
Make it yours
Change the topic, colours, and result labels to match your actual business or idea.
Lab 2
AITraining2U
M2 · Scaffold
PRD → Running App
01
Paste the PRD as your first prompt
The entire PRD becomes your opening message. The more structured it is, the better the scaffold.
02
Scope the first build (MVP only)
Start with core functionality only. One screen, one action, one outcome. Resist adding features in round one.
03
Add 1–2 features via follow-up prompts
Once the scaffold works, iterate. "Now add a filter for category." Each prompt is one addition.
Common first-scaffold mistakes
✕ Prompting the full app in one go
✕ Not specifying the tech stack
✕ Accepting the first output without testing
✕ Skipping mobile responsiveness check
Output target
A working preview you can click through and test. Not perfect — working. Ship first, polish second.
9 / 23
03
AITraining2U
Hands-On · 30 min
LAB 03
Interactive
Landing Page
Take your quiz and turn it into a full landing page — hero section, copy that converts, CTA button, and a layout that works on mobile. No templates. You direct the design.
You'll build
Hero + copy + CTA + mobile layout
Output
Polished live URL #2
Skills used
Persona, before/after, deploy
Lab 3
AITraining2U
Lab 03 · Sub-Exercise
Add a Product Listing + Order
⬇ inventory-sample.csv
Reuse the inventory data as your products — turn the landing page into a shop.
What to build
Product grid + filters + search → add-to-cart → order summary & place order.
Make it yours
Swap in your own products, currency and brand colours.
Lab 3
AITraining2U
Design-first · Another way in
Meet Google Stitch.
Describe an app — or paste a screenshot — and Stitch generates polished UI screens and the frontend code to match.
✓Prompt or image → multiple UI screens in seconds
✓Iterate on themes, layouts & components visually
✓Export to Figma or copy clean frontend code
✓Powered by Gemini — Google's design-tuned models
⚡ Great when you want the design nailed before the build.
stitch.withgoogle.com
★
AITraining2U
Name the parts · Prompt better
Anatomy of a landing page.
A page is just stacked sections. Learn their names, then list the ones you want — "header, hero, logo strip, 3-up features, pricing, FAQ, CTA, footer."
Header / Nav
Logo, menu links, sign-in / CTA
Hero
Big headline, subtext, main CTA
Social proof
"Trusted by" logo strip
Features
Icon + title + text, in a grid
Timeline / Steps
"How it works" in sequence
Testimonials
Quote + avatar + name
Pricing
Plan columns + prices
FAQ
Expandable question rows
Gallery
Image / screenshot grid
Stats / Metrics
Big numbers that build trust
CTA banner
Final "sign up / book" strip
Footer
Links, social, copyright
Lab 3
AITraining2U
Designing your landing page
Images, SVG, or Effects?
When you design or refine a landing page, pick the right tool for each visual — it decides how sharp, fast, and polished it feels.
🖼️
Image assets (PNG/JPG)
Use for: real photography, product shots, rich detailed imagery, hero photos.
Watch out: heavy file size, blurs when scaled — optimise & compress.
✒️
SVG
Use for: logos, icons, flat illustrations, diagrams, simple shapes.
Why: razor-sharp at any size, tiny file, recolour & animate with CSS. Default for anything non-photographic.
✨
CSS transitions / animation
Use for: micro-interactions, hover states, fade/slide reveals — subtle polish that guides the eye.
Watch out: use sparingly; motion should aid, not distract.
🎮
Three.js / WebGL
Use for: a deliberate "wow" hero moment, 3D, interactive backgrounds.
Watch out: heavy, costs performance & mobile battery — only when it earns its place.
"Default to SVG for icons & illustrations, images only for real photos, CSS for polish, and 3D only for one hero moment. Every effect must earn its weight — clarity and load speed first."
★
AITraining2U
Design That Works
5 UX Principles Every Builder Needs
👁️
Visual Hierarchy
Bigger = more important. Bold colours for primary actions. More space = more attention. Users scan before they read.
🔁
Consistency
Same spacing system (4/8/16/24/32px). Same colour palette. If click opens a modal once, it does everywhere.
💬
Feedback
Button states: hover, loading, disabled. Success/error messages. Skeleton loaders. Confirmation for destructive actions.
✂️
Simplicity
Only ask for info you actually need. Pre-fill when possible. Reduce clicks. Use smart defaults. Less is always more.
🔤
Clarity
Button labels are verbs: "Save Contact" not "Submit". Errors explain what went wrong AND how to fix it. Empty states tell users what to do next.
"When something looks wrong in your app, it's almost always one of these five principles being violated. Prompt AI to fix it with the principle name."
★
AITraining2U
Ship It Right · Mobile First
Mobile Is Not an Afterthought
Most people will open your app on a phone. Build for the small screen first — then let it grow. The basics get you 90% of the way.
📚
Stack columns
Side-by-side on desktop should collapse to a single column on a phone.
👆
Big touch targets
Buttons and links sized for thumbs, not cursors — roughly 44px or more.
↔️
No horizontal overflow
Nothing should run off the side of the screen or force sideways scrolling.
🔤
Readable text
Body text at least 16px so no one has to pinch-zoom to read it.
"Thumb test — open it on your phone right now."
★
AITraining2U
M3 · Style & Iterate
Know Your User.
Style for Them.
Persona template
"[Name], [age]. [Role]. Uses [device].
Handles [volume] per day.
Biggest pain: [specific friction].
Needs [outcome] in [time]."
1
Who are they? Role, industry, tech level
2
Their #1 pain? What makes them open your tool
3
Device & context? Phone at 11pm? Desktop in office?
4
Success moment? The exact moment the problem is solved
Before your app
Write every manual step. Count tabs, copy-pastes, waiting. That's your friction baseline.
After your app
Map the new journey. Where does friction still exist? That gap is your product backlog.
Use the gap to iterate
Each friction point becomes a follow-up prompt: "Add a step where the user pastes X and it auto-fills Y."
10 / 23
04
AITraining2U
LAB 04
Custom System
with Database
Build a full system that remembers — a custom internal tool connected to a live database. Users, records, and data that persist. This is where you go from web page to real software.
🗄️
Database
Supabase
⚡
Build
CRUD App
🚀
Deploy
Vercel + GitHub
🏆
Output
Live URL #3
90 min · Guided support throughout
Lab 4
AITraining2U
The brain behind the build
Which AI Model for the Job?
Whatever tool you build in, you pick the model driving it. Match the model to the task.
Frontier · complex builds, agentic & debugging
Claude Opus 4.8
★ Recommended
Flagship coding + long-horizon agentic. The default for serious vibe coding.
Claude Fable 5
Anthropic's most capable model — reach for it on the hardest, longest problems (premium).
GPT 5.5 Pro
Strong general reasoning / coding alternative.
Gemini 3.1 Pro
Strong multimodal + very large context; pairs naturally with Google AI Studio & Antigravity.
Fast & cheap · quick iterations, high volume
Claude Sonnet 4.6
Best balance of speed + intelligence; a great everyday driver.
Gemini Flash
Very fast and low-cost; ideal for rapid iteration.
Claude Haiku 4.5
Fastest, cheapest Claude; simple, high-volume tasks.
Open source · self-host, privacy & cost control
GLM 5.2
Open-weight, strong at coding, self-hostable.
Sakana
Open / efficient research models.
Model landscape moves fast — check current benchmarks before you commit.
"Default to Opus 4.8 for building. Drop to Sonnet 4.6 or Gemini Flash for fast, cheap iterations. Reach for Fable 5 on the hardest problems, and open models (GLM, Sakana) when you need to self-host or control cost."
★
AITraining2U
Resource Handout
The 4 Core
Prompt Patterns
These four patterns cover 90% of what you'll do with vibe coding. Bookmark this slide.
Pattern 1 · Feature Request
Add: [feature name]
Behaviour: [what it does, step by step]
Constraint: [don't break X / stay under Y]
Use when adding something new to an existing build.
Pattern 2 · Debug
Error: [exact error text]
Expected: [what should happen]
Actual: [what's happening]
Fix: without breaking anything else
Use when something breaks. Never just "fix it."
Pattern 3 · Refactor
Refactor: [component or section name]
Goal: [cleaner / faster / readable]
Keep: all existing behaviour identical
Clean up messy code without changing what it does.
Pattern 4 · Deploy Prep
Check: mobile layout, load speed
Add: meta title, description, OG tags
Output: deploy-ready single HTML file
Run before every deployment. Catches common misses.
17 / 23
AITraining2U
Afternoon · Level Up Your Environment
Meet Antigravity
A local vibe-coding environment — not the browser sandbox you used this morning. Antigravity runs on your machine with a real terminal, a real filesystem, and real Git. Same prompting skills, far fewer limits.
📂
Local files
Your whole project lives on disk — not one file trapped in a tab.
⌨️
Real terminal
Run commands, install packages, start servers — right where you build.
🔀
Git built in
Version history, branches, rollbacks. Never lose a working version again.
🤖
Agentic edits
The AI edits many files at once across your project, not line by line.
The Antigravity editor with its Agent panel + Manager.
"Browser tools are training wheels. Antigravity is the bike."
★
AITraining2U
Pick your surface
Three Ways to Run Antigravity
Same engine, different surface — choose the one that fits how you work.
🪟
Start here
Antigravity 2.0 (IDE)
The full visual editor: file tree, panels, live preview, agent built in. Best for most builders.
🗔
Standalone (non-IDE)
The lighter app without the full IDE shell. Run agentic builds with less on screen — good for focused, single-flow work.
⌨️
Antigravity CLI
Terminal-based. Scriptable and automatable; fits power workflows, repeatable tasks, and CI.
"Start with 2.0 IDE. Reach for the CLI when you want to automate or script your builds."
★
AITraining2U
Afternoon · The Interface
Getting Around Antigravity
📝
Editor pane
The centre of the screen. Open, read and edit your code — or let the agent do it for you.
🗂️
File tree / explorer
Every file and folder in your project, down the side. Click to jump anywhere.
⌨️
Integrated terminal
A real command line, docked at the bottom. Run, install, deploy without leaving.
💬
Agent / chat panel
Where you prompt. Describe what you want; the agent edits files and runs commands.
👁️
Live preview
See your app render as you build, refreshing the moment files change.
What this unlocks that a browser sandbox can't: edit many files at once · run commands · install packages · use Git · connect MCPs.
★
AITraining2U
See it in motion
Antigravity in Action
The editor, the Agent Manager, and review policies — looping.
Hands-on
Your turn — 15 min
- Open Antigravity.
- Open the Agent Manager.
- Prompt it to build a simple landing page for your idea, then open the browser and screenshot it.
- Watch it plan → build → verify.
- Review the Artifacts: plan, screenshots, diffs.
Build a one-page landing site for my [idea]. Plan first, then build it, run it, open it in the browser, and show me a screenshot of the result.
AITraining2U
Afternoon · Choose Your Environment
When to Use Which
⚡
AI Studio
Start here
Best forQuick single-file builds, prototypes, landing pages
SetupBrowser sandbox — zero install
FilesOne main file
BackendLimited
DeploySync to GitHub → Vercel
CurveLowest — begin here
🛸
Antigravity
Level up
Best forMulti-file & full-stack apps, real databases
SetupLocal — terminal, filesystem, Git
FilesWhole project tree
BackendSupabase + integrations via MCP
DeploySame, with local control
CurveStep up when you outgrow the sandbox
"Start in AI Studio. Move to Antigravity when your idea needs real files, a database, or many moving parts."
★
AITraining2U
Afternoon · Supercharge Antigravity
Claude Code, Inside Antigravity
Antigravity supports the Claude Code extension — bring Claude's agentic coding right into your editor, alongside your files and terminal.
Agentic multi-file edits
Describe a change once; Claude touches every file it needs to across the project.
Runs commands + Git for you
Installs packages, starts servers, commits and pushes — without you leaving the editor.
Your Skills + MCPs inside the editor
Load specialised Skills and connect MCP servers right where you build.
// How to add it
1. Open the extensions panel in Antigravity
2. Install the Claude Code extension, then sign in
3. Start prompting — same as the chat panel, now Claude-powered
"It's the same Claude Code you'll meet in the terminal on Day 2 — but inside your editor."
★
AITraining2U
Afternoon · Supercharge Antigravity
Install a Skill: Taste
A Skill is reusable know-how you drop into the agent. The taste-skill gives Antigravity stronger design instincts — layout, typography, motion & spacing — so your builds stop looking generic.
Better-looking by default
Stronger layout, type, spacing & motion baked into every generation.
One-line install
Add it straight from GitHub with npx — works in Antigravity, Claude Code & Cursor.
Portable & open
It is just a SKILL.md file — drop it into any project or paste it into a chat.
// In Antigravity's terminal — install the skill
$ npx skills add https://github.com/Leonxlnx/taste-skill
// …or just one skill
$ npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"
"Install once — and every prompt inherits good taste."
★
AITraining2U
M5 · Deploy
Localhost is not a product.
A live URL is.
Step 01
npm install -g vercel
Install Vercel CLI globally. One-time setup.
Step 02
vercel
Run in your project folder. Preview URL in 60 seconds.
Step 03
vercel --prod
Promote to production. Share your live URL.
GitHub Auto-Deploy
→ Connect GitHub repo to Vercel dashboard
→ Every
git push triggers a redeploy→ Every PR gets its own preview URL
→ Roll back any deployment in one click
Today's targets
✓ Live URL #1 — your project
✓ Live URL #2 — dashboard build
→ WhatsApp your URL before lunch
12 / 23
AITraining2U
Superpower Unlocked
MCP Servers — AI with Real Access
MCP (Model Context Protocol) lets AI directly control your tools — not just suggest code, but actually act.
🗄️
Supabase MCP
Create tables, write queries, manage data, run migrations — AI controls your database directly.
🔥
Firebase MCP
Manage Firebase projects, read/write data, configure auth and rules through AI prompts.
🎭
Playwright MCP
AI controls a real web browser — navigate pages, click buttons, fill forms, take screenshots.
🐙
GitHub MCP
Create repos, manage issues, open pull requests — AI acts on your codebase directly.
▲
Vercel MCP
Deploy apps, check logs, manage projects — AI deploys your work without you touching the CLI.
What this means
Without MCP: AI writes code → you copy-paste → you run it. With MCP: AI executes directly. You describe "create a users table with email and name columns" — AI connects to Supabase and does it. The gap between idea and done collapses.
★
AITraining2U
Afternoon · A Peek Ahead
Skills — A Specialised Brain
Just awareness for today: a Skill loads expert focus for one job — so the AI thinks like a specialist, not a generalist. Use the built-ins, or write your own custom Skills.
🎨
UI/UX Pro Max
Pushes layout, hierarchy and polish toward production-grade interfaces.
🧩
Design-system skill
Keeps colours, spacing and components consistent across your whole app.
🎭
Playwright
Drives a real browser to test your app automatically — more on this tomorrow.
"Tomorrow we'll look at the most useful skills for vibe coding."
★
AITraining2U
Post-Lunch · Marcus-Led
Dashboard Build —
CSV to Live Charts
Step 01
Create the database
New project at supabase.com → Table Editor → import the CSV as a table.
Step 02
Connect it live
Add your Project URL + anon key. The dashboard reads rows in real time.
Step 03
Charts + filters
Prompt bar / line / pie, then filter by category, supplier or status.
Step 04
Deploy
Push to Vercel. Share Live URL #2 with the room before we move on.
13 / 23
AITraining2U
Ship It Right · Manual QA
Test Before You Call It Done
No automation yet — just a light, manual click-through. Five minutes of honest testing catches the bugs that embarrass you in front of a real user.
📱 Phone AND 💻 desktop
Open your live app on both. It should look right and work right on each.
🚶 Walk the main flow
Go through the core journey end to end, exactly like a real user would.
🖱️ Click every button
Every link, every action. If it's on screen, confirm it actually does something.
🧑 Not just you
Confirm it works for someone who isn't you — they don't know the happy path.
"Tomorrow we'll automate this with Playwright."
★
AITraining2U
Showcase B · Seeds for Day 2
What Else Can
Be Vibe Coded?
📱
React Native / Expo
Full iOS & Android apps from one codebase. Deployed to the App Store.
🌐
Chrome Extensions
Sidebar tools, page scrapers, AI writing helpers — all in a single prompt session.
⚡
Google Apps Scripts
Automate Sheets, Docs, Gmail, Calendar. Logic in plain language, AI generates the code.
🎮
Three.js / WebGL
Immersive 3D in the browser. Product showcases, data visualisations, interactive art.
"The limit isn't the technology. It's the clarity of your idea." — Tomorrow we go further.
15 / 23
AITraining2U
Honest Assessment
The Pros & Cons
✓ Advantages
Speed
Idea to working app in hours, not weeks. No syntax, no frameworks, no setup hell.
Accessibility
Anyone can build — product managers, designers, marketers, founders. No CS degree needed.
Fast Iteration
Changing direction is cheap. Don't like the layout? Describe what you want instead.
Lower Cost
For prototypes and internal tools, skip hiring a developer entirely.
Learning Tool
Even if you learn to code later, vibe coding teaches you to think in design and UX first.
⚠ Limitations
Code Quality
AI-generated code may be verbose, unoptimised, or use outdated patterns.
Complex Logic
Multi-step business logic and intricate state management are hard to express in prompts.
Debugging Difficulty
When something breaks, you may not understand the code well enough to fix it cleanly.
Security Risks
AI may not follow security best practices by default. Always review auth and data handling.
Ceiling Effect
Simple apps are easy. As complexity grows, vibe coding alone becomes a bottleneck.
★
AITraining2U
Day 1 Closing Activity
Project Scoping
Lock
Pitch your Day 2 idea in one sentence. Marcus reviews each scope live. A locked brief is what you build tomorrow.
Your one-sentence pitch
"I'm building [product]
for [user]
that solves [pain]
so they can [outcome]."
Scope check criteria
✓ Can this be built in one day?
✓ Is the user specific enough?
✓ Is there a real pain to solve?
Tonight's homework: Refine your PRD. Come tomorrow with a structured brief, not just an idea.
Lock It In 🔒
16 / 23
AITraining2U
Day 1 Complete
You shipped something
real today.
What you built
✓ A live, deployed web project
✓ A data dashboard
✓ A locked Day 2 brief
Tonight's homework
→ Refine your PRD
→ Set up tools
→ Come with questions
See you tomorrow at 9:00 AM sharp.
18 / 23