2026 hands-on masterclass

바이브 코딩
MVP Masterclass

A practical guide to taking an idea
into a shippable MVP in four hours

Claude CodeVibe CodingMVP strategyLaunch ready
Use ← → keys or swipe to navigate
1 / 11

Vision, principles, deliverables

The three pillars behind a strong vibe-coding workflow

🎯
Target

Target

  • ▸An MVP you can finish in four hours
  • ▸A service you can actually deploy
  • ▸A codebase you can maintain later
  • ▸An architecture you can grow from
🧭
Philosophy

Principles

  • ▸AI is a tool, humans make the call
  • ▸Guardrails first, speed second
  • ▸Reuse proven patterns
  • ▸Keep the stack deliberately small
📦
Output

Deliverables

  • ▸A working product
  • ▸A documented architecture
  • ▸AGENTS.md + CLAUDE.md
  • ▸A deployment pipeline
2 / 11

Four-hour roadmap

A structured execution plan, step by step

0:00
30m
Environment
Set up the workspace
Write AGENTS.md
0:30
45m
Scope the idea
Draft the PRD
Choose the stack
1:15
60m
Build the MVP core
Ship the key feature
Define the DB schema
2:15
45m
Finish UI/UX
Implement the interface
Make it responsive
3:00
30m
Integration test
Run end-to-end checks
Fix bugs
3:30
30m
Deploy & verify
Push to production
Add monitoring
💡 Each stage can be validated on its own, then refined with AI in loops
3 / 11

Guardrailed
vibe-coding loop

A five-step feedback loop for collaborating with AI and improving the product continuously

🛡️ What is a guardrail?
AGENTS.md and CLAUDE.md constrain how the AI behaves and keep the project context stable while you iterate.
VibeCodingLoop🎯Set the target🤖Direct the AI⚙️Generate code✅Verify & test🚀Deploy & repeat→→→→→
4 / 11

Minimalist development setup

Only the tools you truly need, kept intentionally simple

🏗️ Core engine

🤖
Claude CodeCore
CLI AI coding assistant
📦
Node.js / npmRuntime
Package management and build tooling
🌿
GitVCS
Version control and history
🖥️
VS Code / CursorEditor
The day-to-day editor

🤖 Claude Code stack

📋
AGENTS.mdContext
Project rules and AI instructions
⚙️
CLAUDE.mdGlobal
Global Claude behavior settings
🔌
MCP serversExtension
Tool extensions and external integrations
💡
Custom SkillsWorkflow
Reusable workflow units
5 / 11

Context separation strategy

Use two files with different roles to manage AI instructions with less ambiguity

📋
AGENTS.md
Project-scoped context
📁 /project-root/AGENTS.md
  • ▸ Project overview and goal
  • ▸ Stack specification
  • ▸ Architecture patterns
  • ▸ Coding conventions
  • ▸ API endpoint inventory
  • ▸ Forbidden patterns and constraints
  • ▸ Testing strategy
⚙️
CLAUDE.md
Global user settings
📁 ~/.claude/CLAUDE.md
  • ▸ Global working style
  • ▸ Response language and tone
  • ▸ Commit message format
  • ▸ oh-my-claudecode settings
  • ▸ Security policy
  • ▸ Personal preferences
  • ▸ MCP server settings
💡 AGENTS.md changes per project, while CLAUDE.md stays consistent across projects
6 / 11

Skills vs MCP matrix

When to choose which tool

Aspect
💡 Skills (slash commands)
🔌 MCP servers
Location
~/.claude/commands/
MCP server (separate process)
Language
Markdown + prompts
TypeScript / Python
Execution
Inside Claude
Calls an external process
State
Stateless
Can maintain state
Tools
Built-in Claude tools
Custom tool definitions
Integration
Simple workflow automation
External API / DB integration
Complexity
⭐ Easy
⭐⭐⭐ More complex
✅ Use Skills when: You want repeatable Claude workflows and fast prototyping
✅ Use MCP when: You need external APIs, direct DB access, or custom tools
7 / 11

Tech stack decision tree

A practical guide to choosing the right stack for the project shape

🚀 New project
🌐 Web product
📊 Data-heavy
Next.js
SSR
SvelteKit
Lean
🎨 Interactive
React+Vite
SPA
Astro
Static
📱 App / mobile
Cross-platform
React Native
Mobile
Expo
Fast builds
Desktop
Tauri
Lightweight
Electron
General-purpose
💡 For MVP work, Next.js or React + Vite tends to be the most AI-friendly path thanks to broad docs and training coverage
8 / 11

Cloud cost matrix

How to keep spend low while the MVP is still proving itself

Free tier

Vercel
100GB bandwidth / mo
Frontend hosting
Supabase
500MB DB, 2GB storage
PostgreSQL + Auth
Cloudflare
Unlimited requests
CDN + DNS
GitHub Actions
2,000 min / mo
CI/CD

Paid (small scale)

Vercel Pro
$20 / mo
Team workflow + analytics
Supabase Pro
$25 / mo
8GB DB + more APIs
Railway
$5-20 / mo
Full-stack hosting
AWS (small)
$10-50 / mo
Enterprise expansion path
💰
MVP budget
You can start around $0-25 / month
📈
Scale-up
Upgrade only as traffic proves demand
🔒
Avoid lock-in
Open-source leaning choices age better
9 / 11

Restaurant ordering MVP architecture

A concrete example: a three-tier ordering system

📱
Frontend
Next.js / React
  • ▸ Menu browsing pages
  • ▸ Cart UI
  • ▸ Live order status updates
  • ▸ Payment flow
⟷REST/JSON
⚡
Middleware
Next.js API Routes
  • ▸ Create-order API
  • ▸ Stripe payment validation
  • ▸ Authentication middleware
  • ▸ Live updates with SSE
⟷REST/JSON
🗄️
Backend
Supabase
  • ▸ PostgreSQL DB
  • ▸ Row Level Security
  • ▸ Auth (JWT)
  • ▸ Storage (images)
🚀
Deploy
Vercel
🔐
Auth
Supabase Auth
💳
Payments
Stripe
📊
Monitoring
Vercel Analytics
10 / 11

Production security checklist

What to verify before you call the deployment real

🔐

Auth & access control

  • ✓Set JWT expiration windows
  • ✓Enable Row Level Security (RLS)
  • ✓Move API keys into environment variables
  • ✓Restrict CORS with an allowlist
  • Add rate limiting
🛡️

Data protection

  • ✓Force HTTPS
  • ✓Encrypt sensitive data at rest
  • ✓Prevent SQL injection via ORM patterns
  • Block XSS with input validation
  • Add CSRF protection
🔍

Operational security

  • ✓Monitor error logs
  • Scan dependencies for vulnerabilities
  • Run recurring security reviews
  • ✓Prepare backup and recovery plans
  • Define incident response steps
🎉
You now have an MVP built through vibe coding.
Finish the security checklist and ship with a lot more confidence.
11 / 11
Lecture index
A 4-hour loop from idea to a shipped MVP
OverviewOpen example
한국어English
All lecturesVibe Coding MVP Masterclass[email protected]@studiojin_devSubstack
Course Summary

Vibe Coding MVP Masterclass

A beginner-oriented walkthrough of the four-hour loop from idea to shipped MVP.

A compact course on the full MVP loop around Claude Code: goal setting, environment prep, context separation, stack decisions, cost tradeoffs, and security checks.

Deliverable: a personal working loop and starter templates for designing, building, and verifying an MVP with AI.

Read course overviewLecture index

What this deck covers

  • Use PRDs and AGENTS files to give AI a stable working context.
  • Choose a pragmatic tech stack and cloud cost envelope for a small MVP.
  • Connect implementation, UI/UX polish, testing, and deployment into one iterative loop.
  • Reduce pre-launch security review into a compact working checklist.

Chapter outline

0115m

Understand the philosophy and working loop

Frame vibe coding as a working system rather than a pure code-generation trick.

0220m

Prepare the docs and context

Learn how AGENTS.md and PRDs split responsibilities so the AI has clearer context.

0320m

Choose the stack and cost envelope

Choose the frontend, backend, and infrastructure that match the project type and budget.

0420m

MVP architecture and build flow

Use a restaurant-ordering MVP to explain a practical three-tier architecture and implementation flow.

0515m

Verification, security, and launch

Turn a working MVP into a launchable one through verification and security checks.