Learning roadmap

The six stages of vibe coding.

A clear, opinionated path. Each stage takes a few hours. Each one ends with something you can show.

Stage 01

Beginner Mindset

Stop typing, start directing

Get the mental model. Understand what AI is good at, what it isn't, and how to think about your role as the human in the loop.

Can explain vibe coding to a friendKnows when AI helps vs. gets in the way
Open tutorial
Stage 02

Prompting

Speak the language of intent

Learn the prompt shapes that consistently produce useful output. Build a personal prompt library you actually reuse.

Five reusable prompt patterns memorisedComfortable writing diff prompts
Open tutorial
Stage 03

AI Coding

Ship your first real app

Take an idea from blank prompt to live URL. Iterate three times. Send the link to one human.

Published a small appPracticed react-don't-rewrite
Open tutorial
Stage 04

UI Design

Make it feel like a product

Define a design system in plain English. Use semantic tokens. Compose screens from a small set of primitives.

Tokens defined in one fileReusable component primitives
Open tutorial
Stage 05

Deployment

Custom domain, real launch

Connect a domain, add light analytics, set up error tracking. The grown-up checklist that takes one evening.

Live on a custom domainErrors get reported, not lost
Open tutorial
Stage 06

Advanced Automation

Glue the world together

Connect APIs, schedule jobs, wire up webhooks. Move from one app to a small ecosystem of tools that talk to each other.

First webhook in productionFirst scheduled job running daily