+
+
+
+
KrackedDevs × KD Academy

VIBECODE & CHILL SESSION

Website Build Lab — vibe out, ship a real site today
Presented by Pali · KrackedDevs academy.krackeddevs.com/vibe-101
The promise

You'll 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 this

KrackedDevs & KD Academy

KrackedDevs is the hub for builders & devs — 1,800+ members, weekly classes, monthly bounties. KD Academy is where the classes live.
Taught by Pali · KrackedDevs
What you leave with

Three things you leave with

01
A published website
Live on the internet. Your own idea, your own link.
02
A repeatable method
Write a spec, build from it, check the work — reuse it on any idea, not just today's.
03
A community
People building in public, every week, not just today.
Set this up now

One shared key. Good until midnight.

We're running our own model server for tonight — no credit card, no signup, no personal API key. Everyone in the room uses the same one.
copy these three into your editor
Base URL   https://litellm.rapidscreen.io/v1
API key    (issued live in the session)
Model      gpt-5.4
  • Kilo or Cursor: add a Custom provider → paste the Base URL and the key → it auto-fetches the model
  • curl or the openai SDK: same Base URL and key, set model to gpt-5.4
Do it now, while it's calm — get it connected before we start building. The key is handed out live and switches itself off at 11:59 that night; bring your own after that, and never paste a real API key into a public repo or a deployed site.
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. Today, 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. Today 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

Spec Build Check Ship
Write the plan first. Build from it. Check every step. Ship it. One loop, every project.
Why we plan first

Spec-driven: write the plan, then build.

Prompt blind "Make me an app." You take whatever appears, patch it forever, and never quite get what you pictured.
Spec-driven Write a short spec first — what it is, its 3 sections, 3 features, and how you'll know it works. Then build from it, one step at a time.
A good spec = a good build. And here, the AI writes the spec with you — that's next.
Step 1 — write your spec with the AI

One prompt that plans the whole thing with you.

paste into an AI chat — Gemini · ChatGPT · Claude
You are my product coach. Help me — a total beginner — turn an app idea into a clear "build
spec" that I can paste into Google AI Studio to build a website. Guide me step by step.

RULES (follow all of these the whole way through):
- Ask me ONE question at a time, then wait for my answer. Use plain, everyday language — no jargon.
- Keep it SMALL: the app has exactly 3 sections and 3 features. Never more.
- Everything happens live, on the screen, right now. Nothing that needs to work while the app is
  closed — no notifications, reminders, emails, sign-ups, payments, or saving data between visits.
- It's a single web page. Keep every idea buildable as one simple app.
- THE TECH STACK IS FIXED: always Vite + React (JavaScript) with plain CSS. Never Next.js, never a
  backend or a database. Same stack every time, so building and publishing work the same for everyone.
- Be warm and encouraging, but calm and plain — no emoji, no hype, don't gush. Never dump a wall of text on me.

DO THIS IN ORDER, ONE STEP AT A TIME:

1) IDEA — Ask me what I'd like to build. If I'm not sure, suggest 3 simple example ideas and let
   me pick one. Then rewrite my idea as ONE clear sentence and show it to me.

2) SCOPE — Suggest exactly 3 sections and 3 features that fit my idea, each explained in one
   simple line. Ask me to confirm them or swap any. Do NOT continue until I say yes.

3) SOURCING — Ask me one thing and wait: for the DESIGN and the LIVE DATA, do I want YOU to pick
   specific ones for me, or would I rather browse and pick them myself?
   - For the live data, try Pasar API (pasarapi.xyz) FIRST — it's the default source; don't skip it
     to a raw source when Pasar has what I need.
   - If I say YOU pick: choose a specific design from designmd.ai (give me the exact link) and a
     specific API from pasarapi.xyz (give me its GET endpoint). Only recommend ones you can actually
     find — if you are not certain a link or endpoint is real, say so plainly and tell me to open it
     and confirm it works before I rely on it. Never invent a link or endpoint.
   - FALLBACK — if Pasar API genuinely has no API for what I need, say so, then suggest a real public
     one from elsewhere: free, no key, and fetchable from the browser. Same honesty rule — if you're
     not certain it's real, tell me to open it and confirm it loads first. Never invent an endpoint.
   - If I say I'll pick: give me a design vibe and a Pasar search term to browse; if Pasar has nothing
     for my need, tell me it's fine to find a free, no-key public API on the web instead.

4) THE PLAN — Once sourcing is settled, stop asking questions and write my plan in TWO parts, using
   the EXACT 3 sections and 3 features I locked in (not new ones). Do NOT invent a design or make up
   any data. Fill the design + data spots according to my sourcing choice (your picks, or my
   vibe/search-term to browse).

--- Before you paste: your design goes first ---
Put the design at the FIRST line of the Part 1 block below:
"Style the whole app using the design system at <the designmd.ai link>."
(If you picked the design, use the link you gave me. If I'm picking, I'll paste my own link here.)
Building it already-styled is cheaper than restyling later. If the design comes out generic, the
builder couldn't read the link — open the design, copy its TEXT, and paste that instead.

===== PART 1 · PASTE THIS INTO GOOGLE AI STUDIO =====

APP NAME: <name>
FOR: <who it's for>  ·  GOAL: <what it helps them do>

BUILD WITH (use exactly this — do not substitute):
Vite + React (JavaScript), plain CSS. One page, runs entirely in the browser.
No Next.js, no backend, no database.

SECTIONS (build these 3):
1. <name> — Purpose: <why> | Shows: <what's on it> | Main action: <what the user can do here>
2. <name> — Purpose: … | Shows: … | Main action: …
3. <name> — Purpose: … | Shows: … | Main action: …

FEATURES (make these 3 work):
1. <name> — When the user <does something>, then <what happens on screen>.
2. <name> — When the user …, then …
3. <name> — When the user …, then …

DONE WHEN (test each one after you build):
- When I <do X>, then <Y happens>.
- (write 5–7 of these — one for each section and feature, simple and checkable)
(If a field can't be filled without saving data between visits, note it — don't make it a test.)

BUILD ORDER (make ONE change per step, then test it before the next):
1. Build the 3 sections with placeholder text and a clear layout.
2. Make feature 1 work, then test it.
3. Make feature 2 work, then test it.
4. Make feature 3 work, then test it.
5. Show ONLY data the app actually has — don't invent numbers, ratings, prices, or live values.

===== END OF PART 1 =====


PART 2 · THEN MAKE IT REAL (do these yourself, in order)

1. DESIGN — if you picked it, I'll use the designmd.ai link you gave me at the top of Part 1. If
   I'm picking: my app suits a <describe the vibe in a few words> style — I'll go to designmd.ai,
   open a matching design, copy its LINK, and put it at the top of Part 1.

2. REAL DATA — add <the type of live data that fits> to <the section it fits in>, as an addition to
   that section, NOT a new 4th section or feature. Get it from Pasar API (pasarapi.xyz) first; if
   Pasar doesn't have one, use the free no-key public API the coach found instead. If you picked it,
   give me the GET endpoint. If I'm picking: search "<a search term>" on Pasar (or the web if Pasar
   has nothing), open an API, and copy its ENDPOINT (the "GET https://…" line) — do NOT paste Pasar's
   whole "Copy AI prompt" (it's written to build a brand-new page and hijacks your app). Either way, then
   tell AI Studio to ADD it to what you already built:
   "Add <the data> to <my section> using this live API: GET <endpoint> (JSON, no key). Show only the
    fields the API really returns; use my chosen <location>, don't guess it; show a clear message if
    it can't load; never show made-up values; don't let this break the rest of the app; and don't
    create a new page — add it to my existing app."

3. PUBLISH — in AI Studio, hit Publish (free), copy the live link, and share it. Because it's a
   plain Vite app, it also builds anywhere else: "npm run build" makes a "dist" folder you can drag
   onto Vercel or Netlify.

Finally, tell me in one line: "Copy Part 1, open aistudio.google.com, sign in with Google, and
paste it as your first message. Then work down Part 2 — one change at a time, test after each."
Answer its questions, then copy the block it hands you. It even suggests a design and where to find real data. Next, we open AI Studio and build from it — together.
What that prompt is actually doing

It interviews you, then hands you two blocks.

Idea Scope Sourcing The plan
One question at a time: what you're building — then it locks you to exactly 3 sections and 3 features — then it settles your design and your live data. Only then does it write the plan.
The two blocks it hands back

Part 1 builds it. Part 2 makes it real.

Part 1 · one paste Your whole app in one block — design link on the first line, the tech stack, your 3 sections, your 3 features, and a checklist to test it against. Paste it once and watch it build.
Part 2 · one paste + your judgement The part the AI can't do for you — wire in the real live data, catch the bits it faked, then publish. Same paste-and-go, but you check the work.
You don't need to read the whole prompt. Answer its questions, then work down the two blocks it gives you — in order, one at a time.
What the prompt hands you — a worked example

Expect a plan like this.

example output · Fuel Use Tracker
Style the whole app using the design system at https://designmd.ai/chef/minidash.
Keep it clean, spacious, mobile-friendly. Don't add extra pages, navigation, charts, or features
outside this specification.

===== PART 1 · PASTE THIS INTO GOOGLE AI STUDIO =====

APP NAME: Fuel Use Tracker
FOR: Drivers  ·  GOAL: Track fuel usage, cost, and efficiency during the current visit

SECTIONS (build these 3):
1. Fuel Entry — Purpose: enter fuel details | Shows: distance, fuel used, price per litre | Main action: add a fuel entry
2. Trip List — Purpose: all entries this visit | Shows: distance, fuel, price, cost, km per litre | Main action: review entries
3. Usage Summary — Purpose: overview | Shows: total distance, total fuel, total cost, avg efficiency, and a space for Malaysia's latest weekly fuel prices | Main action: check overall usage

FEATURES (make these 3 work):
1. Add Entry — When the user enters valid details and selects Add Entry, the entry appears in the Trip List.
2. Calculate Efficiency — When the user adds an entry, the app calculates fuel cost and km per litre and updates the Usage Summary.
3. Clear Tracker — When the user selects Clear Tracker, all entries disappear and the Usage Summary resets.

DONE WHEN (test each one after you build):
- When I open the app, I see Fuel Entry, Trip List, and Usage Summary on one page.
- When I enter valid distance, fuel, and price, I can add the entry.
- When I add an entry, it appears in the Trip List.
- When I add an entry, km/litre = distance ÷ fuel used, and cost = fuel used × price.
- When I add more entries, the Usage Summary totals and average update.
- When I select Clear Tracker, everything resets.
(The app doesn't save between visits — refreshing clears it.)

BUILD ORDER (make ONE change per step, then test before the next):
1. Build the 3 sections with placeholder text and a clean MiniDash layout.
2. Make feature 1 work, then test it.
3. Make feature 2 work, then test it.
4. Make feature 3 work, then test it.
5. Show ONLY data the app actually has — don't invent prices, totals, or live values.

===== END OF PART 1 =====


PART 2 · THEN MAKE IT REAL

1. DESIGN — MiniDash is already on the first line of Part 1. After the build, check all 3 sections
   stay on one page and the design didn't add extra nav, pages, or features.

2. REAL DATA — add Malaysia's latest weekly fuel prices inside the Usage Summary (not a new
   section). Find the fuel-price API on Pasar API, then tell AI Studio:
   "Add Malaysia's latest weekly fuel prices inside the existing Usage Summary using this live API:
   GET https://api.data.gov.my/data-catalogue?id=fuelprice&filter=level@series_type&sort=-date&limit=1
   Show the returned date and the prices for RON95, RON97, BUDI95, Peninsular diesel, and East
   Malaysia diesel. Label it 'Latest weekly fuel prices'. Show only fields the API returns; don't
   invent missing values. If it can't load, show 'Fuel prices are currently unavailable'. Don't let
   an API error break the tracker. Don't create a new page or section — add it only inside Usage Summary."
   Test: tracker still works when the API loads AND when it fails; the date comes from the API;
   no made-up prices; the info stays inside Usage Summary.

3. PUBLISH — hit Publish (free), copy the live link, share it.
Two pastes: Part 1 builds your app (design's already on line 1); Part 2 wires in the real data — then you publish. Yours will match your idea.
No separate design step — the prompt set it

Your design is already in Part 1.

Your design was set back in the Sourcing step — a designmd.ai link, already on the first line of Part 1. Nothing to grab now: paste Part 1 and AI Studio builds it already-styled. Restyling later is slower and can break what works — this skips it.
Sourcing (in the prompt) Link on line 1 of Part 1 Paste Part 1 Built already-styled
Tested live: AI Studio fetched the designmd.ai link and applied the real design. If yours comes out generic, the builder couldn't read the link — open the design, copy its text, and paste that at the top instead.
Where we build

We build in Google AI Studio.

Runs in your browser — sign in with a Google account, nothing to install. You describe your site in plain language and it builds it live.
  • 1. Go to aistudio.google.comBuild (sign in with Google)
  • 2. Start a new app
  • 3. Paste the spec block the coach gave you as your first prompt
Do it now, while it's calm: open AI Studio and sign in, so there's no scramble when we start building.
Build — the first paste

Paste Part 1. Watch it build.

AI Studio reads your whole spec and builds your app — all 3 sections and the 3 features — in one pass, styled by your design link.
Get the whole thing on screen first, then run the loop: test it, verify it against the spec you wrote.
The loop you run on it

Build → Test → Verify.

the loop — it builds in one go, you check it
Build    paste Part 1 → AI Studio builds the whole app
Test     click through every section and feature
Verify   does each one match your DONE WHEN list?
It builds in one pass — you don't add features one at a time. If something's off, ask for one small fix, then test again. Small fixes beat one giant re-prompt.
While you build

Prompt like this, not like that

Weak "make it look better"
Strong "make the hero heading bigger, and centre it on mobile"
Weak "add a button"
Strong "add a green CTA under the form that says 'Add entry'"
Weak "it's broken"
Strong "when I click Add entry, nothing appears in the list — fix that"
Name the exact thing, say exactly what it should do. Vague words get vague apps.
Say the right word

Know the terms. Get what you mean.

CTA
The one button you most want tapped. "Make the CTA say Book now."
Hero
The big headline section at the top. "Add a hero with the app name."
Card
One boxed unit, repeated in a list. "Show each entry as a card."
Dropdown
Tap to pick one option from a menu.
Carousel
A row of cards you swipe sideways.
Chevron
The small › arrow meaning "more this way".
Modal
A pop-up dialog over the page. "Open the details in a modal."
Empty state
What shows before there's any data. "Say No entries yet."
Loading state
What shows while live data loads. "Show a loading state."
The right word = the AI builds the right thing.
Part 1 done · halfway

BREAK

You've got a working app. Stretch, then Part 2 — make it real.
⏱ 10 min
Before you trust it

The AI will fake it. Your job is to check.

AI slop A "live" weather panel, a rating, a map, a price — polished, confident, and completely made up. It calls nothing real.
Real Real data comes from a real source — an API you wired in. If you didn't connect it, it isn't real, no matter how good it looks.
Same app, same AI. The only difference is whether you checked the work. That's the whole job.
Make it real — the second paste

Paste Part 2. It wires the real data.

Part 2 of your plan is the make-it-real step — it already has the exact instruction to add your live data. Paste it into AI Studio (the app you built in Part 1) and it wires the API into what you already made — no rebuild, no new page.
Then check: the AI still fakes gaps — a null shown as "No price cap", a made-up value. Tell it to remove anything the data doesn't actually have.
Look at it like a user

Review. Fix one thing.

  • Open your site and click around like a first-time visitor.
  • 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.
You don't need it perfect. You need it real, and honestly yours.
Ship it

Publish. Share the link.

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

You just ran the whole loop

Spec Build Check Ship
Spec it, build it, check it, ship it. Use it again on the next idea — it doesn't get old.
Going further — what real apps are made of

What you built is just the front.

Frontend
What you built today — the page people see and tap. Runs in the browser.
Backend
The engine behind it — the logic, the rules, and secret keys that must never touch the browser.
Database
Where data is kept, so it's still there tomorrow.
Today you built the frontend. A "real" app adds a backend and a database. Knowing the three pieces tells you what you're actually taking on next.
Going further — remembering data

Want it to remember? That needs a database.

Your app forgets everything on refresh — on purpose. The moment you want it to save tasks, accounts, or history between visits, you've crossed from a toy into a real app, and you need somewhere to store it (a database like Supabase).
That's not a flaw in today's build — it's the next rung. Ship the small live app first; add storage when you actually need it.
Going further — don't ship holes

The AI won't secure it for you.

Common footguns Secret API keys pasted into the frontend (anyone can read them). No check on who can see or change data. Trusting whatever the browser sends.
The habit Keys live in the backend, never the browser. Decide who's allowed to do what. Treat every input as hostile until you've checked it.
Security isn't a nice-to-have. Vibe-coded apps ship holes because the AI doesn't threat-model — that part is on you.
Going further — real people's data

A prototype is free. Real data is a responsibility.

The moment your app collects real personal data — name, email, phone, IC number — it stops being a toy. In Malaysia the PDPA applies: get consent, collect only what you need, keep it safe, and be ready if it ever leaks.
Fine to vibe-code Prototypes with fake or sample data. Your own stuff. Nothing that identifies other people.
Get proper help first IC, health, payments, biometrics, or anyone else's personal data. Don't vibe-code this solo — bring in a real developer and proper advice.
Not to scare you off — to mark the line. Move fast and free on the toy side; slow down and get help the moment real people's data is involved.
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 a build 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 your project.
krackeddevs.com/login
Scan to create your account
KrackedDevs Kuntum KD Academy
The KrackedDevs ecosystem
You built it — now show it · Step 2

Submit to the KD Project Showcase

Put your site on the KrackedDevs Showcase — get seen, collect votes, and get feedback from the community.
krackeddevs.com/showcase/submit
Register first · then submit
KD Academy
Keep learning

KD Academy

Where the classes live — tracks, workshops, and the full guide to what you built today. Free to start.
academy.krackeddevs.com
The KrackedDevs ecosystem · Jobs

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
The KrackedDevs ecosystem · Networking

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

THANK YOU.

Questions? Now's the time.