@bozhou_ai: 自学 Vibe Coding 看这三个开源项目就够，不用买课 很多 AI Coding 课程的素材都从这里来，原始版本反而更系统 1. Easy-Vibe DataWhale 出品的系统教程，5k stars。分三阶段：从 AI 编程小游…
摘要
本文推荐了三个高星开源GitHub项目，帮助开发者零成本系统地学习AI编程与Vibe Coding工作流，涵盖结构化教程、提示词技能库及全方位工具目录。
查看缓存全文
缓存时间: 2026/05/08 13:33
自学 Vibe Coding 看这三个开源项目就够，不用买课 很多 AI Coding 课程的素材都从这里来，原始版本反而更系统 1. Easy-Vibe DataWhale 出品的系统教程，5k stars。分三阶段：从 AI 编程小游戏入门，到产品创意 + Web 原型，再到桌面应用和多 Agent 协作。零基础友好，中文为主 https://github.com/datawhalechina/easy-vibe… 2. vibe-coding-cn 原 EnzeD/vibe-coding 的中文翻译版，11k stars。三块内容：Prompt 提示词、Skill 技能库、Workflow 工作流。强调规划先行、模块拆分、接口在前，把 vibe coding 从随性即兴变成可重复工程 https://github.com/tukuaiai/vibe-coding-cn… 3. awesome-vibe-coding 最全的 Vibe Coding 资源 awesome list，4k stars。覆盖浏览器工具、IDE、移动端 App、插件、CLI 工具。所有主流 vibe coding 工具的总目录 https://github.com/filipecalegario/awesome-vibe-coding… 先把这三个读完，你对AI Coding 会有一个全新的认知
datawhalechina/easy-vibe
Source: https://github.com/datawhalechina/easy-vibe
Jump right in and vibe together — if you can talk, you can build apps.
直接上手，一起 vibe！会说话就会做应用。
🚀 Start Exploring · ✨ Interactive Tutorial · 🦞 Learn OpenClaw
🚀 开始体验 · ✨ 交互式教程 · 🦞 学习 OpenClaw
Read Online ·
Learning Map
开始阅读 ·
学习地图
A beginner-friendly learning map Clear guidance from zero, so you can stop "learning and forgetting" |
Step-by-step visual tutorials Detailed walkthroughs that feel like learning with a private tutor |
Immersive simulated coding Virtual mouse guidance helps you quickly learn the core IDE workflow |
Visible AI principles Animated explanations make it easy to see how AI generates images |
Learn RAG like a game Interactive components let you click through the full RAG data flow |
Visual terminal concepts Command-line behavior becomes intuitive when the underlying logic is visualized |
⭐ Star the repo here to help accelerate updates ❤️
📝 Have your own vibe coding story? Submit it here and inspire others!
Why Easy-Vibe
Want an expense tracker? Say it.
Need a booking system with WeChat login? Say it.
Want a blog with comments? Say it.
In the AI era, programming starts by describing what you want.
Easy-Vibe teaches you how to turn that into a real product.
🔥 News
- [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
- [2026-03-26] 🚀 Major Stage 2 practice update: Completed the SaaS capstone project “Your First SaaS Full-Stack App: Copywriting Generator Website” and substantially expanded the “How to integrate Stripe and payment systems” section, plus key content around multi-product UI and WeChat Mini Program backend workflows.
- [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
- [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
Past News
- [2026-03-02] 🦞 OpenClaw and AI Agent friendly support: Added
llms.txtso OpenClaw, Claude, Cursor, Trae, and other AI agents can quickly understand the repository structure and find the right tutorial content. - [2026-03-01] The Advanced Development section has been comprehensively upgraded with deep guides for Claude Code, including MCP, Skills, Agent Teams, and more, along with eight cross-platform project tutorials.
- [2026-02-25] Updated the Appendix Knowledge Base, now covering 9 knowledge areas and 80+ interactive topics.
- [2026-01-27] Added Android and iOS app development tutorials.
- [2026-01-19] Released interactive demos for Prompt Engineering, AI history, authentication design, Git principles, and more.
- [2026-01-16] Reorganized the project structure and formally established a beginner entry path.
- [2026-01-14] Completed a large update to the Stage 1 product prototyping docs.
- [2026-01-13] Refactored the documentation architecture and fully enabled multi-language support.
- [2026-01-01] Released the core learning map for the project.
Who This Is For
- Complete beginners: Build your first project first, then understand how it works
- Product managers / founders: Validate ideas fast and build MVPs at low cost
- Students: Develop practical skills for the AI era
- Junior developers: Learn the full path from idea to launch
- Mid-level and senior developers: Upgrade your AI collaboration workflow for complex projects
Your Learning Paths
🎮 I want a fast first win
Best for: Everyone What you will learn: What AI coding actually feels like through a simple, concrete hands-on example What you will get: A clear first impression of vibe coding and how to work with AI by conversation
💡 I want to turn an idea into a product prototype
Best for: Beginners / product managers / founders What you will learn: Learning roadmap, AI IDE tools, idea validation, prototyping, AI capability integration, and full demo iteration What you will get: A demoable AI product prototype you can actually show to users or teammates
🚀 I want to build full-stack products end to end
Best for: Junior developers / indie hackers / advanced learners What you will learn: Frontend workflows, design-to-code, databases, backend APIs, deployment, billing, and major projects What you will get: The ability to independently ship modern AI-enabled web applications
AI-Native: I want advanced Claude Code and agent workflows
Best for: Developers interested in AI-native engineering What you will learn: Claude Code, MCP, Skills, Agent Teams, long-running tasks, Spec Coding, and cross-platform app delivery What you will get: A stronger workflow for complex AI-assisted development and automation
📚 I want reference material and fundamentals
Best for: Everyone What you will learn: Computer fundamentals, frontend/backend basics, infrastructure, AI principles, and engineering practices What you will get: A long-term reference knowledge base covering 9 major knowledge areas
Study Suggestions
- If you are a beginner, product manager, or founder, start with Stage 1
- If you want to move from prototypes to full-stack delivery, start with Stage 2
- If you want advanced Claude Code workflows or cross-platform projects, go to Stage 3
- If you get blocked by concepts or missing background knowledge, use the Appendix Knowledge Base
📖 Content Navigation
I. Beginner Entry
| Section | Key Content |
|---|---|
| Learning Map | A guided overview of the full learning journey |
| AI Era: If You Can Speak, You Can Code | Get your first feel for AI coding through examples like Snake |
| Master AI Programming Tools | Learn how AI IDE tools work and build simple local projects with them |
| Find Great Ideas | Learn how to discover and validate product ideas worth building |
| Build Product Prototypes | Move from requirements to single-page and multi-page product prototypes |
| Integrate AI Capabilities | Integrate text, image, and video AI features |
| Complete project practice | Simulate real scenarios, collect user feedback, and iterate on a full project |
Appendix: Product and Business Thinking
| Section | Key Content |
|---|---|
| Product Thinking and Solution Design | Core frameworks for going from zero to one with a product |
| AI Industry Application Scenarios (B-end) | Understand how AI is applied across industries |
| AI Consumer Scenarios Inspiration (C-end) | Explore product opportunities in consumer AI |
Appendix: User Research and Requirement Validation
| Section | Key Content |
|---|---|
| Where to find ideas: 3 reference sources that work best for beginners | Build a reliable pipeline for finding concrete product opportunities |
| Double Diamond: first do the right thing, then do it right | Use a structured process to move from scattered inspiration to a workable direction |
| Use Jobs to Be Done to find what users really want done | Analyze user goals through real tasks instead of surface-level feature requests |
| The Mom Test: a user interview method for validating demand | Learn how to ask better questions and avoid false-positive feedback |
Appendix: Technical Solutions
| Section | Key Content |
|---|---|
| What to do if you encounter errors | Common vibe coding issues and how to troubleshoot them |
| Comparison of Seven AI Programming Tools | Compare major AI coding platforms through hands-on testing |
| Design Websites with Agents | Learn multi-agent collaboration in practice |
II. Junior and Mid-Level Developers
Frontend
| Section | Key Content |
|---|---|
| Frontend 0: Build Your Own Asset-Production Agent with Lovart | Use Nanobanana and Lovart to batch-generate visual assets and build a drawing agent with intent recognition |
| Frontend 1: Figma & MasterGo Basics | Learn the workflow from design drafts to implementation-ready UI thinking |
| Frontend 2: Build Your First Modern App - UI Design | Learn the UI design foundations behind modern application interfaces |
| Frontend 3: UI Guidelines and Multi-Product Design | Improve consistency and aesthetics across multiple products with shared UI rules |
| Frontend 4: Make Interfaces Beautiful with LLMs and Skills | Use prompts and plugins to make AI generate more polished, distinctive interfaces |
| Frontend 4: Let’s Build Hogwarts Portraits | Build an interactive AI-image frontend project from scratch |
| Frontend 6: From Design Prototype to Project Code | Turn design prototypes into frontend code that can really run in the browser |
| Frontend 7: Upgrade Your UI with Modern Component Libraries | Use component libraries to build professional interfaces faster |
Backend
| Section | Key Content |
|---|---|
| Backend 1: Learn Git and GitHub | Master core version control operations and collaboration workflows with Git |
| Backend 2: From Database to Supabase | Learn relational database basics and use Supabase as a modern BaaS platform |
| Backend 3: Backend API Design and Development | Use AI to assist API design, backend code generation, and API documentation |
| Backend 4: Ship Your Product Prototype | Quickly deploy full-stack applications to the cloud with Zeabur |
| Backend 5: From IDEs to CLI AI Coding Tools | Explore terminal-first AI coding workflows for modern development |
| Backend 6: Integrate Stripe and Other Billing Systems | Add monetization with payment and billing capabilities |
Major Projects
| Section | Key Content |
|---|---|
| Major Project 1: Your First SaaS Full-Stack App - AI Copywriting Website | Build an AI marketing copy workspace with login, generation, billing, and admin management |
| Major Project 2: Online Exam and Management System | Build an online exam system with question generation, test-taking flows, and admin tools |
AI Capabilities Appendix
| Section | Key Content |
|---|---|
| AI 1: Dify Basics & Knowledge Base Integration | Learn to build AI applications with Dify and integrate private knowledge bases |
III. Advanced Developers
Claude Code Core Skills
| Section | Key Content |
|---|---|
| Getting started with Claude Code | Installation, setup, fundamentals, and useful commands |
| Claude Code MCP guide | Connect Claude Code to GitHub, databases, APIs, and other services through MCP |
| Claude Code Skills guide | Package expertise into reusable skills you can use again and again |
| How to keep Claude Code working for long-running tasks | Design long-running tasks so coding tools can keep working until the job is done |
| Claude Agent Teams guide | Coordinate multiple AI instances like a real development team |
| Claude Code Superpowers for engineering-grade development | Help AI produce engineering-grade code with TDD and best practices |
| Claude Code workflow best practices | Best practices for refactoring, code review, and daily development |
| Claude Code remote development on mobile | Use Claude Code beyond the desktop and build a productive remote workflow on mobile devices |
| Claude Agent SDK complete guide | Build custom agent workflows and integrate Claude into your own tools with the SDK |
| From vibe coding to spec coding | Move from ad-hoc prompting to a more structured, specification-driven AI development workflow |
Cross-Platform Development
| Section | Key Content |
|---|---|
| How to choose the right platform for your app | Compare app forms and choose the right platform based on users, scenarios, and delivery goals |
| Build a WeChat Mini Program | Understand the ecosystem and ship a frontend mini program from template to launch |
| Build a WeChat Mini Program with backend | Add backend logic and databases to complete the full business loop |
| Build an Android app | Learn Android app development with a modern native workflow |
| Build an iOS app | Learn iOS app development and the conventions of the Apple ecosystem |
| Build a local PWA app | Turn a website into a real app with offline support, push, and installation |
| Build a browser AI assistant extension | Create a Chrome extension that summarizes any page with either cloud APIs or built-in AI |
| Build an Electron desktop app | Build a voice-to-text desktop app with Electron for three platforms |
| Rapidly build and mint an NFT | Write a smart contract from scratch, deploy it, and mint your own NFT |
| Build a VS Code extension | Build an AI project assistant with templates, code chat, and multi-file Q&A |
| Build an industrial-grade Qt desktop app | Create a real-time Qt HMI system with trends, alerts, and monitoring |
AI Capabilities Appendix
| Section | Key Content |
|---|---|
| What is RAG and how does it work | Build a systematic understanding of RAG principles and common architectures |
| Intermediate and advanced RAG workflows with LangGraph | Design multi-step workflows and more advanced RAG systems |
📚 Appendix Knowledge Base
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.
🛠️ How To Learn
- Read and practice the sections that match your current level. If you get stuck, feel free to open an issue.
💻 Run Locally
Modern approach
In an AI IDE chat window such as VS Code, Cursor, or Trae, you can simply say:
Please help me run this project locally.
Traditional approach
npm installnpm run dev- Open
http://localhost:3000in your browser.
🤝 Contributing
- 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.
- If you want to contribute, open a pull request. If nobody replies, you can also contact the Datawhale support team.
- If you want to start a new Datawhale open-source project, please follow the Datawhale Open Source Project Guide.
🙏 Contributors
- Sanbu - Project Lead (Datawhale member)
- Fang Ke - Mentor (Datawhale member, Tsinghua University)
- Yerim Kang (Practice projects, Tsinghua University)
- Zhilin Zhao (Practice projects, Tsinghua University)
- Yixuan Li (Visual design, Tsinghua University)
- Siyi Liu (Practice projects, Tsinghua University)
- Lixin Liu (Practice projects, Tsinghua University)
- Everyone in the AI Vibe Coding 101 internal testing group who shared suggestions and feedback
Special Thanks
- Thanks to @Sm1les for the help and support on this project
- Thanks to every contributor and everyone who supported the project with feedback and stars ❤️
📄 LICENSE
This work is licensed under the Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License .
Star History
相似文章
datawhalechina/easy-vibe
easy-vibe 是由 Datawhale China 推出的一款开源、面向初学者的学习资源与教程框架，旨在通过自然语言（vibe coding）引导用户构建 AI 驱动的应用程序。它包含互动教程、学习路线图以及多语言支持。
@nuannuan_share: 如果我要在90天内找到一份20万美元的AI工程师工作，我不会去读学位。 我会精通这10个GitHub仓库。 1. awesome-llm-apps 生产级AI指南。RAG、智能体、多模态应用，附完整代码。10.6万+ stars。 仓库 …
一篇中文社交媒体帖子推荐了10个GitHub仓库，声称掌握这些仓库可在90天内帮助找到20万美元的AI工程师工作，涵盖LangChain、LangGraph、CrewAI、Ollama、Qdrant等主流AI开发框架和工具。
datawhalechina/hello-agents
Datawhale社区发布的开源中文教程《从零开始构建智能体》，系统性讲解AI原生智能体的理论与实践，涵盖从基础原理到自研框架HelloAgents的完整学习路径。
Build Apps for Your Friends (Vibe Coding)
本文介绍了如何利用 Google AI Studio 的 Vibe Coding 功能，通过自然语言描述而非编写代码来构建定制的交互式应用，如黑胶唱片机风格的贺卡生成器。
@qloog: 别再说 AI 只是提效工具了。 这套OpenAI 官方都认可的 Codex 教程，直接让你一个人干完一个团队的活： 做 iOS App、写代码、出投资者 Deck，全流程打通。 核心就两件事： 自定义 Skill（能力复用） 自动化（效率…
OpenAI-endorsed Codex tutorial enables solo developers to build iOS apps, write code, and generate investor decks through reusable custom skills and automation.