DayDreamers

Enter passcode to access materials

Contact the instructor for access

DayDreamers
Mastering Vibe Coding 1 / 13

Mastering Vibe Coding

Session 1 — The Vibe Coding Ladder & State of the Art

Vibe Coding Tools BRICK Framework Prototyping Lovable
press arrow to begin
DayDreamers
Recording 2 / 13
01 — Recording

Session Recording

Google Drive — Full Session Video

Complete Mastering Vibe Coding walkthrough, start to finish

Watch

Google Slides — Presentation Deck

Original slide deck used during the session

Open

Stay Updated

Watch the recording first, then use these slides as a reference while you build.

I Build A Thing

Demo project from session

Visit

Find My API Key

Demo project from session

Visit
DayDreamers
What is Vibe Coding 3 / 13
02 — Definition

What is Vibe Coding?

Vibe coding is the new frontier of creating more human-readable interactions with computers.

The Evolution: Machine → Human

Physical
1940s — Wiring
Machine Code
Punch cards
High-Level
Python, JS
Vibe Coding
Natural language
Vibe coding isn't completely new — it builds on decades of abstraction layers. Each generation makes computers more human-readable. Now, we use plain English.
DayDreamers
Core Principles 4 / 13
03 — Mindset

Three Core Principles

Don't ask "which tool should I use?" — ask "how do I pick the right tool?" Tools change every week. Principles endure.

1. Be Open-Minded

Embrace new tools as they emerge. Don't let a bad experience with GPT-3.5 stop you from trying GPT-5 or Claude. Models improve by magnitudes.

2. Be Curious

Break out of existing patterns. Attend hackathons, try new technologies, talk to builders. The possibilities expand when you explore.

3. Be Cautious

With great power comes great responsibility. Security vulnerabilities, IP concerns, data exposure — understand the risks before you ship.

Real example: A company used AI to check user credits. The AI had a bug that stopped checking when credits were low — resulting in $7,000+ lost overnight. Always have a human in the loop for critical logic.
DayDreamers
BRICK Framework 5 / 13
04 — Ladder

The Vibe Coding Ladder

BRICK Framework — Start Simple, Level Up

Browser
Magic Loops, Lovable
IDE
Cursor, Windsurf, Kiro
Cloud Agents
Codex, Cursor Cloud
Kernel / CLI
Claude Code, GitHub

Key Insight

Start with what you're comfortable with and level up gradually. Browser-based tools for quick prototypes, CLI tools for production-grade apps. You don't need to jump straight to the kernel.

Three Interfaces

  1. HCI — Human-Computer Interface (what users see)
  2. CLI — Command-Line Interface (where you prototype)
  3. AXI — Agent Experience Interface (how AI agents interact)
DayDreamers
Frontend Tools 6 / 13
05 — Frontend

Vibe Coding Tools: App Builders

Lovable

Full-stack app builder

Visit

Magic Loops

Visual app builder

Visit

V0 (Vercel)

AI UI generation

Visit

Bolt

Rapid prototyping

Visit

Replit

Browser-based IDE

Visit

Base44

App builder

Visit
Each tool generates code differently. Lovable uses Vite, V0 uses Next.js, Magic Loops outputs raw HTML/CSS. The core principles of prompting translate across all of them.
DayDreamers
IDE & CLI Tools 7 / 13
06 — IDE / CLI

Vibe Coding Tools: IDE & CLI

Cursor

AI-native code editor — model agnostic

Visit

Claude Code (Anthropic)

AI coding in your terminal

Visit

Windsurf

AI IDE (acquired by Cognition)

Visit

Kiro (Amazon)

Spec-driven AI IDE

Visit

Google AntiGravity / Gemini CLI

Google's AI coding environment

Visit

Cursor vs. Claude Code

Cursor — IDE with visual code editing, model-agnostic (switch between Claude, GPT, Gemini). Easier starting point.

Claude Code — Terminal-focused, deeper Anthropic integration, stronger planning mode and CLI commands. Pro tip: you can run Claude Code inside Cursor.

Claude Code and Codex are highest on benchmarks right now. Open-source models (like Qwen) are catching up, but frontier models still lead for complex tasks.
DayDreamers
Integrations 8 / 13
07 — Integrations

Integrations & Agentic Tools

Firecrawl

Website → structured API

Visit

Browser Use

AI browser agent

Visit

GitHub

Version control

Visit

How Agents Interact with the Web

Your App

Lovable / Cursor / Claude Code

Orchestrates the build — generates UI, logic, and connects to data

Scraping

Firecrawl

Turns any website into a structured API

Interaction

Browser Use

AI navigates sites like a human

Code

GitHub

Google Drive for code — share, version, collaborate

DayDreamers
Spec-Driven Dev 9 / 13
08 — Spec-Driven

Spec-Driven Development

Vibe coding is like rubbing a genie's bottle. Be specific about your wishes, or the genie will surprise you.

"Make me taller" → 30 meters. "Make me 6 feet" → exactly right.

Write a PRD First

  1. Use ChatGPT / Claude to draft a PRD from your idea
  2. Define problem, target users, core features
  3. Feed the PRD into Lovable, Cursor, or Claude Code
  4. Iterate with screenshots and specific feedback

The "5 Whys" Technique

Keep asking why you want to build something. Peel back the onion until you find the real problem. "Uber for housekeeping" might actually be "a habit tracker to motivate me to clean."

The fundamental problem shapes what you build.

Treat the AI like an intern: give clear instructions, provide reference screenshots, specify design styles (e.g. "brutalist design"), and review every change.
DayDreamers
Lovable Demo 10 / 13
09 — Demo

Building with Lovable

The Build Flow

Draft PRD
ChatGPT / Claude
Lovable
Paste into Lovable
Plan mode
Iterate
Screenshots + prompts
Add Integrations
Firecrawl, APIs
Publish
Custom domain
Lovable

Pro Tips

  • Use visual edits to point-and-click modify elements
  • Set a custom favicon to remove the Lovable branding
  • Add a custom domain (e.g. ibuildathing.com)
  • Try different design styles (brutalist, minimal, etc.)
  • Connect to GitHub to edit code elsewhere
GitHub

GitHub Integration

  1. Click GitHub icon in Lovable sidebar
  2. Connect your GitHub account
  3. Transfer project to a repository
  4. Now edit in Cursor, Claude Code, or any IDE
DayDreamers
IDE Workflow 11 / 13
10 — Workflow

Cursor + Claude Code Workflow

From Lovable to IDE

Lovable
Prototype
GitHub
Sync code
Cursor
Visual edits
Claude Code
Terminal power
Cursor

In Cursor

  1. Ask agent: "Clone this repo" + paste GitHub URL
  2. Ask: "Run this website locally"
  3. Use visual edits to point-and-click modify UI
  4. Ask: "Sync this code to GitHub"
Claude Code

In Claude Code

  1. Open terminal in Cursor (or standalone)
  2. Type claude to launch
  3. Describe changes in natural language
  4. Claude runs git commands, pushes to GitHub
Stick to one agent at a time for a given task. Rapidly switching between Cursor agent and Claude Code on the same files can cause out-of-sync issues.
DayDreamers
Ship & Monitor 12 / 13
11 — Ship

Deploy, Monitor, Comply

Vercel

Deployment

PostHog

Analytics

Compliance

Context management tip: Use a PRD / text file managed across sessions. Version control it with GitHub. As context windows get larger (Opus now supports 1M tokens), instruction following improves, but context dilution is still a real challenge.

SuperWhisper

Voice-to-text for faster prompting

Visit

Peter Steinberger's Blog

"Just Talk To It" — agentic coding

Read

"Your AGENTS.md is probably too long"

Best practices for AI instruction files

Read
DayDreamers
Next Steps 13 / 13
12 — Next Steps

Your Homework

This Week

  1. Think about what problem you want to solve and share in WhatsApp
  2. Create a Lovable or Magic Loops account
  3. Draft a PRD using ChatGPT or Claude
  4. Build your first prototype

Coming Up: Session 2

From Idea to Working Product — we'll build a full-stack app with a database, backend logic, and deploy it live. We'll also explore CLI-driven development with Claude Code.

Connect

LinkedIn

chinat-yu

MentorMates

mentormates.ai

Devpost

cyu60

Share your build in the DayDreamers community — what problem are you solving?