fix: sync all translated READMEs with root README and add proper translations
- Sync en-US/README.md with root README.md (path adjustments) - Translate zh-TW to proper Traditional Chinese (was mixed simplified) - Translate ja-JP body content to Japanese (was Chinese) - Translate ko-KR body content to Korean (was Chinese) - Translate es-ES, fr-FR, ar-SA, vi-VN, de-DE body content - Add missing banner image to all translations - Add missing sections: User Research appendix, Major Projects, Claude Agent SDK, Spec Coding, Other Courses, etc. - Ensure consistent structure across all 10 language versions Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
sanbuphy
+229
-266
@@ -1,7 +1,9 @@
|
||||
<!-- trigger vercel build -->
|
||||
<div align="center">
|
||||
|
||||
<img src="../../assets/easy-vibe-logo-hd.svg" alt="Easy-Vibe Logo" width="300">
|
||||
<img src="../../assets/easy-vibe-logo-hd.svg" alt="شعار Easy-Vibe" width="300">
|
||||
|
||||
<img src="../../assets/banner.png" alt="بانر Easy-Vibe" width="100%">
|
||||
|
||||
<p align="center" style="font-size: 1.2em; color: #666; margin: 20px 0;">
|
||||
ابدأ مباشرة وادخل معنا في الـ vibe. إذا كنت تستطيع التحدث، يمكنك بناء التطبيقات.<br>
|
||||
@@ -11,16 +13,16 @@
|
||||
<a href="https://trendshift.io/repositories/22079" target="_blank"><img src="https://trendshift.io/api/badge/repositories/22079" alt="datawhalechina/easy-vibe | Trendshift" style="width: 250px; height: 55px;" width="250" height="55"/></a>
|
||||
|
||||
<p align="center">
|
||||
🚀 <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">ابدأ الآن</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/en/appendix/">دليل تفاعلي</a> · 🦞 <a href="https://github.com/datawhalechina/hello-claw">تعلّم OpenClaw</a><br>
|
||||
🚀 <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">ابدأ الآن</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/en/appendix/">دليل تفاعلي</a> · 🦞 <a href="https://github.com/datawhalechina/hello-claw">تعلّم OpenClaw</a> · 📖 <a href="#table-of-contents">جدول المحتويات</a><br>
|
||||
<span style="font-size: 0.85em; color: #888;">🚀 <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">开始体验</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/">交互式教程</a> · 🦞 <a href="https://github.com/datawhalechina/hello-claw">学习 OpenClaw</a> · 📖 <a href="#table-of-contents">查看目录</a></span>
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
<a href="https://datawhalechina.github.io/easy-vibe/welcome.html">ابدأ القراءة</a> ·
|
||||
<a href="https://datawhalechina.github.io/easy-vibe/welcome.html">اقرأ عبر الإنترنت</a> ·
|
||||
<a href="#-content-navigation">خريطة التعلّم</a><br>
|
||||
<span style="font-size: 0.85em; color: #888;">
|
||||
<a href="https://datawhalechina.github.io/easy-vibe/welcome.html">开始阅读</a> ·
|
||||
<a href="#-内容导航">学习地图</a>
|
||||
<a href="#-content-navigation">学习地图</a>
|
||||
</span>
|
||||
</p>
|
||||
|
||||
@@ -52,66 +54,83 @@
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/gif-header.png" width="100%">
|
||||
<br>
|
||||
<strong>新手专属学习地图</strong>
|
||||
<strong>خريطة تعلّم للمبتدئين</strong>
|
||||
<br>
|
||||
<sub>零基础专属指引，清晰规划路径，告别“学了忘”</sub>
|
||||
<sub>إرشاد واضح من الصفر، لتنسى مشكلة "تعلّم ونسي"</sub>
|
||||
</td>
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/gif-tutorial.png" width="100%">
|
||||
<br>
|
||||
<strong>手把手图文教程</strong>
|
||||
<strong>دروس مرئية خطوة بخطوة</strong>
|
||||
<br>
|
||||
<sub>保姆级图文详解，如同私教在旁，跟着做就能学会</sub>
|
||||
<sub>شروحات مفصّلة كأنك تتعلم مع معلّم خاص</sub>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/gif-ide.gif" width="100%">
|
||||
<br>
|
||||
<strong>沉浸式模拟编程</strong>
|
||||
<strong>برمجة محاكاة غامرة</strong>
|
||||
<br>
|
||||
<sub>虚拟鼠标自动导览，带你快速上手 IDE 核心用法</sub>
|
||||
<sub>فأر افتراضي يرشدك لتعلّم سير عمل IDE بسرعة</sub>
|
||||
</td>
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/gif-diffusion.gif" width="100%">
|
||||
<br>
|
||||
<strong>看得见的 AI 原理</strong>
|
||||
<strong>مبادئ الذكاء الاصطناعي المرئية</strong>
|
||||
<br>
|
||||
<sub>算法原理动画化，一眼看懂 AI 如何“画”出图片</sub>
|
||||
<sub>شروحات متحركة تسهّل رؤية كيف تولّد الذكاء الاصطناعي الصور</sub>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/gif-rag.gif" width="100%">
|
||||
<br>
|
||||
<strong>像玩游戏一样学 RAG</strong>
|
||||
<strong>تعلّم RAG كأنك تلعب لعبة</strong>
|
||||
<br>
|
||||
<sub>独家交互组件，点击即可看清 RAG 数据流向</sub>
|
||||
<sub>مكونات تفاعلية تتيح لك النقر عبر تدفق بيانات RAG الكامل</sub>
|
||||
</td>
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/git-terminal.gif" width="100%">
|
||||
<br>
|
||||
<strong>可视化终端原理</strong>
|
||||
<strong>مفاهيم الطرفية المرئية</strong>
|
||||
<br>
|
||||
<sub>命令行操作可视化，直观展示后台逻辑与原理</sub>
|
||||
<sub>سلوك سطر الأوامر يصبح حدسيًا عند تصور المنطق الأساسي</sub>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div align="center">
|
||||
<h3>⭐ 欢迎 <a href="https://github.com/datawhalechina/easy-vibe" style="color: #d0cd16ff;">点击此处Star</a> 加速更新 ❤️</h3>
|
||||
<h3>⭐ <a href="https://github.com/datawhalechina/easy-vibe" style="color: #d0cd16ff;">ضع نجمة للمستودع هنا</a> للمساعدة في تسريع التحديثات ❤️</h3>
|
||||
</div>
|
||||
|
||||
<div align="center" style="margin: 30px 0;">
|
||||
<a href="https://github.com/datawhalechina/easy-vibe/issues/new?template=story_submission.md">
|
||||
<img src="https://raw.githubusercontent.com/datawhalechina/easy-vibe/main/assets/stories_image.png" alt="Share Your Vibe Story" width="80%" style="border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.15);">
|
||||
<img src="https://raw.githubusercontent.com/datawhalechina/easy-vibe/main/assets/stories_image.png" alt="شارك قصة Vibe الخاصة بك" width="80%" style="border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.15);">
|
||||
</a>
|
||||
<p style="margin-top: 15px; font-size: 1.1em; color: #666;">
|
||||
📝 <strong>Have your own vibe coding story?</strong>
|
||||
Submit it here and inspire others!
|
||||
📝 <strong>هل لديك قصة vibe coding خاصة بك؟</strong>
|
||||
أرسلها هنا وألهم الآخرين!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
## 为什么需要 Easy-Vibe
|
||||
## جدول المحتويات
|
||||
|
||||
- [لماذا Easy-Vibe](#لماذا-easy-vibe)
|
||||
- [أخبار](#-news)
|
||||
- [لمن هذا المشروع](#لمن-هذا-المشروع)
|
||||
- [مسارات التعلّم الخاصة بك](#مسارات-التعلّم-الخاصة-بك)
|
||||
- [نصائح الدراسة](#نصائح-الدراسة)
|
||||
- [أولاً: دخول المبتدئين](#أولاً-دخول-المبتدئين)
|
||||
- [ثانياً: المطورون المبتدئون والمتوسطون](#ثانياً-المطورون-المبتدئون-والمتوسطون)
|
||||
- [ثالثاً: المطورون المتقدمون](#ثالثاً-المطورون-المتقدمون)
|
||||
- [قاعدة المعرفة في الملحق](#-قاعدة-المعرفة-في-الملحق)
|
||||
- [كيف تتعلم](#️-كيف-تتعلم)
|
||||
- [التشغيل محلياً](#-التشغيل-محلياً)
|
||||
- [دورات أخرى](#دورات-أخرى)
|
||||
- [المساهمة والمساهمون](#-المساهمة-والمساهمون)
|
||||
- [الترخيص](#-الترخيص)
|
||||
|
||||
## لماذا Easy-Vibe
|
||||
|
||||
تريد تطبيقا لتتبع الدخل والمصروفات؟ فقط قل ذلك.
|
||||
|
||||
@@ -130,317 +149,262 @@ Easy-Vibe يعلمك كيف تحول ذلك إلى منتج حقيقي.
|
||||
- **[2026-03-26]** 🚀 **تحديث كبير لممارسة المرحلة 2**: اكتمل مشروع SaaS النهائي "[أول تطبيق SaaS full-stack: موقع مولد النصوص](https://datawhalechina.github.io/easy-vibe/en/stage-2/assignments/fullstack-app/)" وتم توسيع قسم "[كيفية دمج Stripe وأنظمة الدفع](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/stripe-payment/)" بشكل كبير.
|
||||
- **[2026-03-25]** 📚 **ملحق جديد: بحث المستخدم والتحقق من المتطلبات**: تمت إضافة أربع مقالات جديدة تغطي مصادر الأفكار، نموذج Double Diamond، Jobs to Be Done و The Mom Test لمساعدة المبتدئين على اكتشاف أفكار المنتجات والتحقق منها. [👉 قراءة الملحق](https://datawhalechina.github.io/easy-vibe/en/appendix/)
|
||||
- **[2026-03-25]** 📚 **الوثائق الإنجليزية محدثة بالكامل**: المرحلة 2 (تطوير full-stack) والمرحلة 3 (تطوير متقدم) متاحتان الآن بالكامل باللغة الإنجليزية. [👉 ابدأ التعلم](https://datawhalechina.github.io/easy-vibe/en/stage-2/)
|
||||
<details>
|
||||
<summary>أخبار سابقة</summary>
|
||||
|
||||
- **[2026-03-02]** 🦞 **دعم ودي لـ OpenClaw و AI Agent**: تمت إضافة `llms.txt` بحيث يمكن لـ OpenClaw و Claude و Cursor و Trae ووكلاء AI الآخرين فهم بنية المستودع بسرعة والعثور على محتوى البرنامج التعليمي المناسب.
|
||||
- **[2026-03-01]** تمت ترقية قسم [التطوير المتقدم](https://datawhalechina.github.io/easy-vibe/en/stage-3/) بشكل شامل مع أدلة عميقة لـ Claude Code، بما في ذلك MCP و Skills و Agent Teams والمزيد، بالإضافة إلى ثمانية دروس تعليمية لمشاريع متعددة المنصات.
|
||||
- **[2026-02-25]** تم تحديث [قاعدة معارف الملحق](https://datawhalechina.github.io/easy-vibe/en/appendix/)، وتغطي الآن 9 مجالات معرفية وأكثر من 80 موضوعًا تفاعليًا.
|
||||
- **[2026-01-27]** تمت إضافة دروس تعليمية لتطوير تطبيقات Android و iOS.
|
||||
- **[2026-01-19]** تم إصدار عروض تفاعلية لـ Prompt Engineering وتاريخ AI وتصميم المصادقة ومبادئ Git والمزيد.
|
||||
|
||||
<details>
|
||||
<summary>أخبار سابقة</summary>
|
||||
|
||||
- **[2026-01-16]** إعادة تنظيم هيكل المشروع وإنشاء رسمي لقسم "مدخل للمبتدئين".
|
||||
- **[2026-01-14]** إكمال تحديث كبير لمستندات نماذج المنتجات الأولية للمرحلة 1.
|
||||
- **[2026-01-13]** إعادة بناء بنية الوثائق وتمكين كامل للدعم متعدد اللغات (i18n).
|
||||
- **[2026-01-01]** إصدار خريطة التعلم الأساسية للمشروع.
|
||||
</details>
|
||||
|
||||
## 适合谁
|
||||
## لمن هذا المشروع
|
||||
|
||||
- **零基础爱好者**：先做出第一个作品，再理解怎么做
|
||||
- **产品经理 / 创业者**：快速验证想法，低成本做 MVP
|
||||
- **学生**：建立 AI 时代的实战技能
|
||||
- **初级开发者**：补齐从想法到上线的完整开发链路
|
||||
- **中高级开发者**：掌握 AI 协作开发、复杂项目实战与效率升级
|
||||
- **المبتدئون تماماً**: ابنِ مشروعك الأول أولاً، ثم افهم كيف يعمل
|
||||
- **مديرو المنتجات / المؤسسون**: تحقق من أفكارك بسرعة وابنِ MVPs بتكلفة منخفضة
|
||||
- **الطلاب**: طوّر مهارات عملية لعصر الذكاء الاصطناعي
|
||||
- **المطورون المبتدئون**: تعلّم المسار الكامل من الفكرة إلى الإطلاق
|
||||
- **المطورون المتوسطون والكبار**: حسّن سير عمل التعاون مع الذكاء الاصطناعي للمشاريع المعقدة
|
||||
|
||||
|
||||
|
||||
## 你的学习路径
|
||||
## مسارات التعلّم الخاصة بك
|
||||
|
||||
### 🎮 我想先试试（5分钟体验）
|
||||
**适合人群**：所有人
|
||||
**学什么**：AI 编程初体验、贪吃蛇小游戏
|
||||
**你会得到**：5 分钟做出第一个 AI 应用
|
||||
### 🎮 أريد نجاحاً سريعاً أولاً
|
||||
**الأفضل ل**: الجميع
|
||||
**ما ستتعلمه**: ما يشبه البرمجة بالذكاء الاصطناعي من خلال مثال عملي بسيط ومحدد
|
||||
**ما ستحصل عليه**: انطباع أول واضح عن vibe coding وكيفية العمل مع الذكاء الاصطناعي عبر المحادثة
|
||||
|
||||
[开始体验](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/learning-map/)
|
||||
[ابدأ من هنا](https://datawhalechina.github.io/easy-vibe/en/stage-1/ai-capabilities-through-games/)
|
||||
|
||||
### 💡 我有个想法要实现
|
||||
**适合人群**：零基础/产品经理/创业者
|
||||
**学什么**：AI IDE 工具、需求拆解、页面设计、功能规划、提示词写法、原型迭代
|
||||
**你会得到**：一个可演示的产品原型
|
||||
### 💡 أريد تحويل فكرة إلى نموذج أولي للمنتج
|
||||
**الأفضل ل**: المبتدئين / مديري المنتجات / المؤسسين
|
||||
**ما ستتعلمه**: خارطة طريق التعلم، أدوات AI IDE، التحقق من الأفكار، النماذج الأولية، تكامل قدرات الذكاء الاصطناعي وتكرار العروض الكاملة
|
||||
**ما ستحصل عليه**: نموذج أولي لمنتج بالذكاء الاصطناعي يمكنك عرضه فعلياً للمستخدمين أو زملائك
|
||||
|
||||
[开始学习](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/learning-map/)
|
||||
[ابدأ التعلّم](https://datawhalechina.github.io/easy-vibe/en/stage-1/learning-map/)
|
||||
|
||||
### 🚀 我想系统学习
|
||||
**适合人群**：开发者/进阶学习者
|
||||
**学什么**：前端、后端、数据库、AI 集成、部署运维、Claude Code 开发技巧
|
||||
**你会得到**：独立完成一个可上线的全栈 AI 应用
|
||||
### 🚀 أريد بناء منتجات full-stack من البداية للنهاية
|
||||
**الأفضل ل**: المطورين المبتدئين / صانعي التطبيقات المستقلين / المتعلمين المتقدمين
|
||||
**ما ستتعلمه**: سير العمل الأمامي، التصميم إلى الكود، قواعد البيانات، واجهات backend APIs، النشر، الفوترة والمشاريع الكبرى
|
||||
**ما ستحصل عليه**: القدرة على إطلاق تطبيقات ويب حديثة بالذكاء الاصطناعي بشكل مستقل
|
||||
|
||||
[开始学习](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/)
|
||||
[ابدأ التعلّم](https://datawhalechina.github.io/easy-vibe/en/stage-2/)
|
||||
|
||||
### 🦞 我想构建 AI Agent
|
||||
**适合人群**：对 AI Agent 感兴趣的开发者
|
||||
**学什么**：OpenClaw AI 助理、Skills 系统、自动化工作流
|
||||
**你会得到**：一个属于你的命令行 AI 助理
|
||||
### AI-Native: أريد سير عمل متقدم مع Claude Code والوكلاء
|
||||
**الأفضل ل**: المطورين المهتمين بالهندسة الأصلية للذكاء الاصطناعي
|
||||
**ما ستتعلمه**: Claude Code، MCP، Skills، Agent Teams، المهام طويلة الأمد، Spec Coding وتسليم التطبيقات متعددة المنصات
|
||||
**ما ستحصل عليه**: سير عمل أقوى للتطوير المعقد بمساعدة الذكاء الاصطناعي والأتمتة
|
||||
|
||||
[开始学习](https://github.com/datawhalechina/hello-claw)
|
||||
[اذهب إلى التطوير المتقدم](https://datawhalechina.github.io/easy-vibe/en/stage-3/)
|
||||
|
||||
### 📚 我想查资料
|
||||
**适合人群**：所有人
|
||||
**学什么**：计算机基础、AI 原理、9 大知识领域
|
||||
**你会得到**：80+ 交互式专题资料
|
||||
### 📚 أريد مواد مرجعية وأساسيات
|
||||
**الأفضل ل**: الجميع
|
||||
**ما ستتعلمه**: أساسيات الحوسبة، أساسيات frontend/backend، البنية التحتية، مبادئ الذكاء الاصطناعي وممارسات الهندسة
|
||||
**ما ستحصل عليه**: قاعدة معرفة مرجعية طويلة الأمد تغطي 9 مجالات معرفية رئيسية
|
||||
|
||||
[查看知识库](https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/)
|
||||
[تصفّح قاعدة المعرفة](https://datawhalechina.github.io/easy-vibe/en/appendix/)
|
||||
|
||||
## 学习建议
|
||||
## نصائح الدراسة
|
||||
|
||||
- 零基础、产品经理、创业者：从 [第一阶段](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/learning-map/) 开始
|
||||
- 有开发经验：从 [第二阶段](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/) 开始
|
||||
- 想直接做复杂项目：进入 [第三阶段](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/)
|
||||
- 想学 AI Agent：看 [Hello Claw](https://github.com/datawhalechina/hello-claw)
|
||||
- إذا كنت مبتدئاً أو مدير منتج أو مؤسساً، ابدأ بـ [المرحلة 1](https://datawhalechina.github.io/easy-vibe/en/stage-1/learning-map/)
|
||||
- إذا كنت تريد الانتقال من النماذج الأولية إلى التسليم الكامل، ابدأ بـ [المرحلة 2](https://datawhalechina.github.io/easy-vibe/en/stage-2/)
|
||||
- إذا كنت تريد سير عمل متقدم مع Claude Code أو مشاريع متعددة المنصات، اذهب إلى [المرحلة 3](https://datawhalechina.github.io/easy-vibe/en/stage-3/)
|
||||
- إذا أعاقتك المفاهيم أو نقص المعرفة الأساسية، استخدم [قاعدة معرفة الملحق](https://datawhalechina.github.io/easy-vibe/en/appendix/)
|
||||
|
||||
### 📖 内容导航
|
||||
### 📖 التنقل في المحتوى
|
||||
|
||||
<div align="center">
|
||||
<img src="../../assets/readme-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;"/>
|
||||
<img src="../../assets/readme-image1.png" alt="خريطة التعلّم" width="70%" style="border-radius: 10px; box-shadow: 0 8px 20px rgba(45,55,72,0.3); margin: 15px 0;"/>
|
||||
</div>
|
||||
|
||||
### 一、零基础入门
|
||||
### أولاً: دخول المبتدئين
|
||||
|
||||
| 章节 | 关键内容 |
|
||||
| :----------------------------------------------------------------------------------- | :------------------------------------------------ |
|
||||
| [学习地图](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/learning-map/) | 整体学习路径导览 |
|
||||
| [AI 时代，会说话就会编程](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/ai-capabilities-through-games/) | 通过贪吃蛇等案例初步感受 AI 编程的能力 |
|
||||
| [寻找好想法](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/finding-great-idea/) | 学会寻找和验证产品想法，找到值得做的项目 |
|
||||
| [认识 AI IDE 工具](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/introduction-to-ai-ide/) | 学会使用 IDE，在本地制作小游戏 |
|
||||
| [动手做出原型](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/building-prototype/) | 从需求分析、AI 生成单页面，再到生成多页面产品原型 |
|
||||
| [给原型加上 AI 能力](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/integrating-ai-capabilities/) | 学会接入常见 AI 能力（文本、图片、视频） |
|
||||
| [完整项目实战](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/complete-project-practice/) | 模拟真实场景、接受用户反馈迭代，完整化项目 |
|
||||
| القسم | المحتوى الرئيسي |
|
||||
| :------ | :---------- |
|
||||
| [خريطة التعلّم](https://datawhalechina.github.io/easy-vibe/en/stage-1/learning-map/) | نظرة عامة موجزة لرحلة التعلم الكاملة |
|
||||
| [عصر الذكاء الاصطناعي: إذا كنت تستطيع التحدث، يمكنك البرمجة](https://datawhalechina.github.io/easy-vibe/en/stage-1/ai-capabilities-through-games/) | احصل على أول تجربة للبرمجة بالذكاء الاصطناعي عبر أمثلة مثل لعبة Snake |
|
||||
| [أتقن أدوات البرمجة بالذكاء الاصطناعي](https://datawhalechina.github.io/easy-vibe/en/stage-1/introduction-to-ai-ide/) | تعلّم كيف تعمل أدوات AI IDE وابنِ مشاريع محلية بسيطة بها |
|
||||
| [اعثر على أفكار رائعة](https://datawhalechina.github.io/easy-vibe/en/stage-1/finding-great-idea/) | تعلّم كيف تكتشف وتتحقق من أفكار المنتجات التي تستحق البناء |
|
||||
| [ابنِ نماذج أولية للمنتج](https://datawhalechina.github.io/easy-vibe/en/stage-1/building-prototype/) | انتقل من المتطلبات إلى نماذج أولية للمنتج بصفحة واحدة أو متعددة الصفحات |
|
||||
| [تكامل قدرات الذكاء الاصطناعي](https://datawhalechina.github.io/easy-vibe/en/stage-1/integrating-ai-capabilities/) | تكامل ميزات الذكاء الاصطناعي للنصوص والصور والفيديو |
|
||||
| [ممارسة مشروع كامل](https://datawhalechina.github.io/easy-vibe/en/stage-1/complete-project-practice/) | محاكاة سيناريوهات حقيقية، وجمع تعليقات المستخدمين والتكرار على مشروع كامل |
|
||||
|
||||
#### 附录：业务思维
|
||||
#### الملحق: التفكير في المنتج والأعمال
|
||||
|
||||
| 章节 | 关键内容 |
|
||||
| :----------------------------------------------------------------------------------- | :----------------------------------------- |
|
||||
| [产品思维与方案设计](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-a-product-thinking/) | 从零到一做产品需要考虑的思维框架 |
|
||||
| [AI 行业应用场景参考 (B端)](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-industry-scenarios/) | 了解 AI 在不同产业的应用场景 |
|
||||
| [AI 消费场景灵感参考 (C端)](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-c-consumer-scenarios/) | 探索 AI 在消费级产品中的应用场景 |
|
||||
| القسم | المحتوى الرئيسي |
|
||||
| :------ | :---------- |
|
||||
| [التفكير في المنتج وتصميم الحلول](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-a-product-thinking/) | أطر أساسية للانتقال من الصفر إلى الواحد مع منتج |
|
||||
| [سيناريوهات تطبيق الذكاء الاصطناعي في الصناعة (B2B)](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-industry-scenarios/) | فهم كيف يُطبَّق الذكاء الاصطناعي عبر مختلف الصناعات |
|
||||
| [إلهام سيناريوهات الذكاء الاصطناعي الاستهلاكية (B2C)](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-c-consumer-scenarios/) | استكشف فرص المنتجات في الذكاء الاصطناعي الاستهلاكي |
|
||||
|
||||
#### 附录：技术方案
|
||||
#### الملحق: بحث المستخدم والتحقق من المتطلبات
|
||||
|
||||
| 章节 | 关键内容 |
|
||||
| :---------------------------------------------------------------------------------------------------------------------- | :----------------------------------------- |
|
||||
| [写代码时遇到错误怎么办](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-b-common-errors/) | vibe coding 中的常见错误及排查方法 |
|
||||
| [七款 AI 编程工具对比](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial) | 对比测试主流 AI 编程平台 |
|
||||
| [用设计和编程 Agent 设计网站](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents) | 学习如何使用 AI 智能体协同工作 |
|
||||
| القسم | المحتوى الرئيسي |
|
||||
| :------ | :---------- |
|
||||
| [أين تجد الأفكار: 3 مصادر مرجعية تعمل بشكل أفضل للمبتدئين](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-idea-sources/) | ابنِ تدفقاً موثوقاً لإيجاد فرص منتجات ملموسة |
|
||||
| [Double Diamond: افعل الشيء الصحيح أولاً، ثم افعله بشكل صحيح](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-double-diamond/) | استخدم عملية منظمة للانتقال من الإلهام المشتت إلى اتجاه عملي |
|
||||
| [استخدم Jobs to Be Done لاكتشاف ما يريده المستخدمون حقاً](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-jobs-to-be-done/) | حلل أهداف المستخدمين من خلال مهام حقيقية بدلاً من طلبات الميزات السطحية |
|
||||
| [The Mom Test: طريقة مقابلة المستخدمين للتحقق من الطلب](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-mom-test/) | تعلّم كيف تطرح أسئلة أفضل وتتجنب التعليقات الإيجابية الكاذبة |
|
||||
|
||||
### 二、初中级开发工程师
|
||||
#### الملحق: الحلول التقنية
|
||||
|
||||
#### 前端部分
|
||||
| القسم | المحتوى الرئيسي |
|
||||
| :------ | :---------- |
|
||||
| [ماذا تفعل إذا واجهت أخطاء](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-b-common-errors/) | مشاكل vibe coding الشائعة وكيفية حلها |
|
||||
| [مقارنة بين سبع أدوات برمجة بالذكاء الاصطناعي](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial) | قارن منصات البرمجة بالذكاء الاصطناعي الرئيسية عبر اختبارات عملية |
|
||||
| [صمّم مواقع ويب مع وكلاء](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents) | تعلّم التعاون متعدد الوكلاء في الممارسة |
|
||||
|
||||
| 章节 | 关键内容 |
|
||||
| :--------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------- |
|
||||
| [从Lovart出发，搭建自己的素材生产Agent](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/frontend/lovart-assets/) | 从零开始，利用Nanobanana和Lovart批量生成高质量的设计素材，并动手构建一个能意图识别的绘图Agent |
|
||||
| [Figma 与 MasterGo 入门](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/frontend/figma-mastergo/) | 用设计工具梳理信息架构和页面结构，为前端实现打基础 |
|
||||
| [构建第一个现代应用程序-UI 设计](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/frontend/ui-design/) | 基于设计稿完成组件化界面，实现从设计到代码的第一条链路 |
|
||||
| [参考 UI 设计规范与多产品 UI 设计](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/frontend/multi-product-ui/) | 围绕统一主视觉扩展多产品界面，练习系统化设计能力 |
|
||||
| [用 LLM 和 Skills 让界面变好看](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/frontend/llm-skills-beautiful/) | 用提示词和 Skills 插件让 AI 生成美观独特的界面 |
|
||||
| [一起做霍格沃茨画像](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/frontend/hogwarts-portraits/) | 从 0 到 1 做出接入 AI 能力的前端应用，串联设计与开发 |
|
||||
| [从设计原型到项目代码](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/frontend/design-to-code/) | 三种路径将设计工具中的原型转化为前端代码 |
|
||||
| [使用现代组件库更新你的界面](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/frontend/modern-component-library/) | 用组件库快速构建专业级界面，统一风格、提升开发效率 |
|
||||
### ثانياً: المطورون المبتدئون والمتوسطون
|
||||
|
||||
#### 后端开发部分
|
||||
#### الواجهة الأمامية (Frontend)
|
||||
|
||||
| 章节 | 关键内容 |
|
||||
| :------------------------------------------------------------------------------------------------- | :---------------------------------------------------------- |
|
||||
| [从数据库到 Supabase](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/backend/database-supabase/) | 在 Supabase 上落地数据库和 API，打通数据模型与前端页面 |
|
||||
| [大模型辅助编写接口代码与接口文档](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/backend/ai-interface-code/) | 用大模型协助生成接口与数据库文档及代码，实现可读可测的后端 |
|
||||
| [Git 和 GitHub 工作流](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/backend/git-workflow/) | 在 Git 工作流中管理代码，进行版本控制和协作 |
|
||||
| [如何部署 Web 应用](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/backend/zeabur-deployment/) | 使用 CloudBase、Vercel、Zeabur 等平台部署应用上线 |
|
||||
| [CLI AI 编程工具](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/backend/modern-cli/) | 使用 CLI 类 AI 编程工具加速开发与调试，形成个人工程化工作流 |
|
||||
| [如何集成 Stripe 等收费系统](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/backend/stripe-payment/) | 接入支付系统，完成收费链路与基础结算流程 |
|
||||
| [大作业：构建第一个现代应用程序-全栈应用](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/assignments/copywriting-platform-supabase/) | 综合前端、后端与支付模块，完成可上线的全栈 Web 应用 |
|
||||
| القسم | المحتوى الرئيسي |
|
||||
| :------ | :---------- |
|
||||
| [Frontend 0: ابنِ وكيل إنتاج الأصول الخاص بك مع Lovart](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/lovart-assets/) | استخدم Nanobanana و Lovart لتوليد أصول بصرية دفعة واحدة وابنِ وكيل رسم مع التعرف على النية |
|
||||
| [Frontend 1: أساسيات Figma و MasterGo](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/figma-mastergo/) | تعلّم سير العمل من مسودات التصميم إلى التفكير في واجهة المستخدم الجاهزة للتنفيذ |
|
||||
| [Frontend 2: ابنِ تطبيقك الحديث الأول - تصميم UI](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/ui-design/) | تعلّم أساسيات تصميم UI خلف واجهات التطبيقات الحديثة |
|
||||
| [Frontend 3: إرشادات UI وتصميم متعدد المنتجات](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/multi-product-ui/) | حسّن الاتساق والجمالية عبر منتجات متعددة بقواعد UI مشتركة |
|
||||
| [Frontend 4: اجعل الواجهات جميلة مع LLMs و Skills](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/llm-skills-beautiful/) | استخدم الأوامر والإضافات لجعل الذكاء الاصطناعي ينتج واجهات أكثر تنقية وتميزاً |
|
||||
| [Frontend 4: لنبني لوحات هوجورتس معاً](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/hogwarts-portraits/) | ابنِ مشروع واجهة أمامية تفاعلي لصور الذكاء الاصطناعي من الصفر |
|
||||
| [Frontend 6: من نموذج التصميم إلى كود المشروع](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/design-to-code/) | حوّل نماذج التصميم إلى كود واجهة أمامية يعمل فعلياً في المتصفح |
|
||||
| [Frontend 7: حدّث واجهتك بمكتبات مكونات حديثة](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/modern-component-library/) | استخدم مكتبات المكونات لبناء واجهات احترافية بشكل أسرع |
|
||||
|
||||
#### AI 能力附录
|
||||
#### الواجهة الخلفية (Backend)
|
||||
|
||||
| 章节 | 关键内容 |
|
||||
| :------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------- |
|
||||
| [Dify 入门与知识库集成](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/ai-capabilities/dify-knowledge-base/) | 用 Dify Workflow 与基础 RAG 搭建工具类产品，为后续应用升级打样 |
|
||||
| القسم | المحتوى الرئيسي |
|
||||
| :------ | :---------- |
|
||||
| [Backend 1: تعلّم Git و GitHub](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/git-workflow/) | أتقن عمليات التحكم في الإصدار وسير العمل التعاوني مع Git |
|
||||
| [Backend 2: من قاعدة البيانات إلى Supabase](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/database-supabase/) | تعلّم أساسيات قواعد البيانات العلائقية واستخدم Supabase كمنصة BaaS حديثة |
|
||||
| [Backend 3: تصميم وتطوير واجهات backend APIs](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/ai-interface-code/) | استخدم الذكاء الاصطناعي للمساعدة في تصميم APIs وتوليد كود backend وتوثيق APIs |
|
||||
| [Backend 4: انشر نموذج منتجك الأولي](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/zeabur-deployment/) | انشر تطبيقات full-stack بسرعة على السحابة مع Zeabur |
|
||||
| [Backend 5: من IDEs إلى أدوات البرمجة بالذكاء الاصطناعي عبر CLI](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/modern-cli/) | استكشف سير عمل البرمجة بالذكاء الاصطناعي من الطرفية للتطوير الحديث |
|
||||
| [Backend 6: تكامل Stripe وأنظمة الفوترة الأخرى](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/stripe-payment/) | أضف تحقيق الدخل مع قدرات الدفع والفوترة |
|
||||
|
||||
### 三、高级开发工程师
|
||||
#### المشاريع الكبرى
|
||||
|
||||
#### Claude Code 核心技能
|
||||
| القسم | المحتوى الرئيسي |
|
||||
| :------ | :---------- |
|
||||
| [المشروع الكبير 1: أول تطبيق SaaS full-stack خاص بك - موقع كتابة محتوى بالذكاء الاصطناعي](https://datawhalechina.github.io/easy-vibe/en/stage-2/assignments/fullstack-app/) | ابنِ مساحة عمل تسويقية بالذكاء الاصطناعي مع تسجيل الدخول والتوليد والفوترة وإدارة المسؤول |
|
||||
| [المشروع الكبير 2: نظام اختبارات وإدارة عبر الإنترنت](https://datawhalechina.github.io/easy-vibe/en/stage-2/assignments/modern-frontend-trae/) | ابنِ نظام اختبارات عبر الإنترنت مع توليد الأسئلة وتدفقات الامتحان وأدوات الإدارة |
|
||||
|
||||
| 章节 | 关键内容 |
|
||||
| :------------------------------------------------------------------------------------------------------ | :----------------------------------------------------------- |
|
||||
| [Claude Code 快速上手](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/core-skills/basics/) | 安装配置、基础操作、实用技巧和常用指令 |
|
||||
| [Claude Code MCP 完全指南](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/core-skills/mcp/) | 通过 MCP 让 Claude Code 连接 GitHub、数据库、API 等外部服务 |
|
||||
| [Claude Code Skills 完全指南](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/core-skills/skills/) | 将专业知识打包成可复用技能包，一次配置反复使用 |
|
||||
| [Claude Code 工作流最佳实践](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/core-skills/workflow/) | 日常开发、代码重构、Code Review 等场景的最佳实践 |
|
||||
| [Claude Agent Teams 完全指南](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/core-skills/agent-teams/) | 多 AI 实例协同工作，像真正的开发团队一样并行协作 |
|
||||
| [Claude Code Superpowers 工程级开发](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/core-skills/superpowers/) | 让 AI 写出工程级代码，遵循 TDD 和最佳实践 |
|
||||
| [如何让 Claude Code 长时间工作](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/core-skills/long-running-tasks/) | 设计长时间运行的任务，让 Coding Tools 持续工作直到完成 |
|
||||
#### ملحق قدرات الذكاء الاصطناعي
|
||||
|
||||
#### 多平台开发
|
||||
| القسم | المحتوى الرئيسي |
|
||||
| :------ | :---------- |
|
||||
| [الذكاء الاصطناعي 1: أساسيات Dify وتكامل قاعدة المعرفة](https://datawhalechina.github.io/easy-vibe/en/stage-2/ai-capabilities/dify-knowledge-base/) | تعلّم بناء تطبيقات الذكاء الاصطناعي مع Dify وتكامل قواعد المعرفة الخاصة |
|
||||
|
||||
| 章节 | 关键内容 |
|
||||
| :------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------- |
|
||||
| [如何构建微信小程序](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/wechat-miniprogram/) | 了解微信小程序生态，从官方模板到上线完成一个前端小程序 |
|
||||
| [如何构建微信小程序-包含后端](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/wechat-miniprogram-backend/) | 在小程序中接入数据库与后端逻辑，打通完整业务闭环 |
|
||||
| [如何构建安卓程序](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/android-app/) | 使用 Expo 等工具，完成 Web/原生一体化的安卓应用开发 |
|
||||
| [如何构建 iOS 程序](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/ios-app/) | 使用 Expo 等工具，完成 Web/原生一体化的 iOS 应用开发 |
|
||||
| [如何开发 PWA 本地应用](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/pwa-local-app/) | 让网页变成"真正的 App"，支持离线、推送、桌面安装 |
|
||||
| [如何开发浏览器 AI 助手插件](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/browser-ai-extension/) | 开发 Chrome 插件，一键总结任意网页，支持云端 API 和内置 AI |
|
||||
| [如何开发 Electron 桌面程序](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/electron-voice-to-text/) | 用 Electron 构建语音转文字桌面应用，支持三平台安装运行 |
|
||||
| [如何快速开发并铸造 NFT](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/nft-minting/) | 从零编写智能合约，部署到以太坊测试网，铸造自己的 NFT |
|
||||
| [如何开发 VS Code 插件](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/vscode-extension/) | 开发 AI 项目助手插件，支持模板生成、代码对话、多文件问答 |
|
||||
| [如何开发工业级 Qt 桌面应用](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/qt-industrial-hmi/) | 用 Qt 构建工业级水泵监控 HMI 系统，实时数据、趋势图、报警 |
|
||||
### ثالثاً: المطورون المتقدمون
|
||||
|
||||
#### AI 能力附录
|
||||
#### المهارات الأساسية لـ Claude Code
|
||||
|
||||
| 章节 | 关键内容 |
|
||||
| :---------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------ |
|
||||
| [什么是 RAG 以及它如何工作](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/ai-advanced/rag-introduction/) | 系统理解 RAG 原理与常见架构，为复杂应用提供知识检索基础 |
|
||||
| [中高级 RAG 与工作流编排：以 LangGraph 为例](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/ai-advanced/langgraph-advanced-rag/) | 使用 LangGraph 等工具设计多步工作流与中高级 RAG 系统 |
|
||||
| القسم | المحتوى الرئيسي |
|
||||
| :------ | :---------- |
|
||||
| [البدء مع Claude Code](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/basics/) | التثبيت والإعداد والأساسيات والأوامر المفيدة |
|
||||
| [دليل Claude Code MCP](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/mcp/) | ربط Claude Code بـ GitHub وقواعد البيانات و APIs وخدمات أخرى عبر MCP |
|
||||
| [دليل Claude Code Skills](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/skills/) | حوّل خبرتك إلى مهارات قابلة لإعادة الاستخدام مراراً وتكراراً |
|
||||
| [كيف تجعل Claude Code يعمل لفترات طويلة](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/long-running-tasks/) | صمّم مهام طويلة الأمد لكي تستمر أدوات الترميز في العمل حتى الانتهاء |
|
||||
| [دليل Claude Agent Teams](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/agent-teams/) | نسّق عدة حالات ذكاء اصطناعي كفريق تطوير حقيقي |
|
||||
| [قوى Claude Code الخارقة للتطوير بمستوى الهندسة](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/superpowers/) | ساعد الذكاء الاصطناعي في إنتاج كود بمستوى الهندسة مع TDD وأفضل الممارسات |
|
||||
| [أفضل ممارسات سير عمل Claude Code](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/workflow/) | أفضل الممارسات لإعادة الهيكلة ومراجعة الكود والتطوير اليومي |
|
||||
| [التطوير عن بُعد مع Claude Code على الجوال](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/mobile-development/) | استخدم Claude Code خارج سطح المكتب وابنِ سير عمل عن بُعد منتج على الأجهزة المحمولة |
|
||||
| [الدليل الشامل لـ SDK Claude Agent](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/claude-agent-sdk/) | ابنِ سير عمل وكلاء مخصص وادمج Claude في أدواتك الخاصة مع SDK |
|
||||
| [من vibe coding إلى spec coding](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/spec-coding/) | انتقل من الأوامر العفوية إلى سير عمل تطوير بالذكاء الاصطناعي أكثر هيكلة وقائماً على المواصفات |
|
||||
|
||||
### 📚 附录知识库
|
||||
#### التطوير متعدد المنصات
|
||||
|
||||
> 涵盖 **9 大知识领域**、**80+ 交互式专题**，以动画和可视化组件帮助你直观理解从计算机底层到 AI 前沿的核心概念。
|
||||
| القسم | المحتوى الرئيسي |
|
||||
| :------ | :---------- |
|
||||
| [كيف تختار المنصة المناسبة لتطبيقك](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/choose-platform/) | قارن أشكال التطبيقات واختر المنصة المناسبة بناءً على المستخدمين والسيناريوهات وأهداف التسليم |
|
||||
| [ابنِ برنامج WeChat Mini](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/wechat-miniprogram/) | افهم النظام البيئي وانشر برنامج Mini أمامي من القالب إلى الإطلاق |
|
||||
| [ابنِ برنامج WeChat Mini مع backend](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/wechat-miniprogram-backend/) | أضف منطق backend وقواعد البيانات لإكمال حلقة الأعمال الكاملة |
|
||||
| [ابنِ تطبيق Android](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/android-app/) | تعلّم تطوير تطبيقات Android بسير عمل أصلي حديث |
|
||||
| [ابنِ تطبيق iOS](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/ios-app/) | تعلّم تطوير تطبيقات iOS واصطلاحات نظام Apple البيئي |
|
||||
| [ابنِ تطبيق PWA محلي](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/pwa-local-app/) | حوّل موقع ويب إلى تطبيق حقيقي مع دعم عدم الاتصال والإشعارات والتثبيت |
|
||||
| [ابنِ إضافة مساعد ذكاء اصطناعي للمتصفح](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/browser-ai-extension/) | أنشئ إضافة Chrome تلخّص أي صفحة إما بـ APIs سحابية أو ذكاء اصطناعي مدمج |
|
||||
| [ابنِ تطبيق سطح مكتب Electron](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/electron-voice-to-text/) | ابنِ تطبيق سطح مكتب لتحويل الصوت إلى نص مع Electron لثلاث منصات |
|
||||
| [ابنِ واصنع NFT بسرعة](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/nft-minting/) | اكتب عقداً ذكياً من الصفر، انشره واصنع NFT الخاص بك |
|
||||
| [ابنِ إضافة VS Code](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/vscode-extension/) | ابنِ مساعد مشروع بالذكاء الاصطناعي مع قوالب ودردشة كود وأسئلة وأجوبة متعددة الملفات |
|
||||
| [ابنِ تطبيق سطح مكتب Qt بمستوى صناعي](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/qt-industrial-hmi/) | أنشئ نظام HMI Qt في الوقت الفعلي مع الاتجاهات والتنبيهات والمراقبة |
|
||||
|
||||
#### ملحق قدرات الذكاء الاصطناعي
|
||||
|
||||
| القسم | المحتوى الرئيسي |
|
||||
| :------ | :---------- |
|
||||
| [ما هو RAG وكيف يعمل](https://datawhalechina.github.io/easy-vibe/en/stage-3/ai-advanced/rag-introduction/) | ابنِ فهماً منظماً لمبادئ RAG والبنيات الشائعة |
|
||||
| [سير عمل RAG المتوسط والمتقدم مع LangGraph](https://datawhalechina.github.io/easy-vibe/en/stage-3/ai-advanced/langgraph-advanced-rag/) | صمّم سير عمل متعدد الخطوات وأنظمة RAG أكثر تقدماً |
|
||||
|
||||
### 📚 قاعدة المعرفة في الملحق
|
||||
|
||||
> تغطي **9 مجالات معرفية رئيسية** و**أكثر من 80 موضوعاً تفاعلياً**، يستخدم هذا الملحق الرسوم المتحركة والمكونات المرئية لمساعدتك على فهم المفاهيم الأساسية بشكل حدسي من أساسيات الحوسبة إلى حدود الذكاء الاصطناعي.
|
||||
>
|
||||
> 👉 [查看完整附录](https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/) · [AI 能力词典](https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/ai-capability-dictionary)
|
||||
> 👉 [عرض الملحق الكامل](https://datawhalechina.github.io/easy-vibe/en/appendix/)
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td valign="top" width="33%">
|
||||
<strong>💻 计算机基础</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/transistor-to-cpu.html">从晶体管到 CPU</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/operating-systems.html">操作系统</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/data-encoding-storage.html">数据的编码、存储与传输</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/computer-networks.html">网络：两台电脑如何对话</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/data-structures.html">数据结构</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/algorithm-thinking.html">算法思维入门</a>
|
||||
</td>
|
||||
<td valign="top" width="33%">
|
||||
<strong>🔧 开发工具</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/git-version-control.html">Git：代码的时光机</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/command-line-shell.html">命令行与 Shell 脚本</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/package-managers.html">包管理器</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/debugging-art/">调试的艺术</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/regex.html">正则表达式</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/environment-path.html">环境变量与 PATH</a>
|
||||
</td>
|
||||
<td valign="top" width="33%">
|
||||
<strong>🌐 浏览器与前端</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/javascript-deep-dive.html">JavaScript 语言深入</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/browser-as-os-rendering.html">浏览器渲染管道</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/frontend-frameworks.html">前端框架对比</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/graphics-animation.html">图形与动画</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/web-performance.html">网页性能的度量与优化</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/frontend-engineering.html">前端工程化全貌</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top" width="33%">
|
||||
<strong>🖥️ 服务器与后端</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/http-protocol.html">HTTP 协议</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/api-design.html">API 设计哲学</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/auth-authorization.html">认证与授权体系</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/concurrency-async.html">并发、异步与多线程</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/message-queues.html">消息队列与事件驱动</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/backend-layered-architecture.html">后端分层架构</a>
|
||||
</td>
|
||||
<td valign="top" width="33%">
|
||||
<strong>📊 数据</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/database-fundamentals.html">数据库原理与 SQL</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/database-fundamentals.html">数据库原理</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/data-tracking.html">数据埋点与用户行为采集</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/data-analysis.html">数据分析基础</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/ab-testing.html">A/B 测试与实验驱动</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/data-visualization.html">数据可视化与仪表盘</a>
|
||||
</td>
|
||||
<td valign="top" width="33%">
|
||||
<strong>🏗️ 架构与系统设计</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/6-architecture-and-system-design/monolith-to-microservices.html">从单体到微服务的演进</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/6-architecture-and-system-design/distributed-systems.html">分布式系统的挑战</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/6-architecture-and-system-design/high-availability.html">高可用与容灾</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/6-architecture-and-system-design/system-design-methodology.html">系统设计方法论</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top" width="33%">
|
||||
<strong>☁️ 基础设施与运维</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/docker-containers.html">Docker 容器化</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/kubernetes.html">Kubernetes 编排</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/ci-cd.html">CI / CD 自动化</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/dns-https.html">域名、DNS 与 HTTPS</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/monitoring-logging.html">监控、日志与告警</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/infrastructure-as-code.html">基础设施即代码</a>
|
||||
</td>
|
||||
<td valign="top" width="33%">
|
||||
<strong>🤖 人工智能</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/llm-principles.html">大语言模型的工作原理</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/transformer-attention.html">Transformer 与注意力机制</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/rag.html">RAG 架构</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/ai-agents.html">AI Agent 与工具调用</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/prompt-engineering.html">提示词工程</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/image-generation.html">图像生成原理</a>
|
||||
</td>
|
||||
<td valign="top" width="33%">
|
||||
<strong>🎯 工程素养</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/code-quality-refactoring.html">代码质量与重构</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/testing-strategies.html">测试策略</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/design-patterns.html">设计模式</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/security-thinking.html">安全思维与攻防基础</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/technical-writing.html">技术文档写作</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/open-source-collaboration.html">开源协作</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
### 🎓 دورات أخرى
|
||||
|
||||
## 🛠️ 如何学习
|
||||
- [Hands-on Modern RL](#دورات-أخرى)
|
||||
- [Learn Harness Engineering](#دورات-أخرى)
|
||||
|
||||
- 根据个人能力，选择性地阅读和实践相关章节，如果有问题欢迎 issue 提问。
|
||||
## 🛠️ كيف تتعلم
|
||||
|
||||
## 💻 本地启动本课件
|
||||
- اقرأ وتدرّب على الأقسام التي تناسب مستواك الحالي. إذا واجهتك مشكلة، لا تتردد في فتح issue.
|
||||
|
||||
### 现代方案
|
||||
## 💻 التشغيل محلياً
|
||||
|
||||
在 AI IDE 对话框（vscode、cursor、trae 等）中，输入下列提示词启动本课件：
|
||||
### الطريقة الحديثة
|
||||
|
||||
```
|
||||
请你帮我运行这个项目的本地服务
|
||||
في نافذة محادثة AI IDE مثل VS Code أو Cursor أو Trae، يمكنك ببساطة أن تقول:
|
||||
|
||||
```text
|
||||
ساعدني في تشغيل هذا المشروع محلياً.
|
||||
```
|
||||
|
||||
### 旧方案
|
||||
### الطريقة التقليدية
|
||||
|
||||
1. npm install
|
||||
2. npm run dev
|
||||
3. 打开浏览器访问 `http://localhost:3000` 即可查看。
|
||||
1. `npm install`
|
||||
2. `npm run dev`
|
||||
3. افتح `http://localhost:3000` في متصفحك.
|
||||
|
||||
## 🤝 参与贡献
|
||||
## دورات أخرى
|
||||
|
||||
- 如果你发现了一些问题，或者觉得任何可以改进本项目的地方，可以提 Issue 进行反馈。如果提完没有人回复你可以联系[保姆团队](https://github.com/datawhalechina/DOPMC/blob/main/OP.md)的同学进行反馈跟进~
|
||||
- 如果你想参与贡献本项目，可以提 Pull Request，如果提完没有人回复你可以联系[保姆团队](https://github.com/datawhalechina/DOPMC/blob/main/OP.md)的同学进行反馈跟进~
|
||||
- 如果你对 Datawhale 很感兴趣并想要发起一个新的项目，请按照[Datawhale 开源项目指南](https://github.com/datawhalechina/DOPMC/blob/main/GUIDE.md)进行操作即可~
|
||||
فريقنا أنشأ أيضاً دورات أخرى! اطلع عليها:
|
||||
|
||||
## 🙏 感谢每位贡献者
|
||||
[](https://github.com/walkinglabs/hands-on-modern-rl)
|
||||
|
||||
- [散步-项目负责人](https://github.com/sanbuphy) (Datawhale成员)
|
||||
- 方可-指导老师（Datawhale成员, 清华大学）
|
||||
- [Yerim Kang](https://github.com/yerim25)（实践项目部分-清华大学）
|
||||
- [赵芷霖](https://github.com/ChileenZ)（实践项目部分-清华大学）
|
||||
- [李亦萱](https://yixuan20.github.io/)（页面美术设计-清华大学）
|
||||
- 刘思怡（实践项目部分-清华大学）
|
||||
- [刘丽欣](https://github.com/liulx25xx)（实践项目部分-清华大学）
|
||||
- AI Vibe Coding 101 内测群完整给建议体验的小伙伴们
|
||||
**Hands-on Modern RL**: منهاج عملي ومفتوح المصدر يسد الفجوة من مفاهيم RL الأساسية إلى محاذاة LLMs و RLVR وأنظمة Agentic المتقدمة.
|
||||
|
||||
### 特别感谢
|
||||
[](https://github.com/walkinglabs/learn-harness-engineering/tree/main)
|
||||
|
||||
- 感谢 [@Sm1les](https://github.com/Sm1les) 对本项目的帮助与支持
|
||||
- 感谢所有为本项目做出贡献的开发者们和支持点赞的朋友们 ❤️
|
||||
**Learn Harness Engineering**: دليل شامل لهندسة الهارنيس.
|
||||
|
||||
## 🤝 المساهمة والمساهمون
|
||||
|
||||
- إذا وجدت مشكلة أو رأيت شيئاً يمكن تحسينه، لا تتردد في فتح issue. إذا لم يرد أحد، يمكنك أيضاً التواصل مع [فريق دعم Datawhale](https://github.com/datawhalechina/DOPMC/blob/main/OP.md).
|
||||
- إذا كنت تريد المساهمة، افتح pull request. إذا لم يرد أحد، يمكنك أيضاً التواصل مع [فريق دعم Datawhale](https://github.com/datawhalechina/DOPMC/blob/main/OP.md).
|
||||
- إذا كنت تريد بدء مشروع Datawhale مفتوح المصدر جديد، يرجى اتباع [دليل مشاريع Datawhale المفتوحة المصدر](https://github.com/datawhalechina/DOPMC/blob/main/GUIDE.md).
|
||||
|
||||
### 🙏 المساهمون
|
||||
|
||||
- [Sanbu - قائد المشروع](https://github.com/sanbuphy) (عضو في Datawhale)
|
||||
- Fang Ke - المرشد (عضو في Datawhale، جامعة Tsinghua)
|
||||
- [Yerim Kang](https://github.com/yerim25) (المشاريع العملية، جامعة Tsinghua)
|
||||
- [Zhilin Zhao](https://github.com/ChileenZ) (المشاريع العملية، جامعة Tsinghua)
|
||||
- [Yixuan Li](https://yixuan20.github.io/) (التصميم البصري، جامعة Tsinghua)
|
||||
- Siyi Liu (المشاريع العملية، جامعة Tsinghua)
|
||||
- [Lixin Liu](https://github.com/liulx25xx) (المشاريع العملية، جامعة Tsinghua)
|
||||
- كل من في مجموعة الاختبار الداخلي لـ AI Vibe Coding 101 الذين شاركوا اقتراحاتهم وملاحظاتهم
|
||||
|
||||
### شكر خاص
|
||||
|
||||
- شكراً لـ [@Sm1les](https://github.com/Sm1les) على المساعدة والدعم في هذا المشروع
|
||||
- شكراً لكل مساهم وكل من دعم المشروع بملاحظاته ونجومه ❤️
|
||||
|
||||
<div align="center">
|
||||
|
||||
|
||||
<a href="https://www.star-history.com/#datawhalechina/easy-vibe&type=timeline&legend=top-left">
|
||||
<picture>
|
||||
<source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=datawhalechina/easy-vibe&type=timeline&theme=dark&legend=top-left" />
|
||||
@@ -455,22 +419,21 @@ Easy-Vibe يعلمك كيف تحول ذلك إلى منتج حقيقي.
|
||||
</a>
|
||||
</div>
|
||||
|
||||
## 📄 LICENSE
|
||||
## 📄 الترخيص
|
||||
|
||||
<div align="center">
|
||||
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">
|
||||
<img
|
||||
alt="知识共享许可协议"
|
||||
alt="رخصة المشاع الإبداعي"
|
||||
style="border-width:0"
|
||||
src="https://img.shields.io/badge/license-CC%20BY--NC--SA%204.0-lightgrey"
|
||||
/>
|
||||
</a>
|
||||
<br />
|
||||
本作品采用
|
||||
هذا العمل مرخص بموجب
|
||||
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">
|
||||
知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议
|
||||
</a>
|
||||
进行许可。
|
||||
رخصة المشاع الإبداعي Attribution-NonCommercial-ShareAlike 4.0 الدولية
|
||||
</a>.
|
||||
</div>
|
||||
|
||||
## Star History
|
||||
|
||||
+243
-280
@@ -3,6 +3,8 @@
|
||||
|
||||
<img src="../../assets/easy-vibe-logo-hd.svg" alt="Easy-Vibe Logo" width="300">
|
||||
|
||||
<img src="../../assets/banner.png" alt="Easy-Vibe Banner" width="100%">
|
||||
|
||||
<p align="center" style="font-size: 1.2em; color: #666; margin: 20px 0;">
|
||||
Leg direkt los und vibe mit uns. Wenn du sprechen kannst, kannst du Apps bauen.<br>
|
||||
<span style="font-size: 0.9em; color: #888;">直接上手，一起 vibe！会说话就会做应用。</span>
|
||||
@@ -11,16 +13,16 @@
|
||||
<a href="https://trendshift.io/repositories/22079" target="_blank"><img src="https://trendshift.io/api/badge/repositories/22079" alt="datawhalechina/easy-vibe | Trendshift" style="width: 250px; height: 55px;" width="250" height="55"/></a>
|
||||
|
||||
<p align="center">
|
||||
🚀 <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">Jetzt starten</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/en/appendix/">Interaktives Tutorial</a> · 🦞 <a href="https://github.com/datawhalechina/hello-claw">OpenClaw lernen</a><br>
|
||||
🚀 <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">Jetzt entdecken</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/en/appendix/">Interaktives Tutorial</a> · 🦞 <a href="https://github.com/datawhalechina/hello-claw">OpenClaw lernen</a> · 📖 <a href="#table-of-contents">Inhaltsverzeichnis</a><br>
|
||||
<span style="font-size: 0.85em; color: #888;">🚀 <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">开始体验</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/">交互式教程</a> · 🦞 <a href="https://github.com/datawhalechina/hello-claw">学习 OpenClaw</a> · 📖 <a href="#table-of-contents">查看目录</a></span>
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
<a href="https://datawhalechina.github.io/easy-vibe/welcome.html">Jetzt lesen</a> ·
|
||||
<a href="https://datawhalechina.github.io/easy-vibe/welcome.html">Online lesen</a> ·
|
||||
<a href="#-content-navigation">Lernpfad</a><br>
|
||||
<span style="font-size: 0.85em; color: #888;">
|
||||
<a href="https://datawhalechina.github.io/easy-vibe/welcome.html">开始阅读</a> ·
|
||||
<a href="#-内容导航">学习地图</a>
|
||||
<a href="#-content-navigation">学习地图</a>
|
||||
</span>
|
||||
</p>
|
||||
|
||||
@@ -34,9 +36,9 @@
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
<a href="../../README.md"><img alt="English" src="https://img.shields.io/badge/English-d9d9d9"></a>
|
||||
<a href="../zh-CN/README.md"><img alt="简体中文" src="https://img.shields.io/badge/简体中文-d9d9d9"></a>
|
||||
<a href="../zh-TW/README.md"><img alt="繁體中文" src="https://img.shields.io/badge/繁體中文-d9d9d9"></a>
|
||||
<a href="../en-US/README.md"><img alt="English" src="https://img.shields.io/badge/English-d9d9d9"></a>
|
||||
<a href="../ja-JP/README.md"><img alt="日本語" src="https://img.shields.io/badge/日本語-d9d9d9"></a>
|
||||
<a href="../es-ES/README.md"><img alt="Español" src="https://img.shields.io/badge/Español-d9d9d9"></a>
|
||||
<a href="../fr-FR/README.md"><img alt="Français" src="https://img.shields.io/badge/Français-d9d9d9"></a>
|
||||
@@ -52,68 +54,85 @@
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/gif-header.png" width="100%">
|
||||
<br>
|
||||
<strong>新手专属学习地图</strong>
|
||||
<strong>Eine anfaengerfreundliche Lernkarte</strong>
|
||||
<br>
|
||||
<sub>零基础专属指引，清晰规划路径，告别“学了忘”</sub>
|
||||
<sub>Klare Orientierung von Null an, damit du aufhoerst zu "lernen und vergessen"</sub>
|
||||
</td>
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/gif-tutorial.png" width="100%">
|
||||
<br>
|
||||
<strong>手把手图文教程</strong>
|
||||
<strong>Schritt-fuer-Schritt visuelle Tutorials</strong>
|
||||
<br>
|
||||
<sub>保姆级图文详解，如同私教在旁，跟着做就能学会</sub>
|
||||
<sub>Ausfuehrliche Anleitungen, die sich anfuehlen wie Lernen mit einem Privatlehrer</sub>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/gif-ide.gif" width="100%">
|
||||
<br>
|
||||
<strong>沉浸式模拟编程</strong>
|
||||
<strong>Immersives simuliertes Codieren</strong>
|
||||
<br>
|
||||
<sub>虚拟鼠标自动导览，带你快速上手 IDE 核心用法</sub>
|
||||
<sub>Virtuelle Mausfuehrung hilft dir, den Kern-IDE-Workflow schnell zu lernen</sub>
|
||||
</td>
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/gif-diffusion.gif" width="100%">
|
||||
<br>
|
||||
<strong>看得见的 AI 原理</strong>
|
||||
<strong>Sichtbare KI-Prinzipien</strong>
|
||||
<br>
|
||||
<sub>算法原理动画化，一眼看懂 AI 如何“画”出图片</sub>
|
||||
<sub>Animierte Erklaerungen machen es leicht zu sehen, wie KI Bilder erzeugt</sub>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/gif-rag.gif" width="100%">
|
||||
<br>
|
||||
<strong>像玩游戏一样学 RAG</strong>
|
||||
<strong>RAG lernen wie ein Spiel</strong>
|
||||
<br>
|
||||
<sub>独家交互组件，点击即可看清 RAG 数据流向</sub>
|
||||
<sub>Interaktive Komponenten lassen dich den gesamten RAG-Datenfluss durchklicken</sub>
|
||||
</td>
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/git-terminal.gif" width="100%">
|
||||
<br>
|
||||
<strong>可视化终端原理</strong>
|
||||
<strong>Visuelle Terminal-Konzepte</strong>
|
||||
<br>
|
||||
<sub>命令行操作可视化，直观展示后台逻辑与原理</sub>
|
||||
<sub>Kommandozeilenverhalten wird intuitiv, wenn die zugrundeliegende Logik visualisiert wird</sub>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div align="center">
|
||||
<h3>⭐ 欢迎 <a href="https://github.com/datawhalechina/easy-vibe" style="color: #d0cd16ff;">点击此处Star</a> 加速更新 ❤️</h3>
|
||||
<h3>⭐ <a href="https://github.com/datawhalechina/easy-vibe" style="color: #d0cd16ff;">Sterne hier vergeben</a>, um Aktualisierungen zu beschleunigen ❤️</h3>
|
||||
</div>
|
||||
|
||||
<div align="center" style="margin: 30px 0;">
|
||||
<a href="https://github.com/datawhalechina/easy-vibe/issues/new?template=story_submission.md">
|
||||
<img src="https://raw.githubusercontent.com/datawhalechina/easy-vibe/main/assets/stories_image.png" alt="Share Your Vibe Story" width="80%" style="border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.15);">
|
||||
<img src="https://raw.githubusercontent.com/datawhalechina/easy-vibe/main/assets/stories_image.png" alt="Teile deine Vibe-Story" width="80%" style="border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.15);">
|
||||
</a>
|
||||
<p style="margin-top: 15px; font-size: 1.1em; color: #666;">
|
||||
📝 <strong>Have your own vibe coding story?</strong>
|
||||
Submit it here and inspire others!
|
||||
📝 <strong>Hast du deine eigene Vibe-Coding-Story?</strong>
|
||||
Reiche sie hier ein und inspiriere andere!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
## 为什么需要 Easy-Vibe
|
||||
## Inhaltsverzeichnis
|
||||
|
||||
Du willst eine App fur Einnahmen und Ausgaben? Sag es einfach.
|
||||
- [Warum Easy-Vibe](#warum-easy-vibe)
|
||||
- [Neuigkeiten](#-neuigkeiten)
|
||||
- [Fuer wen ist das](#fuer-wen-ist-das)
|
||||
- [Deine Lernpfade](#deine-lernpfade)
|
||||
- [Lernempfehlungen](#lernempfehlungen)
|
||||
- [I. Einsteiger-Einstieg](#i-einsteiger-einstieg)
|
||||
- [II. Junior- und Mid-Level-Entwickler](#ii-junior-und-mid-level-entwickler)
|
||||
- [III. Fortgeschrittene Entwickler](#iii-fortgeschrittene-entwickler)
|
||||
- [Anhang Wissensdatenbank](#-anhang-wissensdatenbank)
|
||||
- [Wie man lernt](#️-wie-man-lernt)
|
||||
- [Lokal ausfuehren](#-lokal-ausfuehren)
|
||||
- [Weitere Kurse](#weitere-kurse)
|
||||
- [Mitmachen & Mitwirkende](#mitmachen--mitwirkende)
|
||||
- [Lizenz](#-lizenz)
|
||||
|
||||
## Warum Easy-Vibe
|
||||
|
||||
Du willst eine Ausgabenverfolgung? Sag es einfach.
|
||||
|
||||
Du brauchst ein Buchungssystem mit WeChat-Login? Sag es einfach.
|
||||
|
||||
@@ -121,326 +140,271 @@ Du willst einen Blog mit Kommentaren? Sag es einfach.
|
||||
|
||||
Im KI-Zeitalter beginnt Programmieren damit, zu beschreiben, was du willst.
|
||||
|
||||
Easy-Vibe zeigt dir, wie daraus ein echtes Produkt wird.
|
||||
Easy-Vibe zeigt dir, wie du daraus ein echtes Produkt machst.
|
||||
|
||||
|
||||
## 🔥 News
|
||||
|
||||
- **[2026-03-29]** ✨ **Neue Nutzergeschichten-Sektion mit 4 echten Fallbeispielen**: Auf der Startseite gibt es jetzt ein interaktives Story-Karussell und eigene Story-Seiten. Außerdem haben wir Platzhalter durch vier echte Geschichten ersetzt, von einem Grundschullehrer auf dem Land, einer Studentin, einem Informatiklehrer und einem Lkw-Fahrer. [👉 View the stories](https://datawhalechina.github.io/easy-vibe/zh-cn/vibe-stories/story-1.html)
|
||||
- **[2026-03-26]** 🚀 **Großes Update für Phase 2 Praxis**: SaaS-Kappenprojekt "[Ihre erste SaaS Full-Stack-App: Copywriting-Generator-Website](https://datawhalechina.github.io/easy-vibe/en/stage-2/assignments/fullstack-app/)" abgeschlossen und Abschnitt "[Wie man Stripe und Zahlungssysteme integriert](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/stripe-payment/)" erheblich erweitert.
|
||||
- **[2026-03-25]** 📚 **Neuer Anhang: Nutzerforschung und Anforderungsvalidierung**: Vier neue Artikel hinzugefügt, die Ideenfindung, das Double-Diamond-Modell, Jobs to Be Done und The Mom Test abdecken, um Anfängern zu helfen, Produktideen zu entdecken und zu validieren. [👉 Anhang lesen](https://datawhalechina.github.io/easy-vibe/en/appendix/)
|
||||
- **[2026-03-25]** 📚 **Englische Dokumentation vollständig aktualisiert**: Phase 2 (Full-Stack-Entwicklung) und Phase 3 (Fortgeschrittene Entwicklung) sind jetzt vollständig auf Englisch verfügbar. [👉 Lernen beginnen](https://datawhalechina.github.io/easy-vibe/en/stage-2/)
|
||||
- **[2026-03-02]** 🦞 **OpenClaw & AI Agent freundliche Unterstützung**: `llms.txt` hinzugefügt, damit OpenClaw, Claude, Cursor, Trae und andere AI Agents die Repository-Struktur schnell verstehen und die richtigen Tutorial-Inhalte finden können.
|
||||
- **[2026-03-01]** Der Abschnitt [Fortgeschrittene Entwicklung](https://datawhalechina.github.io/easy-vibe/en/stage-3/) wurde umfassend mit tiefen Anleitungen für Claude Code aktualisiert, einschließlich MCP, Skills, Agent Teams und mehr, zusammen mit acht plattformübergreifenden Projekttutorials.
|
||||
- **[2026-02-25]** [Anhang-Wissensbasis](https://datawhalechina.github.io/easy-vibe/en/appendix/) aktualisiert, deckt jetzt 9 Wissensbereiche und über 80 interaktive Themen ab.
|
||||
- **[2026-01-27]** Android- und iOS-App-Entwicklungstutorials hinzugefügt.
|
||||
- **[2026-01-19]** Interaktive Demos für Prompt Engineering, KI-Geschichte, Authentifizierungsdesign, Git-Prinzipien und mehr veröffentlicht.
|
||||
## 🔥 Neuigkeiten
|
||||
|
||||
- **[2026-03-29]** ✨ **Vibe Stories gestartet und mit echten Nutzerreisen aktualisiert**: Eine neue Vibe-Stories-Sektion mit interaktivem Karussell und dedizierten Story-Seiten wurde auf der Startseite hinzugefuegt. Platzhalter wurden durch vier echte Nutzergeschichten ersetzt: eine Grundschullehrerin vom Land, einen Studenten, einen IT-Lehrer an einer weiterfuehrenden Schule und einen Lkw-Fahrer, die alle echte Produkte mit KI gebaut haben. [👉 Geschichten ansehen](https://datawhalechina.github.io/easy-vibe/zh-cn/vibe-stories/story-1.html)
|
||||
- **[2026-03-26]** 🚀 **Grosses Phase-2-Praxis-Update**: Das SaaS-Abschlussprojekt "[Deine erste SaaS-Full-Stack-App: Copywriting-Generator-Website](https://datawhalechina.github.io/easy-vibe/en/stage-2/assignments/fullstack-app/)" wurde abgeschlossen und der Abschnitt "[Stripe- und Zahlungssysteme integrieren](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/stripe-payment/)" deutlich erweitert, plus wichtige Inhalte zu Multi-Produkt-UI und WeChat-Mini-Programm-Backend-Workflows.
|
||||
- **[2026-03-25]** 📚 **Neuer Anhang: Nutzerforschung und Anforderungsvalidierung**: Vier neue Artikel hinzugefuegt, die Ideenfindung, das Double-Diamond-Modell, Jobs to Be Done und The Mom Test abdecken, um Anfaengern zu helfen, Produktideen zu entdecken und zu validieren. [👉 Anhang lesen](https://datawhalechina.github.io/easy-vibe/en/appendix/)
|
||||
- **[2026-03-25]** 📚 **Englische Dokumentation vollstaendig aktualisiert**: Phase 2 (Full-Stack-Entwicklung) und Phase 3 (Fortgeschrittene Entwicklung) sind jetzt vollstaendig auf Englisch verfuegbar. [👉 Lernen beginnen](https://datawhalechina.github.io/easy-vibe/en/stage-2/)
|
||||
<details>
|
||||
<summary>Vergangene Neuigkeiten</summary>
|
||||
|
||||
- **[2026-01-16]** Projektstruktur reorganisiert und offiziell das Kapitel "Einstieg für Anfänger" etabliert.
|
||||
- **[2026-01-14]** Großes Update der Dokumente für Produktprototyping in Phase 1 abgeschlossen.
|
||||
- **[2026-01-13]** Dokumentenarchitektur umgestaltet und mehrsprachige Unterstützung (i18n) vollständig aktiviert.
|
||||
- **[2026-01-01]** Veröffentlichung der Kern-Lernkarte des Projekts.
|
||||
- **[2026-03-02]** 🦞 **OpenClaw- und KI-Agent-freundliche Unterstuetzung**: `llms.txt` hinzugefuegt, damit OpenClaw, Claude, Cursor, Trae und andere KI-Agenten die Repository-Struktur schnell verstehen und die richtigen Tutorial-Inhalte finden koennen.
|
||||
- **[2026-03-01]** Der Abschnitt [Fortgeschrittene Entwicklung](https://datawhalechina.github.io/easy-vibe/en/stage-3/) wurde umfassend mit tiefen Anleitungen fuer Claude Code aktualisiert, einschliesslich MCP, Skills, Agent Teams und mehr, zusammen mit acht plattformuebergreifenden Projekttutorials.
|
||||
- **[2026-02-25]** Die [Anhang-Wissensdatenbank](https://datawhalechina.github.io/easy-vibe/en/appendix/) wurde aktualisiert und deckt jetzt 9 Wissensbereiche und ueber 80 interaktive Themen ab.
|
||||
- **[2026-01-27]** Tutorials fuer Android- und iOS-App-Entwicklung hinzugefuegt.
|
||||
- **[2026-01-19]** Interaktive Demos fuer Prompt Engineering, KI-Geschichte, Authentifizierungsdesign, Git-Prinzipien und mehr veroeffentlicht.
|
||||
- **[2026-01-16]** Projektstruktur reorganisiert und einen Einsteiger-Einstiegspfad offiziell etabliert.
|
||||
- **[2026-01-14]** Grosses Update der Phase-1-Produktprototyp-Dokumentation abgeschlossen.
|
||||
- **[2026-01-13]** Dokumentenarchitektur umgestaltet und Mehrsprachigkeitsunterstuetzung vollstaendig aktiviert.
|
||||
- **[2026-01-01]** Die Kern-Lernkarte des Projekts wurde veroeffentlicht.
|
||||
</details>
|
||||
|
||||
## 适合谁
|
||||
## Fuer wen ist das
|
||||
|
||||
- **零基础爱好者**：先做出第一个作品，再理解怎么做
|
||||
- **产品经理 / 创业者**：快速验证想法，低成本做 MVP
|
||||
- **学生**：建立 AI 时代的实战技能
|
||||
- **初级开发者**：补齐从想法到上线的完整开发链路
|
||||
- **中高级开发者**：掌握 AI 协作开发、复杂项目实战与效率升级
|
||||
- **Komplette Anfaenger**: Baue zuerst dein erstes Projekt, dann verstehe, wie es funktioniert
|
||||
- **Produktmanager / Gruender**: Ideen schnell validieren und MVPs mit niedrigen Kosten erstellen
|
||||
- **Studierende**: Praktische Faehigkeiten fuer das KI-Zeitalter entwickeln
|
||||
- **Junior-Entwickler**: Den vollstaendigen Weg von der Idee zum Launch lernen
|
||||
- **Mid-Level- und Senior-Entwickler**: Deine KI-Zusammenarbeitsworkflow fuer komplexe Projekte aufwerten
|
||||
|
||||
|
||||
|
||||
## 你的学习路径
|
||||
## Deine Lernpfade
|
||||
|
||||
### 🎮 我想先试试（5分钟体验）
|
||||
**适合人群**：所有人
|
||||
**学什么**：AI 编程初体验、贪吃蛇小游戏
|
||||
**你会得到**：5 分钟做出第一个 AI 应用
|
||||
### 🎮 Ich moechte einen schnellen ersten Erfolg
|
||||
**Am besten fuer**: Alle
|
||||
**Was du lernen wirst**: Wie sich KI-Coding wirklich anfuehlt, an einem einfachen, konkreten praktischen Beispiel
|
||||
**Was du bekommst**: Ein klarer erster Eindruck von Vibe-Coding und wie man mit KI durch Konversation arbeitet
|
||||
|
||||
[开始体验](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/learning-map/)
|
||||
[Hier starten](https://datawhalechina.github.io/easy-vibe/en/stage-1/ai-capabilities-through-games/)
|
||||
|
||||
### 💡 我有个想法要实现
|
||||
**适合人群**：零基础/产品经理/创业者
|
||||
**学什么**：AI IDE 工具、需求拆解、页面设计、功能规划、提示词写法、原型迭代
|
||||
**你会得到**：一个可演示的产品原型
|
||||
### 💡 Ich moechte eine Idee in einen Produktprototyp umwandeln
|
||||
**Am besten fuer**: Anfaenger / Produktmanager / Gruender
|
||||
**Was du lernen wirst**: Lernkarte, KI-IDE-Tools, Ideenvalidierung, Prototyping, KI-Faehigkeitsintegration und vollstaendige Demo-Iteration
|
||||
**Was du bekommst**: Ein demo-basierter KI-Produktprototyp, den du tatsaechlich Nutzern oder Teammitgliedern zeigen kannst
|
||||
|
||||
[开始学习](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/learning-map/)
|
||||
[Lernen beginnen](https://datawhalechina.github.io/easy-vibe/en/stage-1/learning-map/)
|
||||
|
||||
### 🚀 我想系统学习
|
||||
**适合人群**：开发者/进阶学习者
|
||||
**学什么**：前端、后端、数据库、AI 集成、部署运维、Claude Code 开发技巧
|
||||
**你会得到**：独立完成一个可上线的全栈 AI 应用
|
||||
### 🚀 Ich moechte Full-Stack-Produkte Ende zu Ende erstellen
|
||||
**Am besten fuer**: Junior-Entwickler / Indie-Hacker / Fortgeschrittene Lernende
|
||||
**Was du lernen wirst**: Frontend-Workflows, Design-to-Code, Datenbanken, Backend-APIs, Bereitstellung, Abrechnung und grosse Projekte
|
||||
**Was du bekommst**: Die Faehigkeit, unabhaengig moderne KI-gestuetzte Webanwendungen bereitzustellen
|
||||
|
||||
[开始学习](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/)
|
||||
[Lernen beginnen](https://datawhalechina.github.io/easy-vibe/en/stage-2/)
|
||||
|
||||
### 🦞 我想构建 AI Agent
|
||||
**适合人群**：对 AI Agent 感兴趣的开发者
|
||||
**学什么**：OpenClaw AI 助理、Skills 系统、自动化工作流
|
||||
**你会得到**：一个属于你的命令行 AI 助理
|
||||
### KI-Nativ: Ich moechte fortgeschrittene Claude-Code- und Agenten-Workflows
|
||||
**Am besten fuer**: Entwickler, die sich fuer KI-native Entwicklung interessieren
|
||||
**Was du lernen wirst**: Claude Code, MCP, Skills, Agent Teams, langlaufende Aufgaben, Spec Coding und plattformuebergreifende App-Bereitstellung
|
||||
**Was du bekommst**: Ein staerkerer Workflow fuer komplexe KI-gestuetzte Entwicklung und Automatisierung
|
||||
|
||||
[开始学习](https://github.com/datawhalechina/hello-claw)
|
||||
[Zur fortgeschrittenen Entwicklung](https://datawhalechina.github.io/easy-vibe/en/stage-3/)
|
||||
|
||||
### 📚 我想查资料
|
||||
**适合人群**：所有人
|
||||
**学什么**：计算机基础、AI 原理、9 大知识领域
|
||||
**你会得到**：80+ 交互式专题资料
|
||||
### 📚 Ich moechte Referenzmaterial und Grundlagen
|
||||
**Am besten fuer**: Alle
|
||||
**Was du lernen wirst**: Informatik-Grundlagen, Frontend-/Backend-Basics, Infrastruktur, KI-Prinzipien und Engineering-Praktiken
|
||||
**Was du bekommst**: Eine langfristige Referenz-Wissensdatenbank, die 9 grosse Wissensbereiche abdeckt
|
||||
|
||||
[查看知识库](https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/)
|
||||
[Wissensdatenbank durchsuchen](https://datawhalechina.github.io/easy-vibe/en/appendix/)
|
||||
|
||||
## 学习建议
|
||||
## Lernempfehlungen
|
||||
|
||||
- 零基础、产品经理、创业者：从 [第一阶段](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/learning-map/) 开始
|
||||
- 有开发经验：从 [第二阶段](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/) 开始
|
||||
- 想直接做复杂项目：进入 [第三阶段](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/)
|
||||
- 想学 AI Agent：看 [Hello Claw](https://github.com/datawhalechina/hello-claw)
|
||||
- Wenn du Anfaenger, Produktmanager oder Gruender bist, beginne mit [Phase 1](https://datawhalechina.github.io/easy-vibe/en/stage-1/learning-map/)
|
||||
- Wenn du von Prototypen zur Full-Stack-Bereitstellung wechseln moechtest, beginne mit [Phase 2](https://datawhalechina.github.io/easy-vibe/en/stage-2/)
|
||||
- Wenn du fortgeschrittene Claude-Code-Workflows oder plattformuebergreifende Projekte moechtest, gehe zu [Phase 3](https://datawhalechina.github.io/easy-vibe/en/stage-3/)
|
||||
- Wenn du durch Konzepte oder fehlendes Hintergrundwissen blockiert wirst, nutze die [Anhang-Wissensdatenbank](https://datawhalechina.github.io/easy-vibe/en/appendix/)
|
||||
|
||||
### 📖 内容导航
|
||||
### 📖 Inhaltliche Navigation
|
||||
|
||||
<div align="center">
|
||||
<img src="../../assets/readme-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;"/>
|
||||
<img src="../../assets/readme-image1.png" alt="Lernkarte" width="70%" style="border-radius: 10px; box-shadow: 0 8px 20px rgba(45,55,72,0.3); margin: 15px 0;"/>
|
||||
</div>
|
||||
|
||||
### 一、零基础入门
|
||||
### I. Einsteiger-Einstieg
|
||||
|
||||
| 章节 | 关键内容 |
|
||||
| :----------------------------------------------------------------------------------- | :------------------------------------------------ |
|
||||
| [学习地图](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/learning-map/) | 整体学习路径导览 |
|
||||
| [AI 时代，会说话就会编程](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/ai-capabilities-through-games/) | 通过贪吃蛇等案例初步感受 AI 编程的能力 |
|
||||
| [寻找好想法](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/finding-great-idea/) | 学会寻找和验证产品想法，找到值得做的项目 |
|
||||
| [认识 AI IDE 工具](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/introduction-to-ai-ide/) | 学会使用 IDE，在本地制作小游戏 |
|
||||
| [动手做出原型](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/building-prototype/) | 从需求分析、AI 生成单页面，再到生成多页面产品原型 |
|
||||
| [给原型加上 AI 能力](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/integrating-ai-capabilities/) | 学会接入常见 AI 能力（文本、图片、视频） |
|
||||
| [完整项目实战](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/complete-project-practice/) | 模拟真实场景、接受用户反馈迭代，完整化项目 |
|
||||
| Abschnitt | Wichtiger Inhalt |
|
||||
| :------ | :---------- |
|
||||
| [Lernkarte](https://datawhalechina.github.io/easy-vibe/en/stage-1/learning-map/) | Eine gefuehrte Uebersicht der gesamten Lernreise |
|
||||
| [KI-Aera: Wenn du sprechen kannst, kannst du coden](https://datawhalechina.github.io/easy-vibe/en/stage-1/ai-capabilities-through-games/) | Ersten Eindruck von KI-Coding durch Beispiele wie Snake bekommen |
|
||||
| [KI-Programmierwerkzeuge meistern](https://datawhalechina.github.io/easy-vibe/en/stage-1/introduction-to-ai-ide/) | Lernen, wie KI-IDE-Tools funktionieren und einfache lokale Projekte damit erstellen |
|
||||
| [Grossartige Ideen finden](https://datawhalechina.github.io/easy-vibe/en/stage-1/finding-great-idea/) | Lernen, wie man Produktideen entdeckt und validiert, die es wert sind, umgesetzt zu werden |
|
||||
| [Produktprototypen erstellen](https://datawhalechina.github.io/easy-vibe/en/stage-1/building-prototype/) | Von Anforderungen zu Einzelseiten- und Mehrseiten-Produktprototypen |
|
||||
| [KI-Faehigkeiten integrieren](https://datawhalechina.github.io/easy-vibe/en/stage-1/integrating-ai-capabilities/) | Text-, Bild- und Video-KI-Funktionen integrieren |
|
||||
| [Vollstaendiges Projektpraktikum](https://datawhalechina.github.io/easy-vibe/en/stage-1/complete-project-practice/) | Reale Szenarien simulieren, Nutzerfeedback sammeln und ein vollstaendiges Projekt iterieren |
|
||||
|
||||
#### 附录：业务思维
|
||||
#### Anhang: Produkt- und Geschaeftsdenken
|
||||
|
||||
| 章节 | 关键内容 |
|
||||
| :----------------------------------------------------------------------------------- | :----------------------------------------- |
|
||||
| [产品思维与方案设计](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-a-product-thinking/) | 从零到一做产品需要考虑的思维框架 |
|
||||
| [AI 行业应用场景参考 (B端)](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-industry-scenarios/) | 了解 AI 在不同产业的应用场景 |
|
||||
| [AI 消费场景灵感参考 (C端)](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-c-consumer-scenarios/) | 探索 AI 在消费级产品中的应用场景 |
|
||||
| Abschnitt | Wichtiger Inhalt |
|
||||
| :------ | :---------- |
|
||||
| [Produktdenken und Loungsdesign](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-a-product-thinking/) | Kern-Frameworks fuer den Weg von Null zu Eins mit einem Produkt |
|
||||
| [KI-Branchen-Anwendungsszenarien (B2B)](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-industry-scenarios/) | Verstehen, wie KI ueber Branchen hinweg angewendet wird |
|
||||
| [KI-Konsumentenszenarien-Inspiration (B2C)](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-c-consumer-scenarios/) | Produktmoeglichkeiten in der Konsum-KI erkunden |
|
||||
|
||||
#### 附录：技术方案
|
||||
#### Anhang: Nutzerforschung und Anforderungsvalidierung
|
||||
|
||||
| 章节 | 关键内容 |
|
||||
| :---------------------------------------------------------------------------------------------------------------------- | :----------------------------------------- |
|
||||
| [写代码时遇到错误怎么办](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-b-common-errors/) | vibe coding 中的常见错误及排查方法 |
|
||||
| [七款 AI 编程工具对比](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial) | 对比测试主流 AI 编程平台 |
|
||||
| [用设计和编程 Agent 设计网站](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents) | 学习如何使用 AI 智能体协同工作 |
|
||||
| Abschnitt | Wichtiger Inhalt |
|
||||
| :------ | :---------- |
|
||||
| [Wo man Ideen findet: 3 Referenzquellen, die fuer Anfaenger am besten funktionieren](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-idea-sources/) | Eine zuverlaessige Pipeline fuer konkrete Produktmoeglichkeiten aufbauen |
|
||||
| [Double Diamond: Erst das Richtige tun, dann es richtig machen](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-double-diamond/) | Einen strukturierten Prozess nutzen, um von verstreuter Inspiration zu einer machbaren Richtung zu kommen |
|
||||
| [Jobs to Be Done nutzen, um herauszufinden, was Nutzer wirklich wollen](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-jobs-to-be-done/) | Nutzerziele durch echte Aufgaben analysieren statt durch oberflaechliche Feature-Anfragen |
|
||||
| [The Mom Test: Eine Nutzerinterview-Methode zur Validierung von Bedarf](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-mom-test/) | Lernen, bessere Fragen zu stellen und falsch-positive Rueckmeldungen zu vermeiden |
|
||||
|
||||
### 二、初中级开发工程师
|
||||
#### Anhang: Technische Loesungen
|
||||
|
||||
#### 前端部分
|
||||
| Abschnitt | Wichtiger Inhalt |
|
||||
| :------ | :---------- |
|
||||
| [Was tun bei Fehlern](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-b-common-errors/) | Haeufige Vibe-Coding-Probleme und wie man sie behebt |
|
||||
| [Vergleich von sieben KI-Programmierwerkzeugen](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial) | Wichtige KI-Coding-Plattformen durch praktisches Testen vergleichen |
|
||||
| [Websites mit Agenten entwerfen](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents) | Multi-Agent-Zusammenarbeit in der Praxis lernen |
|
||||
|
||||
| 章节 | 关键内容 |
|
||||
| :--------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------- |
|
||||
| [从Lovart出发，搭建自己的素材生产Agent](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/frontend/lovart-assets/) | 从零开始，利用Nanobanana和Lovart批量生成高质量的设计素材，并动手构建一个能意图识别的绘图Agent |
|
||||
| [Figma 与 MasterGo 入门](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/frontend/figma-mastergo/) | 用设计工具梳理信息架构和页面结构，为前端实现打基础 |
|
||||
| [构建第一个现代应用程序-UI 设计](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/frontend/ui-design/) | 基于设计稿完成组件化界面，实现从设计到代码的第一条链路 |
|
||||
| [参考 UI 设计规范与多产品 UI 设计](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/frontend/multi-product-ui/) | 围绕统一主视觉扩展多产品界面，练习系统化设计能力 |
|
||||
| [用 LLM 和 Skills 让界面变好看](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/frontend/llm-skills-beautiful/) | 用提示词和 Skills 插件让 AI 生成美观独特的界面 |
|
||||
| [一起做霍格沃茨画像](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/frontend/hogwarts-portraits/) | 从 0 到 1 做出接入 AI 能力的前端应用，串联设计与开发 |
|
||||
| [从设计原型到项目代码](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/frontend/design-to-code/) | 三种路径将设计工具中的原型转化为前端代码 |
|
||||
| [使用现代组件库更新你的界面](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/frontend/modern-component-library/) | 用组件库快速构建专业级界面，统一风格、提升开发效率 |
|
||||
### II. Junior- und Mid-Level-Entwickler
|
||||
|
||||
#### 后端开发部分
|
||||
#### Frontend
|
||||
|
||||
| 章节 | 关键内容 |
|
||||
| :------------------------------------------------------------------------------------------------- | :---------------------------------------------------------- |
|
||||
| [从数据库到 Supabase](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/backend/database-supabase/) | 在 Supabase 上落地数据库和 API，打通数据模型与前端页面 |
|
||||
| [大模型辅助编写接口代码与接口文档](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/backend/ai-interface-code/) | 用大模型协助生成接口与数据库文档及代码，实现可读可测的后端 |
|
||||
| [Git 和 GitHub 工作流](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/backend/git-workflow/) | 在 Git 工作流中管理代码，进行版本控制和协作 |
|
||||
| [如何部署 Web 应用](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/backend/zeabur-deployment/) | 使用 CloudBase、Vercel、Zeabur 等平台部署应用上线 |
|
||||
| [CLI AI 编程工具](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/backend/modern-cli/) | 使用 CLI 类 AI 编程工具加速开发与调试，形成个人工程化工作流 |
|
||||
| [如何集成 Stripe 等收费系统](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/backend/stripe-payment/) | 接入支付系统，完成收费链路与基础结算流程 |
|
||||
| [大作业：构建第一个现代应用程序-全栈应用](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/assignments/copywriting-platform-supabase/) | 综合前端、后端与支付模块，完成可上线的全栈 Web 应用 |
|
||||
| Abschnitt | Wichtiger Inhalt |
|
||||
| :------ | :---------- |
|
||||
| [Frontend 0: Erstelle deinen eigenen Asset-Produktions-Agenten mit Lovart](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/lovart-assets/) | Nanobanana und Lovart verwenden, um visuelle Assets in Mengen zu generieren und einen Zeichen-Agenten mit Intent-Erkennung zu erstellen |
|
||||
| [Frontend 1: Figma & MasterGo Grundlagen](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/figma-mastergo/) | Den Workflow von Designentwuerfen zu implementierungsbereitem UI-Denken lernen |
|
||||
| [Frontend 2: Erste moderne App erstellen - UI-Design](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/ui-design/) | Die UI-Design-Grundlagen hinter modernen Anwendungsoberflaechen lernen |
|
||||
| [Frontend 3: UI-Richtlinien und Multi-Produkt-Design](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/multi-product-ui/) | Konsistenz und Aesthetik ueber mehrere Produkte hinweg mit gemeinsamen UI-Regeln verbessern |
|
||||
| [Frontend 4: Schnittstellen mit LLMs und Skills verschoenern](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/llm-skills-beautiful/) | Prompts und Plugins verwenden, damit KI ausgefeiltere, einzigartige Schnittstellen generiert |
|
||||
| [Frontend 4: Lasst uns Hogwarts-Portraets erstellen](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/hogwarts-portraits/) | Ein interaktives KI-Bild-Frontend-Projekt von Grund auf neu erstellen |
|
||||
| [Frontend 6: Vom Designprototyp zum Projektcode](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/design-to-code/) | Designprototypen in Frontend-Code umwandeln, der tatsaechlich im Browser laeuft |
|
||||
| [Frontend 7: UI mit modernen Komponentenbibliotheken aufwerten](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/modern-component-library/) | Komponentenbibliotheken verwenden, um schneller professionelle Schnittstellen zu erstellen |
|
||||
|
||||
#### AI 能力附录
|
||||
#### Backend
|
||||
|
||||
| 章节 | 关键内容 |
|
||||
| :------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------- |
|
||||
| [Dify 入门与知识库集成](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/ai-capabilities/dify-knowledge-base/) | 用 Dify Workflow 与基础 RAG 搭建工具类产品，为后续应用升级打样 |
|
||||
| Abschnitt | Wichtiger Inhalt |
|
||||
| :------ | :---------- |
|
||||
| [Backend 1: Git und GitHub lernen](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/git-workflow/) | Kern-Versionskontrolloperationen und Zusammenarbeitsworkflows mit Git meistern |
|
||||
| [Backend 2: Von Datenbanken zu Supabase](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/database-supabase/) | Relationale Datenbankgrundlagen lernen und Supabase als moderne BaaS-Plattform verwenden |
|
||||
| [Backend 3: Backend-API-Design und Entwicklung](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/ai-interface-code/) | KI zur Unterstuetzung von API-Design, Backend-Code-Generierung und API-Dokumentation verwenden |
|
||||
| [Backend 4: Produktprototyp bereitstellen](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/zeabur-deployment/) | Full-Stack-Anwendungen schnell mit Zeabur in der Cloud bereitstellen |
|
||||
| [Backend 5: Von IDEs zu CLI-KI-Coding-Tools](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/modern-cli/) | Terminal-first-KI-Coding-Workflows fuer moderne Entwicklung erkunden |
|
||||
| [Backend 6: Stripe und andere Abrechnungssysteme integrieren](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/stripe-payment/) | Monetarisierung mit Zahlungs- und Abrechnungsfaehigkeiten hinzufuegen |
|
||||
|
||||
### 三、高级开发工程师
|
||||
#### Große Projekte
|
||||
|
||||
#### Claude Code 核心技能
|
||||
| Abschnitt | Wichtiger Inhalt |
|
||||
| :------ | :---------- |
|
||||
| [Grosses Projekt 1: Deine erste SaaS-Full-Stack-App - KI-Copywriting-Website](https://datawhalechina.github.io/easy-vibe/en/stage-2/assignments/fullstack-app/) | Einen KI-Marketing-Copy-Workspace mit Login, Generierung, Abrechnung und Admin-Verwaltung erstellen |
|
||||
| [Grosses Projekt 2: Online-Pruefungs- und Managementsystem](https://datawhalechina.github.io/easy-vibe/en/stage-2/assignments/modern-frontend-trae/) | Ein Online-Pruefungssystem mit Fragengenerierung, Pruefungsablaeufen und Admin-Tools erstellen |
|
||||
|
||||
| 章节 | 关键内容 |
|
||||
| :------------------------------------------------------------------------------------------------------ | :----------------------------------------------------------- |
|
||||
| [Claude Code 快速上手](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/core-skills/basics/) | 安装配置、基础操作、实用技巧和常用指令 |
|
||||
| [Claude Code MCP 完全指南](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/core-skills/mcp/) | 通过 MCP 让 Claude Code 连接 GitHub、数据库、API 等外部服务 |
|
||||
| [Claude Code Skills 完全指南](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/core-skills/skills/) | 将专业知识打包成可复用技能包，一次配置反复使用 |
|
||||
| [Claude Code 工作流最佳实践](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/core-skills/workflow/) | 日常开发、代码重构、Code Review 等场景的最佳实践 |
|
||||
| [Claude Agent Teams 完全指南](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/core-skills/agent-teams/) | 多 AI 实例协同工作，像真正的开发团队一样并行协作 |
|
||||
| [Claude Code Superpowers 工程级开发](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/core-skills/superpowers/) | 让 AI 写出工程级代码，遵循 TDD 和最佳实践 |
|
||||
| [如何让 Claude Code 长时间工作](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/core-skills/long-running-tasks/) | 设计长时间运行的任务，让 Coding Tools 持续工作直到完成 |
|
||||
#### KI-Faehigkeiten Anhang
|
||||
|
||||
#### 多平台开发
|
||||
| Abschnitt | Wichtiger Inhalt |
|
||||
| :------ | :---------- |
|
||||
| [KI 1: Dify-Grundlagen & Wissensdatenbank-Integration](https://datawhalechina.github.io/easy-vibe/en/stage-2/ai-capabilities/dify-knowledge-base/) | Lernen, KI-Anwendungen mit Dify zu erstellen und private Wissensdatenbanken zu integrieren |
|
||||
|
||||
| 章节 | 关键内容 |
|
||||
| :------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------- |
|
||||
| [如何构建微信小程序](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/wechat-miniprogram/) | 了解微信小程序生态，从官方模板到上线完成一个前端小程序 |
|
||||
| [如何构建微信小程序-包含后端](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/wechat-miniprogram-backend/) | 在小程序中接入数据库与后端逻辑，打通完整业务闭环 |
|
||||
| [如何构建安卓程序](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/android-app/) | 使用 Expo 等工具，完成 Web/原生一体化的安卓应用开发 |
|
||||
| [如何构建 iOS 程序](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/ios-app/) | 使用 Expo 等工具，完成 Web/原生一体化的 iOS 应用开发 |
|
||||
| [如何开发 PWA 本地应用](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/pwa-local-app/) | 让网页变成"真正的 App"，支持离线、推送、桌面安装 |
|
||||
| [如何开发浏览器 AI 助手插件](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/browser-ai-extension/) | 开发 Chrome 插件，一键总结任意网页，支持云端 API 和内置 AI |
|
||||
| [如何开发 Electron 桌面程序](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/electron-voice-to-text/) | 用 Electron 构建语音转文字桌面应用，支持三平台安装运行 |
|
||||
| [如何快速开发并铸造 NFT](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/nft-minting/) | 从零编写智能合约，部署到以太坊测试网，铸造自己的 NFT |
|
||||
| [如何开发 VS Code 插件](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/vscode-extension/) | 开发 AI 项目助手插件，支持模板生成、代码对话、多文件问答 |
|
||||
| [如何开发工业级 Qt 桌面应用](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/qt-industrial-hmi/) | 用 Qt 构建工业级水泵监控 HMI 系统，实时数据、趋势图、报警 |
|
||||
### III. Fortgeschrittene Entwickler
|
||||
|
||||
#### AI 能力附录
|
||||
#### Claude Code Kernkompetenzen
|
||||
|
||||
| 章节 | 关键内容 |
|
||||
| :---------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------ |
|
||||
| [什么是 RAG 以及它如何工作](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/ai-advanced/rag-introduction/) | 系统理解 RAG 原理与常见架构，为复杂应用提供知识检索基础 |
|
||||
| [中高级 RAG 与工作流编排：以 LangGraph 为例](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/ai-advanced/langgraph-advanced-rag/) | 使用 LangGraph 等工具设计多步工作流与中高级 RAG 系统 |
|
||||
| Abschnitt | Wichtiger Inhalt |
|
||||
| :------ | :---------- |
|
||||
| [Erste Schritte mit Claude Code](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/basics/) | Installation, Einrichtung, Grundlagen und nuetzliche Befehle |
|
||||
| [Claude Code MCP-Leitfaden](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/mcp/) | Claude Code ueber MCP mit GitHub, Datenbanken, APIs und anderen Diensten verbinden |
|
||||
| [Claude Code Skills-Leitfaden](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/skills/) | Expertise in wiederverwendbare Skills verpacken, die du immer wieder nutzen kannst |
|
||||
| [Claude Code fuer langlaufende Aufgaben am Arbeiten halten](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/long-running-tasks/) | Langlaufende Aufgaben so gestalten, dass Coding-Tools weiterarbeiten, bis der Job erledigt ist |
|
||||
| [Claude Agent Teams-Leitfaden](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/agent-teams/) | Mehrere KI-Instanzen wie ein echtes Entwicklungsteam koordinieren |
|
||||
| [Claude Code Superpowers fuer engineering-grade Entwicklung](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/superpowers/) | KI helfen, engineering-grade Code mit TDD und Best Practices zu produzieren |
|
||||
| [Claude Code Workflow Best Practices](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/workflow/) | Best Practices fuer Refactoring, Code Review und taegliche Entwicklung |
|
||||
| [Claude Code Remote-Entwicklung auf Mobilgeraeten](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/mobile-development/) | Claude Code ueber den Desktop hinaus nutzen und einen produktiven Remote-Workflow auf Mobilgeraeten aufbauen |
|
||||
| [Claude Agent SDK vollstaendiger Leitfaden](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/claude-agent-sdk/) | Benutzerdefinierte Agenten-Workflows erstellen und Claude mit dem SDK in deine eigenen Tools integrieren |
|
||||
| [Vom Vibe-Coding zum Spec-Coding](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/spec-coding/) | Vom ad-hoc-Prompting zu einem strukturierteren, spezifikationsgesteuerten KI-Entwicklungsworkflow wechseln |
|
||||
|
||||
### 📚 附录知识库
|
||||
#### Plattformuebergreifende Entwicklung
|
||||
|
||||
> 涵盖 **9 大知识领域**、**80+ 交互式专题**，以动画和可视化组件帮助你直观理解从计算机底层到 AI 前沿的核心概念。
|
||||
| Abschnitt | Wichtiger Inhalt |
|
||||
| :------ | :---------- |
|
||||
| [Die richtige Plattform fuer deine App waehlen](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/choose-platform/) | App-Formen vergleichen und die richtige Plattform basierend auf Nutzern, Szenarien und Bereitstellungszielen waehlen |
|
||||
| [WeChat-Mini-Programm erstellen](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/wechat-miniprogram/) | Das Oekosystem verstehen und ein Frontend-Mini-Programm von der Vorlage bis zum Launch bereitstellen |
|
||||
| [WeChat-Mini-Programm mit Backend erstellen](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/wechat-miniprogram-backend/) | Backend-Logik und Datenbanken hinzufuegen, um die vollstaendige Geschaeftsschleife abzuschliessen |
|
||||
| [Android-App erstellen](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/android-app/) | Android-App-Entwicklung mit einem modernen nativen Workflow lernen |
|
||||
| [iOS-App erstellen](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/ios-app/) | iOS-App-Entwicklung und die Konventionen des Apple-Oekosystems lernen |
|
||||
| [Lokale PWA-App erstellen](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/pwa-local-app/) | Eine Website in eine echte App mit Offline-Unterstuetzung, Push und Installation umwandeln |
|
||||
| [Browser-KI-Assistenten-Erweiterung erstellen](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/browser-ai-extension/) | Eine Chrome-Erweiterung erstellen, die jede Seite mit Cloud-APIs oder eingebauter KI zusammenfasst |
|
||||
| [Electron-Desktop-App erstellen](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/electron-voice-to-text/) | Eine Sprache-zu-Text-Desktop-App mit Electron fuer drei Plattformen erstellen |
|
||||
| [Schnell ein NFT erstellen und praegen](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/nft-minting/) | Einen Smart Contract von Grund auf schreiben, bereitstellen und dein eigenes NFT praegen |
|
||||
| [VS-Code-Erweiterung erstellen](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/vscode-extension/) | Einen KI-Projektassistenten mit Vorlagen, Code-Chat und Multi-File-Q&A erstellen |
|
||||
| [Industrie-grade Qt-Desktop-App erstellen](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/qt-industrial-hmi/) | Ein Echtzeit-Qt-HMI-System mit Trends, Alarmen und Ueberwachung erstellen |
|
||||
|
||||
#### KI-Faehigkeiten Anhang
|
||||
|
||||
| Abschnitt | Wichtiger Inhalt |
|
||||
| :------ | :---------- |
|
||||
| [Was ist RAG und wie funktioniert es](https://datawhalechina.github.io/easy-vibe/en/stage-3/ai-advanced/rag-introduction/) | Ein systematisches Verstaendnis von RAG-Prinzipien und haeufigen Architekturen aufbauen |
|
||||
| [Fortgeschrittene RAG-Workflows mit LangGraph](https://datawhalechina.github.io/easy-vibe/en/stage-3/ai-advanced/langgraph-advanced-rag/) | Multi-Step-Workflows und fortgeschrittenere RAG-Systeme entwerfen |
|
||||
|
||||
### 📚 Anhang Wissensdatenbank
|
||||
|
||||
> Mit **9 grossen Wissensbereichen** und **ueber 80 interaktiven Themen** hilft dieser Anhang durch Animation und visuelle Komponenten, Kernkonzepte von Informatik-Grundlagen bis zur KI-Frontier intuitiv zu verstehen.
|
||||
>
|
||||
> 👉 [查看完整附录](https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/) · [AI 能力词典](https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/ai-capability-dictionary)
|
||||
> 👉 [Vollstaendigen Anhang ansehen](https://datawhalechina.github.io/easy-vibe/en/appendix/)
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td valign="top" width="33%">
|
||||
<strong>💻 计算机基础</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/transistor-to-cpu.html">从晶体管到 CPU</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/operating-systems.html">操作系统</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/data-encoding-storage.html">数据的编码、存储与传输</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/computer-networks.html">网络：两台电脑如何对话</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/data-structures.html">数据结构</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/algorithm-thinking.html">算法思维入门</a>
|
||||
</td>
|
||||
<td valign="top" width="33%">
|
||||
<strong>🔧 开发工具</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/git-version-control.html">Git：代码的时光机</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/command-line-shell.html">命令行与 Shell 脚本</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/package-managers.html">包管理器</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/debugging-art/">调试的艺术</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/regex.html">正则表达式</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/environment-path.html">环境变量与 PATH</a>
|
||||
</td>
|
||||
<td valign="top" width="33%">
|
||||
<strong>🌐 浏览器与前端</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/javascript-deep-dive.html">JavaScript 语言深入</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/browser-as-os-rendering.html">浏览器渲染管道</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/frontend-frameworks.html">前端框架对比</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/graphics-animation.html">图形与动画</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/web-performance.html">网页性能的度量与优化</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/frontend-engineering.html">前端工程化全貌</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top" width="33%">
|
||||
<strong>🖥️ 服务器与后端</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/http-protocol.html">HTTP 协议</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/api-design.html">API 设计哲学</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/auth-authorization.html">认证与授权体系</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/concurrency-async.html">并发、异步与多线程</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/message-queues.html">消息队列与事件驱动</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/backend-layered-architecture.html">后端分层架构</a>
|
||||
</td>
|
||||
<td valign="top" width="33%">
|
||||
<strong>📊 数据</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/database-fundamentals.html">数据库原理与 SQL</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/database-fundamentals.html">数据库原理</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/data-tracking.html">数据埋点与用户行为采集</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/data-analysis.html">数据分析基础</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/ab-testing.html">A/B 测试与实验驱动</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/data-visualization.html">数据可视化与仪表盘</a>
|
||||
</td>
|
||||
<td valign="top" width="33%">
|
||||
<strong>🏗️ 架构与系统设计</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/6-architecture-and-system-design/monolith-to-microservices.html">从单体到微服务的演进</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/6-architecture-and-system-design/distributed-systems.html">分布式系统的挑战</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/6-architecture-and-system-design/high-availability.html">高可用与容灾</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/6-architecture-and-system-design/system-design-methodology.html">系统设计方法论</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top" width="33%">
|
||||
<strong>☁️ 基础设施与运维</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/docker-containers.html">Docker 容器化</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/kubernetes.html">Kubernetes 编排</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/ci-cd.html">CI / CD 自动化</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/dns-https.html">域名、DNS 与 HTTPS</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/monitoring-logging.html">监控、日志与告警</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/infrastructure-as-code.html">基础设施即代码</a>
|
||||
</td>
|
||||
<td valign="top" width="33%">
|
||||
<strong>🤖 人工智能</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/llm-principles.html">大语言模型的工作原理</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/transformer-attention.html">Transformer 与注意力机制</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/rag.html">RAG 架构</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/ai-agents.html">AI Agent 与工具调用</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/prompt-engineering.html">提示词工程</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/image-generation.html">图像生成原理</a>
|
||||
</td>
|
||||
<td valign="top" width="33%">
|
||||
<strong>🎯 工程素养</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/code-quality-refactoring.html">代码质量与重构</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/testing-strategies.html">测试策略</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/design-patterns.html">设计模式</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/security-thinking.html">安全思维与攻防基础</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/technical-writing.html">技术文档写作</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/open-source-collaboration.html">开源协作</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
### 🎓 Weitere Kurse
|
||||
|
||||
## 🛠️ 如何学习
|
||||
- [Hands-on Modern RL](#weitere-kurse)
|
||||
- [Learn Harness Engineering](#weitere-kurse)
|
||||
|
||||
- 根据个人能力，选择性地阅读和实践相关章节，如果有问题欢迎 issue 提问。
|
||||
## 🛠️ Wie man lernt
|
||||
|
||||
## 💻 本地启动本课件
|
||||
- Lies und praktiziere die Abschnitte, die deinem aktuellen Level entsprechen. Wenn du nicht weiterkommst, oeffne gerne ein Issue.
|
||||
|
||||
### 现代方案
|
||||
## 💻 Lokal ausfuehren
|
||||
|
||||
在 AI IDE 对话框（vscode、cursor、trae 等）中，输入下列提示词启动本课件：
|
||||
### Moderner Ansatz
|
||||
|
||||
```
|
||||
请你帮我运行这个项目的本地服务
|
||||
In einem KI-IDE-Chatfenster wie VS Code, Cursor oder Trae kannst du einfach sagen:
|
||||
|
||||
```text
|
||||
Bitte hilf mir, dieses Projekt lokal auszufuehren.
|
||||
```
|
||||
|
||||
### 旧方案
|
||||
### Klassischer Ansatz
|
||||
|
||||
1. npm install
|
||||
2. npm run dev
|
||||
3. 打开浏览器访问 `http://localhost:3000` 即可查看。
|
||||
1. `npm install`
|
||||
2. `npm run dev`
|
||||
3. Oeffne `http://localhost:3000` in deinem Browser.
|
||||
|
||||
## 🤝 参与贡献
|
||||
## Weitere Kurse
|
||||
|
||||
- 如果你发现了一些问题，或者觉得任何可以改进本项目的地方，可以提 Issue 进行反馈。如果提完没有人回复你可以联系[保姆团队](https://github.com/datawhalechina/DOPMC/blob/main/OP.md)的同学进行反馈跟进~
|
||||
- 如果你想参与贡献本项目，可以提 Pull Request，如果提完没有人回复你可以联系[保姆团队](https://github.com/datawhalechina/DOPMC/blob/main/OP.md)的同学进行反馈跟进~
|
||||
- 如果你对 Datawhale 很感兴趣并想要发起一个新的项目，请按照[Datawhale 开源项目指南](https://github.com/datawhalechina/DOPMC/blob/main/GUIDE.md)进行操作即可~
|
||||
Unser Team hat auch weitere Kurse erstellt! Schau dir an:
|
||||
|
||||
## 🙏 感谢每位贡献者
|
||||
[](https://github.com/walkinglabs/hands-on-modern-rl)
|
||||
|
||||
- [散步-项目负责人](https://github.com/sanbuphy) (Datawhale成员)
|
||||
- 方可-指导老师（Datawhale成员, 清华大学）
|
||||
- [Yerim Kang](https://github.com/yerim25)（实践项目部分-清华大学）
|
||||
- [赵芷霖](https://github.com/ChileenZ)（实践项目部分-清华大学）
|
||||
- [李亦萱](https://yixuan20.github.io/)（页面美术设计-清华大学）
|
||||
- 刘思怡（实践项目部分-清华大学）
|
||||
- [刘丽欣](https://github.com/liulx25xx)（实践项目部分-清华大学）
|
||||
- AI Vibe Coding 101 内测群完整给建议体验的小伙伴们
|
||||
**Hands-on Modern RL**: Ein Open-Source-Hands-on-Lehrplan, der die Luecke von grundlegenden RL-Konzepten zu LLM-Alignment, RLVR und fortgeschrittenen Agenten-Systemen schliesst.
|
||||
|
||||
### 特别感谢
|
||||
[](https://github.com/walkinglabs/learn-harness-engineering/tree/main)
|
||||
|
||||
- 感谢 [@Sm1les](https://github.com/Sm1les) 对本项目的帮助与支持
|
||||
- 感谢所有为本项目做出贡献的开发者们和支持点赞的朋友们 ❤️
|
||||
**Learn Harness Engineering**: Ein umfassender Leitfaden fuer Harness Engineering.
|
||||
|
||||
## 🤝 Mitmachen & Mitwirkende
|
||||
|
||||
- Wenn du ein Problem findest oder etwas siehst, das verbessert werden kann, oeffne gerne ein Issue. Wenn niemand antwortet, kannst du auch das [Datawhale-Supportteam](https://github.com/datawhalechina/DOPMC/blob/main/OP.md) kontaktieren.
|
||||
- Wenn du einen Beitrag leisten moechtest, oeffne einen Pull Request. Wenn niemand antwortet, kannst du auch das [Datawhale-Supportteam](https://github.com/datawhalechina/DOPMC/blob/main/OP.md) kontaktieren.
|
||||
- Wenn du ein neues Datawhale-Open-Source-Projekt starten moechtest, folge dem [Datawhale Open-Source-Projekt-Leitfaden](https://github.com/datawhalechina/DOPMC/blob/main/GUIDE.md).
|
||||
|
||||
### 🙏 Mitwirkende
|
||||
|
||||
- [Sanbu - Projektleitung](https://github.com/sanbuphy) (Datawhale-Mitglied)
|
||||
- Fang Ke - Mentor (Datawhale-Mitglied, Tsinghua-Universitaet)
|
||||
- [Yerim Kang](https://github.com/yerim25) (Praxisprojekte, Tsinghua-Universitaet)
|
||||
- [Zhilin Zhao](https://github.com/ChileenZ) (Praxisprojekte, Tsinghua-Universitaet)
|
||||
- [Yixuan Li](https://yixuan20.github.io/) (Visuelles Design, Tsinghua-Universitaet)
|
||||
- Siyi Liu (Praxisprojekte, Tsinghua-Universitaet)
|
||||
- [Lixin Liu](https://github.com/liulx25xx) (Praxisprojekte, Tsinghua-Universitaet)
|
||||
- Alle in der internen Testgruppe AI Vibe Coding 101, die Vorschlaege und Feedback geteilt haben
|
||||
|
||||
### Besonderer Dank
|
||||
|
||||
- Danke an [@Sm1les](https://github.com/Sm1les) fuer die Hilfe und Unterstuetzung bei diesem Projekt
|
||||
- Danke an alle Mitwirkenden und alle, die das Projekt mit Feedback und Sternen unterstuetzt haben ❤️
|
||||
|
||||
<div align="center">
|
||||
|
||||
|
||||
<a href="https://www.star-history.com/#datawhalechina/easy-vibe&type=timeline&legend=top-left">
|
||||
<picture>
|
||||
<source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=datawhalechina/easy-vibe&type=timeline&theme=dark&legend=top-left" />
|
||||
@@ -455,24 +419,23 @@ Easy-Vibe zeigt dir, wie daraus ein echtes Produkt wird.
|
||||
</a>
|
||||
</div>
|
||||
|
||||
## 📄 LICENSE
|
||||
## 📄 Lizenz
|
||||
|
||||
<div align="center">
|
||||
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">
|
||||
<img
|
||||
alt="知识共享许可协议"
|
||||
alt="Creative Commons License"
|
||||
style="border-width:0"
|
||||
src="https://img.shields.io/badge/license-CC%20BY--NC--SA%204.0-lightgrey"
|
||||
/>
|
||||
</a>
|
||||
<br />
|
||||
本作品采用
|
||||
Dieses Werk ist lizenziert unter der
|
||||
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">
|
||||
知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议
|
||||
</a>
|
||||
进行许可。
|
||||
Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License
|
||||
</a>.
|
||||
</div>
|
||||
|
||||
## Star History
|
||||
## Stern-Historie
|
||||
|
||||
[](https://www.star-history.com/#datawhalechina/easy-vibe&type=date&legend=top-left)
|
||||
|
||||
+78
-63
@@ -108,7 +108,7 @@
|
||||
<img src="https://raw.githubusercontent.com/datawhalechina/easy-vibe/main/assets/stories_image.png" alt="Share Your Vibe Story" width="80%" style="border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.15);">
|
||||
</a>
|
||||
<p style="margin-top: 15px; font-size: 1.1em; color: #666;">
|
||||
📝 <strong>Have your own vibe coding story?</strong>
|
||||
📝 <strong>Have your own vibe coding story?</strong>
|
||||
Submit it here and inspire others!
|
||||
</p>
|
||||
</div>
|
||||
@@ -142,21 +142,21 @@ 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](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/)
|
||||
<details>
|
||||
<summary>Past News</summary>
|
||||
|
||||
- **[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.
|
||||
|
||||
<details>
|
||||
<summary>Past News</summary>
|
||||
|
||||
- **[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.
|
||||
@@ -175,49 +175,47 @@ Easy-Vibe teaches you how to turn that into a real product.
|
||||
|
||||
## Your Learning Paths
|
||||
|
||||
### 🎮 I want to try it first (5-minute experience)
|
||||
### 🎮 I want a fast first win
|
||||
**Best for**: Everyone
|
||||
**What you will learn**: Your first AI coding experience with a Snake mini-game
|
||||
**What you will get**: Your first AI-built app in 5 minutes
|
||||
**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/learning-map/)
|
||||
[Start here](https://datawhalechina.github.io/easy-vibe/en/stage-1/ai-capabilities-through-games/)
|
||||
|
||||
### 💡 I have an idea I want to build
|
||||
### 💡 I want to turn an idea into a product prototype
|
||||
**Best for**: Beginners / product managers / founders
|
||||
**What you will learn**: AI IDE tools, requirement breakdown, page design, feature planning, prompting, prototype iteration
|
||||
**What you will get**: A demoable product prototype
|
||||
**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 a structured learning path
|
||||
**Best for**: Developers / advanced learners
|
||||
**What you will learn**: Frontend, backend, databases, AI integration, deployment, Claude Code workflow
|
||||
**What you will get**: The ability to ship a full-stack AI app independently
|
||||
### 🚀 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/)
|
||||
|
||||
### 🦞 I want to build an AI Agent
|
||||
**Best for**: Developers interested in AI agents
|
||||
**What you will learn**: OpenClaw assistant workflows, the Skills system, and automation
|
||||
**What you will get**: Your own command-line AI assistant
|
||||
### 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
|
||||
|
||||
[Learn OpenClaw](https://github.com/datawhalechina/hello-claw)
|
||||
[Go to advanced development](https://datawhalechina.github.io/easy-vibe/en/stage-3/)
|
||||
|
||||
### 📚 I want to browse reference material
|
||||
### 📚 I want reference material and fundamentals
|
||||
**Best for**: Everyone
|
||||
**What you will learn**: Computer fundamentals, AI principles, and 9 major knowledge areas
|
||||
**What you will get**: 80+ interactive reference topics
|
||||
**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 0 / Stage 1](https://datawhalechina.github.io/easy-vibe/en/stage-1/learning-map/)
|
||||
- If you already have development experience, start with [Stage 2](https://datawhalechina.github.io/easy-vibe/en/stage-2/)
|
||||
- If you want to jump directly into complex projects, go to [Stage 3](https://datawhalechina.github.io/easy-vibe/en/stage-3/)
|
||||
- If you want to learn AI agents, check out [Hello Claw](https://github.com/datawhalechina/hello-claw)
|
||||
|
||||
|
||||
- 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
|
||||
|
||||
@@ -230,28 +228,37 @@ Easy-Vibe teaches you how to turn that into a real product.
|
||||
| Section | Key Content |
|
||||
| :------ | :---------- |
|
||||
| [Learning Map](https://datawhalechina.github.io/easy-vibe/en/stage-1/learning-map/) | A guided overview of the full learning journey |
|
||||
| [In the AI era, if you can talk, 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 |
|
||||
| [Finding great ideas](https://datawhalechina.github.io/easy-vibe/en/stage-1/finding-great-idea/) | Learn how to discover and validate product ideas worth building |
|
||||
| [Introduction to AI IDE tools](https://datawhalechina.github.io/easy-vibe/en/stage-1/introduction-to-ai-ide/) | Learn to use an IDE and build simple local projects |
|
||||
| [Build your prototype](https://datawhalechina.github.io/easy-vibe/en/stage-1/building-prototype/) | Move from requirements to single-page and multi-page product prototypes |
|
||||
| [Add AI capabilities to your prototype](https://datawhalechina.github.io/easy-vibe/en/stage-1/integrating-ai-capabilities/) | Integrate text, image, and video AI features |
|
||||
| [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 industry application scenarios (B2B)](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-industry-scenarios/) | Understand how AI is applied across industries |
|
||||
| [AI consumer product inspiration (B2C)](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-c-consumer-scenarios/) | Explore product opportunities in consumer AI |
|
||||
| [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 Industry Application Scenarios (B-end)](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-industry-scenarios/) | Understand how AI is applied across industries |
|
||||
| [AI Consumer Scenarios Inspiration (C-end)](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-c-consumer-scenarios/) | 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](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 |
|
||||
|
||||
#### Appendix: Technical Solutions
|
||||
|
||||
| Section | Key Content |
|
||||
| :------ | :---------- |
|
||||
| [What to do when coding errors happen](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-b-common-errors/) | Common vibe coding issues and how to troubleshoot them |
|
||||
| [Comparison of seven AI coding tools](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial) | Compare major AI coding platforms through hands-on testing |
|
||||
| [Design a website with design and coding agents](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents) | Learn multi-agent collaboration in practice |
|
||||
| [What to do if you encounter errors](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-b-common-errors/) | Common vibe coding issues and how to troubleshoot them |
|
||||
| [Comparison of Seven AI Programming Tools](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial) | Compare major AI coding platforms through hands-on testing |
|
||||
| [Design Websites with Agents](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents) | Learn multi-agent collaboration in practice |
|
||||
|
||||
### II. Junior and Mid-Level Developers
|
||||
|
||||
@@ -259,32 +266,38 @@ Easy-Vibe teaches you how to turn that into a real product.
|
||||
|
||||
| Section | Key Content |
|
||||
| :------ | :---------- |
|
||||
| [Build your own asset-generation agent starting from Lovart](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/lovart-assets/) | Use Nanobanana and Lovart to generate high-quality visual assets and build a drawing agent that understands intent |
|
||||
| [Getting started with Figma and MasterGo](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/figma-mastergo/) | Organize information architecture and page structure with design tools |
|
||||
| [Build your first modern application: UI design](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/ui-design/) | Turn design drafts into component-based interfaces |
|
||||
| [UI guidelines and multi-product UI design](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/multi-product-ui/) | Extend a unified visual system across multiple products |
|
||||
| [Make interfaces beautiful with LLMs and Skills](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/llm-skills-beautiful/) | Use prompting and Skills plugins to generate distinctive, polished interfaces |
|
||||
| [Build Hogwarts portraits together](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/hogwarts-portraits/) | Create a frontend app from scratch that integrates AI capabilities |
|
||||
| [From design prototype to project code](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/design-to-code/) | Three practical paths to convert design prototypes into frontend code |
|
||||
| [Refresh your UI with modern component libraries](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/modern-component-library/) | Build more professional interfaces faster with modern component systems |
|
||||
| [Frontend 0: Build Your Own Asset-Production Agent with Lovart](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/lovart-assets/) | Use Nanobanana and Lovart to batch-generate visual assets and build a drawing agent with intent recognition |
|
||||
| [Frontend 1: Figma & MasterGo Basics](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/figma-mastergo/) | Learn the workflow from design drafts to implementation-ready UI thinking |
|
||||
| [Frontend 2: Build Your First Modern App - UI Design](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/ui-design/) | Learn the UI design foundations behind modern application interfaces |
|
||||
| [Frontend 3: UI Guidelines and Multi-Product Design](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/multi-product-ui/) | Improve consistency and aesthetics across multiple products with shared UI rules |
|
||||
| [Frontend 4: Make Interfaces Beautiful with LLMs and Skills](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/llm-skills-beautiful/) | Use prompts and plugins to make AI generate more polished, distinctive interfaces |
|
||||
| [Frontend 4: Let's Build Hogwarts Portraits](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/hogwarts-portraits/) | Build an interactive AI-image frontend project from scratch |
|
||||
| [Frontend 6: From Design Prototype to Project Code](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/design-to-code/) | Turn design prototypes into frontend code that can really run in the browser |
|
||||
| [Frontend 7: Upgrade Your UI with Modern Component Libraries](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/modern-component-library/) | Use component libraries to build professional interfaces faster |
|
||||
|
||||
#### Backend
|
||||
|
||||
| Section | Key Content |
|
||||
| :------ | :---------- |
|
||||
| [From databases to Supabase](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/database-supabase/) | Implement databases and APIs with Supabase and connect them to your frontend |
|
||||
| [Use LLMs to write API code and API docs](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/ai-interface-code/) | Generate backend code and documentation that is easier to read and test |
|
||||
| [Git and GitHub workflow](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/git-workflow/) | Manage versions and collaborate effectively with Git workflows |
|
||||
| [How to deploy web applications](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/zeabur-deployment/) | Deploy apps with platforms like CloudBase, Vercel, and Zeabur |
|
||||
| [CLI AI coding tools](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/modern-cli/) | Build a personal engineering workflow with terminal-based AI tools |
|
||||
| [How to integrate Stripe and payment systems](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/stripe-payment/) | Add payment flows and basic billing capabilities |
|
||||
| [Capstone: build your first modern full-stack application](https://datawhalechina.github.io/easy-vibe/en/stage-2/assignments/fullstack-app/) | Combine frontend, backend, and payments into a launch-ready web product |
|
||||
| [Backend 1: Learn Git and GitHub](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/git-workflow/) | Master core version control operations and collaboration workflows with Git |
|
||||
| [Backend 2: From Database to Supabase](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/database-supabase/) | Learn relational database basics and use Supabase as a modern BaaS platform |
|
||||
| [Backend 3: Backend API Design and Development](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/ai-interface-code/) | Use AI to assist API design, backend code generation, and API documentation |
|
||||
| [Backend 4: Ship Your Product Prototype](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/zeabur-deployment/) | Quickly deploy full-stack applications to the cloud with Zeabur |
|
||||
| [Backend 5: From IDEs to CLI AI Coding Tools](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/modern-cli/) | Explore terminal-first AI coding workflows for modern development |
|
||||
| [Backend 6: Integrate Stripe and Other Billing Systems](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/stripe-payment/) | Add monetization with payment and billing capabilities |
|
||||
|
||||
#### Major Projects
|
||||
|
||||
| Section | Key Content |
|
||||
| :------ | :---------- |
|
||||
| [Major Project 1: Your First SaaS Full-Stack App - AI Copywriting Website](https://datawhalechina.github.io/easy-vibe/en/stage-2/assignments/fullstack-app/) | Build an AI marketing copy workspace with login, generation, billing, and admin management |
|
||||
| [Major Project 2: Online Exam and Management System](https://datawhalechina.github.io/easy-vibe/en/stage-2/assignments/modern-frontend-trae/) | Build an online exam system with question generation, test-taking flows, and admin tools |
|
||||
|
||||
#### AI Capabilities Appendix
|
||||
|
||||
| Section | Key Content |
|
||||
| :------ | :---------- |
|
||||
| [Getting started with Dify and knowledge base integration](https://datawhalechina.github.io/easy-vibe/en/stage-2/ai-capabilities/dify-knowledge-base/) | Build utility products with Dify workflows and basic RAG |
|
||||
| [AI 1: Dify Basics & Knowledge Base Integration](https://datawhalechina.github.io/easy-vibe/en/stage-2/ai-capabilities/dify-knowledge-base/) | Learn to build AI applications with Dify and integrate private knowledge bases |
|
||||
|
||||
### III. Advanced Developers
|
||||
|
||||
@@ -295,19 +308,23 @@ Easy-Vibe teaches you how to turn that into a real product.
|
||||
| [Getting started with Claude Code](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/basics/) | Installation, setup, fundamentals, and useful commands |
|
||||
| [Claude Code MCP guide](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/mcp/) | Connect Claude Code to GitHub, databases, APIs, and other services through MCP |
|
||||
| [Claude Code Skills guide](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/skills/) | Package expertise into reusable skills you can use again and again |
|
||||
| [Claude Code workflow best practices](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/workflow/) | Best practices for refactoring, code review, and daily development |
|
||||
| [How to keep Claude Code working for long-running tasks](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/long-running-tasks/) | Design long-running tasks so coding tools can keep working until the job is done |
|
||||
| [Claude Agent Teams guide](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/agent-teams/) | Coordinate multiple AI instances like a real development team |
|
||||
| [Claude Code Superpowers for engineering-grade development](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/superpowers/) | Help AI produce engineering-grade code with TDD and best practices |
|
||||
| [How to keep Claude Code working for long-running tasks](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/long-running-tasks/) | Design long-running tasks so coding tools can keep working until the job is done |
|
||||
| [Claude Code workflow best practices](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/workflow/) | Best practices for refactoring, code review, and daily development |
|
||||
| [Claude Code remote development on mobile](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/mobile-development/) | Use Claude Code beyond the desktop and build a productive remote workflow on mobile devices |
|
||||
| [Claude Agent SDK complete guide](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/claude-agent-sdk/) | Build custom agent workflows and integrate Claude into your own tools with the SDK |
|
||||
| [From vibe coding to spec coding](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/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](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/choose-platform/) | Compare app forms and choose the right platform based on users, scenarios, and delivery goals |
|
||||
| [Build a WeChat Mini Program](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/wechat-miniprogram/) | Understand the ecosystem and ship a frontend mini program from template to launch |
|
||||
| [Build a WeChat Mini Program with backend](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/wechat-miniprogram-backend/) | Add backend logic and databases to complete the full business loop |
|
||||
| [Build an Android app](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/android-app/) | Use Expo and related tools to build Android apps across web and native |
|
||||
| [Build an iOS app](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/ios-app/) | Use Expo and related tools to build iOS apps across web and native |
|
||||
| [Build an Android app](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/android-app/) | Learn Android app development with a modern native workflow |
|
||||
| [Build an iOS app](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/ios-app/) | Learn iOS app development and the conventions of the Apple ecosystem |
|
||||
| [Build a local PWA app](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/pwa-local-app/) | Turn a website into a real app with offline support, push, and installation |
|
||||
| [Build a browser AI assistant extension](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/browser-ai-extension/) | Create a Chrome extension that summarizes any page with either cloud APIs or built-in AI |
|
||||
| [Build an Electron desktop app](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/electron-voice-to-text/) | Build a voice-to-text desktop app with Electron for three platforms |
|
||||
@@ -388,8 +405,6 @@ Our team has also created other courses! Check them out:
|
||||
- Thanks to every contributor and everyone who supported the project with feedback and stars ❤️
|
||||
|
||||
<div align="center">
|
||||
|
||||
|
||||
<a href="https://www.star-history.com/#datawhalechina/easy-vibe&type=timeline&legend=top-left">
|
||||
<picture>
|
||||
<source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=datawhalechina/easy-vibe&type=timeline&theme=dark&legend=top-left" />
|
||||
|
||||
+232
-269
@@ -3,24 +3,26 @@
|
||||
|
||||
<img src="../../assets/easy-vibe-logo-hd.svg" alt="Easy-Vibe Logo" width="300">
|
||||
|
||||
<img src="../../assets/banner.png" alt="Banner de Easy-Vibe" width="100%">
|
||||
|
||||
<p align="center" style="font-size: 1.2em; color: #666; margin: 20px 0;">
|
||||
Empieza ya y vibea con nosotros. Si puedes hablar, puedes crear apps.<br>
|
||||
Empieza ya y vibrea con nosotros. Si puedes hablar, puedes crear apps.<br>
|
||||
<span style="font-size: 0.9em; color: #888;">直接上手，一起 vibe！会说话就会做应用。</span>
|
||||
</p>
|
||||
|
||||
<a href="https://trendshift.io/repositories/22079" target="_blank"><img src="https://trendshift.io/api/badge/repositories/22079" alt="datawhalechina/easy-vibe | Trendshift" style="width: 250px; height: 55px;" width="250" height="55"/></a>
|
||||
|
||||
<p align="center">
|
||||
🚀 <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">Empezar ahora</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/en/appendix/">Tutorial interactivo</a> · 🦞 <a href="https://github.com/datawhalechina/hello-claw">Aprender OpenClaw</a><br>
|
||||
🚀 <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">Empezar ahora</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/en/appendix/">Tutorial interactivo</a> · 🦞 <a href="https://github.com/datawhalechina/hello-claw">Aprender OpenClaw</a> · 📖 <a href="#table-of-contents">Tabla de contenidos</a><br>
|
||||
<span style="font-size: 0.85em; color: #888;">🚀 <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">开始体验</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/">交互式教程</a> · 🦞 <a href="https://github.com/datawhalechina/hello-claw">学习 OpenClaw</a> · 📖 <a href="#table-of-contents">查看目录</a></span>
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
<a href="https://datawhalechina.github.io/easy-vibe/welcome.html">Empezar a leer</a> ·
|
||||
<a href="https://datawhalechina.github.io/easy-vibe/welcome.html">Leer en línea</a> ·
|
||||
<a href="#-content-navigation">Mapa de aprendizaje</a><br>
|
||||
<span style="font-size: 0.85em; color: #888;">
|
||||
<a href="https://datawhalechina.github.io/easy-vibe/welcome.html">开始阅读</a> ·
|
||||
<a href="#-内容导航">学习地图</a>
|
||||
<a href="#-content-navigation">学习地图</a>
|
||||
</span>
|
||||
</p>
|
||||
|
||||
@@ -52,72 +54,89 @@
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/gif-header.png" width="100%">
|
||||
<br>
|
||||
<strong>新手专属学习地图</strong>
|
||||
<strong>Un mapa de aprendizaje para principiantes</strong>
|
||||
<br>
|
||||
<sub>零基础专属指引，清晰规划路径，告别“学了忘”</sub>
|
||||
<sub>Guía clara desde cero, para que dejes de "aprender y olvidar"</sub>
|
||||
</td>
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/gif-tutorial.png" width="100%">
|
||||
<br>
|
||||
<strong>手把手图文教程</strong>
|
||||
<strong>Tutoriales visuales paso a paso</strong>
|
||||
<br>
|
||||
<sub>保姆级图文详解，如同私教在旁，跟着做就能学会</sub>
|
||||
<sub>Explicaciones detalladas que parecen aprender con un tutor privado</sub>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/gif-ide.gif" width="100%">
|
||||
<br>
|
||||
<strong>沉浸式模拟编程</strong>
|
||||
<strong>Programación simulada inmersiva</strong>
|
||||
<br>
|
||||
<sub>虚拟鼠标自动导览，带你快速上手 IDE 核心用法</sub>
|
||||
<sub>Un ratón virtual te guía para aprender rápidamente el flujo de trabajo del IDE</sub>
|
||||
</td>
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/gif-diffusion.gif" width="100%">
|
||||
<br>
|
||||
<strong>看得见的 AI 原理</strong>
|
||||
<strong>Principios de IA visibles</strong>
|
||||
<br>
|
||||
<sub>算法原理动画化，一眼看懂 AI 如何“画”出图片</sub>
|
||||
<sub>Explicaciones animadas que facilitan ver cómo la IA genera imágenes</sub>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/gif-rag.gif" width="100%">
|
||||
<br>
|
||||
<strong>像玩游戏一样学 RAG</strong>
|
||||
<strong>Aprende RAG como en un juego</strong>
|
||||
<br>
|
||||
<sub>独家交互组件，点击即可看清 RAG 数据流向</sub>
|
||||
<sub>Componentes interactivos que te permiten hacer clic en el flujo completo de datos RAG</sub>
|
||||
</td>
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/git-terminal.gif" width="100%">
|
||||
<br>
|
||||
<strong>可视化终端原理</strong>
|
||||
<strong>Conceptos de terminal visuales</strong>
|
||||
<br>
|
||||
<sub>命令行操作可视化，直观展示后台逻辑与原理</sub>
|
||||
<sub>El comportamiento de la línea de comandos se vuelve intuitivo al visualizar la lógica subyacente</sub>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div align="center">
|
||||
<h3>⭐ 欢迎 <a href="https://github.com/datawhalechina/easy-vibe" style="color: #d0cd16ff;">点击此处Star</a> 加速更新 ❤️</h3>
|
||||
<h3>⭐ <a href="https://github.com/datawhalechina/easy-vibe" style="color: #d0cd16ff;">Marca con una estrella el repositorio aquí</a> para ayudar a acelerar las actualizaciones ❤️</h3>
|
||||
</div>
|
||||
|
||||
<div align="center" style="margin: 30px 0;">
|
||||
<a href="https://github.com/datawhalechina/easy-vibe/issues/new?template=story_submission.md">
|
||||
<img src="https://raw.githubusercontent.com/datawhalechina/easy-vibe/main/assets/stories_image.png" alt="Share Your Vibe Story" width="80%" style="border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.15);">
|
||||
<img src="https://raw.githubusercontent.com/datawhalechina/easy-vibe/main/assets/stories_image.png" alt="Comparte tu historia Vibe" width="80%" style="border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.15);">
|
||||
</a>
|
||||
<p style="margin-top: 15px; font-size: 1.1em; color: #666;">
|
||||
📝 <strong>Have your own vibe coding story?</strong>
|
||||
Submit it here and inspire others!
|
||||
📝 <strong>¿Tienes tu propia historia de vibe coding?</strong>
|
||||
¡Envíala aquí e inspira a otros!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
## 为什么需要 Easy-Vibe
|
||||
## Tabla de contenidos
|
||||
|
||||
Quieres una app para controlar ingresos y gastos? Solo dilo.
|
||||
- [Por qué Easy-Vibe](#por-qué-easy-vibe)
|
||||
- [Noticias](#-news)
|
||||
- [Para quién es esto](#para-quién-es-esto)
|
||||
- [Tus rutas de aprendizaje](#tus-rutas-de-aprendizaje)
|
||||
- [Sugerencias de estudio](#sugerencias-de-estudio)
|
||||
- [I. Entrada para principiantes](#i-entrada-para-principiantes)
|
||||
- [II. Desarrolladores junior e intermedios](#ii-desarrolladores-junior-e-intermedios)
|
||||
- [III. Desarrolladores avanzados](#iii-desarrolladores-avanzados)
|
||||
- [Base de conocimiento del apéndice](#-base-de-conocimiento-del-apéndice)
|
||||
- [Cómo aprender](#️-cómo-aprender)
|
||||
- [Ejecutar localmente](#-ejecutar-localmente)
|
||||
- [Otros cursos](#otros-cursos)
|
||||
- [Contribuir y colaboradores](#-contribuir-y-colaboradores)
|
||||
- [LICENCIA](#-licencia)
|
||||
|
||||
Necesitas un sistema de reservas con inicio de sesion por WeChat? Solo dilo.
|
||||
## Por qué Easy-Vibe
|
||||
|
||||
Quieres un blog con comentarios? Solo dilo.
|
||||
¿Quieres una aplicación para controlar ingresos y gastos? Solo dilo.
|
||||
|
||||
¿Necesitas un sistema de reservas con inicio de sesión por WeChat? Solo dilo.
|
||||
|
||||
¿Quieres un blog con comentarios? Solo dilo.
|
||||
|
||||
En la era de la IA, programar empieza por describir lo que quieres.
|
||||
|
||||
@@ -130,317 +149,262 @@ Easy-Vibe te enseña a convertir eso en un producto real.
|
||||
- **[2026-03-26]** 🚀 **Actualización masiva de contenido práctico de la Etapa 2**: Se completó el proyecto final SaaS "[Tu primera aplicación full-stack SaaS: Generador de copywriting](https://datawhalechina.github.io/easy-vibe/en/stage-2/assignments/fullstack-app/)" y se amplió sustancialmente la sección "[Cómo integrar Stripe y sistemas de pago](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/stripe-payment/)".
|
||||
- **[2026-03-25]** 📚 **Nuevo apéndice: Investigación de usuarios y validación de requisitos**: Se agregaron cuatro nuevos artículos que cubren la búsqueda de ideas, el modelo Double Diamond, Jobs to Be Done y The Mom Test para ayudar a los principiantes a descubrir y validar ideas de productos. [👉 Leer el apéndice](https://datawhalechina.github.io/easy-vibe/en/appendix/)
|
||||
- **[2026-03-25]** 📚 **Documentación en inglés completamente actualizada**: La Etapa 2 (Desarrollo full-stack) y la Etapa 3 (Desarrollo avanzado) ya están disponibles completamente en inglés. [👉 Empezar a aprender](https://datawhalechina.github.io/easy-vibe/en/stage-2/)
|
||||
<details>
|
||||
<summary>Noticias Pasadas</summary>
|
||||
|
||||
- **[2026-03-02]** 🦞 **Soporte amigable para OpenClaw y AI Agent**: Se agregó `llms.txt` para que OpenClaw, Claude, Cursor, Trae y otros agentes de IA puedan comprender rápidamente la estructura del repositorio y encontrar el contenido tutorial adecuado.
|
||||
- **[2026-03-01]** La sección de [Desarrollo Avanzado](https://datawhalechina.github.io/easy-vibe/en/stage-3/) ha sido actualizada con guías detalladas para Claude Code, incluyendo MCP, Skills, Agent Teams y más, junto con ocho tutoriales de proyectos multiplataforma.
|
||||
- **[2026-02-25]** Actualizada la [Base de Conocimientos del Apéndice](https://datawhalechina.github.io/easy-vibe/en/appendix/), ahora cubre 9 áreas de conocimiento y más de 80 temas interactivos.
|
||||
- **[2026-01-27]** Agregados tutoriales de desarrollo de aplicaciones para Android e iOS.
|
||||
- **[2026-01-19]** Lanzadas demos interactivas para Prompt Engineering, historia de la IA, diseño de autenticación, principios de Git y más.
|
||||
|
||||
<details>
|
||||
<summary>Noticias Pasadas</summary>
|
||||
|
||||
- **[2026-01-16]** Reorganizada la estructura del proyecto y establecido formalmente el capítulo de entrada para principiantes.
|
||||
- **[2026-01-14]** Completada una gran actualización de los documentos de prototipado de productos de la Etapa 1.
|
||||
- **[2026-01-13]** Refactorizada la arquitectura de documentación y habilitado completamente el soporte multilenguaje (i18n).
|
||||
- **[2026-01-01]** Lanzado el mapa de aprendizaje principal del proyecto.
|
||||
</details>
|
||||
|
||||
## 适合谁
|
||||
## Para quién es esto
|
||||
|
||||
- **零基础爱好者**：先做出第一个作品，再理解怎么做
|
||||
- **产品经理 / 创业者**：快速验证想法，低成本做 MVP
|
||||
- **学生**：建立 AI 时代的实战技能
|
||||
- **初级开发者**：补齐从想法到上线的完整开发链路
|
||||
- **中高级开发者**：掌握 AI 协作开发、复杂项目实战与效率升级
|
||||
- **Principiantes sin experiencia**: Construye tu primer proyecto primero, luego entiende cómo funciona
|
||||
- **Product managers / emprendedores**: Valida ideas rápidamente y construye MVPs a bajo costo
|
||||
- **Estudiantes**: Desarrolla habilidades prácticas para la era de la IA
|
||||
- **Desarrolladores junior**: Aprende el camino completo desde la idea hasta el lanzamiento
|
||||
- **Desarrolladores de nivel medio y senior**: Mejora tu flujo de trabajo de colaboración con IA para proyectos complejos
|
||||
|
||||
|
||||
|
||||
## 你的学习路径
|
||||
## Tus rutas de aprendizaje
|
||||
|
||||
### 🎮 我想先试试（5分钟体验）
|
||||
**适合人群**：所有人
|
||||
**学什么**：AI 编程初体验、贪吃蛇小游戏
|
||||
**你会得到**：5 分钟做出第一个 AI 应用
|
||||
### 🎮 Quiero un primer logro rápido
|
||||
**Ideal para**: Todos
|
||||
**Qué aprenderás**: Qué se siente realmente al programar con IA a través de un ejemplo práctico, simple y concreto
|
||||
**Qué obtendrás**: Una primera impresión clara del vibe coding y cómo trabajar con IA mediante conversación
|
||||
|
||||
[开始体验](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/learning-map/)
|
||||
[Empieza aquí](https://datawhalechina.github.io/easy-vibe/en/stage-1/ai-capabilities-through-games/)
|
||||
|
||||
### 💡 我有个想法要实现
|
||||
**适合人群**：零基础/产品经理/创业者
|
||||
**学什么**：AI IDE 工具、需求拆解、页面设计、功能规划、提示词写法、原型迭代
|
||||
**你会得到**：一个可演示的产品原型
|
||||
### 💡 Quiero convertir una idea en un prototipo de producto
|
||||
**Ideal para**: Principiantes / product managers / emprendedores
|
||||
**Qué aprenderás**: Hoja de ruta de aprendizaje, herramientas AI IDE, validación de ideas, prototipado, integración de capacidades de IA e iteración de demos completas
|
||||
**Qué obtendrás**: Un prototipo de producto con IA que puedes mostrar realmente a usuarios o compañeros de equipo
|
||||
|
||||
[开始学习](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/learning-map/)
|
||||
[Empezar a aprender](https://datawhalechina.github.io/easy-vibe/en/stage-1/learning-map/)
|
||||
|
||||
### 🚀 我想系统学习
|
||||
**适合人群**：开发者/进阶学习者
|
||||
**学什么**：前端、后端、数据库、AI 集成、部署运维、Claude Code 开发技巧
|
||||
**你会得到**：独立完成一个可上线的全栈 AI 应用
|
||||
### 🚀 Quiero construir productos full-stack de principio a fin
|
||||
**Ideal para**: Desarrolladores junior / indie hackers / aprendiz avanzados
|
||||
**Qué aprenderás**: Flujos de trabajo frontend, diseño a código, bases de datos, APIs backend, despliegue, facturación y proyectos principales
|
||||
**Qué obtendrás**: La capacidad de lanzar de forma independiente aplicaciones web modernas con IA
|
||||
|
||||
[开始学习](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/)
|
||||
[Empezar a aprender](https://datawhalechina.github.io/easy-vibe/en/stage-2/)
|
||||
|
||||
### 🦞 我想构建 AI Agent
|
||||
**适合人群**：对 AI Agent 感兴趣的开发者
|
||||
**学什么**：OpenClaw AI 助理、Skills 系统、自动化工作流
|
||||
**你会得到**：一个属于你的命令行 AI 助理
|
||||
### AI-Native: Quiero flujos de trabajo avanzados con Claude Code y agentes
|
||||
**Ideal para**: Desarrolladores interesados en ingeniería AI-Native
|
||||
**Qué aprenderás**: Claude Code, MCP, Skills, Agent Teams, tareas de larga duración, Spec Coding y entrega de aplicaciones multiplataforma
|
||||
**Qué obtendrás**: Un flujo de trabajo más robusto para desarrollo asistido por IA complejo y automatización
|
||||
|
||||
[开始学习](https://github.com/datawhalechina/hello-claw)
|
||||
[Ir a desarrollo avanzado](https://datawhalechina.github.io/easy-vibe/en/stage-3/)
|
||||
|
||||
### 📚 我想查资料
|
||||
**适合人群**：所有人
|
||||
**学什么**：计算机基础、AI 原理、9 大知识领域
|
||||
**你会得到**：80+ 交互式专题资料
|
||||
### 📚 Quiero material de referencia y fundamentos
|
||||
**Ideal para**: Todos
|
||||
**Qué aprenderás**: Fundamentos de computación, conceptos básicos frontend/backend, infraestructura, principios de IA y prácticas de ingeniería
|
||||
**Qué obtendrás**: Una base de conocimiento de referencia a largo plazo que cubre 9 áreas de conocimiento principales
|
||||
|
||||
[查看知识库](https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/)
|
||||
[Explorar la base de conocimiento](https://datawhalechina.github.io/easy-vibe/en/appendix/)
|
||||
|
||||
## 学习建议
|
||||
## Sugerencias de estudio
|
||||
|
||||
- 零基础、产品经理、创业者：从 [第一阶段](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/learning-map/) 开始
|
||||
- 有开发经验：从 [第二阶段](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/) 开始
|
||||
- 想直接做复杂项目：进入 [第三阶段](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/)
|
||||
- 想学 AI Agent：看 [Hello Claw](https://github.com/datawhalechina/hello-claw)
|
||||
- Si eres principiante, product manager o emprendedor, empieza con la [Etapa 1](https://datawhalechina.github.io/easy-vibe/en/stage-1/learning-map/)
|
||||
- Si quieres pasar de prototipos a entrega full-stack, empieza con la [Etapa 2](https://datawhalechina.github.io/easy-vibe/en/stage-2/)
|
||||
- Si quieres flujos de trabajo avanzados con Claude Code o proyectos multiplataforma, ve a la [Etapa 3](https://datawhalechina.github.io/easy-vibe/en/stage-3/)
|
||||
- Si te bloquean conceptos o te falta conocimiento previo, usa la [Base de Conocimiento del Apéndice](https://datawhalechina.github.io/easy-vibe/en/appendix/)
|
||||
|
||||
### 📖 内容导航
|
||||
### 📖 Navegación de contenidos
|
||||
|
||||
<div align="center">
|
||||
<img src="../../assets/readme-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;"/>
|
||||
<img src="../../assets/readme-image1.png" alt="Mapa de aprendizaje" width="70%" style="border-radius: 10px; box-shadow: 0 8px 20px rgba(45,55,72,0.3); margin: 15px 0;"/>
|
||||
</div>
|
||||
|
||||
### 一、零基础入门
|
||||
### I. Entrada para principiantes
|
||||
|
||||
| 章节 | 关键内容 |
|
||||
| :----------------------------------------------------------------------------------- | :------------------------------------------------ |
|
||||
| [学习地图](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/learning-map/) | 整体学习路径导览 |
|
||||
| [AI 时代，会说话就会编程](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/ai-capabilities-through-games/) | 通过贪吃蛇等案例初步感受 AI 编程的能力 |
|
||||
| [寻找好想法](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/finding-great-idea/) | 学会寻找和验证产品想法，找到值得做的项目 |
|
||||
| [认识 AI IDE 工具](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/introduction-to-ai-ide/) | 学会使用 IDE，在本地制作小游戏 |
|
||||
| [动手做出原型](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/building-prototype/) | 从需求分析、AI 生成单页面，再到生成多页面产品原型 |
|
||||
| [给原型加上 AI 能力](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/integrating-ai-capabilities/) | 学会接入常见 AI 能力（文本、图片、视频） |
|
||||
| [完整项目实战](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/complete-project-practice/) | 模拟真实场景、接受用户反馈迭代，完整化项目 |
|
||||
| Sección | Contenido clave |
|
||||
| :------ | :---------- |
|
||||
| [Mapa de aprendizaje](https://datawhalechina.github.io/easy-vibe/en/stage-1/learning-map/) | Una visión general guiada de todo el recorrido de aprendizaje |
|
||||
| [La era de la IA: Si puedes hablar, puedes programar](https://datawhalechina.github.io/easy-vibe/en/stage-1/ai-capabilities-through-games/) | Ten tu primer contacto con la programación con IA a través de ejemplos como Snake |
|
||||
| [Domina las herramientas de programación con IA](https://datawhalechina.github.io/easy-vibe/en/stage-1/introduction-to-ai-ide/) | Aprende cómo funcionan las herramientas AI IDE y construye proyectos locales simples con ellas |
|
||||
| [Encuentra grandes ideas](https://datawhalechina.github.io/easy-vibe/en/stage-1/finding-great-idea/) | Aprende a descubrir y validar ideas de productos que valgan la pena construir |
|
||||
| [Construye prototipos de producto](https://datawhalechina.github.io/easy-vibe/en/stage-1/building-prototype/) | Avanza desde los requisitos hasta prototipos de producto de una o múltiples páginas |
|
||||
| [Integra capacidades de IA](https://datawhalechina.github.io/easy-vibe/en/stage-1/integrating-ai-capabilities/) | Integra funciones de IA de texto, imagen y video |
|
||||
| [Práctica de proyecto completo](https://datawhalechina.github.io/easy-vibe/en/stage-1/complete-project-practice/) | Simula escenarios reales, recopila comentarios de usuarios e itera en un proyecto completo |
|
||||
|
||||
#### 附录：业务思维
|
||||
#### Apéndice: Pensamiento de producto y negocio
|
||||
|
||||
| 章节 | 关键内容 |
|
||||
| :----------------------------------------------------------------------------------- | :----------------------------------------- |
|
||||
| [产品思维与方案设计](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-a-product-thinking/) | 从零到一做产品需要考虑的思维框架 |
|
||||
| [AI 行业应用场景参考 (B端)](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-industry-scenarios/) | 了解 AI 在不同产业的应用场景 |
|
||||
| [AI 消费场景灵感参考 (C端)](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-c-consumer-scenarios/) | 探索 AI 在消费级产品中的应用场景 |
|
||||
| Sección | Contenido clave |
|
||||
| :------ | :---------- |
|
||||
| [Pensamiento de producto y diseño de soluciones](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-a-product-thinking/) | Marcos fundamentales para ir de cero a uno con un producto |
|
||||
| [Escenarios de aplicación de IA en la industria (B2B)](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-industry-scenarios/) | Comprende cómo se aplica la IA en diferentes industrias |
|
||||
| [Inspiración de escenarios de IA para consumidores (B2C)](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-c-consumer-scenarios/) | Explora oportunidades de productos en IA de consumo |
|
||||
|
||||
#### 附录：技术方案
|
||||
#### Apéndice: Investigación de usuarios y validación de requisitos
|
||||
|
||||
| 章节 | 关键内容 |
|
||||
| :---------------------------------------------------------------------------------------------------------------------- | :----------------------------------------- |
|
||||
| [写代码时遇到错误怎么办](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-b-common-errors/) | vibe coding 中的常见错误及排查方法 |
|
||||
| [七款 AI 编程工具对比](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial) | 对比测试主流 AI 编程平台 |
|
||||
| [用设计和编程 Agent 设计网站](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents) | 学习如何使用 AI 智能体协同工作 |
|
||||
| Sección | Contenido clave |
|
||||
| :------ | :---------- |
|
||||
| [Dónde encontrar ideas: 3 fuentes de referencia que funcionan mejor para principiantes](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-idea-sources/) | Construye un flujo confiable para encontrar oportunidades de productos concretas |
|
||||
| [Double Diamond: primero haz lo correcto, luego hazlo bien](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-double-diamond/) | Usa un proceso estructurado para pasar de la inspiración dispersa a una dirección viable |
|
||||
| [Usa Jobs to Be Done para descubrir lo que los usuarios realmente quieren](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-jobs-to-be-done/) | Analiza los objetivos de los usuarios a través de tareas reales en lugar de solicitudes de funciones superficiales |
|
||||
| [The Mom Test: un método de entrevista a usuarios para validar la demanda](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-mom-test/) | Aprende a hacer mejores preguntas y evitar comentarios falsos positivos |
|
||||
|
||||
### 二、初中级开发工程师
|
||||
#### Apéndice: Soluciones técnicas
|
||||
|
||||
#### 前端部分
|
||||
| Sección | Contenido clave |
|
||||
| :------ | :---------- |
|
||||
| [Qué hacer si encuentras errores](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-b-common-errors/) | Problemas comunes de vibe coding y cómo solucionarlos |
|
||||
| [Comparación de siete herramientas de programación con IA](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial) | Compara las principales plataformas de programación con IA mediante pruebas prácticas |
|
||||
| [Diseña sitios web con agentes](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents) | Aprende la colaboración multi-agente en la práctica |
|
||||
|
||||
| 章节 | 关键内容 |
|
||||
| :--------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------- |
|
||||
| [从Lovart出发，搭建自己的素材生产Agent](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/frontend/lovart-assets/) | 从零开始，利用Nanobanana和Lovart批量生成高质量的设计素材，并动手构建一个能意图识别的绘图Agent |
|
||||
| [Figma 与 MasterGo 入门](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/frontend/figma-mastergo/) | 用设计工具梳理信息架构和页面结构，为前端实现打基础 |
|
||||
| [构建第一个现代应用程序-UI 设计](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/frontend/ui-design/) | 基于设计稿完成组件化界面，实现从设计到代码的第一条链路 |
|
||||
| [参考 UI 设计规范与多产品 UI 设计](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/frontend/multi-product-ui/) | 围绕统一主视觉扩展多产品界面，练习系统化设计能力 |
|
||||
| [用 LLM 和 Skills 让界面变好看](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/frontend/llm-skills-beautiful/) | 用提示词和 Skills 插件让 AI 生成美观独特的界面 |
|
||||
| [一起做霍格沃茨画像](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/frontend/hogwarts-portraits/) | 从 0 到 1 做出接入 AI 能力的前端应用，串联设计与开发 |
|
||||
| [从设计原型到项目代码](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/frontend/design-to-code/) | 三种路径将设计工具中的原型转化为前端代码 |
|
||||
| [使用现代组件库更新你的界面](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/frontend/modern-component-library/) | 用组件库快速构建专业级界面，统一风格、提升开发效率 |
|
||||
### II. Desarrolladores junior e intermedios
|
||||
|
||||
#### 后端开发部分
|
||||
#### Frontend
|
||||
|
||||
| 章节 | 关键内容 |
|
||||
| :------------------------------------------------------------------------------------------------- | :---------------------------------------------------------- |
|
||||
| [从数据库到 Supabase](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/backend/database-supabase/) | 在 Supabase 上落地数据库和 API，打通数据模型与前端页面 |
|
||||
| [大模型辅助编写接口代码与接口文档](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/backend/ai-interface-code/) | 用大模型协助生成接口与数据库文档及代码，实现可读可测的后端 |
|
||||
| [Git 和 GitHub 工作流](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/backend/git-workflow/) | 在 Git 工作流中管理代码，进行版本控制和协作 |
|
||||
| [如何部署 Web 应用](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/backend/zeabur-deployment/) | 使用 CloudBase、Vercel、Zeabur 等平台部署应用上线 |
|
||||
| [CLI AI 编程工具](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/backend/modern-cli/) | 使用 CLI 类 AI 编程工具加速开发与调试，形成个人工程化工作流 |
|
||||
| [如何集成 Stripe 等收费系统](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/backend/stripe-payment/) | 接入支付系统，完成收费链路与基础结算流程 |
|
||||
| [大作业：构建第一个现代应用程序-全栈应用](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/assignments/copywriting-platform-supabase/) | 综合前端、后端与支付模块，完成可上线的全栈 Web 应用 |
|
||||
| Sección | Contenido clave |
|
||||
| :------ | :---------- |
|
||||
| [Frontend 0: Construye tu propio agente de producción de recursos con Lovart](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/lovart-assets/) | Usa Nanobanana y Lovart para generar recursos visuales por lotes y construir un agente de dibujo con reconocimiento de intenciones |
|
||||
| [Frontend 1: Conceptos básicos de Figma y MasterGo](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/figma-mastergo/) | Aprende el flujo de trabajo desde borradores de diseño hasta un pensamiento UI listo para implementar |
|
||||
| [Frontend 2: Construye tu primera aplicación moderna - Diseño UI](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/ui-design/) | Aprende los fundamentos de diseño UI detrás de las interfaces de aplicaciones modernas |
|
||||
| [Frontend 3: Guías de UI y diseño multi-producto](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/multi-product-ui/) | Mejora la consistencia y estética de múltiples productos con reglas UI compartidas |
|
||||
| [Frontend 4: Haz interfaces hermosas con LLMs y Skills](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/llm-skills-beautiful/) | Usa prompts y plugins para que la IA genere interfaces más pulidas y distintivas |
|
||||
| [Frontend 4: Construyamos retratos de Hogwarts](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/hogwarts-portraits/) | Construye un proyecto frontend interactivo de imágenes con IA desde cero |
|
||||
| [Frontend 6: De prototipo de diseño a código de proyecto](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/design-to-code/) | Convierte prototipos de diseño en código frontend que realmente funciona en el navegador |
|
||||
| [Frontend 7: Actualiza tu UI con bibliotecas de componentes modernas](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/modern-component-library/) | Usa bibliotecas de componentes para construir interfaces profesionales más rápido |
|
||||
|
||||
#### AI 能力附录
|
||||
#### Backend
|
||||
|
||||
| 章节 | 关键内容 |
|
||||
| :------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------- |
|
||||
| [Dify 入门与知识库集成](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/ai-capabilities/dify-knowledge-base/) | 用 Dify Workflow 与基础 RAG 搭建工具类产品，为后续应用升级打样 |
|
||||
| Sección | Contenido clave |
|
||||
| :------ | :---------- |
|
||||
| [Backend 1: Aprende Git y GitHub](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/git-workflow/) | Domina las operaciones de control de versiones y los flujos de colaboración con Git |
|
||||
| [Backend 2: De base de datos a Supabase](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/database-supabase/) | Aprende los fundamentos de bases de datos relacionales y usa Supabase como plataforma BaaS moderna |
|
||||
| [Backend 3: Diseño y desarrollo de APIs backend](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/ai-interface-code/) | Usa IA para asistir en el diseño de APIs, generación de código backend y documentación de APIs |
|
||||
| [Backend 4: Lanza tu prototipo de producto](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/zeabur-deployment/) | Despliega rápidamente aplicaciones full-stack en la nube con Zeabur |
|
||||
| [Backend 5: De IDEs a herramientas de programación con IA por CLI](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/modern-cli/) | Explora flujos de trabajo de programación con IA desde la terminal para desarrollo moderno |
|
||||
| [Backend 6: Integra Stripe y otros sistemas de facturación](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/stripe-payment/) | Agrega monetización con capacidades de pago y facturación |
|
||||
|
||||
### 三、高级开发工程师
|
||||
#### Proyectos principales
|
||||
|
||||
#### Claude Code 核心技能
|
||||
| Sección | Contenido clave |
|
||||
| :------ | :---------- |
|
||||
| [Proyecto principal 1: Tu primera aplicación SaaS full-stack - Sitio web de copywriting con IA](https://datawhalechina.github.io/easy-vibe/en/stage-2/assignments/fullstack-app/) | Construye un espacio de trabajo de marketing con IA con inicio de sesión, generación, facturación y gestión de administración |
|
||||
| [Proyecto principal 2: Sistema de exámenes y gestión en línea](https://datawhalechina.github.io/easy-vibe/en/stage-2/assignments/modern-frontend-trae/) | Construye un sistema de exámenes en línea con generación de preguntas, flujos de examen y herramientas de administración |
|
||||
|
||||
| 章节 | 关键内容 |
|
||||
| :------------------------------------------------------------------------------------------------------ | :----------------------------------------------------------- |
|
||||
| [Claude Code 快速上手](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/core-skills/basics/) | 安装配置、基础操作、实用技巧和常用指令 |
|
||||
| [Claude Code MCP 完全指南](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/core-skills/mcp/) | 通过 MCP 让 Claude Code 连接 GitHub、数据库、API 等外部服务 |
|
||||
| [Claude Code Skills 完全指南](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/core-skills/skills/) | 将专业知识打包成可复用技能包，一次配置反复使用 |
|
||||
| [Claude Code 工作流最佳实践](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/core-skills/workflow/) | 日常开发、代码重构、Code Review 等场景的最佳实践 |
|
||||
| [Claude Agent Teams 完全指南](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/core-skills/agent-teams/) | 多 AI 实例协同工作，像真正的开发团队一样并行协作 |
|
||||
| [Claude Code Superpowers 工程级开发](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/core-skills/superpowers/) | 让 AI 写出工程级代码，遵循 TDD 和最佳实践 |
|
||||
| [如何让 Claude Code 长时间工作](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/core-skills/long-running-tasks/) | 设计长时间运行的任务，让 Coding Tools 持续工作直到完成 |
|
||||
#### Apéndice de capacidades de IA
|
||||
|
||||
#### 多平台开发
|
||||
| Sección | Contenido clave |
|
||||
| :------ | :---------- |
|
||||
| [IA 1: Conceptos básicos de Dify e integración de base de conocimiento](https://datawhalechina.github.io/easy-vibe/en/stage-2/ai-capabilities/dify-knowledge-base/) | Aprende a construir aplicaciones de IA con Dify e integrar bases de conocimiento privadas |
|
||||
|
||||
| 章节 | 关键内容 |
|
||||
| :------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------- |
|
||||
| [如何构建微信小程序](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/wechat-miniprogram/) | 了解微信小程序生态，从官方模板到上线完成一个前端小程序 |
|
||||
| [如何构建微信小程序-包含后端](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/wechat-miniprogram-backend/) | 在小程序中接入数据库与后端逻辑，打通完整业务闭环 |
|
||||
| [如何构建安卓程序](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/android-app/) | 使用 Expo 等工具，完成 Web/原生一体化的安卓应用开发 |
|
||||
| [如何构建 iOS 程序](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/ios-app/) | 使用 Expo 等工具，完成 Web/原生一体化的 iOS 应用开发 |
|
||||
| [如何开发 PWA 本地应用](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/pwa-local-app/) | 让网页变成"真正的 App"，支持离线、推送、桌面安装 |
|
||||
| [如何开发浏览器 AI 助手插件](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/browser-ai-extension/) | 开发 Chrome 插件，一键总结任意网页，支持云端 API 和内置 AI |
|
||||
| [如何开发 Electron 桌面程序](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/electron-voice-to-text/) | 用 Electron 构建语音转文字桌面应用，支持三平台安装运行 |
|
||||
| [如何快速开发并铸造 NFT](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/nft-minting/) | 从零编写智能合约，部署到以太坊测试网，铸造自己的 NFT |
|
||||
| [如何开发 VS Code 插件](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/vscode-extension/) | 开发 AI 项目助手插件，支持模板生成、代码对话、多文件问答 |
|
||||
| [如何开发工业级 Qt 桌面应用](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/qt-industrial-hmi/) | 用 Qt 构建工业级水泵监控 HMI 系统，实时数据、趋势图、报警 |
|
||||
### III. Desarrolladores avanzados
|
||||
|
||||
#### AI 能力附录
|
||||
#### Habilidades centrales de Claude Code
|
||||
|
||||
| 章节 | 关键内容 |
|
||||
| :---------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------ |
|
||||
| [什么是 RAG 以及它如何工作](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/ai-advanced/rag-introduction/) | 系统理解 RAG 原理与常见架构，为复杂应用提供知识检索基础 |
|
||||
| [中高级 RAG 与工作流编排：以 LangGraph 为例](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/ai-advanced/langgraph-advanced-rag/) | 使用 LangGraph 等工具设计多步工作流与中高级 RAG 系统 |
|
||||
| Sección | Contenido clave |
|
||||
| :------ | :---------- |
|
||||
| [Comenzando con Claude Code](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/basics/) | Instalación, configuración, fundamentos y comandos útiles |
|
||||
| [Guía de Claude Code MCP](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/mcp/) | Conecta Claude Code a GitHub, bases de datos, APIs y otros servicios a través de MCP |
|
||||
| [Guía de Claude Code Skills](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/skills/) | Empaqueta experiencia en habilidades reutilizables que puedes usar una y otra vez |
|
||||
| [Cómo mantener a Claude Code trabajando en tareas de larga duración](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/long-running-tasks/) | Diseña tareas de larga duración para que las herramientas de codificación sigan trabajando hasta terminar |
|
||||
| [Guía de Claude Agent Teams](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/agent-teams/) | Coordina múltiples instancias de IA como un equipo de desarrollo real |
|
||||
| [Superpoderes de Claude Code para desarrollo de grado empresarial](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/superpowers/) | Ayuda a la IA a producir código de grado empresarial con TDD y mejores prácticas |
|
||||
| [Mejores prácticas de flujo de trabajo de Claude Code](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/workflow/) | Mejores prácticas para refactorización, revisión de código y desarrollo diario |
|
||||
| [Desarrollo remoto con Claude Code en móvil](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/mobile-development/) | Usa Claude Code más allá del escritorio y construye un flujo de trabajo remoto productivo en dispositivos móviles |
|
||||
| [Guía completa del SDK de Claude Agent](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/claude-agent-sdk/) | Construye flujos de trabajo de agentes personalizados e integra Claude en tus propias herramientas con el SDK |
|
||||
| [De vibe coding a spec coding](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/spec-coding/) | Pasa de prompts ad-hoc a un flujo de desarrollo con IA más estructurado y basado en especificaciones |
|
||||
|
||||
### 📚 附录知识库
|
||||
#### Desarrollo multiplataforma
|
||||
|
||||
> 涵盖 **9 大知识领域**、**80+ 交互式专题**，以动画和可视化组件帮助你直观理解从计算机底层到 AI 前沿的核心概念。
|
||||
| Sección | Contenido clave |
|
||||
| :------ | :---------- |
|
||||
| [Cómo elegir la plataforma adecuada para tu aplicación](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/choose-platform/) | Compara formatos de aplicaciones y elige la plataforma adecuada según usuarios, escenarios y objetivos de entrega |
|
||||
| [Construye un Mini Programa de WeChat](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/wechat-miniprogram/) | Comprende el ecosistema y lanza un mini programa frontend desde plantilla hasta producción |
|
||||
| [Construye un Mini Programa de WeChat con backend](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/wechat-miniprogram-backend/) | Agrega lógica backend y bases de datos para completar el ciclo de negocio completo |
|
||||
| [Construye una aplicación Android](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/android-app/) | Aprende desarrollo de aplicaciones Android con un flujo de trabajo nativo moderno |
|
||||
| [Construye una aplicación iOS](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/ios-app/) | Aprende desarrollo de aplicaciones iOS y las convenciones del ecosistema Apple |
|
||||
| [Construye una aplicación PWA local](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/pwa-local-app/) | Convierte un sitio web en una aplicación real con soporte offline, push e instalación |
|
||||
| [Construye una extensión de asistente de IA para navegador](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/browser-ai-extension/) | Crea una extensión de Chrome que resume cualquier página con APIs en la nube o IA integrada |
|
||||
| [Construye una aplicación de escritorio con Electron](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/electron-voice-to-text/) | Construye una aplicación de escritorio de voz a texto con Electron para tres plataformas |
|
||||
| [Construye y acuña un NFT rápidamente](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/nft-minting/) | Escribe un contrato inteligente desde cero, despliégalo y acuña tu propio NFT |
|
||||
| [Construye una extensión para VS Code](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/vscode-extension/) | Construye un asistente de proyecto de IA con plantillas, chat de código y preguntas/respuestas multi-archivo |
|
||||
| [Construye una aplicación de escritorio Qt de grado industrial](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/qt-industrial-hmi/) | Crea un sistema HMI Qt en tiempo real con tendencias, alertas y monitoreo |
|
||||
|
||||
#### Apéndice de capacidades de IA
|
||||
|
||||
| Sección | Contenido clave |
|
||||
| :------ | :---------- |
|
||||
| [Qué es RAG y cómo funciona](https://datawhalechina.github.io/easy-vibe/en/stage-3/ai-advanced/rag-introduction/) | Construye una comprensión sistemática de los principios de RAG y arquitecturas comunes |
|
||||
| [Flujos de trabajo RAG intermedios y avanzados con LangGraph](https://datawhalechina.github.io/easy-vibe/en/stage-3/ai-advanced/langgraph-advanced-rag/) | Diseña flujos de trabajo de múltiples pasos y sistemas RAG más avanzados |
|
||||
|
||||
### 📚 Base de conocimiento del apéndice
|
||||
|
||||
> Cubriendo **9 áreas de conocimiento principales** y ** más de 80 temas interactivos**, este apéndice usa animación y componentes visuales para ayudarte a comprender intuitivamente conceptos fundamentales desde los fundamentos de computación hasta la frontera de la IA.
|
||||
>
|
||||
> 👉 [查看完整附录](https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/) · [AI 能力词典](https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/ai-capability-dictionary)
|
||||
> 👉 [Ver el apéndice completo](https://datawhalechina.github.io/easy-vibe/en/appendix/)
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td valign="top" width="33%">
|
||||
<strong>💻 计算机基础</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/transistor-to-cpu.html">从晶体管到 CPU</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/operating-systems.html">操作系统</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/data-encoding-storage.html">数据的编码、存储与传输</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/computer-networks.html">网络：两台电脑如何对话</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/data-structures.html">数据结构</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/algorithm-thinking.html">算法思维入门</a>
|
||||
</td>
|
||||
<td valign="top" width="33%">
|
||||
<strong>🔧 开发工具</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/git-version-control.html">Git：代码的时光机</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/command-line-shell.html">命令行与 Shell 脚本</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/package-managers.html">包管理器</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/debugging-art/">调试的艺术</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/regex.html">正则表达式</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/environment-path.html">环境变量与 PATH</a>
|
||||
</td>
|
||||
<td valign="top" width="33%">
|
||||
<strong>🌐 浏览器与前端</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/javascript-deep-dive.html">JavaScript 语言深入</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/browser-as-os-rendering.html">浏览器渲染管道</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/frontend-frameworks.html">前端框架对比</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/graphics-animation.html">图形与动画</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/web-performance.html">网页性能的度量与优化</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/frontend-engineering.html">前端工程化全貌</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top" width="33%">
|
||||
<strong>🖥️ 服务器与后端</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/http-protocol.html">HTTP 协议</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/api-design.html">API 设计哲学</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/auth-authorization.html">认证与授权体系</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/concurrency-async.html">并发、异步与多线程</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/message-queues.html">消息队列与事件驱动</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/backend-layered-architecture.html">后端分层架构</a>
|
||||
</td>
|
||||
<td valign="top" width="33%">
|
||||
<strong>📊 数据</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/database-fundamentals.html">数据库原理与 SQL</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/database-fundamentals.html">数据库原理</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/data-tracking.html">数据埋点与用户行为采集</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/data-analysis.html">数据分析基础</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/ab-testing.html">A/B 测试与实验驱动</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/data-visualization.html">数据可视化与仪表盘</a>
|
||||
</td>
|
||||
<td valign="top" width="33%">
|
||||
<strong>🏗️ 架构与系统设计</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/6-architecture-and-system-design/monolith-to-microservices.html">从单体到微服务的演进</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/6-architecture-and-system-design/distributed-systems.html">分布式系统的挑战</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/6-architecture-and-system-design/high-availability.html">高可用与容灾</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/6-architecture-and-system-design/system-design-methodology.html">系统设计方法论</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top" width="33%">
|
||||
<strong>☁️ 基础设施与运维</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/docker-containers.html">Docker 容器化</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/kubernetes.html">Kubernetes 编排</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/ci-cd.html">CI / CD 自动化</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/dns-https.html">域名、DNS 与 HTTPS</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/monitoring-logging.html">监控、日志与告警</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/infrastructure-as-code.html">基础设施即代码</a>
|
||||
</td>
|
||||
<td valign="top" width="33%">
|
||||
<strong>🤖 人工智能</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/llm-principles.html">大语言模型的工作原理</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/transformer-attention.html">Transformer 与注意力机制</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/rag.html">RAG 架构</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/ai-agents.html">AI Agent 与工具调用</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/prompt-engineering.html">提示词工程</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/image-generation.html">图像生成原理</a>
|
||||
</td>
|
||||
<td valign="top" width="33%">
|
||||
<strong>🎯 工程素养</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/code-quality-refactoring.html">代码质量与重构</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/testing-strategies.html">测试策略</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/design-patterns.html">设计模式</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/security-thinking.html">安全思维与攻防基础</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/technical-writing.html">技术文档写作</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/open-source-collaboration.html">开源协作</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
### 🎓 Otros cursos
|
||||
|
||||
## 🛠️ 如何学习
|
||||
- [Hands-on Modern RL](#otros-cursos)
|
||||
- [Learn Harness Engineering](#otros-cursos)
|
||||
|
||||
- 根据个人能力，选择性地阅读和实践相关章节，如果有问题欢迎 issue 提问。
|
||||
## 🛠️ Cómo aprender
|
||||
|
||||
## 💻 本地启动本课件
|
||||
- Lee y practica las secciones que coincidan con tu nivel actual. Si te quedas atascado, no dudes en abrir un issue.
|
||||
|
||||
### 现代方案
|
||||
## 💻 Ejecutar localmente
|
||||
|
||||
在 AI IDE 对话框（vscode、cursor、trae 等）中，输入下列提示词启动本课件：
|
||||
### Enfoque moderno
|
||||
|
||||
```
|
||||
请你帮我运行这个项目的本地服务
|
||||
En una ventana de chat de un AI IDE como VS Code, Cursor o Trae, simplemente puedes decir:
|
||||
|
||||
```text
|
||||
Por favor, ayúdame a ejecutar este proyecto localmente.
|
||||
```
|
||||
|
||||
### 旧方案
|
||||
### Enfoque tradicional
|
||||
|
||||
1. npm install
|
||||
2. npm run dev
|
||||
3. 打开浏览器访问 `http://localhost:3000` 即可查看。
|
||||
1. `npm install`
|
||||
2. `npm run dev`
|
||||
3. Abre `http://localhost:3000` en tu navegador.
|
||||
|
||||
## 🤝 参与贡献
|
||||
## Otros cursos
|
||||
|
||||
- 如果你发现了一些问题，或者觉得任何可以改进本项目的地方，可以提 Issue 进行反馈。如果提完没有人回复你可以联系[保姆团队](https://github.com/datawhalechina/DOPMC/blob/main/OP.md)的同学进行反馈跟进~
|
||||
- 如果你想参与贡献本项目，可以提 Pull Request，如果提完没有人回复你可以联系[保姆团队](https://github.com/datawhalechina/DOPMC/blob/main/OP.md)的同学进行反馈跟进~
|
||||
- 如果你对 Datawhale 很感兴趣并想要发起一个新的项目，请按照[Datawhale 开源项目指南](https://github.com/datawhalechina/DOPMC/blob/main/GUIDE.md)进行操作即可~
|
||||
¡Nuestro equipo también ha creado otros cursos! Échales un vistazo:
|
||||
|
||||
## 🙏 感谢每位贡献者
|
||||
[](https://github.com/walkinglabs/hands-on-modern-rl)
|
||||
|
||||
- [散步-项目负责人](https://github.com/sanbuphy) (Datawhale成员)
|
||||
- 方可-指导老师（Datawhale成员, 清华大学）
|
||||
- [Yerim Kang](https://github.com/yerim25)（实践项目部分-清华大学）
|
||||
- [赵芷霖](https://github.com/ChileenZ)（实践项目部分-清华大学）
|
||||
- [李亦萱](https://yixuan20.github.io/)（页面美术设计-清华大学）
|
||||
- 刘思怡（实践项目部分-清华大学）
|
||||
- [刘丽欣](https://github.com/liulx25xx)（实践项目部分-清华大学）
|
||||
- AI Vibe Coding 101 内测群完整给建议体验的小伙伴们
|
||||
**Hands-on Modern RL**: Un plan de estudios práctico y de código abierto que cierra la brecha desde conceptos básicos de RL hasta la alineación de LLMs, RLVR y sistemas Agentic avanzados.
|
||||
|
||||
### 特别感谢
|
||||
[](https://github.com/walkinglabs/learn-harness-engineering/tree/main)
|
||||
|
||||
- 感谢 [@Sm1les](https://github.com/Sm1les) 对本项目的帮助与支持
|
||||
- 感谢所有为本项目做出贡献的开发者们和支持点赞的朋友们 ❤️
|
||||
**Learn Harness Engineering**: Una guía completa sobre ingeniería de arneses.
|
||||
|
||||
## 🤝 Contribuir y colaboradores
|
||||
|
||||
- Si encuentras un problema o ves algo que se puede mejorar, no dudes en abrir un issue. Si nadie responde, también puedes contactar al [equipo de soporte de Datawhale](https://github.com/datawhalechina/DOPMC/blob/main/OP.md).
|
||||
- Si quieres contribuir, abre un pull request. Si nadie responde, también puedes contactar al [equipo de soporte de Datawhale](https://github.com/datawhalechina/DOPMC/blob/main/OP.md).
|
||||
- Si quieres iniciar un nuevo proyecto de código abierto de Datawhale, por favor sigue la [Guía de Proyectos de Código Abierto de Datawhale](https://github.com/datawhalechina/DOPMC/blob/main/GUIDE.md).
|
||||
|
||||
### 🙏 Colaboradores
|
||||
|
||||
- [Sanbu - Líder del proyecto](https://github.com/sanbuphy) (Miembro de Datawhale)
|
||||
- Fang Ke - Mentor (Miembro de Datawhale, Universidad de Tsinghua)
|
||||
- [Yerim Kang](https://github.com/yerim25) (Proyectos prácticos, Universidad de Tsinghua)
|
||||
- [Zhilin Zhao](https://github.com/ChileenZ) (Proyectos prácticos, Universidad de Tsinghua)
|
||||
- [Yixuan Li](https://yixuan20.github.io/) (Diseño visual, Universidad de Tsinghua)
|
||||
- Siyi Liu (Proyectos prácticos, Universidad de Tsinghua)
|
||||
- [Lixin Liu](https://github.com/liulx25xx) (Proyectos prácticos, Universidad de Tsinghua)
|
||||
- Todos en el grupo de prueba interna de AI Vibe Coding 101 que compartieron sugerencias y comentarios
|
||||
|
||||
### Agradecimientos especiales
|
||||
|
||||
- Gracias a [@Sm1les](https://github.com/Sm1les) por la ayuda y el apoyo en este proyecto
|
||||
- Gracias a cada colaborador y a todos los que apoyaron el proyecto con comentarios y estrellas ❤️
|
||||
|
||||
<div align="center">
|
||||
|
||||
|
||||
<a href="https://www.star-history.com/#datawhalechina/easy-vibe&type=timeline&legend=top-left">
|
||||
<picture>
|
||||
<source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=datawhalechina/easy-vibe&type=timeline&theme=dark&legend=top-left" />
|
||||
@@ -455,22 +419,21 @@ Easy-Vibe te enseña a convertir eso en un producto real.
|
||||
</a>
|
||||
</div>
|
||||
|
||||
## 📄 LICENSE
|
||||
## 📄 LICENCIA
|
||||
|
||||
<div align="center">
|
||||
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">
|
||||
<img
|
||||
alt="知识共享许可协议"
|
||||
alt="Licencia Creative Commons"
|
||||
style="border-width:0"
|
||||
src="https://img.shields.io/badge/license-CC%20BY--NC--SA%204.0-lightgrey"
|
||||
/>
|
||||
</a>
|
||||
<br />
|
||||
本作品采用
|
||||
Esta obra está licenciada bajo la
|
||||
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">
|
||||
知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议
|
||||
</a>
|
||||
进行许可。
|
||||
Licencia Internacional Creative Commons Attribution-NonCommercial-ShareAlike 4.0
|
||||
</a>.
|
||||
</div>
|
||||
|
||||
## Star History
|
||||
|
||||
+234
-271
@@ -1,7 +1,9 @@
|
||||
<!-- trigger vercel build -->
|
||||
<div align="center">
|
||||
|
||||
<img src="../../assets/easy-vibe-logo-hd.svg" alt="Easy-Vibe Logo" width="300">
|
||||
<img src="../../assets/easy-vibe-logo-hd.svg" alt="Logo Easy-Vibe" width="300">
|
||||
|
||||
<img src="../../assets/banner.png" alt="Bannière Easy-Vibe" width="100%">
|
||||
|
||||
<p align="center" style="font-size: 1.2em; color: #666; margin: 20px 0;">
|
||||
Lancez-vous tout de suite et vibez avec nous. Si vous pouvez parler, vous pouvez creer des applis.<br>
|
||||
@@ -11,16 +13,16 @@
|
||||
<a href="https://trendshift.io/repositories/22079" target="_blank"><img src="https://trendshift.io/api/badge/repositories/22079" alt="datawhalechina/easy-vibe | Trendshift" style="width: 250px; height: 55px;" width="250" height="55"/></a>
|
||||
|
||||
<p align="center">
|
||||
🚀 <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">Commencer</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/en/appendix/">Tutoriel interactif</a> · 🦞 <a href="https://github.com/datawhalechina/hello-claw">Apprendre OpenClaw</a><br>
|
||||
🚀 <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">Commencer</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/en/appendix/">Tutoriel interactif</a> · 🦞 <a href="https://github.com/datawhalechina/hello-claw">Apprendre OpenClaw</a> · 📖 <a href="#table-of-contents">Table des matières</a><br>
|
||||
<span style="font-size: 0.85em; color: #888;">🚀 <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">开始体验</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/">交互式教程</a> · 🦞 <a href="https://github.com/datawhalechina/hello-claw">学习 OpenClaw</a> · 📖 <a href="#table-of-contents">查看目录</a></span>
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
<a href="https://datawhalechina.github.io/easy-vibe/welcome.html">Commencer la lecture</a> ·
|
||||
<a href="#-content-navigation">Parcours d'apprentissage</a><br>
|
||||
<a href="https://datawhalechina.github.io/easy-vibe/welcome.html">Lire en ligne</a> ·
|
||||
<a href="#-content-navigation">Carte d'apprentissage</a><br>
|
||||
<span style="font-size: 0.85em; color: #888;">
|
||||
<a href="https://datawhalechina.github.io/easy-vibe/welcome.html">开始阅读</a> ·
|
||||
<a href="#-内容导航">学习地图</a>
|
||||
<a href="#-content-navigation">学习地图</a>
|
||||
</span>
|
||||
</p>
|
||||
|
||||
@@ -52,72 +54,89 @@
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/gif-header.png" width="100%">
|
||||
<br>
|
||||
<strong>新手专属学习地图</strong>
|
||||
<strong>Une carte d'apprentissage pour les debutants</strong>
|
||||
<br>
|
||||
<sub>零基础专属指引，清晰规划路径，告别“学了忘”</sub>
|
||||
<sub>Des orientations claires depuis zero, pour ne plus "apprendre et oublier"</sub>
|
||||
</td>
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/gif-tutorial.png" width="100%">
|
||||
<br>
|
||||
<strong>手把手图文教程</strong>
|
||||
<strong>Tutoriels visuels etape par etape</strong>
|
||||
<br>
|
||||
<sub>保姆级图文详解，如同私教在旁，跟着做就能学会</sub>
|
||||
<sub>Des explications detaillees comme avec un tuteur prive</sub>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/gif-ide.gif" width="100%">
|
||||
<br>
|
||||
<strong>沉浸式模拟编程</strong>
|
||||
<strong>Programmation simulee immersive</strong>
|
||||
<br>
|
||||
<sub>虚拟鼠标自动导览，带你快速上手 IDE 核心用法</sub>
|
||||
<sub>Une souris virtuelle vous guide pour apprendre rapidement le flux de travail de l'IDE</sub>
|
||||
</td>
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/gif-diffusion.gif" width="100%">
|
||||
<br>
|
||||
<strong>看得见的 AI 原理</strong>
|
||||
<strong>Principes de IA visibles</strong>
|
||||
<br>
|
||||
<sub>算法原理动画化，一眼看懂 AI 如何“画”出图片</sub>
|
||||
<sub>Des explications animees pour voir facilement comment l'IA genere des images</sub>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/gif-rag.gif" width="100%">
|
||||
<br>
|
||||
<strong>像玩游戏一样学 RAG</strong>
|
||||
<strong>Apprenez RAG comme un jeu</strong>
|
||||
<br>
|
||||
<sub>独家交互组件，点击即可看清 RAG 数据流向</sub>
|
||||
<sub>Des composants interactifs pour cliquer a travers le flux complet de donnees RAG</sub>
|
||||
</td>
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/git-terminal.gif" width="100%">
|
||||
<br>
|
||||
<strong>可视化终端原理</strong>
|
||||
<strong>Concepts de terminal visuels</strong>
|
||||
<br>
|
||||
<sub>命令行操作可视化，直观展示后台逻辑与原理</sub>
|
||||
<sub>Le comportement en ligne de commande devient intuitif quand la logique sous-jacente est visualisee</sub>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div align="center">
|
||||
<h3>⭐ 欢迎 <a href="https://github.com/datawhalechina/easy-vibe" style="color: #d0cd16ff;">点击此处Star</a> 加速更新 ❤️</h3>
|
||||
<h3>⭐ <a href="https://github.com/datawhalechina/easy-vibe" style="color: #d0cd16ff;">Mettez une etoile au depot ici</a> pour accelerer les mises a jour ❤️</h3>
|
||||
</div>
|
||||
|
||||
<div align="center" style="margin: 30px 0;">
|
||||
<a href="https://github.com/datawhalechina/easy-vibe/issues/new?template=story_submission.md">
|
||||
<img src="https://raw.githubusercontent.com/datawhalechina/easy-vibe/main/assets/stories_image.png" alt="Share Your Vibe Story" width="80%" style="border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.15);">
|
||||
<img src="https://raw.githubusercontent.com/datawhalechina/easy-vibe/main/assets/stories_image.png" alt="Partagez votre histoire Vibe" width="80%" style="border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.15);">
|
||||
</a>
|
||||
<p style="margin-top: 15px; font-size: 1.1em; color: #666;">
|
||||
📝 <strong>Have your own vibe coding story?</strong>
|
||||
Submit it here and inspire others!
|
||||
📝 <strong>Vous avez votre propre histoire de vibe coding ?</strong>
|
||||
Soumettez-la ici et inspirez les autres !
|
||||
</p>
|
||||
</div>
|
||||
|
||||
## 为什么需要 Easy-Vibe
|
||||
## Table des matières
|
||||
|
||||
Vous voulez une appli de suivi des depenses? Dites-le.
|
||||
- [Pourquoi Easy-Vibe](#pourquoi-easy-vibe)
|
||||
- [Actualités](#-news)
|
||||
- [Pour qui est-ce](#pour-qui-est-ce)
|
||||
- [Vos parcours d'apprentissage](#vos-parcours-dapprentissage)
|
||||
- [Suggestions d'étude](#suggestions-détude)
|
||||
- [I. Entrée debutant](#i-entrée-débutant)
|
||||
- [II. Developpeurs junior et intermédiaires](#ii-développeurs-junior-et-intermédiaires)
|
||||
- [III. Developpeurs avancés](#iii-développeurs-avancés)
|
||||
- [Base de connaissances de l'annexe](#-base-de-connaissances-de-lannexe)
|
||||
- [Comment apprendre](#️-comment-apprendre)
|
||||
- [Executer localement](#-exécuter-localement)
|
||||
- [Autres cours](#autres-cours)
|
||||
- [Contribuer et contributeurs](#-contribuer-et-contributeurs)
|
||||
- [LICENCE](#-licence)
|
||||
|
||||
Besoin d'un systeme de reservation avec connexion WeChat? Dites-le.
|
||||
## Pourquoi Easy-Vibe
|
||||
|
||||
Vous voulez un blog avec commentaires? Dites-le.
|
||||
Vous voulez une appli de suivi des depenses ? Dites-le.
|
||||
|
||||
Besoin d'un systeme de reservation avec connexion WeChat ? Dites-le.
|
||||
|
||||
Vous voulez un blog avec commentaires ? Dites-le.
|
||||
|
||||
A l'ere de l'IA, programmer commence par decrire ce que vous voulez.
|
||||
|
||||
@@ -126,321 +145,266 @@ Easy-Vibe vous apprend a transformer cela en un vrai produit.
|
||||
|
||||
## 🔥 News
|
||||
|
||||
- **[2026-03-29]** ✨ **La section Histoires d’utilisateurs est en ligne avec 4 cas réels** : Nous avons ajouté un carrousel interactif et des pages dédiées sur la page d’accueil, puis remplacé le contenu provisoire par quatre récits réels mettant en scène un instituteur rural, une étudiante, un professeur d’informatique au lycée et un chauffeur routier ayant créé de vrais produits avec l’IA. [👉 View the stories](https://datawhalechina.github.io/easy-vibe/zh-cn/vibe-stories/story-1.html)
|
||||
- **[2026-03-29]** ✨ **La section Histoires d'utilisateurs est en ligne avec 4 cas réels** : Nous avons ajouté un carrousel interactif et des pages dédiées sur la page d'accueil, puis remplacé le contenu provisoire par quatre récits réels mettant en scène un instituteur rural, une étudiante, un professeur d'informatique au lycée et un chauffeur routier ayant créé de vrais produits avec l'IA. [👉 View the stories](https://datawhalechina.github.io/easy-vibe/zh-cn/vibe-stories/story-1.html)
|
||||
- **[2026-03-26]** 🚀 **Mise à jour majeure de la pratique de l'Étape 2**: Projet final SaaS "[Votre première application full-stack SaaS : Générateur de copywriting](https://datawhalechina.github.io/easy-vibe/en/stage-2/assignments/fullstack-app/)" complété et section "[Comment intégrer Stripe et les systèmes de paiement](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/stripe-payment/)" substantiellement élargie.
|
||||
- **[2026-03-25]** 📚 **Nouvel appendice : Recherche utilisateur et validation des besoins**: Ajout de quatre nouveaux articles couvrant la recherche d'idées, le modèle Double Diamond, Jobs to Be Done et The Mom Test pour aider les débutants à découvrir et valider des idées de produits. [👉 Lire l'appendice](https://datawhalechina.github.io/easy-vibe/en/appendix/)
|
||||
- **[2026-03-25]** 📚 **Documentation anglaise entièrement mise à jour**: L'Étape 2 (Développement full-stack) et l'Étape 3 (Développement avancé) sont maintenant entièrement disponibles en anglais. [👉 Commencer à apprendre](https://datawhalechina.github.io/easy-vibe/en/stage-2/)
|
||||
<details>
|
||||
<summary>Actualités Passées</summary>
|
||||
|
||||
- **[2026-03-02]** 🦞 **Support amical pour OpenClaw et AI Agent**: Ajout de `llms.txt` pour qu'OpenClaw, Claude, Cursor, Trae et autres agents IA puissent rapidement comprendre la structure du dépôt et trouver le bon contenu tutoriel.
|
||||
- **[2026-03-01]** La section [Développement Avancé](https://datawhalechina.github.io/easy-vibe/en/stage-3/) a été complètement mise à niveau avec des guides approfondis pour Claude Code, incluant MCP, Skills, Agent Teams et plus, ainsi que huit tutoriels de projets multiplateformes.
|
||||
- **[2026-02-25]** Mise à jour de la [Base de Connaissances de l'Appendice](https://datawhalechina.github.io/easy-vibe/en/appendix/), couvrant maintenant 9 domaines de connaissances et plus de 80 sujets interactifs.
|
||||
- **[2026-01-27]** Ajout de tutoriels de développement d'applications pour Android et iOS.
|
||||
- **[2026-01-19]** Lancement de démos interactives pour Prompt Engineering, histoire de l'IA, conception d'authentification, principes Git et plus.
|
||||
|
||||
<details>
|
||||
<summary>Actualités Passées</summary>
|
||||
|
||||
- **[2026-01-16]** Restructuration du projet et établissement formel du chapitre d'entrée pour débutants.
|
||||
- **[2026-01-14]** Mise à jour majeure des documents de prototypage de produits de l'Étape 1.
|
||||
- **[2026-01-13]** Refonte de l'architecture documentaire et activation complète du support multilingue (i18n).
|
||||
- **[2026-01-01]** Lancement de la carte d'apprentissage principale du projet.
|
||||
</details>
|
||||
|
||||
## 适合谁
|
||||
## Pour qui est-ce
|
||||
|
||||
- **零基础爱好者**：先做出第一个作品，再理解怎么做
|
||||
- **产品经理 / 创业者**：快速验证想法，低成本做 MVP
|
||||
- **学生**：建立 AI 时代的实战技能
|
||||
- **初级开发者**：补齐从想法到上线的完整开发链路
|
||||
- **中高级开发者**：掌握 AI 协作开发、复杂项目实战与效率升级
|
||||
- **Debutants complets**: Construisez d'abord votre premier projet, puis comprenez comment il fonctionne
|
||||
- **Chefs de produit / fondateurs**: Validez rapidement vos idées et construisez des MVPs a faible cout
|
||||
- **Etudiants**: Developpez des competences pratiques pour l'ere de l'IA
|
||||
- **Developpeurs juniors**: Apprenez le chemin complet de l'idee au lancement
|
||||
- **Developpeurs de niveau intermediaire et senior**: Ameliorez votre flux de collaboration avec l'IA pour des projets complexes
|
||||
|
||||
|
||||
|
||||
## 你的学习路径
|
||||
## Vos parcours d'apprentissage
|
||||
|
||||
### 🎮 我想先试试（5分钟体验）
|
||||
**适合人群**：所有人
|
||||
**学什么**：AI 编程初体验、贪吃蛇小游戏
|
||||
**你会得到**：5 分钟做出第一个 AI 应用
|
||||
### 🎮 Je veux une premiere reussite rapide
|
||||
**Ideal pour**: Tout le monde
|
||||
**Ce que vous apprendrez**: Ce que ca fait vraiment de coder avec l'IA a travers un exemple pratique, simple et concret
|
||||
**Ce que vous obtiendrez**: Une premiere impression claire du vibe coding et comment travailler avec l'IA par la conversation
|
||||
|
||||
[开始体验](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/learning-map/)
|
||||
[Commencez ici](https://datawhalechina.github.io/easy-vibe/en/stage-1/ai-capabilities-through-games/)
|
||||
|
||||
### 💡 我有个想法要实现
|
||||
**适合人群**：零基础/产品经理/创业者
|
||||
**学什么**：AI IDE 工具、需求拆解、页面设计、功能规划、提示词写法、原型迭代
|
||||
**你会得到**：一个可演示的产品原型
|
||||
### 💡 Je veux transformer une idee en prototype de produit
|
||||
**Ideal pour**: Debutants / chefs de produit / fondateurs
|
||||
**Ce que vous apprendrez**: Feuille de route d'apprentissage, outils AI IDE, validation d'idees, prototypage, integration de capacites IA et iteration de demos completes
|
||||
**Ce que vous obtiendrez**: Un prototype de produit IA que vous pouvez reellement montrer a des utilisateurs ou des collegues
|
||||
|
||||
[开始学习](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/learning-map/)
|
||||
[Commencer a apprendre](https://datawhalechina.github.io/easy-vibe/en/stage-1/learning-map/)
|
||||
|
||||
### 🚀 我想系统学习
|
||||
**适合人群**：开发者/进阶学习者
|
||||
**学什么**：前端、后端、数据库、AI 集成、部署运维、Claude Code 开发技巧
|
||||
**你会得到**：独立完成一个可上线的全栈 AI 应用
|
||||
### 🚀 Je veux construire des produits full-stack de bout en bout
|
||||
**Ideal pour**: Developpeurs juniors / indie hackers / apprenants avances
|
||||
**Ce que vous apprendrez**: Flux de travail frontend, design-to-code, bases de donnees, APIs backend, deploiement, facturation et projets majeurs
|
||||
**Ce que vous obtiendrez**: La capacite de livrer independamment des applications web modernes avec IA
|
||||
|
||||
[开始学习](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/)
|
||||
[Commencer a apprendre](https://datawhalechina.github.io/easy-vibe/en/stage-2/)
|
||||
|
||||
### 🦞 我想构建 AI Agent
|
||||
**适合人群**：对 AI Agent 感兴趣的开发者
|
||||
**学什么**：OpenClaw AI 助理、Skills 系统、自动化工作流
|
||||
**你会得到**：一个属于你的命令行 AI 助理
|
||||
### AI-Native: Je veux des flux de travail avances avec Claude Code et agents
|
||||
**Ideal pour**: Developpeurs interesses par l'ingenierie AI-Native
|
||||
**Ce que vous apprendrez**: Claude Code, MCP, Skills, Agent Teams, taches de longue duree, Spec Coding et livraison d'applications multiplateformes
|
||||
**Ce que vous obtiendrez**: Un flux de travail plus robuste pour le developpement assiste par IA complexe et l'automatisation
|
||||
|
||||
[开始学习](https://github.com/datawhalechina/hello-claw)
|
||||
[Aller au developpement avance](https://datawhalechina.github.io/easy-vibe/en/stage-3/)
|
||||
|
||||
### 📚 我想查资料
|
||||
**适合人群**：所有人
|
||||
**学什么**：计算机基础、AI 原理、9 大知识领域
|
||||
**你会得到**：80+ 交互式专题资料
|
||||
### 📚 Je veux du materiel de reference et des fondamentaux
|
||||
**Ideal pour**: Tout le monde
|
||||
**Ce que vous apprendrez**: Fondamentaux informatiques, bases frontend/backend, infrastructure, principes IA et pratiques d'ingenierie
|
||||
**Ce que vous obtiendrez**: Une base de connaissances de reference a long terme couvrant 9 domaines de connaissances majeurs
|
||||
|
||||
[查看知识库](https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/)
|
||||
[Parcourir la base de connaissances](https://datawhalechina.github.io/easy-vibe/en/appendix/)
|
||||
|
||||
## 学习建议
|
||||
## Suggestions d'étude
|
||||
|
||||
- 零基础、产品经理、创业者：从 [第一阶段](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/learning-map/) 开始
|
||||
- 有开发经验：从 [第二阶段](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/) 开始
|
||||
- 想直接做复杂项目：进入 [第三阶段](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/)
|
||||
- 想学 AI Agent：看 [Hello Claw](https://github.com/datawhalechina/hello-claw)
|
||||
- Si vous etes debutant, chef de produit ou fondateur, commencez par l'[Etape 1](https://datawhalechina.github.io/easy-vibe/en/stage-1/learning-map/)
|
||||
- Si vous voulez passer des prototypes a la livraison full-stack, commencez par l'[Etape 2](https://datawhalechina.github.io/easy-vibe/en/stage-2/)
|
||||
- Si vous voulez des flux de travail avances avec Claude Code ou des projets multiplateformes, allez a l'[Etape 3](https://datawhalechina.github.io/easy-vibe/en/stage-3/)
|
||||
- Si vous etes bloque par des concepts ou des lacunes, utilisez la [Base de Connaissances de l'Appendice](https://datawhalechina.github.io/easy-vibe/en/appendix/)
|
||||
|
||||
### 📖 内容导航
|
||||
### 📖 Navigation du contenu
|
||||
|
||||
<div align="center">
|
||||
<img src="../../assets/readme-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;"/>
|
||||
<img src="../../assets/readme-image1.png" alt="Carte d'apprentissage" width="70%" style="border-radius: 10px; box-shadow: 0 8px 20px rgba(45,55,72,0.3); margin: 15px 0;"/>
|
||||
</div>
|
||||
|
||||
### 一、零基础入门
|
||||
### I. Entrée debutant
|
||||
|
||||
| 章节 | 关键内容 |
|
||||
| :----------------------------------------------------------------------------------- | :------------------------------------------------ |
|
||||
| [学习地图](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/learning-map/) | 整体学习路径导览 |
|
||||
| [AI 时代，会说话就会编程](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/ai-capabilities-through-games/) | 通过贪吃蛇等案例初步感受 AI 编程的能力 |
|
||||
| [寻找好想法](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/finding-great-idea/) | 学会寻找和验证产品想法，找到值得做的项目 |
|
||||
| [认识 AI IDE 工具](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/introduction-to-ai-ide/) | 学会使用 IDE，在本地制作小游戏 |
|
||||
| [动手做出原型](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/building-prototype/) | 从需求分析、AI 生成单页面，再到生成多页面产品原型 |
|
||||
| [给原型加上 AI 能力](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/integrating-ai-capabilities/) | 学会接入常见 AI 能力（文本、图片、视频） |
|
||||
| [完整项目实战](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/complete-project-practice/) | 模拟真实场景、接受用户反馈迭代，完整化项目 |
|
||||
| Section | Contenu cle |
|
||||
| :------ | :---------- |
|
||||
| [Carte d'apprentissage](https://datawhalechina.github.io/easy-vibe/en/stage-1/learning-map/) | Un apercu guide du parcours d'apprentissage complet |
|
||||
| [L'ere de l'IA : Si vous savez parler, vous savez coder](https://datawhalechina.github.io/easy-vibe/en/stage-1/ai-capabilities-through-games/) | Decouvrez la programmation avec l'IA a travers des exemples comme Snake |
|
||||
| [Maitrisez les outils de programmation IA](https://datawhalechina.github.io/easy-vibe/en/stage-1/introduction-to-ai-ide/) | Apprenez comment fonctionnent les outils AI IDE et construisez des projets locaux simples |
|
||||
| [Trouvez de bonnes idees](https://datawhalechina.github.io/easy-vibe/en/stage-1/finding-great-idea/) | Apprenez a decouvrir et valider des idees de produits qui valent la peine d'etre construites |
|
||||
| [Construisez des prototypes de produit](https://datawhalechina.github.io/easy-vibe/en/stage-1/building-prototype/) | Passez des exigences aux prototypes de produit mono et multi-pages |
|
||||
| [Integrez les capacites IA](https://datawhalechina.github.io/easy-vibe/en/stage-1/integrating-ai-capabilities/) | Integrez des fonctionnalites IA de texte, image et video |
|
||||
| [Pratique de projet complet](https://datawhalechina.github.io/easy-vibe/en/stage-1/complete-project-practice/) | Simulez des scenarios reels, collectez les retours utilisateurs et iterez sur un projet complet |
|
||||
|
||||
#### 附录：业务思维
|
||||
#### Annexe : Pensee produit et business
|
||||
|
||||
| 章节 | 关键内容 |
|
||||
| :----------------------------------------------------------------------------------- | :----------------------------------------- |
|
||||
| [产品思维与方案设计](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-a-product-thinking/) | 从零到一做产品需要考虑的思维框架 |
|
||||
| [AI 行业应用场景参考 (B端)](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-industry-scenarios/) | 了解 AI 在不同产业的应用场景 |
|
||||
| [AI 消费场景灵感参考 (C端)](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-c-consumer-scenarios/) | 探索 AI 在消费级产品中的应用场景 |
|
||||
| Section | Contenu cle |
|
||||
| :------ | :---------- |
|
||||
| [Pensee produit et conception de solutions](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-a-product-thinking/) | Cadres fondamentaux pour passer de zero a un avec un produit |
|
||||
| [Scenarios d'application de l'IA dans l'industrie (B2B)](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-industry-scenarios/) | Comprenez comment l'IA est appliquee dans differentes industries |
|
||||
| [Inspiration de scenarios IA grand public (B2C)](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-c-consumer-scenarios/) | Explorez les opportunites de produits dans l'IA grand public |
|
||||
|
||||
#### 附录：技术方案
|
||||
#### Annexe : Recherche utilisateur et validation des besoins
|
||||
|
||||
| 章节 | 关键内容 |
|
||||
| :---------------------------------------------------------------------------------------------------------------------- | :----------------------------------------- |
|
||||
| [写代码时遇到错误怎么办](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-b-common-errors/) | vibe coding 中的常见错误及排查方法 |
|
||||
| [七款 AI 编程工具对比](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial) | 对比测试主流 AI 编程平台 |
|
||||
| [用设计和编程 Agent 设计网站](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents) | 学习如何使用 AI 智能体协同工作 |
|
||||
| Section | Contenu cle |
|
||||
| :------ | :---------- |
|
||||
| [Ou trouver des idees : 3 sources de reference qui fonctionnent le mieux pour les debutants](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-idea-sources/) | Construisez un flux fiable pour trouver des opportunites de produits concretes |
|
||||
| [Double Diamond : faites d'abord la bonne chose, puis faites-la bien](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-double-diamond/) | Utilisez un processus structure pour passer de l'inspiration disperse a une direction viable |
|
||||
| [Utilisez Jobs to Be Done pour decouvrir ce que les utilisateurs veulent vraiment](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-jobs-to-be-done/) | Analysez les objectifs des utilisateurs a travers de vraies taches plutot que des demandes de fonctionnalites superficielles |
|
||||
| [The Mom Test : une methode d'entretien utilisateur pour valider la demande](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-mom-test/) | Apprenez a poser de meilleures questions et a eviter les retours faux positifs |
|
||||
|
||||
### 二、初中级开发工程师
|
||||
#### Annexe : Solutions techniques
|
||||
|
||||
#### 前端部分
|
||||
| Section | Contenu cle |
|
||||
| :------ | :---------- |
|
||||
| [Que faire si vous rencontrez des erreurs](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-b-common-errors/) | Problemes courants de vibe coding et comment les resoudre |
|
||||
| [Comparaison de sept outils de programmation IA](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial) | Comparez les principales plateformes de programmation IA par des tests pratiques |
|
||||
| [Concevez des sites web avec des agents](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents) | Apprenez la collaboration multi-agent en pratique |
|
||||
|
||||
| 章节 | 关键内容 |
|
||||
| :--------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------- |
|
||||
| [从Lovart出发，搭建自己的素材生产Agent](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/frontend/lovart-assets/) | 从零开始，利用Nanobanana和Lovart批量生成高质量的设计素材，并动手构建一个能意图识别的绘图Agent |
|
||||
| [Figma 与 MasterGo 入门](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/frontend/figma-mastergo/) | 用设计工具梳理信息架构和页面结构，为前端实现打基础 |
|
||||
| [构建第一个现代应用程序-UI 设计](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/frontend/ui-design/) | 基于设计稿完成组件化界面，实现从设计到代码的第一条链路 |
|
||||
| [参考 UI 设计规范与多产品 UI 设计](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/frontend/multi-product-ui/) | 围绕统一主视觉扩展多产品界面，练习系统化设计能力 |
|
||||
| [用 LLM 和 Skills 让界面变好看](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/frontend/llm-skills-beautiful/) | 用提示词和 Skills 插件让 AI 生成美观独特的界面 |
|
||||
| [一起做霍格沃茨画像](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/frontend/hogwarts-portraits/) | 从 0 到 1 做出接入 AI 能力的前端应用，串联设计与开发 |
|
||||
| [从设计原型到项目代码](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/frontend/design-to-code/) | 三种路径将设计工具中的原型转化为前端代码 |
|
||||
| [使用现代组件库更新你的界面](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/frontend/modern-component-library/) | 用组件库快速构建专业级界面，统一风格、提升开发效率 |
|
||||
### II. Developpeurs junior et intermédiaires
|
||||
|
||||
#### 后端开发部分
|
||||
#### Frontend
|
||||
|
||||
| 章节 | 关键内容 |
|
||||
| :------------------------------------------------------------------------------------------------- | :---------------------------------------------------------- |
|
||||
| [从数据库到 Supabase](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/backend/database-supabase/) | 在 Supabase 上落地数据库和 API，打通数据模型与前端页面 |
|
||||
| [大模型辅助编写接口代码与接口文档](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/backend/ai-interface-code/) | 用大模型协助生成接口与数据库文档及代码，实现可读可测的后端 |
|
||||
| [Git 和 GitHub 工作流](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/backend/git-workflow/) | 在 Git 工作流中管理代码，进行版本控制和协作 |
|
||||
| [如何部署 Web 应用](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/backend/zeabur-deployment/) | 使用 CloudBase、Vercel、Zeabur 等平台部署应用上线 |
|
||||
| [CLI AI 编程工具](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/backend/modern-cli/) | 使用 CLI 类 AI 编程工具加速开发与调试，形成个人工程化工作流 |
|
||||
| [如何集成 Stripe 等收费系统](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/backend/stripe-payment/) | 接入支付系统，完成收费链路与基础结算流程 |
|
||||
| [大作业：构建第一个现代应用程序-全栈应用](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/assignments/copywriting-platform-supabase/) | 综合前端、后端与支付模块，完成可上线的全栈 Web 应用 |
|
||||
| Section | Contenu cle |
|
||||
| :------ | :---------- |
|
||||
| [Frontend 0 : Construisez votre propre agent de production de ressources avec Lovart](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/lovart-assets/) | Utilisez Nanobanana et Lovart pour generer des ressources visuelles en lot et construire un agent de dessin avec reconnaissance d'intentions |
|
||||
| [Frontend 1 : Bases de Figma et MasterGo](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/figma-mastergo/) | Apprenez le flux de travail des maquettes de design a la pensee UI prete a l'implementation |
|
||||
| [Frontend 2 : Construisez votre premiere application moderne - Design UI](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/ui-design/) | Apprenez les fondamentaux du design UI derriere les interfaces d'applications modernes |
|
||||
| [Frontend 3 : Directives UI et design multi-produit](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/multi-product-ui/) | Ameliorez la coherence et l'esthetique de plusieurs produits avec des regles UI partagees |
|
||||
| [Frontend 4 : Rendez les interfaces belles avec les LLMs et Skills](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/llm-skills-beautiful/) | Utilisez des prompts et plugins pour que l'IA genere des interfaces plus polies et distinctives |
|
||||
| [Frontend 4 : Construisons des portraits de Poudlard](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/hogwarts-portraits/) | Construisez un projet frontend interactif d'images IA depuis zero |
|
||||
| [Frontend 6 : Du prototype de design au code de projet](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/design-to-code/) | Transformez les prototypes de design en code frontend qui fonctionne reellement dans le navigateur |
|
||||
| [Frontend 7 : Mettez a jour votre UI avec des bibliotheques de composants modernes](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/modern-component-library/) | Utilisez des bibliotheques de composants pour construire des interfaces professionnelles plus rapidement |
|
||||
|
||||
#### AI 能力附录
|
||||
#### Backend
|
||||
|
||||
| 章节 | 关键内容 |
|
||||
| :------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------- |
|
||||
| [Dify 入门与知识库集成](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/ai-capabilities/dify-knowledge-base/) | 用 Dify Workflow 与基础 RAG 搭建工具类产品，为后续应用升级打样 |
|
||||
| Section | Contenu cle |
|
||||
| :------ | :---------- |
|
||||
| [Backend 1 : Apprenez Git et GitHub](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/git-workflow/) | Maitrisez les operations de controle de version et les flux de collaboration avec Git |
|
||||
| [Backend 2 : De la base de donnees a Supabase](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/database-supabase/) | Apprenez les fondamentaux des bases de donnees relationnelles et utilisez Supabase comme plateforme BaaS moderne |
|
||||
| [Backend 3 : Conception et developpement d'APIs backend](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/ai-interface-code/) | Utilisez l'IA pour assister la conception d'APIs, la generation de code backend et la documentation d'APIs |
|
||||
| [Backend 4 : Livrez votre prototype de produit](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/zeabur-deployment/) | Deploiez rapidement des applications full-stack dans le cloud avec Zeabur |
|
||||
| [Backend 5 : Des IDEs aux outils de programmation IA par CLI](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/modern-cli/) | Explorez les flux de travail de programmation IA depuis le terminal pour le developpement moderne |
|
||||
| [Backend 6 : Integrez Stripe et d'autres systemes de facturation](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/stripe-payment/) | Ajoutez la monetisation avec des capacites de paiement et de facturation |
|
||||
|
||||
### 三、高级开发工程师
|
||||
#### Projets majeurs
|
||||
|
||||
#### Claude Code 核心技能
|
||||
| Section | Contenu cle |
|
||||
| :------ | :---------- |
|
||||
| [Projet majeur 1 : Votre premiere application SaaS full-stack - Site de copywriting IA](https://datawhalechina.github.io/easy-vibe/en/stage-2/assignments/fullstack-app/) | Construisez un espace de travail de marketing IA avec connexion, generation, facturation et gestion admin |
|
||||
| [Projet majeur 2 : Systeme d'examens et de gestion en ligne](https://datawhalechina.github.io/easy-vibe/en/stage-2/assignments/modern-frontend-trae/) | Construisez un systeme d'examens en ligne avec generation de questions, flux d'examen et outils d'administration |
|
||||
|
||||
| 章节 | 关键内容 |
|
||||
| :------------------------------------------------------------------------------------------------------ | :----------------------------------------------------------- |
|
||||
| [Claude Code 快速上手](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/core-skills/basics/) | 安装配置、基础操作、实用技巧和常用指令 |
|
||||
| [Claude Code MCP 完全指南](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/core-skills/mcp/) | 通过 MCP 让 Claude Code 连接 GitHub、数据库、API 等外部服务 |
|
||||
| [Claude Code Skills 完全指南](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/core-skills/skills/) | 将专业知识打包成可复用技能包，一次配置反复使用 |
|
||||
| [Claude Code 工作流最佳实践](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/core-skills/workflow/) | 日常开发、代码重构、Code Review 等场景的最佳实践 |
|
||||
| [Claude Agent Teams 完全指南](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/core-skills/agent-teams/) | 多 AI 实例协同工作，像真正的开发团队一样并行协作 |
|
||||
| [Claude Code Superpowers 工程级开发](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/core-skills/superpowers/) | 让 AI 写出工程级代码，遵循 TDD 和最佳实践 |
|
||||
| [如何让 Claude Code 长时间工作](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/core-skills/long-running-tasks/) | 设计长时间运行的任务，让 Coding Tools 持续工作直到完成 |
|
||||
#### Annexe des capacites IA
|
||||
|
||||
#### 多平台开发
|
||||
| Section | Contenu cle |
|
||||
| :------ | :---------- |
|
||||
| [IA 1 : Bases de Dify et integration de base de connaissances](https://datawhalechina.github.io/easy-vibe/en/stage-2/ai-capabilities/dify-knowledge-base/) | Apprenez a construire des applications IA avec Dify et integrer des bases de connaissances privees |
|
||||
|
||||
| 章节 | 关键内容 |
|
||||
| :------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------- |
|
||||
| [如何构建微信小程序](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/wechat-miniprogram/) | 了解微信小程序生态，从官方模板到上线完成一个前端小程序 |
|
||||
| [如何构建微信小程序-包含后端](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/wechat-miniprogram-backend/) | 在小程序中接入数据库与后端逻辑，打通完整业务闭环 |
|
||||
| [如何构建安卓程序](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/android-app/) | 使用 Expo 等工具，完成 Web/原生一体化的安卓应用开发 |
|
||||
| [如何构建 iOS 程序](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/ios-app/) | 使用 Expo 等工具，完成 Web/原生一体化的 iOS 应用开发 |
|
||||
| [如何开发 PWA 本地应用](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/pwa-local-app/) | 让网页变成"真正的 App"，支持离线、推送、桌面安装 |
|
||||
| [如何开发浏览器 AI 助手插件](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/browser-ai-extension/) | 开发 Chrome 插件，一键总结任意网页，支持云端 API 和内置 AI |
|
||||
| [如何开发 Electron 桌面程序](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/electron-voice-to-text/) | 用 Electron 构建语音转文字桌面应用，支持三平台安装运行 |
|
||||
| [如何快速开发并铸造 NFT](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/nft-minting/) | 从零编写智能合约，部署到以太坊测试网，铸造自己的 NFT |
|
||||
| [如何开发 VS Code 插件](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/vscode-extension/) | 开发 AI 项目助手插件，支持模板生成、代码对话、多文件问答 |
|
||||
| [如何开发工业级 Qt 桌面应用](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/qt-industrial-hmi/) | 用 Qt 构建工业级水泵监控 HMI 系统，实时数据、趋势图、报警 |
|
||||
### III. Developpeurs avancés
|
||||
|
||||
#### AI 能力附录
|
||||
#### Competences cles de Claude Code
|
||||
|
||||
| 章节 | 关键内容 |
|
||||
| :---------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------ |
|
||||
| [什么是 RAG 以及它如何工作](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/ai-advanced/rag-introduction/) | 系统理解 RAG 原理与常见架构，为复杂应用提供知识检索基础 |
|
||||
| [中高级 RAG 与工作流编排：以 LangGraph 为例](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/ai-advanced/langgraph-advanced-rag/) | 使用 LangGraph 等工具设计多步工作流与中高级 RAG 系统 |
|
||||
| Section | Contenu cle |
|
||||
| :------ | :---------- |
|
||||
| [Demarrer avec Claude Code](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/basics/) | Installation, configuration, fondamentaux et commandes utiles |
|
||||
| [Guide Claude Code MCP](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/mcp/) | Connectez Claude Code a GitHub, bases de donnees, APIs et autres services via MCP |
|
||||
| [Guide Claude Code Skills](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/skills/) | Emballez l'expertise en competences reutilisables que vous pouvez utiliser encore et encore |
|
||||
| [Comment garder Claude Code au travail pour les taches de longue duree](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/long-running-tasks/) | Concevez des taches de longue duree pour que les outils de codage continuent a travailler jusqu'a la fin |
|
||||
| [Guide Claude Agent Teams](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/agent-teams/) | Coordonnez plusieurs instances d'IA comme une vraie equipe de developpement |
|
||||
| [Superpouvoirs Claude Code pour le developpement de qualite industrielle](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/superpowers/) | Aidez l'IA a produire du code de qualite industrielle avec TDD et meilleures pratiques |
|
||||
| [Meilleures pratiques de flux de travail Claude Code](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/workflow/) | Meilleures pratiques pour le refactoring, la revue de code et le developpement quotidien |
|
||||
| [Developpement a distance avec Claude Code sur mobile](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/mobile-development/) | Utilisez Claude Code au-dela du bureau et construisez un flux de travail a distance productif sur appareils mobiles |
|
||||
| [Guide complet du SDK Claude Agent](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/claude-agent-sdk/) | Construisez des flux de travail d'agents personnalises et integrez Claude dans vos propres outils avec le SDK |
|
||||
| [Du vibe coding au spec coding](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/spec-coding/) | Passez des prompts ad-hoc a un flux de developpement IA plus structure et base sur des specifications |
|
||||
|
||||
### 📚 附录知识库
|
||||
#### Developpement multiplateformes
|
||||
|
||||
> 涵盖 **9 大知识领域**、**80+ 交互式专题**，以动画和可视化组件帮助你直观理解从计算机底层到 AI 前沿的核心概念。
|
||||
| Section | Contenu cle |
|
||||
| :------ | :---------- |
|
||||
| [Comment choisir la bonne plateforme pour votre application](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/choose-platform/) | Comparez les formats d'applications et choisissez la bonne plateforme selon les utilisateurs, scenarios et objectifs de livraison |
|
||||
| [Construisez un Mini Programme WeChat](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/wechat-miniprogram/) | Comprenez l'ecosysteme et livrez un mini programme frontend du template au lancement |
|
||||
| [Construisez un Mini Programme WeChat avec backend](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/wechat-miniprogram-backend/) | Ajoutez une logique backend et des bases de donnees pour completer la boucle metier complete |
|
||||
| [Construisez une application Android](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/android-app/) | Apprenez le developpement d'applications Android avec un flux de travail natif moderne |
|
||||
| [Construisez une application iOS](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/ios-app/) | Apprenez le developpement d'applications iOS et les conventions de l'ecosysteme Apple |
|
||||
| [Construisez une application PWA locale](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/pwa-local-app/) | Transformez un site web en vraie application avec support hors ligne, push et installation |
|
||||
| [Construisez une extension d'assistant IA pour navigateur](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/browser-ai-extension/) | Creez une extension Chrome qui resumera n'importe quelle page avec des APIs cloud ou l'IA integree |
|
||||
| [Construisez une application de bureau avec Electron](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/electron-voice-to-text/) | Construisez une application de bureau voix-vers-texte avec Electron pour trois plateformes |
|
||||
| [Construisez et frappez rapidement un NFT](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/nft-minting/) | Ecrivez un contrat intelligent depuis zero, deployez-le et frappez votre propre NFT |
|
||||
| [Construisez une extension VS Code](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/vscode-extension/) | Construisez un assistant de projet IA avec templates, chat de code et Q&A multi-fichiers |
|
||||
| [Construisez une application de bureau Qt de qualite industrielle](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/qt-industrial-hmi/) | Creez un systeme HMI Qt en temps reel avec tendances, alertes et surveillance |
|
||||
|
||||
#### Annexe des capacites IA
|
||||
|
||||
| Section | Contenu cle |
|
||||
| :------ | :---------- |
|
||||
| [Qu'est-ce que RAG et comment ca fonctionne](https://datawhalechina.github.io/easy-vibe/en/stage-3/ai-advanced/rag-introduction/) | Construisez une comprehension systematique des principes RAG et des architectures courantes |
|
||||
| [Flux de travail RAG intermediaires et avances avec LangGraph](https://datawhalechina.github.io/easy-vibe/en/stage-3/ai-advanced/langgraph-advanced-rag/) | Concevez des flux de travail multi-etapes et des systemes RAG plus avances |
|
||||
|
||||
### 📚 Base de connaissances de l'annexe
|
||||
|
||||
> Couvrant **9 domaines de connaissances majeurs** et **plus de 80 sujets interactifs**, cette annexe utilise l'animation et des composants visuels pour vous aider a comprendre intuitivement les concepts cles, des fondamentaux informatiques a la frontiere de l'IA.
|
||||
>
|
||||
> 👉 [查看完整附录](https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/) · [AI 能力词典](https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/ai-capability-dictionary)
|
||||
> 👉 [Voir l'appendice complet](https://datawhalechina.github.io/easy-vibe/en/appendix/)
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td valign="top" width="33%">
|
||||
<strong>💻 计算机基础</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/transistor-to-cpu.html">从晶体管到 CPU</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/operating-systems.html">操作系统</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/data-encoding-storage.html">数据的编码、存储与传输</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/computer-networks.html">网络：两台电脑如何对话</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/data-structures.html">数据结构</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/algorithm-thinking.html">算法思维入门</a>
|
||||
</td>
|
||||
<td valign="top" width="33%">
|
||||
<strong>🔧 开发工具</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/git-version-control.html">Git：代码的时光机</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/command-line-shell.html">命令行与 Shell 脚本</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/package-managers.html">包管理器</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/debugging-art/">调试的艺术</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/regex.html">正则表达式</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/environment-path.html">环境变量与 PATH</a>
|
||||
</td>
|
||||
<td valign="top" width="33%">
|
||||
<strong>🌐 浏览器与前端</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/javascript-deep-dive.html">JavaScript 语言深入</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/browser-as-os-rendering.html">浏览器渲染管道</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/frontend-frameworks.html">前端框架对比</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/graphics-animation.html">图形与动画</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/web-performance.html">网页性能的度量与优化</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/frontend-engineering.html">前端工程化全貌</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top" width="33%">
|
||||
<strong>🖥️ 服务器与后端</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/http-protocol.html">HTTP 协议</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/api-design.html">API 设计哲学</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/auth-authorization.html">认证与授权体系</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/concurrency-async.html">并发、异步与多线程</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/message-queues.html">消息队列与事件驱动</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/backend-layered-architecture.html">后端分层架构</a>
|
||||
</td>
|
||||
<td valign="top" width="33%">
|
||||
<strong>📊 数据</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/database-fundamentals.html">数据库原理与 SQL</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/database-fundamentals.html">数据库原理</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/data-tracking.html">数据埋点与用户行为采集</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/data-analysis.html">数据分析基础</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/ab-testing.html">A/B 测试与实验驱动</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/data-visualization.html">数据可视化与仪表盘</a>
|
||||
</td>
|
||||
<td valign="top" width="33%">
|
||||
<strong>🏗️ 架构与系统设计</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/6-architecture-and-system-design/monolith-to-microservices.html">从单体到微服务的演进</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/6-architecture-and-system-design/distributed-systems.html">分布式系统的挑战</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/6-architecture-and-system-design/high-availability.html">高可用与容灾</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/6-architecture-and-system-design/system-design-methodology.html">系统设计方法论</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top" width="33%">
|
||||
<strong>☁️ 基础设施与运维</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/docker-containers.html">Docker 容器化</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/kubernetes.html">Kubernetes 编排</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/ci-cd.html">CI / CD 自动化</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/dns-https.html">域名、DNS 与 HTTPS</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/monitoring-logging.html">监控、日志与告警</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/infrastructure-as-code.html">基础设施即代码</a>
|
||||
</td>
|
||||
<td valign="top" width="33%">
|
||||
<strong>🤖 人工智能</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/llm-principles.html">大语言模型的工作原理</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/transformer-attention.html">Transformer 与注意力机制</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/rag.html">RAG 架构</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/ai-agents.html">AI Agent 与工具调用</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/prompt-engineering.html">提示词工程</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/image-generation.html">图像生成原理</a>
|
||||
</td>
|
||||
<td valign="top" width="33%">
|
||||
<strong>🎯 工程素养</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/code-quality-refactoring.html">代码质量与重构</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/testing-strategies.html">测试策略</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/design-patterns.html">设计模式</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/security-thinking.html">安全思维与攻防基础</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/technical-writing.html">技术文档写作</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/open-source-collaboration.html">开源协作</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
### 🎓 Autres cours
|
||||
|
||||
## 🛠️ 如何学习
|
||||
- [Hands-on Modern RL](#autres-cours)
|
||||
- [Learn Harness Engineering](#autres-cours)
|
||||
|
||||
- 根据个人能力，选择性地阅读和实践相关章节，如果有问题欢迎 issue 提问。
|
||||
## 🛠️ Comment apprendre
|
||||
|
||||
## 💻 本地启动本课件
|
||||
- Lisez et pratiquez les sections qui correspondent a votre niveau actuel. Si vous etes bloque, n'hesitez pas a ouvrir un issue.
|
||||
|
||||
### 现代方案
|
||||
## 💻 Executer localement
|
||||
|
||||
在 AI IDE 对话框（vscode、cursor、trae 等）中，输入下列提示词启动本课件：
|
||||
### Approche moderne
|
||||
|
||||
```
|
||||
请你帮我运行这个项目的本地服务
|
||||
Dans une fenetre de chat d'un AI IDE comme VS Code, Cursor ou Trae, vous pouvez simplement dire :
|
||||
|
||||
```text
|
||||
Aidez-moi a executer ce projet localement.
|
||||
```
|
||||
|
||||
### 旧方案
|
||||
### Approche traditionnelle
|
||||
|
||||
1. npm install
|
||||
2. npm run dev
|
||||
3. 打开浏览器访问 `http://localhost:3000` 即可查看。
|
||||
1. `npm install`
|
||||
2. `npm run dev`
|
||||
3. Ouvrez `http://localhost:3000` dans votre navigateur.
|
||||
|
||||
## 🤝 参与贡献
|
||||
## Autres cours
|
||||
|
||||
- 如果你发现了一些问题，或者觉得任何可以改进本项目的地方，可以提 Issue 进行反馈。如果提完没有人回复你可以联系[保姆团队](https://github.com/datawhalechina/DOPMC/blob/main/OP.md)的同学进行反馈跟进~
|
||||
- 如果你想参与贡献本项目，可以提 Pull Request，如果提完没有人回复你可以联系[保姆团队](https://github.com/datawhalechina/DOPMC/blob/main/OP.md)的同学进行反馈跟进~
|
||||
- 如果你对 Datawhale 很感兴趣并想要发起一个新的项目，请按照[Datawhale 开源项目指南](https://github.com/datawhalechina/DOPMC/blob/main/GUIDE.md)进行操作即可~
|
||||
Notre equipe a aussi cree d'autres cours ! Decouvrez-les :
|
||||
|
||||
## 🙏 感谢每位贡献者
|
||||
[](https://github.com/walkinglabs/hands-on-modern-rl)
|
||||
|
||||
- [散步-项目负责人](https://github.com/sanbuphy) (Datawhale成员)
|
||||
- 方可-指导老师（Datawhale成员, 清华大学）
|
||||
- [Yerim Kang](https://github.com/yerim25)（实践项目部分-清华大学）
|
||||
- [赵芷霖](https://github.com/ChileenZ)（实践项目部分-清华大学）
|
||||
- [李亦萱](https://yixuan20.github.io/)（页面美术设计-清华大学）
|
||||
- 刘思怡（实践项目部分-清华大学）
|
||||
- [刘丽欣](https://github.com/liulx25xx)（实践项目部分-清华大学）
|
||||
- AI Vibe Coding 101 内测群完整给建议体验的小伙伴们
|
||||
**Hands-on Modern RL**: Un programme pratique et open source qui comble le fosse entre les concepts de base du RL et l'alignement des LLMs, RLVR et les systemes Agentic avances.
|
||||
|
||||
### 特别感谢
|
||||
[](https://github.com/walkinglabs/learn-harness-engineering/tree/main)
|
||||
|
||||
- 感谢 [@Sm1les](https://github.com/Sm1les) 对本项目的帮助与支持
|
||||
- 感谢所有为本项目做出贡献的开发者们和支持点赞的朋友们 ❤️
|
||||
**Learn Harness Engineering**: Un guide complet sur l'ingenierie des harnais.
|
||||
|
||||
## 🤝 Contribuer et contributeurs
|
||||
|
||||
- Si vous trouvez un probleme ou voyez quelque chose qui peut etre ameliore, n'hesitez pas a ouvrir un issue. Si personne ne repond, vous pouvez aussi contacter l'[equipe de support Datawhale](https://github.com/datawhalechina/DOPMC/blob/main/OP.md).
|
||||
- Si vous voulez contribuer, ouvrez un pull request. Si personne ne repond, vous pouvez aussi contacter l'[equipe de support Datawhale](https://github.com/datawhalechina/DOPMC/blob/main/OP.md).
|
||||
- Si vous voulez lancer un nouveau projet open source Datawhale, veuillez suivre le [Guide des Projets Open Source Datawhale](https://github.com/datawhalechina/DOPMC/blob/main/GUIDE.md).
|
||||
|
||||
### 🙏 Contributeurs
|
||||
|
||||
- [Sanbu - Chef de projet](https://github.com/sanbuphy) (Membre Datawhale)
|
||||
- Fang Ke - Mentor (Membre Datawhale, Universite Tsinghua)
|
||||
- [Yerim Kang](https://github.com/yerim25) (Projets pratiques, Universite Tsinghua)
|
||||
- [Zhilin Zhao](https://github.com/ChileenZ) (Projets pratiques, Universite Tsinghua)
|
||||
- [Yixuan Li](https://yixuan20.github.io/) (Design visuel, Universite Tsinghua)
|
||||
- Siyi Liu (Projets pratiques, Universite Tsinghua)
|
||||
- [Lixin Liu](https://github.com/liulx25xx) (Projets pratiques, Universite Tsinghua)
|
||||
- Tous les membres du groupe de test interne AI Vibe Coding 101 qui ont partage des suggestions et des commentaires
|
||||
|
||||
### Remerciements speciaux
|
||||
|
||||
- Merci a [@Sm1les](https://github.com/Sm1les) pour l'aide et le soutien sur ce projet
|
||||
- Merci a chaque contributeur et a tous ceux qui ont soutenu le projet avec des commentaires et des etoiles ❤️
|
||||
|
||||
<div align="center">
|
||||
|
||||
|
||||
<a href="https://www.star-history.com/#datawhalechina/easy-vibe&type=timeline&legend=top-left">
|
||||
<picture>
|
||||
<source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=datawhalechina/easy-vibe&type=timeline&theme=dark&legend=top-left" />
|
||||
@@ -455,22 +419,21 @@ Easy-Vibe vous apprend a transformer cela en un vrai produit.
|
||||
</a>
|
||||
</div>
|
||||
|
||||
## 📄 LICENSE
|
||||
## 📄 LICENCE
|
||||
|
||||
<div align="center">
|
||||
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">
|
||||
<img
|
||||
alt="知识共享许可协议"
|
||||
alt="Licence Creative Commons"
|
||||
style="border-width:0"
|
||||
src="https://img.shields.io/badge/license-CC%20BY--NC--SA%204.0-lightgrey"
|
||||
/>
|
||||
</a>
|
||||
<br />
|
||||
本作品采用
|
||||
Cette oeuvre est licenciee sous la
|
||||
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">
|
||||
知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议
|
||||
</a>
|
||||
进行许可。
|
||||
Licence Internationale Creative Commons Attribution-NonCommercial-ShareAlike 4.0
|
||||
</a>.
|
||||
</div>
|
||||
|
||||
## Star History
|
||||
|
||||
+243
-279
@@ -3,6 +3,8 @@
|
||||
|
||||
<img src="../../assets/easy-vibe-logo-hd.svg" alt="Easy-Vibe Logo" width="300">
|
||||
|
||||
<img src="../../assets/banner.png" alt="Easy-Vibe Banner" width="100%">
|
||||
|
||||
<p align="center" style="font-size: 1.2em; color: #666; margin: 20px 0;">
|
||||
さっそく始めて、一緒に vibe しよう。話せればアプリは作れます。<br>
|
||||
<span style="font-size: 0.9em; color: #888;">直接上手，一起 vibe！会说话就会做应用。</span>
|
||||
@@ -11,16 +13,16 @@
|
||||
<a href="https://trendshift.io/repositories/22079" target="_blank"><img src="https://trendshift.io/api/badge/repositories/22079" alt="datawhalechina/easy-vibe | Trendshift" style="width: 250px; height: 55px;" width="250" height="55"/></a>
|
||||
|
||||
<p align="center">
|
||||
🚀 <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">今すぐ始める</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/en/appendix/">インタラクティブ教材</a> · 🦞 <a href="https://github.com/datawhalechina/hello-claw">OpenClaw を学ぶ</a><br>
|
||||
🚀 <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">探索を始める</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/en/appendix/">インタラクティブ教材</a> · 🦞 <a href="https://github.com/datawhalechina/hello-claw">OpenClaw を学ぶ</a> · 📖 <a href="#table-of-contents">目次</a><br>
|
||||
<span style="font-size: 0.85em; color: #888;">🚀 <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">开始体验</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/">交互式教程</a> · 🦞 <a href="https://github.com/datawhalechina/hello-claw">学习 OpenClaw</a> · 📖 <a href="#table-of-contents">查看目录</a></span>
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
<a href="https://datawhalechina.github.io/easy-vibe/welcome.html">読み始める</a> ·
|
||||
<a href="https://datawhalechina.github.io/easy-vibe/welcome.html">オンラインで読む</a> ·
|
||||
<a href="#-content-navigation">学習マップ</a><br>
|
||||
<span style="font-size: 0.85em; color: #888;">
|
||||
<a href="https://datawhalechina.github.io/easy-vibe/welcome.html">开始阅读</a> ·
|
||||
<a href="#-内容导航">学习地图</a>
|
||||
<a href="#-content-navigation">学习地图</a>
|
||||
</span>
|
||||
</p>
|
||||
|
||||
@@ -52,395 +54,357 @@
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/gif-header.png" width="100%">
|
||||
<br>
|
||||
<strong>新手专属学习地图</strong>
|
||||
<strong>初心者向け学習マップ</strong>
|
||||
<br>
|
||||
<sub>零基础专属指引，清晰规划路径，告别“学了忘”</sub>
|
||||
<sub>ゼロから迷わず進める明確なガイダンス、「学んでは忘れる」から脱却</sub>
|
||||
</td>
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/gif-tutorial.png" width="100%">
|
||||
<br>
|
||||
<strong>手把手图文教程</strong>
|
||||
<strong>手取り足取りの図解チュートリアル</strong>
|
||||
<br>
|
||||
<sub>保姆级图文详解，如同私教在旁，跟着做就能学会</sub>
|
||||
<sub>専属講師がそばにいるかのように、詳しい手順を一つずつ解説</sub>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/gif-ide.gif" width="100%">
|
||||
<br>
|
||||
<strong>沉浸式模拟编程</strong>
|
||||
<strong>没入型シミュレーションコーディング</strong>
|
||||
<br>
|
||||
<sub>虚拟鼠标自动导览，带你快速上手 IDE 核心用法</sub>
|
||||
<sub>仮想マウスガイドで IDE の核心的なワークフローを素早く習得</sub>
|
||||
</td>
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/gif-diffusion.gif" width="100%">
|
||||
<br>
|
||||
<strong>看得见的 AI 原理</strong>
|
||||
<strong>目で見える AI の原理</strong>
|
||||
<br>
|
||||
<sub>算法原理动画化，一眼看懂 AI 如何“画”出图片</sub>
|
||||
<sub>アニメーション解説で AI が画像を生成する仕組みを直感的に理解</sub>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/gif-rag.gif" width="100%">
|
||||
<br>
|
||||
<strong>像玩游戏一样学 RAG</strong>
|
||||
<strong>ゲーム感覚で学ぶ RAG</strong>
|
||||
<br>
|
||||
<sub>独家交互组件，点击即可看清 RAG 数据流向</sub>
|
||||
<sub>インタラクティブコンポーネントで RAG のデータフロー全体をクリック操作で理解</sub>
|
||||
</td>
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/git-terminal.gif" width="100%">
|
||||
<br>
|
||||
<strong>可视化终端原理</strong>
|
||||
<strong>可視化されたターミナルの概念</strong>
|
||||
<br>
|
||||
<sub>命令行操作可视化，直观展示后台逻辑与原理</sub>
|
||||
<sub>裏側のロジックを可視化することで、コマンドラインの動作が直感的に理解できる</sub>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div align="center">
|
||||
<h3>⭐ 欢迎 <a href="https://github.com/datawhalechina/easy-vibe" style="color: #d0cd16ff;">点击此处Star</a> 加速更新 ❤️</h3>
|
||||
<h3>⭐ <a href="https://github.com/datawhalechina/easy-vibe" style="color: #d0cd16ff;">こちらで Star を付けると</a> 更新が加速します ❤️</h3>
|
||||
</div>
|
||||
|
||||
<div align="center" style="margin: 30px 0;">
|
||||
<a href="https://github.com/datawhalechina/easy-vibe/issues/new?template=story_submission.md">
|
||||
<img src="https://raw.githubusercontent.com/datawhalechina/easy-vibe/main/assets/stories_image.png" alt="Share Your Vibe Story" width="80%" style="border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.15);">
|
||||
<img src="https://raw.githubusercontent.com/datawhalechina/easy-vibe/main/assets/stories_image.png" alt="あなたの Vibe ストーリーをシェア" width="80%" style="border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.15);">
|
||||
</a>
|
||||
<p style="margin-top: 15px; font-size: 1.1em; color: #666;">
|
||||
📝 <strong>Have your own vibe coding story?</strong>
|
||||
Submit it here and inspire others!
|
||||
📝 <strong>あなたの vibe coding ストーリーがありますか？</strong>
|
||||
こちらから投稿して、他の人にインスピレーションを与えましょう！
|
||||
</p>
|
||||
</div>
|
||||
|
||||
## 为什么需要 Easy-Vibe
|
||||
## 目次
|
||||
|
||||
家計簿アプリを作りたい？そう言えばいい。
|
||||
- [なぜ Easy-Vibe なのか](#なぜ-easy-vibe-なのか)
|
||||
- [ニュース](#-news)
|
||||
- [こんな人におすすめ](#こんな人におすすめ)
|
||||
- [あなたの学習パス](#あなたの学習パス)
|
||||
- [学習のヒント](#学習のヒント)
|
||||
- [I. 初心者入門](#i-初心者入門)
|
||||
- [II. ジュニア・ミッドレベル開発者](#ii-ジュニアミッドレベル開発者)
|
||||
- [III. 上級開発者](#iii-上級開発者)
|
||||
- [附録 ナレッジベース](#-附录ナレッジベース)
|
||||
- [学び方](#️-学び方)
|
||||
- [ローカルで実行](#-ローカルで実行)
|
||||
- [その他のコース](#その他のコース)
|
||||
- [貢献と貢献者](#-貢献と貢献者)
|
||||
- [ライセンス](#-ライセンス)
|
||||
|
||||
WeChat ログイン付きの予約システムが必要？そう言えばいい。
|
||||
## なぜ Easy-Vibe なのか
|
||||
|
||||
コメント付きのブログを作りたい？そう言えばいい。
|
||||
家計簿アプリを作りたい？言葉にするだけでいい。
|
||||
|
||||
AI 時代のプログラミングは、欲しいものを言葉で伝えるところから始まります。
|
||||
WeChat ログイン付きの予約システムが必要？言葉にするだけでいい。
|
||||
|
||||
コメント機能付きのブログを作りたい？言葉にするだけでいい。
|
||||
|
||||
AI 時代のプログラミングは、欲しいものを言葉で伝えることから始まります。
|
||||
|
||||
Easy-Vibe は、それを本物のプロダクトにする方法を教えます。
|
||||
|
||||
|
||||
## 🔥 News
|
||||
|
||||
- **[2026-03-29]** ✨ **ユーザーストーリー特集を公開し、実話ベースの4本に更新**：ホームにインタラクティブなストーリーカルーセルと専用ページを追加し、仮の内容を農村の小学校教師、大学生、高校の情報技術教師、トラック運転手による 4 本の実話に差し替えました。[👉 查看故事](https://datawhalechina.github.io/easy-vibe/zh-cn/vibe-stories/story-1.html)
|
||||
- **[2026-03-26]** 🚀 **ステージ2実践コンテンツの集中更新**：SaaS キャップストーンプロジェクト「[最初の SaaS フルスタックアプリ——コピー生成サイト](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/assignments/copywriting-platform-supabase/)」を完成し、「[Stripe などの決済システムの統合方法](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/backend/stripe-payment/)」セクションを大幅に拡充しました。
|
||||
- **[2026-03-25]** 📚 **新規附录「ユーザー研究と要件検証」**：4 つの記事——アイデアの探し方、ダブルダイヤモンドモデル、Jobs to Be Done、The Mom Test ユーザーインタビュー法を含み、初心者が製品アイデアを発見し検証するのを支援します。[👉 附录を読む](https://datawhalechina.github.io/easy-vibe/en/appendix/)
|
||||
- **[2026-03-25]** 📚 **英文ドキュメント全面更新**：ステージ2（フルスタック開発）とステージ3（高度開発）が完全に英語で利用可能になりました。[👉 学習を始める](https://datawhalechina.github.io/easy-vibe/en/stage-2/)
|
||||
- **[2026-03-02]** 🦞 **OpenClaw & AI Agent フレンドリーサポート**：`llms.txt` AI ナビゲーションファイルを追加し、OpenClaw、Claude、Cursor、Trae などの AI Agent がリポジトリ構造を迅速に理解し、チュートリアルコンテンツを正確に見つけられるようにしました。
|
||||
- **[2026-03-01]** [高度開発セクション](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/)全面アップグレード：Claude Code の7つの詳細ガイド（MCP、Skills、Agent Teams など）と8つのクロスプラットフォーム開発実践（PWA、Electron、NFT、VS Code 拡張機能、Qt 産業アプリケーションなど）を追加。
|
||||
- **[2026-02-25]** [附录ナレッジベース](https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/)を更新し、9 大ナレッジ領域、80+ インタラクティブトピックをカバー。
|
||||
- **[2026-01-27]** Android および iOS プラットフォームアプリケーション開発チュートリアルを追加。
|
||||
- **[2026-01-19]** Prompt Engineering、AI 進化史、認証設計、Git 原理などの一連のインタラクティブデモコンポーネントをリリースし、視覚的学習体験を大幅に向上。
|
||||
## 🔥 ニュース
|
||||
|
||||
- **[2026-03-29]** ✨ **Vibe ストーリーズを公開し、実ユーザーの体験談にアップグレード**：ホームページにインタラクティブなカルーセルと専用ストーリーページを追加し、仮の内容を農村の小学校教師、大学生、高校の情報技術教師、トラック運転手による 4 つの実話に差し替えました。[👉 ストーリーを見る](https://datawhalechina.github.io/easy-vibe/zh-cn/vibe-stories/story-1.html)
|
||||
- **[2026-03-26]** 🚀 **ステージ 2 実践コンテンツの大幅更新**：SaaS キャップストーンプロジェクト「[最初の SaaS フルスタックアプリ：コピー生成サイト](https://datawhalechina.github.io/easy-vibe/en/stage-2/assignments/fullstack-app/)」を完成し、「[Stripe などの決済システムの統合方法](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/stripe-payment/)」セクションを大幅に拡充し、マルチプロダクト UI や WeChat ミニプログラムのバックエンドワークフローに関する重要コンテンツも追加。
|
||||
- **[2026-03-25]** 📚 **新規附録：ユーザー調査と要件検証**：アイデアの探し方、ダブルダイヤモンドモデル、Jobs to Be Done、The Mom Test の 4 つの新記事を追加し、初心者が製品アイデアを発見・検証できるよう支援。[👉 附録を読む](https://datawhalechina.github.io/easy-vibe/en/appendix/)
|
||||
- **[2026-03-25]** 📚 **英語ドキュメント全面更新**：ステージ 2（フルスタック開発）とステージ 3（高度開発）が完全に英語で利用可能になりました。[👉 学習を始める](https://datawhalechina.github.io/easy-vibe/en/stage-2/)
|
||||
<details>
|
||||
<summary>過去のニュース</summary>
|
||||
|
||||
- **[2026-01-16]** プロジェクト構造を再構築し、「初心者入門」セクションを正式に確立し、導入障壁を低下。
|
||||
- **[2026-01-14]** ステージ1「製品プロトタイプ構築」ドキュメントの大規模更新を完了。
|
||||
- **[2026-01-13]** ドキュメントアーキテクチャを再構築し、多言語サポート (i18n) を全面有効化。
|
||||
- **[2026-01-01]** プロジェクトのコア学習マップ (Learning Map) をリリースし、学習パスを明確化。
|
||||
- **[2026-03-02]** 🦞 **OpenClaw & AI Agent フレンドリーサポート**：`llms.txt` を追加し、OpenClaw、Claude、Cursor、Trae などの AI Agent がリポジトリ構造を迅速に理解し、適切なチュートリアルコンテンツを見つけられるようにしました。
|
||||
- **[2026-03-01]** [高度開発セクション](https://datawhalechina.github.io/easy-vibe/en/stage-3/)を全面アップグレード：Claude Code の詳細ガイド（MCP、Skills、Agent Teams など）と 8 つのクロスプラットフォームプロジェクトチュートリアルを追加。
|
||||
- **[2026-02-25]** [附録ナレッジベース](https://datawhalechina.github.io/easy-vibe/en/appendix/)を更新し、9 つの主要ナレッジ領域と 80 以上のインタラクティブトピックをカバー。
|
||||
- **[2026-01-27]** Android と iOS アプリ開発チュートリアルを追加。
|
||||
- **[2026-01-19]** Prompt Engineering、AI 歴史、認証設計、Git 原理などのインタラクティブデモをリリース。
|
||||
- **[2026-01-16]** プロジェクト構造を再構築し、初心者向け入門パスを正式に確立。
|
||||
- **[2026-01-14]** ステージ 1 のプロダクトプロトタイピングドキュメントの大規模更新を完了。
|
||||
- **[2026-01-13]** ドキュメントアーキテクチャを再構築し、多言語サポートを完全に有効化。
|
||||
- **[2026-01-01]** プロジェクトのコア学習マップをリリース。
|
||||
</details>
|
||||
|
||||
## 适合谁
|
||||
## こんな人におすすめ
|
||||
|
||||
- **零基础爱好者**：先做出第一个作品，再理解怎么做
|
||||
- **产品经理 / 创业者**：快速验证想法，低成本做 MVP
|
||||
- **学生**：建立 AI 时代的实战技能
|
||||
- **初级开发者**：补齐从想法到上线的完整开发链路
|
||||
- **中高级开发者**：掌握 AI 协作开发、复杂项目实战与效率升级
|
||||
- **完全な初心者**：まずは最初のプロジェクトを作り、仕組みは後から理解する
|
||||
- **プロダクトマネージャー / 起業家**：アイデアを素早く検証し、低コストで MVP を構築
|
||||
- **学生**：AI 時代の実践的スキルを身につける
|
||||
- **ジュニア開発者**：アイデアからリリースまでの全工程を学ぶ
|
||||
- **ミッドレベル・シニア開発者**：複雑なプロジェクトでの AI 協働ワークフローをアップグレード
|
||||
|
||||
|
||||
|
||||
## 你的学习路径
|
||||
## あなたの学習パス
|
||||
|
||||
### 🎮 我想先试试（5分钟体验）
|
||||
**适合人群**：所有人
|
||||
**学什么**：AI 编程初体验、贪吃蛇小游戏
|
||||
**你会得到**：5 分钟做出第一个 AI 应用
|
||||
### 🎮 まずはサクッと体験したい
|
||||
**対象**：すべての人
|
||||
**学ぶこと**：シンプルで具体的なハンズオンを通じて、AI コーディングがどのようなものか体験する
|
||||
**得られるもの**：vibe coding の明確な第一印象と、AI との対話による開発手法
|
||||
|
||||
[开始体验](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/learning-map/)
|
||||
[ここから始める](https://datawhalechina.github.io/easy-vibe/en/stage-1/ai-capabilities-through-games/)
|
||||
|
||||
### 💡 我有个想法要实现
|
||||
**适合人群**：零基础/产品经理/创业者
|
||||
**学什么**：AI IDE 工具、需求拆解、页面设计、功能规划、提示词写法、原型迭代
|
||||
**你会得到**：一个可演示的产品原型
|
||||
### 💡 アイデアをプロダクトプロトタイプにしたい
|
||||
**対象**：初心者 / プロダクトマネージャー / 起業家
|
||||
**学ぶこと**：学習マップ、AI IDE ツール、アイデア検証、プロトタイピング、AI 機能統合、フルデモの反復開発
|
||||
**得られるもの**：ユーザーやチームメンバーに見せられる、実動する AI プロダクトプロトタイプ
|
||||
|
||||
[开始学习](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/learning-map/)
|
||||
[学習を始める](https://datawhalechina.github.io/easy-vibe/en/stage-1/learning-map/)
|
||||
|
||||
### 🚀 我想系统学习
|
||||
**适合人群**：开发者/进阶学习者
|
||||
**学什么**：前端、后端、数据库、AI 集成、部署运维、Claude Code 开发技巧
|
||||
**你会得到**：独立完成一个可上线的全栈 AI 应用
|
||||
### 🚀 エンドツーエンドでフルスタックプロダクトを構築したい
|
||||
**対象**：ジュニア開発者 / インディーハッカー / 上級学習者
|
||||
**学ぶこと**：フロントエンドワークフロー、デザイン to コード、データベース、バックエンド API、デプロイメント、決済、大型プロジェクト
|
||||
**得られるもの**：モダンな AI 対応 Web アプリケーションを独自にリリースする力
|
||||
|
||||
[开始学习](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/)
|
||||
[学習を始める](https://datawhalechina.github.io/easy-vibe/en/stage-2/)
|
||||
|
||||
### 🦞 我想构建 AI Agent
|
||||
**适合人群**：对 AI Agent 感兴趣的开发者
|
||||
**学什么**：OpenClaw AI 助理、Skills 系统、自动化工作流
|
||||
**你会得到**：一个属于你的命令行 AI 助理
|
||||
### AI ネイティブ：高度な Claude Code とエージェントワークフローを学びたい
|
||||
**対象**：AI ネイティブエンジニアリングに興味のある開発者
|
||||
**学ぶこと**：Claude Code、MCP、Skills、Agent Teams、長時間タスク、Spec Coding、クロスプラットフォームアプリ開発
|
||||
**得られるもの**：複雑な AI 支援開発と自動化のための強力なワークフロー
|
||||
|
||||
[开始学习](https://github.com/datawhalechina/hello-claw)
|
||||
[高度開発へ進む](https://datawhalechina.github.io/easy-vibe/en/stage-3/)
|
||||
|
||||
### 📚 我想查资料
|
||||
**适合人群**：所有人
|
||||
**学什么**：计算机基础、AI 原理、9 大知识领域
|
||||
**你会得到**：80+ 交互式专题资料
|
||||
### 📚 参考資料と基礎知識を身につけたい
|
||||
**対象**：すべての人
|
||||
**学ぶこと**：コンピュータの基礎、フロントエンド / バックエンドの基本、インフラ、AI の原理、エンジニアリングの実践
|
||||
**得られるもの**：9 つの主要ナレッジ領域をカバーする長期参照用ナレッジベース
|
||||
|
||||
[查看知识库](https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/)
|
||||
[ナレッジベースを見る](https://datawhalechina.github.io/easy-vibe/en/appendix/)
|
||||
|
||||
## 学习建议
|
||||
## 学習のヒント
|
||||
|
||||
- 零基础、产品经理、创业者：从 [第一阶段](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/learning-map/) 开始
|
||||
- 有开发经验：从 [第二阶段](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/) 开始
|
||||
- 想直接做复杂项目：进入 [第三阶段](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/)
|
||||
- 想学 AI Agent：看 [Hello Claw](https://github.com/datawhalechina/hello-claw)
|
||||
- 初心者、プロダクトマネージャー、起業家は [ステージ 1](https://datawhalechina.github.io/easy-vibe/en/stage-1/learning-map/) から始めましょう
|
||||
- プロトタイプからフルスタック開発へ進みたい場合は [ステージ 2](https://datawhalechina.github.io/easy-vibe/en/stage-2/) から始めましょう
|
||||
- 高度な Claude Code ワークフローやクロスプラットフォームプロジェクトを学びたい場合は [ステージ 3](https://datawhalechina.github.io/easy-vibe/en/stage-3/) へ進みましょう
|
||||
- 概念や背景知識で行き詰まった場合は [附録ナレッジベース](https://datawhalechina.github.io/easy-vibe/en/appendix/) を活用しましょう
|
||||
|
||||
### 📖 内容导航
|
||||
### 📖 コンテンツナビゲーション
|
||||
|
||||
<div align="center">
|
||||
<img src="../../assets/readme-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;"/>
|
||||
<img src="../../assets/readme-image1.png" alt="学習マップ" width="70%" style="border-radius: 10px; box-shadow: 0 8px 20px rgba(45,55,72,0.3); margin: 15px 0;"/>
|
||||
</div>
|
||||
|
||||
### 一、零基础入门
|
||||
### I. 初心者入門
|
||||
|
||||
| 章节 | 关键内容 |
|
||||
| :----------------------------------------------------------------------------------- | :------------------------------------------------ |
|
||||
| [学习地图](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/learning-map/) | 整体学习路径导览 |
|
||||
| [AI 时代，会说话就会编程](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/ai-capabilities-through-games/) | 通过贪吃蛇等案例初步感受 AI 编程的能力 |
|
||||
| [寻找好想法](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/finding-great-idea/) | 学会寻找和验证产品想法，找到值得做的项目 |
|
||||
| [认识 AI IDE 工具](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/introduction-to-ai-ide/) | 学会使用 IDE，在本地制作小游戏 |
|
||||
| [动手做出原型](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/building-prototype/) | 从需求分析、AI 生成单页面，再到生成多页面产品原型 |
|
||||
| [给原型加上 AI 能力](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/integrating-ai-capabilities/) | 学会接入常见 AI 能力（文本、图片、视频） |
|
||||
| [完整项目实战](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/complete-project-practice/) | 模拟真实场景、接受用户反馈迭代，完整化项目 |
|
||||
| セクション | 主要コンテンツ |
|
||||
| :------ | :---------- |
|
||||
| [学習マップ](https://datawhalechina.github.io/easy-vibe/en/stage-1/learning-map/) | 学習全体のガイド付き概覧 |
|
||||
| [AI 時代：話せればプログラミングできる](https://datawhalechina.github.io/easy-vibe/en/stage-1/ai-capabilities-through-games/) | スネークゲームなどの例で AI コーディングを初体験 |
|
||||
| [AI プログラミングツールをマスターする](https://datawhalechina.github.io/easy-vibe/en/stage-1/introduction-to-ai-ide/) | AI IDE ツールの使い方を学び、シンプルなローカルプロジェクトを構築 |
|
||||
| [良いアイデアを見つける](https://datawhalechina.github.io/easy-vibe/en/stage-1/finding-great-idea/) | 作る価値のあるプロダクトアイデアを見つけ検証する方法を学ぶ |
|
||||
| [プロダクトプロトタイプを構築する](https://datawhalechina.github.io/easy-vibe/en/stage-1/building-prototype/) | 要件から単一ページ・複数ページのプロダクトプロトタイプへ |
|
||||
| [AI 機能を統合する](https://datawhalechina.github.io/easy-vibe/en/stage-1/integrating-ai-capabilities/) | テキスト、画像、動画の AI 機能を統合 |
|
||||
| [完全プロジェクト実践](https://datawhalechina.github.io/easy-vibe/en/stage-1/complete-project-practice/) | 実際のシナリオをシミュレーションし、ユーザーフィードバックを集めてプロジェクトを反復開発 |
|
||||
|
||||
#### 附录：业务思维
|
||||
#### 附録：プロダクトとビジネス思考
|
||||
|
||||
| 章节 | 关键内容 |
|
||||
| :----------------------------------------------------------------------------------- | :----------------------------------------- |
|
||||
| [产品思维与方案设计](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-a-product-thinking/) | 从零到一做产品需要考虑的思维框架 |
|
||||
| [AI 行业应用场景参考 (B端)](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-industry-scenarios/) | 了解 AI 在不同产业的应用场景 |
|
||||
| [AI 消费场景灵感参考 (C端)](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-c-consumer-scenarios/) | 探索 AI 在消费级产品中的应用场景 |
|
||||
| セクション | 主要コンテンツ |
|
||||
| :------ | :---------- |
|
||||
| [プロダクト思考とソリューション設計](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-a-product-thinking/) | ゼロからイチのプロダクトを作るための核心フレームワーク |
|
||||
| [AI 業界アプリケーションシナリオ（BtoB）](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-industry-scenarios/) | 業界横断的な AI の活用方法を理解する |
|
||||
| [AI コンシューマーシナリオのインスピレーション（BtoC）](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-c-consumer-scenarios/) | コンシューマー AI におけるプロダクト機会を探る |
|
||||
|
||||
#### 附录：技术方案
|
||||
#### 附録：ユーザー調査と要件検証
|
||||
|
||||
| 章节 | 关键内容 |
|
||||
| :---------------------------------------------------------------------------------------------------------------------- | :----------------------------------------- |
|
||||
| [写代码时遇到错误怎么办](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-b-common-errors/) | vibe coding 中的常见错误及排查方法 |
|
||||
| [七款 AI 编程工具对比](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial) | 对比测试主流 AI 编程平台 |
|
||||
| [用设计和编程 Agent 设计网站](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents) | 学习如何使用 AI 智能体协同工作 |
|
||||
| セクション | 主要コンテンツ |
|
||||
| :------ | :---------- |
|
||||
| [アイデアの探し方：初心者に最適な 3 つの参考ソース](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-idea-sources/) | 具体的なプロダクト機会を見つけるための信頼できるパイプラインを構築 |
|
||||
| [ダブルダイヤモンド：まず正しいことをして、それから正しくやる](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-double-diamond/) | 構造化されたプロセスで散在するインスピレーションから実行可能な方向へ |
|
||||
| [Jobs to Be Done でユーザーが本当に望むことを見つける](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-jobs-to-be-done/) | 表面的な機能要望ではなく、実際のタスクを通じてユーザーの目標を分析 |
|
||||
| [The Mom Test：需要を検証するためのユーザーインタビュー法](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-mom-test/) | より良い質問の仕方を学び、誤検出フィードバックを回避する |
|
||||
|
||||
### 二、初中级开发工程师
|
||||
#### 附録：技術ソリューション
|
||||
|
||||
#### 前端部分
|
||||
| セクション | 主要コンテンツ |
|
||||
| :------ | :---------- |
|
||||
| [エラーに遭遇したらどうするか](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-b-common-errors/) | vibe coding でのよくある問題とトラブルシューティング方法 |
|
||||
| [7 つの AI プログラミングツールの比較](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial) | 実際のテストを通じて主要 AI コーディングプラットフォームを比較 |
|
||||
| [エージェントでウェブサイトをデザインする](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents) | 実践的なマルチエージェントコラボレーションを学ぶ |
|
||||
|
||||
| 章节 | 关键内容 |
|
||||
| :--------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------- |
|
||||
| [从Lovart出发，搭建自己的素材生产Agent](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/frontend/lovart-assets/) | 从零开始，利用Nanobanana和Lovart批量生成高质量的设计素材，并动手构建一个能意图识别的绘图Agent |
|
||||
| [Figma 与 MasterGo 入门](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/frontend/figma-mastergo/) | 用设计工具梳理信息架构和页面结构，为前端实现打基础 |
|
||||
| [构建第一个现代应用程序-UI 设计](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/frontend/ui-design/) | 基于设计稿完成组件化界面，实现从设计到代码的第一条链路 |
|
||||
| [参考 UI 设计规范与多产品 UI 设计](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/frontend/multi-product-ui/) | 围绕统一主视觉扩展多产品界面，练习系统化设计能力 |
|
||||
| [用 LLM 和 Skills 让界面变好看](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/frontend/llm-skills-beautiful/) | 用提示词和 Skills 插件让 AI 生成美观独特的界面 |
|
||||
| [一起做霍格沃茨画像](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/frontend/hogwarts-portraits/) | 从 0 到 1 做出接入 AI 能力的前端应用，串联设计与开发 |
|
||||
| [从设计原型到项目代码](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/frontend/design-to-code/) | 三种路径将设计工具中的原型转化为前端代码 |
|
||||
| [使用现代组件库更新你的界面](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/frontend/modern-component-library/) | 用组件库快速构建专业级界面，统一风格、提升开发效率 |
|
||||
### II. ジュニア・ミッドレベル開発者
|
||||
|
||||
#### 后端开发部分
|
||||
#### フロントエンド
|
||||
|
||||
| 章节 | 关键内容 |
|
||||
| :------------------------------------------------------------------------------------------------- | :---------------------------------------------------------- |
|
||||
| [从数据库到 Supabase](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/backend/database-supabase/) | 在 Supabase 上落地数据库和 API，打通数据模型与前端页面 |
|
||||
| [大模型辅助编写接口代码与接口文档](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/backend/ai-interface-code/) | 用大模型协助生成接口与数据库文档及代码，实现可读可测的后端 |
|
||||
| [Git 和 GitHub 工作流](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/backend/git-workflow/) | 在 Git 工作流中管理代码，进行版本控制和协作 |
|
||||
| [如何部署 Web 应用](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/backend/zeabur-deployment/) | 使用 CloudBase、Vercel、Zeabur 等平台部署应用上线 |
|
||||
| [CLI AI 编程工具](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/backend/modern-cli/) | 使用 CLI 类 AI 编程工具加速开发与调试，形成个人工程化工作流 |
|
||||
| [如何集成 Stripe 等收费系统](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/backend/stripe-payment/) | 接入支付系统，完成收费链路与基础结算流程 |
|
||||
| [大作业：构建第一个现代应用程序-全栈应用](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/assignments/copywriting-platform-supabase/) | 综合前端、后端与支付模块，完成可上线的全栈 Web 应用 |
|
||||
| セクション | 主要コンテンツ |
|
||||
| :------ | :---------- |
|
||||
| [フロントエンド 0：Lovart で自分専用の素材制作エージェントを構築](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/lovart-assets/) | Nanobanana と Lovart を使ってビジュアル素材を一括生成し、意図認識付きの描画エージェントを構築 |
|
||||
| [フロントエンド 1：Figma と MasterGo の基礎](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/figma-mastergo/) | デザインカンプから実装可能な UI 設計思考までのワークフローを学ぶ |
|
||||
| [フロントエンド 2：最初のモダンアプリを構築 - UI デザイン](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/ui-design/) | モダンアプリケーションインターフェースの背後にある UI デザインの基礎を学ぶ |
|
||||
| [フロントエンド 3：UI ガイドラインとマルチプロダクトデザイン](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/multi-product-ui/) | 共通の UI ルールで複数プロダクト間の一貫性と美しさを向上 |
|
||||
| [フロントエンド 4：LLM と Skills でインターフェースを美しく](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/llm-skills-beautiful/) | プロンプトとプラグインを使って AI により洗練された独自のインターフェースを生成 |
|
||||
| [フロントエンド 4：ホグワーツの肖像画を作ろう](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/hogwarts-portraits/) | ゼロからインタラクティブな AI 画像フロントエンドプロジェクトを構築 |
|
||||
| [フロントエンド 6：デザインプロトタイプからプロジェクトコードへ](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/design-to-code/) | デザインプロトタイプをブラウザで実際に動くフロントエンドコードに変換 |
|
||||
| [フロントエンド 7：モダンコンポーネントライブラリで UI をアップグレード](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/modern-component-library/) | コンポーネントライブラリでプロフェッショナルなインターフェースを素早く構築 |
|
||||
|
||||
#### AI 能力附录
|
||||
#### バックエンド
|
||||
|
||||
| 章节 | 关键内容 |
|
||||
| :------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------- |
|
||||
| [Dify 入门与知识库集成](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/ai-capabilities/dify-knowledge-base/) | 用 Dify Workflow 与基础 RAG 搭建工具类产品，为后续应用升级打样 |
|
||||
| セクション | 主要コンテンツ |
|
||||
| :------ | :---------- |
|
||||
| [バックエンド 1：Git と GitHub を学ぶ](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/git-workflow/) | Git のコアバージョン管理操作とコラボレーションワークフローをマスター |
|
||||
| [バックエンド 2：データベースから Supabase まで](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/database-supabase/) | リレーショナルデータベースの基礎を学び、Supabase をモダン BaaS プラットフォームとして活用 |
|
||||
| [バックエンド 3：バックエンド API 設計と開発](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/ai-interface-code/) | AI を活用した API 設計、バックエンドコード生成、API ドキュメント |
|
||||
| [バックエンド 4：プロダクトプロトタイプをリリースする](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/zeabur-deployment/) | フルスタックアプリケーションを Zeabur で素早くクラウドにデプロイ |
|
||||
| [バックエンド 5：IDE から CLI AI コーディングツールへ](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/modern-cli/) | ターミナルファーストの AI コーディングワークフローを探索 |
|
||||
| [バックエンド 6：Stripe やその他の決済システムを統合する](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/stripe-payment/) | 支払いと決済機能でマネタイズを追加 |
|
||||
|
||||
### 三、高级开发工程师
|
||||
#### 大型プロジェクト
|
||||
|
||||
#### Claude Code 核心技能
|
||||
| セクション | 主要コンテンツ |
|
||||
| :------ | :---------- |
|
||||
| [大型プロジェクト 1：最初の SaaS フルスタックアプリ - AI コピー生成サイト](https://datawhalechina.github.io/easy-vibe/en/stage-2/assignments/fullstack-app/) | ログイン、生成、決済、管理機能付きの AI マーケティングコピー作成ワークスペースを構築 |
|
||||
| [大型プロジェクト 2：オンライン試験・管理システム](https://datawhalechina.github.io/easy-vibe/en/stage-2/assignments/modern-frontend-trae/) | 問題生成、受験フロー、管理ツール付きのオンライン試験システムを構築 |
|
||||
|
||||
| 章节 | 关键内容 |
|
||||
| :------------------------------------------------------------------------------------------------------ | :----------------------------------------------------------- |
|
||||
| [Claude Code 快速上手](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/core-skills/basics/) | 安装配置、基础操作、实用技巧和常用指令 |
|
||||
| [Claude Code MCP 完全指南](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/core-skills/mcp/) | 通过 MCP 让 Claude Code 连接 GitHub、数据库、API 等外部服务 |
|
||||
| [Claude Code Skills 完全指南](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/core-skills/skills/) | 将专业知识打包成可复用技能包，一次配置反复使用 |
|
||||
| [Claude Code 工作流最佳实践](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/core-skills/workflow/) | 日常开发、代码重构、Code Review 等场景的最佳实践 |
|
||||
| [Claude Agent Teams 完全指南](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/core-skills/agent-teams/) | 多 AI 实例协同工作，像真正的开发团队一样并行协作 |
|
||||
| [Claude Code Superpowers 工程级开发](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/core-skills/superpowers/) | 让 AI 写出工程级代码，遵循 TDD 和最佳实践 |
|
||||
| [如何让 Claude Code 长时间工作](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/core-skills/long-running-tasks/) | 设计长时间运行的任务，让 Coding Tools 持续工作直到完成 |
|
||||
#### AI 機能 附録
|
||||
|
||||
#### 多平台开发
|
||||
| セクション | 主要コンテンツ |
|
||||
| :------ | :---------- |
|
||||
| [AI 1：Dify 基礎とナレッジベース統合](https://datawhalechina.github.io/easy-vibe/en/stage-2/ai-capabilities/dify-knowledge-base/) | Dify で AI アプリケーションを構築し、プライベートナレッジベースを統合する方法を学ぶ |
|
||||
|
||||
| 章节 | 关键内容 |
|
||||
| :------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------- |
|
||||
| [如何构建微信小程序](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/wechat-miniprogram/) | 了解微信小程序生态，从官方模板到上线完成一个前端小程序 |
|
||||
| [如何构建微信小程序-包含后端](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/wechat-miniprogram-backend/) | 在小程序中接入数据库与后端逻辑，打通完整业务闭环 |
|
||||
| [如何构建安卓程序](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/android-app/) | 使用 Expo 等工具，完成 Web/原生一体化的安卓应用开发 |
|
||||
| [如何构建 iOS 程序](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/ios-app/) | 使用 Expo 等工具，完成 Web/原生一体化的 iOS 应用开发 |
|
||||
| [如何开发 PWA 本地应用](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/pwa-local-app/) | 让网页变成"真正的 App"，支持离线、推送、桌面安装 |
|
||||
| [如何开发浏览器 AI 助手插件](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/browser-ai-extension/) | 开发 Chrome 插件，一键总结任意网页，支持云端 API 和内置 AI |
|
||||
| [如何开发 Electron 桌面程序](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/electron-voice-to-text/) | 用 Electron 构建语音转文字桌面应用，支持三平台安装运行 |
|
||||
| [如何快速开发并铸造 NFT](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/nft-minting/) | 从零编写智能合约，部署到以太坊测试网，铸造自己的 NFT |
|
||||
| [如何开发 VS Code 插件](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/vscode-extension/) | 开发 AI 项目助手插件，支持模板生成、代码对话、多文件问答 |
|
||||
| [如何开发工业级 Qt 桌面应用](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/qt-industrial-hmi/) | 用 Qt 构建工业级水泵监控 HMI 系统，实时数据、趋势图、报警 |
|
||||
### III. 上級開発者
|
||||
|
||||
#### AI 能力附录
|
||||
#### Claude Code コアスキル
|
||||
|
||||
| 章节 | 关键内容 |
|
||||
| :---------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------ |
|
||||
| [什么是 RAG 以及它如何工作](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/ai-advanced/rag-introduction/) | 系统理解 RAG 原理与常见架构，为复杂应用提供知识检索基础 |
|
||||
| [中高级 RAG 与工作流编排：以 LangGraph 为例](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/ai-advanced/langgraph-advanced-rag/) | 使用 LangGraph 等工具设计多步工作流与中高级 RAG 系统 |
|
||||
| セクション | 主要コンテンツ |
|
||||
| :------ | :---------- |
|
||||
| [Claude Code 入門](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/basics/) | インストール、セットアップ、基礎、便利なコマンド |
|
||||
| [Claude Code MCP ガイド](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/mcp/) | MCP を通じて Claude Code を GitHub、データベース、API などのサービスに接続 |
|
||||
| [Claude Code Skills ガイド](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/skills/) | 専門知識を再利用可能なスキルとしてパッケージ化 |
|
||||
| [長時間タスクで Claude Code を働かせ続ける方法](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/long-running-tasks/) | コーディングツールが完了まで働き続けられるよう長時間タスクを設計 |
|
||||
| [Claude Agent Teams ガイド](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/agent-teams/) | 複数の AI インスタンスを本当の開発チームのように連携 |
|
||||
| [エンジニアリング級開発のための Claude Code Superpowers](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/superpowers/) | TDD とベストプラクティスで AI にエンジニアリング級のコードを書かせる |
|
||||
| [Claude Code ワークフローベストプラクティス](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/workflow/) | リファクタリング、コードレビュー、日常開発のベストプラクティス |
|
||||
| [モバイルでの Claude Code リモート開発](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/mobile-development/) | デスクトップを超えて Claude Code を活用し、モバイルデバイスで生産的なリモートワークフローを構築 |
|
||||
| [Claude Agent SDK 完全ガイド](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/claude-agent-sdk/) | カスタムエージェントワークフローを構築し、SDK で Claude を独自のツールに統合 |
|
||||
| [vibe coding から spec coding へ](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/spec-coding/) | アドホックなプロンプトから、より構造化された仕様駆動の AI 開発ワークフローへ移行 |
|
||||
|
||||
### 📚 附录知识库
|
||||
#### クロスプラットフォーム開発
|
||||
|
||||
> 涵盖 **9 大知识领域**、**80+ 交互式专题**，以动画和可视化组件帮助你直观理解从计算机底层到 AI 前沿的核心概念。
|
||||
| セクション | 主要コンテンツ |
|
||||
| :------ | :---------- |
|
||||
| [アプリに適したプラットフォームの選び方](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/choose-platform/) | アプリ形態を比較し、ユーザー、シナリオ、配信目標に基づいて適切なプラットフォームを選択 |
|
||||
| [WeChat ミニプログラムを構築する](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/wechat-miniprogram/) | エコシステムを理解し、テンプレートからリリースまでフロントエンドミニプログラムを完成 |
|
||||
| [バックエンド付き WeChat ミニプログラムを構築する](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/wechat-miniprogram-backend/) | バックエンドロジックとデータベースを追加して完全なビジネスループを完成 |
|
||||
| [Android アプリを構築する](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/android-app/) | モダンなネイティブワークフローで Android アプリ開発を学ぶ |
|
||||
| [iOS アプリを構築する](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/ios-app/) | iOS アプリ開発と Apple エコシステムの規約を学ぶ |
|
||||
| [ローカル PWA アプリを構築する](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/pwa-local-app/) | オフラインサポート、プッシュ通知、インストール機能でウェブサイトを本当のアプリに変換 |
|
||||
| [ブラウザ AI アシスタント拡張機能を構築する](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/browser-ai-extension/) | クラウド API または内蔵 AI で任意のページを要約する Chrome 拡張機能を作成 |
|
||||
| [Electron デスクトップアプリを構築する](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/electron-voice-to-text/) | Electron で 3 プラットフォーム対応の音声テキスト変換デスクトップアプリを構築 |
|
||||
| [NFT を迅速に構築してミントする](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/nft-minting/) | スマートコントラクトをゼロから作成し、デプロイして自分の NFT をミント |
|
||||
| [VS Code 拡張機能を構築する](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/vscode-extension/) | テンプレート、コードチャット、複数ファイル Q&A を備えた AI プロジェクトアシスタントを構築 |
|
||||
| [産業グレードの Qt デスクトップアプリを構築する](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/qt-industrial-hmi/) | トレンド、アラート、監視機能を備えたリアルタイム Qt HMI システムを作成 |
|
||||
|
||||
#### AI 機能 附録
|
||||
|
||||
| セクション | 主要コンテンツ |
|
||||
| :------ | :---------- |
|
||||
| [RAG とは何か、どのように機能するのか](https://datawhalechina.github.io/easy-vibe/en/stage-3/ai-advanced/rag-introduction/) | RAG の原理と一般的なアーキテクチャの体系的な理解を構築 |
|
||||
| [LangGraph による中級・上級 RAG ワークフロー](https://datawhalechina.github.io/easy-vibe/en/stage-3/ai-advanced/langgraph-advanced-rag/) | マルチステップのワークフローとより高度な RAG システムを設計 |
|
||||
|
||||
### 📚 附録 ナレッジベース
|
||||
|
||||
> **9 つの主要ナレッジ領域**と **80 以上のインタラクティブトピック**をカバー。アニメーションとビジュアルコンポーネントで、コンピュータの基礎から AI の最前線までの核心概念を直感的に理解できます。
|
||||
>
|
||||
> 👉 [查看完整附录](https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/) · [AI 能力词典](https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/ai-capability-dictionary)
|
||||
> 👉 [附録の全容を見る](https://datawhalechina.github.io/easy-vibe/en/appendix/)
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td valign="top" width="33%">
|
||||
<strong>💻 计算机基础</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/transistor-to-cpu.html">从晶体管到 CPU</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/operating-systems.html">操作系统</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/data-encoding-storage.html">数据的编码、存储与传输</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/computer-networks.html">网络：两台电脑如何对话</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/data-structures.html">数据结构</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/algorithm-thinking.html">算法思维入门</a>
|
||||
</td>
|
||||
<td valign="top" width="33%">
|
||||
<strong>🔧 开发工具</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/git-version-control.html">Git：代码的时光机</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/command-line-shell.html">命令行与 Shell 脚本</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/package-managers.html">包管理器</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/debugging-art/">调试的艺术</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/regex.html">正则表达式</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/environment-path.html">环境变量与 PATH</a>
|
||||
</td>
|
||||
<td valign="top" width="33%">
|
||||
<strong>🌐 浏览器与前端</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/javascript-deep-dive.html">JavaScript 语言深入</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/browser-as-os-rendering.html">浏览器渲染管道</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/frontend-frameworks.html">前端框架对比</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/graphics-animation.html">图形与动画</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/web-performance.html">网页性能的度量与优化</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/frontend-engineering.html">前端工程化全貌</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top" width="33%">
|
||||
<strong>🖥️ 服务器与后端</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/http-protocol.html">HTTP 协议</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/api-design.html">API 设计哲学</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/auth-authorization.html">认证与授权体系</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/concurrency-async.html">并发、异步与多线程</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/message-queues.html">消息队列与事件驱动</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/backend-layered-architecture.html">后端分层架构</a>
|
||||
</td>
|
||||
<td valign="top" width="33%">
|
||||
<strong>📊 数据</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/database-fundamentals.html">数据库原理与 SQL</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/database-fundamentals.html">数据库原理</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/data-tracking.html">数据埋点与用户行为采集</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/data-analysis.html">数据分析基础</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/ab-testing.html">A/B 测试与实验驱动</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/data-visualization.html">数据可视化与仪表盘</a>
|
||||
</td>
|
||||
<td valign="top" width="33%">
|
||||
<strong>🏗️ 架构与系统设计</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/6-architecture-and-system-design/monolith-to-microservices.html">从单体到微服务的演进</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/6-architecture-and-system-design/distributed-systems.html">分布式系统的挑战</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/6-architecture-and-system-design/high-availability.html">高可用与容灾</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/6-architecture-and-system-design/system-design-methodology.html">系统设计方法论</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top" width="33%">
|
||||
<strong>☁️ 基础设施与运维</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/docker-containers.html">Docker 容器化</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/kubernetes.html">Kubernetes 编排</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/ci-cd.html">CI / CD 自动化</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/dns-https.html">域名、DNS 与 HTTPS</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/monitoring-logging.html">监控、日志与告警</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/infrastructure-as-code.html">基础设施即代码</a>
|
||||
</td>
|
||||
<td valign="top" width="33%">
|
||||
<strong>🤖 人工智能</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/llm-principles.html">大语言模型的工作原理</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/transformer-attention.html">Transformer 与注意力机制</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/rag.html">RAG 架构</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/ai-agents.html">AI Agent 与工具调用</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/prompt-engineering.html">提示词工程</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/image-generation.html">图像生成原理</a>
|
||||
</td>
|
||||
<td valign="top" width="33%">
|
||||
<strong>🎯 工程素养</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/code-quality-refactoring.html">代码质量与重构</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/testing-strategies.html">测试策略</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/design-patterns.html">设计模式</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/security-thinking.html">安全思维与攻防基础</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/technical-writing.html">技术文档写作</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/open-source-collaboration.html">开源协作</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
### 🎓 その他のコース
|
||||
|
||||
## 🛠️ 如何学习
|
||||
- [Hands-on Modern RL](#その他のコース)
|
||||
- [Learn Harness Engineering](#その他のコース)
|
||||
|
||||
- 根据个人能力，选择性地阅读和实践相关章节，如果有问题欢迎 issue 提问。
|
||||
## 🛠️ 学び方
|
||||
|
||||
## 💻 本地启动本课件
|
||||
- 自分のレベルに合ったセクションを読んで実践しましょう。行き詰まった場合は、お気軽に Issue を立ててください。
|
||||
|
||||
### 现代方案
|
||||
## 💻 ローカルで実行
|
||||
|
||||
在 AI IDE 对话框（vscode、cursor、trae 等）中，输入下列提示词启动本课件：
|
||||
### モダンなアプローチ
|
||||
|
||||
```
|
||||
请你帮我运行这个项目的本地服务
|
||||
VS Code、Cursor、Trae などの AI IDE のチャットウィンドウで、次のように入力するだけ：
|
||||
|
||||
```text
|
||||
このプロジェクトをローカルで実行するのを手伝ってください。
|
||||
```
|
||||
|
||||
### 旧方案
|
||||
### 従来のアプローチ
|
||||
|
||||
1. npm install
|
||||
2. npm run dev
|
||||
3. 打开浏览器访问 `http://localhost:3000` 即可查看。
|
||||
1. `npm install`
|
||||
2. `npm run dev`
|
||||
3. ブラウザで `http://localhost:3000` を開く
|
||||
|
||||
## 🤝 参与贡献
|
||||
## その他のコース
|
||||
|
||||
私たちのチームは他のコースも作成しています。ぜひチェックしてください：
|
||||
|
||||
[](https://github.com/walkinglabs/hands-on-modern-rl)
|
||||
|
||||
**Hands-on Modern RL**：基礎的な強化学習の概念から LLM アライメント、RLVR、高度なエージェントシステムまでをつなぐ、オープンソースのハンズオンカリキュラム。
|
||||
|
||||
- 如果你发现了一些问题，或者觉得任何可以改进本项目的地方，可以提 Issue 进行反馈。如果提完没有人回复你可以联系[保姆团队](https://github.com/datawhalechina/DOPMC/blob/main/OP.md)的同学进行反馈跟进~
|
||||
- 如果你想参与贡献本项目，可以提 Pull Request，如果提完没有人回复你可以联系[保姆团队](https://github.com/datawhalechina/DOPMC/blob/main/OP.md)的同学进行反馈跟进~
|
||||
- 如果你对 Datawhale 很感兴趣并想要发起一个新的项目，请按照[Datawhale 开源项目指南](https://github.com/datawhalechina/DOPMC/blob/main/GUIDE.md)进行操作即可~
|
||||
[](https://github.com/walkinglabs/learn-harness-engineering/tree/main)
|
||||
|
||||
## 🙏 感谢每位贡献者
|
||||
**Learn Harness Engineering**：ハーネスエンジニアリングの包括的なガイド。
|
||||
|
||||
- [散步-项目负责人](https://github.com/sanbuphy) (Datawhale成员)
|
||||
- 方可-指导老师（Datawhale成员, 清华大学）
|
||||
- [Yerim Kang](https://github.com/yerim25)（实践项目部分-清华大学）
|
||||
- [赵芷霖](https://github.com/ChileenZ)（实践项目部分-清华大学）
|
||||
- [李亦萱](https://yixuan20.github.io/)（页面美术设计-清华大学）
|
||||
- 刘思怡（实践项目部分-清华大学）
|
||||
- [刘丽欣](https://github.com/liulx25xx)（实践项目部分-清华大学）
|
||||
- AI Vibe Coding 101 内测群完整给建议体验的小伙伴们
|
||||
## 🤝 貢献と貢献者
|
||||
|
||||
### 特别感谢
|
||||
- 問題を発見したり、改善できる点があれば、お気軽に Issue を立ててください。返答がない場合は [Datawhale サポートチーム](https://github.com/datawhalechina/DOPMC/blob/main/OP.md)にご連絡ください。
|
||||
- 貢献したい場合は、Pull Request を送ってください。返答がない場合は [Datawhale サポートチーム](https://github.com/datawhalechina/DOPMC/blob/main/OP.md)にご連絡ください。
|
||||
- 新しい Datawhale オープンソースプロジェクトを始めたい場合は、[Datawhale オープンソースプロジェクトガイド](https://github.com/datawhalechina/DOPMC/blob/main/GUIDE.md)に従ってください。
|
||||
|
||||
- 感谢 [@Sm1les](https://github.com/Sm1les) 对本项目的帮助与支持
|
||||
- 感谢所有为本项目做出贡献的开发者们和支持点赞的朋友们 ❤️
|
||||
### 🙏 貢献者
|
||||
|
||||
- [Sanbu - プロジェクトリーダー](https://github.com/sanbuphy)（Datawhale メンバー）
|
||||
- Fang Ke - メンター（Datawhale メンバー、清華大学）
|
||||
- [Yerim Kang](https://github.com/yerim25)（実践プロジェクト、清華大学）
|
||||
- [Zhilin Zhao](https://github.com/ChileenZ)（実践プロジェクト、清華大学）
|
||||
- [Yixuan Li](https://yixuan20.github.io/)（ビジュアルデザイン、清華大学）
|
||||
- Siyi Liu（実践プロジェクト、清華大学）
|
||||
- [Lixin Liu](https://github.com/liulx25xx)（実践プロジェクト、清華大学）
|
||||
- AI Vibe Coding 101 内部テストグループのフィードバックを共有してくださった皆さん
|
||||
|
||||
### 特別な感謝
|
||||
|
||||
- [@Sm1les](https://github.com/Sm1les) さんのこのプロジェクトへの支援とサポートに感謝します
|
||||
- フィードバックと Star でこのプロジェクトをサポートしてくださるすべての貢献者の皆さんに感謝します ❤️
|
||||
|
||||
<div align="center">
|
||||
|
||||
|
||||
<a href="https://www.star-history.com/#datawhalechina/easy-vibe&type=timeline&legend=top-left">
|
||||
<picture>
|
||||
<source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=datawhalechina/easy-vibe&type=timeline&theme=dark&legend=top-left" />
|
||||
@@ -455,22 +419,22 @@ Easy-Vibe は、それを本物のプロダクトにする方法を教えます
|
||||
</a>
|
||||
</div>
|
||||
|
||||
## 📄 LICENSE
|
||||
## 📄 ライセンス
|
||||
|
||||
<div align="center">
|
||||
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">
|
||||
<img
|
||||
alt="知识共享许可协议"
|
||||
alt="クリエイティブ・コモンズ・ライセンス"
|
||||
style="border-width:0"
|
||||
src="https://img.shields.io/badge/license-CC%20BY--NC--SA%204.0-lightgrey"
|
||||
/>
|
||||
</a>
|
||||
<br />
|
||||
本作品采用
|
||||
この作品は
|
||||
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">
|
||||
知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议
|
||||
クリエイティブ・コモンズ 表示 - 非営利 - 継承 4.0 国際ライセンス
|
||||
</a>
|
||||
进行许可。
|
||||
の下に提供されています。
|
||||
</div>
|
||||
|
||||
## Star History
|
||||
|
||||
+240
-277
@@ -3,6 +3,8 @@
|
||||
|
||||
<img src="../../assets/easy-vibe-logo-hd.svg" alt="Easy-Vibe Logo" width="300">
|
||||
|
||||
<img src="../../assets/banner.png" alt="Easy-Vibe Banner" width="100%">
|
||||
|
||||
<p align="center" style="font-size: 1.2em; color: #666; margin: 20px 0;">
|
||||
바로 시작해서 함께 vibe 해봐요. 말할 수 있으면 앱도 만들 수 있어요.<br>
|
||||
<span style="font-size: 0.9em; color: #888;">直接上手，一起 vibe！会说话就会做应用。</span>
|
||||
@@ -11,16 +13,16 @@
|
||||
<a href="https://trendshift.io/repositories/22079" target="_blank"><img src="https://trendshift.io/api/badge/repositories/22079" alt="datawhalechina/easy-vibe | Trendshift" style="width: 250px; height: 55px;" width="250" height="55"/></a>
|
||||
|
||||
<p align="center">
|
||||
🚀 <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">바로 시작하기</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/en/appendix/">인터랙티브 튜토리얼</a> · 🦞 <a href="https://github.com/datawhalechina/hello-claw">OpenClaw 배우기</a><br>
|
||||
🚀 <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">둘러보기 시작</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/en/appendix/">인터랙티브 튜토리얼</a> · 🦞 <a href="https://github.com/datawhalechina/hello-claw">OpenClaw 배우기</a> · 📖 <a href="#table-of-contents">목차</a><br>
|
||||
<span style="font-size: 0.85em; color: #888;">🚀 <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">开始体验</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/">交互式教程</a> · 🦞 <a href="https://github.com/datawhalechina/hello-claw">学习 OpenClaw</a> · 📖 <a href="#table-of-contents">查看目录</a></span>
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
<a href="https://datawhalechina.github.io/easy-vibe/welcome.html">바로 읽기</a> ·
|
||||
<a href="https://datawhalechina.github.io/easy-vibe/welcome.html">온라인으로 읽기</a> ·
|
||||
<a href="#-content-navigation">학습 지도</a><br>
|
||||
<span style="font-size: 0.85em; color: #888;">
|
||||
<a href="https://datawhalechina.github.io/easy-vibe/welcome.html">开始阅读</a> ·
|
||||
<a href="#-内容导航">学习地图</a>
|
||||
<a href="#-content-navigation">学习地图</a>
|
||||
</span>
|
||||
</p>
|
||||
|
||||
@@ -34,9 +36,9 @@
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
<a href="../../README.md"><img alt="English" src="https://img.shields.io/badge/English-d9d9d9"></a>
|
||||
<a href="../zh-CN/README.md"><img alt="简体中文" src="https://img.shields.io/badge/简体中文-d9d9d9"></a>
|
||||
<a href="../zh-TW/README.md"><img alt="繁體中文" src="https://img.shields.io/badge/繁體中文-d9d9d9"></a>
|
||||
<a href="../en-US/README.md"><img alt="English" src="https://img.shields.io/badge/English-d9d9d9"></a>
|
||||
<a href="../ja-JP/README.md"><img alt="日本語" src="https://img.shields.io/badge/日本語-d9d9d9"></a>
|
||||
<a href="../es-ES/README.md"><img alt="Español" src="https://img.shields.io/badge/Español-d9d9d9"></a>
|
||||
<a href="../fr-FR/README.md"><img alt="Français" src="https://img.shields.io/badge/Français-d9d9d9"></a>
|
||||
@@ -52,66 +54,83 @@
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/gif-header.png" width="100%">
|
||||
<br>
|
||||
<strong>新手专属学习地图</strong>
|
||||
<strong>초보자 맞춤형 학습 지도</strong>
|
||||
<br>
|
||||
<sub>零基础专属指引，清晰规划路径，告别“学了忘”</sub>
|
||||
<sub>명확한 가이드로 "배우고 잊어버리는" 고리를 끊어줍니다</sub>
|
||||
</td>
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/gif-tutorial.png" width="100%">
|
||||
<br>
|
||||
<strong>手把手图文教程</strong>
|
||||
<strong>단계별 시각 튜토리얼</strong>
|
||||
<br>
|
||||
<sub>保姆级图文详解，如同私教在旁，跟着做就能学会</sub>
|
||||
<sub>개인 과외 선생님처럼 친절하게 안내하는 상세 실습 가이드</sub>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/gif-ide.gif" width="100%">
|
||||
<br>
|
||||
<strong>沉浸式模拟编程</strong>
|
||||
<strong>몰입형 시뮬레이션 코딩</strong>
|
||||
<br>
|
||||
<sub>虚拟鼠标自动导览，带你快速上手 IDE 核心用法</sub>
|
||||
<sub>가상 마우스 가이드로 IDE 핵심 워크플로우를 빠르게 익힙니다</sub>
|
||||
</td>
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/gif-diffusion.gif" width="100%">
|
||||
<br>
|
||||
<strong>看得见的 AI 原理</strong>
|
||||
<strong>눈으로 보는 AI 원리</strong>
|
||||
<br>
|
||||
<sub>算法原理动画化，一眼看懂 AI 如何“画”出图片</sub>
|
||||
<sub>애니메이션 해설로 AI가 이미지를 생성하는 과정을 쉽게 이해합니다</sub>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/gif-rag.gif" width="100%">
|
||||
<br>
|
||||
<strong>像玩游戏一样学 RAG</strong>
|
||||
<strong>게임처럼 배우는 RAG</strong>
|
||||
<br>
|
||||
<sub>独家交互组件，点击即可看清 RAG 数据流向</sub>
|
||||
<sub>인터랙티브 컴포넌트로 RAG 데이터 흐름을 클릭 한 번에 파악합니다</sub>
|
||||
</td>
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/git-terminal.gif" width="100%">
|
||||
<br>
|
||||
<strong>可视化终端原理</strong>
|
||||
<strong>시각화된 터미널 개념</strong>
|
||||
<br>
|
||||
<sub>命令行操作可视化，直观展示后台逻辑与原理</sub>
|
||||
<sub>명령어 동작이 시각화되어 배경 원리를 직관적으로 이해합니다</sub>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div align="center">
|
||||
<h3>⭐ 欢迎 <a href="https://github.com/datawhalechina/easy-vibe" style="color: #d0cd16ff;">点击此处Star</a> 加速更新 ❤️</h3>
|
||||
<h3>⭐ <a href="https://github.com/datawhalechina/easy-vibe" style="color: #d0cd16ff;">여기를 클릭하여 Star</a>를 눌러 업데이트를 가속해주세요 ❤️</h3>
|
||||
</div>
|
||||
|
||||
<div align="center" style="margin: 30px 0;">
|
||||
<a href="https://github.com/datawhalechina/easy-vibe/issues/new?template=story_submission.md">
|
||||
<img src="https://raw.githubusercontent.com/datawhalechina/easy-vibe/main/assets/stories_image.png" alt="Share Your Vibe Story" width="80%" style="border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.15);">
|
||||
<img src="https://raw.githubusercontent.com/datawhalechina/easy-vibe/main/assets/stories_image.png" alt="나만의 Vibe 스토리 공유하기" width="80%" style="border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.15);">
|
||||
</a>
|
||||
<p style="margin-top: 15px; font-size: 1.1em; color: #666;">
|
||||
📝 <strong>Have your own vibe coding story?</strong>
|
||||
Submit it here and inspire others!
|
||||
📝 <strong>나만의 vibe 코딩 스토리가 있나요?</strong>
|
||||
여기에 공유하여 다른 사람들에게 영감을 주세요!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
## 为什么需要 Easy-Vibe
|
||||
## 목차
|
||||
|
||||
- [왜 Easy-Vibe인가](#왜-easy-vibe인가)
|
||||
- [소식](#-소식)
|
||||
- [이런 분들에게 추천합니다](#이런-분들에게-추천합니다)
|
||||
- [학습 경로](#학습-경로)
|
||||
- [학습 제안](#학습-제안)
|
||||
- [I. 초보자 입문](#i-초보자-입문)
|
||||
- [II. 주니어 및 미들 개발자](#ii-주니어-및-미들-개발자)
|
||||
- [III. 시니어 개발자](#iii-시니어-개발자)
|
||||
- [부록 지식 베이스](#-부록-지식-베이스)
|
||||
- [학습 방법](#️-학습-방법)
|
||||
- [로컬 실행](#-로컬-실행)
|
||||
- [다른 강좌](#다른-강좌)
|
||||
- [기여 및 기여자](#기여-및-기여자)
|
||||
- [라이선스](#-라이선스)
|
||||
|
||||
## 왜 Easy-Vibe인가
|
||||
|
||||
가계부 앱이 필요하신가요? 말하면 됩니다.
|
||||
|
||||
@@ -124,323 +143,268 @@ AI 시대의 프로그래밍은 원하는 것을 설명하는 데서 시작합
|
||||
Easy-Vibe는 그것을 실제 제품으로 만드는 방법을 가르칩니다.
|
||||
|
||||
|
||||
## 🔥 News
|
||||
|
||||
- **[2026-03-29]** ✨ **사용자 이야기 섹션 공개 및 실제 사례 4편으로 업데이트**: 홈페이지에 인터랙티브 스토리 캐러셀과 전용 스토리 페이지를 추가하고, 기존 플레이스홀더를 시골 초등학교 교사, 대학생, 고등학교 정보기술 교사, 트럭 운전사의 실제 이야기 4편으로 교체했습니다. [👉 View the stories](https://datawhalechina.github.io/easy-vibe/zh-cn/vibe-stories/story-1.html)
|
||||
- **[2026-03-26]** 🚀 **단계 2 실습 콘텐츠 대규모 업데이트**: SaaS 캡스톤 프로젝트 "[첫 번째 SaaS 풀스택 앱: 카피라이팅 생성기 웹사이트](https://datawhalechina.github.io/easy-vibe/en/stage-2/assignments/fullstack-app/)" 완료 및 "[Stripe 및 결제 시스템 통합 방법](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/stripe-payment/)" 섹션 대폭 확장.
|
||||
- **[2026-03-25]** 📚 **새로운 부록: 사용자 연구 및 요구사항 검증**: 아이디어 소싱, 더블 다이아몬드 모델, Jobs to Be Done, The Mom Test를 다루는 4개의 새로운 기사를 추가하여 초보자가 제품 아이디어를 발견하고 검증하는 데 도움을 줍니다. [👉 부록 읽기](https://datawhalechina.github.io/easy-vibe/en/appendix/)
|
||||
- **[2026-03-25]** 📚 **영문 문서 전면 업데이트**: 단계 2(풀스택 개발)와 단계 3(고급 개발)이 이제 완전히 영어로 제공됩니다. [👉 학습 시작하기](https://datawhalechina.github.io/easy-vibe/en/stage-2/)
|
||||
- **[2026-03-02]** 🦞 **OpenClaw 및 AI Agent 친화적 지원**: `llms.txt`를 추가하여 OpenClaw, Claude, Cursor, Trae 및 기타 AI Agent가 저장소 구조를 빠르게 이해하고 올바른 튜토리얼 콘텐츠를 찾을 수 있도록 합니다.
|
||||
- **[2026-03-01]** [고급 개발 섹션](https://datawhalechina.github.io/easy-vibe/en/stage-3/)이 Claude Code에 대한 심층 가이드(MCP, Skills, Agent Teams 등)와 8개의 크로스 플랫폼 프로젝트 튜토리얼과 함께 포괄적으로 업그레이드되었습니다.
|
||||
- **[2026-02-25]** [부록 지식 베이스](https://datawhalechina.github.io/easy-vibe/en/appendix/)가 업데이트되어 이제 9개의 지식 영역과 80개 이상의 인터랙티브 주제를 다룹니다.
|
||||
- **[2026-01-27]** Android 및 iOS 앱 개발 튜토리얼이 추가되었습니다.
|
||||
- **[2026-01-19]** Prompt Engineering, AI 역사, 인증 설계, Git 원리 등을 위한 인터랙티브 데모가 출시되었습니다.
|
||||
## 🔥 소식
|
||||
|
||||
- **[2026-03-29]** ✨ **Vibe 스토리 공개 및 실제 사용자 여정으로 업그레이드**: 홈페이지에 인터랙티브 스토리 캐러셀과 전용 스토리 페이지를 추가하고, 시골 초등학교 교사, 대학생, 고등학교 IT 교사, 트럭 운전사의 실제 사용자 스토리 4편으로 교체했습니다. [👉 스토리 보기](https://datawhalechina.github.io/easy-vibe/zh-cn/vibe-stories/story-1.html)
|
||||
- **[2026-03-26]** 🚀 **단계 2 실습 대규모 업데이트**: SaaS 캡스톤 프로젝트 "[첫 번째 SaaS 풀스택 앱: 카피라이팅 생성기 웹사이트](https://datawhalechina.github.io/easy-vibe/en/stage-2/assignments/fullstack-app/)"를 완료하고 "[Stripe 및 결제 시스템 통합 방법](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/stripe-payment/)" 섹션을 대폭 확장했으며, 멀티 프로덕트 UI 및 위챗 미니 프로그램 백엔드 워크플로우 핵심 콘텐츠를 추가했습니다.
|
||||
- **[2026-03-25]** 📚 **새로운 부록: 사용자 연구 및 요구사항 검증**: 아이디어 소싱, 더블 다이아몬드 모델, Jobs to Be Done, The Mom Test를 다루는 4편의 새로운 글을 추가하여 초보자가 제품 아이디어를 발견하고 검증하는 데 도움을 줍니다. [👉 부록 읽기](https://datawhalechina.github.io/easy-vibe/en/appendix/)
|
||||
- **[2026-03-25]** 📚 **영문 문서 전면 업데이트**: 단계 2(풀스택 개발)와 단계 3(고급 개발)이 완전히 영어로 제공됩니다. [👉 학습 시작하기](https://datawhalechina.github.io/easy-vibe/en/stage-2/)
|
||||
<details>
|
||||
<summary>과거 소식</summary>
|
||||
<summary>이전 소식</summary>
|
||||
|
||||
- **[2026-01-16]** 프로젝트 구조를 재구성하고 초보자 입문 장을 공식적으로 확립했습니다.
|
||||
- **[2026-01-14]** 단계 1 제품 프로토타입 문서의 대규모 업데이트를 완료했습니다.
|
||||
- **[2026-01-13]** 문서 아키텍처를 리팩토링하고 다국어 지원(i18n)을 완전히 활성화했습니다.
|
||||
- **[2026-03-02]** 🦞 **OpenClaw 및 AI Agent 친화적 지원**: `llms.txt`를 추가하여 OpenClaw, Claude, Cursor, Trae 및 기타 AI Agent가 저장소 구조를 빠르게 이해하고 적절한 튜토리얼 콘텐츠를 찾을 수 있습니다.
|
||||
- **[2026-03-01]** [고급 개발 섹션](https://datawhalechina.github.io/easy-vibe/en/stage-3/)이 Claude Code 심층 가이드(MCP, Skills, Agent Teams 등)와 8개의 크로스 플랫폼 프로젝트 튜토리얼로 포괄적으로 업그레이드되었습니다.
|
||||
- **[2026-02-25]** [부록 지식 베이스](https://datawhalechina.github.io/easy-vibe/en/appendix/)가 업데이트되어 9개 지식 영역과 80개 이상의 인터랙티브 주제를 다룹니다.
|
||||
- **[2026-01-27]** Android 및 iOS 앱 개발 튜토리얼이 추가되었습니다.
|
||||
- **[2026-01-19]** 프롬프트 엔지니어링, AI 역사, 인증 설계, Git 원리 등을 위한 인터랙티브 데모가 출시되었습니다.
|
||||
- **[2026-01-16]** 프로젝트 구조를 재구성하고 초보자 입문 경로를 공식 확립했습니다.
|
||||
- **[2026-01-14]** 단계 1 제품 프로토타입 문서 대규모 업데이트를 완료했습니다.
|
||||
- **[2026-01-13]** 문서 아키텍처를 리팩토링하고 다국어 지원을 완전히 활성화했습니다.
|
||||
- **[2026-01-01]** 프로젝트의 핵심 학습 맵을 출시했습니다.
|
||||
</details>
|
||||
|
||||
## 适合谁
|
||||
## 이런 분들에게 추천합니다
|
||||
|
||||
- **零基础爱好者**：先做出第一个作品，再理解怎么做
|
||||
- **产品经理 / 创业者**：快速验证想法，低成本做 MVP
|
||||
- **学生**：建立 AI 时代的实战技能
|
||||
- **初级开发者**：补齐从想法到上线的完整开发链路
|
||||
- **中高级开发者**：掌握 AI 协作开发、复杂项目实战与效率升级
|
||||
- **왕초보자**: 먼저 첫 번째 프로젝트를 만들고, 작동 원리는 나중에 이해합니다
|
||||
- **프로덕트 매니저 / 창업자**: 빠르게 아이디어를 검증하고 저비용으로 MVP를 만듭니다
|
||||
- **학생**: AI 시대를 위한 실무 기술을 기릅니다
|
||||
- **주니어 개발자**: 아이디어부터 런칭까지 전체 경로를 배웁니다
|
||||
- **미들 및 시니어 개발자**: 복잡한 프로젝트를 위한 AI 협업 워크플로우를 업그레이드합니다
|
||||
|
||||
|
||||
|
||||
## 你的学习路径
|
||||
## 학습 경로
|
||||
|
||||
### 🎮 我想先试试（5分钟体验）
|
||||
**适合人群**：所有人
|
||||
**学什么**：AI 编程初体验、贪吃蛇小游戏
|
||||
**你会得到**：5 分钟做出第一个 AI 应用
|
||||
### 🎮 빠른 첫 성취를 원해요
|
||||
**추천 대상**: 모든 사람
|
||||
**학습 내용**: 간단하고 구체적인 실습 예제를 통해 AI 코딩이 실제로 어떤 느낌인지 체험합니다
|
||||
**얻게 될 것**: 바이브 코딩에 대한 명확한 첫인상과 대화형 AI 작업 방법
|
||||
|
||||
[开始体验](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/learning-map/)
|
||||
[여기서 시작하기](https://datawhalechina.github.io/easy-vibe/en/stage-1/ai-capabilities-through-games/)
|
||||
|
||||
### 💡 我有个想法要实现
|
||||
**适合人群**：零基础/产品经理/创业者
|
||||
**学什么**：AI IDE 工具、需求拆解、页面设计、功能规划、提示词写法、原型迭代
|
||||
**你会得到**：一个可演示的产品原型
|
||||
### 💡 아이디어를 제품 프로토타입으로 만들고 싶어요
|
||||
**추천 대상**: 초보자 / 프로덕트 매니저 / 창업자
|
||||
**학습 내용**: 학습 로드맵, AI IDE 도구, 아이디어 검증, 프로토타이핑, AI 기능 통합, 전체 데모 반복
|
||||
**얻게 될 것**: 사용자나 팀원에게 실제로 보여줄 수 있는 데모 가능한 AI 제품 프로토타입
|
||||
|
||||
[开始学习](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/learning-map/)
|
||||
[학습 시작하기](https://datawhalechina.github.io/easy-vibe/en/stage-1/learning-map/)
|
||||
|
||||
### 🚀 我想系统学习
|
||||
**适合人群**：开发者/进阶学习者
|
||||
**学什么**：前端、后端、数据库、AI 集成、部署运维、Claude Code 开发技巧
|
||||
**你会得到**：独立完成一个可上线的全栈 AI 应用
|
||||
### 🚀 엔드투엔드 풀스택 제품을 만들고 싶어요
|
||||
**추천 대상**: 주니어 개발자 / 인디 해커 / 고급 학습자
|
||||
**학습 내용**: 프론트엔드 워크플로우, 디자인-투-코드, 데이터베이스, 백엔드 API, 배포, 결제, 메이저 프로젝트
|
||||
**얻게 될 것**: 현대적인 AI 탑재 웹 애플리케이션을 독립적으로 출시하는 능력
|
||||
|
||||
[开始学习](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/)
|
||||
[학습 시작하기](https://datawhalechina.github.io/easy-vibe/en/stage-2/)
|
||||
|
||||
### 🦞 我想构建 AI Agent
|
||||
**适合人群**：对 AI Agent 感兴趣的开发者
|
||||
**学什么**：OpenClaw AI 助理、Skills 系统、自动化工作流
|
||||
**你会得到**：一个属于你的命令行 AI 助理
|
||||
### AI 네이티브: 고급 Claude Code 및 Agent 워크플로우를 원해요
|
||||
**추천 대상**: AI 네이티브 엔지니어링에 관심 있는 개발자
|
||||
**학습 내용**: Claude Code, MCP, Skills, Agent Teams, 장기 실행 작업, Spec Coding, 크로스 플랫폼 앱 제공
|
||||
**얻게 될 것**: 복잡한 AI 지원 개발 및 자동화를 위한 더 강력한 워크플로우
|
||||
|
||||
[开始学习](https://github.com/datawhalechina/hello-claw)
|
||||
[고급 개발로 이동](https://datawhalechina.github.io/easy-vibe/en/stage-3/)
|
||||
|
||||
### 📚 我想查资料
|
||||
**适合人群**：所有人
|
||||
**学什么**：计算机基础、AI 原理、9 大知识领域
|
||||
**你会得到**：80+ 交互式专题资料
|
||||
### 📚 참고 자료와 기초 지식이 필요해요
|
||||
**추천 대상**: 모든 사람
|
||||
**학습 내용**: 컴퓨터 기초, 프론트엔드/백엔드 기본, 인프라, AI 원리, 엔지니어링 실무
|
||||
**얻게 될 것**: 9개 주요 지식 영역을 다루는 장기 참고 지식 베이스
|
||||
|
||||
[查看知识库](https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/)
|
||||
[지식 베이스 탐색하기](https://datawhalechina.github.io/easy-vibe/en/appendix/)
|
||||
|
||||
## 学习建议
|
||||
## 학습 제안
|
||||
|
||||
- 零基础、产品经理、创业者：从 [第一阶段](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/learning-map/) 开始
|
||||
- 有开发经验：从 [第二阶段](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/) 开始
|
||||
- 想直接做复杂项目：进入 [第三阶段](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/)
|
||||
- 想学 AI Agent：看 [Hello Claw](https://github.com/datawhalechina/hello-claw)
|
||||
- 초보자, 프로덕트 매니저, 창업자라면 [단계 1](https://datawhalechina.github.io/easy-vibe/en/stage-1/learning-map/)부터 시작하세요
|
||||
- 프로토타입에서 풀스택 제공으로 넘어가고 싶다면 [단계 2](https://datawhalechina.github.io/easy-vibe/en/stage-2/)부터 시작하세요
|
||||
- 고급 Claude Code 워크플로우나 크로스 플랫폼 프로젝트를 원한다면 [단계 3](https://datawhalechina.github.io/easy-vibe/en/stage-3/)으로 이동하세요
|
||||
- 개념이나 배경 지식 부족으로 막힌다면 [부록 지식 베이스](https://datawhalechina.github.io/easy-vibe/en/appendix/)를 활용하세요
|
||||
|
||||
### 📖 内容导航
|
||||
### 📖 콘텐츠 내비게이션
|
||||
|
||||
<div align="center">
|
||||
<img src="../../assets/readme-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;"/>
|
||||
<img src="../../assets/readme-image1.png" alt="학습 지도" width="70%" style="border-radius: 10px; box-shadow: 0 8px 20px rgba(45,55,72,0.3); margin: 15px 0;"/>
|
||||
</div>
|
||||
|
||||
### 一、零基础入门
|
||||
### I. 초보자 입문
|
||||
|
||||
| 章节 | 关键内容 |
|
||||
| :----------------------------------------------------------------------------------- | :------------------------------------------------ |
|
||||
| [学习地图](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/learning-map/) | 整体学习路径导览 |
|
||||
| [AI 时代，会说话就会编程](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/ai-capabilities-through-games/) | 通过贪吃蛇等案例初步感受 AI 编程的能力 |
|
||||
| [寻找好想法](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/finding-great-idea/) | 学会寻找和验证产品想法，找到值得做的项目 |
|
||||
| [认识 AI IDE 工具](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/introduction-to-ai-ide/) | 学会使用 IDE，在本地制作小游戏 |
|
||||
| [动手做出原型](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/building-prototype/) | 从需求分析、AI 生成单页面，再到生成多页面产品原型 |
|
||||
| [给原型加上 AI 能力](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/integrating-ai-capabilities/) | 学会接入常见 AI 能力（文本、图片、视频） |
|
||||
| [完整项目实战](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/complete-project-practice/) | 模拟真实场景、接受用户反馈迭代，完整化项目 |
|
||||
| 섹션 | 핵심 내용 |
|
||||
| :------ | :---------- |
|
||||
| [학습 지도](https://datawhalechina.github.io/easy-vibe/en/stage-1/learning-map/) | 전체 학습 여정의 안내 개요 |
|
||||
| [AI 시대: 말할 수 있으면 코딩할 수 있습니다](https://datawhalechina.github.io/easy-vibe/en/stage-1/ai-capabilities-through-games/) | 스네이크 게임 등 예제를 통해 AI 코딩을 처음으로 체험합니다 |
|
||||
| [AI 프로그래밍 도구 마스터하기](https://datawhalechina.github.io/easy-vibe/en/stage-1/introduction-to-ai-ide/) | AI IDE 도구의 작동 방식을 배우고 간단한 로컬 프로젝트를 만듭니다 |
|
||||
| [좋은 아이디어 찾기](https://datawhalechina.github.io/easy-vibe/en/stage-1/finding-great-idea/) | 만들 가치 있는 제품 아이디어를 발견하고 검증하는 방법을 배웁니다 |
|
||||
| [제품 프로토타입 만들기](https://datawhalechina.github.io/easy-vibe/en/stage-1/building-prototype/) | 요구사항에서 단일 페이지 및 다중 페이지 제품 프로토타입으로 이동합니다 |
|
||||
| [AI 기능 통합하기](https://datawhalechina.github.io/easy-vibe/en/stage-1/integrating-ai-capabilities/) | 텍스트, 이미지, 비디오 AI 기능을 통합합니다 |
|
||||
| [완성된 프로젝트 실습](https://datawhalechina.github.io/easy-vibe/en/stage-1/complete-project-practice/) | 실제 시나리오를 시뮬레이션하고, 사용자 피드백을 수집하여 전체 프로젝트를 반복 개선합니다 |
|
||||
|
||||
#### 附录：业务思维
|
||||
#### 부록: 제품 및 비즈니스 사고
|
||||
|
||||
| 章节 | 关键内容 |
|
||||
| :----------------------------------------------------------------------------------- | :----------------------------------------- |
|
||||
| [产品思维与方案设计](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-a-product-thinking/) | 从零到一做产品需要考虑的思维框架 |
|
||||
| [AI 行业应用场景参考 (B端)](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-industry-scenarios/) | 了解 AI 在不同产业的应用场景 |
|
||||
| [AI 消费场景灵感参考 (C端)](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-c-consumer-scenarios/) | 探索 AI 在消费级产品中的应用场景 |
|
||||
| 섹션 | 핵심 내용 |
|
||||
| :------ | :---------- |
|
||||
| [제품 사고와 솔루션 설계](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-a-product-thinking/) | 제품을 0에서 1로 만들기 위한 핵심 프레임워크 |
|
||||
| [AI 산업 응용 시나리오 (B2B)](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-industry-scenarios/) | 다양한 산업에서 AI가 어떻게 활용되는지 이해합니다 |
|
||||
| [AI 소비자 시나리오 인스피레이션 (B2C)](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-c-consumer-scenarios/) | 소비자 AI에서의 제품 기회를 탐색합니다 |
|
||||
|
||||
#### 附录：技术方案
|
||||
#### 부록: 사용자 연구 및 요구사항 검증
|
||||
|
||||
| 章节 | 关键内容 |
|
||||
| :---------------------------------------------------------------------------------------------------------------------- | :----------------------------------------- |
|
||||
| [写代码时遇到错误怎么办](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-b-common-errors/) | vibe coding 中的常见错误及排查方法 |
|
||||
| [七款 AI 编程工具对比](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial) | 对比测试主流 AI 编程平台 |
|
||||
| [用设计和编程 Agent 设计网站](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents) | 学习如何使用 AI 智能体协同工作 |
|
||||
| 섹션 | 핵심 내용 |
|
||||
| :------ | :---------- |
|
||||
| [아이디어를 어디서 찾을까: 초보자에게 가장 잘 맞는 3가지 참고 소스](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-idea-sources/) | 구체적인 제품 기회를 찾기 위한 신뢰할 수 있는 파이프라인을 구축합니다 |
|
||||
| [더블 다이아몬드: 먼저 올바른 일을 하고, 그 다음에 올바르게 하세요](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-double-diamond/) | 구조화된 프로세스를 통해 흩어진 영감에서 실행 가능한 방향으로 이동합니다 |
|
||||
| [Jobs to Be Done으로 사용자가 진정으로 원하는 것을 찾기](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-jobs-to-be-done/) | 표면적인 기능 요청이 아닌 실제 작업을 통해 사용자 목표를 분석합니다 |
|
||||
| [The Mom Test: 수요를 검증하기 위한 사용자 인터뷰 방법](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-mom-test/) | 더 나은 질문을 하는 방법을 배우고 거짓 긍정 피드백을 피합니다 |
|
||||
|
||||
### 二、初中级开发工程师
|
||||
#### 부록: 기술 솔루션
|
||||
|
||||
#### 前端部分
|
||||
| 섹션 | 핵심 내용 |
|
||||
| :------ | :---------- |
|
||||
| [오류가 발생하면 어떻게 하나요](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-b-common-errors/) | 바이브 코딩의 일반적인 문제와 해결 방법 |
|
||||
| [7가지 AI 프로그래밍 도구 비교](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial) | 실습 테스트를 통해 주요 AI 코딩 플랫폼을 비교합니다 |
|
||||
| [Agent로 웹사이트 디자인하기](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents) | 실습에서 멀티 에이전트 협업을 배웁니다 |
|
||||
|
||||
| 章节 | 关键内容 |
|
||||
| :--------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------- |
|
||||
| [从Lovart出发，搭建自己的素材生产Agent](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/frontend/lovart-assets/) | 从零开始，利用Nanobanana和Lovart批量生成高质量的设计素材，并动手构建一个能意图识别的绘图Agent |
|
||||
| [Figma 与 MasterGo 入门](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/frontend/figma-mastergo/) | 用设计工具梳理信息架构和页面结构，为前端实现打基础 |
|
||||
| [构建第一个现代应用程序-UI 设计](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/frontend/ui-design/) | 基于设计稿完成组件化界面，实现从设计到代码的第一条链路 |
|
||||
| [参考 UI 设计规范与多产品 UI 设计](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/frontend/multi-product-ui/) | 围绕统一主视觉扩展多产品界面，练习系统化设计能力 |
|
||||
| [用 LLM 和 Skills 让界面变好看](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/frontend/llm-skills-beautiful/) | 用提示词和 Skills 插件让 AI 生成美观独特的界面 |
|
||||
| [一起做霍格沃茨画像](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/frontend/hogwarts-portraits/) | 从 0 到 1 做出接入 AI 能力的前端应用，串联设计与开发 |
|
||||
| [从设计原型到项目代码](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/frontend/design-to-code/) | 三种路径将设计工具中的原型转化为前端代码 |
|
||||
| [使用现代组件库更新你的界面](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/frontend/modern-component-library/) | 用组件库快速构建专业级界面，统一风格、提升开发效率 |
|
||||
### II. 주니어 및 미들 개발자
|
||||
|
||||
#### 后端开发部分
|
||||
#### 프론트엔드
|
||||
|
||||
| 章节 | 关键内容 |
|
||||
| :------------------------------------------------------------------------------------------------- | :---------------------------------------------------------- |
|
||||
| [从数据库到 Supabase](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/backend/database-supabase/) | 在 Supabase 上落地数据库和 API，打通数据模型与前端页面 |
|
||||
| [大模型辅助编写接口代码与接口文档](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/backend/ai-interface-code/) | 用大模型协助生成接口与数据库文档及代码，实现可读可测的后端 |
|
||||
| [Git 和 GitHub 工作流](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/backend/git-workflow/) | 在 Git 工作流中管理代码，进行版本控制和协作 |
|
||||
| [如何部署 Web 应用](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/backend/zeabur-deployment/) | 使用 CloudBase、Vercel、Zeabur 等平台部署应用上线 |
|
||||
| [CLI AI 编程工具](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/backend/modern-cli/) | 使用 CLI 类 AI 编程工具加速开发与调试，形成个人工程化工作流 |
|
||||
| [如何集成 Stripe 等收费系统](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/backend/stripe-payment/) | 接入支付系统，完成收费链路与基础结算流程 |
|
||||
| [大作业：构建第一个现代应用程序-全栈应用](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/assignments/copywriting-platform-supabase/) | 综合前端、后端与支付模块，完成可上线的全栈 Web 应用 |
|
||||
| 섹션 | 핵심 내용 |
|
||||
| :------ | :---------- |
|
||||
| [프론트엔드 0: Lovart로 나만의 에셋 제작 Agent 만들기](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/lovart-assets/) | Nanobanana와 Lovart를 사용하여 시각 에셋을 배치 생성하고 의도 인식이 가능한 드로잉 에이전트를 구축합니다 |
|
||||
| [프론트엔드 1: Figma & MasterGo 기초](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/figma-mastergo/) | 디자인 초안에서 구현 가능한 UI 사고까지의 워크플로우를 배웁니다 |
|
||||
| [프론트엔드 2: 첫 번째 모던 앱 만들기 - UI 디자인](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/ui-design/) | 모던 애플리케이션 인터페이스 뒤의 UI 디자인 기초를 배웁니다 |
|
||||
| [프론트엔드 3: UI 가이드라인과 멀티 프로덕트 디자인](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/multi-product-ui/) | 공유 UI 규칙으로 여러 제품 전반의 일관성과 미학을 향상시킵니다 |
|
||||
| [프론트엔드 4: LLM과 Skills로 인터페이스를 아름답게 만들기](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/llm-skills-beautiful/) | 프롬프트와 플러그인을 사용하여 AI가 더 세련되고 독특한 인터페이스를 생성하게 합니다 |
|
||||
| [프론트엔드 4: 호그와트 초상화를 만들어봅시다](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/hogwarts-portraits/) | 처음부터 인터랙티브 AI 이미지 프론트엔드 프로젝트를 구축합니다 |
|
||||
| [프론트엔드 6: 디자인 프로토타입에서 프로젝트 코드로](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/design-to-code/) | 디자인 프로토타입을 브라우저에서 실제로 실행되는 프론트엔드 코드로 변환합니다 |
|
||||
| [프론트엔드 7: 모던 컴포넌트 라이브러리로 UI 업그레이드](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/modern-component-library/) | 컴포넌트 라이브러리를 사용하여 전문적인 인터페이스를 더 빠르게 구축합니다 |
|
||||
|
||||
#### AI 能力附录
|
||||
#### 백엔드
|
||||
|
||||
| 章节 | 关键内容 |
|
||||
| :------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------- |
|
||||
| [Dify 入门与知识库集成](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/ai-capabilities/dify-knowledge-base/) | 用 Dify Workflow 与基础 RAG 搭建工具类产品，为后续应用升级打样 |
|
||||
| 섹션 | 핵심 내용 |
|
||||
| :------ | :---------- |
|
||||
| [백엔드 1: Git과 GitHub 배우기](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/git-workflow/) | Git의 핵심 버전 관리 작업과 협업 워크플로우를 마스터합니다 |
|
||||
| [백엔드 2: 데이터베이스에서 Supabase까지](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/database-supabase/) | 관계형 데이터베이스 기초를 배우고 Supabase를 모던 BaaS 플랫폼으로 활용합니다 |
|
||||
| [백엔드 3: 백엔드 API 설계 및 개발](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/ai-interface-code/) | AI를 활용하여 API 설계, 백엔드 코드 생성, API 문서를 작성합니다 |
|
||||
| [백엔드 4: 제품 프로토타입 출시하기](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/zeabur-deployment/) | Zeabur를 사용하여 풀스택 애플리케이션을 클라우드에 빠르게 배포합니다 |
|
||||
| [백엔드 5: IDE에서 CLI AI 코딩 도구까지](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/modern-cli/) | 모던 개발을 위한 터미널 우선 AI 코딩 워크플로우를 탐색합니다 |
|
||||
| [백엔드 6: Stripe 및 기타 결제 시스템 통합](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/stripe-payment/) | 결제 및 청구 기능으로 수익화를 추가합니다 |
|
||||
|
||||
### 三、高级开发工程师
|
||||
#### 메이저 프로젝트
|
||||
|
||||
#### Claude Code 核心技能
|
||||
| 섹션 | 핵심 내용 |
|
||||
| :------ | :---------- |
|
||||
| [메이저 프로젝트 1: 첫 번째 SaaS 풀스택 앱 - AI 카피라이팅 웹사이트](https://datawhalechina.github.io/easy-vibe/en/stage-2/assignments/fullstack-app/) | 로그인, 생성, 결제, 관리자 기능이 있는 AI 마케팅 카피 워크스페이스를 구축합니다 |
|
||||
| [메이저 프로젝트 2: 온라인 시험 및 관리 시스템](https://datawhalechina.github.io/easy-vibe/en/stage-2/assignments/modern-frontend-trae/) | 문제 생성, 시험 응시 흐름, 관리자 도구가 있는 온라인 시험 시스템을 구축합니다 |
|
||||
|
||||
| 章节 | 关键内容 |
|
||||
| :------------------------------------------------------------------------------------------------------ | :----------------------------------------------------------- |
|
||||
| [Claude Code 快速上手](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/core-skills/basics/) | 安装配置、基础操作、实用技巧和常用指令 |
|
||||
| [Claude Code MCP 完全指南](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/core-skills/mcp/) | 通过 MCP 让 Claude Code 连接 GitHub、数据库、API 等外部服务 |
|
||||
| [Claude Code Skills 完全指南](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/core-skills/skills/) | 将专业知识打包成可复用技能包，一次配置反复使用 |
|
||||
| [Claude Code 工作流最佳实践](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/core-skills/workflow/) | 日常开发、代码重构、Code Review 等场景的最佳实践 |
|
||||
| [Claude Agent Teams 完全指南](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/core-skills/agent-teams/) | 多 AI 实例协同工作，像真正的开发团队一样并行协作 |
|
||||
| [Claude Code Superpowers 工程级开发](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/core-skills/superpowers/) | 让 AI 写出工程级代码，遵循 TDD 和最佳实践 |
|
||||
| [如何让 Claude Code 长时间工作](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/core-skills/long-running-tasks/) | 设计长时间运行的任务，让 Coding Tools 持续工作直到完成 |
|
||||
#### AI 기능 부록
|
||||
|
||||
#### 多平台开发
|
||||
| 섹션 | 핵심 내용 |
|
||||
| :------ | :---------- |
|
||||
| [AI 1: Dify 기초 및 지식 베이스 통합](https://datawhalechina.github.io/easy-vibe/en/stage-2/ai-capabilities/dify-knowledge-base/) | Dify로 AI 애플리케이션을 구축하고 프라이빗 지식 베이스를 통합하는 방법을 배웁니다 |
|
||||
|
||||
| 章节 | 关键内容 |
|
||||
| :------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------- |
|
||||
| [如何构建微信小程序](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/wechat-miniprogram/) | 了解微信小程序生态，从官方模板到上线完成一个前端小程序 |
|
||||
| [如何构建微信小程序-包含后端](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/wechat-miniprogram-backend/) | 在小程序中接入数据库与后端逻辑，打通完整业务闭环 |
|
||||
| [如何构建安卓程序](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/android-app/) | 使用 Expo 等工具，完成 Web/原生一体化的安卓应用开发 |
|
||||
| [如何构建 iOS 程序](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/ios-app/) | 使用 Expo 等工具，完成 Web/原生一体化的 iOS 应用开发 |
|
||||
| [如何开发 PWA 本地应用](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/pwa-local-app/) | 让网页变成"真正的 App"，支持离线、推送、桌面安装 |
|
||||
| [如何开发浏览器 AI 助手插件](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/browser-ai-extension/) | 开发 Chrome 插件，一键总结任意网页，支持云端 API 和内置 AI |
|
||||
| [如何开发 Electron 桌面程序](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/electron-voice-to-text/) | 用 Electron 构建语音转文字桌面应用，支持三平台安装运行 |
|
||||
| [如何快速开发并铸造 NFT](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/nft-minting/) | 从零编写智能合约，部署到以太坊测试网，铸造自己的 NFT |
|
||||
| [如何开发 VS Code 插件](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/vscode-extension/) | 开发 AI 项目助手插件，支持模板生成、代码对话、多文件问答 |
|
||||
| [如何开发工业级 Qt 桌面应用](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/qt-industrial-hmi/) | 用 Qt 构建工业级水泵监控 HMI 系统，实时数据、趋势图、报警 |
|
||||
### III. 시니어 개발자
|
||||
|
||||
#### AI 能力附录
|
||||
#### Claude Code 핵심 스킬
|
||||
|
||||
| 章节 | 关键内容 |
|
||||
| :---------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------ |
|
||||
| [什么是 RAG 以及它如何工作](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/ai-advanced/rag-introduction/) | 系统理解 RAG 原理与常见架构，为复杂应用提供知识检索基础 |
|
||||
| [中高级 RAG 与工作流编排：以 LangGraph 为例](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/ai-advanced/langgraph-advanced-rag/) | 使用 LangGraph 等工具设计多步工作流与中高级 RAG 系统 |
|
||||
| 섹션 | 핵심 내용 |
|
||||
| :------ | :---------- |
|
||||
| [Claude Code 시작하기](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/basics/) | 설치, 설정, 기본 사항 및 유용한 명령어 |
|
||||
| [Claude Code MCP 가이드](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/mcp/) | MCP를 통해 Claude Code를 GitHub, 데이터베이스, API 및 기타 서비스에 연결합니다 |
|
||||
| [Claude Code Skills 가이드](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/skills/) | 전문 지식을 재사용 가능한 스킬로 패키지합니다 |
|
||||
| [장기 실행 작업에서 Claude Code가 계속 작동하게 하는 방법](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/long-running-tasks/) | 코딩 도구가 작업이 완료될 때까지 계속 작동하도록 장기 실행 작업을 설계합니다 |
|
||||
| [Claude Agent Teams 가이드](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/agent-teams/) | 실제 개발 팀처럼 여러 AI 인스턴스를 조정합니다 |
|
||||
| [엔지니어링급 개발을 위한 Claude Code 슈퍼파워](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/superpowers/) | TDD와 모범 사례를 통해 AI가 엔지니어링급 코드를 생성하도록 돕습니다 |
|
||||
| [Claude Code 워크플로우 모범 사례](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/workflow/) | 리팩토링, 코드 리뷰, 일상적 개발을 위한 모범 사례 |
|
||||
| [모바일에서 Claude Code 원격 개발](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/mobile-development/) | 데스크톱을 넘어 Claude Code를 사용하고 모바일 기기에서 생산적인 원격 워크플로우를 구축합니다 |
|
||||
| [Claude Agent SDK 완전 가이드](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/claude-agent-sdk/) | SDK로 맞춤형 에이전트 워크플로우를 구축하고 Claude를 자체 도구에 통합합니다 |
|
||||
| [바이브 코딩에서 스펙 코딩으로](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/spec-coding/) | 임시 프롬프팅에서 더 구조화되고 사양 기반의 AI 개발 워크플로우로 전환합니다 |
|
||||
|
||||
### 📚 附录知识库
|
||||
#### 크로스 플랫폼 개발
|
||||
|
||||
> 涵盖 **9 大知识领域**、**80+ 交互式专题**，以动画和可视化组件帮助你直观理解从计算机底层到 AI 前沿的核心概念。
|
||||
| 섹션 | 핵심 내용 |
|
||||
| :------ | :---------- |
|
||||
| [앱에 적합한 플랫폼 선택 방법](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/choose-platform/) | 앱 형태를 비교하고 사용자, 시나리오, 제공 목표에 따라 올바른 플랫폼을 선택합니다 |
|
||||
| [위챗 미니 프로그램 만들기](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/wechat-miniprogram/) | 생태계를 이해하고 템플릿부터 런칭까지 프론트엔드 미니 프로그램을 제공합니다 |
|
||||
| [백엔드가 포함된 위챗 미니 프로그램 만들기](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/wechat-miniprogram-backend/) | 백엔드 로직과 데이터베이스를 추가하여 전체 비즈니스 루프를 완성합니다 |
|
||||
| [Android 앱 만들기](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/android-app/) | 모던 네이티브 워크플로우로 Android 앱 개발을 배웁니다 |
|
||||
| [iOS 앱 만들기](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/ios-app/) | iOS 앱 개발과 Apple 생태계의 관례를 배웁니다 |
|
||||
| [로컬 PWA 앱 만들기](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/pwa-local-app/) | 오프라인 지원, 푸시 알림, 설치 기능으로 웹사이트를 실제 앱으로 변환합니다 |
|
||||
| [브라우저 AI 어시스턴트 확장 프로그램 만들기](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/browser-ai-extension/) | 클라우드 API 또는 내장 AI로 어떤 페이지든 요약하는 Chrome 확장 프로그램을 만듭니다 |
|
||||
| [Electron 데스크톱 앱 만들기](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/electron-voice-to-text/) | Electron으로 3개 플랫폼을 위한 음성-투-텍스트 데스크톱 앱을 구축합니다 |
|
||||
| [NFT를 빠르게 빌드하고 민팅하기](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/nft-minting/) | 처음부터 스마트 컨트랙트를 작성하고, 배포하고, 자신만의 NFT를 민팅합니다 |
|
||||
| [VS Code 확장 프로그램 만들기](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/vscode-extension/) | 템플릿, 코드 채팅, 다중 파일 Q&A가 있는 AI 프로젝트 어시스턴트를 구축합니다 |
|
||||
| [산업용 Qt 데스크톱 앱 만들기](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/qt-industrial-hmi/) | 트렌드, 알림, 모니터링이 있는 실시간 Qt HMI 시스템을 만듭니다 |
|
||||
|
||||
#### AI 기능 부록
|
||||
|
||||
| 섹션 | 핵심 내용 |
|
||||
| :------ | :---------- |
|
||||
| [RAG란 무엇이며 어떻게 작동하는가](https://datawhalechina.github.io/easy-vibe/en/stage-3/ai-advanced/rag-introduction/) | RAG 원리와 일반적인 아키텍처에 대한 체계적인 이해를 구축합니다 |
|
||||
| [LangGraph를 활용한 중고급 RAG 워크플로우](https://datawhalechina.github.io/easy-vibe/en/stage-3/ai-advanced/langgraph-advanced-rag/) | 다단계 워크플로우와 더 고급 RAG 시스템을 설계합니다 |
|
||||
|
||||
### 📚 부록 지식 베이스
|
||||
|
||||
> **9개 주요 지식 영역**과 **80개 이상의 인터랙티브 주제**를 다루며, 애니메이션과 시각 컴포넌트를 사용하여 컴퓨터 기초부터 AI 최전선까지 핵심 개념을 직관적으로 이해할 수 있도록 돕습니다.
|
||||
>
|
||||
> 👉 [查看完整附录](https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/) · [AI 能力词典](https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/ai-capability-dictionary)
|
||||
> 👉 [전체 부록 보기](https://datawhalechina.github.io/easy-vibe/en/appendix/)
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td valign="top" width="33%">
|
||||
<strong>💻 计算机基础</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/transistor-to-cpu.html">从晶体管到 CPU</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/operating-systems.html">操作系统</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/data-encoding-storage.html">数据的编码、存储与传输</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/computer-networks.html">网络：两台电脑如何对话</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/data-structures.html">数据结构</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/algorithm-thinking.html">算法思维入门</a>
|
||||
</td>
|
||||
<td valign="top" width="33%">
|
||||
<strong>🔧 开发工具</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/git-version-control.html">Git：代码的时光机</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/command-line-shell.html">命令行与 Shell 脚本</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/package-managers.html">包管理器</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/debugging-art/">调试的艺术</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/regex.html">正则表达式</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/environment-path.html">环境变量与 PATH</a>
|
||||
</td>
|
||||
<td valign="top" width="33%">
|
||||
<strong>🌐 浏览器与前端</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/javascript-deep-dive.html">JavaScript 语言深入</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/browser-as-os-rendering.html">浏览器渲染管道</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/frontend-frameworks.html">前端框架对比</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/graphics-animation.html">图形与动画</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/web-performance.html">网页性能的度量与优化</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/frontend-engineering.html">前端工程化全貌</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top" width="33%">
|
||||
<strong>🖥️ 服务器与后端</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/http-protocol.html">HTTP 协议</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/api-design.html">API 设计哲学</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/auth-authorization.html">认证与授权体系</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/concurrency-async.html">并发、异步与多线程</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/message-queues.html">消息队列与事件驱动</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/backend-layered-architecture.html">后端分层架构</a>
|
||||
</td>
|
||||
<td valign="top" width="33%">
|
||||
<strong>📊 数据</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/database-fundamentals.html">数据库原理与 SQL</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/database-fundamentals.html">数据库原理</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/data-tracking.html">数据埋点与用户行为采集</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/data-analysis.html">数据分析基础</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/ab-testing.html">A/B 测试与实验驱动</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/data-visualization.html">数据可视化与仪表盘</a>
|
||||
</td>
|
||||
<td valign="top" width="33%">
|
||||
<strong>🏗️ 架构与系统设计</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/6-architecture-and-system-design/monolith-to-microservices.html">从单体到微服务的演进</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/6-architecture-and-system-design/distributed-systems.html">分布式系统的挑战</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/6-architecture-and-system-design/high-availability.html">高可用与容灾</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/6-architecture-and-system-design/system-design-methodology.html">系统设计方法论</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top" width="33%">
|
||||
<strong>☁️ 基础设施与运维</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/docker-containers.html">Docker 容器化</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/kubernetes.html">Kubernetes 编排</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/ci-cd.html">CI / CD 自动化</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/dns-https.html">域名、DNS 与 HTTPS</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/monitoring-logging.html">监控、日志与告警</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/infrastructure-as-code.html">基础设施即代码</a>
|
||||
</td>
|
||||
<td valign="top" width="33%">
|
||||
<strong>🤖 人工智能</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/llm-principles.html">大语言模型的工作原理</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/transformer-attention.html">Transformer 与注意力机制</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/rag.html">RAG 架构</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/ai-agents.html">AI Agent 与工具调用</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/prompt-engineering.html">提示词工程</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/image-generation.html">图像生成原理</a>
|
||||
</td>
|
||||
<td valign="top" width="33%">
|
||||
<strong>🎯 工程素养</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/code-quality-refactoring.html">代码质量与重构</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/testing-strategies.html">测试策略</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/design-patterns.html">设计模式</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/security-thinking.html">安全思维与攻防基础</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/technical-writing.html">技术文档写作</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/open-source-collaboration.html">开源协作</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
### 🎓 다른 강좌
|
||||
|
||||
## 🛠️ 如何学习
|
||||
- [실전 모던 RL](#다른-강좌)
|
||||
- [하니스 엔지니어링 배우기](#다른-강좌)
|
||||
|
||||
- 根据个人能力，选择性地阅读和实践相关章节，如果有问题欢迎 issue 提问。
|
||||
## 🛠️ 학습 방법
|
||||
|
||||
## 💻 本地启动本课件
|
||||
- 현재 수준에 맞는 섹션을 읽고 실습하세요. 막히는 부분이 있으면 언제든 이슈를 열어주세요.
|
||||
|
||||
### 现代方案
|
||||
## 💻 로컬 실행
|
||||
|
||||
在 AI IDE 对话框（vscode、cursor、trae 等）中，输入下列提示词启动本课件：
|
||||
### 모던 방식
|
||||
|
||||
```
|
||||
请你帮我运行这个项目的本地服务
|
||||
VS Code, Cursor, Trae 등 AI IDE 채팅 창에서 다음과 같이 입력하세요:
|
||||
|
||||
```text
|
||||
이 프로젝트를 로컬에서 실행해 주세요.
|
||||
```
|
||||
|
||||
### 旧方案
|
||||
### 전통적 방식
|
||||
|
||||
1. npm install
|
||||
2. npm run dev
|
||||
3. 打开浏览器访问 `http://localhost:3000` 即可查看。
|
||||
1. `npm install`
|
||||
2. `npm run dev`
|
||||
3. 브라우저에서 `http://localhost:3000`을 엽니다.
|
||||
|
||||
## 🤝 参与贡献
|
||||
## 다른 강좌
|
||||
|
||||
- 如果你发现了一些问题，或者觉得任何可以改进本项目的地方，可以提 Issue 进行反馈。如果提完没有人回复你可以联系[保姆团队](https://github.com/datawhalechina/DOPMC/blob/main/OP.md)的同学进行反馈跟进~
|
||||
- 如果你想参与贡献本项目，可以提 Pull Request，如果提完没有人回复你可以联系[保姆团队](https://github.com/datawhalechina/DOPMC/blob/main/OP.md)的同学进行反馈跟进~
|
||||
- 如果你对 Datawhale 很感兴趣并想要发起一个新的项目，请按照[Datawhale 开源项目指南](https://github.com/datawhalechina/DOPMC/blob/main/GUIDE.md)进行操作即可~
|
||||
저희 팀이 만든 다른 강좌도 확인해 보세요!
|
||||
|
||||
## 🙏 感谢每位贡献者
|
||||
[](https://github.com/walkinglabs/hands-on-modern-rl)
|
||||
|
||||
- [散步-项目负责人](https://github.com/sanbuphy) (Datawhale成员)
|
||||
- 方可-指导老师（Datawhale成员, 清华大学）
|
||||
- [Yerim Kang](https://github.com/yerim25)（实践项目部分-清华大学）
|
||||
- [赵芷霖](https://github.com/ChileenZ)（实践项目部分-清华大学）
|
||||
- [李亦萱](https://yixuan20.github.io/)（页面美术设计-清华大学）
|
||||
- 刘思怡（实践项目部分-清华大学）
|
||||
- [刘丽欣](https://github.com/liulx25xx)（实践项目部分-清华大学）
|
||||
- AI Vibe Coding 101 内测群完整给建议体验的小伙伴们
|
||||
**실전 모던 RL**: 기본 RL 개념에서 LLM 정렬, RLVR, 고급 Agentic 시스템까지 이어주는 오픈소스 실전 커리큘럼입니다.
|
||||
|
||||
### 特别感谢
|
||||
[](https://github.com/walkinglabs/learn-harness-engineering/tree/main)
|
||||
|
||||
- 感谢 [@Sm1les](https://github.com/Sm1les) 对本项目的帮助与支持
|
||||
- 感谢所有为本项目做出贡献的开发者们和支持点赞的朋友们 ❤️
|
||||
**하니스 엔지니어링 배우기**: 하니스 엔지니어링에 대한 포괄적인 가이드입니다.
|
||||
|
||||
## 🤝 기여 및 기여자
|
||||
|
||||
- 문제를 발견하거나 개선할 수 있는 부분이 있다면 자유롭게 이슈를 열어주세요. 답변이 없으면 [Datawhale 지원 팀](https://github.com/datawhalechina/DOPMC/blob/main/OP.md)에 연락할 수도 있습니다.
|
||||
- 기여하고 싶다면 풀 리퀘스트를 열어주세요. 답변이 없으면 [Datawhale 지원 팀](https://github.com/datawhalechina/DOPMC/blob/main/OP.md)에 연락할 수도 있습니다.
|
||||
- 새로운 Datawhale 오픈소스 프로젝트를 시작하고 싶다면 [Datawhale 오픈소스 프로젝트 가이드](https://github.com/datawhalechina/DOPMC/blob/main/GUIDE.md)를 따르세요.
|
||||
|
||||
### 🙏 기여자
|
||||
|
||||
- [산부 - 프로젝트 리드](https://github.com/sanbuphy) (Datawhale 멤버)
|
||||
- 팡커 - 멘토 (Datawhale 멤버, 칭화대학교)
|
||||
- [예림 강](https://github.com/yerim25) (실습 프로젝트, 칭화대학교)
|
||||
- [즈린 자오](https://github.com/ChileenZ) (실습 프로젝트, 칭화대학교)
|
||||
- [이쉬안 리](https://yixuan20.github.io/) (비주얼 디자인, 칭화대학교)
|
||||
- 쓰이 류 (실습 프로젝트, 칭화대학교)
|
||||
- [리신 류](https://github.com/liulx25xx) (실습 프로젝트, 칭화대학교)
|
||||
- AI Vibe Coding 101 내부 테스트 그룹에서 제안과 피드백을 공유한 모든 분들
|
||||
|
||||
### 특별 감사
|
||||
|
||||
- 이 프로젝트에 도움과 지원을 주신 [@Sm1les](https://github.com/Sm1les)님께 감사드립니다
|
||||
- 피드백과 스타로 프로젝트를 지지해 주신 모든 기여자분들께 감사드립니다 ❤️
|
||||
|
||||
<div align="center">
|
||||
|
||||
|
||||
<a href="https://www.star-history.com/#datawhalechina/easy-vibe&type=timeline&legend=top-left">
|
||||
<picture>
|
||||
<source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=datawhalechina/easy-vibe&type=timeline&theme=dark&legend=top-left" />
|
||||
@@ -455,22 +419,21 @@ Easy-Vibe는 그것을 실제 제품으로 만드는 방법을 가르칩니다.
|
||||
</a>
|
||||
</div>
|
||||
|
||||
## 📄 LICENSE
|
||||
## 📄 라이선스
|
||||
|
||||
<div align="center">
|
||||
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">
|
||||
<img
|
||||
alt="知识共享许可协议"
|
||||
alt="크리에이티브 커먼즈 라이선스"
|
||||
style="border-width:0"
|
||||
src="https://img.shields.io/badge/license-CC%20BY--NC--SA%204.0-lightgrey"
|
||||
/>
|
||||
</a>
|
||||
<br />
|
||||
本作品采用
|
||||
이 작업은 다음 라이선스에 따라 제공됩니다:
|
||||
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">
|
||||
知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议
|
||||
</a>
|
||||
进行许可。
|
||||
크리에이티브 커먼즈 저작자표시-비영리-동일조건변경허락 4.0 국제 라이선스
|
||||
</a>.
|
||||
</div>
|
||||
|
||||
## Star History
|
||||
|
||||
+246
-283
@@ -3,6 +3,8 @@
|
||||
|
||||
<img src="../../assets/easy-vibe-logo-hd.svg" alt="Easy-Vibe Logo" width="300">
|
||||
|
||||
<img src="../../assets/banner.png" alt="Easy-Vibe Banner" width="100%">
|
||||
|
||||
<p align="center" style="font-size: 1.2em; color: #666; margin: 20px 0;">
|
||||
Bat dau ngay va cung vibe nao. Chi can ban noi duoc, ban da co the lam app.<br>
|
||||
<span style="font-size: 0.9em; color: #888;">直接上手，一起 vibe！会说话就会做应用。</span>
|
||||
@@ -11,16 +13,16 @@
|
||||
<a href="https://trendshift.io/repositories/22079" target="_blank"><img src="https://trendshift.io/api/badge/repositories/22079" alt="datawhalechina/easy-vibe | Trendshift" style="width: 250px; height: 55px;" width="250" height="55"/></a>
|
||||
|
||||
<p align="center">
|
||||
🚀 <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">Bat dau ngay</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/en/appendix/">Huong dan tuong tac</a> · 🦞 <a href="https://github.com/datawhalechina/hello-claw">Hoc OpenClaw</a><br>
|
||||
🚀 <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">Bat dau kham pha</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/en/appendix/">Huong dan tuong tac</a> · 🦞 <a href="https://github.com/datawhalechina/hello-claw">Hoc OpenClaw</a> · 📖 <a href="#table-of-contents">Muc luc</a><br>
|
||||
<span style="font-size: 0.85em; color: #888;">🚀 <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">开始体验</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/">交互式教程</a> · 🦞 <a href="https://github.com/datawhalechina/hello-claw">学习 OpenClaw</a> · 📖 <a href="#table-of-contents">查看目录</a></span>
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
<a href="https://datawhalechina.github.io/easy-vibe/welcome.html">Bat dau doc</a> ·
|
||||
<a href="https://datawhalechina.github.io/easy-vibe/welcome.html">Doc truc tuyen</a> ·
|
||||
<a href="#-content-navigation">Lo trinh hoc</a><br>
|
||||
<span style="font-size: 0.85em; color: #888;">
|
||||
<a href="https://datawhalechina.github.io/easy-vibe/welcome.html">开始阅读</a> ·
|
||||
<a href="#-内容导航">学习地图</a>
|
||||
<a href="#-content-navigation">学习地图</a>
|
||||
</span>
|
||||
</p>
|
||||
|
||||
@@ -34,9 +36,9 @@
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
<a href="../../README.md"><img alt="English" src="https://img.shields.io/badge/English-d9d9d9"></a>
|
||||
<a href="../zh-CN/README.md"><img alt="简体中文" src="https://img.shields.io/badge/简体中文-d9d9d9"></a>
|
||||
<a href="../zh-TW/README.md"><img alt="繁體中文" src="https://img.shields.io/badge/繁體中文-d9d9d9"></a>
|
||||
<a href="../en-US/README.md"><img alt="English" src="https://img.shields.io/badge/English-d9d9d9"></a>
|
||||
<a href="../ja-JP/README.md"><img alt="日本語" src="https://img.shields.io/badge/日本語-d9d9d9"></a>
|
||||
<a href="../es-ES/README.md"><img alt="Español" src="https://img.shields.io/badge/Español-d9d9d9"></a>
|
||||
<a href="../fr-FR/README.md"><img alt="Français" src="https://img.shields.io/badge/Français-d9d9d9"></a>
|
||||
@@ -52,395 +54,357 @@
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/gif-header.png" width="100%">
|
||||
<br>
|
||||
<strong>新手专属学习地图</strong>
|
||||
<strong>Lo trinh hoc cho nguoi moi</strong>
|
||||
<br>
|
||||
<sub>零基础专属指引，清晰规划路径，告别“学了忘”</sub>
|
||||
<sub>Huong dan ro rang tu con so khong, giup ban ngung "hoc roi quen"</sub>
|
||||
</td>
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/gif-tutorial.png" width="100%">
|
||||
<br>
|
||||
<strong>手把手图文教程</strong>
|
||||
<strong>Huong dan truc quan tung buoc</strong>
|
||||
<br>
|
||||
<sub>保姆级图文详解，如同私教在旁，跟着做就能学会</sub>
|
||||
<sub>Chi tiet tung buoc nhu hoc voi gia su rieng</sub>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/gif-ide.gif" width="100%">
|
||||
<br>
|
||||
<strong>沉浸式模拟编程</strong>
|
||||
<strong>Lap trinh mo phong hap dan</strong>
|
||||
<br>
|
||||
<sub>虚拟鼠标自动导览，带你快速上手 IDE 核心用法</sub>
|
||||
<sub>Chuot ao huong dan giup ban nhanh chong lam quen voi quy trinh IDE co ban</sub>
|
||||
</td>
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/gif-diffusion.gif" width="100%">
|
||||
<br>
|
||||
<strong>看得见的 AI 原理</strong>
|
||||
<strong>Nguyen ly AI co the nhin thay</strong>
|
||||
<br>
|
||||
<sub>算法原理动画化，一眼看懂 AI 如何“画”出图片</sub>
|
||||
<sub>Giai thich bang hoat anh giup ban de hieu cach AI tao hinh anh</sub>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/gif-rag.gif" width="100%">
|
||||
<br>
|
||||
<strong>像玩游戏一样学 RAG</strong>
|
||||
<strong>Hoc RAG nhu choi game</strong>
|
||||
<br>
|
||||
<sub>独家交互组件，点击即可看清 RAG 数据流向</sub>
|
||||
<sub>Thanh phan tuong tac giup ban click qua toan bo luong du lieu RAG</sub>
|
||||
</td>
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/git-terminal.gif" width="100%">
|
||||
<br>
|
||||
<strong>可视化终端原理</strong>
|
||||
<strong>Khai niem terminal truc quan</strong>
|
||||
<br>
|
||||
<sub>命令行操作可视化，直观展示后台逻辑与原理</sub>
|
||||
<sub>Hanh vi dong lenh tro nen truc quan khi logic ben duoi duoc hinh hoa</sub>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div align="center">
|
||||
<h3>⭐ 欢迎 <a href="https://github.com/datawhalechina/easy-vibe" style="color: #d0cd16ff;">点击此处Star</a> 加速更新 ❤️</h3>
|
||||
<h3>⭐ <a href="https://github.com/datawhalechina/easy-vibe" style="color: #d0cd16ff;">Nhan Star cho repo tai day</a> de giup tang toc cap nhat ❤️</h3>
|
||||
</div>
|
||||
|
||||
<div align="center" style="margin: 30px 0;">
|
||||
<a href="https://github.com/datawhalechina/easy-vibe/issues/new?template=story_submission.md">
|
||||
<img src="https://raw.githubusercontent.com/datawhalechina/easy-vibe/main/assets/stories_image.png" alt="Share Your Vibe Story" width="80%" style="border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.15);">
|
||||
<img src="https://raw.githubusercontent.com/datawhalechina/easy-vibe/main/assets/stories_image.png" alt="Chia se cau chuyen Vibe cua ban" width="80%" style="border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.15);">
|
||||
</a>
|
||||
<p style="margin-top: 15px; font-size: 1.1em; color: #666;">
|
||||
📝 <strong>Have your own vibe coding story?</strong>
|
||||
Submit it here and inspire others!
|
||||
📝 <strong>Ban co cau chuyen vibe coding rieng?</strong>
|
||||
Gui tai day va truyen cam hung cho nguoi khac!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
## 为什么需要 Easy-Vibe
|
||||
## Muc luc
|
||||
|
||||
Muốn làm app ghi chép thu chi? Chỉ cần nói ra.
|
||||
- [Tai sao can Easy-Vibe](#tai-sao-can-easy-vibe)
|
||||
- [Tin tuc](#-tin-tuc)
|
||||
- [Danh cho ai](#danh-cho-ai)
|
||||
- [Lo trinh hoc cua ban](#lo-trinh-hoc-cua-ban)
|
||||
- [Loi khuyen hoc](#loi-khuyen-hoc)
|
||||
- [I. Nhap mon nguoi moi](#i-nhap-mon-nguoi-moi)
|
||||
- [II. Lap trinh vien trung cap](#ii-lap-trinh-vien-trung-cap)
|
||||
- [III. Lap trinh vien cao cap](#iii-lap-trinh-vien-cao-cap)
|
||||
- [Phu luc Co so kien thuc](#-phu-luc-co-so-kien-thuc)
|
||||
- [Cach hoc](#️-cach-hoc)
|
||||
- [Chay cuc bo](#-chay-cuc-bo)
|
||||
- [Cac khoa hoc khac](#cac-khoa-hoc-khac)
|
||||
- [Dong gop & Nguoi dong gop](#dong-gop--nguoi-dong-gop)
|
||||
- [LICENSE](#-license)
|
||||
|
||||
Cần một hệ thống đặt lịch có đăng nhập WeChat? Chỉ cần nói ra.
|
||||
## Tai sao can Easy-Vibe
|
||||
|
||||
Muốn có blog kèm bình luận? Chỉ cần nói ra.
|
||||
Muon lam app ghi chep thu chi? Chi can noi ra.
|
||||
|
||||
Trong thời đại AI, lập trình bắt đầu từ việc mô tả điều bạn muốn.
|
||||
Can mot he thong dat lich co dang nhap WeChat? Chi can noi ra.
|
||||
|
||||
Easy-Vibe giúp bạn biến điều đó thành một sản phẩm thật.
|
||||
Muon co blog kem binh luan? Chi can noi ra.
|
||||
|
||||
Trong thoi dai AI, lap trinh bat dau tu viec mo ta dieu ban muon.
|
||||
|
||||
Easy-Vibe giup ban bien dieu do thanh mot san pham that.
|
||||
|
||||
|
||||
## 🔥 News
|
||||
|
||||
- **[2026-03-29]** ✨ **Ra mắt mục câu chuyện ngưởi dùng và cập nhật bằng 4 trường hợp có thật**: Chúng tôi thêm carousel tương tác và các trang câu chuyện riêng trên trang chủ, rồi thay nội dung tạm bằng bốn câu chuyện thật từ một giáo viên tiểu học vùng quê, một sinh viên đại học, một giáo viên CNTT trung học và một tài xế xe tải đã dùng AI để làm ra sản phẩm thật. [👉 View the stories](https://datawhalechina.github.io/easy-vibe/zh-cn/vibe-stories/story-1.html)
|
||||
- **[2026-03-26]** 🚀 **Cập nhật thực hành Giai đoạn 2 lớn**: Dự án tốt nghiệp SaaS "[Ứng dụng full-stack SaaS đầu tiên: Trang web tạo nội dung](https://datawhalechina.github.io/easy-vibe/en/stage-2/assignments/fullstack-app/)" đã hoàn thành và phần "[Cách tích hợp Stripe và hệ thống thanh toán](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/stripe-payment/)" được mở rộng đáng kể.
|
||||
- **[2026-03-25]** 📚 **Phụ lục mới: Nghiên cứu ngưởi dùng và xác thực yêu cầu**: Thêm bốn bài viết mới về tìm kiếm ý tưởng, mô hình Double Diamond, Jobs to Be Done và The Mom Test để giúp ngưởi mới bắt đầu khám phá và xác thực ý tưởng sản phẩm. [👉 Đọc phụ lục](https://datawhalechina.github.io/easy-vibe/en/appendix/)
|
||||
- **[2026-03-25]** 📚 **Tài liệu tiếng Anh được cập nhật đầy đủ**: Giai đoạn 2 (Phát triển full-stack) và Giai đoạn 3 (Phát triển nâng cao) hiện đã có đầy đủ bằng tiếng Anh. [👉 Bắt đầu học](https://datawhalechina.github.io/easy-vibe/en/stage-2/)
|
||||
- **[2026-03-02]** 🦞 **Hỗ trợ thân thiện cho OpenClaw và AI Agent**: Thêm `llms.txt` để OpenClaw, Claude, Cursor, Trae và các AI Agent khác có thể nhanh chóng hiểu cấu trúc kho lưu trữ và tìm đúng nội dung hướng dẫn.
|
||||
- **[2026-03-01]** Phần [Phát triển Nâng cao](https://datawhalechina.github.io/easy-vibe/en/stage-3/) đã được nâng cấp toàn diện với hướng dẫn sâu về Claude Code, bao gồm MCP, Skills, Agent Teams và hơn thế nữa, cùng với tám hướng dẫn dự án đa nền tảng.
|
||||
- **[2026-02-25]** Cập nhật [Cơ sở kiến thức Phụ lục](https://datawhalechina.github.io/easy-vibe/en/appendix/), hiện bao gồm 9 lĩnh vực kiến thức và hơn 80 chủ đề tương tác.
|
||||
- **[2026-01-27]** Thêm hướng dẫn phát triển ứng dụng cho Android và iOS.
|
||||
- **[2026-01-19]** Phát hành các bản demo tương tác cho Prompt Engineering, lịch sử AI, thiết kế xác thực, nguyên lý Git và hơn thế nữa.
|
||||
## 🔥 Tin tuc
|
||||
|
||||
- **[2026-03-29]** ✨ **Ra mat muc cau chuyen nguoi dung va nang cap voi nhung hanh trinh nguoi dung that**: Da them phan Vibe Stories moi tren trang chu voi carousel tuong tac va cac trang story rieng, sau do thay the noi dung tam bang bon cau chuyen that tu mot giao vien tieu hoc vung que, mot sinh vien dai hoc, mot giao vien CNTT trung hoc va mot tai xe xe tai da xay dung san pham that voi AI. [👉 Xem cau chuyen](https://datawhalechina.github.io/easy-vibe/zh-cn/vibe-stories/story-1.html)
|
||||
- **[2026-03-26]** 🚀 **Cap nhat thuc hanh Giai doan 2 lon**: Hoan thanh du an SaaS tot nghiep "[Ung dung Full-stack SaaS dau tien: Trang web tao noi dung](https://datawhalechina.github.io/easy-vibe/en/stage-2/assignments/fullstack-app/)" va mo rang dang ke phan "[Cach tich hop Stripe va he thong thanh toan](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/stripe-payment/)", cung nhu noi dung quan trong ve UI da san pham va quy trinh backend WeChat Mini Program.
|
||||
- **[2026-03-25]** 📚 **Phu luc moi: Nghien cuu nguoi dung va Xac thuc yeu cau**: Them bon bai viet moi ve tim kiem y tuong, mo hinh Double Diamond, Jobs to Be Done va The Mom Test giup nguoi moi bat dau kham pha va xac thuc y tuong san pham. [👉 Doc phu luc](https://datawhalechina.github.io/easy-vibe/en/appendix/)
|
||||
- **[2026-03-25]** 📚 **Tai lieu tieng Anh duoc cap nhat day du**: Giai doan 2 (Phat trien full-stack) va Giai doan 3 (Phat trien nang cao) hien da co day du bang tieng Anh. [👉 Bat dau hoc](https://datawhalechina.github.io/easy-vibe/en/stage-2/)
|
||||
<details>
|
||||
<summary>Tin tức Trước đây</summary>
|
||||
<summary>Tin tuc truoc day</summary>
|
||||
|
||||
- **[2026-01-16]** Tái cấu trúc cấu trúc dự án và thiết lập chính thức chương nhập môn cho ngưởi mới bắt đầu.
|
||||
- **[2026-01-14]** Hoàn thành cập nhật lớn cho tài liệu xây dựng nguyên mẫu sản phẩm Giai đoạn 1.
|
||||
- **[2026-01-13]** Tái cấu trúc kiến trúc tài liệu và kích hoạt đầy đủ hỗ trợ đa ngôn ngữ (i18n).
|
||||
- **[2026-01-01]** Phát hành bản đồ học tập cốt lõi của dự án.
|
||||
- **[2026-03-02]** 🦞 **Ho tro than thien cho OpenClaw va AI Agent**: Da them `llms.txt` de OpenClaw, Claude, Cursor, Trae va cac AI Agent khac co the nhanh chong hieu cau truc kho luu tru va tim dung noi dung huong dan.
|
||||
- **[2026-03-01]** Phan [Phat trien Nang cao](https://datawhalechina.github.io/easy-vibe/en/stage-3/) da duoc nang cap toan dien voi huong dan sau ve Claude Code, bao gom MCP, Skills, Agent Teams va hon the nua, cung voi tam huong dan du an da nen tang.
|
||||
- **[2026-02-25]** Cap nhat [Co so kien thuc Phu luc](https://datawhalechina.github.io/easy-vibe/en/appendix/), hien bao gom 9 linh vuc kien thuc va hon 80 chu de tuong tac.
|
||||
- **[2026-01-27]** Them huong dan phat trien ung dung Android va iOS.
|
||||
- **[2026-01-19]** Phat hanh cac ban demo tuong tac cho Prompt Engineering, lich su AI, thiet ke xac thuc, nguyen ly Git va hon the nua.
|
||||
- **[2026-01-16]** Tai cau truc cau truc du an va thiet lap chinh thuc lo trinh nhap mon cho nguoi moi.
|
||||
- **[2026-01-14]** Hoan thanh cap nhat lon cho tai lieu xay dung nguyen mau san pham Giai doan 1.
|
||||
- **[2026-01-13]** Tai cau truc kien truc tai lieu va kich hoat day du ho tro da ngon ngu.
|
||||
- **[2026-01-01]** Phat hanh ban do hoc tap cot loi cua du an.
|
||||
</details>
|
||||
|
||||
## 适合谁
|
||||
## Danh cho ai
|
||||
|
||||
- **零基础爱好者**：先做出第一个作品，再理解怎么做
|
||||
- **产品经理 / 创业者**：快速验证想法，低成本做 MVP
|
||||
- **学生**：建立 AI 时代的实战技能
|
||||
- **初级开发者**：补齐从想法到上线的完整开发链路
|
||||
- **中高级开发者**：掌握 AI 协作开发、复杂项目实战与效率升级
|
||||
- **Nguoi moi bat dau hoan toan**: Lam san pham dau tien truoc, roi hieu cach no hoat dong
|
||||
- **Quan ly san pham / nguoi khoi nghiep**: Xac thuc y tuong nhanh va xay dung MVP voi chi phi thap
|
||||
- **Hoc sinh, sinh vien**: Phat trien ky nang thuc te cho thoi dai AI
|
||||
- **Lap trinh vien junior**: Hoc toan bo lo trinh tu y tuong den san pham that
|
||||
- **Lap trinh vien trung va cao cap**: Nang cap quy trinh lam viec voi AI cho cac du an phuc tap
|
||||
|
||||
|
||||
|
||||
## 你的学习路径
|
||||
## Lo trinh hoc cua ban
|
||||
|
||||
### 🎮 我想先试试（5分钟体验）
|
||||
**适合人群**：所有人
|
||||
**学什么**：AI 编程初体验、贪吃蛇小游戏
|
||||
**你会得到**：5 分钟做出第一个 AI 应用
|
||||
### 🎮 Toi muon trai nghiem nhanh
|
||||
**Phu hop voi**: Moi nguoi
|
||||
**Ban se hoc**: Cam giac thuc su ve AI coding qua mot vi du thuc hanh don gian, cu the
|
||||
**Ban se nhan duoc**: An tuong dau tien ro rang ve vibe coding va cach lam viec voi AI thong qua hoi thoai
|
||||
|
||||
[开始体验](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/learning-map/)
|
||||
[Bat dau tai day](https://datawhalechina.github.io/easy-vibe/en/stage-1/ai-capabilities-through-games/)
|
||||
|
||||
### 💡 我有个想法要实现
|
||||
**适合人群**：零基础/产品经理/创业者
|
||||
**学什么**：AI IDE 工具、需求拆解、页面设计、功能规划、提示词写法、原型迭代
|
||||
**你会得到**：一个可演示的产品原型
|
||||
### 💡 Toi muon bien y tuong thanh nguyen mau san pham
|
||||
**Phu hop voi**: Nguoi moi / quan ly san pham / nguoi khoi nghiep
|
||||
**Ban se hoc**: Lo trinh hoc, cong cu AI IDE, xac thuc y tuong, tao nguyen mau, tich hop kha nang AI va lap day du demo
|
||||
**Ban se nhan duoc**: Mot nguyen mau san pham AI co the trinh bay cho nguoi dung hoac dong doi
|
||||
|
||||
[开始学习](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/learning-map/)
|
||||
[Bat dau hoc](https://datawhalechina.github.io/easy-vibe/en/stage-1/learning-map/)
|
||||
|
||||
### 🚀 我想系统学习
|
||||
**适合人群**：开发者/进阶学习者
|
||||
**学什么**：前端、后端、数据库、AI 集成、部署运维、Claude Code 开发技巧
|
||||
**你会得到**：独立完成一个可上线的全栈 AI 应用
|
||||
### 🚀 Toi muon xay dung san pham full-stack tron ven
|
||||
**Phu hop voi**: Lap trinh vien junior / indie hacker / nguoi hoc nang cao
|
||||
**Ban se hoc**: Quy trinh frontend, design-to-code, co so du lieu, backend API, trien khai, thanh toan va du an lon
|
||||
**Ban se nhan duoc**: Kha nang doc lap trien khai ung dung web AI hien dai
|
||||
|
||||
[开始学习](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/)
|
||||
[Bat dau hoc](https://datawhalechina.github.io/easy-vibe/en/stage-2/)
|
||||
|
||||
### 🦞 我想构建 AI Agent
|
||||
**适合人群**：对 AI Agent 感兴趣的开发者
|
||||
**学什么**：OpenClaw AI 助理、Skills 系统、自动化工作流
|
||||
**你会得到**：一个属于你的命令行 AI 助理
|
||||
### AI-Native: Toi muon quy trinh Claude Code va agent nang cao
|
||||
**Phu hop voi**: Lap trinh vien quan tam den ky thuat AI-native
|
||||
**Ban se hoc**: Claude Code, MCP, Skills, Agent Teams, tac vu chay dai, Spec Coding va giao phan ung dung da nen tang
|
||||
**Ban se nhan duoc**: Quy trinh manh me hon cho phat trien co tro giup AI va tu dong hoa
|
||||
|
||||
[开始学习](https://github.com/datawhalechina/hello-claw)
|
||||
[Den phat trien nang cao](https://datawhalechina.github.io/easy-vibe/en/stage-3/)
|
||||
|
||||
### 📚 我想查资料
|
||||
**适合人群**：所有人
|
||||
**学什么**：计算机基础、AI 原理、9 大知识领域
|
||||
**你会得到**：80+ 交互式专题资料
|
||||
### 📚 Toi muon tai lieu tham khao va kien thuc co ban
|
||||
**Phu hop voi**: Moi nguoi
|
||||
**Ban se hoc**: Co ban tin hoc, co ban frontend/backend, ha tang, nguyen ly AI va thuc tien ky thuat
|
||||
**Ban se nhan duoc**: Co so tai lieu tham khao dai han bao gom 9 linh vuc kien thuc lon
|
||||
|
||||
[查看知识库](https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/)
|
||||
[Duyet co so kien thuc](https://datawhalechina.github.io/easy-vibe/en/appendix/)
|
||||
|
||||
## 学习建议
|
||||
## Loi khuyen hoc
|
||||
|
||||
- 零基础、产品经理、创业者：从 [第一阶段](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/learning-map/) 开始
|
||||
- 有开发经验：从 [第二阶段](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/) 开始
|
||||
- 想直接做复杂项目：进入 [第三阶段](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/)
|
||||
- 想学 AI Agent：看 [Hello Claw](https://github.com/datawhalechina/hello-claw)
|
||||
- Neu ban la nguoi moi, quan ly san pham hoac nguoi khoi nghiep, bat dau voi [Giai doan 1](https://datawhalechina.github.io/easy-vibe/en/stage-1/learning-map/)
|
||||
- Neu ban muon chuyen tu nguyen mau sang trien khai full-stack, bat dau voi [Giai doan 2](https://datawhalechina.github.io/easy-vibe/en/stage-2/)
|
||||
- Neu ban muon quy trinh Claude Code nang cao hoac du an da nen tang, den [Giai doan 3](https://datawhalechina.github.io/easy-vibe/en/stage-3/)
|
||||
- Neu ban bi chan boi khai niem hoac thieu kien thuc nen tang, su dung [Phu luc Co so kien thuc](https://datawhalechina.github.io/easy-vibe/en/appendix/)
|
||||
|
||||
### 📖 内容导航
|
||||
### 📖 Dieu huong noi dung
|
||||
|
||||
<div align="center">
|
||||
<img src="../../assets/readme-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;"/>
|
||||
<img src="../../assets/readme-image1.png" alt="Lo trinh hoc" width="70%" style="border-radius: 10px; box-shadow: 0 8px 20px rgba(45,55,72,0.3); margin: 15px 0;"/>
|
||||
</div>
|
||||
|
||||
### 一、零基础入门
|
||||
### I. Nhap mon nguoi moi
|
||||
|
||||
| 章节 | 关键内容 |
|
||||
| :----------------------------------------------------------------------------------- | :------------------------------------------------ |
|
||||
| [学习地图](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/learning-map/) | 整体学习路径导览 |
|
||||
| [AI 时代，会说话就会编程](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/ai-capabilities-through-games/) | 通过贪吃蛇等案例初步感受 AI 编程的能力 |
|
||||
| [寻找好想法](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/finding-great-idea/) | 学会寻找和验证产品想法，找到值得做的项目 |
|
||||
| [认识 AI IDE 工具](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/introduction-to-ai-ide/) | 学会使用 IDE，在本地制作小游戏 |
|
||||
| [动手做出原型](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/building-prototype/) | 从需求分析、AI 生成单页面，再到生成多页面产品原型 |
|
||||
| [给原型加上 AI 能力](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/integrating-ai-capabilities/) | 学会接入常见 AI 能力（文本、图片、视频） |
|
||||
| [完整项目实战](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/complete-project-practice/) | 模拟真实场景、接受用户反馈迭代，完整化项目 |
|
||||
| Phan | Noi dung chinh |
|
||||
| :------ | :---------- |
|
||||
| [Ban do hoc tap](https://datawhalechina.github.io/easy-vibe/en/stage-1/learning-map/) | Tong quan huong dan toan bo hanh trinh hoc |
|
||||
| [Thoi dai AI: Biet noi la biet code](https://datawhalechina.github.io/easy-vibe/en/stage-1/ai-capabilities-through-games/) | Cam nhan dau tien ve AI coding qua cac vi du nhu Snake |
|
||||
| [Lam chu cong cu lap trinh AI](https://datawhalechina.github.io/easy-vibe/en/stage-1/introduction-to-ai-ide/) | Hoc cach hoat dong cua cac cong cu AI IDE va xay dung du an cuc bo don gian |
|
||||
| [Tim y tuong hay](https://datawhalechina.github.io/easy-vibe/en/stage-1/finding-great-idea/) | Hoc cach kham pha va xac thuc y tuong san pham dang lam |
|
||||
| [Xay dung nguyen mau san pham](https://datawhalechina.github.io/easy-vibe/en/stage-1/building-prototype/) | Di tu yeu cau den nguyen mau san pham mot trang va nhieu trang |
|
||||
| [Tich hop kha nang AI](https://datawhalechina.github.io/easy-vibe/en/stage-1/integrating-ai-capabilities/) | Tich hop tinh nang AI van ban, hinh anh va video |
|
||||
| [Thuc hanh du an hoan chinh](https://datawhalechina.github.io/easy-vibe/en/stage-1/complete-project-practice/) | Mo phong tinh huong that, thu thap phan hoi nguoi dung va lap du an hoan chinh |
|
||||
|
||||
#### 附录：业务思维
|
||||
#### Phu luc: Tu duy san pham va kinh doanh
|
||||
|
||||
| 章节 | 关键内容 |
|
||||
| :----------------------------------------------------------------------------------- | :----------------------------------------- |
|
||||
| [产品思维与方案设计](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-a-product-thinking/) | 从零到一做产品需要考虑的思维框架 |
|
||||
| [AI 行业应用场景参考 (B端)](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-industry-scenarios/) | 了解 AI 在不同产业的应用场景 |
|
||||
| [AI 消费场景灵感参考 (C端)](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-c-consumer-scenarios/) | 探索 AI 在消费级产品中的应用场景 |
|
||||
| Phan | Noi dung chinh |
|
||||
| :------ | :---------- |
|
||||
| [Tu duy san pham va thiet ke phuong an](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-a-product-thinking/) | Khung tu duy co ban tu khong den mot voi san pham |
|
||||
| [Cac kich ban ung dung AI trong nganh (B2B)](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-industry-scenarios/) | Hieu cach AI duoc ung dung trong cac nganh nghe |
|
||||
| [Cam hung kich ban tieu dung AI (B2C)](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-c-consumer-scenarios/) | Kham pha co hoi san pham trong AI tieu dung |
|
||||
|
||||
#### 附录：技术方案
|
||||
#### Phu luc: Nghien cuu nguoi dung va Xac thuc yeu cau
|
||||
|
||||
| 章节 | 关键内容 |
|
||||
| :---------------------------------------------------------------------------------------------------------------------- | :----------------------------------------- |
|
||||
| [写代码时遇到错误怎么办](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-b-common-errors/) | vibe coding 中的常见错误及排查方法 |
|
||||
| [七款 AI 编程工具对比](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial) | 对比测试主流 AI 编程平台 |
|
||||
| [用设计和编程 Agent 设计网站](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents) | 学习如何使用 AI 智能体协同工作 |
|
||||
| Phan | Noi dung chinh |
|
||||
| :------ | :---------- |
|
||||
| [Tim y tuong o dau: 3 nguon tham khao tot nhat cho nguoi moi](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-idea-sources/) | Xay dung luong thong tin tin cay de tim co hoi san pham cu the |
|
||||
| [Double Diamond: Lam dung truoc, roi lam tot](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-double-diamond/) | Su dung quy trinh co cau truc de di tu cam hung lac long den huong kha thi |
|
||||
| [Dung Jobs to Be Done de tim dieu nguoi dung thuc su muon](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-jobs-to-be-done/) | Phan tich muc tieu nguoi dung qua nhiem vu that thay vi yeu cau tinh nang be mat |
|
||||
| [The Mom Test: Phuong phong phong van de xac thuc nhu cau](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-mom-test/) | Hoc cach hoi cau hoi tot hon va tranh phan hoi sai tich cuc |
|
||||
|
||||
### 二、初中级开发工程师
|
||||
#### Phu luc: Giai phap ky thuat
|
||||
|
||||
#### 前端部分
|
||||
| Phan | Noi dung chinh |
|
||||
| :------ | :---------- |
|
||||
| [Lam gi khi gap loi](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-b-common-errors/) | Cac van de vibe coding thuong gap va cach khac phuc |
|
||||
| [So sanh bay cong cu lap trinh AI](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial) | So sanh cac nen tang AI coding chinh qua thu nghiem thuc hanh |
|
||||
| [Thiet ke website voi Agents](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents) | Hoc hop tac da agent trong thuc hanh |
|
||||
|
||||
| 章节 | 关键内容 |
|
||||
| :--------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------- |
|
||||
| [从Lovart出发，搭建自己的素材生产Agent](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/frontend/lovart-assets/) | 从零开始，利用Nanobanana和Lovart批量生成高质量的设计素材，并动手构建一个能意图识别的绘图Agent |
|
||||
| [Figma 与 MasterGo 入门](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/frontend/figma-mastergo/) | 用设计工具梳理信息架构和页面结构，为前端实现打基础 |
|
||||
| [构建第一个现代应用程序-UI 设计](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/frontend/ui-design/) | 基于设计稿完成组件化界面，实现从设计到代码的第一条链路 |
|
||||
| [参考 UI 设计规范与多产品 UI 设计](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/frontend/multi-product-ui/) | 围绕统一主视觉扩展多产品界面，练习系统化设计能力 |
|
||||
| [用 LLM 和 Skills 让界面变好看](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/frontend/llm-skills-beautiful/) | 用提示词和 Skills 插件让 AI 生成美观独特的界面 |
|
||||
| [一起做霍格沃茨画像](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/frontend/hogwarts-portraits/) | 从 0 到 1 做出接入 AI 能力的前端应用，串联设计与开发 |
|
||||
| [从设计原型到项目代码](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/frontend/design-to-code/) | 三种路径将设计工具中的原型转化为前端代码 |
|
||||
| [使用现代组件库更新你的界面](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/frontend/modern-component-library/) | 用组件库快速构建专业级界面，统一风格、提升开发效率 |
|
||||
### II. Lap trinh vien trung cap
|
||||
|
||||
#### 后端开发部分
|
||||
#### Frontend
|
||||
|
||||
| 章节 | 关键内容 |
|
||||
| :------------------------------------------------------------------------------------------------- | :---------------------------------------------------------- |
|
||||
| [从数据库到 Supabase](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/backend/database-supabase/) | 在 Supabase 上落地数据库和 API，打通数据模型与前端页面 |
|
||||
| [大模型辅助编写接口代码与接口文档](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/backend/ai-interface-code/) | 用大模型协助生成接口与数据库文档及代码，实现可读可测的后端 |
|
||||
| [Git 和 GitHub 工作流](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/backend/git-workflow/) | 在 Git 工作流中管理代码，进行版本控制和协作 |
|
||||
| [如何部署 Web 应用](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/backend/zeabur-deployment/) | 使用 CloudBase、Vercel、Zeabur 等平台部署应用上线 |
|
||||
| [CLI AI 编程工具](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/backend/modern-cli/) | 使用 CLI 类 AI 编程工具加速开发与调试，形成个人工程化工作流 |
|
||||
| [如何集成 Stripe 等收费系统](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/backend/stripe-payment/) | 接入支付系统，完成收费链路与基础结算流程 |
|
||||
| [大作业：构建第一个现代应用程序-全栈应用](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/assignments/copywriting-platform-supabase/) | 综合前端、后端与支付模块，完成可上线的全栈 Web 应用 |
|
||||
| Phan | Noi dung chinh |
|
||||
| :------ | :---------- |
|
||||
| [Frontend 0: Xay dung Agent san xuat tai san cua rieng ban voi Lovart](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/lovart-assets/) | Su dung Nanobanana va Lovart de tao hang loat tai san truc quan va xay dung agent ve voi nhan dien y dich |
|
||||
| [Frontend 1: Co ban Figma & MasterGo](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/figma-mastergo/) | Hoc quy trinh tu ban thiet ke den tu duy UI chuan bi trien khai |
|
||||
| [Frontend 2: Xay dung ung dung hien dai dau tien - Thiet ke UI](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/ui-design/) | Hoc nen tang thiet ke UI phia sau giao dien ung dung hien dai |
|
||||
| [Frontend 3: Huong dan UI va Thiet ke da san pham](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/multi-product-ui/) | Cai thien tinh nhat quan va tham my tren nhieu san pham voi quy tac UI chung |
|
||||
| [Frontend 4: Lam giao dien dep voi LLM va Skills](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/llm-skills-beautiful/) | Su dung prompt va plugin de AI tao giao dien tinh te va doc dao hon |
|
||||
| [Frontend 4: Cung xay dung Chân dung Hogwarts](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/hogwarts-portraits/) | Xay dung du an frontend AI-hinh anh tuong tac tu dau |
|
||||
| [Frontend 6: Tu nguyen mau thiet ke den ma du an](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/design-to-code/) | Bien nguyen mau thiet ke thanh ma frontend co the chay that trong trinh duyet |
|
||||
| [Frontend 7: Nang cap UI voi thu vien thanh phan hien dai](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/modern-component-library/) | Su dung thu vien thanh phan de xay dung giao dien chuyen nghiep nhanh hon |
|
||||
|
||||
#### AI 能力附录
|
||||
#### Backend
|
||||
|
||||
| 章节 | 关键内容 |
|
||||
| :------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------- |
|
||||
| [Dify 入门与知识库集成](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/ai-capabilities/dify-knowledge-base/) | 用 Dify Workflow 与基础 RAG 搭建工具类产品，为后续应用升级打样 |
|
||||
| Phan | Noi dung chinh |
|
||||
| :------ | :---------- |
|
||||
| [Backend 1: Hoc Git va GitHub](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/git-workflow/) | Lam chu cac thao tac dieu khien phien ban va quy trinh hop tac voi Git |
|
||||
| [Backend 2: Tu Co so du lieu den Supabase](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/database-supabase/) | Hoc co ban co so du lieu quan he va su dung Supabase nhu nen tang BaaS hien dai |
|
||||
| [Backend 3: Thiet ke va Phat trien Backend API](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/ai-interface-code/) | Su dung AI ho tro thiet ke API, tao ma backend va tai lieu API |
|
||||
| [Backend 4: Trien khai nguyen mau san pham cua ban](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/zeabur-deployment/) | Trien khai nhanh ung dung full-stack len may chu voi Zeabur |
|
||||
| [Backend 5: Tu IDE den Cong cu AI Coding CLI](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/modern-cli/) | Kham pha quy trinh AI coding dau tien terminal cho phat trien hien dai |
|
||||
| [Backend 6: Tich hop Stripe va cac He thong Thanh toan khac](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/stripe-payment/) | Them kha nang thanh toan voi tinh nang thanh toan va hoa don |
|
||||
|
||||
### 三、高级开发工程师
|
||||
#### Du an lon
|
||||
|
||||
#### Claude Code 核心技能
|
||||
| Phan | Noi dung chinh |
|
||||
| :------ | :---------- |
|
||||
| [Du an lon 1: Ung dung Full-stack SaaS dau tien - Trang web tao noi dung AI](https://datawhalechina.github.io/easy-vibe/en/stage-2/assignments/fullstack-app/) | Xay dung khong gian lam viec AI marketing copy voi dang nhap, tao, thanh toan va quan ly admin |
|
||||
| [Du an lon 2: He thong Ky thi va Quan ly truc tuyen](https://datawhalechina.github.io/easy-vibe/en/stage-2/assignments/modern-frontend-trae/) | Xay dung he thong ky thi truc tuyen voi tao cau hoi, quy trinh lam bai va cong cu admin |
|
||||
|
||||
| 章节 | 关键内容 |
|
||||
| :------------------------------------------------------------------------------------------------------ | :----------------------------------------------------------- |
|
||||
| [Claude Code 快速上手](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/core-skills/basics/) | 安装配置、基础操作、实用技巧和常用指令 |
|
||||
| [Claude Code MCP 完全指南](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/core-skills/mcp/) | 通过 MCP 让 Claude Code 连接 GitHub、数据库、API 等外部服务 |
|
||||
| [Claude Code Skills 完全指南](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/core-skills/skills/) | 将专业知识打包成可复用技能包，一次配置反复使用 |
|
||||
| [Claude Code 工作流最佳实践](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/core-skills/workflow/) | 日常开发、代码重构、Code Review 等场景的最佳实践 |
|
||||
| [Claude Agent Teams 完全指南](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/core-skills/agent-teams/) | 多 AI 实例协同工作，像真正的开发团队一样并行协作 |
|
||||
| [Claude Code Superpowers 工程级开发](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/core-skills/superpowers/) | 让 AI 写出工程级代码，遵循 TDD 和最佳实践 |
|
||||
| [如何让 Claude Code 长时间工作](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/core-skills/long-running-tasks/) | 设计长时间运行的任务，让 Coding Tools 持续工作直到完成 |
|
||||
#### Phu luc Kha nang AI
|
||||
|
||||
#### 多平台开发
|
||||
| Phan | Noi dung chinh |
|
||||
| :------ | :---------- |
|
||||
| [AI 1: Co ban Dify & Tich hop Co so kien thuc](https://datawhalechina.github.io/easy-vibe/en/stage-2/ai-capabilities/dify-knowledge-base/) | Hoc xay dung ung dung AI voi Dify va tich hop co so kien thuc rieng |
|
||||
|
||||
| 章节 | 关键内容 |
|
||||
| :------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------- |
|
||||
| [如何构建微信小程序](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/wechat-miniprogram/) | 了解微信小程序生态，从官方模板到上线完成一个前端小程序 |
|
||||
| [如何构建微信小程序-包含后端](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/wechat-miniprogram-backend/) | 在小程序中接入数据库与后端逻辑，打通完整业务闭环 |
|
||||
| [如何构建安卓程序](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/android-app/) | 使用 Expo 等工具，完成 Web/原生一体化的安卓应用开发 |
|
||||
| [如何构建 iOS 程序](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/ios-app/) | 使用 Expo 等工具，完成 Web/原生一体化的 iOS 应用开发 |
|
||||
| [如何开发 PWA 本地应用](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/pwa-local-app/) | 让网页变成"真正的 App"，支持离线、推送、桌面安装 |
|
||||
| [如何开发浏览器 AI 助手插件](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/browser-ai-extension/) | 开发 Chrome 插件，一键总结任意网页，支持云端 API 和内置 AI |
|
||||
| [如何开发 Electron 桌面程序](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/electron-voice-to-text/) | 用 Electron 构建语音转文字桌面应用，支持三平台安装运行 |
|
||||
| [如何快速开发并铸造 NFT](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/nft-minting/) | 从零编写智能合约，部署到以太坊测试网，铸造自己的 NFT |
|
||||
| [如何开发 VS Code 插件](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/vscode-extension/) | 开发 AI 项目助手插件，支持模板生成、代码对话、多文件问答 |
|
||||
| [如何开发工业级 Qt 桌面应用](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/qt-industrial-hmi/) | 用 Qt 构建工业级水泵监控 HMI 系统，实时数据、趋势图、报警 |
|
||||
### III. Lap trinh vien cao cap
|
||||
|
||||
#### AI 能力附录
|
||||
#### Ky nang cot loi Claude Code
|
||||
|
||||
| 章节 | 关键内容 |
|
||||
| :---------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------ |
|
||||
| [什么是 RAG 以及它如何工作](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/ai-advanced/rag-introduction/) | 系统理解 RAG 原理与常见架构，为复杂应用提供知识检索基础 |
|
||||
| [中高级 RAG 与工作流编排：以 LangGraph 为例](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/ai-advanced/langgraph-advanced-rag/) | 使用 LangGraph 等工具设计多步工作流与中高级 RAG 系统 |
|
||||
| Phan | Noi dung chinh |
|
||||
| :------ | :---------- |
|
||||
| [Bat dau voi Claude Code](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/basics/) | Cai dat, thiet lap, co ban va lenh huu ich |
|
||||
| [Huong dan Claude Code MCP](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/mcp/) | Ket noi Claude Code voi GitHub, co so du lieu, API va cac dich vu khac thong qua MCP |
|
||||
| [Huong dan Claude Code Skills](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/skills/) | Dong goi chuyen mon thanh ky nang tai su dung dung lai nhieu lan |
|
||||
| [Cach giu Claude Code lam viec voi tac vu chay dai](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/long-running-tasks/) | Thiet ke tac vu chay dai de cong cu coding co the tiep tuc lam viec cho den khi xong |
|
||||
| [Huong dan Claude Agent Teams](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/agent-teams/) | Phoi hop nhieu instance AI nhu mot doi ngu phat trien that |
|
||||
| [Claude Code Superpowers cho phat trien cap ky thuat](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/superpowers/) | Giup AI tao ma cap ky thuat voi TDD va best practices |
|
||||
| [Best practices quy trinh Claude Code](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/workflow/) | Best practices cho refactor, code review va phat trien hang ngay |
|
||||
| [Phat trien tu xa Claude Code tren di dong](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/mobile-development/) | Su dung Claude Code vuot ra ngoai desktop va xay dung quy trinh lam viec tu xa hieu qua tren thiet bi di dong |
|
||||
| [Huong dan day du Claude Agent SDK](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/claude-agent-sdk/) | Xay dung quy trinh agent tuy chinh va tich hop Claude vao cong cu cua rieng ban voi SDK |
|
||||
| [Tu vibe coding den spec coding](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/spec-coding/) | Chuyen tu prompt ad-hoc sang quy trinh phat trien AI co cau truc va huong quy cach hon |
|
||||
|
||||
### 📚 附录知识库
|
||||
#### Phat trien da nen tang
|
||||
|
||||
> 涵盖 **9 大知识领域**、**80+ 交互式专题**，以动画和可视化组件帮助你直观理解从计算机底层到 AI 前沿的核心概念。
|
||||
| Phan | Noi dung chinh |
|
||||
| :------ | :---------- |
|
||||
| [Cach chon nen tang phu hop cho ung dung cua ban](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/choose-platform/) | So sanh cac hinh thuc ung dung va chon nen tang phu hop dua tren nguoi dung, tinh huong va muc tieu giao pho |
|
||||
| [Xay dung WeChat Mini Program](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/wechat-miniprogram/) | Hieu he sinh thai va giao pho mini program frontend tu template den ra mat |
|
||||
| [Xay dung WeChat Mini Program voi backend](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/wechat-miniprogram-backend/) | Them logic backend va co so du lieu de hoan thanh vong lap kinh doanh day du |
|
||||
| [Xay dung ung dung Android](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/android-app/) | Hoc phat trien ung dung Android voi quy trinh native hien dai |
|
||||
| [Xay dung ung dung iOS](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/ios-app/) | Hoc phat trien ung dung iOS va cac quy uoc cua he sinh thai Apple |
|
||||
| [Xay dung ung dung PWA cuc bo](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/pwa-local-app/) | Bien website thanh ung dung that voi ho tro offline, push va cai dat |
|
||||
| [Xay dung tien ich tro ly AI trinh duyet](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/browser-ai-extension/) | Tao tien ich Chrome tom tat bat ky trang nao voi cloud API hoac AI tich hop |
|
||||
| [Xay dung ung dung desktop Electron](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/electron-voice-to-text/) | Xay dung ung dung chuyen giong noi thanh van ban bang Electron cho ba nen tang |
|
||||
| [Nhanh chong xay dung va dap NFT](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/nft-minting/) | Viet smart contract tu dau, trien khai va dap NFT rieng cua ban |
|
||||
| [Xay dung tien ich mo rong VS Code](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/vscode-extension/) | Xay dung tro ly du an AI voi template, code chat va hoi dap da file |
|
||||
| [Xay dung ung dung desktop Qt cap cong nghiep](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/qt-industrial-hmi/) | Tao he thong Qt HMI thoi gian that voi xu huong, canh bao va giam sat |
|
||||
|
||||
#### Phu luc Kha nang AI
|
||||
|
||||
| Phan | Noi dung chinh |
|
||||
| :------ | :---------- |
|
||||
| [RAG la gi va no hoat dong nhu the nao](https://datawhalechina.github.io/easy-vibe/en/stage-3/ai-advanced/rag-introduction/) | Xay dung hieu biet he thong ve nguyen ly RAG va cac kien truc thuong gap |
|
||||
| [Quy trinh RAG trung va cao cap voi LangGraph](https://datawhalechina.github.io/easy-vibe/en/stage-3/ai-advanced/langgraph-advanced-rag/) | Thiet ke quy trinh da buoc va he thong RAG nang cao hon |
|
||||
|
||||
### 📚 Phu luc Co so kien thuc
|
||||
|
||||
> Bao gom **9 linh vuc kien thuc lon** va **hon 80 chu de tuong tac**, phu luc nay su dung hoat anh va thanh phan truc quan giup ban hieu truc quan cac khai niem co ban tu co ban tin hoc den tien tien AI.
|
||||
>
|
||||
> 👉 [查看完整附录](https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/) · [AI 能力词典](https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/ai-capability-dictionary)
|
||||
> 👉 [Xem phu luc day du](https://datawhalechina.github.io/easy-vibe/en/appendix/)
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td valign="top" width="33%">
|
||||
<strong>💻 计算机基础</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/transistor-to-cpu.html">从晶体管到 CPU</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/operating-systems.html">操作系统</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/data-encoding-storage.html">数据的编码、存储与传输</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/computer-networks.html">网络：两台电脑如何对话</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/data-structures.html">数据结构</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/algorithm-thinking.html">算法思维入门</a>
|
||||
</td>
|
||||
<td valign="top" width="33%">
|
||||
<strong>🔧 开发工具</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/git-version-control.html">Git：代码的时光机</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/command-line-shell.html">命令行与 Shell 脚本</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/package-managers.html">包管理器</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/debugging-art/">调试的艺术</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/regex.html">正则表达式</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/environment-path.html">环境变量与 PATH</a>
|
||||
</td>
|
||||
<td valign="top" width="33%">
|
||||
<strong>🌐 浏览器与前端</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/javascript-deep-dive.html">JavaScript 语言深入</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/browser-as-os-rendering.html">浏览器渲染管道</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/frontend-frameworks.html">前端框架对比</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/graphics-animation.html">图形与动画</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/web-performance.html">网页性能的度量与优化</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/frontend-engineering.html">前端工程化全貌</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top" width="33%">
|
||||
<strong>🖥️ 服务器与后端</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/http-protocol.html">HTTP 协议</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/api-design.html">API 设计哲学</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/auth-authorization.html">认证与授权体系</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/concurrency-async.html">并发、异步与多线程</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/message-queues.html">消息队列与事件驱动</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/backend-layered-architecture.html">后端分层架构</a>
|
||||
</td>
|
||||
<td valign="top" width="33%">
|
||||
<strong>📊 数据</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/database-fundamentals.html">数据库原理与 SQL</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/database-fundamentals.html">数据库原理</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/data-tracking.html">数据埋点与用户行为采集</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/data-analysis.html">数据分析基础</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/ab-testing.html">A/B 测试与实验驱动</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/data-visualization.html">数据可视化与仪表盘</a>
|
||||
</td>
|
||||
<td valign="top" width="33%">
|
||||
<strong>🏗️ 架构与系统设计</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/6-architecture-and-system-design/monolith-to-microservices.html">从单体到微服务的演进</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/6-architecture-and-system-design/distributed-systems.html">分布式系统的挑战</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/6-architecture-and-system-design/high-availability.html">高可用与容灾</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/6-architecture-and-system-design/system-design-methodology.html">系统设计方法论</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top" width="33%">
|
||||
<strong>☁️ 基础设施与运维</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/docker-containers.html">Docker 容器化</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/kubernetes.html">Kubernetes 编排</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/ci-cd.html">CI / CD 自动化</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/dns-https.html">域名、DNS 与 HTTPS</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/monitoring-logging.html">监控、日志与告警</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/infrastructure-as-code.html">基础设施即代码</a>
|
||||
</td>
|
||||
<td valign="top" width="33%">
|
||||
<strong>🤖 人工智能</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/llm-principles.html">大语言模型的工作原理</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/transformer-attention.html">Transformer 与注意力机制</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/rag.html">RAG 架构</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/ai-agents.html">AI Agent 与工具调用</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/prompt-engineering.html">提示词工程</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/image-generation.html">图像生成原理</a>
|
||||
</td>
|
||||
<td valign="top" width="33%">
|
||||
<strong>🎯 工程素养</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/code-quality-refactoring.html">代码质量与重构</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/testing-strategies.html">测试策略</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/design-patterns.html">设计模式</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/security-thinking.html">安全思维与攻防基础</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/technical-writing.html">技术文档写作</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/open-source-collaboration.html">开源协作</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
### 🎓 Cac khoa hoc khac
|
||||
|
||||
## 🛠️ 如何学习
|
||||
- [Hands-on Modern RL](#cac-khoa-hoc-khac)
|
||||
- [Learn Harness Engineering](#cac-khoa-hoc-khac)
|
||||
|
||||
- 根据个人能力，选择性地阅读和实践相关章节，如果有问题欢迎 issue 提问。
|
||||
## 🛠️ Cach hoc
|
||||
|
||||
## 💻 本地启动本课件
|
||||
- Doc va thuc hanh cac phan phu hop voi trinh do hien tai cua ban. Neu ban gap kho khan, cu thoai mai mo issue.
|
||||
|
||||
### 现代方案
|
||||
## 💻 Chay cuc bo
|
||||
|
||||
在 AI IDE 对话框（vscode、cursor、trae 等）中，输入下列提示词启动本课件：
|
||||
### Phuong phap hien dai
|
||||
|
||||
```
|
||||
请你帮我运行这个项目的本地服务
|
||||
Trong cua so chat AI IDE nhu VS Code, Cursor hoac Trae, ban chi can noi:
|
||||
|
||||
```text
|
||||
Xin giup toi chay du an nay cuc bo.
|
||||
```
|
||||
|
||||
### 旧方案
|
||||
### Phuong phap truyen thong
|
||||
|
||||
1. npm install
|
||||
2. npm run dev
|
||||
3. 打开浏览器访问 `http://localhost:3000` 即可查看。
|
||||
1. `npm install`
|
||||
2. `npm run dev`
|
||||
3. Mo `http://localhost:3000` trong trinh duyet cua ban.
|
||||
|
||||
## 🤝 参与贡献
|
||||
## Cac khoa hoc khac
|
||||
|
||||
- 如果你发现了一些问题，或者觉得任何可以改进本项目的地方，可以提 Issue 进行反馈。如果提完没有人回复你可以联系[保姆团队](https://github.com/datawhalechina/DOPMC/blob/main/OP.md)的同学进行反馈跟进~
|
||||
- 如果你想参与贡献本项目，可以提 Pull Request，如果提完没有人回复你可以联系[保姆团队](https://github.com/datawhalechina/DOPMC/blob/main/OP.md)的同学进行反馈跟进~
|
||||
- 如果你对 Datawhale 很感兴趣并想要发起一个新的项目，请按照[Datawhale 开源项目指南](https://github.com/datawhalechina/DOPMC/blob/main/GUIDE.md)进行操作即可~
|
||||
Nhom chung toi cung da tao cac khoa hoc khac! Kham pha ngay:
|
||||
|
||||
## 🙏 感谢每位贡献者
|
||||
[](https://github.com/walkinglabs/hands-on-modern-rl)
|
||||
|
||||
- [散步-项目负责人](https://github.com/sanbuphy) (Datawhale成员)
|
||||
- 方可-指导老师（Datawhale成员, 清华大学）
|
||||
- [Yerim Kang](https://github.com/yerim25)（实践项目部分-清华大学）
|
||||
- [赵芷霖](https://github.com/ChileenZ)（实践项目部分-清华大学）
|
||||
- [李亦萱](https://yixuan20.github.io/)（页面美术设计-清华大学）
|
||||
- 刘思怡（实践项目部分-清华大学）
|
||||
- [刘丽欣](https://github.com/liulx25xx)（实践项目部分-清华大学）
|
||||
- AI Vibe Coding 101 内测群完整给建议体验的小伙伴们
|
||||
**Hands-on Modern RL**: Mot chuong trinh hoc thu cong ma nguon mo, noi cau khoang cach tu co ban RL den LLM alignment, RLVR va cac he thong Agentic nang cao.
|
||||
|
||||
### 特别感谢
|
||||
[](https://github.com/walkinglabs/learn-harness-engineering/tree/main)
|
||||
|
||||
- 感谢 [@Sm1les](https://github.com/Sm1les) 对本项目的帮助与支持
|
||||
- 感谢所有为本项目做出贡献的开发者们和支持点赞的朋友们 ❤️
|
||||
**Learn Harness Engineering**: Huong dan toan dien ve harness engineering.
|
||||
|
||||
## 🤝 Dong gop & Nguoi dong gop
|
||||
|
||||
- Neu ban tim thay van de hoac thay dieu gi co the cai thien, cu thoai mai mo issue. Neu khong ai tra loi, ban cung co the lien he [doi ngu ho tro Datawhale](https://github.com/datawhalechina/DOPMC/blob/main/OP.md).
|
||||
- Neu ban muon dong gop, mo pull request. Neu khong ai tra loi, ban cung co the lien he [doi ngu ho tro Datawhale](https://github.com/datawhalechina/DOPMC/blob/main/OP.md).
|
||||
- Neu ban muon bat dau du an ma nguon mo Datawhale moi, vui long lam theo [Huong dan Du an Ma nguon mo Datawhale](https://github.com/datawhalechina/DOPMC/blob/main/GUIDE.md).
|
||||
|
||||
### 🙏 Nguoi dong gop
|
||||
|
||||
- [Sanbu - Truong du an](https://github.com/sanbuphy) (Thanh vien Datawhale)
|
||||
- Fang Ke - Menh hoat (Thanh vien Datawhale, Dai hoc Tsinghua)
|
||||
- [Yerim Kang](https://github.com/yerim25) (Du an thuc hanh, Dai hoc Tsinghua)
|
||||
- [Zhilin Zhao](https://github.com/ChileenZ) (Du an thuc hanh, Dai hoc Tsinghua)
|
||||
- [Yixuan Li](https://yixuan20.github.io/) (Thiet ke truc quan, Dai hoc Tsinghua)
|
||||
- Siyi Liu (Du an thuc hanh, Dai hoc Tsinghua)
|
||||
- [Lixin Liu](https://github.com/liulx25xx) (Du an thuc hanh, Dai hoc Tsinghua)
|
||||
- Moi nguoi trong nhom thu nghiem noi bo AI Vibe Coding 101 da chia se y kien va phan hoi
|
||||
|
||||
### Cam on dac biet
|
||||
|
||||
- Cam on [@Sm1les](https://github.com/Sm1les) da giup do va ho tro du an nay
|
||||
- Cam on moi nguoi dong gop va tat ca nhung nguoi da ho tro du an bang phan hoi va star ❤️
|
||||
|
||||
<div align="center">
|
||||
|
||||
|
||||
<a href="https://www.star-history.com/#datawhalechina/easy-vibe&type=timeline&legend=top-left">
|
||||
<picture>
|
||||
<source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=datawhalechina/easy-vibe&type=timeline&theme=dark&legend=top-left" />
|
||||
@@ -460,19 +424,18 @@ Easy-Vibe giúp bạn biến điều đó thành một sản phẩm thật.
|
||||
<div align="center">
|
||||
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">
|
||||
<img
|
||||
alt="知识共享许可协议"
|
||||
alt="Creative Commons License"
|
||||
style="border-width:0"
|
||||
src="https://img.shields.io/badge/license-CC%20BY--NC--SA%204.0-lightgrey"
|
||||
/>
|
||||
</a>
|
||||
<br />
|
||||
本作品采用
|
||||
Tac pham nay duoc cap phep duoi
|
||||
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">
|
||||
知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议
|
||||
</a>
|
||||
进行许可。
|
||||
Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License
|
||||
</a>.
|
||||
</div>
|
||||
|
||||
## Star History
|
||||
## Lich su Star
|
||||
|
||||
[](https://www.star-history.com/#datawhalechina/easy-vibe&type=date&legend=top-left)
|
||||
|
||||
+286
-237
@@ -3,24 +3,26 @@
|
||||
|
||||
<img src="../../assets/easy-vibe-logo-hd.svg" alt="Easy-Vibe Logo" width="300">
|
||||
|
||||
<img src="../../assets/banner.png" alt="Easy-Vibe Banner" width="100%">
|
||||
|
||||
<p align="center" style="font-size: 1.2em; color: #666; margin: 20px 0;">
|
||||
直接上手，一起 vibe！會說話就會做應用。<br>
|
||||
<span style="font-size: 0.9em; color: #888;">直接上手，一起 vibe！会说话就会做应用。</span>
|
||||
<span style="font-size: 0.9em; color: #888;">Jump right in and vibe together — if you can talk, you can build apps.</span>
|
||||
</p>
|
||||
|
||||
<a href="https://trendshift.io/repositories/22079" target="_blank"><img src="https://trendshift.io/api/badge/repositories/22079" alt="datawhalechina/easy-vibe | Trendshift" style="width: 250px; height: 55px;" width="250" height="55"/></a>
|
||||
|
||||
<p align="center">
|
||||
🚀 <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">開始體驗</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/">互動式教程</a> · 🦞 <a href="https://github.com/datawhalechina/hello-claw">學習 OpenClaw</a><br>
|
||||
<span style="font-size: 0.85em; color: #888;">🚀 <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">开始体验</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/">交互式教程</a> · 🦞 <a href="https://github.com/datawhalechina/hello-claw">学习 OpenClaw</a> · 📖 <a href="#table-of-contents">查看目录</a></span>
|
||||
🚀 <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">開始體驗</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/">互動式教程</a> · 🦞 <a href="https://github.com/datawhalechina/hello-claw">學習 OpenClaw</a> · 📖 <a href="#目錄--table-of-contents">查看目錄</a><br>
|
||||
<span style="font-size: 0.85em; color: #888;">🚀 <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">Start Exploring</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/en/appendix/">Interactive Tutorial</a> · 🦞 <a href="https://github.com/datawhalechina/hello-claw">Learn OpenClaw</a> · 📖 <a href="#目錄--table-of-contents">Table of Contents</a></span>
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
<a href="https://datawhalechina.github.io/easy-vibe/welcome.html">開始閱讀</a> ·
|
||||
<a href="#-内容导航">學習地圖</a><br>
|
||||
<a href="#-內容導航">學習地圖</a><br>
|
||||
<span style="font-size: 0.85em; color: #888;">
|
||||
<a href="https://datawhalechina.github.io/easy-vibe/welcome.html">开始阅读</a> ·
|
||||
<a href="#-内容导航">学习地图</a>
|
||||
<a href="https://datawhalechina.github.io/easy-vibe/welcome.html">Read Online</a> ·
|
||||
<a href="#-content-navigation">Learning Map</a>
|
||||
</span>
|
||||
</p>
|
||||
|
||||
@@ -52,53 +54,53 @@
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/gif-header.png" width="100%">
|
||||
<br>
|
||||
<strong>新手专属学习地图</strong>
|
||||
<strong>新手專屬學習地圖</strong>
|
||||
<br>
|
||||
<sub>零基础专属指引，清晰规划路径，告别“学了忘”</sub>
|
||||
<sub>零基礎專屬指引，清晰規劃路徑，告別「學了忘」</sub>
|
||||
</td>
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/gif-tutorial.png" width="100%">
|
||||
<br>
|
||||
<strong>手把手图文教程</strong>
|
||||
<strong>手把手圖文教程</strong>
|
||||
<br>
|
||||
<sub>保姆级图文详解，如同私教在旁，跟着做就能学会</sub>
|
||||
<sub>保姆級圖文詳解，如同私教在旁，跟著做就能學會</sub>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/gif-ide.gif" width="100%">
|
||||
<br>
|
||||
<strong>沉浸式模拟编程</strong>
|
||||
<strong>沉浸式模擬編程</strong>
|
||||
<br>
|
||||
<sub>虚拟鼠标自动导览，带你快速上手 IDE 核心用法</sub>
|
||||
<sub>虛擬滑鼠自動導覽，帶你快速上手 IDE 核心用法</sub>
|
||||
</td>
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/gif-diffusion.gif" width="100%">
|
||||
<br>
|
||||
<strong>看得见的 AI 原理</strong>
|
||||
<strong>看得見的 AI 原理</strong>
|
||||
<br>
|
||||
<sub>算法原理动画化，一眼看懂 AI 如何“画”出图片</sub>
|
||||
<sub>演算法原理動畫化，一眼看懂 AI 如何「畫」出圖片</sub>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/gif-rag.gif" width="100%">
|
||||
<br>
|
||||
<strong>像玩游戏一样学 RAG</strong>
|
||||
<strong>像玩遊戲一樣學 RAG</strong>
|
||||
<br>
|
||||
<sub>独家交互组件，点击即可看清 RAG 数据流向</sub>
|
||||
<sub>獨家互動元件，點擊即可看清 RAG 資料流向</sub>
|
||||
</td>
|
||||
<td width="50%" valign="top" align="center">
|
||||
<img src="../../assets/git-terminal.gif" width="100%">
|
||||
<br>
|
||||
<strong>可视化终端原理</strong>
|
||||
<strong>視覺化終端原理</strong>
|
||||
<br>
|
||||
<sub>命令行操作可视化，直观展示后台逻辑与原理</sub>
|
||||
<sub>命令列操作視覺化，直觀展示後台邏輯與原理</sub>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div align="center">
|
||||
<h3>⭐ 欢迎 <a href="https://github.com/datawhalechina/easy-vibe" style="color: #d0cd16ff;">点击此处Star</a> 加速更新 ❤️</h3>
|
||||
<h3>⭐ 歡迎 <a href="https://github.com/datawhalechina/easy-vibe" style="color: #d0cd16ff;">點擊此處 Star</a> 加速更新 ❤️</h3>
|
||||
</div>
|
||||
|
||||
<div align="center" style="margin: 30px 0;">
|
||||
@@ -111,7 +113,24 @@
|
||||
</p>
|
||||
</div>
|
||||
|
||||
## 为什么需要 Easy-Vibe
|
||||
## 目錄 / Table of Contents
|
||||
|
||||
- [為什麼需要 Easy-Vibe](#為什麼需要-easy-vibe)
|
||||
- [News](#-news)
|
||||
- [適合誰](#適合誰)
|
||||
- [你的學習路徑](#你的學習路徑)
|
||||
- [學習建議](#學習建議)
|
||||
- [一、零基礎入門](#一零基礎入門)
|
||||
- [二、初中級開發工程師](#二初中級開發工程師)
|
||||
- [三、高級開發工程師](#三高級開發工程師)
|
||||
- [附錄知識庫](#-附錄知識庫)
|
||||
- [如何學習](#️-如何學習)
|
||||
- [本地啟動本課件](#-本地啟動本課件)
|
||||
- [其他課程 / Other Courses](#-其他課程--other-courses)
|
||||
- [參與貢獻與致謝](#-參與貢獻與致謝)
|
||||
- [LICENSE](#-license)
|
||||
|
||||
## 為什麼需要 Easy-Vibe
|
||||
|
||||
想做個記帳小程式？說出來。
|
||||
|
||||
@@ -125,328 +144,358 @@ Easy-Vibe 教你的，就是怎樣把它一步步做成真正的產品。
|
||||
|
||||
## 🔥 News
|
||||
|
||||
- **[2026-03-29]** ✨ **「使用者故事」專區上線並更新為真實案例**：首頁新增互動式故事輪播元件與獨立故事頁面，並將原有占位內容替換為 4 篇真實使用者故事，涵蓋鄉村小學老師、大學生、高中資訊科技老師和貨車司機，展示不同背景的學習者如何用 AI 解決真實問題、做出真實產品。[👉 查看故事](https://datawhalechina.github.io/easy-vibe/zh-cn/vibe-stories/story-1.html)
|
||||
- **[2026-03-26]** 🚀 **阶段二实战内容集中更新**：补充完整 SaaS 全栈大作业[《第一个 SaaS 全栈应用——文案生成网站》](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/assignments/copywriting-platform-supabase/)；同时大幅补全[《如何集成 Stripe 等收费系统》](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/backend/stripe-payment/)，完善多产品 UI、微信小程序后端等关键章节。
|
||||
- **[2026-03-25]** 📚 **新增附录「用户研究与需求验证」**：包含 4 篇文章——从哪里找点子、双钻模型、Jobs to Be Done、The Mom Test 用户访谈法，帮助新手学会发现和验证产品想法。[👉 阅读附录](https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/)
|
||||
- **[2026-03-25]** 📚 **英文文档全面更新**：第二阶段（全栈开发）和第三阶段（高级开发）现已提供完整英文翻译。[👉 开始学习](https://datawhalechina.github.io/easy-vibe/en/stage-2/)
|
||||
- **[2026-03-02]** 🦞 **OpenClaw & AI Agent 友好支持**：新增 `llms.txt` AI 导航文件，让 OpenClaw、Claude、Cursor、Trae 等 AI Agent 能够快速理解本仓库结构，精准定位教程内容。希望每个🦞都学得愉快！
|
||||
- **[2026-03-01]** [高级开发部分](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/)全面升级：新增 Claude Code 七大深度指南（MCP、Skills、Agent Teams 等）及八大跨平台开发实战（PWA、Electron、NFT、VS Code 插件、Qt 工业应用等）。
|
||||
- **[2026-02-25]** 更新[附录知识库](https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/)，涵盖 9 大知识领域、80+ 交互式专题。
|
||||
- **[2026-01-27]** 新增 Android 和 iOS 平台应用开发教程。
|
||||
- **[2026-01-19]** 发布 Prompt Engineering、AI 演进史、鉴权设计、Git 原理等一系列交互式演示组件，大幅提升可视化学习体验。
|
||||
- **[2026-03-29]** ✨ **「使用者故事」專區上線並更新為真實案例**：首頁新增互動式故事輪播元件與獨立故事頁面，並將原有佔位內容替換為 4 篇真實使用者故事，涵蓋鄉村小學老師、大學生、高中資訊科技老師和貨車司機，展示不同背景的學習者如何用 AI 解決真實問題、做出真實產品。[👉 查看故事](https://datawhalechina.github.io/easy-vibe/zh-cn/vibe-stories/story-1.html)
|
||||
- **[2026-03-26]** 🚀 **階段二實戰內容集中更新**：補充完整 SaaS 全棧大作業[《第一個 SaaS 全棧應用——文案生成網站》](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/assignments/copywriting-platform-supabase/)；同時大幅補全[《如何整合 Stripe 等收費系統》](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/backend/stripe-payment/)，完善多產品 UI、微信小程式後端等關鍵章節。
|
||||
- **[2026-03-25]** 📚 **新增附錄「使用者研究與需求驗證」**：包含 4 篇文章——從哪裡找點子、雙鑽模型、Jobs to Be Done、The Mom Test 使用者訪談法，幫助新手學會發現和驗證產品想法。[👉 閱讀附錄](https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/)
|
||||
- **[2026-03-25]** 📚 **英文文件全面更新**：第二階段（全端開發）和第三階段（高級開發）現已提供完整英文翻譯。[👉 開始學習](https://datawhalechina.github.io/easy-vibe/en/stage-2/)
|
||||
- **[2026-03-02]** 🦞 **OpenClaw & AI Agent 友好支援**：新增 `llms.txt` AI 導航檔案，讓 OpenClaw、Claude、Cursor、Trae 等 AI Agent 能夠快速理解本倉庫結構，精準定位教程內容。希望每個🦞都學得愉快！
|
||||
- **[2026-03-01]** [高級開發部分](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/)全面升級：新增 Claude Code 七大深度指南（MCP、Skills、Agent Teams 等）及八大跨平台開發實戰（PWA、Electron、NFT、VS Code 外掛、Qt 工業應用等）。
|
||||
- **[2026-02-25]** 更新[附錄知識庫](https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/)，涵蓋 9 大知識領域、80+ 互動式專題。
|
||||
- **[2026-01-27]** 新增 Android 和 iOS 平台應用開發教程。
|
||||
- **[2026-01-19]** 發布 Prompt Engineering、AI 演進史、鑑權設計、Git 原理等一系列互動式演示元件，大幅提升視覺化學習體驗。
|
||||
|
||||
<details>
|
||||
<summary>Past News</summary>
|
||||
|
||||
- **[2026-01-16]** 重构项目结构，正式确立“新手入门”章节，降低上手门槛。
|
||||
- **[2026-01-14]** 完成第一阶段“产品原型构建”文档的大规模更新。
|
||||
- **[2026-01-13]** 完成文档架构重构，全面支持多语言 (i18n)。
|
||||
- **[2026-01-01]** 发布项目核心学习地图 (Learning Map)，明确学习路径。
|
||||
- **[2026-01-16]** 重構專案結構，正式確立「新手入門」章節，降低上手門檻。
|
||||
- **[2026-01-14]** 完成第一階段「產品原型建構」文件的大規模更新。
|
||||
- **[2026-01-13]** 完成文件架構重構，全面支援多語言 (i18n)。
|
||||
- **[2026-01-01]** 發布專案核心學習地圖 (Learning Map)，明確學習路徑。
|
||||
</details>
|
||||
|
||||
## 适合谁
|
||||
## 適合誰
|
||||
|
||||
- **零基础爱好者**：先做出第一个作品，再理解怎么做
|
||||
- **产品经理 / 创业者**：快速验证想法，低成本做 MVP
|
||||
- **学生**：建立 AI 时代的实战技能
|
||||
- **初级开发者**：补齐从想法到上线的完整开发链路
|
||||
- **中高级开发者**：掌握 AI 协作开发、复杂项目实战与效率升级
|
||||
- **零基礎愛好者**：先做出第一個作品，再理解怎麼做
|
||||
- **產品經理 / 創業者**：快速驗證想法，低成本做 MVP
|
||||
- **學生**：建立 AI 時代的實戰技能
|
||||
- **初級開發者**：補齊從想法到上線的完整開發鏈路
|
||||
- **中高級開發者**：掌握 AI 協作開發、複雜專案實戰與效率升級
|
||||
|
||||
|
||||
|
||||
## 你的学习路径
|
||||
## 你的學習路徑
|
||||
|
||||
### 🎮 我想先试试（5分钟体验）
|
||||
**适合人群**：所有人
|
||||
**学什么**：AI 编程初体验、贪吃蛇小游戏
|
||||
**你会得到**：5 分钟做出第一个 AI 应用
|
||||
### 🎮 我想先試試（5 分鐘體驗）
|
||||
**適合人群**：所有人
|
||||
**學什麼**：AI 程式設計初體驗、貪吃蛇小遊戲
|
||||
**你會得到**：5 分鐘做出第一個 AI 應用
|
||||
|
||||
[开始体验](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/learning-map/)
|
||||
[開始體驗](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/learning-map/)
|
||||
|
||||
### 💡 我有个想法要实现
|
||||
**适合人群**：零基础/产品经理/创业者
|
||||
**学什么**：AI IDE 工具、需求拆解、页面设计、功能规划、提示词写法、原型迭代
|
||||
**你会得到**：一个可演示的产品原型
|
||||
### 💡 我有個想法要實現
|
||||
**適合人群**：零基礎/產品經理/創業者
|
||||
**學什麼**：AI IDE 工具、需求拆解、頁面設計、功能規劃、提示詞寫法、原型迭代
|
||||
**你會得到**：一個可展示的產品原型
|
||||
|
||||
[开始学习](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/learning-map/)
|
||||
[開始學習](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/learning-map/)
|
||||
|
||||
### 🚀 我想系统学习
|
||||
**适合人群**：开发者/进阶学习者
|
||||
**学什么**：前端、后端、数据库、AI 集成、部署运维、Claude Code 开发技巧
|
||||
**你会得到**：独立完成一个可上线的全栈 AI 应用
|
||||
### 🚀 我想系統學習
|
||||
**適合人群**：開發者/進階學習者
|
||||
**學什麼**：前端、後端、資料庫、AI 整合、部署維運、Claude Code 開發技巧
|
||||
**你會得到**：獨立完成一個可上線的全端 AI 應用
|
||||
|
||||
[开始学习](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/)
|
||||
[開始學習](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/)
|
||||
|
||||
### 🦞 我想构建 AI Agent
|
||||
**适合人群**：对 AI Agent 感兴趣的开发者
|
||||
**学什么**：OpenClaw AI 助理、Skills 系统、自动化工作流
|
||||
**你会得到**：一个属于你的命令行 AI 助理
|
||||
### 🦞 我想建構 AI Agent
|
||||
**適合人群**：對 AI Agent 感興趣的開發者
|
||||
**學什麼**：OpenClaw AI 助理、Skills 系統、自動化工作流
|
||||
**你會得到**：一個屬於你的命令列 AI 助理
|
||||
|
||||
[开始学习](https://github.com/datawhalechina/hello-claw)
|
||||
[開始學習](https://github.com/datawhalechina/hello-claw)
|
||||
|
||||
### 📚 我想查资料
|
||||
**适合人群**：所有人
|
||||
**学什么**：计算机基础、AI 原理、9 大知识领域
|
||||
**你会得到**：80+ 交互式专题资料
|
||||
### 📚 我想查資料
|
||||
**適合人群**：所有人
|
||||
**學什麼**：電腦基礎、AI 原理、9 大知識領域
|
||||
**你會得到**：80+ 互動式專題資料
|
||||
|
||||
[查看知识库](https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/)
|
||||
[查看知識庫](https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/)
|
||||
|
||||
## 学习建议
|
||||
## 學習建議
|
||||
|
||||
- 零基础、产品经理、创业者：从 [第一阶段](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/learning-map/) 开始
|
||||
- 有开发经验：从 [第二阶段](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/) 开始
|
||||
- 想直接做复杂项目：进入 [第三阶段](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/)
|
||||
- 想学 AI Agent：看 [Hello Claw](https://github.com/datawhalechina/hello-claw)
|
||||
- 零基礎、產品經理、創業者：從 [第一階段](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/learning-map/) 開始
|
||||
- 有開發經驗：從 [第二階段](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/) 開始
|
||||
- 想直接做複雜專案：進入 [第三階段](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/)
|
||||
- 想學 AI Agent：看 [Hello Claw](https://github.com/datawhalechina/hello-claw)
|
||||
|
||||
|
||||
|
||||
### 📖 内容导航
|
||||
### 📖 內容導航
|
||||
|
||||
<div align="center">
|
||||
<img src="../../assets/readme-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;"/>
|
||||
</div>
|
||||
|
||||
### 一、零基础入门
|
||||
### 一、零基礎入門
|
||||
|
||||
| 章节 | 关键内容 |
|
||||
| 章節 | 關鍵內容 |
|
||||
| :----------------------------------------------------------------------------------- | :------------------------------------------------ |
|
||||
| [学习地图](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/learning-map/) | 整体学习路径导览 |
|
||||
| [AI 时代，会说话就会编程](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/ai-capabilities-through-games/) | 通过贪吃蛇等案例初步感受 AI 编程的能力 |
|
||||
| [寻找好想法](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/finding-great-idea/) | 学会寻找和验证产品想法，找到值得做的项目 |
|
||||
| [认识 AI IDE 工具](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/introduction-to-ai-ide/) | 学会使用 IDE，在本地制作小游戏 |
|
||||
| [动手做出原型](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/building-prototype/) | 从需求分析、AI 生成单页面，再到生成多页面产品原型 |
|
||||
| [给原型加上 AI 能力](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/integrating-ai-capabilities/) | 学会接入常见 AI 能力（文本、图片、视频） |
|
||||
| [完整项目实战](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/complete-project-practice/) | 模拟真实场景、接受用户反馈迭代，完整化项目 |
|
||||
| [學習地圖](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/learning-map/) | 整體學習路徑導覽 |
|
||||
| [AI 時代，會說話就會程式設計](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/ai-capabilities-through-games/) | 透過貪吃蛇等案例初步感受 AI 程式設計的能力 |
|
||||
| [尋找好想法](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/finding-great-idea/) | 學會尋找和驗證產品想法，找到值得做的專案 |
|
||||
| [認識 AI IDE 工具](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/introduction-to-ai-ide/) | 學會使用 IDE，在本機製作小遊戲 |
|
||||
| [動手做出原型](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/building-prototype/) | 從需求分析、AI 產生單頁面，再到產生多頁面產品原型 |
|
||||
| [給原型加上 AI 能力](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/integrating-ai-capabilities/) | 學會接入常見 AI 能力（文字、圖片、影片） |
|
||||
| [完整專案實戰](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/complete-project-practice/) | 模擬真實場景、接受使用者回饋迭代，完整化專案 |
|
||||
|
||||
#### 附录：业务思维
|
||||
#### 附錄：產品與業務思維
|
||||
|
||||
| 章节 | 关键内容 |
|
||||
| 章節 | 關鍵內容 |
|
||||
| :----------------------------------------------------------------------------------- | :----------------------------------------- |
|
||||
| [产品思维与方案设计](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-a-product-thinking/) | 从零到一做产品需要考虑的思维框架 |
|
||||
| [AI 行业应用场景参考 (B端)](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-industry-scenarios/) | 了解 AI 在不同产业的应用场景 |
|
||||
| [AI 消费场景灵感参考 (C端)](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-c-consumer-scenarios/) | 探索 AI 在消费级产品中的应用场景 |
|
||||
| [產品思維與方案設計](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-a-product-thinking/) | 從零到一做產品需要考慮的思維框架 |
|
||||
| [AI 行業應用場景參考 (B 端)](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-industry-scenarios/) | 了解 AI 在不同產業的應用場景 |
|
||||
| [AI 消費場景靈感參考 (C 端)](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-c-consumer-scenarios/) | 探索 AI 在消費級產品中的應用場景 |
|
||||
|
||||
#### 附录：技术方案
|
||||
#### 附錄：使用者研究與需求驗證
|
||||
|
||||
| 章节 | 关键内容 |
|
||||
| 章節 | 關鍵內容 |
|
||||
| :----------------------------------------------------------------------------------- | :----------------------------------------- |
|
||||
| [從哪裡找點子：最適合新手的 3 個參考來源](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-idea-sources/) | 建立可靠的管道來尋找具體的產品機會 |
|
||||
| [雙鑽模型：先做對的事，再把事做對](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-double-diamond/) | 用結構化流程從零散靈感到可執行方向 |
|
||||
| [用 Jobs to Be Done 找出使用者真正想完成的事](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-jobs-to-be-done/) | 透過真實任務分析使用者目標而非表面功能需求 |
|
||||
| [The Mom Test：驗證需求的使用者訪談方法](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-mom-test/) | 學會問更好的問題，避免假陽性回饋 |
|
||||
|
||||
#### 附錄：技術方案
|
||||
|
||||
| 章節 | 關鍵內容 |
|
||||
| :---------------------------------------------------------------------------------------------------------------------- | :----------------------------------------- |
|
||||
| [写代码时遇到错误怎么办](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-b-common-errors/) | vibe coding 中的常见错误及排查方法 |
|
||||
| [七款 AI 编程工具对比](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial) | 对比测试主流 AI 编程平台 |
|
||||
| [用设计和编程 Agent 设计网站](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents) | 学习如何使用 AI 智能体协同工作 |
|
||||
| [寫程式時遇到錯誤怎麼辦](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-b-common-errors/) | vibe coding 中的常見錯誤及排查方法 |
|
||||
| [七款 AI 程式設計工具對比](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial) | 對比測試主流 AI 程式設計平台 |
|
||||
| [用設計和程式設計 Agent 設計網站](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents) | 學習如何使用 AI 智慧體協同工作 |
|
||||
|
||||
### 二、初中级开发工程师
|
||||
### 二、初中級開發工程師
|
||||
|
||||
#### 前端部分
|
||||
|
||||
| 章节 | 关键内容 |
|
||||
| 章節 | 關鍵內容 |
|
||||
| :--------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------- |
|
||||
| [从Lovart出发，搭建自己的素材生产Agent](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/frontend/lovart-assets/) | 从零开始，利用Nanobanana和Lovart批量生成高质量的设计素材，并动手构建一个能意图识别的绘图Agent |
|
||||
| [Figma 与 MasterGo 入门](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/frontend/figma-mastergo/) | 用设计工具梳理信息架构和页面结构，为前端实现打基础 |
|
||||
| [构建第一个现代应用程序-UI 设计](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/frontend/ui-design/) | 基于设计稿完成组件化界面，实现从设计到代码的第一条链路 |
|
||||
| [参考 UI 设计规范与多产品 UI 设计](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/frontend/multi-product-ui/) | 围绕统一主视觉扩展多产品界面，练习系统化设计能力 |
|
||||
| [用 LLM 和 Skills 让界面变好看](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/frontend/llm-skills-beautiful/) | 用提示词和 Skills 插件让 AI 生成美观独特的界面 |
|
||||
| [一起做霍格沃茨画像](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/frontend/hogwarts-portraits/) | 从 0 到 1 做出接入 AI 能力的前端应用，串联设计与开发 |
|
||||
| [从设计原型到项目代码](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/frontend/design-to-code/) | 三种路径将设计工具中的原型转化为前端代码 |
|
||||
| [使用现代组件库更新你的界面](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/frontend/modern-component-library/) | 用组件库快速构建专业级界面，统一风格、提升开发效率 |
|
||||
| [從 Lovart 出發，搭建自己的素材生產 Agent](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/frontend/lovart-assets/) | 從零開始，利用 Nanobanana 和 Lovart 批次產生高品質的設計素材，並動手建構一個能意圖識別的繪圖 Agent |
|
||||
| [Figma 與 MasterGo 入門](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/frontend/figma-mastergo/) | 用設計工具梳理資訊架構和頁面結構，為前端實作打基礎 |
|
||||
| [建構第一個現代應用程式 - UI 設計](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/frontend/ui-design/) | 基於設計稿完成元件化介面，實現從設計到程式碼的第一條鏈路 |
|
||||
| [參考 UI 設計規範與多產品 UI 設計](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/frontend/multi-product-ui/) | 圍繞統一主視覺擴展多產品介面，練習系統化設計能力 |
|
||||
| [用 LLM 和 Skills 讓介面變好看](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/frontend/llm-skills-beautiful/) | 用提示詞和 Skills 外掛讓 AI 產生美觀獨特的介面 |
|
||||
| [一起做霍格華茲畫像](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/frontend/hogwarts-portraits/) | 從 0 到 1 做出接入 AI 能力的前端應用，串聯設計與開發 |
|
||||
| [從設計原型到專案程式碼](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/frontend/design-to-code/) | 三種路徑將設計工具中的原型轉化為前端程式碼 |
|
||||
| [使用現代元件庫更新你的介面](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/frontend/modern-component-library/) | 用元件庫快速建構專業級介面，統一風格、提升開發效率 |
|
||||
|
||||
#### 后端开发部分
|
||||
#### 後端開發部分
|
||||
|
||||
| 章节 | 关键内容 |
|
||||
| 章節 | 關鍵內容 |
|
||||
| :------------------------------------------------------------------------------------------------- | :---------------------------------------------------------- |
|
||||
| [从数据库到 Supabase](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/backend/database-supabase/) | 在 Supabase 上落地数据库和 API，打通数据模型与前端页面 |
|
||||
| [大模型辅助编写接口代码与接口文档](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/backend/ai-interface-code/) | 用大模型协助生成接口与数据库文档及代码，实现可读可测的后端 |
|
||||
| [Git 和 GitHub 工作流](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/backend/git-workflow/) | 在 Git 工作流中管理代码，进行版本控制和协作 |
|
||||
| [如何部署 Web 应用](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/backend/zeabur-deployment/) | 使用 CloudBase、Vercel、Zeabur 等平台部署应用上线 |
|
||||
| [CLI AI 编程工具](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/backend/modern-cli/) | 使用 CLI 类 AI 编程工具加速开发与调试，形成个人工程化工作流 |
|
||||
| [如何集成 Stripe 等收费系统](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/backend/stripe-payment/) | 接入支付系统，完成收费链路与基础结算流程 |
|
||||
| [大作业：构建第一个现代应用程序-全栈应用](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/assignments/copywriting-platform-supabase/) | 综合前端、后端与支付模块，完成可上线的全栈 Web 应用 |
|
||||
| [從資料庫到 Supabase](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/backend/database-supabase/) | 在 Supabase 上落地資料庫和 API，打通資料模型與前端頁面 |
|
||||
| [大模型輔助編寫介面程式碼與介面文件](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/backend/ai-interface-code/) | 用大模型協助產生介面與資料庫文件及程式碼，實現可讀可測的後端 |
|
||||
| [Git 和 GitHub 工作流](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/backend/git-workflow/) | 在 Git 工作流中管理程式碼，進行版本控制和協作 |
|
||||
| [如何部署 Web 應用](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/backend/zeabur-deployment/) | 使用 CloudBase、Vercel、Zeabur 等平台部署應用上線 |
|
||||
| [CLI AI 程式設計工具](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/backend/modern-cli/) | 使用 CLI 類 AI 程式設計工具加速開發與除錯，形成個人工程化工作流 |
|
||||
| [如何整合 Stripe 等收費系統](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/backend/stripe-payment/) | 接入支付系統，完成收費鏈路與基礎結算流程 |
|
||||
| [大作業：建構第一個現代應用程式 - 全端應用](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/assignments/copywriting-platform-supabase/) | 綜合前端、後端與支付模組，完成可上線的全端 Web 應用 |
|
||||
|
||||
#### AI 能力附录
|
||||
#### AI 能力附錄
|
||||
|
||||
| 章节 | 关键内容 |
|
||||
| 章節 | 關鍵內容 |
|
||||
| :------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------- |
|
||||
| [Dify 入门与知识库集成](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/ai-capabilities/dify-knowledge-base/) | 用 Dify Workflow 与基础 RAG 搭建工具类产品，为后续应用升级打样 |
|
||||
| [Dify 入門與知識庫整合](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/ai-capabilities/dify-knowledge-base/) | 用 Dify Workflow 與基礎 RAG 搭建工具類產品，為後續應用升級打樣 |
|
||||
|
||||
### 三、高级开发工程师
|
||||
### 三、高級開發工程師
|
||||
|
||||
#### Claude Code 核心技能
|
||||
|
||||
| 章节 | 关键内容 |
|
||||
| 章節 | 關鍵內容 |
|
||||
| :------------------------------------------------------------------------------------------------------ | :----------------------------------------------------------- |
|
||||
| [Claude Code 快速上手](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/core-skills/basics/) | 安装配置、基础操作、实用技巧和常用指令 |
|
||||
| [Claude Code MCP 完全指南](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/core-skills/mcp/) | 通过 MCP 让 Claude Code 连接 GitHub、数据库、API 等外部服务 |
|
||||
| [Claude Code Skills 完全指南](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/core-skills/skills/) | 将专业知识打包成可复用技能包，一次配置反复使用 |
|
||||
| [Claude Code 工作流最佳实践](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/core-skills/workflow/) | 日常开发、代码重构、Code Review 等场景的最佳实践 |
|
||||
| [Claude Agent Teams 完全指南](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/core-skills/agent-teams/) | 多 AI 实例协同工作，像真正的开发团队一样并行协作 |
|
||||
| [Claude Code Superpowers 工程级开发](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/core-skills/superpowers/) | 让 AI 写出工程级代码，遵循 TDD 和最佳实践 |
|
||||
| [如何让 Claude Code 长时间工作](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/core-skills/long-running-tasks/) | 设计长时间运行的任务，让 Coding Tools 持续工作直到完成 |
|
||||
| [Claude Code 快速上手](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/core-skills/basics/) | 安裝設定、基礎操作、實用技巧和常用指令 |
|
||||
| [Claude Code MCP 完全指南](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/core-skills/mcp/) | 透過 MCP 讓 Claude Code 連接 GitHub、資料庫、API 等外部服務 |
|
||||
| [Claude Code Skills 完全指南](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/core-skills/skills/) | 將專業知識打包成可複用技能包，一次設定反覆使用 |
|
||||
| [如何讓 Claude Code 長時間工作](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/core-skills/long-running-tasks/) | 設計長時間執行的任務，讓 Coding Tools 持續工作直到完成 |
|
||||
| [Claude Agent Teams 完全指南](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/core-skills/agent-teams/) | 多 AI 實例協同工作，像真正的開發團隊一樣並行協作 |
|
||||
| [Claude Code Superpowers 工程級開發](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/core-skills/superpowers/) | 讓 AI 寫出工程級程式碼，遵循 TDD 和最佳實踐 |
|
||||
| [Claude Code 工作流最佳實踐](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/core-skills/workflow/) | 日常開發、程式碼重構、Code Review 等場景的最佳實踐 |
|
||||
| [Claude Code 行動端遠端開發](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/core-skills/mobile-development/) | 在行動裝置上使用 Claude Code，打造高效的遠端開發工作流 |
|
||||
| [Claude Agent SDK 完全指南](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/core-skills/claude-agent-sdk/) | 使用 SDK 建構自訂 Agent 工作流，將 Claude 整合到你的工具中 |
|
||||
| [從 Vibe Coding 到 Spec Coding](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/core-skills/spec-coding/) | 從即興提示轉向更結構化、規格驅動的 AI 開發工作流 |
|
||||
|
||||
#### 多平台开发
|
||||
#### 跨平台開發
|
||||
|
||||
| 章节 | 关键内容 |
|
||||
| 章節 | 關鍵內容 |
|
||||
| :------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------- |
|
||||
| [如何构建微信小程序](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/wechat-miniprogram/) | 了解微信小程序生态，从官方模板到上线完成一个前端小程序 |
|
||||
| [如何构建微信小程序-包含后端](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/wechat-miniprogram-backend/) | 在小程序中接入数据库与后端逻辑，打通完整业务闭环 |
|
||||
| [如何构建安卓程序](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/android-app/) | 使用 Expo 等工具，完成 Web/原生一体化的安卓应用开发 |
|
||||
| [如何构建 iOS 程序](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/ios-app/) | 使用 Expo 等工具，完成 Web/原生一体化的 iOS 应用开发 |
|
||||
| [如何开发 PWA 本地应用](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/pwa-local-app/) | 让网页变成"真正的 App"，支持离线、推送、桌面安装 |
|
||||
| [如何开发浏览器 AI 助手插件](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/browser-ai-extension/) | 开发 Chrome 插件，一键总结任意网页，支持云端 API 和内置 AI |
|
||||
| [如何开发 Electron 桌面程序](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/electron-voice-to-text/) | 用 Electron 构建语音转文字桌面应用，支持三平台安装运行 |
|
||||
| [如何快速开发并铸造 NFT](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/nft-minting/) | 从零编写智能合约，部署到以太坊测试网，铸造自己的 NFT |
|
||||
| [如何开发 VS Code 插件](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/vscode-extension/) | 开发 AI 项目助手插件，支持模板生成、代码对话、多文件问答 |
|
||||
| [如何开发工业级 Qt 桌面应用](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/qt-industrial-hmi/) | 用 Qt 构建工业级水泵监控 HMI 系统，实时数据、趋势图、报警 |
|
||||
| [如何選擇適合你的應用平台](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/choose-platform/) | 比較應用形態，根據使用者、場景和交付目標選擇合適的平台 |
|
||||
| [如何建構微信小程式](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/wechat-miniprogram/) | 了解微信小程式生態，從官方範本到上線完成一個前端小程式 |
|
||||
| [如何建構微信小程式 - 包含後端](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/wechat-miniprogram-backend/) | 在小程式中接入資料庫與後端邏輯，打通完整業務閉環 |
|
||||
| [如何建構安卓程式](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/android-app/) | 使用 Expo 等工具，完成 Web/原生一體化的安卓應用開發 |
|
||||
| [如何建構 iOS 程式](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/ios-app/) | 使用 Expo 等工具，完成 Web/原生一體化的 iOS 應用開發 |
|
||||
| [如何開發 PWA 本機應用](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/pwa-local-app/) | 讓網頁變成「真正的 App」，支援離線、推送、桌面安裝 |
|
||||
| [如何開發瀏覽器 AI 助手外掛](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/browser-ai-extension/) | 開發 Chrome 外掛，一鍵總結任意網頁，支援雲端 API 和內建 AI |
|
||||
| [如何開發 Electron 桌面程式](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/electron-voice-to-text/) | 用 Electron 建構語音轉文字桌面應用，支援三平台安裝執行 |
|
||||
| [如何快速開發並鑄造 NFT](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/nft-minting/) | 從零編寫智慧合約，部署到以太坊測試網，鑄造自己的 NFT |
|
||||
| [如何開發 VS Code 外掛](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/vscode-extension/) | 開發 AI 專案助手外掛，支援範本產生、程式碼對話、多檔案問答 |
|
||||
| [如何開發工業級 Qt 桌面應用](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/cross-platform/qt-industrial-hmi/) | 用 Qt 建構工業級水泵監控 HMI 系統，即時資料、趨勢圖、警報 |
|
||||
|
||||
#### AI 能力附录
|
||||
#### AI 能力附錄
|
||||
|
||||
| 章节 | 关键内容 |
|
||||
| 章節 | 關鍵內容 |
|
||||
| :---------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------ |
|
||||
| [什么是 RAG 以及它如何工作](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/ai-advanced/rag-introduction/) | 系统理解 RAG 原理与常见架构，为复杂应用提供知识检索基础 |
|
||||
| [中高级 RAG 与工作流编排：以 LangGraph 为例](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/ai-advanced/langgraph-advanced-rag/) | 使用 LangGraph 等工具设计多步工作流与中高级 RAG 系统 |
|
||||
| [什麼是 RAG 以及它如何運作](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/ai-advanced/rag-introduction/) | 系統理解 RAG 原理與常見架構，為複雜應用提供知識檢索基礎 |
|
||||
| [中高級 RAG 與工作流編排：以 LangGraph 為例](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/ai-advanced/langgraph-advanced-rag/) | 使用 LangGraph 等工具設計多步工作流與中高級 RAG 系統 |
|
||||
|
||||
### 📚 附录知识库
|
||||
### 📚 附錄知識庫
|
||||
|
||||
> 涵盖 **9 大知识领域**、**80+ 交互式专题**，以动画和可视化组件帮助你直观理解从计算机底层到 AI 前沿的核心概念。
|
||||
> 涵蓋 **9 大知識領域**、**80+ 互動式專題**，以動畫和視覺化元件幫助你直觀理解從電腦底層到 AI 前沿的核心概念。
|
||||
>
|
||||
> 👉 [查看完整附录](https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/) · [AI 能力词典](https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/ai-capability-dictionary)
|
||||
> 👉 [查看完整附錄](https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/) · [AI 能力詞典](https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/ai-capability-dictionary)
|
||||
|
||||
### 🎓 其他課程 / Other Courses
|
||||
|
||||
- [Hands-on Modern RL](#other-courses)
|
||||
- [Learn Harness Engineering](#other-courses)
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td valign="top" width="33%">
|
||||
<strong>💻 计算机基础</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/transistor-to-cpu.html">从晶体管到 CPU</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/operating-systems.html">操作系统</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/data-encoding-storage.html">数据的编码、存储与传输</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/computer-networks.html">网络：两台电脑如何对话</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/data-structures.html">数据结构</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/algorithm-thinking.html">算法思维入门</a>
|
||||
<strong>💻 電腦基礎</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/transistor-to-cpu.html">從電晶體到 CPU</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/operating-systems.html">作業系統</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/data-encoding-storage.html">資料的編碼、儲存與傳輸</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/computer-networks.html">網路：兩台電腦如何對話</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/data-structures.html">資料結構</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/algorithm-thinking.html">演算法思維入門</a>
|
||||
</td>
|
||||
<td valign="top" width="33%">
|
||||
<strong>🔧 开发工具</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/git-version-control.html">Git：代码的时光机</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/command-line-shell.html">命令行与 Shell 脚本</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/package-managers.html">包管理器</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/debugging-art/">调试的艺术</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/regex.html">正则表达式</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/environment-path.html">环境变量与 PATH</a>
|
||||
<strong>🔧 開發工具</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/git-version-control.html">Git：程式碼的時光機</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/command-line-shell.html">命令列與 Shell 腳本</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/package-managers.html">套件管理器</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/debugging-art/">除錯的藝術</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/regex.html">正規表示式</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/environment-path.html">環境變數與 PATH</a>
|
||||
</td>
|
||||
<td valign="top" width="33%">
|
||||
<strong>🌐 浏览器与前端</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/javascript-deep-dive.html">JavaScript 语言深入</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/browser-as-os-rendering.html">浏览器渲染管道</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/frontend-frameworks.html">前端框架对比</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/graphics-animation.html">图形与动画</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/web-performance.html">网页性能的度量与优化</a><br>
|
||||
<strong>🌐 瀏覽器與前端</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/javascript-deep-dive.html">JavaScript 語言深入</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/browser-as-os-rendering.html">瀏覽器渲染管道</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/frontend-frameworks.html">前端框架對比</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/graphics-animation.html">圖形與動畫</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/web-performance.html">網頁效能的度量與最佳化</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/frontend-engineering.html">前端工程化全貌</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top" width="33%">
|
||||
<strong>🖥️ 服务器与后端</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/http-protocol.html">HTTP 协议</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/api-design.html">API 设计哲学</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/auth-authorization.html">认证与授权体系</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/concurrency-async.html">并发、异步与多线程</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/message-queues.html">消息队列与事件驱动</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/backend-layered-architecture.html">后端分层架构</a>
|
||||
<strong>🖥️ 伺服器與後端</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/http-protocol.html">HTTP 協定</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/api-design.html">API 設計哲學</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/auth-authorization.html">認證與授權體系</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/concurrency-async.html">並行、非同步與多執行緒</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/message-queues.html">訊息佇列與事件驅動</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/backend-layered-architecture.html">後端分層架構</a>
|
||||
</td>
|
||||
<td valign="top" width="33%">
|
||||
<strong>📊 数据</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/database-fundamentals.html">数据库原理与 SQL</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/database-fundamentals.html">数据库原理</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/data-tracking.html">数据埋点与用户行为采集</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/data-analysis.html">数据分析基础</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/ab-testing.html">A/B 测试与实验驱动</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/data-visualization.html">数据可视化与仪表盘</a>
|
||||
<strong>📊 資料</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/database-fundamentals.html">資料庫原理與 SQL</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/database-fundamentals.html">資料庫原理</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/data-tracking.html">資料埋點與使用者行為採集</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/data-analysis.html">資料分析基礎</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/ab-testing.html">A/B 測試與實驗驅動</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/data-visualization.html">資料視覺化與儀表板</a>
|
||||
</td>
|
||||
<td valign="top" width="33%">
|
||||
<strong>🏗️ 架构与系统设计</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/6-architecture-and-system-design/monolith-to-microservices.html">从单体到微服务的演进</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/6-architecture-and-system-design/distributed-systems.html">分布式系统的挑战</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/6-architecture-and-system-design/high-availability.html">高可用与容灾</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/6-architecture-and-system-design/system-design-methodology.html">系统设计方法论</a>
|
||||
<strong>🏗️ 架構與系統設計</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/6-architecture-and-system-design/monolith-to-microservices.html">從單體到微服務的演進</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/6-architecture-and-system-design/distributed-systems.html">分散式系統的挑戰</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/6-architecture-and-system-design/high-availability.html">高可用與容災</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/6-architecture-and-system-design/system-design-methodology.html">系統設計方法論</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top" width="33%">
|
||||
<strong>☁️ 基础设施与运维</strong><br><br>
|
||||
<strong>☁️ 基礎設施與維運</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/docker-containers.html">Docker 容器化</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/kubernetes.html">Kubernetes 编排</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/ci-cd.html">CI / CD 自动化</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/dns-https.html">域名、DNS 与 HTTPS</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/monitoring-logging.html">监控、日志与告警</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/infrastructure-as-code.html">基础设施即代码</a>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/kubernetes.html">Kubernetes 編排</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/ci-cd.html">CI / CD 自動化</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/dns-https.html">網域、DNS 與 HTTPS</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/monitoring-logging.html">監控、日誌與警報</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/infrastructure-as-code.html">基礎設施即程式碼</a>
|
||||
</td>
|
||||
<td valign="top" width="33%">
|
||||
<strong>🤖 人工智能</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/llm-principles.html">大语言模型的工作原理</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/transformer-attention.html">Transformer 与注意力机制</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/rag.html">RAG 架构</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/ai-agents.html">AI Agent 与工具调用</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/prompt-engineering.html">提示词工程</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/image-generation.html">图像生成原理</a>
|
||||
<strong>🤖 人工智慧</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/llm-principles.html">大語言模型的運作原理</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/transformer-attention.html">Transformer 與注意力機制</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/rag.html">RAG 架構</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/ai-agents.html">AI Agent 與工具呼叫</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/prompt-engineering.html">提示詞工程</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/image-generation.html">圖像生成原理</a>
|
||||
</td>
|
||||
<td valign="top" width="33%">
|
||||
<strong>🎯 工程素养</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/code-quality-refactoring.html">代码质量与重构</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/testing-strategies.html">测试策略</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/design-patterns.html">设计模式</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/security-thinking.html">安全思维与攻防基础</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/technical-writing.html">技术文档写作</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/open-source-collaboration.html">开源协作</a>
|
||||
<strong>🎯 工程素養</strong><br><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/code-quality-refactoring.html">程式碼品質與重構</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/testing-strategies.html">測試策略</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/design-patterns.html">設計模式</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/security-thinking.html">安全思維與攻防基礎</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/technical-writing.html">技術文件寫作</a><br>
|
||||
• <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/open-source-collaboration.html">開源協作</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
## 🛠️ 如何学习
|
||||
## 🛠️ 如何學習
|
||||
|
||||
- 根据个人能力，选择性地阅读和实践相关章节，如果有问题欢迎 issue 提问。
|
||||
- 根據個人能力，選擇性地閱讀和實踐相關章節，如果有問題歡迎 issue 提問。
|
||||
|
||||
## 💻 本地启动本课件
|
||||
## 💻 本地啟動本課件
|
||||
|
||||
### 现代方案
|
||||
### 現代方案
|
||||
|
||||
在 AI IDE 对话框（vscode、cursor、trae 等）中，输入下列提示词启动本课件：
|
||||
在 AI IDE 對話框（VS Code、Cursor、Trae 等）中，輸入下列提示詞啟動本課件：
|
||||
|
||||
```
|
||||
请你帮我运行这个项目的本地服务
|
||||
請你幫我執行這個專案的本機服務
|
||||
```
|
||||
|
||||
### 旧方案
|
||||
### 傳統方案
|
||||
|
||||
1. npm install
|
||||
2. npm run dev
|
||||
3. 打开浏览器访问 `http://localhost:3000` 即可查看。
|
||||
1. `npm install`
|
||||
2. `npm run dev`
|
||||
3. 開啟瀏覽器造訪 `http://localhost:3000` 即可查看。
|
||||
|
||||
## 🤝 参与贡献
|
||||
## Other Courses
|
||||
|
||||
- 如果你发现了一些问题，或者觉得任何可以改进本项目的地方，可以提 Issue 进行反馈。如果提完没有人回复你可以联系[保姆团队](https://github.com/datawhalechina/DOPMC/blob/main/OP.md)的同学进行反馈跟进~
|
||||
- 如果你想参与贡献本项目，可以提 Pull Request，如果提完没有人回复你可以联系[保姆团队](https://github.com/datawhalechina/DOPMC/blob/main/OP.md)的同学进行反馈跟进~
|
||||
- 如果你对 Datawhale 很感兴趣并想要发起一个新的项目，请按照[Datawhale 开源项目指南](https://github.com/datawhalechina/DOPMC/blob/main/GUIDE.md)进行操作即可~
|
||||
Our team has also created other courses! Check them out:
|
||||
|
||||
## 🙏 感谢每位贡献者
|
||||
[](https://github.com/walkinglabs/hands-on-modern-rl)
|
||||
|
||||
- [散步-项目负责人](https://github.com/sanbuphy) (Datawhale成员)
|
||||
- 方可-指导老师（Datawhale成员, 清华大学）
|
||||
- [Yerim Kang](https://github.com/yerim25)（实践项目部分-清华大学）
|
||||
- [赵芷霖](https://github.com/ChileenZ)（实践项目部分-清华大学）
|
||||
- [李亦萱](https://yixuan20.github.io/)（页面美术设计-清华大学）
|
||||
- 刘思怡（实践项目部分-清华大学）
|
||||
- [刘丽欣](https://github.com/liulx25xx)（实践项目部分-清华大学）
|
||||
- AI Vibe Coding 101 内测群完整给建议体验的小伙伴们
|
||||
**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.
|
||||
|
||||
### 特别感谢
|
||||
[](https://github.com/walkinglabs/learn-harness-engineering/tree/main)
|
||||
|
||||
- 感谢 [@Sm1les](https://github.com/Sm1les) 对本项目的帮助与支持
|
||||
- 感谢所有为本项目做出贡献的开发者们和支持点赞的朋友们 ❤️
|
||||
**Learn Harness Engineering**: A comprehensive guide to harness engineering.
|
||||
|
||||
<div align="center">
|
||||
|
||||
|
||||
<a href="https://www.star-history.com/#datawhalechina/easy-vibe&type=timeline&legend=top-left">
|
||||
<picture>
|
||||
<source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=datawhalechina/easy-vibe&type=timeline&theme=dark&legend=top-left" />
|
||||
<source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=datawhalechina/easy-vibe&type=timeline&legend=top-left" />
|
||||
</picture>
|
||||
## 🤝 參與貢獻與致謝
|
||||
|
||||
- 如果你發現了一些問題，或者覺得任何可以改進本專案的地方，可以提 Issue 進行回饋。如果提完沒有人回覆你可以聯繫[保姆團隊](https://github.com/datawhalechina/DOPMC/blob/main/OP.md)的同學進行回饋跟進～
|
||||
- 如果你想參與貢獻本專案，可以提 Pull Request，如果提完沒有人回覆你可以聯繫[保姆團隊](https://github.com/datawhalechina/DOPMC/blob/main/OP.md)的同學進行回饋跟進～
|
||||
- 如果你對 Datawhale 很感興趣並想要發起一個新的專案，請按照 [Datawhale 開源專案指南](https://github.com/datawhalechina/DOPMC/blob/main/GUIDE.md)進行操作即可～
|
||||
|
||||
### 🙏 感謝每位貢獻者
|
||||
|
||||
- [散步 - 專案負責人](https://github.com/sanbuphy) (Datawhale 成員)
|
||||
- 方可 - 指導老師（Datawhale 成員, 清華大學）
|
||||
- [Yerim Kang](https://github.com/yerim25)（實踐專案部分 - 清華大學）
|
||||
- [趙芷霖](https://github.com/ChileenZ)（實踐專案部分 - 清華大學）
|
||||
- [李亦萱](https://yixuan20.github.io/)（頁面美術設計 - 清華大學）
|
||||
- 劉思怡（實踐專案部分 - 清華大學）
|
||||
- [劉麗欣](https://github.com/liulx25xx)（實踐專案部分 - 清華大學）
|
||||
- AI Vibe Coding 101 內測群完整給建議體驗的小夥伴們
|
||||
|
||||
### 特別感謝
|
||||
|
||||
- 感謝 [@Sm1les](https://github.com/Sm1les) 對本專案的幫助與支援
|
||||
- 感謝所有為本專案做出貢獻的開發者們和支援點讚的朋友們 ❤️
|
||||
|
||||
<div align="center">
|
||||
|
||||
|
||||
<a href="https://www.star-history.com/#datawhalechina/easy-vibe&type=timeline&legend=top-left">
|
||||
<picture>
|
||||
<source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=datawhalechina/easy-vibe&type=timeline&theme=dark&legend=top-left" />
|
||||
<source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=datawhalechina/easy-vibe&type=timeline&legend=top-left" />
|
||||
</picture>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -461,17 +510,17 @@ Easy-Vibe 教你的，就是怎樣把它一步步做成真正的產品。
|
||||
<div align="center">
|
||||
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">
|
||||
<img
|
||||
alt="知识共享许可协议"
|
||||
alt="知識共享授權協議"
|
||||
style="border-width:0"
|
||||
src="https://img.shields.io/badge/license-CC%20BY--NC--SA%204.0-lightgrey"
|
||||
/>
|
||||
</a>
|
||||
<br />
|
||||
本作品采用
|
||||
本作品採用
|
||||
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">
|
||||
知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议
|
||||
知識共享署名-非商業性使用-相同方式共享 4.0 國際授權協議
|
||||
</a>
|
||||
进行许可。
|
||||
進行授權。
|
||||
</div>
|
||||
|
||||
## Star History
|
||||
|
||||
Reference in New Issue
Block a user