Vibe Coding Workshop

Copy-paste hub for the 2-day workshop. Prompts, links, and resources you'll need as we build.

Setup & Resources

Bookmark these before we start.

πŸ”—

Workshop Handbook

Link
πŸ”—

sample-accounting.csv (Session 4 dashboard)

Link

Session 3 β€” Landing Page

One prompt. Drag a screenshot reference in with it.

πŸ€–

THE landing page prompt β€” paste this, fill the brackets

AI Prompt
Use the Design skill.

Build me a landing page for [YOUR COMPANY NAME]. We are a [industry] business based in [city]. We offer [2-3 key services/products].

Use the attached screenshot as design reference οΌ› match the style, layout, and feel.

Include: hero, why us, 3 features, reviews, pricing, contact, footer.

…
πŸ”—

Pinterest β€” find design references

Link
πŸ”—

Dribbble β€” landing page references

Link

Session 4 β€” Dashboard

Drop the CSV into your project folder, then paste the prompt.

πŸ€–

THE dashboard prompt β€” paste this, don't retype

AI Prompt
Use the Design skill.

I've attached sample-accounting.csv οΌ› 6 months of my business transactions.

First, check the CSV columns and ask me if anything is unclear about the data before you start.

Then turn it into a dashboard showing:
- 4 KPI cards: total revenue, total expenses, net profit, profit margin
…
πŸ€–

Pro tip β€” understand what you just built

AI Prompt
Explain what you just built in simple terms. What does each part do? Pretend I'm a business owner, not a developer.
πŸ€–

Claude in Chrome β€” let Claude test your app

AI Prompt
Open my dashboard in Chrome, take a screenshot of each chart, and tell me if anything looks broken.

Session 5 β€” HR App (Plan Mode)

Switch Claude to Plan mode first. Then describe the PROBLEM, not the solution.

πŸ€–

⭐ The problem prompt β€” plan first, then build

AI Prompt
Use the Design skill.

I run a logistics company with 30 drivers. My daily problems:

- I don't know who clocked in today
- Drivers claim allowances on WhatsApp β€” I lose track
- OT calculation is manual and always wrong
- Payroll day takes me 2 full days
…

Session 6 β€” Ship It (Supabase + GitHub + Vercel)

Run these in order. Check your Connectors health first.

πŸ€–

Pre-deploy check β€” before anything goes online

AI Prompt
Before we put my code online, check it for anything I shouldn't share publicly:
- passwords or secret keys
- customer data
- anything a stranger shouldn't see

Fix whatever you find.
πŸ€–

⭐ Supabase β€” make my data permanent

AI Prompt
Make my HR app data permanent using Supabase.

Right now when I close my laptop, everything disappears. I want it to STAY οΌ› drivers, clock-ins, allowances, OT, payroll, all of it.

First, look at my existing app to see what it actually needs to remember. Ask me about anything unclear (e.g. what details belong on each driver or allowance). Then give me a plan before touching Supabase.

Call the Supabase project hr-[myname]. Once I approve the plan, handle the tech οΌ› I just want to stop losing my data.
πŸ€–

Test β€” prove your data is permanent

AI Prompt
Show me the most recent check-in from my Supabase data.
πŸ”—

GitHub β€” new repo

Link
πŸ€–

⭐ Push to GitHub

AI Prompt
Put my HR app on GitHub so Vercel can deploy it later.

Here's my empty repo: [paste your repo URL here]

Before pushing, double-check that nothing private goes public β€” no passwords, no Supabase keys, no credentials. Handle the tech.

If GitHub asks me to sign in, walk me through it.
πŸ€–

⭐ Vercel β€” ship to production

AI Prompt
Put my HR app online using Vercel. Use my GitHub repo hr-[myname].

Handle the tech β€” install whatever you need, log me in if you have to, walk me through any browser popup.

Before deploying, make sure my Supabase connection details also exist on Vercel so the live site can reach my data (the laptop version does; the live one needs the same). Ask me if anything is ambiguous.

Set it up so future changes I push to GitHub auto-deploy. If anything asks which account/team to use, pick my personal one.

…
Vibe Coding Workshop Β· workshop.joinvibecode.io