Vibe Coding - One Day Workshop

Overview

Quick overview of what we'll cover today

Steps

• Short intro to vibe coding
• Play around with Figma Make
• Lunch break
• Choose a project to focus on and get it online

Overview

We're going to ask the same computer to make the same thing four times. The only thing we'll change is how specific we are.

Steps

• Test 1: Write "make a todo list app" - see what happens with minimal instruction
• Test 2: Write "make a todo list app" + click the book icon and choose "web ui kit"
• Test 3: Write the detailed prompt (see below)
• Test 4: Design in Figma first, then take it to Figma Make

Tips

• Detailed Prompt for Test 3: "Make a to-do list web app. Use next.js, tailwind, shadcn. And help me make other tech choices you think I need. It should be very lightweight. For now it should only be front end code. We will add more complexity later, like adding a backend. We will use git and vercel for versioning and deployment."
• Notice how each level of specificity changes the output quality
• The more context you give, the better the result

Overview

Understanding the philosophy behind vibe coding and the landscape of AI building tools.

Steps

• Why this way? Just do it → Fuck around and find out → Fix it yourself
• We should test our ideas with the materials our products are made of: Inputs, latency, screen size, actual API data, and error states. Every tap, delay, and error message shapes what people feel about what we build.
• Getting our hands dirty with the actual building materials of our products and services

Tips

• Types of AI building: 1) Just a throwaway idea, 2) Explorations without a goal, 3) Make a prototype or test of something, 4) Make a thing from scratch intended to be used by others, 5) Working on an existing codebase
• So many tools out there: Lovable, Figma Make, Cursor, Claude Code, ChatGPT Codex, Base 22, Bolt New, Replit, Windsurf, Aura, Pencil, etc.
• They all want to be a one-stop shop, do-it-all tools
• Those winning the race at the moment: Claude Code, Cursor, Lovable

Overview

Hands-on exploration with Figma Make. Start with a design and turn it into working code.

Steps

• Setup Test 4: Open the Figma file at https://www.figma.com/design/fOQw5AgyXVkSCAFqakLKJ6/Task-list-with-shadcn-ui?node-id=105-1201
• Right click on the frame and click "send to Figma Make"
• Add the detailed prompt: "Make a to-do list web app. Use next.js, tailwind, shadcn. And help me make other tech choices you think I need. It should be very lightweight. For now it should only be front end code. We will add more complexity later, like adding a backend. We will use git and vercel for versioning and deployment."
• Continue building: Add new features like drag sorting, projects, animation when a task is done
• Change how it looks: Try something crazy like "what if Elvis designed this app for pensioners"
• Try something small: "move this button" or "change the color of..."

Tips

• Making things is a loop: Try → See → Adjust
• Very few decisions are permanent. You can't do much wrong here.
• Break things into small tasks and iterate

Resources

• Figma Design File

Overview

Pick a project to focus on for the afternoon and deploy it live to the web.

Steps

• Choose your project from the options beneath
• Open GitHub Desktop app and create a new project (this is your backup)
• Open Cursor and open that folder
• Put it in Plan mode (and Opus 4.5)
• Have a conversation with it about what you want to build. When you're happy, click the yellow Build button
• Build and iterate
• Agent mode and write "run localhost" to see what you build in the browser
• Each new task is a new agent
• Commit to GitHub after each new task is done
• When you are happy with a first version, go to Vercel → New Project → Link GitHub → Find your project and deploy

Project Suggestions