🗺️ Learning Roadmap

Your journey from zero to AI-powered developer in 5-9 weeks

This roadmap breaks down your learning into 12 levels across 3 stages, with hands-on projects at every step. Each level builds on the previous one, so you'll always know exactly what to do next.

Estimated Time

5-9 weeks total (1-2 hours per day)

Stage 0: 2-4 weeks
Stage 1: 1-2 weeks
Stage 2: 2-3 weeks

📍 Where Are You?

Not sure where to start? Use this quick guide:

If you are...	Start here
👶 Never coded before	Stage 0, Level 0.1 - Build your first webpage today
🎯 Built a few projects with AI	Stage 1, Level 1.1 - Learn what AI can't do
🏗️ Want to build complex apps	Stage 2, Level 2.1 - Master context & architecture

🎮 Complete Learning Path

graph TB
    Start([👋 Start Here]) --> S0[🎮 Stage 0: Vibecoding<br/>消除恐惧，今天就编程]

    S0 --> L01[Level 0.1: 第一行代码<br/>Build first webpage]
    L01 --> L02[Level 0.2: 本地开发<br/>Setup local environment]
    L02 --> L03[Level 0.3: API 集成<br/>Connect to APIs]
    L03 --> L04[Level 0.4: 部署上线<br/>Deploy to production]
    L04 --> P0[🎯 Stage 0 Project<br/>Build mini project]

    P0 --> S1[🧠 Stage 1: Reality Check<br/>理解 AI 局限性]

    S1 --> L11[Level 1.1: AI 局限性<br/>Understand limitations]
    L11 --> L12[Level 1.2: 提示工程<br/>Advanced prompting]
    L12 --> L13[Level 1.3: 测试调试<br/>Testing & debugging]
    L13 --> L14[Level 1.4: 安全实践<br/>Security basics]

    L14 --> S2[🏗️ Stage 2: Context & Architecture<br/>掌握上下文与架构]

    S2 --> L21[Level 2.1: 项目结构<br/>Project organization]
    L21 --> L22[Level 2.2: 长上下文<br/>Multi-file editing]
    L22 --> L23[Level 2.3: 高级提示<br/>Advanced context]
    L23 --> L24[Level 2.4: 架构设计<br/>System design]
    L24 --> P2[🎯 Stage 2 Project<br/>Full-stack application]

    P2 --> End([🎉 Congratulations!<br/>AI-Powered Developer])

    style Start fill:#4CAF50,stroke:#2E7D32,color:#fff
    style End fill:#FF9800,stroke:#E65100,color:#fff
    style S0 fill:#2196F3,stroke:#1565C0,color:#fff
    style S1 fill:#9C27B0,stroke:#6A1B9A,color:#fff
    style S2 fill:#F44336,stroke:#C62828,color:#fff
    style P0 fill:#FFD700,stroke:#FFA000,color:#000
    style P2 fill:#FFD700,stroke:#FFA000,color:#000

🎮 Stage 0: Vibecoding

Goal: Eliminate fear, start coding TODAY Duration: 2-4 weeks (1-2 hours/day)

Level 0.1: 第一行代码 (First Code)

What you'll learn:

Experience the magic of AI-assisted programming
Zero setup required
Build confidence: "I can code!"

Project: Build a simple personal introduction webpage (HTML + CSS)

Tools:

Replit AI (free) - Online IDE with AI assistant
ChatGPT (free tier) - Explain code & answer questions
Alternative: v0.dev (generate UI components)

Resources:

Checkpoint:

✅ Published your first webpage (live URL)
✅ Modified code with AI and saw results
✅ Can describe what you want in natural language

Estimated time: 2-3 days

Level 0.2: 本地开发 (Setup Local Environment)

What you'll learn:

Install local development environment
Understand files, folders, editors
Use professional tools (kept simple)

Project: Build a To-Do List app locally (HTML, CSS, JavaScript with localStorage)

Tools:

Cursor (free tier) - Best AI editor for beginners
Alternative: VS Code + GitHub Copilot
Git + GitHub (version control intro)

Resources:

Checkpoint:

✅ Cursor or VS Code installed and running
✅ Completed To-Do app with add/delete features
✅ Code committed to GitHub (first version control experience)

Estimated time: 4-5 days

Level 0.3: API 集成 (First API Integration)

What you'll learn:

Understand frontend vs backend relationship
Call third-party APIs
Handle async operations (async/await)

Project: Build one of these (your choice):

Weather query app
Discord bot
Chrome extension

Tools:

Cursor + AI Chat (explain API docs)
Postman / Thunder Client (test APIs)
Free APIs: OpenWeatherMap, Discord API, Chrome Extensions API

Resources:

Checkpoint:

✅ Successfully called at least one external API
✅ Can process and display API data
✅ Understand basic async/await usage

Estimated time: 5-7 days

Level 0.4: 部署上线 (Deploy to Production)

What you'll learn:

Make your work visible to the world
Understand frontend deployment process
Get satisfaction from sharing your creation

Project: Deploy one of your previous projects to production

Tools:

Vercel (recommended) - Zero-config deployment, auto HTTPS
Netlify (alternative)
GitHub Pages (for static sites)

Resources:

Tutorial: Deploy with AI assistance (AI generates deployment config)
Tutorial: Custom domain setup
Tutorial: Environment variables for API keys

Checkpoint:

✅ Project deployed with public URL
✅ Understand Git push → auto-deploy workflow
✅ Can share project link with friends/community

Estimated time: 2-3 days

🎯 Stage 0 Graduation Project

Requirements: Choose your direction, complete a mini project (2-3 days)

Example directions:

Web app: Personal blog, portfolio site, utility tool
Bot/Automation: Telegram bot, data scraper, automation script
Creative: Simple game, data visualization, music player

Evaluation criteria:

✅ Code hosted on GitHub
✅ Has basic README documentation
✅ Deployed to production (if applicable)
✅ Shared in community or with friends

Estimated time: 2-3 days

🎓 Stage 0 Complete! What's Next?

恭喜完成 Vibecoding 阶段！接下来你将学习 AI 的真实能力边界。 Congratulations on completing Stage 0! Next, you'll learn the true capabilities and limitations of AI.

👉 Ready to level up? Continue to Stage 1: Reality Check

🧠 Stage 1: Reality Check

Goal: Understand AI limitations, develop critical thinking Duration: 1-2 weeks (1-2 hours/day)

Level 1.1: AI 的优势与局限 (AI Strengths & Limits)

What you'll learn:

Identify tasks where AI excels
Recognize scenarios where AI struggles
Understand "hallucination" phenomenon

Project: Intentionally make AI fail, then fix it

Task list:

Ask AI to generate complex algorithms (e.g., sorting), verify correctness
Give AI buggy code, see if it identifies the bug
Ask AI to generate security code (e.g., authentication), find vulnerabilities

Tools:

ChatGPT / Claude (compare different model outputs)
LLM Comparison Sites

Resources:

Checkpoint:

✅ Can list 3 scenarios where AI excels and 3 where it fails
✅ Successfully identified and fixed AI-generated bugs
✅ Understand why you shouldn't blindly trust AI output

Estimated time: 2-3 days

Level 1.2: 提示工程进阶 (Prompt Engineering)

What you'll learn:

Master effective prompt structure
Break complex tasks into small steps
Use Few-Shot and Chain-of-Thought techniques

Project: Refactor any Stage 0 project using better prompts

Compare: bad prompts vs good prompts output quality

Tools:

Cursor Rules / .cursorrules file (project-level prompt configuration)
Prompt Libraries (e.g., PromptBase, Anthropic Prompt Library)

Resources:

Checkpoint:

✅ Can write clear, specific, context-rich prompts
✅ Understand Few-Shot Learning and Chain-of-Thought
✅ Created your own .cursorrules file

Estimated time: 2-3 days

Level 1.3: 测试与调试 (Testing & Debugging)

What you'll learn:

Write tests for AI-generated code
Use AI to assist debugging
Understand "trust but verify" principle

Project: Add unit tests to a Stage 0 project

Intentionally introduce bugs, use AI to locate and fix them

Tools:

Jest / Vitest (JavaScript testing)
pytest (Python testing)
AI Debugging: Cursor Debug feature, ChatGPT error analysis

Resources:

Checkpoint:

✅ Wrote tests for at least 1 project
✅ Can use AI to locate and fix bugs
✅ Understand "all code needs verification" principle

Estimated time: 3-4 days

Level 1.4: 安全与最佳实践 (Security & Best Practices)

What you'll learn:

Identify security issues in AI-generated code
Understand common vulnerabilities (OWASP Top 10)
Protect API keys and sensitive data

Project: Security audit of your Stage 0 projects

Checklist:

Are API keys exposed?
Is user input validated?
Is HTTPS enabled?
Do dependencies have vulnerabilities?

Tools:

GitHub Dependabot (auto-detect dependency vulnerabilities)
Snyk / npm audit (security scanning)
.env files (environment variable management)

Resources:

The False Promise of AI Coding Assistants

Checkpoint:

✅ Can identify 3 common security issues in AI code
✅ All project API keys moved to environment variables
✅ Understand "security is continuous, not one-time"

Estimated time: 2-3 days

💪 Stage 1 Complete! Ready for Advanced Topics?

你已经理解了 AI 的能力边界！现在让我们学习如何给 AI 提供最佳上下文。 You now understand AI's boundaries! Let's learn how to provide optimal context to AI.

👉 Continue your journey: Stage 2: Context & Architecture

🏗️ Stage 2: Context & Architecture

Goal: Master providing context to AI, design AI-friendly architectures Duration: 2-3 weeks (2-3 hours/day)

Level 2.1: 项目结构设计 (Project Structure)

What you'll learn:

Design clear file/folder structures
Write effective README and documentation
Use naming conventions and code organization patterns

Project: Refactor any Stage 0 project, optimize structure

Add:

Clear folder hierarchy (src/, tests/, docs/)
Complete README (installation, usage, contribution guide)
Code comments and docstrings

Tools:

AI Documentation Tools: Cursor auto-generate doc comments
README Generators: readme.so
Project Templates: create-react-app, Vite scaffolding

Resources:

Project Structure for AI Coding

Checkpoint:

✅ Project structure is clear, newcomers understand in 5 minutes
✅ README is complete with all necessary info
✅ Code has appropriate comments (not too much, not too little)

Estimated time: 3-4 days

Level 2.2: 长上下文与多文件编辑 (Long Context & Multi-File Editing)

What you'll learn:

Leverage AI's long context window capabilities
Refactor across multiple files
Manage larger codebases

Project: Upgrade small project to medium project (3+ files → 10+ files)

Use Cursor Composer or similar for multi-file refactoring

Tools:

Cursor Composer (multi-file AI editing)
Claude with Projects (long context knowledge base)
Aider (command-line AI coding tool)

Resources:

Checkpoint:

✅ Successfully completed refactoring involving 5+ files
✅ Understand how to provide project-level context to AI
✅ Can manage medium-sized projects (1000+ lines of code)

Estimated time: 4-5 days

Level 2.3: 提示工程高级技巧 (Advanced Prompting)

What you'll learn:

Master Retrieval-Augmented Generation (RAG) concepts
Use .cursorrules and project-level configurations
Create reusable prompt templates

Project: Create custom AI rules for your project

Build: Personal prompt library

Tools:

.cursorrules file (Cursor project configuration)
Anthropic Prompt Library (prompt reference)
LangChain (if building RAG apps)

Resources:

Checkpoint:

✅ Created at least 1 .cursorrules file
✅ Have your own prompt template library (5+ templates)
✅ Understand RAG basic concepts

Estimated time: 3-4 days

Level 2.4: AI 驱动的架构设计 (AI-Driven Architecture)

What you'll learn:

Design scalable application architectures
Use design patterns and best practices
Balance AI assistance with human decisions

Project: Design a complete full-stack application from scratch (don't need to fully implement)

Outputs:

Architecture diagram (frontend, backend, database, API)
Technology selection document (why these technologies?)
File structure plan

Tools:

AI Architecture Assistants: Claude, ChatGPT (discuss architecture)
Diagram Tools: Mermaid, Excalidraw, draw.io
AI Code Review: Cursor's code review feature

Resources:

Checkpoint:

✅ Completed a full architecture design document
✅ Can explain why you designed it this way (trade-offs)
✅ Understand when to follow AI advice, when to stick with human judgment

Estimated time: 4-5 days

🎯 Stage 2 Graduation Project

Requirements: Complete medium-sized project (1-2 weeks)

Example directions:

Full-stack app: Blog system (frontend + backend + database)
AI application: RAG knowledge base Q&A system
Dev tools: CLI tool, VS Code plugin
API service: RESTful API + documentation

Evaluation criteria:

✅ Clear architecture with documentation
✅ Good code structure, easy to maintain
✅ Test coverage (at least core features)
✅ Deployed to production
✅ Complete README and contribution guide

Estimated time: 1-2 weeks

🎉 Congratulations! You're Now an AI-Powered Developer!

恭喜你完成所有阶段！你已具备使用 AI 高效开发的核心能力。 Congratulations on completing all stages! You now have the core skills to develop efficiently with AI.

What's next?

🌟 Choose a specialization path to deepen your expertise
💼 Build a portfolio project to showcase your skills
🤝 Join our community discussions to connect with other learners
📚 Explore our comprehensive course for structured lessons

📊 Time Estimates

Stage	Levels	Duration	Daily Commitment
Stage 0: Vibecoding	4 + graduation	2-4 weeks	1-2 hours
Stage 1: Reality Check	4	1-2 weeks	1-2 hours
Stage 2: Context & Architecture	4 + graduation	2-3 weeks	2-3 hours
Total	12 levels + 2 projects	5-9 weeks	Avg 2 hours/day

🌳 Optional: Skill Tree

After completing the basics (Stage 0-2), you can specialize:

graph LR
    Complete[Complete Stage 2] --> Choose{Choose Specialization}

    Choose --> Web[🌐 Full-Stack Web<br/>React, Next.js, APIs]
    Choose --> AI[🤖 AI Applications<br/>RAG, Agents, LangChain]
    Choose --> Data[📊 Data Engineering<br/>Python, APIs, Scraping]
    Choose --> Cloud[☁️ DevOps/Cloud<br/>Docker, CI/CD, AWS]

    style Complete fill:#4CAF50,color:#fff
    style Choose fill:#FF9800,color:#fff
    style Web fill:#2196F3,color:#fff
    style AI fill:#9C27B0,color:#fff
    style Data fill:#F44336,color:#fff
    style Cloud fill:#00BCD4,color:#fff

🚀 Coming Soon | 敬请期待

深度专业化路径正在制作中！订阅以获取更新通知。 Specialization paths are in development! Subscribe for updates.

Choose your specialization:

🌐 Full-Stack Web Development 🔜 - Build production-ready web apps
🤖 AI Application Development 🔜 - RAG systems, agents, LangChain
📊 Data Engineering 🔜 - Data pipelines, analysis, visualization
☁️ DevOps & Cloud 🔜 - Docker, Kubernetes, CI/CD, AWS/Azure

💡 Learning Tips

1. Project-Driven Learning

Don't just read tutorials—build real projects. Each level has a hands-on project to solidify your learning.

2. Learn by Modifying

Take AI-generated code and experiment. What happens when you change parameters, add features, or refactor structure?

3. Community Support

Connect with other learners to:

Share your projects
Ask questions
Find learning buddies
Get feedback

4. Don't Rush

It's okay to spend extra time on a level. Quality over speed. Make sure you understand before moving on.

5. Build What Excites You

The projects are suggestions. If you have an idea you're passionate about, build that instead! Passion = motivation = faster learning.

🎓 What's Next?

Ready to start? Head to Stage 0: Vibecoding and build your first project today!

Last updated: 2025-10-27 Roadmap version: v1.0

📍 Where Are You?​

🎮 Complete Learning Path​

🎮 Stage 0: Vibecoding​

Level 0.1: 第一行代码 (First Code)​

Level 0.2: 本地开发 (Setup Local Environment)​

Level 0.3: API 集成 (First API Integration)​

Level 0.4: 部署上线 (Deploy to Production)​

🎯 Stage 0 Graduation Project​

🧠 Stage 1: Reality Check​

Level 1.1: AI 的优势与局限 (AI Strengths & Limits)​

Level 1.2: 提示工程进阶 (Prompt Engineering)​

Level 1.3: 测试与调试 (Testing & Debugging)​

Level 1.4: 安全与最佳实践 (Security & Best Practices)​

🏗️ Stage 2: Context & Architecture​

Level 2.1: 项目结构设计 (Project Structure)​

Level 2.2: 长上下文与多文件编辑 (Long Context & Multi-File Editing)​

Level 2.3: 提示工程高级技巧 (Advanced Prompting)​

Level 2.4: AI 驱动的架构设计 (AI-Driven Architecture)​

🎯 Stage 2 Graduation Project​

📊 Time Estimates​

🌳 Optional: Skill Tree​

💡 Learning Tips​

1. Project-Driven Learning​

2. Learn by Modifying​

3. Community Support​

4. Don't Rush​

5. Build What Excites You​

🎓 What's Next?​

📍 Where Are You?

🎮 Complete Learning Path

🎮 Stage 0: Vibecoding

Level 0.1: 第一行代码 (First Code)

Level 0.2: 本地开发 (Setup Local Environment)

Level 0.3: API 集成 (First API Integration)

Level 0.4: 部署上线 (Deploy to Production)

🎯 Stage 0 Graduation Project

🧠 Stage 1: Reality Check

Level 1.1: AI 的优势与局限 (AI Strengths & Limits)

Level 1.2: 提示工程进阶 (Prompt Engineering)

Level 1.3: 测试与调试 (Testing & Debugging)

Level 1.4: 安全与最佳实践 (Security & Best Practices)

🏗️ Stage 2: Context & Architecture

Level 2.1: 项目结构设计 (Project Structure)

Level 2.2: 长上下文与多文件编辑 (Long Context & Multi-File Editing)

Level 2.3: 提示工程高级技巧 (Advanced Prompting)

Level 2.4: AI 驱动的架构设计 (AI-Driven Architecture)

🎯 Stage 2 Graduation Project

📊 Time Estimates

🌳 Optional: Skill Tree

💡 Learning Tips

1. Project-Driven Learning

2. Learn by Modifying

3. Community Support

4. Don't Rush

5. Build What Excites You

🎓 What's Next?