~/vibe-coding $ Built for people who don't code (yet)
See it first. Then you'll get it.Understand coding through diagrams.
No syntax, no API memorization. We use flowcharts, architecture diagrams and everyday analogies to show you what really happens behind websites, SaaS and AI products — clear enough for a teenager.
- Knowledge topics
- 52+
- Interactive diagrams
- 113+
- Languages
- 4
Build
What do you want to build?
Pick a goal and we'll hand you a path from zero to shipped.
Portfolio / personal site
A site that shows your work — and actually goes live.
See this path →CRM / customer management
Grow from a form into a system that manages customers.
See this path →SaaS / paid product
Auth, data, deployment — to a paid multi-tenant product.
See this path →AI tool / AI product
Learn to work with AI and turn ideas into usable tools.
See this path →
Why
Why we're different
Most tutorials teach you to type. We teach you to see the whole system.
Diagrams first
Every concept comes with architecture and flow diagrams — see the big picture, then the details.
Plain language
We swap jargon for analogies: a cache becomes a convenience store, an API becomes an order counter.
Systems thinking
We show how frontend, backend and database connect — not one function in one framework.
AI-coding native
Learn to collaborate with Claude Code, Cursor and Codex to turn ideas into shippable products.
Roadmap
Your learning roadmap
From knowing nothing to planning and shipping your own product — step by step.
- 01 /
See the World
Build intuition for how websites, apps and SaaS are pieced together.
- 02 /
Learn to Choose
Pick sensibly among platforms, languages and tools by need and budget.
- 03 /
Work with AI
Use AI tools and a solid workflow to turn specs into working software.
- 04 /
Ship a Product
Understand SaaS and multi-tenant shapes; deploy and operate your product.
Gallery
Architecture Gallery
8 of the most common system architectures, each explained in a single diagram.
- Architecture Gallery
Single-page Site
Static files on a CDN, served everywhere — the fastest and cheapest.
- Architecture Gallery
Frontend + Backend
Frontend renders UI; backend serves data via API — deployed independently.
- Architecture Gallery
SaaS Application
Subscription cloud software with auth, billing, storage and notifications.
- Architecture Gallery
Multi-tenant SaaS
Many customers share one system, but their data is strictly isolated.
- Architecture Gallery
Cloudflare Stack
All on Cloudflare’s edge: Pages frontend, Workers backend, D1 database.
- Architecture Gallery
Fly.io Stack
Containerized backend deployed to multiple regions with nearby DB reads.
- Architecture Gallery
Serverless
No always-on servers; functions run per request — pay per use.
- Architecture Gallery
Microservices
A big system split into small services, each built, deployed and scaled alone.
Which cloud platform?
Cloudflare, Vercel, AWS… measured with the same ruler.
Cloudflare
Start comparing →Which language should I learn?
TypeScript, Python, Go… which fits beginners and AI best?
TypeScript
Start comparing →AI coding tools, head to head
Claude Code, Cursor, Codex… who plans, codes and reviews best?
Claude Code
Start comparing →Frequently asked questions
What you might want to know about Vibe Coding and this platform.
I can’t code at all — can I follow this?
Yes. We don’t teach syntax — we use diagrams and analogies, aimed at a middle-schooler’s level.
What exactly is Vibe Coding?
A way of building with AI: you describe intent and judge direction; AI writes the code. The skill shifts from typing to thinking about systems.
Does this cost money?
The content is free. For building, we favor $0-start options (like Cloudflare’s free tier) and flag paid choices clearly.
Which AI tool should I use?
It depends. Claude Code is strong at planning, long tasks and security review; Cursor is most intuitive inside the editor. See the AI tools comparison.
Which languages does the site support?
Traditional Chinese, English, Japanese and Korean. Default is Traditional Chinese; switch in the top-right.
Ready to turn your idea into a product?
You don't have to become an engineer first. Understand the system, then let AI do the typing.