百科.dev
全部条目AI 编程趋势榜开源项目技术资讯提交条目
登录
< 返回工具列表
E

easy-vibe

> 前端框架
开源

你的第一个现代编码课程 一步一步的开始.

18.7K stars0 点赞1 次浏览
访问官网GitHub

工具介绍

你的第一个现代编码课程 一步一步的开始.


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
## Table of Contents - [Why Easy-Vibe](#why-easy-vibe) - [News](#-news) - [Who This Is For](#who-this-is-for) - [Your Learning Paths](#your-learning-paths) - [Study Suggestions](#study-suggestions) - [I. Beginner Entry](#i-beginner-entry) - [II. Junior and Mid-Level Developers](#ii-junior-and-mid-level-developers) - [III. Advanced Developers](#iii-advanced-developers) - [Appendix Knowledge Base](#-appendix-knowledge-base) - [How To Learn](#️-how-to-learn) - [Run Locally](#-run-locally) - [Other Courses](#other-courses) - [Contributing & Contributors](#-contributing--contributors) - [LICENSE](#-license) ## 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-08-12]** 📘 **Stage 1 has been restructured and polished**: The beginner path now starts with real problems and proceeds through finding opportunities, choosing a direction, understanding user needs, conducting interviews, narrowing the solution, building a prototype, integrating AI, and completing a presentable project. The explanations, real-world examples, images, and hands-on exercises have also been revised. Stage 1 is now better suited to complete beginners, first-time product builders, and indie developers who want to move from a real need to a prototype that can be shown to users. [👉 Start with Stage 1](https://datawhalechina.github.io/easy-vibe/en/stage-1/learning-map/) - **[2026-06-17]** 🌍 **Full multilingual coverage complete**: All tutorial content (Stages 1-3) is now available in 10 languages (zh-cn, en, zh-tw, ja-jp, ko-kr, es-es, fr-fr, de-de, ar-sa, vi-vn), covering product prototyping, full-stack development, and cross-platform development. - **[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://datawhalechina.github.io/easy-vibe/zh-cn/vibe-stories/story-1.html) - **[2026-03-26]** 🚀 **Major Stage 2 practice update**: Completed the SaaS capstone project "[Your First SaaS Full-Stack App: Copywriting Generator Website](https://datawhalechina.github.io/easy-vibe/en/stage-2/assignments/fullstack-app/)" and substantially expanded the "[How to integrate Stripe and payment systems](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/stripe-payment/)" 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](https://datawhalechina.github.io/easy-vibe/en/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](https://datawhalechina.github.io/easy-vibe/en/stage-2/) Past News - **[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. - **[2026-03-01]** The [Advanced Development section](https://datawhalechina.github.io/easy-vibe/en/stage-3/) 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](https://datawhalechina.github.io/easy-vibe/en/appendix/), 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 [Start here](https://datawhalechina.github.io/easy-vibe/en/stage-1/ai-capabilities-through-games/) ### 💡 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 [Start learning](https://datawhalechina.github.io/easy-vibe/en/stage-1/learning-map/) ### 🚀 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 [Start learning](https://datawhalechina.github.io/easy-vibe/en/stage-2/) ### 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 [Go to advanced development](https://datawhalechina.github.io/easy-vibe/en/stage-3/) ### 📚 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 [Browse the knowledge base](https://datawhalechina.github.io/easy-vibe/en/appendix/) ## Study Suggestions - If you are a beginner, product manager, or founder, start with [Stage 1](https://datawhalechina.github.io/easy-vibe/en/stage-1/learning-map/) - If you want to move from prototypes to full-stack delivery, start with [Stage 2](https://datawhalechina.github.io/easy-vibe/en/stage-2/) - If you want advanced Claude Code workflows or cross-platform projects, go to [Stage 3](https://datawhalechina.github.io/easy-vibe/en/stage-3/) - If you get blocked by concepts or missing background knowledge, use the [Appendix Knowledge Base](https://datawhalechina.github.io/easy-vibe/en/appendix/) ### 📖 Content Navigation ### I. Beginner Entry | Section | Key Content | | :------ | :---------- | | [Learning Map](https://datawhalechina.github.io/easy-vibe/en/stage-1/learning-map/) | A guided overview of the full learning journey | | [AI Era: If You Can Speak, You Can Code](https://datawhalechina.github.io/easy-vibe/en/stage-1/ai-capabilities-through-games/) | Get your first feel for AI coding through examples like Snake | | [Master AI Programming Tools](https://datawhalechina.github.io/easy-vibe/en/stage-1/introduction-to-ai-ide/) | Learn how AI IDE tools work and build simple local projects with them | | [Find Great Ideas](https://datawhalechina.github.io/easy-vibe/en/stage-1/finding-great-idea/) | Learn how to discover and validate product ideas worth building | | [Build Product Prototypes](https://datawhalechina.github.io/easy-vibe/en/stage-1/building-prototype/) | Move from requirements to single-page and multi-page product prototypes | | [Integrate AI Capabilities](https://datawhalechina.github.io/easy-vibe/en/stage-1/integrating-ai-capabilities/) | Integrate text, image, and video AI features | | [Complete project practice](https://datawhalechina.github.io/easy-vibe/en/stage-1/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](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-a-product-thinking/) | Core frameworks for going from zero to one with a product | | [AI Application Scenario Reference (B2B & B2C)](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-industry-scenarios/) | B2B industry and B2C consumer AI application scenarios | #### Appendix: User Research and Requirement Validation | Section | Key Content | | :------ | :---------- | | [Where to find ideas: 3 reference sources that work best for beginners](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-idea-sources/) | Build a reliable pipeline for finding concrete product opportunities | | [Double Diamond: first do the right thing, then do it right](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-double-diamond/) | 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](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-jobs-to-be-done/) | Analyze user goals through real tasks instead of surface-level feature requests | | [The Mom Test: a user interview method for validating demand](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-mom-test/) | Learn how to ask better questions and avoid false-positive feedback | #### A

Issues· 18 开放

查看全部 Issues在 GitHub 打开

暂无开放 Issues,或尚未同步最近议题。

> 标签

JavaScriptagentaicodingcourse

暂无评论,来聊聊你的看法吧

> 工具信息

发布日期2026年8月1日
最后更新2026年9月17日
分类前端框架
定价开源

> 相关工具

R
React
用于构建用户界面的 JavaScript 库
V
Vue.js
渐进式 JavaScript 框架
N
Next.js
基于 React 的全栈 Web 框架