easy-vibe
面向零基础人群的 AI 编程入门教程，教你用自然语言描述需求、借助 AI IDE 和 Claude Code 等工具快速构建 Web/小程序/跨平台应用。亮点是学习路径清晰、配有交互式可视化组件和真实用户案例，覆盖从想法验证到全栈部署完整流程。采用 CC BY-NC-SA 4.0 许可，仅限非商业用途。
README
Jump right in and vibe together — if you can talk, you can build apps.
直接上手，一起 vibe！会说话就会做应用。
🚀 开始探索 · ✨ 交互式教程 · 🦞 学习 OpenClaw · 📖 查看目录
🚀 开始体验 · ✨ 交互式教程 · 🦞 学习 OpenClaw · 📖 查看目录
适合初学者的学习地图 从零开始的清晰指引，告别"学了就忘" |
分步可视化教程 详细讲解，如同私教陪学 |
沉浸式模拟编码 虚拟鼠标引导，快速掌握核心 IDE 工作流 |
可见的 AI 原理 动画讲解，直观理解 AI 如何生成图像 |
像玩游戏一样学 RAG 交互式组件，让你点击完整了解 RAG 数据流 |
可视化终端概念 底层逻辑可视化后，命令行行为变得直观易懂 |
⭐ 在此处为仓库加星，助力加速更新 ❤️
📝 你有自己的 vibe coding 故事吗？ 在此提交，激励他人！
目录
为什么选择 Easy-Vibe
想要一个记账应用？说出来。
需要一个带微信登录的预订系统？说出来。
想要一个有评论功能的博客？说出来。
在 AI 时代，编程从描述你想要的开始。
Easy-Vibe 教你如何将想法变成真正的产品。
🔥 新闻
- [2026-03-29] ✨ Vibe Stories 上线并升级为真实用户旅程：新增主页 Vibe Stories 版块，包含交互式轮播和专用故事页面；随后将占位内容替换为四个真实用户故事，主角分别是乡村小学教师、大学生、高中信息技术老师和卡车司机，他们利用 AI 构建了真正的产品。👉 查看故事
- [2026-03-26] 🚀 第二阶段实践项目重大更新：完成了 SaaS 综合项目"你的第一个 SaaS 全栈应用：文案生成网站"，并大幅扩展了"如何集成 Stripe 及支付系统"部分，还包括多产品 UI 和微信小程序后端工作流的关键内容。
- [2026-03-25] 📚 新增附录：用户研究与需求验证：新增四篇文章，涵盖创意来源、双钻模型、待办任务（Jobs to Be Done）和妈妈测试（The Mom Test），帮助初学者发现和验证产品创意。👉 阅读附录
- [2026-03-25] 📚 英文文档全面更新：第二阶段（全栈开发）和第三阶段（高级开发）现已完全提供英文版。👉 开始学习
- [2026-03-02] 🦞 OpenClaw 和 AI Agent 友好支持：新增
llms.txt，方便 OpenClaw、Claude、Cursor、Trae 等 AI agent 快速理解仓库结构并找到合适的教程内容。 - [2026-03-01] 高级开发部分 已全面升级，包含 Claude Code 深度指南（MCP、Skills、Agent Teams 等）以及八个跨平台项目教程。
- [2026-02-25] 更新了附录知识库，现已覆盖 9 个知识领域和 80+ 个交互式主题。
- [2026-01-27] 新增 Android 和 iOS 应用开发教程。
- [2026-01-19] 发布了提示工程（Prompt Engineering）、AI 历史、认证设计、Git 原理等交互式演示。
- [2026-01-16] 重新组织项目结构，正式建立新手入门路径。
- [2026-01-14] 完成第一阶段产品原型文档的大幅更新。
- [2026-01-13] 重构文档架构，全面启用多语言支持。
- [2026-01-01] 发布项目核心学习地图。
适用人群
- 完全初学者：先构建第一个项目，再理解其原理
- 产品经理 / 创业者：快速验证创意，低成本构建 MVP（最小可行产品）
- 学生：培养 AI 时代的实用技能
- 初级开发者：学习从创意到发布的全流程
- 中高级开发者：升级 AI 协作工作流，处理复杂项目
学习路径
🎮 我想快速获得成就感
适合：所有人 学习内容：通过一个简单具体的动手示例，感受 AI 编程的实际体验 收获：对 vibe coding（随性编码）有清晰的第一印象，学会如何通过对话与 AI 协作
💡 我想把创意变成产品原型
适合：初学者 / 产品经理 / 创业者 学习内容：学习路线图、AI IDE（集成开发环境）工具、创意验证、原型制作、AI 能力集成、完整演示迭代 收获：一个可演示的 AI 产品原型，能真正展示给用户或队友
🚀 我想端到端构建全栈产品
适合：初级开发者 / 独立开发者 / 进阶学习者 学习内容：前端工作流、设计转代码、数据库、后端 API、部署、计费以及大型项目 收获：能够独立发布支持 AI 的现代 Web 应用
AI-Native：我想掌握高级 Claude Code 和 Agent 工作流
适合：对 AI 原生工程感兴趣的开发者 学习内容：Claude Code、MCP（模型上下文协议）、Skills（技能）、Agent Teams（代理团队）、长时间运行任务、Spec Coding（规范编码）、跨平台应用交付 收获：更强大的 AI 辅助开发和自动化工作流
📚 我想要参考材料和基础知识
适合：所有人 学习内容：计算机基础、前端/后端基础、基础设施、AI 原理、工程实践 收获：涵盖 9 大知识领域的长期参考知识库
学习建议
- 如果你是初学者、产品经理或创业者，从第一阶段开始
- 如果你想从原型走向全栈交付，从第二阶段开始
- 如果你想掌握高级 Claude Code 工作流或跨平台项目，前往第三阶段
- 如果你遇到概念障碍或缺乏背景知识，使用附录知识库
📖 内容导航
一、新手入门
| 章节 | 核心内容 |
|---|---|
| 学习地图 | 完整学习旅程的引导式概览 |
| AI 时代：会说话就能编程 | 通过贪吃蛇等示例，初次感受 AI 编程 |
| 掌握 AI 编程工具 | 学习 AI IDE（集成开发环境）工具的工作原理，并用它们构建简单的本地项目 |
| 寻找好创意 | 学习如何发现和验证值得构建的产品创意 |
| 构建产品原型 | 从需求到单页、多页产品原型 |
| 集成 AI 能力 | 集成文本、图像、视频等 AI 功能 |
| 完整项目实践 | 模拟真实场景，收集用户反馈，迭代完整项目 |
附录：产品与商业思维
| 章节 | 核心内容 |
|---|---|
| 产品思维与解决方案设计 | 从零到一打造产品的核心框架 |
| AI 行业应用场景（B 端） | 了解 AI 在各行业的应用 |
| AI 消费场景灵感（C 端） | 探索消费级 AI 中的产品机会 |
附录：用户研究与需求验证
| 章节 | 核心内容 |
|---|---|
| 从哪里找创意：3 个最适合初学者的参考来源 | 建立可靠渠道，发现具体的产品机会 |
| 双钻模型：先做对的事，再把事做对 | 使用结构化流程，从零散灵感走向可行方向 |
| 用待办任务（Jobs to Be Done）找到用户真正想完成的事 | 通过真实任务分析用户目标，而非表面需求 |
| 妈妈测试（The Mom Test）：验证需求的用户访谈方法 | 学会提出更好的问题，避免虚假正面反馈 |
附录：技术方案
| 章节 | 核心内容 |
|---|---|
| 遇到错误怎么办 | 常见 vibe coding 问题及排查方法 |
| 七款 AI 编程工具对比 | 通过动手测试比较主流 AI 编程平台 |
| 用 Agent 设计网站 | 在实践中学习多 Agent 协作 |
二、初中级开发者
前端
| 章节 | 核心内容 |
|---|---|
| 前端 0：用 Lovart 搭建自己的素材生成 Agent | 使用 Nanobanana 和 Lovart 批量生成视觉素材，构建具备意图识别的绘图 Agent |
| 前端 1：Figma 与 MasterGo 基础 | 学习从设计稿到实现所需的 UI 思维工作流 |
| 前端 2：构建你的第一个现代应用——UI 设计 | 学习现代应用界面背后的 UI 设计基础 |
| 前端 3：UI 规范与多产品设计 | 通过共享 UI 规则，提升多个产品的一致性和美观度 |
| 前端 4：使用 LLM 和 Skills 美化界面 | 利用提示词和插件，让 AI 生成更精致、更具特色的界面 |
| 前端 4：一起搭建霍格沃茨肖像画 | 从零构建一个交互式 AI 图像前端项目 |
| 前端 6：从设计原型到项目代码 | 将设计原型转换为可在浏览器中运行的前端代码 |
| 前端 7：用现代组件库升级 UI | 使用组件库更快地构建专业界面 |
后端
| 章节 | 核心内容 |
|---|---|
| 后端 1：学习 Git 和 GitHub | 掌握 Git 的核心版本控制操作和协作工作流 |
| 后端 2：从数据库到 Supabase | 学习关系型数据库基础，并将 Supabase 作为现代 BaaS（后端即服务）平台使用 |
| 后端 3：后端 API 设计与开发 | 使用 AI 辅助 API 设计、后端代码生成和 API 文档编写 |
| 后端 4：发布你的产品原型 | 使用 Zeabur 将全栈应用快速部署到云端 |
| 后端 5：从 IDE 到命令行 AI 编码工具 | 探索以终端为主的现代 AI 编码工作流 |
| 后端 6：集成 Stripe 及其他计费系统 | 通过支付和计费功能实现产品盈利 |
大型项目
| 章节 | 核心内容 |
|---|---|
| 大型项目 1：你的第一个 SaaS 全栈应用——AI 文案生成网站 | 构建一个包含登录、文案生成、计费和后台管理的 AI 营销文案工作台 |
| 大型项目 2：在线考试与管理系统 | 构建一个包含出题、考试流程和管理工具的在线考试系统 |
AI 能力附录
| 章节 | 核心内容 |
|---|---|
| AI 1：Dify 基础与知识库集成 | 学习使用 Dify 构建 AI 应用，并集成私有知识库 |
三、中高级开发者
Claude Code 核心技能
| 章节 | 核心内容 |
|---|---|
| Claude Code 入门 | 安装、配置、基础操作和常用命令 |
| Claude Code MCP 指南 | 通过 MCP（模型上下文协议）将 Claude Code 连接到 GitHub、数据库、API 等服务 |
| Claude Code Skills 指南 | 将专业知识打包成可复用的 Skills（技能），反复使用 |
| 如何让 Claude Code 长时间运行任务 | 设计长时间运行任务，让编码工具持续工作直至完成 |
| Claude Agent Teams 指南 | 像真实开发团队一样协调多个 AI 实例 |
| Claude Code 工程级开发超能力 | 借助 TDD（测试驱动开发）和最佳实践，帮助 AI 生成工程级代码 |
| Claude Code 工作流最佳实践 | 重构、代码审查和日常开发的最佳实践 |
| Claude Code 移动端远程开发 | 超越桌面端使用 Claude Code，在移动设备上构建高效的远程工作流 |
| Claude Agent SDK 完整指南 | 使用 SDK 构建自定义 Agent 工作流，将 Claude 集成到自己的工具中 |
| 从 vibe coding 到 spec coding | 从即兴提示转向更结构化、规范驱动的 AI 开发工作流 |
跨平台开发
| 章节 | 核心内容 |
|---|---|
| 如何为应用选择正确的平台 | 比较不同应用形态，根据用户、场景和交付目标选择合适的平台 |
| 构建微信小程序 | 了解生态系统，从模板到发布完成一个前端小程序 |
| 构建带后端的微信小程序 | 添加后端逻辑和数据库，完成完整的业务闭环 |
| 构建 Android 应用 | 使用现代原生工作流学习 Android 应用开发 |
| 构建 iOS 应用 | 学习 iOS 应用开发和 Apple 生态系统的惯例 |
| 构建本地 PWA（渐进式 Web 应用） | 将网站变为真正的应用，支持离线、推送和安装 |
| 构建浏览器 AI 助手扩展 | 创建一个 Chrome 扩展，使用云 API 或内置 AI 总结任意页面 |
| 构建 Electron 桌面应用 | 使用 Electron 构建跨三个平台的语音转文字桌面应用 |
| 快速构建并铸造 NFT | 从零编写智能合约、部署并铸造自己的 NFT |
| 构建 VS Code 扩展 | 构建一个包含模板、代码聊天和多文件问答的 AI 项目助手 |
| 构建工业级 Qt 桌面应用 | 创建实时 Qt HMI（人机界面）系统，支持趋势图、报警和监控 |
AI 能力附录
| 章节 | 核心内容 |
|---|---|
| 什么是 RAG（检索增强生成）及其工作原理 | 系统性地理解 RAG 原理和常见架构 |
| 使用 LangGraph 实现中高级 RAG 工作流 | 设计多步骤工作流和更高级的 RAG 系统 |
📚 附录知识库
涵盖 9 大知识领域 和 80+ 个交互式主题，本附录使用动画和可视化组件，帮助你直观理解从计算机基础到 AI 前沿的核心概念。
👉 查看完整附录
🎓 其他课程
🛠️ 如何学习
- 阅读并实践