Project Introduction

2025 is regarded by many as the first year of AI programming. More and more people are starting to use AI to write code, but what they produce often remains at the toy level — they don't know how to use Vibe Coding to organize their development workflow, which tools to choose, or what critical steps lie between a prototype and a live product.

We adopt a progressive three-stage practical learning path: a beginner onboarding stage where you quickly get started with AI programming through mini-games, Stage 1 where you master the Vibe Coding workflow and complete a web application prototype, Stage 2 where you learn full-stack development and deployment, and Stage 3 where you build cross-platform complex applications.

Each stage comes with a complete hands-on project, guiding you from toy to product through real-world challenges, ultimately equipping you with the ability to turn any idea into a working application.

We believe that by mastering Vibe Coding combined with systematic training, you alone can become a versatile developer who combines front-end and back-end development, AI capability integration, and product design.

This project is primarily designed for three types of learners:

• Beginners (non-technical people / product and operations roles): Help non-technical stakeholders and entry-level learners understand key concepts and complete their first AI-powered tool or product prototype.
• Junior to mid-level developers (students and developers with some foundation): Systematically master Vibe Coding and native AI application development.
• Senior developers (companies and startups, open-source and independent developers): Support teams and individuals in rapidly building, validating, and iterating on native AI applications.

📖 Content Navigation

General Appendix

AI Capability Dictionary: Common AI core concepts, terminology, and scenario explanations

Stage 0: Kindergarten

Chapter	Key Content	Status
Beginner Onboarding: Learning Map	Overview of the complete learning path	✅
Beginner Onboarding: In the AI Era, If You Can Talk, You Can Code	Get an initial feel for AI programming capabilities through cases like Snake	✅

Stage 1: AI Product Manager

Chapter	Key Content	Status
1.2: Getting to Know AI IDE Tools	Learn to use an IDE, master the interface structure and efficient prompting	✅
1.3: Build a Prototype Hands-On	A complete loop from product analysis and breakdown to multi-page product prototype implementation	✅
1.4: Adding AI Capabilities to Your Prototype	Understand and complete API integration for common AI capabilities (text, image, video)	✅
1.5: Complete Project Practice	Simulate real-world scenarios, iterate based on user feedback, and complete a project showcase (includes a final assignment)	✅

Appendix

Chapter	Key Content	Status
Appendix A: Product Thinking Supplement	A product thinking framework from idea evaluation to requirement breakdown and MVP	✅
Appendix B: Common Errors and Solutions	Common errors and troubleshooting methods in Vibe Coding	✅
Appendix: Where to Find Ideas	Discover niche directions from reference apps, trends, and VC lists	✅
Appendix: Double Diamond Model	Understand the complete rhythm of defining the problem first, then expanding into solution design	✅
Appendix: Jobs to Be Done	Use the JTBD method to understand what users truly want to accomplish	✅
Appendix: The Mom Test Interview Method	A research method for validating needs through user interviews	✅

Stage 2: Junior to Mid-level Developer

Front-end Section

Chapter	Key Content	Status
Using Lovart to produce assets	Learn to use Lovart to batch-generate character, scene, and other visual assets, providing a foundation for UI design and front-end development	🚧
Getting started with Figma and MasterGo	Use design tools to organize information architecture and page structure, laying the groundwork for front-end implementation	🚧
Building your first modern application — UI design	Complete a component-based interface from design mockups, implementing the first link from design to code	🚧
Designing pages and buttons following UI design specifications	Learn to use mainstream design specifications to organize page structure and button hierarchy, and leverage AI to generate design proposals	🚧
Let's Build Hogwarts Portraits Together	Build a front-end application with AI capabilities from scratch, connecting design and development	🚧

Back-end Development Section

Chapter	Key Content	Status
What is an API	Understand HTTP interfaces and the request-response model, preparing for back-end integration and debugging	🚧
From Database to Supabase	Set up databases and APIs on Supabase, connecting data models to front-end pages	🚧
Using large language models to assist in writing interface code and documentation	Use LLMs to help generate interface and database documentation and code, creating readable and testable back-end services	🚧
Git workflows and Zeabur deployment	Manage code with Git workflows and deploy applications to Zeabur for going live	🚧
Modern CLI development tools	Use CLI-based AI programming tools to accelerate development and debugging, forming a personal engineering workflow	🚧
How to integrate payment systems like Stripe	Integrate payment systems, completing the payment flow and basic settlement process	🚧
Building your first modern application — full-stack application	Combine front-end, back-end, and payment modules to deliver a deployable full-stack web application	🚧
Modern front-end component library + Trae in practice	Use a modern front-end component library with Trae to independently build a product with login/registration and payment support	🚧

AI Capabilities Appendix

Chapter	Key Content	Status
Getting Started with Dify and Knowledge Base Integration	Build tool-type products using Dify Workflow and basic RAG, creating a template for future application upgrades	🚧
Learning to query the AI dictionary and integrate multi-modal APIs	Learn to find suitable models and APIs, and integrate text, image, and other multi-modal capabilities into your product	🚧

Stage 3: Senior Developer