企业官网建设流程全解析

• 教程
• 文档

Easy-Vibe 是 Datawhale 发起的开源项目制 AI 编程课程，核心理念是"在 AI 时代，编程从描述你想要的开始"。本文以项目的阿拉伯语版 README（docs-readme/ar-SA/README.md）为主线，结合仓库内真实的课程目录与工程配置，系统拆解其 3+1 阶段课程体系、五条差异化学习路径、分档学习建议与本地运行方式，帮助零基础用户、产品经理、学生与各层级开发者快速找到属于自己的 AI 编程入口。

为什么需要 Easy-Vibe：编程范式从"写代码"转向"描述需求"

项目 README 开篇用三个场景直接点明时代变化：想要一个记账应用？说出来。需要一个带微信登录的预约系统？说出来。想要一个带评论功能的博客？说出来。

在 AI 时代，编程的第一步不再是学习语法，而是清晰地描述你想要什么。Easy-Vibe 的价值就在于教会你如何把一句需求描述，一步步变成真实可用的产品——这正是"Vibe Coding（氛围编程）"的核心工作方式：通过自然语言与 AI 协作完成开发。

课程引言（docs/ar-sa/guide/introduction.md）进一步给出了背景判断：2025 年被很多人视为 AI 编程的元年，越来越多的人开始用 AI 写代码，但产出往往停留在"玩具"级别——不清楚如何用 Vibe Coding 组织开发流程、不知道选什么工具、更不明白原型与上线之间缺失的关键步骤。Easy-Vibe 正是针对这一断点设计：通过系统化训练，让学习者最终具备"把任何想法变成可用应用"的能力，成为同时掌握前后端开发、AI 能力集成与产品设计的复合型开发者。

面向谁：五类目标学员

课程体系总览：3+1 阶段的渐进式架构

仓库根目录的 llms.txt（为 AI Agent 提供的导航文件）给出了课程的高层架构：教程采用3+1 阶段的渐进式学习路径，从完全零基础一直延伸到高级开发：

Stage 1: 新手入门与产品原型 (stage-0/ + stage-1/) ├── 目标：建立编程思维，掌握 AI IDE，快速构建产品原型 ├── 产出：互动小游戏、完整的产品原型 └── 关键词：零基础、入门、学习路线、贪吃蛇、Cursor、Claude、Trae、MVP、产品思维、AI 能力集成 ├── Stage 2: 初中级开发 (stage-2/) ├── 目标：全栈开发能力，数据库、部署、支付 ├── 产出：可上线的全栈 AI 应用 └── 关键词：Dify、Supabase、Git、部署、Stripe、UI 设计 ├── Stage 3: 高级开发 (stage-3/) ├── 目标：跨平台开发，AI 进阶，Claude Code 深度使用 ├── 产出：生产级多平台应用 └── 关键词：MCP、RAG、微信小程序、Android、iOS、Electron └── 附录：知识体系 (appendix/) ├── 目标：计算机基础到工程素养的完整知识库 ├── 内容：9 大领域，80+ 交互式专题 └── 关键词：计算机基础、前端、后端、AI 原理、架构、运维

每一阶段都配有完整的实战项目，让学习者从"玩小游戏"逐步过渡到"交付真实产品"。上述目录结构在 docs 下按语言拆分，例如阿拉伯语版课程位于 docs/ar-sa，中文版位于 docs/zh-cn，各语言内部目录结构保持一致。

五条学习路径：按目标选择你的起点

README 将课程组织为五条清晰的路径，每条路径都明确标注了适合人群、学习内容与最终产出，学习者可以根据自己的当下目标直接进入：

🎮 路径一：想要快速获得第一次成功

• 适合人群：所有人
• 你将学到：通过一个简单具体的动手示例，感受 AI 编程到底是什么
• 你将获得：对 Vibe Coding 的清晰第一印象，以及如何通过对话与 AI 协作

入口：通过游戏体验 AI 能力（以贪吃蛇等小游戏为载体的首个实战）。

💡 路径二：想把想法变成产品原型

• 适合人群：零基础 / 产品经理 / 创始人
• 你将学到：学习路线图、AI IDE 工具、想法验证、原型制作、AI 能力集成与完整演示迭代
• 你将获得：一个可以真正展示给用户或同事的 AI 产品原型

入口：学习地图，随后依次走通 AI IDE 工具入门、产品原型构建、AI 能力集成与完整项目实战。

🚀 路径三：想端到端构建全栈产品

• 适合人群：初级开发者 / 独立开发者 / 进阶学习者
• 你将学到：前端工作流、设计转代码、数据库、后端 API、部署、计费与大项目实战
• 你将获得：独立上线现代 AI Web 应用的能力

入口：Stage 2 全栈开发，内容包括 Supabase 数据库与后端、前端实战、Dify 知识库集成与综合作业。

AI-Native：想要 Claude Code 与 Agent 高级工作流

• 适合人群：对 AI-Native 工程感兴趣的开发者
• 你将学到：Claude Code、MCP、Skills、Agent Teams、长时任务、Spec Coding 与跨平台应用交付
• 你将获得：面向复杂 AI 辅助开发与自动化的更强工作流

入口：Stage 3 高级开发，核心技能模块见 docs/ar-sa/stage-3/core-skills，跨平台实战见 docs/ar-sa/stage-3/cross-platform，RAG 与 LangGraph 进阶见 docs/ar-sa/stage-3/ai-advanced。

📚 路径五：想要参考资料与基础沉淀

• 适合人群：所有人
• 你将学到：计算机基础、前端/后端基础、基础设施、AI 原理与工程实践
• 你将获得：覆盖 9 大知识领域的长期参考知识库

入口：附录知识库。

学习建议：按水平选择起点

README 给出的通用建议非常简洁实用：遇到概念障碍或基础缺失时，随时回到附录知识库补课；如果卡住了，可以放心地提交 issue 求助。具体到不同水平的学习者：

• 零基础 / 产品经理 / 创始人：从 Stage 1 开始，先建立产品思维与原型能力；
• 想从原型走向完整交付：进入 Stage 2，补齐全栈、部署与支付闭环；
• 想要 Claude Code 高级工作流或跨平台项目：直接进入 Stage 3；
• 被概念或背景知识卡住：随时查阅附录知识库。

一、新手入门路径（Stage 1）

新手路径还配备了三个方向的附录：

产品与商业思维：产品思维与方案设计（从零到一的核心框架）、AI 应用场景参考 B2B & B2C（行业落地场景参考）。

用户研究与需求验证：想法来源：最适合初学者的 3 个参考来源、Double Diamond：先做正确的事，再正确地做事、用 Jobs to Be Done 发现用户真正想完成的任务、The Mom Test：验证需求的用户访谈方法。这四个附录构成了一条完整的"发现想法 → 结构化定义问题 → 理解真实需求 → 访谈验证"的需求验证链路。

技术方案：遇到错误怎么办（Vibe Coding 常见问题排查）、七款 AI 编程工具对比（通过实战测试对比主流 AI 编程平台）、用 Agent 设计网站（多 Agent 协作实战）。

二、初中级开发者路径（Stage 2）

前端方向：从 Lovart 批量生成视觉资产、Figma 与 MasterGo 设计工作流、UI 设计基础、多产品 UI 规范，到用 LLM 与 Skills 打磨界面、设计转代码，最终通过现代组件库快速构建专业界面。前端实战示例见 构建霍格沃茨画像。

后端方向：从 Git 与 GitHub 工作流、数据库到 Supabase、后端 API 设计与开发、Zeabur 云部署、现代 CLI AI 编程工具，到 Stripe 等支付系统集成，完整覆盖"开发—部署—变现"的交付闭环。

大项目实战：Stage 2 提供两个综合大项目：AI 文案生成 SaaS 全栈应用（含登录、生成、计费与后台管理）与在线考试管理系统（含题目生成、考试流程与管理工具），用于串联全部所学。

AI 能力附录：Dify 基础与知识库集成，学习如何基于 Dify Workflow 与基础 RAG 构建工具类产品。

三、高级开发者路径（Stage 3）

Claude Code 核心技能：入门与安装配置、MCP 协议连接外部服务、Skills 可复用技能封装、长时任务设计、Agent Teams 多智能体协作、TDD 工程级代码实践、工作流最佳实践、移动端远程开发、Claude Agent SDK 定制工作流，以及从 Vibe Coding 迈向 Spec Coding 的结构化开发。

跨平台开发：覆盖微信小程序（含后端）、Android、iOS、PWA 本地应用、浏览器 AI 助手插件、Electron 桌面应用、NFT 铸造、VS Code 插件与工业级 Qt HMI，详见 docs/ar-sa/stage-3/cross-platform。

AI 进阶：RAG 原理与常见架构、基于 LangGraph 的中高级 RAG 工作流，构建多步骤、更先进的检索增强生成系统。

附录知识库：9 大领域 80+ 交互专题

附录覆盖9 大知识领域、80+ 交互式专题，从计算机基础到 AI 前沿，通过动画与可视化组件帮助学习者直观理解核心概念，目录见 docs/ar-sa/appendix/index.md。

在本地运行 Easy-Vibe 文档站

README 提供了两种运行方式，分别对应"AI 优先"与"传统工程"两种工作习惯。

现代方式：让 AI IDE 帮你运行

在 VS Code、Cursor、Trae 等 AI IDE 的对话窗口中，直接输入：

请帮我运行这个项目（vibe 编程项目，AI 编程学习教程）。

AI 会读取项目结构并代为执行安装与启动命令——这本身就是一次最小化的 Vibe Coding 体验。

传统方式：三步启动

npm install npm run dev

然后在浏览器中打开http://localhost:3000。

从 package.json 可以看到，该项目基于VitePress + Vue 3构建（vitepress为文档框架，vue提供交互组件），完整的工程脚本还包括：

项目要求 Node.js 版本不低于 18（见 package.json 的engines字段），并采用CC-BY-NC-SA-4.0许可。

多语言支持与内容入口

Easy-Vibe 的教程内容完整支持10 种语言：简体中文、英文、繁体中文、日语、韩语、西班牙语、法语、德语、阿拉伯语与越南语。站点首页 docs/index.md 内置了浏览器语言自动检测逻辑：根据navigator.language将访问者重定向到对应语言的入口（如ar/ar-sa映射到/ar-sa/，zh/zh-cn映射到/zh-cn/），未匹配时回退到简体中文，并支持通过欢迎页记忆用户选择。每个语言的 README 版本统一维护在 docs-readme 目录下，便于各语言社区协作更新。

面向 AI Agent 的导航设计

项目在根目录提供了 llms.txt，专门面向 OpenClaw、Claude、Cursor、Trae 内置 AI 等 Agent 设计，包含高层架构图、快速决策树（"怎么开始/零基础" → Stage 1，"数据库/部署/全栈" → Stage 2，"MCP/小程序/跨平台" → Stage 3，"计算机基础/原理" → 附录）以及逐篇文章的索引，使 AI 工具能快速理解仓库结构并定位合适的教程内容。

近期重要更新

根据 README 的 News 区块，项目近期的主要进展包括：Stage 1 完成多语言全覆盖并经过导航/构建验证以避免 404；上线"Vibe Stories"栏目并收录了乡村小学教师、大学生、高中信息技术教师、货车司机等真实用户的 AI 编程故事；Stage 2 完成首个 SaaS 全栈大项目（AI 文案生成网站）并大幅扩充 Stripe 支付集成章节；新增用户研究与需求验证附录（想法来源、Double Diamond、Jobs to Be Done、The Mom Test）；附录知识库扩展至 9 大领域 80+ 交互专题；并新增 Android 与 iOS 开发教程。

参与贡献与开源许可

• 如果你发现文档错误或有改进建议，可以提交 issue；想贡献内容，可以提交 pull request。
• 项目由 Datawhale 成员发起与指导，课程与文档的维护依赖社区协作。
• 内容遵循Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International（CC BY-NC-SA 4.0）许可协议，允许署名、非商业使用与相同方式共享。

无论你是想"先赢一次"的零基础学习者，还是追求 AI-Native 高级工作流的资深开发者，都可以按本文的五条路径直接进入对应的阶段开始学习——把想法说出口，然后用 Easy-Vibe 把它变成产品。

• 教程
• 文档