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 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.

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 V0

Runs entirely in your browser — nothing to install. You describe your site in plain language and V0 builds it live. Built for a room full of laptops on different setups.

There's a deeper "Developer Upgrade" lane — Git, a real code editor, your own deploy — we'll peek at it near the end.

Before you touch anything — just watch

Watch first. I'll build "Streaks" live in V0.

live demo script — what I'll type, in order

1. Describe the whole app: 3 sections, bright playful style
2. Add a checkmark animation when a habit is ticked
3. Make new habits show up in Today right away
4. Add a flame icon for any habit on a 3+ day streak
5. Publish it

You'll build this exact 5-step rhythm yourself later, at Station 05.

Debrief

What just happened

Idea	A tiny app to help me stick to a new habit.
Brief	Who it's for, what "done for today" looks like.
Blueprint	3 sections — Today, Add Habit, Streaks.
Build	Prompt by prompt, in V0, out loud.
Review + Fix	Caught a checkbox that didn't save, fixed it.
Share	Published — a real, live link.

Now it's you

Your turn.

Follow along and build "Streaks" 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 V0, in one 3-hour class. Keep every suggestion simple
enough to build with ONE V0 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 me to check off my habits and see my streak.

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

Today
Add Habit
Streaks

Features

Check off a habit
Add a new habit
See streak count

Rule of thumb: if a feature needs to work while the app is closed (reminders, notifications, alerts) — cut it. V0 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: Streaks

project-brief.md

Name: Streaks
Audience: Me — and anyone building a new habit
Goal: Check off habits, watch the streak grow
Tone: Playful, colourful, motivating

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: Streaks

build-blueprint.md

Section 1 — Today
  Purpose: see today's habits at a glance
  Content: a list of habits, each with a checkbox
  Action: tap the checkbox to mark it done

Section 2 — Add Habit
  Purpose: create a new habit to track
  Content: a name field and an emoji picker
  Action: tap "Add" to save it

Section 3 — Streaks
  Purpose: see progress build up over time
  Content: each habit's current streak count
  Action: tap a habit to see its history

Style: bright, one bold accent colour, big satisfying checkmarks

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 V0

1. Go to your V0 workspace, sign in with Google
2. Start a new 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 V0 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 the checkmark animate and turn green when I tap it"

Weak "add a form"

Strong "add a form to create a new habit with a name and an emoji picker"

Still stuck?

Ask AI to write the prompt for you

ask Gemini · ChatGPT · Claude

I'm using V0 (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 V0.

Then copy what it gives you, straight into V0.

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.

Publish in V0 → copy the 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.

⏱ 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 Developer Upgrade lane

Git & GitHub, a real code editor, your own Node project, deployed on Vercel. Same loop — more control.

academy.krackeddevs.com/academy/vibe-101

Keep building with us

Join KrackedDevs

1,800+ builders. Weekly classes. Monthly bounties.

krackeddevs.com Join link on screen

THANK YOU.

Questions? Now's the time.