[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-11678":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":9,"totalLinesOfCode":9,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":9,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":9,"rankLanguage":9,"license":9,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":22,"hasPages":22,"topics":24,"createdAt":9,"pushedAt":9,"updatedAt":45,"readmeContent":46,"aiSummary":47,"trendingCount":16,"starSnapshotCount":16,"syncStatus":48,"lastSyncTime":49,"discoverSource":50},11678,"easy-vibe","datawhalechina\u002Feasy-vibe","datawhalechina","💻 vibe coding 2026 | Your first modern Coding course beginners to master step by step.",null,"https:\u002F\u002Fgithub.com\u002Fdatawhalechina\u002Feasy-vibe","JavaScript",16780,1577,53,10,0,79,776,6772,373,116.59,false,"main",[25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44],"ai","course","vibe-coding","coding","genai","low-code","no-code","programming","tutorial","vibecoding","vscode","agent","gemini","gpt","llm","nextjs","openai","workflow","mcp","deepseek","2026-06-12 04:00:55","\u003C!-- trigger vercel build -->\n\u003Cdiv align=\"center\">\n\n\u003Cimg src=\"assets\u002Feasy-vibe-logo-hd.svg\" alt=\"Easy-Vibe Logo\" width=\"300\">\n\n\u003Cimg src=\"assets\u002Fbanner.png\" alt=\"Easy-Vibe Banner\" width=\"100%\">\n\n\u003Cp align=\"center\" style=\"font-size: 1.2em; color: #666; margin: 20px 0;\">\n  Jump right in and vibe together — if you can talk, you can build apps.\u003Cbr>\n  \u003Cspan style=\"font-size: 0.9em; color: #888;\">直接上手，一起 vibe！会说话就会做应用。\u003C\u002Fspan>\n\u003C\u002Fp>\n\n\u003Ca href=\"https:\u002F\u002Ftrendshift.io\u002Frepositories\u002F22079\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Ftrendshift.io\u002Fapi\u002Fbadge\u002Frepositories\u002F22079\" alt=\"datawhalechina\u002Feasy-vibe | Trendshift\" style=\"width: 250px; height: 55px;\" width=\"250\" height=\"55\"\u002F>\u003C\u002Fa>\n\n\u003Cp align=\"center\">\n  🚀 \u003Ca href=\"https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fwelcome.html\">Start Exploring\u003C\u002Fa> · ✨ \u003Ca href=\"https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fen\u002Fappendix\u002F\">Interactive Tutorial\u003C\u002Fa> · 🦞 \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fdatawhalechina\u002Fhello-claw\">Learn OpenClaw\u003C\u002Fa> · 📖 \u003Ca href=\"#table-of-contents\">Table of Contents\u003C\u002Fa>\u003Cbr>\n  \u003Cspan style=\"font-size: 0.85em; color: #888;\">🚀 \u003Ca href=\"https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fwelcome.html\">开始体验\u003C\u002Fa> · ✨ \u003Ca href=\"https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fzh-cn\u002Fappendix\u002F\">交互式教程\u003C\u002Fa> · 🦞 \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fdatawhalechina\u002Fhello-claw\">学习 OpenClaw\u003C\u002Fa> · 📖 \u003Ca href=\"#table-of-contents\">查看目录\u003C\u002Fa>\u003C\u002Fspan>\n\u003C\u002Fp>\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fwelcome.html\">Read Online\u003C\u002Fa> ·\n  \u003Ca href=\"#-content-navigation\">Learning Map\u003C\u002Fa>\u003Cbr>\n  \u003Cspan style=\"font-size: 0.85em; color: #888;\">\n    \u003Ca href=\"https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fwelcome.html\">开始阅读\u003C\u002Fa> ·\n    \u003Ca href=\"#-content-navigation\">学习地图\u003C\u002Fa>\n  \u003C\u002Fspan>\n\u003C\u002Fp>\n\n\u003Cp align=\"center\">\n    \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fdatawhalechina\u002Feasy-vibe\u002Fstargazers\" target=\"_blank\">\n        \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fstars\u002Fdatawhalechina\u002Feasy-vibe?color=660874&style=for-the-badge&logo=star&logoColor=white&labelColor=1a1a2e\" alt=\"Stars\">\u003C\u002Fa>\n    \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fdatawhalechina\u002Feasy-vibe\u002Fnetwork\u002Fmembers\" target=\"_blank\">\n        \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fforks\u002Fdatawhalechina\u002Feasy-vibe?color=660874&style=for-the-badge&logo=git-fork&logoColor=white&labelColor=1a1a2e\" alt=\"Forks\">\u003C\u002Fa>\n    \u003Ca href=\"LICENSE\" target=\"_blank\">\n        \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FLicense-CC_BY_NC_SA_4.0-4ecdc4?style=for-the-badge&logo=creative-commons&logoColor=white&labelColor=1a1a2e\" alt=\"License\">\u003C\u002Fa>\n\u003C\u002Fp>\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"README.md\">\u003Cimg alt=\"English\" src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FEnglish-d9d9d9\">\u003C\u002Fa>\n  \u003Ca href=\"docs-readme\u002Fzh-CN\u002FREADME.md\">\u003Cimg alt=\"简体中文\" src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002F简体中文-d9d9d9\">\u003C\u002Fa>\n  \u003Ca href=\"docs-readme\u002Fzh-TW\u002FREADME.md\">\u003Cimg alt=\"繁體中文\" src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002F繁體中文-d9d9d9\">\u003C\u002Fa>\n  \u003Ca href=\"docs-readme\u002Fja-JP\u002FREADME.md\">\u003Cimg alt=\"日本語\" src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002F日本語-d9d9d9\">\u003C\u002Fa>\n  \u003Ca href=\"docs-readme\u002Fes-ES\u002FREADME.md\">\u003Cimg alt=\"Español\" src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FEspañol-d9d9d9\">\u003C\u002Fa>\n  \u003Ca href=\"docs-readme\u002Ffr-FR\u002FREADME.md\">\u003Cimg alt=\"Français\" src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FFrançais-d9d9d9\">\u003C\u002Fa>\n  \u003Ca href=\"docs-readme\u002Fko-KR\u002FREADME.md\">\u003Cimg alt=\"한국어\" src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002F한국어-d9d9d9\">\u003C\u002Fa>\n  \u003Ca href=\"docs-readme\u002Far-SA\u002FREADME.md\">\u003Cimg alt=\"العربية\" src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fالعربية-d9d9d9\">\u003C\u002Fa>\n  \u003Ca href=\"docs-readme\u002Fvi-VN\u002FREADME.md\">\u003Cimg alt=\"Tiếng_Việt\" src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FTiếng_Việt-d9d9d9\">\u003C\u002Fa>\n  \u003Ca href=\"docs-readme\u002Fde-DE\u002FREADME.md\">\u003Cimg alt=\"Deutsch\" src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FDeutsch-d9d9d9\">\u003C\u002Fa>\n\u003C\u002Fp>\n\n\u003C\u002Fdiv>\n\u003Ctable align=\"center\">\n  \u003Ctr>\n    \u003Ctd width=\"50%\" valign=\"top\" align=\"center\">\n      \u003Cimg src=\"assets\u002Fgif-header.png\" width=\"100%\">\n      \u003Cbr>\n      \u003Cstrong>A beginner-friendly learning map\u003C\u002Fstrong>\n      \u003Cbr>\n      \u003Csub>Clear guidance from zero, so you can stop \"learning and forgetting\"\u003C\u002Fsub>\n    \u003C\u002Ftd>\n    \u003Ctd width=\"50%\" valign=\"top\" align=\"center\">\n      \u003Cimg src=\"assets\u002Fgif-tutorial.png\" width=\"100%\">\n      \u003Cbr>\n      \u003Cstrong>Step-by-step visual tutorials\u003C\u002Fstrong>\n      \u003Cbr>\n      \u003Csub>Detailed walkthroughs that feel like learning with a private tutor\u003C\u002Fsub>\n    \u003C\u002Ftd>\n  \u003C\u002Ftr>\n  \u003Ctr>\n    \u003Ctd width=\"50%\" valign=\"top\" align=\"center\">\n      \u003Cimg src=\"assets\u002Fgif-ide.gif\" width=\"100%\">\n      \u003Cbr>\n      \u003Cstrong>Immersive simulated coding\u003C\u002Fstrong>\n      \u003Cbr>\n      \u003Csub>Virtual mouse guidance helps you quickly learn the core IDE workflow\u003C\u002Fsub>\n    \u003C\u002Ftd>\n    \u003Ctd width=\"50%\" valign=\"top\" align=\"center\">\n      \u003Cimg src=\"assets\u002Fgif-diffusion.gif\" width=\"100%\">\n      \u003Cbr>\n      \u003Cstrong>Visible AI principles\u003C\u002Fstrong>\n      \u003Cbr>\n      \u003Csub>Animated explanations make it easy to see how AI generates images\u003C\u002Fsub>\n    \u003C\u002Ftd>\n  \u003C\u002Ftr>\n  \u003Ctr>\n    \u003Ctd width=\"50%\" valign=\"top\" align=\"center\">\n      \u003Cimg src=\"assets\u002Fgif-rag.gif\" width=\"100%\">\n      \u003Cbr>\n      \u003Cstrong>Learn RAG like a game\u003C\u002Fstrong>\n      \u003Cbr>\n      \u003Csub>Interactive components let you click through the full RAG data flow\u003C\u002Fsub>\n    \u003C\u002Ftd>\n    \u003Ctd width=\"50%\" valign=\"top\" align=\"center\">\n      \u003Cimg src=\"assets\u002Fgit-terminal.gif\" width=\"100%\">\n      \u003Cbr>\n      \u003Cstrong>Visual terminal concepts\u003C\u002Fstrong>\n      \u003Cbr>\n      \u003Csub>Command-line behavior becomes intuitive when the underlying logic is visualized\u003C\u002Fsub>\n    \u003C\u002Ftd>\n  \u003C\u002Ftr>\n\u003C\u002Ftable>\n\u003Cdiv align=\"center\">\n  \u003Ch3>⭐ \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fdatawhalechina\u002Feasy-vibe\" style=\"color: #d0cd16ff;\">Star the repo here\u003C\u002Fa> to help accelerate updates ❤️\u003C\u002Fh3>\n\u003C\u002Fdiv>\n\n\u003Cdiv align=\"center\" style=\"margin: 30px 0;\">\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fdatawhalechina\u002Feasy-vibe\u002Fissues\u002Fnew?template=story_submission.md\">\n    \u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Fdatawhalechina\u002Feasy-vibe\u002Fmain\u002Fassets\u002Fstories_image.png\" alt=\"Share Your Vibe Story\" width=\"80%\" style=\"border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.15);\">\n  \u003C\u002Fa>\n  \u003Cp style=\"margin-top: 15px; font-size: 1.1em; color: #666;\">\n    📝 \u003Cstrong>Have your own vibe coding story?\u003C\u002Fstrong> \n    Submit it here and inspire others!\n  \u003C\u002Fp>\n\u003C\u002Fdiv>\n\n## Table of Contents\n\n- [Why Easy-Vibe](#why-easy-vibe)\n- [News](#-news)\n- [Who This Is For](#who-this-is-for)\n- [Your Learning Paths](#your-learning-paths)\n- [Study Suggestions](#study-suggestions)\n  - [I. Beginner Entry](#i-beginner-entry)\n  - [II. Junior and Mid-Level Developers](#ii-junior-and-mid-level-developers)\n  - [III. Advanced Developers](#iii-advanced-developers)\n  - [Appendix Knowledge Base](#-appendix-knowledge-base)\n- [How To Learn](#️-how-to-learn)\n- [Run Locally](#-run-locally)\n- [Other Courses](#other-courses)\n- [Contributing & Contributors](#-contributing--contributors)\n- [LICENSE](#-license)\n\n## Why Easy-Vibe\n\nWant an expense tracker? Say it.\n\nNeed a booking system with WeChat login? Say it.\n\nWant a blog with comments? Say it.\n\nIn the AI era, programming starts by describing what you want.\n\nEasy-Vibe teaches you how to turn that into a real product.\n\n\n## 🔥 News\n\n- **[2026-03-29]** ✨ **Vibe Stories launched and upgraded with real user journeys**: Added a new homepage Vibe Stories section with an interactive carousel and dedicated story pages, then replaced placeholder content with four real user stories featuring a rural primary school teacher, a college student, a high school IT teacher, and a truck driver who built real products with AI. [👉 View the stories](https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fzh-cn\u002Fvibe-stories\u002Fstory-1.html)\n- **[2026-03-26]** 🚀 **Major Stage 2 practice update**: Completed the SaaS capstone project \"[Your First SaaS Full-Stack App: Copywriting Generator Website](https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fen\u002Fstage-2\u002Fassignments\u002Ffullstack-app\u002F)\" and substantially expanded the \"[How to integrate Stripe and payment systems](https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fen\u002Fstage-2\u002Fbackend\u002Fstripe-payment\u002F)\" section, plus key content around multi-product UI and WeChat Mini Program backend workflows.\n- **[2026-03-25]** 📚 **New appendix: User Research and Requirement Validation**: Added four new articles covering idea sourcing, the Double Diamond model, Jobs to Be Done, and The Mom Test to help beginners discover and validate product ideas. [👉 Read the appendix](https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fen\u002Fappendix\u002F)\n- **[2026-03-25]** 📚 **English documentation fully updated**: Stage 2 (Full-stack Development) and Stage 3 (Advanced Development) are now fully available in English. [👉 Start learning](https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fen\u002Fstage-2\u002F)\n\u003Cdetails>\n\u003Csummary>Past News\u003C\u002Fsummary>\n\n- **[2026-03-02]** 🦞 **OpenClaw and AI Agent friendly support**: Added `llms.txt` so OpenClaw, Claude, Cursor, Trae, and other AI agents can quickly understand the repository structure and find the right tutorial content.\n- **[2026-03-01]** The [Advanced Development section](https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fen\u002Fstage-3\u002F) has been comprehensively upgraded with deep guides for Claude Code, including MCP, Skills, Agent Teams, and more, along with eight cross-platform project tutorials.\n- **[2026-02-25]** Updated the [Appendix Knowledge Base](https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fen\u002Fappendix\u002F), now covering 9 knowledge areas and 80+ interactive topics.\n- **[2026-01-27]** Added Android and iOS app development tutorials.\n- **[2026-01-19]** Released interactive demos for Prompt Engineering, AI history, authentication design, Git principles, and more.\n- **[2026-01-16]** Reorganized the project structure and formally established a beginner entry path.\n- **[2026-01-14]** Completed a large update to the Stage 1 product prototyping docs.\n- **[2026-01-13]** Refactored the documentation architecture and fully enabled multi-language support.\n- **[2026-01-01]** Released the core learning map for the project.\n\u003C\u002Fdetails>\n\n## Who This Is For\n\n- **Complete beginners**: Build your first project first, then understand how it works\n- **Product managers \u002F founders**: Validate ideas fast and build MVPs at low cost\n- **Students**: Develop practical skills for the AI era\n- **Junior developers**: Learn the full path from idea to launch\n- **Mid-level and senior developers**: Upgrade your AI collaboration workflow for complex projects\n\n\n\n## Your Learning Paths\n\n### 🎮 I want a fast first win\n**Best for**: Everyone\n**What you will learn**: What AI coding actually feels like through a simple, concrete hands-on example\n**What you will get**: A clear first impression of vibe coding and how to work with AI by conversation\n\n[Start here](https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fen\u002Fstage-1\u002Fai-capabilities-through-games\u002F)\n\n### 💡 I want to turn an idea into a product prototype\n**Best for**: Beginners \u002F product managers \u002F founders\n**What you will learn**: Learning roadmap, AI IDE tools, idea validation, prototyping, AI capability integration, and full demo iteration\n**What you will get**: A demoable AI product prototype you can actually show to users or teammates\n\n[Start learning](https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fen\u002Fstage-1\u002Flearning-map\u002F)\n\n### 🚀 I want to build full-stack products end to end\n**Best for**: Junior developers \u002F indie hackers \u002F advanced learners\n**What you will learn**: Frontend workflows, design-to-code, databases, backend APIs, deployment, billing, and major projects\n**What you will get**: The ability to independently ship modern AI-enabled web applications\n\n[Start learning](https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fen\u002Fstage-2\u002F)\n\n### AI-Native: I want advanced Claude Code and agent workflows\n**Best for**: Developers interested in AI-native engineering\n**What you will learn**: Claude Code, MCP, Skills, Agent Teams, long-running tasks, Spec Coding, and cross-platform app delivery\n**What you will get**: A stronger workflow for complex AI-assisted development and automation\n\n[Go to advanced development](https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fen\u002Fstage-3\u002F)\n\n### 📚 I want reference material and fundamentals\n**Best for**: Everyone\n**What you will learn**: Computer fundamentals, frontend\u002Fbackend basics, infrastructure, AI principles, and engineering practices\n**What you will get**: A long-term reference knowledge base covering 9 major knowledge areas\n\n[Browse the knowledge base](https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fen\u002Fappendix\u002F)\n\n## Study Suggestions\n\n- If you are a beginner, product manager, or founder, start with [Stage 1](https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fen\u002Fstage-1\u002Flearning-map\u002F)\n- If you want to move from prototypes to full-stack delivery, start with [Stage 2](https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fen\u002Fstage-2\u002F)\n- If you want advanced Claude Code workflows or cross-platform projects, go to [Stage 3](https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fen\u002Fstage-3\u002F)\n- If you get blocked by concepts or missing background knowledge, use the [Appendix Knowledge Base](https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fen\u002Fappendix\u002F)\n\n### 📖 Content Navigation\n\n\u003Cdiv align=\"center\">\n  \u003Cimg src=\"assets\u002Freadme-image1.png\" alt=\"Learning Map\" width=\"70%\" style=\"border-radius: 10px; box-shadow: 0 8px 20px rgba(45,55,72,0.3); margin: 15px 0;\"\u002F>\n\u003C\u002Fdiv>\n\n### I. Beginner Entry\n\n| Section | Key Content |\n| :------ | :---------- |\n| [Learning Map](https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fen\u002Fstage-1\u002Flearning-map\u002F) | A guided overview of the full learning journey |\n| [AI Era: If You Can Speak, You Can Code](https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fen\u002Fstage-1\u002Fai-capabilities-through-games\u002F) | Get your first feel for AI coding through examples like Snake |\n| [Master AI Programming Tools](https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fen\u002Fstage-1\u002Fintroduction-to-ai-ide\u002F) | Learn how AI IDE tools work and build simple local projects with them |\n| [Find Great Ideas](https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fen\u002Fstage-1\u002Ffinding-great-idea\u002F) | Learn how to discover and validate product ideas worth building |\n| [Build Product Prototypes](https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fen\u002Fstage-1\u002Fbuilding-prototype\u002F) | Move from requirements to single-page and multi-page product prototypes |\n| [Integrate AI Capabilities](https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fen\u002Fstage-1\u002Fintegrating-ai-capabilities\u002F) | Integrate text, image, and video AI features |\n| [Complete project practice](https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fen\u002Fstage-1\u002Fcomplete-project-practice\u002F) | Simulate real scenarios, collect user feedback, and iterate on a full project |\n\n#### Appendix: Product and Business Thinking\n\n| Section | Key Content |\n| :------ | :---------- |\n| [Product Thinking and Solution Design](https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fen\u002Fstage-1\u002Fappendix-a-product-thinking\u002F) | Core frameworks for going from zero to one with a product |\n| [AI Industry Application Scenarios (B-end)](https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fen\u002Fstage-1\u002Fappendix-industry-scenarios\u002F) | Understand how AI is applied across industries |\n| [AI Consumer Scenarios Inspiration (C-end)](https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fen\u002Fstage-1\u002Fappendix-c-consumer-scenarios\u002F) | Explore product opportunities in consumer AI |\n\n#### Appendix: User Research and Requirement Validation\n\n| Section | Key Content |\n| :------ | :---------- |\n| [Where to find ideas: 3 reference sources that work best for beginners](https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fen\u002Fstage-1\u002Fappendix-idea-sources\u002F) | Build a reliable pipeline for finding concrete product opportunities |\n| [Double Diamond: first do the right thing, then do it right](https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fen\u002Fstage-1\u002Fappendix-double-diamond\u002F) | Use a structured process to move from scattered inspiration to a workable direction |\n| [Use Jobs to Be Done to find what users really want done](https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fen\u002Fstage-1\u002Fappendix-jobs-to-be-done\u002F) | Analyze user goals through real tasks instead of surface-level feature requests |\n| [The Mom Test: a user interview method for validating demand](https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fen\u002Fstage-1\u002Fappendix-mom-test\u002F) | Learn how to ask better questions and avoid false-positive feedback |\n\n#### Appendix: Technical Solutions\n\n| Section | Key Content |\n| :------ | :---------- |\n| [What to do if you encounter errors](https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fen\u002Fstage-1\u002Fappendix-b-common-errors\u002F) | Common vibe coding issues and how to troubleshoot them |\n| [Comparison of Seven AI Programming Tools](https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fen\u002Fstage-1\u002Fappendix-articles\u002Fexample0-1\u002Fvibe-coding-tools-snake-game-tutorial) | Compare major AI coding platforms through hands-on testing |\n| [Design Websites with Agents](https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fen\u002Fstage-1\u002Fappendix-articles\u002Fexample0-2\u002Fvibe-coding-tools-build-website-with-ai-coding-and-design-agents) | Learn multi-agent collaboration in practice |\n\n### II. Junior and Mid-Level Developers\n\n#### Frontend\n\n| Section | Key Content |\n| :------ | :---------- |\n| [Frontend 0: Build Your Own Asset-Production Agent with Lovart](https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fen\u002Fstage-2\u002Ffrontend\u002Flovart-assets\u002F) | Use Nanobanana and Lovart to batch-generate visual assets and build a drawing agent with intent recognition |\n| [Frontend 1: Figma & MasterGo Basics](https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fen\u002Fstage-2\u002Ffrontend\u002Ffigma-mastergo\u002F) | Learn the workflow from design drafts to implementation-ready UI thinking |\n| [Frontend 2: Build Your First Modern App - UI Design](https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fen\u002Fstage-2\u002Ffrontend\u002Fui-design\u002F) | Learn the UI design foundations behind modern application interfaces |\n| [Frontend 3: UI Guidelines and Multi-Product Design](https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fen\u002Fstage-2\u002Ffrontend\u002Fmulti-product-ui\u002F) | Improve consistency and aesthetics across multiple products with shared UI rules |\n| [Frontend 4: Make Interfaces Beautiful with LLMs and Skills](https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fen\u002Fstage-2\u002Ffrontend\u002Fllm-skills-beautiful\u002F) | Use prompts and plugins to make AI generate more polished, distinctive interfaces |\n| [Frontend 4: Let's Build Hogwarts Portraits](https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fen\u002Fstage-2\u002Ffrontend\u002Fhogwarts-portraits\u002F) | Build an interactive AI-image frontend project from scratch |\n| [Frontend 6: From Design Prototype to Project Code](https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fen\u002Fstage-2\u002Ffrontend\u002Fdesign-to-code\u002F) | Turn design prototypes into frontend code that can really run in the browser |\n| [Frontend 7: Upgrade Your UI with Modern Component Libraries](https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fen\u002Fstage-2\u002Ffrontend\u002Fmodern-component-library\u002F) | Use component libraries to build professional interfaces faster |\n\n#### Backend\n\n| Section | Key Content |\n| :------ | :---------- |\n| [Backend 1: Learn Git and GitHub](https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fen\u002Fstage-2\u002Fbackend\u002Fgit-workflow\u002F) | Master core version control operations and collaboration workflows with Git |\n| [Backend 2: From Database to Supabase](https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fen\u002Fstage-2\u002Fbackend\u002Fdatabase-supabase\u002F) | Learn relational database basics and use Supabase as a modern BaaS platform |\n| [Backend 3: Backend API Design and Development](https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fen\u002Fstage-2\u002Fbackend\u002Fai-interface-code\u002F) | Use AI to assist API design, backend code generation, and API documentation |\n| [Backend 4: Ship Your Product Prototype](https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fen\u002Fstage-2\u002Fbackend\u002Fzeabur-deployment\u002F) | Quickly deploy full-stack applications to the cloud with Zeabur |\n| [Backend 5: From IDEs to CLI AI Coding Tools](https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fen\u002Fstage-2\u002Fbackend\u002Fmodern-cli\u002F) | Explore terminal-first AI coding workflows for modern development |\n| [Backend 6: Integrate Stripe and Other Billing Systems](https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fen\u002Fstage-2\u002Fbackend\u002Fstripe-payment\u002F) | Add monetization with payment and billing capabilities |\n\n#### Major Projects\n\n| Section | Key Content |\n| :------ | :---------- |\n| [Major Project 1: Your First SaaS Full-Stack App - AI Copywriting Website](https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fen\u002Fstage-2\u002Fassignments\u002Ffullstack-app\u002F) | Build an AI marketing copy workspace with login, generation, billing, and admin management |\n| [Major Project 2: Online Exam and Management System](https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fen\u002Fstage-2\u002Fassignments\u002Fmodern-frontend-trae\u002F) | Build an online exam system with question generation, test-taking flows, and admin tools |\n\n#### AI Capabilities Appendix\n\n| Section | Key Content |\n| :------ | :---------- |\n| [AI 1: Dify Basics & Knowledge Base Integration](https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fen\u002Fstage-2\u002Fai-capabilities\u002Fdify-knowledge-base\u002F) | Learn to build AI applications with Dify and integrate private knowledge bases |\n\n### III. Advanced Developers\n\n#### Claude Code Core Skills\n\n| Section | Key Content |\n| :------ | :---------- |\n| [Getting started with Claude Code](https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fen\u002Fstage-3\u002Fcore-skills\u002Fbasics\u002F) | Installation, setup, fundamentals, and useful commands |\n| [Claude Code MCP guide](https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fen\u002Fstage-3\u002Fcore-skills\u002Fmcp\u002F) | Connect Claude Code to GitHub, databases, APIs, and other services through MCP |\n| [Claude Code Skills guide](https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fen\u002Fstage-3\u002Fcore-skills\u002Fskills\u002F) | Package expertise into reusable skills you can use again and again |\n| [How to keep Claude Code working for long-running tasks](https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fen\u002Fstage-3\u002Fcore-skills\u002Flong-running-tasks\u002F) | Design long-running tasks so coding tools can keep working until the job is done |\n| [Claude Agent Teams guide](https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fen\u002Fstage-3\u002Fcore-skills\u002Fagent-teams\u002F) | Coordinate multiple AI instances like a real development team |\n| [Claude Code Superpowers for engineering-grade development](https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fen\u002Fstage-3\u002Fcore-skills\u002Fsuperpowers\u002F) | Help AI produce engineering-grade code with TDD and best practices |\n| [Claude Code workflow best practices](https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fen\u002Fstage-3\u002Fcore-skills\u002Fworkflow\u002F) | Best practices for refactoring, code review, and daily development |\n| [Claude Code remote development on mobile](https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fen\u002Fstage-3\u002Fcore-skills\u002Fmobile-development\u002F) | Use Claude Code beyond the desktop and build a productive remote workflow on mobile devices |\n| [Claude Agent SDK complete guide](https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fen\u002Fstage-3\u002Fcore-skills\u002Fclaude-agent-sdk\u002F) | Build custom agent workflows and integrate Claude into your own tools with the SDK |\n| [From vibe coding to spec coding](https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fen\u002Fstage-3\u002Fcore-skills\u002Fspec-coding\u002F) | Move from ad-hoc prompting to a more structured, specification-driven AI development workflow |\n\n#### Cross-Platform Development\n\n| Section | Key Content |\n| :------ | :---------- |\n| [How to choose the right platform for your app](https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fen\u002Fstage-3\u002Fcross-platform\u002Fchoose-platform\u002F) | Compare app forms and choose the right platform based on users, scenarios, and delivery goals |\n| [Build a WeChat Mini Program](https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fen\u002Fstage-3\u002Fcross-platform\u002Fwechat-miniprogram\u002F) | Understand the ecosystem and ship a frontend mini program from template to launch |\n| [Build a WeChat Mini Program with backend](https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fen\u002Fstage-3\u002Fcross-platform\u002Fwechat-miniprogram-backend\u002F) | Add backend logic and databases to complete the full business loop |\n| [Build an Android app](https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fen\u002Fstage-3\u002Fcross-platform\u002Fandroid-app\u002F) | Learn Android app development with a modern native workflow |\n| [Build an iOS app](https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fen\u002Fstage-3\u002Fcross-platform\u002Fios-app\u002F) | Learn iOS app development and the conventions of the Apple ecosystem |\n| [Build a local PWA app](https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fen\u002Fstage-3\u002Fcross-platform\u002Fpwa-local-app\u002F) | Turn a website into a real app with offline support, push, and installation |\n| [Build a browser AI assistant extension](https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fen\u002Fstage-3\u002Fcross-platform\u002Fbrowser-ai-extension\u002F) | Create a Chrome extension that summarizes any page with either cloud APIs or built-in AI |\n| [Build an Electron desktop app](https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fen\u002Fstage-3\u002Fcross-platform\u002Felectron-voice-to-text\u002F) | Build a voice-to-text desktop app with Electron for three platforms |\n| [Rapidly build and mint an NFT](https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fen\u002Fstage-3\u002Fcross-platform\u002Fnft-minting\u002F) | Write a smart contract from scratch, deploy it, and mint your own NFT |\n| [Build a VS Code extension](https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fen\u002Fstage-3\u002Fcross-platform\u002Fvscode-extension\u002F) | Build an AI project assistant with templates, code chat, and multi-file Q&A |\n| [Build an industrial-grade Qt desktop app](https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fen\u002Fstage-3\u002Fcross-platform\u002Fqt-industrial-hmi\u002F) | Create a real-time Qt HMI system with trends, alerts, and monitoring |\n\n#### AI Capabilities Appendix\n\n| Section | Key Content |\n| :------ | :---------- |\n| [What is RAG and how does it work](https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fen\u002Fstage-3\u002Fai-advanced\u002Frag-introduction\u002F) | Build a systematic understanding of RAG principles and common architectures |\n| [Intermediate and advanced RAG workflows with LangGraph](https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fen\u002Fstage-3\u002Fai-advanced\u002Flanggraph-advanced-rag\u002F) | Design multi-step workflows and more advanced RAG systems |\n\n### 📚 Appendix Knowledge Base\n\n> Covering **9 major knowledge areas** and **80+ interactive topics**, this appendix uses animation and visual components to help you intuitively understand core concepts from computer fundamentals to the AI frontier.\n>\n> 👉 [View the full appendix](https:\u002F\u002Fdatawhalechina.github.io\u002Feasy-vibe\u002Fen\u002Fappendix\u002F)\n\n### 🎓 Other Courses\n\n- [Hands-on Modern RL](#other-courses)\n- [Learn Harness Engineering](#other-courses)\n\n## 🛠️ How To Learn\n\n- Read and practice the sections that match your current level. If you get stuck, feel free to open an issue.\n\n## 💻 Run Locally\n\n### Modern approach\n\nIn an AI IDE chat window such as VS Code, Cursor, or Trae, you can simply say:\n\n```text\nPlease help me run this project locally.\n```\n\n### Traditional approach\n\n1. `npm install`\n2. `npm run dev`\n3. Open `http:\u002F\u002Flocalhost:3000` in your browser.\n\n## Other Courses \n \nOur team has also created other courses! Check them out: \n \n[![Hands-on Modern RL](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FHANDS--ON_MODERN_RL-0052cc?style=for-the-badge)](https:\u002F\u002Fgithub.com\u002Fwalkinglabs\u002Fhands-on-modern-rl)\n \n**Hands-on Modern RL**: An open-source, hands-on curriculum bridging the gap from basic RL concepts to LLM alignment, RLVR, and advanced Agentic systems. \n\n[![Learn Harness Engineering](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FLEARN_HARNESS_ENGINEERING-0052cc?style=for-the-badge)](https:\u002F\u002Fgithub.com\u002Fwalkinglabs\u002Flearn-harness-engineering\u002Ftree\u002Fmain)\n\n**Learn Harness Engineering**: A comprehensive guide to harness engineering.\n\n## 🤝 Contributing & Contributors\n\n- If you find an issue or see something that can be improved, feel free to open an issue. If nobody replies, you can also contact the [Datawhale support team](https:\u002F\u002Fgithub.com\u002Fdatawhalechina\u002FDOPMC\u002Fblob\u002Fmain\u002FOP.md).\n- If you want to contribute, open a pull request. If nobody replies, you can also contact the [Datawhale support team](https:\u002F\u002Fgithub.com\u002Fdatawhalechina\u002FDOPMC\u002Fblob\u002Fmain\u002FOP.md).\n- If you want to start a new Datawhale open-source project, please follow the [Datawhale Open Source Project Guide](https:\u002F\u002Fgithub.com\u002Fdatawhalechina\u002FDOPMC\u002Fblob\u002Fmain\u002FGUIDE.md).\n\n### 🙏 Contributors\n\n- [Sanbu - Project Lead](https:\u002F\u002Fgithub.com\u002Fsanbuphy) (Datawhale member)\n- Fang Ke - Mentor (Datawhale member, Tsinghua University)\n- [Yerim Kang](https:\u002F\u002Fgithub.com\u002Fyerim25) (Practice projects, Tsinghua University)\n- [Zhilin Zhao](https:\u002F\u002Fgithub.com\u002FChileenZ) (Practice projects, Tsinghua University)\n- [Yixuan Li](https:\u002F\u002Fyixuan20.github.io\u002F) (Visual design, Tsinghua University)\n- Siyi Liu (Practice projects, Tsinghua University)\n- [Lixin Liu](https:\u002F\u002Fgithub.com\u002Fliulx25xx) (Practice projects, Tsinghua University)\n- Everyone in the AI Vibe Coding 101 internal testing group who shared suggestions and feedback\n\n### Special Thanks\n\n- Thanks to [@Sm1les](https:\u002F\u002Fgithub.com\u002FSm1les) for the help and support on this project\n- Thanks to every contributor and everyone who supported the project with feedback and stars ❤️\n\n\u003Cdiv align=\"center\"> \n \u003Ca href=\"https:\u002F\u002Fwww.star-history.com\u002F#datawhalechina\u002Feasy-vibe&type=timeline&legend=top-left\"> \n   \u003Cpicture> \n     \u003Csource media=\"(prefers-color-scheme: dark)\" srcset=\"https:\u002F\u002Fapi.star-history.com\u002Fsvg?repos=datawhalechina\u002Feasy-vibe&type=timeline&theme=dark&legend=top-left\" \u002F> \n     \u003Csource media=\"(prefers-color-scheme: light)\" srcset=\"https:\u002F\u002Fapi.star-history.com\u002Fsvg?repos=datawhalechina\u002Feasy-vibe&type=timeline&legend=top-left\" \u002F> \n   \u003C\u002Fpicture> \n \u003C\u002Fa>\n\u003C\u002Fdiv>\n\n\u003Cdiv align=center style=\"margin-top: 30px;\">\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fdatawhalechina\u002Feasy-vibe\u002Fgraphs\u002Fcontributors\">\n    \u003Cimg src=\"https:\u002F\u002Fcontrib.rocks\u002Fimage?repo=datawhalechina\u002Feasy-vibe\" \u002F>\n  \u003C\u002Fa>\n\u003C\u002Fdiv>\n\n## 📄 LICENSE\n\n\u003Cdiv align=\"center\">\n\u003Ca rel=\"license\" href=\"http:\u002F\u002Fcreativecommons.org\u002Flicenses\u002Fby-nc-sa\u002F4.0\u002F\">\n  \u003Cimg\n    alt=\"Creative Commons License\"\n    style=\"border-width:0\"\n    src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Flicense-CC%20BY--NC--SA%204.0-lightgrey\"\n  \u002F>\n\u003C\u002Fa>\n\u003Cbr \u002F>\nThis work is licensed under the\n\u003Ca rel=\"license\" href=\"http:\u002F\u002Fcreativecommons.org\u002Flicenses\u002Fby-nc-sa\u002F4.0\u002F\">\n  Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License\n\u003C\u002Fa>.\n\u003C\u002Fdiv>\n\n## Star History\n\n[![Star History Chart](https:\u002F\u002Fapi.star-history.com\u002Fsvg?repos=datawhalechina\u002Feasy-vibe&type=date&legend=top-left)](https:\u002F\u002Fwww.star-history.com\u002F#datawhalechina\u002Feasy-vibe&type=date&legend=top-left)\n","easy-vibe 是一个面向初学者的现代化编程课程项目，旨在通过逐步学习帮助用户掌握编程技能。该项目主要使用 JavaScript 语言，并结合了 AI、低代码\u002F无代码等技术特点，提供了丰富的交互式教程和实战案例，使编程学习过程更加直观易懂。它特别适合那些希望快速入门现代软件开发，尤其是 Web 应用构建的学习者，以及对利用 AI 辅助编程感兴趣的开发者。此外，easy-vibe 还支持多种语言版本，方便不同背景的用户参与学习。",2,"2026-06-11 03:32:15","trending"]