One Day Workshop
Learn to build with AI tools through hands-on exploration
Quick overview of what we'll cover today
Short intro to vibe coding
Play around with Figma Make
Lunch break
Choose a project to focus on and get it online
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.
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
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
Understanding the philosophy behind vibe coding and the landscape of AI building tools.
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
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
Hands-on exploration with Figma Make. Start with a design and turn it into working code.
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..."
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
Break for lunch
Pick a project to focus on for the afternoon and deploy it live to the web.
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
Improve your first build — Add one feature you wished it had. Teaches incremental development.
If you have an idea you want to explore
Key terms and concepts for understanding how tech and design connect when building with AI tools.