+
+
+
+
SDFC × KrackedDevs

VIBECODE & CHILL SESSION

Website Build Lab — vibe out, ship a real site tonight
6:00 PM – 9:00 PM Presented by Pali · KrackedDevs academy.krackeddevs.com/vibe-101
Tonight's promise

In 3 hours, you ship a real website.

No prior coding experience needed. You bring the idea — the AI writes the code. You stay in charge of whether it's actually good.
Who's running tonight

KrackedDevs

The hub for builders & devs — 1,800+ members, weekly classes, monthly bounties.
Tonight, hosted by Sunway DealFlow Club (SDFC) · taught by Pali · KrackedDevs
What you leave with

Three things, by 9pm

01
A published website
Live on the internet. Your own idea, your own link.
02
A repeatable method
KD Flow Lite — use it again on your next idea, not just tonight's.
03
A community
People building in public, every week, not just tonight.
First, the concept

What is vibe coding?

You describe what you want, in plain language. The AI writes the code. You read it, test it, and decide if it's right.
It's not "no effort" — it's a different kind of effort.
The catch nobody tells you

It's not magic. And it's not automatic.

The myth Type one prompt → a finished system appears → you're done. The AI is smart, so whatever it hands back must be good.
The reality The AI is fast, not right. Left unchecked it produces "AI slop" — confident, polished, and quietly wrong. Reading it, testing it, and steering it IS the skill.
Prompt without judgment = slop. Prompt with judgment = a real product. Tonight, we practise the judgment.
The mindset that changes everything

You're not a prompter. You're the architect.

A prompter Types "make me an app", takes whatever appears, and hopes it works.
A builder / architect Decides what to build, scopes it, directs the AI, checks every output, and owns the result.
The AI is your builder — you hold the plan. Tonight you practise being the architect, not the person typing wishes.
AI helps with speed.
You still judge the work.
— KD FLOW LITE, RULE #1
The method

Meet KD Flow Lite

Idea→ Brief→ Blueprint→ Build→ Review→ Fix→ Share
One loop. Every project, every time.
How tonight is structured

Tonight, in 8 stations

  • 01 Idea Lock
  • 02 Scope Guillotine
  • 03 Brief Lock
  • 04 Blueprint Lock
  • 05 Lane Lock
  • 06 First Build
  • 07 Review Mirror
  • 08 Share Proof
Each station ends with a lock — a real output, not just a discussion.
Tonight's lane

We're building in Google AI Studio

Runs entirely in your browser — sign in with a Google account, nothing to install. You describe your site in plain language and AI Studio builds it live. Built for a room full of laptops on different setups.
There's a deeper lane too — Antigravity, a real AI coding tool on your own machine. I'll give you a live peek near the end.
Do it now, while it's calm: open aistudio.google.com and sign in with Google. Getting sign-in out of the way early means no scramble when we start building.
My script — think it through in an AI chat first

Stations 1-2: Idea → Scope

1 · Idea — ask Gemini / ChatGPT / Claude
Here's my rough idea: find & message a local home-service pro. Help me turn it into one clear sentence.
2 · Scope
My idea is [paste the one-liner]. Suggest exactly 3 sections and 3 features — nothing more. Nothing that needs to work while the app is closed, like notifications — everything happens live, on screen, right now.
Read each reply before the next — that's the "you still judge the work" part. Keep it all in one chat.
My script — brief, blueprint, then into AI Studio

Stations 3-4: Brief → Blueprint

3 · Brief
Using my idea and the 3 sections + 3 features I just gave you, write me a short project brief — Name, Audience, Goal, Tone — one line each, consistent with that scope.
4 · Blueprint
Using the EXACT 3 sections and 3 features from earlier — not new ones — plus my brief, turn it into a blueprint: for each section give Purpose, Content, Action; for each feature give Trigger and Feedback. Nothing that needs to fire while the app is closed, like reminders or notifications.
Then: paste the finished blueprint straight into AI Studio as the first prompt — that's the build.
The build — Stations 5-8

Build from the Blueprint, one change at a time.

the build — one change per step, test after each
Build  paste the Blueprint → AI Studio builds JomFix
Test   tap a category, open a card, hit WhatsApp → it does nothing
Fix    "The Call/WhatsApp button should open WhatsApp with the provider's number."
Add    "Add an 'Available Today' toggle that shows only free providers."
Live   add today's real petrol price — a live API from Pasar API
Share  Publish (free) → open the live link
One change per prompt. Test after every one. You'll run this exact loop yourself at Station 06.
Debrief — did you catch it?

One of these is real. One is slop.

Real The petrol price — pulled live from the official government fuel-price API. A real number, right now.
AI slop The weather panel — "synced with MET Malaysia," neat per-service advisories… all hardcoded. Invented. It calls nothing.
Same app, same AI. The only difference is whether I checked the work. That's the whole job.
How the live data got in

Real data? Grab it from Pasar API.

The kicker: a real, live MET Malaysia weather API was on Pasar API the whole time — the AI just faked the weather instead of using it. Pasar API is KrackedDevs' directory of Malaysian APIs. Open one and it hands you a ready-made "Copy AI prompt" — paste it straight into AI Studio and it wires the live data for you.
Search Pasar API→ Open an API→ Copy AI prompt→ Paste into AI Studio→ Live data
Shortcut, if your AI can browse: skip the copy — paste the API's permalink and say "Fetch pasarapi.xyz/a/weather-forecast, find the API endpoint on that page, and connect it to my app."
pasarapi.xyz · 1,400+ Malaysian & global APIs · no auth, copy-paste ready
Now it's you

Your turn.

Follow along and build "JomFix" with me — or bring your own idea. Same 8 stations either way.
One more trick before you start

Stuck on wording? Ask an AI chat first.

Step 0 — paste this first, once
ask Gemini · ChatGPT · Claude
For this whole chat: I'm a complete beginner building a simple
website in Google AI Studio, in one 3-hour class. Keep every
suggestion simple enough to build with ONE AI Studio prompt and test
with a single click — no animations, sound, timers, live charts, or
anything that needs the app to stay open. Use plain, concrete words,
not marketing language like "platform" or "dashboard".
Step 1 — then paste your idea
ask Gemini · ChatGPT · Claude
Here's my rough idea: [your words].
Help me turn it into ONE clear sentence, no alternatives:
"[what it is] for [who it's for]."
Read each reply before asking for the next step — that's the "you still judge the work" part. Fine to keep going in the same chat the whole time.
01
Idea Lock

Write your idea in one line

[What it is] for [who it's for].
example
A tiny app for anyone in Malaysia to find and message a local home-service pro.
Stuck? Ask AI: "Here's my rough idea: [your words]. Help me turn it into one sentence."
⏱ 5 min
02
Scope Guillotine

3 sections. 3 features. That's it.

Cut everything else — tonight's win is a working site, not a perfect one.

Sections

  • Service Hub
  • Provider Board
  • Connect

Features

  • "Available Today" toggle
  • Tap to WhatsApp
  • Quick star rating
Rule of thumb: if a feature needs to work while the app is closed (reminders, notifications, alerts) — cut it. AI Studio builds what's on screen; it can't run in the background.
Stuck? Ask AI: "My idea is [your one-liner]. Suggest exactly 3 sections and 3 features — nothing more. Nothing that needs to work while the app is closed, like notifications — everything happens live, on screen, right now."
⏱ 10 min
03
Brief Lock

How to write a project brief

project-brief.md
Name: what do you call it?
Audience: who is this for?
Goal: the ONE thing it should do
Tone: how should it feel — playful? calm? bold?
Stuck? Ask AI: "Using my idea and the 3 sections + 3 features I just gave you, write me a short project brief — Name, Audience, Goal, Tone — one line each, consistent with that scope."
⏱ 10 min
Station 03 · Worked example

Example: JomFix

project-brief.md
Name: JomFix
Audience: Malaysians who need a home fix — plumbing, air-cond, electrical
Goal: Find a nearby pro and message them in seconds
Tone: Clean, friendly, trustworthy
04
Blueprint Lock

How to write a build blueprint

For each of your 3 sections, answer 3 things. Do the same for each feature.
build-blueprint.md
Section [1] — [name]
  Purpose: why does it exist?
  Content: what's on it?
  Action: what can they click or do?

Feature [1] — [name]
  Trigger: what starts it?
  Feedback: what do they see happen?
Stuck? Ask AI: "Using the EXACT 3 sections and 3 features from earlier — not new ones — plus my brief, turn it into a blueprint: for each section give Purpose, Content, Action; for each feature give Trigger and Feedback. Nothing that needs to fire while the app is closed, like reminders or notifications."
⏱ 10 min
Station 04 · Worked example

Example: JomFix

build-blueprint.md
Section 1 — Service Hub
  Purpose: start here, find the help you need fast
  Content: a search bar + category icons (Plumbing, Air-Cond, Electrician, Runners)
  Action: tap a category to filter the providers

Section 2 — Provider Board
  Purpose: see local pros for that category
  Content: cards with name, service, rate, star rating
  Action: tap a card to open its details

Section 3 — Connect
  Purpose: reach the provider now
  Content: a slide-up panel: profile, hours, Call/WhatsApp button
  Action: tap Call/WhatsApp to message them

Live data: today's real petrol price, from an API found on Pasar API
Style: clean, friendly, trustworthy, one accent colour, a Malaysian touch
A quick word from our sponsors

Land your next job in a single chat.

Kuntum — an AI recruiter on WhatsApp & Telegram, from the KrackedDevs team. No leceh forms, no spam.
kuntum.app
Scan to have a look
Stretch, refill, reset

BREAK

Ask a helper anything. We're back in 10.
⏱ 10 min
And we're back — one more from our sponsors

One scan. Everything that matters.

JomQR — an all-in-one networking card. One QR gives people your links, socials and contact, neatly organised.
jomqr.my
Scan to have a look
05
Lane Lock

Get into Google AI Studio

  • 1. Go to aistudio.google.com → Build (sign in with Google if you haven't)
  • 2. Start a new app / project
  • 3. Paste your Blueprint in as your first prompt — not your Brief
Your Brief was for you, to stay focused. Your Blueprint is what AI Studio actually builds from — fold in the Brief's one-line Tone as a style note.
Tonight's 5-Prompt Pack: Describe → Add a section → Fix something broken → Change the look → Add one feature
⏱ 10 min
06
First Build

Build it.

Prompt by prompt, follow your Blueprint. Small steps beat one giant prompt.
Stuck? Raise your hand — a helper comes to you.
⏱ 40 min
While you build

Prompt like this, not like that

Weak "make it look better"
Strong "make each provider card show the star rating in gold, right-aligned"
Weak "add a form"
Strong "add a green WhatsApp CTA button that opens a chat with the provider, pre-filled: 'Hi, I found you on JomFix'"
Say the right word

Know the terms. Get what you mean.

CTA
"Call to action" — the one button you most want tapped. "Chat on WhatsApp", "Book now".
Dropdown
A menu that opens when you tap it, to pick one option.
Carousel
A row of cards you swipe or scroll sideways.
Chevron
The small › arrow that hints "there's more this way".
Modal
A pop-up dialog that opens over the page.
Hero
The big headline section at the top of a page.
The right word = the AI builds the right thing. Vague words get vague apps.
Still stuck?

Ask AI to write the prompt for you

ask Gemini · ChatGPT · Claude
I'm using Google AI Studio (a website builder) and I want it to [describe what you want, in your own words].
Help me turn this into one clear instruction I can paste into AI Studio.
Then copy what it gives you, straight into AI Studio.
07
Review Mirror

Pair up. Review. Fix one thing.

  • Open your partner's site.
  • Find one thing that's confusing.
  • Find one thing that's broken.
  • Find one thing you'd change.
  • Go back and fix just one of them.
⏱ 15 min
08
Share Proof

Publish. Share the link.

In AI Studio, hit Publish (it's free) → copy your live link → post it in the group chat.
MinimumPlanned, a screenshot, and you can explain it.
GoodMinimum, plus one real review and fix applied.
StrongA published, live URL anyone can open.
⏱ 10 min
Look back

You just ran the whole loop

Idea→ Brief→ Blueprint→ Build→ Review→ Fix→ Share
Use it again on the next idea. It doesn't get old.
Ready for more?

The next lane: Antigravity

A real AI coding tool on your own machine — it builds actual projects you own, edits real files, and runs its own tasks. Same KD Flow Lite loop, more power.
Watch — I'll take tonight's JomFix idea into Antigravity, live. Full guide: academy.krackeddevs.com/academy/vibe-101
The real-dev stack

Git · Vercel · Supabase

Git & GitHub
Version control. Save every change, undo anything, work as a team. GitHub is where the code lives online.
Vercel
Deploy & hosting. Push your code and it goes live with a URL — like AI Studio's Publish, but for real projects.
Supabase
Your database & backend. Store users, logins, and data that needs to stick around.
AI Studio hides all this. Antigravity + these three is how real apps get built and shipped.
Level up · dev stack 1 of 3

Git & GitHub

Version control — a save history for your whole project. Undo anything, try ideas safely, never lose work.
Commit
A save point with a note. Roll back to any of them, anytime.
Branch
A parallel copy to try something — without breaking what already works.
GitHub
Your code's home online: backup, teamwork, and a portfolio employers actually check.
Free · github.com
Level up · dev stack 2 of 3

Vercel

Turns your code into a live website. Connect your GitHub once — every push updates the live site automatically.
Auto-deploy
Push to GitHub → live in seconds. No servers to set up or manage.
Preview links
Every change gets its own test URL before it goes live.
Custom domains
Point yourname.com at it when you're ready. Generous free tier.
Free to start · vercel.com
Level up · dev stack 3 of 3

Supabase

The backend beginners actually understand — a real database, logins, and file storage, without building a server.
Database
A real Postgres database with a friendly, spreadsheet-like table editor.
Auth
Email and Google logins wired up in minutes, not days.
Storage + APIs
File uploads and instant APIs to your data, out of the box.
Free tier · supabase.com
Level up · what to build with

The popular, beginner-friendly stack

What most AI builders output — and what most modern sites run on. Learn it and everything else clicks.
Next.js + React
Build web apps out of reusable "components" — the most popular way to make modern sites.
Tailwind CSS
Style fast with ready-made classes — no separate CSS files to wrangle.
TypeScript
JavaScript with guardrails that catch mistakes before they ship.
React + Tailwind + TypeScript, shipped on Vercel, powered by Supabase — the whole modern stack.
Keep building with us · Step 1

Register on KrackedDevs

Your free account = weekly classes, monthly bounties — and the key to submit tonight's project.
krackeddevs.com/login
Scan to create your account
KrackedDevs Kuntum
The KrackedDevs ecosystem
You built it — now show it · Step 2

Submit to the KD Project Showcase

Put tonight's site on the KrackedDevs Showcase — get seen, collect votes, and get feedback from the community.
krackeddevs.com/showcase/submit
Register first · then submit

THANK YOU.

Questions? Now's the time.