refactor: restructure docs for i18n support
- Move existing documentation to docs/zh-cn/ - Initialize structure for multiple languages (ar-sa, de-de, en-us, etc.) - Add update_readmes.cjs utility script - Update deployment documentation
This commit is contained in:
sanbuphy
@@ -13,24 +13,37 @@
|
|||||||
|
|
||||||
### *零基础、项目制学习、构建第一个 AI 产品*
|
### *零基础、项目制学习、构建第一个 AI 产品*
|
||||||
|
|
||||||
<div align="center" style="margin-bottom: 16px;">
|
<p align="center">
|
||||||
<a href="https://datawhalechina.github.io/easy-vibe/" style="text-decoration: none;">
|
📌 <a href="https://datawhalechina.github.io/easy-vibe/">开始在线阅读 (Start Reading Online)</a>
|
||||||
<img src="https://img.shields.io/badge/在线阅读-立即开始-FF6B6B?style=for-the-badge&logo=rocket&logoColor=white&labelColor=1a1a2e">
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
<a href="https://github.com/datawhalechina/easy-vibe/stargazers"><img src='https://img.shields.io/github/stars/datawhalechina/easy-vibe?color=660874&style=for-the-badge&logo=star&logoColor=white&labelColor=1a1a2e' /></a>
|
|
||||||
<a href="https://github.com/datawhalechina/easy-vibe/network/members"><img src='https://img.shields.io/github/forks/datawhalechina/easy-vibe?color=660874&style=for-the-badge&logo=git-fork&logoColor=white&labelColor=1a1a2e' /></a>
|
|
||||||
<img src="https://img.shields.io/badge/License-CC_BY_NC_SA_4.0-4ecdc4?style=for-the-badge&logo=creative-commons&logoColor=white&labelColor=1a1a2e">
|
|
||||||
<img src="https://img.shields.io/badge/Language-Chinese-brightgreen?style=for-the-badge&logo=google-translate&logoColor=white&labelColor=1a1a2e">
|
|
||||||
<a href="#contact"><img src="https://img.shields.io/badge/💬WeChat-Group-07c160?style=for-the-badge&logo=wechat&logoColor=white&labelColor=1a1a2e"></a>
|
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div align="center" style="margin-top: 16px;">
|
<p align="center">
|
||||||
<a href="README_EN.md"><img src="https://img.shields.io/badge/English-2196F3?style=for-the-badge&logo=readme&logoColor=white&labelColor=1a1a2e" alt="English"></a>
|
<a href="https://datawhalechina.github.io/easy-vibe/">在线阅读</a> ·
|
||||||
<a href="README.md"><img src="https://img.shields.io/badge/中文-2196F3?style=for-the-badge&logo=readme&logoColor=white&labelColor=1a1a2e" alt="中文"></a>
|
<a href="#-内容导航">学习地图</a> ·
|
||||||
</div>
|
<a href="#contact">社区交流</a>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p align="center">
|
||||||
|
<a href="https://github.com/datawhalechina/easy-vibe/stargazers" target="_blank">
|
||||||
|
<img src="https://img.shields.io/github/stars/datawhalechina/easy-vibe?color=660874&style=for-the-badge&logo=star&logoColor=white&labelColor=1a1a2e" alt="Stars"></a>
|
||||||
|
<a href="https://github.com/datawhalechina/easy-vibe/network/members" target="_blank">
|
||||||
|
<img src="https://img.shields.io/github/forks/datawhalechina/easy-vibe?color=660874&style=for-the-badge&logo=git-fork&logoColor=white&labelColor=1a1a2e" alt="Forks"></a>
|
||||||
|
<a href="LICENSE" target="_blank">
|
||||||
|
<img src="https://img.shields.io/badge/License-CC_BY_NC_SA_4.0-4ecdc4?style=for-the-badge&logo=creative-commons&logoColor=white&labelColor=1a1a2e" alt="License"></a>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p align="center">
|
||||||
|
<a href="./docs-readme/zh-CN/README.md"><img alt="简体中文" src="https://img.shields.io/badge/简体中文-d9d9d9"></a>
|
||||||
|
<a href="./docs-readme/zh-TW/README.md"><img alt="繁體中文" src="https://img.shields.io/badge/繁體中文-d9d9d9"></a>
|
||||||
|
<a href="./docs-readme/en-US/README.md"><img alt="English" src="https://img.shields.io/badge/English-d9d9d9"></a>
|
||||||
|
<a href="./docs-readme/ja-JP/README.md"><img alt="日本語" src="https://img.shields.io/badge/日本語-d9d9d9"></a>
|
||||||
|
<a href="./docs-readme/es-ES/README.md"><img alt="Español" src="https://img.shields.io/badge/Español-d9d9d9"></a>
|
||||||
|
<a href="./docs-readme/fr-FR/README.md"><img alt="Français" src="https://img.shields.io/badge/Français-d9d9d9"></a>
|
||||||
|
<a href="./docs-readme/ko-KR/README.md"><img alt="한국어" src="https://img.shields.io/badge/한국어-d9d9d9"></a>
|
||||||
|
<a href="./docs-readme/ar-SA/README.md"><img alt="العربية" src="https://img.shields.io/badge/العربية-d9d9d9"></a>
|
||||||
|
<a href="./docs-readme/vi-VN/README.md"><img alt="Tiếng_Việt" src="https://img.shields.io/badge/Tiếng_Việt-d9d9d9"></a>
|
||||||
|
<a href="./docs-readme/de-DE/README.md"><img alt="Deutsch" src="https://img.shields.io/badge/Deutsch-d9d9d9"></a>
|
||||||
|
</p>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,230 @@
|
|||||||
|
<!-- trigger vercel build -->
|
||||||
|
<div align="center">
|
||||||
|
|
||||||
|
<pre style="font-family: 'Courier New', monospace; font-size: 16px; color: #000000; margin: 0; padding: 0; line-height: 1.2; transform: skew(-1deg, 0deg); display: block;">
|
||||||
|
███████╗ █████╗ ███████╗██╗ ██╗ ██╗ ██╗██╗██████╗ ███████╗
|
||||||
|
██╔════╝██╔══██╗██╔════╝╚██╗ ██╔╝ ██║ ██║██║██╔══██╗██╔════╝
|
||||||
|
█████╗ ███████║███████╗ ╚████╔╝ ██║ ██║██║██████╔╝█████╗
|
||||||
|
██╔══╝ ██╔══██║╚════██║ ╚██╔╝ ╚██╗ ██╔╝██║██╔══██╗██╔══╝
|
||||||
|
███████╗██║ ██║███████║ ██║ ╚████╔╝ ██║██████╔╝███████╗
|
||||||
|
╚══════╝╚═╝ ╚═╝╚══════╝ ╚═╝ ╚═══╝ ╚═╝╚═════╝ ╚══════╝</pre>
|
||||||
|
|
||||||
|
# Easy-Vibe: Learn Vibe Coding from 0 to 1
|
||||||
|
|
||||||
|
### *من الصفر، تعلم قائم على المشاريع، بناء أول منتج ذكاء اصطناعي لك*
|
||||||
|
|
||||||
|
<p align="center">
|
||||||
|
📌 <a href="https://datawhalechina.github.io/easy-vibe/">ابدأ القراءة أونلاين (Start Reading Online)</a>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p align="center">
|
||||||
|
<a href="https://datawhalechina.github.io/easy-vibe/">اقرأ أونلاين</a> ·
|
||||||
|
<a href="#-تنقل-المحتوى">خريطة التعلم</a> ·
|
||||||
|
<a href="#contact">المجتمع</a>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p align="center">
|
||||||
|
<a href="https://github.com/datawhalechina/easy-vibe/stargazers" target="_blank">
|
||||||
|
<img src="https://img.shields.io/github/stars/datawhalechina/easy-vibe?color=660874&style=for-the-badge&logo=star&logoColor=white&labelColor=1a1a2e" alt="Stars"></a>
|
||||||
|
<a href="https://github.com/datawhalechina/easy-vibe/network/members" target="_blank">
|
||||||
|
<img src="https://img.shields.io/github/forks/datawhalechina/easy-vibe?color=660874&style=for-the-badge&logo=git-fork&logoColor=white&labelColor=1a1a2e" alt="Forks"></a>
|
||||||
|
<a href="LICENSE" target="_blank">
|
||||||
|
<img src="https://img.shields.io/badge/License-CC_BY_NC_SA_4.0-4ecdc4?style=for-the-badge&logo=creative-commons&logoColor=white&labelColor=1a1a2e" alt="License"></a>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p align="center">
|
||||||
|
<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>
|
||||||
|
<a href="../ko-KR/README.md"><img alt="한국어" src="https://img.shields.io/badge/한국어-d9d9d9"></a>
|
||||||
|
<a href="./README.md"><img alt="العربية" src="https://img.shields.io/badge/العربية-d9d9d9"></a>
|
||||||
|
<a href="../vi-VN/README.md"><img alt="Tiếng_Việt" src="https://img.shields.io/badge/Tiếng_Việt-d9d9d9"></a>
|
||||||
|
<a href="../de-DE/README.md"><img alt="Deutsch" src="https://img.shields.io/badge/Deutsch-d9d9d9"></a>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
## 🚀 مقدمة المشروع
|
||||||
|
|
||||||
|
عندما تحاول كتابة الكود بالذكاء الاصطناعي، وتواجه أخطاء مستمرة، وتريد الاستسلام غالبًا، ومن غير الواضح كيفية نشر برامجك فعليًا على الإنترنت 😢
|
||||||
|
|
||||||
|
هذا البرنامج التعليمي مصمم خصيصًا ليأخذك من 0 إلى 1، وإتقان تقنيات Vibe Coding تدريجيًا:
|
||||||
|
|
||||||
|
- **المرحلة 0**: **دخول سريع من خلال الألعاب المصغرة** لاكتساب مهارات Vibe Coding
|
||||||
|
- **المرحلة 1**: من منظور مدير المنتج، **مهارات Vibe Coding وفهم الأعمال**، تنفيذ نموذج أولي لتطبيق الويب
|
||||||
|
- **المرحلة 2**: تعلم **تطوير الواجهة الأمامية/الخلفية وقدرات الذكاء الاصطناعي** المتعلقة بتقنيات Vibe Coding، إكمال تطبيق كامل
|
||||||
|
- **المرحلة 3**: إتقان بناء **التطبيقات المعقدة متعددة المنصات**، نحو تطبيقات مستوى الإنتاج
|
||||||
|
|
||||||
|
نؤمن بأن من خلال إتقان Vibe Coding ودمجه مع التدريب المنهجي، يمكن لشخص واحد أن يصبح مطورًا يجمع بين تطوير الواجهة الأمامية، وتطوير الواجهة الخلفية، ودمج قدرات الذكاء الاصطناعي، وتصميم المنتجات.
|
||||||
|
|
||||||
|
> **هذا المشروع موجه بشكل رئيسي إلى ثلاثة أنواع من المتعلمين:**
|
||||||
|
>
|
||||||
|
> - **المبتدئون (أشخاص عاديون / المنتج والعمليات)**: مساعدة المتعلمين غير التقنيين على فهم المفاهيم الرئيسية وإكمال أول نموذج أولي للمنتج
|
||||||
|
> - **المطورون مستوى المبتدئ-المتوسط (الطلاب والمطورون مع أساس معين)**: إتقان معرفة Vibe Coding للواجهة الأمامية/الخلفية وقدرات الذكاء الاصطناعي
|
||||||
|
> - **المطورون المتقدمون (الشركات والشركات الناشئة، مفتوحة المصدر والمطورون المستقلون)**: تقنيات التطوير المتقدمة، التطوير متعدد المنصات
|
||||||
|
|
||||||
|
### 📖 تنقل المحتوى
|
||||||
|
|
||||||
|
<div align="center">
|
||||||
|
<img src="../assets/readme-image1.png" alt="Learning Map" width="100%" style="border-radius: 10px; box-shadow: 0 8px 20px rgba(45,55,72,0.3); margin: 15px 0;"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
### الملحق العام
|
||||||
|
|
||||||
|
[قاموس قدرات الذكاء الاصطناعي: المفاهيم الأساسية الشائعة للذكاء الاصطناعي والمصطلحات والشروحات السيناريوية](docs/appendix/ai-capability-dictionary.md)
|
||||||
|
|
||||||
|
### 0. الروضة
|
||||||
|
|
||||||
|
| الفصل | المحتوى الرئيسي | الحالة |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| [المقدمة: خريطة التعلم](docs/stage-0/0.1-learning-map/index.md) | دليل مسار التعلم الشامل | ✅ |
|
||||||
|
| [المبتدئ 1: عصر الذكاء الاصطناعي، إذا كنت تستطيع التحدث يمكنك البرمجة](docs/stage-0/0.2-ai-capabilities-through-games/index.md) | تجربة قدرات البرمجة بالذكاء الاصطناعي لأول مرة من خلال حالات مثل Snake | ✅ |
|
||||||
|
|
||||||
|
### 1. مدير منتج الذكاء الاصطناعي
|
||||||
|
|
||||||
|
| الفصل | المحتوى الرئيسي | الحالة |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| [المبتدئ 2: معرفة أدوات IDE الذكاء الاصطناعي](docs/stage-1/1.1-introduction-to-ai-ide/index.md) | تعلم استخدام IDE، إنشاء ألعاب مصغرة محليًا | ✅ |
|
||||||
|
| [المبتدئ 3: بناء نموذج أولي بنفسك](docs/stage-1/1.2-building-prototype/index.md) | تحليل المتطلبات، توليد صفحة واحدة بالذكاء الاصطناعي، حتى توليد نماذج منتجات متعددة الصفحات | ✅ |
|
||||||
|
| [المبتدئ 4: إضافة قدرات الذكاء الاصطناعي إلى النموذج الأولي](docs/stage-1/1.3-integrating-ai-capabilities/index.md) | تعلم توصيل القدرات الشائعة للذكاء الاصطناعي (النص، الصورة، الفيديو) | ✅ |
|
||||||
|
| [المبتدئ 5: مشروع كامل عملي](docs/stage-1/1.4-complete-project-practice/index.md) | محاكاة سيناريوهات حقيقية، قبول ملاحظات المستخدمين للتحسين، إكمال المشروع | ✅ |
|
||||||
|
| [المشروع الكبير: إنشاء نموذج أولي كامل لتطبيق الويب وعرضه](docs/stage-1/1.5-final-project/index.md) | تنفيذ التطبيق بالكامل، عرض آثار التطبيق | ✅ |
|
||||||
|
|
||||||
|
#### الملاحق
|
||||||
|
|
||||||
|
| الفصل | المحتوى الرئيسي | الحالة |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| [الملحق A: مكمل تفكير المنتج](docs/stage-1/appendix-a-product-thinking/index.md) | أطر التفكير اللازمة لبناء منتج من الصفر إلى واحد | ✅ |
|
||||||
|
| [الملحق B: الأخطاء الشائعة والحلول](docs/stage-1/appendix-b-common-errors/index.md) | الأخطاء الشائعة في Vibe Coding وطرق استكشاف الأخطاء | ✅ |
|
||||||
|
|
||||||
|
### 2. مهندس تطوير مستوى المبتدئ-المتوسط
|
||||||
|
|
||||||
|
#### قسم الواجهة الأمامية
|
||||||
|
|
||||||
|
| الفصل | المحتوى الرئيسي | الحالة |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| [الواجهة الأمامية 0: استخدام lovart لتوليد الأصول](docs/stage-2/frontend/2.0-lovart-assets/) | استخدام lovart لتوليد الأصول المرئية مثل الشخصيات والمشاهد دفعة واحدة، توفير أساس الأصول لتصميم الواجهة وتطوير الواجهة الأمامية | 🚧 |
|
||||||
|
| [الواجهة الأمامية 1: مقدمة إلى Figma و MasterGo](docs/stage-2/frontend/2.1-figma-mastergo/) | استخدام أدوات التصميم لتنظيم هيكل المعلومات وهيكل الصفحة، وإعداد الأساس لتنفيذ الواجهة الأمامية | 🚧 |
|
||||||
|
| [الواجهة الأمامية 2: بناء أول تطبيق حديث - تصميم الواجهة](docs/stage-2/frontend/2.2-ui-design/) | إكمال واجهة قائمة على المكونات بناءً على التصاميم، تحقيق المسار الأول من التصميم إلى الكود | 🚧 |
|
||||||
|
| [الواجهة الأمامية 3: مرجع مواصفات تصميم الواجهة وتصميم واجهة متعدد المنتجات](docs/stage-2/frontend/2.3-multi-product-ui/) | توسيع واجهات متعددة المنتجات حول بصري رئيسي موحد، ممارسة قدرات التصميم المنهجي | 🚧 |
|
||||||
|
| [الواجهة الأمامية 4: لنصنع صور هوجورتس معًا](docs/stage-2/frontend/2.4-hogwarts-portraits/chapter4-lets-build-hogwarts-portraits.md) | إنشاء تطبيق واجهة أمامية بقدرات ذكاء اصطناعي مدمجة من 0 إلى 1، ربط التصميم والتطوير | ✅ |
|
||||||
|
|
||||||
|
#### قسم الواجهة الخلفية والكامل
|
||||||
|
|
||||||
|
| الفصل | المحتوى الرئيسي | الحالة |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| [الواجهة الخلفية 1: ما هي API](docs/stage-2/backend/2.1-what-is-api/extra2/extra2-what-is-api.md) | فهم واجهات HTTP ونماذج الطلب-الاستجابة، الاستعداد للتكامل الخلفي والتنسيق | ✅ |
|
||||||
|
| [الواجهة الخلفية 2: من قواعد البيانات إلى Supabase](docs/stage-2/backend/2.2-database-supabase/chapter5/chapter5-from-database-to-supabase.md) : تنفيذ قواعد البيانات وواجهات API على Supabase، ربط نماذج البيانات بصفحات الواجهة الأمامية | ✅ |
|
||||||
|
| [الواجهة الخلفية 3: LLM المساعدة في كتابة كود الواجهة والتوثيق](docs/stage-2/backend/2.3-ai-interface-code/) : استخدام LLM للمساعدة في توليد التوثيق والكود للواجهات وقواعد البيانات، تحقيق خلفي قابل للقراءة والاختبار | 🚧 |
|
||||||
|
| [الواجهة الخلفية 4: سير عمل Git](docs/stage-2/backend/2.4-git-workflow/extra1/extra1-what-is-git-and-what-is-github.md) : إدارة الكود في سير عمل Git، إجراء التحكم في الإصدار والتعاون | ✅ |
|
||||||
|
| [الواجهة الخلفية 5: نشر Zeabur](docs/stage-2/backend/2.5-zeabur-deployment/extra6/extra6-zeabur-what-is-it-and-how-to-deploy-web-applications.md) : نشر التطبيق على Zeabur لجعله أونلاين | ✅ |
|
||||||
|
| [الواجهة الخلفية 6: أدوات تطوير CLI حديثة](docs/stage-2/backend/2.6-modern-cli/extra7/extra7-cli-ai-coding-tools-and-the-principles-of-test-driven-development.md) : استخدام أدوات برمجة الذكاء الاصطناعي من نوع CLI لتسريع التطوير وتصحيح الأخطاء، تشكيل سير عمل هندسي شخصي | ✅ |
|
||||||
|
| [الواجهة الخلفية 7: كيفية دمج أنظمة الدفع مثل Stripe](docs/stage-2/backend/2.7-stripe-payment/) : توصيل أنظمة الدفع، إكمال تدفق الدفع وعملية التسوية الأساسية | 🚧 |
|
||||||
|
| [المشروع الكبير 1: بناء أول تطبيق حديث - تطبيق كامل](docs/stage-2/assignments/2.1-fullstack-app/) : دمج الواجهة الأمامية والواجهة الخلفية ووحدات الدفع، إكمال تطبيق ويب كامل جاهز للإنتاج | 🚧 |
|
||||||
|
| [المشروع الكبير 2: مكتبة مكونات الواجهة الأمامية الحديثة + Trae عملية](docs/stage-2/assignments/2.2-modern-frontend-trae/) : استخدام مكتبة مكونات الواجهة الأمامية الحديثة و Trae، إكمال منتج بشكل مستقل مع تسجيل/دعم الدفع | 🚧 |
|
||||||
|
|
||||||
|
#### ملحق قدرات الذكاء الاصطناعي
|
||||||
|
|
||||||
|
| الفصل | المحتوى الرئيسي | الحالة |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| [الذكاء الاصطناعي 1: مقدمة إلى Dify ودمج قاعدة المعرفة](docs/stage-2/ai-capabilities/2.1-dify-knowledge-base/chapter3/chapter3-getting-started-with-dify-and-its-knowledge-base-integration.md) : استخدام Dify Workflow و RAG الأساسي لبناء منتجات نوع الأدوات، إنشاء مثال لترقيات التطبيقات المستقبلية | ✅ |
|
||||||
|
| [الذكاء الاصطناعي 2: تعلم البحث في قاموس الذكاء الاصطناعي ودمج واجهات API متعددة الوسائط](docs/stage-2/ai-capabilities/2.2-multimodal-api/extra3/extra3-ai-capability-starter-handbook.md) : تعلم البحث عن نماذج وواجهات API مناسبة، دمج القدرات متعددة الوسائط مثل النص والصورة في المنتجات | 🚧 |
|
||||||
|
|
||||||
|
### 3. مهندس تطوير متقدم
|
||||||
|
|
||||||
|
| الفصل | المحتوى الرئيسي | الحالة |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| [المتقدم 1: MCP ومهارات ClaudeCode](docs/stage-3/core-skills/3.1-mcp-claudecode-skills/) : توسيع قدرات IDE من خلال MCP والمهارات، توصيل الخدمات الخارجية كأدوات | 🚧 |
|
||||||
|
| [المتقدم 2: كيفية جعل Coding Tools تعمل لفترة طويلة](docs/stage-3/core-skills/3.2-long-running-tasks/) : تصميم وتكوين المهام طويلة التشغيل، جعل Coding Tools أكثر استقرارًا وموثوقية | 🚧 |
|
||||||
|
| [المتقدم 3: التطوير متعدد المنصات: كيفية بناء برامج WeChat المصغرة](docs/stage-3/cross-platform/3.3-wechat-miniprogram/) : فهم نظام البرامج المصغرة WeChat، إكمال برنامج مصغر للواجهة الأمامية من القالب الرسمي إلى الإطلاق | ✅ |
|
||||||
|
| [المتقدم 4: التطوير متعدد المنصات: كيفية بناء برامج WeChat المصغرة - بما في ذلك الخلفية](docs/stage-3/cross-platform/3.4-wechat-miniprogram-backend/) : دمج قاعدة البيانات ومنطق الواجهة الخلفية في البرامج المصغرة، تحقيق دورة نشاط كاملة | 🚧 |
|
||||||
|
| [المتقدم 5: التطوير متعدد المنصات: كيفية بناء تطبيقات Android](docs/stage-3/cross-platform/3.5-android-app/) : استخدام أدوات مثل Expo، إكمال تطوير تطبيقات Android المتكاملة للويب/الأصلي | 🚧 |
|
||||||
|
| [المتقدم 6: التطوير متعدد المنصات: كيفية بناء تطبيقات iOS](docs/stage-3/cross-platform/3.6-ios-app/) : استخدام أدوات مثل Expo، إكمال تطوير تطبيقات iOS المتكاملة للويب/الأصلي | 🚧 |
|
||||||
|
| [المتقدم 7: كيفية بناء موقعك الشخصي ومブログ الأكاديمي](docs/stage-3/personal-brand/3.7-personal-website-blog/) : من الاختيار، البناء إلى النشر، بناء صفحة رئيسية أونلاين طويلة الأجل تعرض المشاريع الشخصية والنتائج الأكاديمية | 🚧 |
|
||||||
|
|
||||||
|
#### ملحق قدرات الذكاء الاصطناعي
|
||||||
|
|
||||||
|
| الفصل | المحتوى الرئيسي | الحالة |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| [الذكاء الاصطناعي المتقدم 1: ما هو RAG وكيف يعمل](docs/stage-3/ai-advanced/3.a1-rag-introduction/extra5-what-is-rag-and-how-does-it-work-and-future.md) : الفهم المنهجي لمبادئ RAG والهياكل الشائعة، توفير أساس استرجاع المعرفة للتطبيقات المعقدة | ✅ |
|
||||||
|
| [الذكاء الاصطناعي المتقدم 2: RAG متوسط-متقدم وتنظيف سير العمل: مثال LangGraph](docs/stage-3/ai-advanced/3.a2-langgraph-advanced-rag/) : استخدام أدوات مثل LangGraph لتصميم سير العمل متعدد الخطوات وأنظمة RAG متوسطة-متقدمة | 🚧 |
|
||||||
|
|
||||||
|
## 🛠️ كيفية التعلم
|
||||||
|
|
||||||
|
- وفقًا لقدراتك الشخصية، اقرأ ومارس الفصول ذات الصلة بشكل انتقائي، إذا كان لديك أسئلة اطرحها في Issues.
|
||||||
|
|
||||||
|
## 💻 بدء هذا الدرس محليًا
|
||||||
|
|
||||||
|
### الطريقة الحديثة
|
||||||
|
|
||||||
|
في مربع حوار IDE الذكاء الاصطناعي (vscode، cursor، trae، etc.)، أدخل الموجه التالي لبدء هذا الدرس:
|
||||||
|
|
||||||
|
```
|
||||||
|
الرجاء مساعدتي في تشغيل الخدمة المحلية لهذا المشروع
|
||||||
|
```
|
||||||
|
|
||||||
|
### الطريقة القديمة
|
||||||
|
|
||||||
|
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/sanbuphy) (عضو Datawhale)
|
||||||
|
- Fang Ke-المعلم Tutor (عضو Datawhale، جامعة تسينغهوا)
|
||||||
|
- [Yerim Kang](https://github.com/yerim25)（جزء المشاريع العملية-جامعة تسينغهوا）
|
||||||
|
- Zhao Zhilin（جزء المشاريع العملية-جامعة تسينغهوا）
|
||||||
|
- [Li Yixuan](https://yixuan20.github.io/)（تصميم الفن الصفحة-جامعة تسينغهوا）
|
||||||
|
- جميع الزملاء في مجموعة اختبار بيتا AI Vibe Coding 101 الذين قدموا اقتراحات وخبرة
|
||||||
|
|
||||||
|
### شكر خاص
|
||||||
|
|
||||||
|
- شكرًا لـ [@Sm1les](https://github.com/Sm1les) على مساعدتهم ودعمهم لهذا المشروع
|
||||||
|
- شكرًا لجميع المطورين الذين ساهموا في هذا المشروع ❤️
|
||||||
|
|
||||||
|
<div align=center style="margin-top: 30px;">
|
||||||
|
<a href="https://github.com/datawhalechina/easy-vibe/graphs/contributors">
|
||||||
|
<img src="https://contrib.rocks/image?repo=datawhalechina/easy-vibe" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
## <span id="contact">📧 اتصل بنا</span>
|
||||||
|
|
||||||
|
<div align=center>
|
||||||
|
<p>إذا كان لديك أسئلة أو اقتراحات أو شكاوى، أو ترغب في التواصل، يرجى مسح رمز QR أدناه</p>
|
||||||
|
<img src="../assets/wechat.png" width="280">
|
||||||
|
|
||||||
|
<pامسح رمز QR أدناه لمتابعة الحساب الرسمي: Datawhale</p>
|
||||||
|
<img src="https://raw.githubusercontent.com/datawhalechina/pumpkin-book/master/res/qrcode.jpeg" width="180" height="180">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
## 📄 الترخيص
|
||||||
|
|
||||||
|
<div align="center">
|
||||||
|
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">
|
||||||
|
<img
|
||||||
|
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/">
|
||||||
|
المشاع الإبداعي Attribution - غير تجاري - المشاركة بالمثل 4.0 الدولي
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
## Star History
|
||||||
|
|
||||||
|
[](https://www.star-history.com/#datawhalechina/easy-vibe&type=date&legend=top-left)
|
||||||
@@ -0,0 +1,230 @@
|
|||||||
|
<!-- trigger vercel build -->
|
||||||
|
<div align="center">
|
||||||
|
|
||||||
|
<pre style="font-family: 'Courier New', monospace; font-size: 16px; color: #000000; margin: 0; padding: 0; line-height: 1.2; transform: skew(-1deg, 0deg); display: block;">
|
||||||
|
███████╗ █████╗ ███████╗██╗ ██╗ ██╗ ██╗██╗██████╗ ███████╗
|
||||||
|
██╔════╝██╔══██╗██╔════╝╚██╗ ██╔╝ ██║ ██║██║██╔══██╗██╔════╝
|
||||||
|
█████╗ ███████║███████╗ ╚████╔╝ ██║ ██║██║██████╔╝█████╗
|
||||||
|
██╔══╝ ██╔══██║╚════██║ ╚██╔╝ ╚██╗ ██╔╝██║██╔══██╗██╔══╝
|
||||||
|
███████╗██║ ██║███████║ ██║ ╚████╔╝ ██║██████╔╝███████╗
|
||||||
|
╚══════╝╚═╝ ╚═╝╚══════╝ ╚═╝ ╚═══╝ ╚═╝╚═════╝ ╚══════╝</pre>
|
||||||
|
|
||||||
|
# Easy-Vibe: Learn Vibe Coding from 0 to 1
|
||||||
|
|
||||||
|
### *Von Null, projektbasiertes Lernen, dein erstes KI-Produkt bauen*
|
||||||
|
|
||||||
|
<p align="center">
|
||||||
|
📌 <a href="https://datawhalechina.github.io/easy-vibe/">Online lesen starten (Start Reading Online)</a>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p align="center">
|
||||||
|
<a href="https://datawhalechina.github.io/easy-vibe/">Online lesen</a> ·
|
||||||
|
<a href="#-inhaltsnavigation">Lernkarte</a> ·
|
||||||
|
<a href="#contact">Community</a>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p align="center">
|
||||||
|
<a href="https://github.com/datawhalechina/easy-vibe/stargazers" target="_blank">
|
||||||
|
<img src="https://img.shields.io/github/stars/datawhalechina/easy-vibe?color=660874&style=for-the-badge&logo=star&logoColor=white&labelColor=1a1a2e" alt="Stars"></a>
|
||||||
|
<a href="https://github.com/datawhalechina/easy-vibe/network/members" target="_blank">
|
||||||
|
<img src="https://img.shields.io/github/forks/datawhalechina/easy-vibe?color=660874&style=for-the-badge&logo=git-fork&logoColor=white&labelColor=1a1a2e" alt="Forks"></a>
|
||||||
|
<a href="LICENSE" target="_blank">
|
||||||
|
<img src="https://img.shields.io/badge/License-CC_BY_NC_SA_4.0-4ecdc4?style=for-the-badge&logo=creative-commons&logoColor=white&labelColor=1a1a2e" alt="License"></a>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p align="center">
|
||||||
|
<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>
|
||||||
|
<a href="../ko-KR/README.md"><img alt="한국어" src="https://img.shields.io/badge/한국어-d9d9d9"></a>
|
||||||
|
<a href="../ar-SA/README.md"><img alt="العربية" src="https://img.shields.io/badge/العربية-d9d9d9"></a>
|
||||||
|
<a href="../vi-VN/README.md"><img alt="Tiếng_Việt" src="https://img.shields.io/badge/Tiếng_Việt-d9d9d9"></a>
|
||||||
|
<a href="./README.md"><img alt="Deutsch" src="https://img.shields.io/badge/Deutsch-d9d9d9"></a>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
## 🚀 Projektvorstellung
|
||||||
|
|
||||||
|
Wenn du versuchst, mit KI Code zu schreiben, ständig auf Fehler stößt, oft aufgeben möchtest und unklar ist, wie man Programme tatsächlich online bringt 😢.
|
||||||
|
|
||||||
|
Dieses Tutorial ist speziell dafür konzipiert, dich von 0 auf 1 zu bringen und Vibe Coding-Techniken schrittweise zu meistern:
|
||||||
|
|
||||||
|
- **Stufe 0**: **Schneller Einstieg über Mini-Spiele** zum Erwerb von Vibe Coding-Fähigkeiten
|
||||||
|
- **Stufe 1**: Aus der Perspektive eines Product Managers, **Vibe Coding-Fähigkeiten und Geschäftsverständnis**, Implementierung eines Web-App-Prototyps
|
||||||
|
- **Stufe 2**: Lernen von **Frontend/Backend-Entwicklung und KI-Fähigkeiten** im Zusammenhang mit Vibe Coding-Techniken, Vervollständigung einer kompletten Anwendung
|
||||||
|
- **Stufe 3**: Beherrschung des Baus von **plattformübergreifenden komplexen Anwendungen**, hin zu produktionsreifen Anwendungen
|
||||||
|
|
||||||
|
Wir glauben, dass durch die Beherrschung von Vibe Coding in Kombination mit systematischem Training eine einzelne Person zu einem Entwickler werden kann, der Frontend-Entwicklung, Backend-Entwicklung, Integration von KI-Fähigkeiten und Produktdesign vereint.
|
||||||
|
|
||||||
|
> **Dieses Projekt richtet sich hauptsächlich an drei Arten von Lernenden:**
|
||||||
|
>
|
||||||
|
> - **Anfänger (normale Menschen / Produkt und Betrieb)**: Nicht-technische Lernende helfen, Schlüsselkonzepte zu verstehen und ihren ersten Produktprototyp zu completed
|
||||||
|
> - **Entwickler auf Anfänger-Fortgeschrittenen-Niveau (Studenten und Entwickler mit gewisser Grundlage)**: Beherrschung von Vibe Coding Frontend/Backend und KI-Fähigkeitswissen
|
||||||
|
> - **Fortgeschrittene Entwickler (Unternehmen und Startups, Open Source und unabhängige Entwickler)**: Fortgeschrittene Entwicklungstechniken, plattformübergreifende Entwicklung
|
||||||
|
|
||||||
|
### 📖 Inhaltsnavigation
|
||||||
|
|
||||||
|
<div align="center">
|
||||||
|
<img src="../assets/readme-image1.png" alt="Learning Map" width="100%" style="border-radius: 10px; box-shadow: 0 8px 20px rgba(45,55,72,0.3); margin: 15px 0;"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
### Gesamtanhang
|
||||||
|
|
||||||
|
[KI-Fähigkeitslexikon: gängige KI-Kernkonzepte und Begriffe, Szenario-Erklärungen](docs/appendix/ai-capability-dictionary.md)
|
||||||
|
|
||||||
|
### 0. Kindergarten
|
||||||
|
|
||||||
|
| Kapitel | Schlüsselinhalt | Status |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| [Vorwort: Lernkarte](docs/stage-0/0.1-learning-map/index.md) | Gesamtführung durch den Lernpfad | ✅ |
|
||||||
|
| [Anfänger 1: KI-Zeitalter, wenn du sprechen kannst, kannst du programmieren](docs/stage-0/0.2-ai-capabilities-through-games/index.md) | Erste Erfahrung mit KI-Programmierfähigkeiten durch Fälle wie Snake | ✅ |
|
||||||
|
|
||||||
|
### 1. KI-Produktmanager
|
||||||
|
|
||||||
|
| Kapitel | Schlüsselinhalt | Status |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| [Anfänger 2: KI-IDE-Tools kennenlernen](docs/stage-1/1.1-introduction-to-ai-ide/index.md) | IDE-Nutzung lernen, lokal Mini-Spiele erstellen | ✅ |
|
||||||
|
| [Anfänger 3: Einen Prototyp selbst bauen](docs/stage-1/1.2-building-prototype/index.md) | Anforderungsanalyse, KI-generierte Einzelseite, bis zu Generierung von Mehrseiten-Produktprototypen | ✅ |
|
||||||
|
| [Anfänger 4: KI-Fähigkeiten zum Prototyp hinzufügen](docs/stage-1/1.3-integrating-ai-capabilities/index.md) | Verbindung gängiger KI-Fähigkeiten (Text, Bild, Video) lernen | ✅ |
|
||||||
|
| [Anfänger 5: Komplettes Projektpraxis](docs/stage-1/1.4-complete-project-practice/index.md) | Reale Szenarien simulieren, Benutzerfeedback zur Iteration akzeptieren, Projekt completed | ✅ |
|
||||||
|
| [Großes Projekt: Einen kompletten Web-App-Prototyp erstellen und präsentieren](docs/stage-1/1.5-final-project/index.md) | Anwendung vollständig implementieren, Anwendungseffekte präsentieren | ✅ |
|
||||||
|
|
||||||
|
#### Anhänge
|
||||||
|
|
||||||
|
| Kapitel | Schlüsselinhalt | Status |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| [Anhang A: Produktdenken-Ergänzung](docs/stage-1/appendix-a-product-thinking/index.md) | Denkrahmen, die für die Erstellung eines Produkts von Null auf Eins erforderlich sind | ✅ |
|
||||||
|
| [Anhang B: Häufige Fehler und Lösungen](docs/stage-1/appendix-b-common-errors/index.md) | Häufige Fehler in Vibe Coding und Methoden zur Fehlerbehebung | ✅ |
|
||||||
|
|
||||||
|
### 2. Entwicklungsingenieur auf Anfänger-Fortgeschrittenen-Niveau
|
||||||
|
|
||||||
|
#### Frontend-Teil
|
||||||
|
|
||||||
|
| Kapitel | Schlüsselinhalt | Status |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| [Frontend 0: lovart für Asset-Generierung verwenden](docs/stage-2/frontend/2.0-lovart-assets/) | lovart für Batch-Generierung von visuellen Assets wie Charakteren und Szenen verwenden, Bereitstellung von Asset-Basis für UI-Design und Frontend-Entwicklung | 🚧 |
|
||||||
|
| [Frontend 1: Einführung in Figma und MasterGo](docs/stage-2/frontend/2.1-figma-mastergo/) | Design-Tools zur Organisation der Informationsarchitektur und Seitenstruktur verwenden, Basis für Frontend-Implementierung schaffen | 🚧 |
|
||||||
|
| [Frontend 2: Erste moderne Anwendung erstellen - UI-Design](docs/stage-2/frontend/2.2-ui-design/) | Komponentenbasierte Schnittstelle basierend auf Entwürfen completed, erste Route von Design zu Code realisieren | 🚧 |
|
||||||
|
| [Frontend 3: UI-Design-Spezifikationen und Multi-Produkt-UI-Design referenzieren](docs/stage-2/frontend/2.3-multi-product-ui/) | Multi-Produkt-Schnittstellen um ein einheitliches Hauptvisuelles erweitern, systematische Designfähigkeiten üben | 🚧 |
|
||||||
|
| [Frontend 4: Gemeinsam Hogwarts-Porträts erstellen](docs/stage-2/frontend/2.4-hogwarts-portraits/chapter4-lets-build-hogwarts-portraits.md) | Frontend-Anwendung mit integrierten KI-Fähigkeiten von 0 auf 1 erstellen, Design und Entwicklung verbinden | ✅ |
|
||||||
|
|
||||||
|
#### Backend- und Full-Stack-Teil
|
||||||
|
|
||||||
|
| Kapitel | Schlüsselinhalt | Status |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| [Backend 1: Was ist eine API](docs/stage-2/backend/2.1-what-is-api/extra2/extra2-what-is-api.md) | HTTP-Schnittstellen und Request-Response-Modelle verstehen, Vorbereitung auf Backend-Integration und Abstimmung | ✅ |
|
||||||
|
| [Backend 2: Von Datenbanken zu Supabase](docs/stage-2/backend/2.2-database-supabase/chapter5/chapter5-from-database-to-supabase.md) : Datenbanken und APIs auf Supabase implementieren, Datenmodelle mit Frontend-Seiten verbinden | ✅ |
|
||||||
|
| [Backend 3: LLM-unterstützte Schnittstellen- und Dokumentationscodierung](docs/stage-2/backend/2.3-ai-interface-code/) : LLM zur Unterstützung bei der Generierung von Dokumentation und Code für Schnittstellen und Datenbanken verwenden, lesbaren und testbaren Backend realisieren | 🚧 |
|
||||||
|
| [Backend 4: Git-Workflow](docs/stage-2/backend/2.4-git-workflow/extra1/extra1-what-is-git-and-what-is-github.md) : Code in Git-Workflow verwalten, Versionskontrolle und Zusammenarbeit durchführen | ✅ |
|
||||||
|
| [Backend 5: Zeabur-Bereitstellung](docs/stage-2/backend/2.5-zeabur-deployment/extra6/extra6-zeabur-what-is-it-and-how-to-deploy-web-applications.md) : Anwendung auf Zeabur bereitstellen, um online zu gehen | ✅ |
|
||||||
|
| [Backend 6: Moderne CLI-Entwicklungstools](docs/stage-2/backend/2.6-modern-cli/extra7/extra7-cli-ai-coding-tools-and-the-principles-of-test-driven-development.md) : KI-Programmierertools vom Typ CLI verwenden, um Entwicklung und Debugging zu beschleunigen, persönlichen Engineering-Workflow bilden | ✅ |
|
||||||
|
| [Backend 7: Zahlungssysteme wie Stripe integrieren](docs/stage-2/backend/2.7-stripe-payment/) : Zahlungssysteme anschließen, Zahlungsablauf und grundlegenden Abrechnungsprozess completed | 🚧 |
|
||||||
|
| [Großes Projekt 1: Erste moderne Anwendung erstellen - Full-Stack-App](docs/stage-2/assignments/2.1-fullstack-app/) : Frontend, Backend und Zahlungsmodule integrieren, produktionsreife Full-Stack-Web-Anwendung completed | 🚧 |
|
||||||
|
| [Großes Projekt 2: Moderne Frontend-Komponentenbibliothek + Trae-Praxis](docs/stage-2/assignments/2.2-modern-frontend-trae/) : Moderne Frontend-Komponentenbibliothek und Trae verwenden, unabhängig ein Produkt mit Anmeldung/Registrierung und Zahlungsunterstützung completed | 🚧 |
|
||||||
|
|
||||||
|
#### KI-Fähigkeiten-Anhang
|
||||||
|
|
||||||
|
| Kapitel | Schlüsselinhalt | Status |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| [KI 1: Einführung in Dify und Wissensbasis-Integration](docs/stage-2/ai-capabilities/2.1-dify-knowledge-base/chapter3/chapter3-getting-started-with-dify-and-its-knowledge-base-integration.md) : Dify Workflow und grundlegendes RAG verwenden, um werkzeugartige Produkte zu erstellen, Beispiel für zukünftige Anwendungs-Upgrades erstellen | ✅ |
|
||||||
|
| [KI 2: KI-Lexikon abfragen und multimodale APIs integrieren lernen](docs/stage-2/ai-capabilities/2.2-multimodal-api/extra3/extra3-ai-capability-starter-handbook.md) : Lernen, geeignete Modelle und APIs zu finden, multimodale Fähigkeiten wie Text und Bild in Produkte integrieren | 🚧 |
|
||||||
|
|
||||||
|
### 3. Fortgeschrittener Entwicklungsingenieur
|
||||||
|
|
||||||
|
| Kapitel | Schlüsselinhalt | Status |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| [Fortgeschritten 1: MCP und ClaudeCode Skills](docs/stage-3/core-skills/3.1-mcp-claudecode-skills/) : IDE-Fähigkeiten durch MCP und Skills erweitern, externe Dienste als Tools anschließen | 🚧 |
|
||||||
|
| [Fortgeschritten 2: Coding Tools lange laufen lassen](docs/stage-3/core-skills/3.2-long-running-tasks/) : Lang laufende Aufgaben entwerfen und konfigurieren, Coding Tools stabiler und zuverlässiger machen | 🚧 |
|
||||||
|
| [Fortgeschritten 3: Plattformübergreifende Entwicklung: WeChat-Miniprogramme erstellen](docs/stage-3/cross-platform/3.3-wechat-miniprogram/) : WeChat-Miniprogramm-Ökosystem verstehen, Frontend-Miniprogramm von offizieller Vorlage bis zum Start completed | ✅ |
|
||||||
|
| [Fortgeschritten 4: Plattformübergreifende Entwicklung: WeChat-Miniprogramme erstellen - Mit Backend](docs/stage-3/cross-platform/3.4-wechat-miniprogram-backend/) : Datenbank und Backend-Logik in Miniprogramme integrieren, vollständigen Geschäftskreislauf realisieren | 🚧 |
|
||||||
|
| [Fortgeschritten 5: Plattformübergreifende Entwicklung: Android-Anwendungen erstellen](docs/stage-3/cross-platform/3.5-android-app/) : Tools wie Expo verwenden, Web/native-integrierte Android-Anwendungsentwicklung completed | 🚧 |
|
||||||
|
| [Fortgeschritten 6: Plattformübergreifende Entwicklung: iOS-Anwendungen erstellen](docs/stage-3/cross-platform/3.6-ios-app/) : Tools wie Expo verwenden, Web/native-integrierte iOS-Anwendungsentwicklung completed | 🚧 |
|
||||||
|
| [Fortgeschritten 7: Eigene persönliche Website und akademischen Blog erstellen](docs/stage-3/personal-brand/3.7-personal-website-blog/) : Von Auswahl, Erstellung bis Bereitstellung, langfristige Online-Homepage erstellen, die persönliche Projekte und akademische Ergebnisse präsentiert | 🚧 |
|
||||||
|
|
||||||
|
#### KI-Fähigkeiten-Anhang
|
||||||
|
|
||||||
|
| Kapitel | Schlüsselinhalt | Status |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| [Fortgeschrittene KI 1: Was ist RAG und wie funktioniert es](docs/stage-3/ai-advanced/3.a1-rag-introduction/extra5-what-is-rag-and-how-does-it-work-and-future.md) : Systematisches Verständnis von RAG-Prinzipien und gängigen Architekturen, Wissensretrieval-Basis für komplexe Anwendungen bereitstellen | ✅ |
|
||||||
|
| [Fortgeschrittene KI 2: Mittel-fortgeschrittenes RAG und Workflow-Orchestrierung: LangGraph-Beispiel](docs/stage-3/ai-advanced/3.a2-langgraph-advanced-rag/) : Tools wie LangGraph verwenden, um mehrstufige Workflows und mittel-fortgeschrittene RAG-Systeme zu entwerfen | 🚧 |
|
||||||
|
|
||||||
|
## 🛠️ Lernmethode
|
||||||
|
|
||||||
|
- Entsprechend deiner persönlichen Fähigkeiten selektiv relevante Kapitel lesen und üben, bei Fragen in Issues stellen.
|
||||||
|
|
||||||
|
## 💻 Dieses Kurs lokal starten
|
||||||
|
|
||||||
|
### Moderne Methode
|
||||||
|
|
||||||
|
Gib im KI-IDE-Dialogfeld (vscode, cursor, trae etc.) den folgenden Prompt ein, um diesen Kurs zu starten:
|
||||||
|
|
||||||
|
```
|
||||||
|
Bitte hilf mir, den lokalen Service dieses Projekts auszuführen
|
||||||
|
```
|
||||||
|
|
||||||
|
### Alte Methode
|
||||||
|
|
||||||
|
1. npm install
|
||||||
|
2. npm run dev
|
||||||
|
3. Browser öffnen und `http://localhost:3000` besuchen.
|
||||||
|
|
||||||
|
## 🤝 Mitwirken
|
||||||
|
|
||||||
|
- Wenn du Probleme entdeckst oder denkst, dass es Möglichkeiten zur Verbesserung dieses Projekts gibt, kannst du eine Issue einreichen, um Feedback zu geben. Wenn nach Einreichung niemand antwortet, kannst du das [Betreuer-Team](https://github.com/datawhalechina/DOPMC/blob/main/OP.md) für Feedback und Nachverfolgung kontaktieren~
|
||||||
|
- Wenn du zu diesem Projekt beitragen möchtest, kannst du einen Pull Request einreichen, wenn nach Einreichung niemand antwortet, kannst du das [Betreuer-Team](https://github.com/datawhalechina/DOPMC/blob/main/OP.md) für Feedback und Nachverfolgung kontaktieren~
|
||||||
|
- Wenn du sehr an Datawhale interessiert bist und ein neues Projekt starten möchtest, folge bitte dem [Datawhale-Open-Source-Projekt-Leitfaden](https://github.com/datawhalechina/DOPMC/blob/main/GUIDE.md)~
|
||||||
|
|
||||||
|
## 🙏 Dank an jeden Beitragenden
|
||||||
|
|
||||||
|
- [散步-Projektleiter](https://github.com/sanbuphy) (Datawhale-Mitglied)
|
||||||
|
- Fang Ke-Betreuer (Datawhale-Mitglied, Tsinghua-Universität)
|
||||||
|
- [Yerim Kang](https://github.com/yerim25)（Praxisprojektteil-Tsinghua-Universität）
|
||||||
|
- Zhao Zhilin（Praxisprojektteil-Tsinghua-Universität）
|
||||||
|
- [Li Yixuan](https://yixuan20.github.io/)（Seiten-Kunst-Design-Tsinghua-Universität）
|
||||||
|
- Alle Kameraden der AI Vibe Coding 101-Beta-Testgruppe, die Vorschläge und Erfahrungen eingebracht haben
|
||||||
|
|
||||||
|
### Besonderer Dank
|
||||||
|
|
||||||
|
- Danke an [@Sm1les](https://github.com/Sm1les) für die Hilfe und Unterstützung bei diesem Projekt
|
||||||
|
- Danke an alle Entwickler, die zu diesem Projekt beigetragen haben ❤️
|
||||||
|
|
||||||
|
<div align=center style="margin-top: 30px;">
|
||||||
|
<a href="https://github.com/datawhalechina/easy-vibe/graphs/contributors">
|
||||||
|
<img src="https://contrib.rocks/image?repo=datawhalechina/easy-vibe" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
## <span id="contact">📧 Kontaktiere uns</span>
|
||||||
|
|
||||||
|
<div align=center>
|
||||||
|
<p>Bei Fragen, Vorschlägen, Beschwerden oder zum Austausch scanne bitte den untenstehenden QR-Code</p>
|
||||||
|
<img src="../assets/wechat.png" width="280">
|
||||||
|
|
||||||
|
<p>Scan den untenstehenden QR-Code, um dem offiziellen Konto zu folgen: Datawhale</p>
|
||||||
|
<img src="https://raw.githubusercontent.com/datawhalechina/pumpkin-book/master/res/qrcode.jpeg" width="180" height="180">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
## 📄 LIZENZ
|
||||||
|
|
||||||
|
<div align="center">
|
||||||
|
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">
|
||||||
|
<img
|
||||||
|
alt="Creative Commons Lizenz"
|
||||||
|
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 einer
|
||||||
|
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">
|
||||||
|
Creative Commons Namensnennung - Nicht-kommerziell - Weitergabe unter gleichen Bedingungen 4.0 International Lizenz
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
## Star History
|
||||||
|
|
||||||
|
[](https://www.star-history.com/#datawhalechina/easy-vibe&type=date&legend=top-left)
|
||||||
@@ -13,23 +13,40 @@
|
|||||||
|
|
||||||
### *Zero Foundation, Project-Based Learning, Build Your First AI Product*
|
### *Zero Foundation, Project-Based Learning, Build Your First AI Product*
|
||||||
|
|
||||||
<div align="center" style="margin-bottom: 16px;">
|
<p align="center">
|
||||||
<a href="https://datawhalechina.github.io/easy-vibe/" style="text-decoration: none;">
|
📌 <a href="https://datawhalechina.github.io/easy-vibe/">Start Reading Online</a>
|
||||||
<img src="https://img.shields.io/badge/Online_Read-Start_Now-FF6B6B?style=for-the-badge&logo=rocket&logoColor=white&labelColor=1a1a2e">
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
<a href="https://github.com/datawhalechina/easy-vibe/stargazers"><img src='https://img.shields.io/github/stars/datawhalechina/easy-vibe?color=660874&style=for-the-badge&logo=star&logoColor=white&labelColor=1a1a2e' /></a>
|
|
||||||
<a href="https://github.com/datawhalechina/easy-vibe/network/members"><img src='https://img.shields.io/github/forks/datawhalechina/easy-vibe?color=660874&style=for-the-badge&logo=git-fork&logoColor=white&labelColor=1a1a2e' /></a>
|
|
||||||
<img src="https://img.shields.io/badge/License-CC_BY_NC_SA_4.0-4ecdc4?style=for-the-badge&logo=creative-commons&logoColor=white&labelColor=1a1a2e">
|
|
||||||
<img src="https://img.shields.io/badge/Language-English-brightgreen?style=for-the-badge&logo=google-translate&logoColor=white&labelColor=1a1a2e">
|
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div align="center" style="margin-top: 16px;">
|
<p align="center">
|
||||||
<a href="README_EN.md"><img src="https://img.shields.io/badge/English-2196F3?style=for-the-badge&logo=readme&logoColor=white&labelColor=1a1a2e" alt="English"></a>
|
<a href="https://datawhalechina.github.io/easy-vibe/">Online Reading</a> ·
|
||||||
<a href="README.md"><img src="https://img.shields.io/badge/中文-2196F3?style=for-the-badge&logo=readme&logoColor=white&labelColor=1a1a2e" alt="中文"></a>
|
<a href="#-content-navigation">Learning Map</a> ·
|
||||||
</div>
|
<a href="#contact">Community</a>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p align="center">
|
||||||
|
<a href="https://github.com/datawhalechina/easy-vibe/stargazers" target="_blank">
|
||||||
|
<img src="https://img.shields.io/github/stars/datawhalechina/easy-vibe?color=660874&style=for-the-badge&logo=star&logoColor=white&labelColor=1a1a2e" alt="Stars"></a>
|
||||||
|
<a href="https://github.com/datawhalechina/easy-vibe/network/members" target="_blank">
|
||||||
|
<img src="https://img.shields.io/github/forks/datawhalechina/easy-vibe?color=660874&style=for-the-badge&logo=git-fork&logoColor=white&labelColor=1a1a2e" alt="Forks"></a>
|
||||||
|
<a href="LICENSE" target="_blank">
|
||||||
|
<img src="https://img.shields.io/badge/License-CC_BY_NC_SA_4.0-4ecdc4?style=for-the-badge&logo=creative-commons&logoColor=white&labelColor=1a1a2e" alt="License"></a>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p align="center">
|
||||||
|
<a href="./README.md"><img alt="简体中文" src="https://img.shields.io/badge/简体中文-d9d9d9"></a>
|
||||||
|
<a href="./README_CHT.md"><img alt="繁體中文" src="https://img.shields.io/badge/繁體中文-d9d9d9"></a>
|
||||||
|
<a href="./README_EN.md"><img alt="English" src="https://img.shields.io/badge/English-d9d9d9"></a>
|
||||||
|
<a href="./README_JA.md"><img alt="日本語" src="https://img.shields.io/badge/日本語-d9d9d9"></a>
|
||||||
|
<a href="./README_ES.md"><img alt="Español" src="https://img.shields.io/badge/Español-d9d9d9"></a>
|
||||||
|
<a href="./README_FR.md"><img alt="Français" src="https://img.shields.io/badge/Français-d9d9d9"></a>
|
||||||
|
<a href="./README_KL.md"><img alt="Klingon" src="https://img.shields.io/badge/Klingon-d9d9d9"></a>
|
||||||
|
<a href="./README_KO.md"><img alt="한국어" src="https://img.shields.io/badge/한국어-d9d9d9"></a>
|
||||||
|
<a href="./README_AR.md"><img alt="العربية" src="https://img.shields.io/badge/العربية-d9d9d9"></a>
|
||||||
|
<a href="./README_TR.md"><img alt="Türkçe" src="https://img.shields.io/badge/Türkçe-d9d9d9"></a>
|
||||||
|
<a href="./README_VI.md"><img alt="Tiếng_Việt" src="https://img.shields.io/badge/Tiếng_Việt-d9d9d9"></a>
|
||||||
|
<a href="./README_DE.md"><img alt="Deutsch" src="https://img.shields.io/badge/Deutsch-d9d9d9"></a>
|
||||||
|
<a href="./README_BN.md"><img alt="বাংলা" src="https://img.shields.io/badge/বাংলা-d9d9d9"></a>
|
||||||
|
</p>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -0,0 +1,230 @@
|
|||||||
|
<!-- trigger vercel build -->
|
||||||
|
<div align="center">
|
||||||
|
|
||||||
|
<pre style="font-family: 'Courier New', monospace; font-size: 16px; color: #000000; margin: 0; padding: 0; line-height: 1.2; transform: skew(-1deg, 0deg); display: block;">
|
||||||
|
███████╗ █████╗ ███████╗██╗ ██╗ ██╗ ██╗██╗██████╗ ███████╗
|
||||||
|
██╔════╝██╔══██╗██╔════╝╚██╗ ██╔╝ ██║ ██║██║██╔══██╗██╔════╝
|
||||||
|
█████╗ ███████║███████╗ ╚████╔╝ ██║ ██║██║██████╔╝█████╗
|
||||||
|
██╔══╝ ██╔══██║╚════██║ ╚██╔╝ ╚██╗ ██╔╝██║██╔══██╗██╔══╝
|
||||||
|
███████╗██║ ██║███████║ ██║ ╚████╔╝ ██║██████╔╝███████╗
|
||||||
|
╚══════╝╚═╝ ╚═╝╚══════╝ ╚═╝ ╚═══╝ ╚═╝╚═════╝ ╚══════╝</pre>
|
||||||
|
|
||||||
|
# Easy-Vibe: Learn Vibe Coding from 0 to 1
|
||||||
|
|
||||||
|
### *Desde cero, aprendizaje basado en proyectos, construyendo tu primer producto de IA*
|
||||||
|
|
||||||
|
<p align="center">
|
||||||
|
📌 <a href="https://datawhalechina.github.io/easy-vibe/">Comenzar a leer en línea (Start Reading Online)</a>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p align="center">
|
||||||
|
<a href="https://datawhalechina.github.io/easy-vibe/">Leer en línea</a> ·
|
||||||
|
<a href="#-navegación-de-contenido">Mapa de aprendizaje</a> ·
|
||||||
|
<a href="#contact">Comunidad</a>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p align="center">
|
||||||
|
<a href="https://github.com/datawhalechina/easy-vibe/stargazers" target="_blank">
|
||||||
|
<img src="https://img.shields.io/github/stars/datawhalechina/easy-vibe?color=660874&style=for-the-badge&logo=star&logoColor=white&labelColor=1a1a2e" alt="Stars"></a>
|
||||||
|
<a href="https://github.com/datawhalechina/easy-vibe/network/members" target="_blank">
|
||||||
|
<img src="https://img.shields.io/github/forks/datawhalechina/easy-vibe?color=660874&style=for-the-badge&logo=git-fork&logoColor=white&labelColor=1a1a2e" alt="Forks"></a>
|
||||||
|
<a href="LICENSE" target="_blank">
|
||||||
|
<img src="https://img.shields.io/badge/License-CC_BY_NC_SA_4.0-4ecdc4?style=for-the-badge&logo=creative-commons&logoColor=white&labelColor=1a1a2e" alt="License"></a>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p align="center">
|
||||||
|
<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="./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>
|
||||||
|
<a href="../ko-KR/README.md"><img alt="한국어" src="https://img.shields.io/badge/한국어-d9d9d9"></a>
|
||||||
|
<a href="../ar-SA/README.md"><img alt="العربية" src="https://img.shields.io/badge/العربية-d9d9d9"></a>
|
||||||
|
<a href="../vi-VN/README.md"><img alt="Tiếng_Việt" src="https://img.shields.io/badge/Tiếng_Việt-d9d9d9"></a>
|
||||||
|
<a href="../de-DE/README.md"><img alt="Deutsch" src="https://img.shields.io/badge/Deutsch-d9d9d9"></a>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
## 🚀 Introducción al Proyecto
|
||||||
|
|
||||||
|
Cuando intentas escribir código con IA, encuentras errores constantes, a menudo quieres rendirte y no está claro cómo llevar realmente tus programas en línea 😢.
|
||||||
|
|
||||||
|
Este tutorial está específicamente diseñado para llevarte de 0 a 1, dominando progresivamente las técnicas de Vibe Coding:
|
||||||
|
|
||||||
|
- **Etapa 0**: **Introducción rápida a través de mini juegos** para adquirir habilidades de Vibe Coding
|
||||||
|
- **Etapa 1**: Desde la perspectiva de un product manager, **habilidades de Vibe Coding y comprensión del negocio**, implementando un prototipo de aplicación web
|
||||||
|
- **Etapa 2**: Aprender **desarrollo frontend/backend y capacidades de IA** relacionadas con técnicas de Vibe Coding, completando una aplicación completa
|
||||||
|
- **Etapa 3**: Dominar la construcción de **aplicaciones complejas multiplataforma**, avanzando hacia aplicaciones de nivel de producción
|
||||||
|
|
||||||
|
Creemos que al dominar Vibe Coding y combinarlo con entrenamiento sistemático, una sola persona puede convertirse en un desarrollador que combine desarrollo frontend, desarrollo backend, integración de capacidades de IA y diseño de productos.
|
||||||
|
|
||||||
|
> **Este proyecto está dirigido principalmente a tres tipos de estudiantes:**
|
||||||
|
>
|
||||||
|
> - **Principiantes (personas comunes / producto y operaciones)**: Ayudar a estudiantes no técnicos a entender conceptos clave y completar su primer prototipo de producto
|
||||||
|
> - **Desarrollores de nivel principiante-intermedio (estudiantes y desarrolladores con cierta base)**: Dominar el conocimiento de Vibe Coding frontend/backend y capacidades de IA
|
||||||
|
> - **Desarrollores avanzados (empresas y startups, código abierto e desarrollores independientes)**: Técnicas avanzadas de desarrollo, desarrollo multiplataforma
|
||||||
|
|
||||||
|
### 📖 Navegación de Contenido
|
||||||
|
|
||||||
|
<div align="center">
|
||||||
|
<img src="../assets/readme-image1.png" alt="Learning Map" width="100%" style="border-radius: 10px; box-shadow: 0 8px 20px rgba(45,55,72,0.3); margin: 15px 0;"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
### Apéndice General
|
||||||
|
|
||||||
|
[Diccionario de capacidades de IA: conceptos centrales comunes de IA, términos y explicaciones de escenarios](docs/appendix/ai-capability-dictionary.md)
|
||||||
|
|
||||||
|
### 0. Jardín de Infancia
|
||||||
|
|
||||||
|
| Capítulo | Contenido clave | Estado |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| [Prólogo: Mapa de aprendizaje](docs/stage-0/0.1-learning-map/index.md) | Guía general de la ruta de aprendizaje | ✅ |
|
||||||
|
| [Principiante 1: La era de la IA, si puedes hablar puedes programar](docs/stage-0/0.2-ai-capabilities-through-games/index.md) | Experimentar por primera vez las capacidades de programación con IA a través de casos como Snake | ✅ |
|
||||||
|
|
||||||
|
### 1. Product Manager de IA
|
||||||
|
|
||||||
|
| Capítulo | Contenido clave | Estado |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| [Principiante 2: Conociendo herramientas de IDE de IA](docs/stage-1/1.1-introduction-to-ai-ide/index.md) | Aprender a usar el IDE, crear mini juegos localmente | ✅ |
|
||||||
|
| [Principiante 3: Haz un prototipo tú mismo](docs/stage-1/1.2-building-prototype/index.md) | Análisis de requisitos, generación de una sola página con IA, hasta generar prototipos de productos de múltiples páginas | ✅ |
|
||||||
|
| [Principiante 4: Añade capacidades de IA al prototipo](docs/stage-1/1.3-integrating-ai-capabilities/index.md) | Aprender a conectar capacidades comunes de IA (texto, imagen, video) | ✅ |
|
||||||
|
| [Principiante 5: Proyecto completo práctico](docs/stage-1/1.4-complete-project-practice/index.md) | Simular escenarios reales, aceptar feedback de usuarios para iterar, completar el proyecto | ✅ |
|
||||||
|
| [Proyecto final: Haz un prototipo completo de aplicación web y preséntalo](docs/stage-1/1.5-final-project/index.md) | Implementar completamente la aplicación, mostrar los efectos de la aplicación | ✅ |
|
||||||
|
|
||||||
|
#### Apéndices
|
||||||
|
|
||||||
|
| Capítulo | Contenido clave | Estado |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| [Apéndice A: Suplemento de pensamiento de producto](docs/stage-1/appendix-a-product-thinking/index.md) | Marcos de pensamiento necesarios para crear un producto de cero a uno | ✅ |
|
||||||
|
| [Apéndice B: Errores comunes y soluciones](docs/stage-1/appendix-b-common-errors/index.md) | Errores comunes en Vibe Coding y métodos de solución de problemas | ✅ |
|
||||||
|
|
||||||
|
### 2. Ingeniero de Desarrollo de Nivel Principiante-Intermedio
|
||||||
|
|
||||||
|
#### Parte Frontend
|
||||||
|
|
||||||
|
| Capítulo | Contenido clave | Estado |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| [Frontend 0: Usar lovart para generar activos](docs/stage-2/frontend/2.0-lovart-assets/) | Usar lovart para generar por lotes activos visuales como personajes y escenas, proporcionando base de activos para diseño UI y desarrollo frontend | 🚧 |
|
||||||
|
| [Frontend 1: Introducción a Figma y MasterGo](docs/stage-2/frontend/2.1-figma-mastergo/) | Usar herramientas de diseño para organizar arquitectura de información y estructura de páginas, preparando la base para implementación frontend | 🚧 |
|
||||||
|
| [Frontend 2: Construir la primera aplicación moderna - Diseño UI](docs/stage-2/frontend/2.2-ui-design/) | Completar interfaz basada en componentes basada en diseños,实现 la primera ruta de diseño a código | 🚧 |
|
||||||
|
| [Frontend 3: Referencia de especificaciones de diseño UI y diseño UI de múltiples productos](docs/stage-2/frontend/2.3-multi-product-ui/) | Expandir interfaces de múltiples productos en torno a un visual principal unificado, practicar capacidades de diseño sistemático | 🚧 |
|
||||||
|
| [Frontend 4: Hagamos los retratos de Hogwarts juntos](docs/stage-2/frontend/2.4-hogwarts-portraits/chapter4-lets-build-hogwarts-portraits.md) | Crear una aplicación frontend con capacidades de IA integradas de 0 a 1, conectando diseño y desarrollo | ✅ |
|
||||||
|
|
||||||
|
#### Parte Backend y Full Stack
|
||||||
|
|
||||||
|
| Capítulo | Contenido clave | Estado |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| [Backend 1: Qué es una API](docs/stage-2/backend/2.1-what-is-api/extra2/extra2-what-is-api.md) | Entender interfaces HTTP y modelos de solicitud-respuesta, preparándose para integración backend y coordinación | ✅ |
|
||||||
|
| [Backend 2: De bases de datos a Supabase](docs/stage-2/backend/2.2-database-supabase/chapter5/chapter5-from-database-to-supabase.md) | Implementar bases de datos y APIs en Supabase, conectando modelos de datos con páginas frontend | ✅ |
|
||||||
|
| [Backend 3: LLM asistiendo en la escritura de código de interfaz y documentación](docs/stage-2/backend/2.3-ai-interface-code/) | Usar LLM para ayudar a generar documentación y código para interfaces y bases de datos,实现 un backend legible y testeable | 🚧 |
|
||||||
|
| [Backend 4: Flujo de trabajo Git](docs/stage-2/backend/2.4-git-workflow/extra1/extra1-what-is-git-and-what-is-github.md) | Gestionar código en flujo de trabajo Git, realizar control de versiones y colaboración | ✅ |
|
||||||
|
| [Backend 5: Despliegue Zeabur](docs/stage-2/backend/2.5-zeabur-deployment/extra6/extra6-zeabur-what-is-it-and-how-to-deploy-web-applications.md) | Desplegar la aplicación en Zeabur para ponerla en línea | ✅ |
|
||||||
|
| [Backend 6: Herramientas de desarrollo CLI modernas](docs/stage-2/backend/2.6-modern-cli/extra7/extra7-cli-ai-coding-tools-and-the-principles-of-test-driven-development.md) | Usar herramientas de programación IA tipo CLI para acelerar desarrollo y depuración, formando flujo de ingeniería personal | ✅ |
|
||||||
|
| [Backend 7: Cómo integrar sistemas de pago como Stripe](docs/stage-2/backend/2.7-stripe-payment/) | Conectar sistemas de pago, completar flujo de pago y proceso básico de liquidación | 🚧 |
|
||||||
|
| [Proyecto final 1: Construir la primera aplicación moderna - Aplicación full stack](docs/stage-2/assignments/2.1-fullstack-app/) | Integrar frontend, backend y módulos de pago, completar aplicación web full stack lista para producción | 🚧 |
|
||||||
|
| [Proyecto final 2: Biblioteca de componentes frontend moderna + Trae práctico](docs/stage-2/assignments/2.2-modern-frontend-trae/) | Usar biblioteca de componentes frontend moderna y Trae, completar independientemente un producto con registro/login y soporte de pago | 🚧 |
|
||||||
|
|
||||||
|
#### Apéndice de Capacidades de IA
|
||||||
|
|
||||||
|
| Capítulo | Contenido clave | Estado |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| [IA 1: Introducción a Dify e integración de base de conocimientos](docs/stage-2/ai-capabilities/2.1-dify-knowledge-base/chapter3/chapter3-getting-started-with-dify-and-its-knowledge-base-integration.md) | Usar Dify Workflow y RAG básico para construir productos tipo herramientas, creando ejemplo para actualizaciones futuras de aplicaciones | ✅ |
|
||||||
|
| [IA 2: Aprender a consultar diccionario de IA e integrar APIs multimodales](docs/stage-2/ai-capabilities/2.2-multimodal-api/extra3/extra3-ai-capability-starter-handbook.md) | Aprender a buscar modelos y APIs apropiados, integrar capacidades multimodales como texto e imagen en productos | 🚧 |
|
||||||
|
|
||||||
|
### 3. Ingeniero de Desarrollo Avanzado
|
||||||
|
|
||||||
|
| Capítulo | Contenido clave | Estado |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| [Avanzado 1: MCP y ClaudeCode Skills](docs/stage-3/core-skills/3.1-mcp-claudecode-skills/) | Extender capacidades del IDE a través de MCP y Skills, conectar servicios externos como herramientas | 🚧 |
|
||||||
|
| [Avanzado 2: Cómo hacer que Coding Tools funcione durante mucho tiempo](docs/stage-3/core-skills/3.2-long-running-tasks/) | Diseñar y configurar tareas de ejecución prolongada, hacer Coding Tools más estable y confiable | 🚧 |
|
||||||
|
| [Avanzado 3: Desarrollo multiplataforma: Cómo construir mini programas de WeChat](docs/stage-3/cross-platform/3.3-wechat-miniprogram/) | Entender el ecosistema de mini programas de WeChat, completar un mini programa frontend desde plantilla oficial hasta lanzamiento | ✅ |
|
||||||
|
| [Avanzado 4: Desarrollo multiplataforma: Cómo construir mini programas de WeChat - Incluyendo backend](docs/stage-3/cross-platform/3.4-wechat-miniprogram-backend/) | Integrar base de datos y lógica backend en mini programas,实现 ciclo completo de negocio | 🚧 |
|
||||||
|
| [Avanzado 5: Desarrollo multiplataforma: Cómo construir aplicaciones Android](docs/stage-3/cross-platform/3.5-android-app/) | Usar herramientas como Expo, completar desarrollo de aplicaciones Android integrando Web/nativo | 🚧 |
|
||||||
|
| [Avanzado 6: Desarrollo multiplataforma: Cómo construir aplicaciones iOS](docs/stage-3/cross-platform/3.6-ios-app/) | Usar herramientas como Expo, completar desarrollo de aplicaciones iOS integrando Web/nativo | 🚧 |
|
||||||
|
| [Avanzado 7: Cómo construir tu propio sitio web personal y blog académico](docs/stage-3/personal-brand/3.7-personal-website-blog/) | Desde selección, construcción hasta despliegue, construir homepage en línea a largo plazo mostrando proyectos personales y logros académicos | 🚧 |
|
||||||
|
|
||||||
|
#### Apéndice de Capacidades de IA
|
||||||
|
|
||||||
|
| Capítulo | Contenido clave | Estado |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| [IA Avanzada 1: Qué es RAG y cómo funciona](docs/stage-3/ai-advanced/3.a1-rag-introduction/extra5-what-is-rag-and-how-does-it-work-and-future.md) | Entender sistemáticamente principios de RAG y arquitecturas comunes, proporcionar base de recuperación de conocimiento para aplicaciones complejas | ✅ |
|
||||||
|
| [IA Avanzada 2: RAG intermedio-avanzado y orquestación de flujos de trabajo: Ejemplo con LangGraph](docs/stage-3/ai-advanced/3.a2-langgraph-advanced-rag/) | Usar herramientas como LangGraph para diseñar flujos de trabajo multipaso y sistemas RAG intermedio-avanzados | 🚧 |
|
||||||
|
|
||||||
|
## 🛠️ Cómo Aprender
|
||||||
|
|
||||||
|
- Según tus habilidades personales, lee y practica selectivamente capítulos relevantes, si tienes preguntas hazlas en Issues.
|
||||||
|
|
||||||
|
## 💻 Iniciar Este Curso Localmente
|
||||||
|
|
||||||
|
### Método Moderno
|
||||||
|
|
||||||
|
En el cuadro de diálogo del IDE de IA (vscode, cursor, trae, etc.), ingresa el siguiente prompt para iniciar este curso:
|
||||||
|
|
||||||
|
```
|
||||||
|
Por favor ayúdame a ejecutar el servicio local de este proyecto
|
||||||
|
```
|
||||||
|
|
||||||
|
### Método Antiguo
|
||||||
|
|
||||||
|
1. npm install
|
||||||
|
2. npm run dev
|
||||||
|
3. Abre tu navegador y visita `http://localhost:3000` para ver.
|
||||||
|
|
||||||
|
## 🤝 Contribuir
|
||||||
|
|
||||||
|
- Si descubres algún problema, o crees que hay algo que se pueda mejorar en este proyecto, puedes enviar un Issue para dar feedback. Si después de enviar nadie responde, puedes contactar al [equipo de cuidadores](https://github.com/datawhalechina/DOPMC/blob/main/OP.md) para feedback y seguimiento~
|
||||||
|
- Si quieres contribuir a este proyecto, puedes enviar un Pull Request, si después de enviar nadie responde, puedes contactar al [equipo de cuidadores](https://github.com/datawhalechina/DOPMC/blob/main/OP.md) para feedback y seguimiento~
|
||||||
|
- Si estás muy interesado en Datawhale y quieres iniciar un nuevo proyecto, por favor sigue la [guía de proyectos de código abierto de Datawhale](https://github.com/datawhalechina/DOPMC/blob/main/GUIDE.md)~
|
||||||
|
|
||||||
|
## 🙏 Gracias a Cada Contribuyente
|
||||||
|
|
||||||
|
- [散步-Líder del proyecto](https://github.com/sanbuphy) (Miembro de Datawhale)
|
||||||
|
- Fang Ke-Profesor guía (Miembro de Datawhale, Universidad de Tsinghua)
|
||||||
|
- [Yerim Kang](https://github.com/yerim25)（Parte de proyectos prácticos-Universidad de Tsinghua）
|
||||||
|
- Zhao Zhilin（Parte de proyectos prácticos-Universidad de Tsinghua）
|
||||||
|
- [Li Yixuan](https://yixuan20.github.io/)（Diseño artístico de página-Universidad de Tsinghua）
|
||||||
|
- Todos los compañeros del grupo beta de AI Vibe Coding 101 que proporcionaron sugerencias y experiencia
|
||||||
|
|
||||||
|
### Agradecimientos Especiales
|
||||||
|
|
||||||
|
- Gracias a [@Sm1les](https://github.com/Sm1les) por su ayuda y apoyo a este proyecto
|
||||||
|
- Gracias a todos los desarrolladores que han contribuido a este proyecto ❤️
|
||||||
|
|
||||||
|
<div align=center style="margin-top: 30px;">
|
||||||
|
<a href="https://github.com/datawhalechina/easy-vibe/graphs/contributors">
|
||||||
|
<img src="https://contrib.rocks/image?repo=datawhalechina/easy-vibe" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
## <span id="contact">📧 Contáctanos</span>
|
||||||
|
|
||||||
|
<div align=center>
|
||||||
|
<p>Si tienes preguntas, sugerencias, quejas, o quieres comunicarte, por favor escanea el código QR a continuación</p>
|
||||||
|
<img src="../assets/wechat.png" width="280">
|
||||||
|
|
||||||
|
<p>Escanea el código QR a continuación para seguir la cuenta oficial: Datawhale</p>
|
||||||
|
<img src="https://raw.githubusercontent.com/datawhalechina/pumpkin-book/master/res/qrcode.jpeg" width="180" height="180">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
## 📄 LICENCIA
|
||||||
|
|
||||||
|
<div align="center">
|
||||||
|
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">
|
||||||
|
<img
|
||||||
|
alt="Licencia Creative Commons"
|
||||||
|
style="border-width:0"
|
||||||
|
src="https://img.shields.io/badge/license-CC%20BY--NC--SA%204.0-lightgrey"
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
<br />
|
||||||
|
Este trabajo está licenciado bajo una
|
||||||
|
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">
|
||||||
|
Licencia Creative Commons Atribución-NoComercial-CompartirIgual 4.0 Internacional
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
## Star History
|
||||||
|
|
||||||
|
[](https://www.star-history.com/#datawhalechina/easy-vibe&type=date&legend=top-left)
|
||||||
@@ -0,0 +1,230 @@
|
|||||||
|
<!-- trigger vercel build -->
|
||||||
|
<div align="center">
|
||||||
|
|
||||||
|
<pre style="font-family: 'Courier New', monospace; font-size: 16px; color: #000000; margin: 0; padding: 0; line-height: 1.2; transform: skew(-1deg, 0deg); display: block;">
|
||||||
|
███████╗ █████╗ ███████╗██╗ ██╗ ██╗ ██╗██╗██████╗ ███████╗
|
||||||
|
██╔════╝██╔══██╗██╔════╝╚██╗ ██╔╝ ██║ ██║██║██╔══██╗██╔════╝
|
||||||
|
█████╗ ███████║███████╗ ╚████╔╝ ██║ ██║██║██████╔╝█████╗
|
||||||
|
██╔══╝ ██╔══██║╚════██║ ╚██╔╝ ╚██╗ ██╔╝██║██╔══██╗██╔══╝
|
||||||
|
███████╗██║ ██║███████║ ██║ ╚████╔╝ ██║██████╔╝███████╗
|
||||||
|
╚══════╝╚═╝ ╚═╝╚══════╝ ╚═╝ ╚═══╝ ╚═╝╚═════╝ ╚══════╝</pre>
|
||||||
|
|
||||||
|
# Easy-Vibe: Learn Vibe Coding from 0 to 1
|
||||||
|
|
||||||
|
### *De zéro, apprentissage par projet, construire votre premier produit IA*
|
||||||
|
|
||||||
|
<p align="center">
|
||||||
|
📌 <a href="https://datawhalechina.github.io/easy-vibe/">Commencer la lecture en ligne (Start Reading Online)</a>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p align="center">
|
||||||
|
<a href="https://datawhalechina.github.io/easy-vibe/">Lire en ligne</a> ·
|
||||||
|
<a href="#-navigation-du-contenu">Carte d'apprentissage</a> ·
|
||||||
|
<a href="#contact">Communauté</a>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p align="center">
|
||||||
|
<a href="https://github.com/datawhalechina/easy-vibe/stargazers" target="_blank">
|
||||||
|
<img src="https://img.shields.io/github/stars/datawhalechina/easy-vibe?color=660874&style=for-the-badge&logo=star&logoColor=white&labelColor=1a1a2e" alt="Stars"></a>
|
||||||
|
<a href="https://github.com/datawhalechina/easy-vibe/network/members" target="_blank">
|
||||||
|
<img src="https://img.shields.io/github/forks/datawhalechina/easy-vibe?color=660874&style=for-the-badge&logo=git-fork&logoColor=white&labelColor=1a1a2e" alt="Forks"></a>
|
||||||
|
<a href="LICENSE" target="_blank">
|
||||||
|
<img src="https://img.shields.io/badge/License-CC_BY_NC_SA_4.0-4ecdc4?style=for-the-badge&logo=creative-commons&logoColor=white&labelColor=1a1a2e" alt="License"></a>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p align="center">
|
||||||
|
<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="./README.md"><img alt="Français" src="https://img.shields.io/badge/Français-d9d9d9"></a>
|
||||||
|
<a href="../ko-KR/README.md"><img alt="한국어" src="https://img.shields.io/badge/한국어-d9d9d9"></a>
|
||||||
|
<a href="../ar-SA/README.md"><img alt="العربية" src="https://img.shields.io/badge/العربية-d9d9d9"></a>
|
||||||
|
<a href="../vi-VN/README.md"><img alt="Tiếng_Việt" src="https://img.shields.io/badge/Tiếng_Việt-d9d9d9"></a>
|
||||||
|
<a href="../de-DE/README.md"><img alt="Deutsch" src="https://img.shields.io/badge/Deutsch-d9d9d9"></a>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
## 🚀 Présentation du Projet
|
||||||
|
|
||||||
|
Quand vous essayez d'écrire du code avec l'IA, vous rencontrez des erreurs constantes, vous voulez souvent abandonner et il n'est pas clair comment mettre réellement vos programmes en ligne 😢.
|
||||||
|
|
||||||
|
Ce tutoriel est spécialement conçu pour vous mener de 0 à 1, maîtrisant progressivement les techniques de Vibe Coding :
|
||||||
|
|
||||||
|
- **Étape 0** : **Introduction rapide par des mini-jeux** pour acquérir les compétences de Vibe Coding
|
||||||
|
- **Étape 1** : Du point de vue d'un product manager, **compétences de Vibe Coding et compréhension des métiers**, implémentation d'un prototype d'application web
|
||||||
|
- **Étape 2** : Apprendre le **développement frontend/backend et les capacités d'IA** liées aux techniques de Vibe Coding, compléter une application complète
|
||||||
|
- **Étape 3** : Maîtriser la construction d'**applications complexes multiplateformes**, vers des applications de niveau production
|
||||||
|
|
||||||
|
Nous croyons qu'en maîtrisant Vibe Coding et en le combinant avec un entraînement systématique, une seule personne peut devenir un développeur combinant développement frontend, développement backend, intégration de capacités d'IA et conception de produits.
|
||||||
|
|
||||||
|
> **Ce projet s'adresse principalement à trois types d'apprenants :**
|
||||||
|
>
|
||||||
|
> - **Débutants (gens ordinaires / produit et opérations)** : Aider les apprenants non techniques à comprendre les concepts clés et à compléter leur premier prototype de produit
|
||||||
|
> - **Développeurs de niveau débutant-intermédiaire (étudiants et développeurs avec une certaine base)** : Maîtriser les connaissances de Vibe Coding frontend/backend et les capacités d'IA
|
||||||
|
> - **Développeurs avancés (entreprises et startups, open source et développeurs indépendants)** : Techniques de développement avancées, développement multiplateforme
|
||||||
|
|
||||||
|
### 📖 Navigation du Contenu
|
||||||
|
|
||||||
|
<div align="center">
|
||||||
|
<img src="../assets/readme-image1.png" alt="Learning Map" width="100%" style="border-radius: 10px; box-shadow: 0 8px 20px rgba(45,55,72,0.3); margin: 15px 0;"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
### Annexe Générale
|
||||||
|
|
||||||
|
[Dictionnaire des capacités IA : concepts centraux IA courants, termes et explications de scénarios](docs/appendix/ai-capability-dictionary.md)
|
||||||
|
|
||||||
|
### 0. Maternelle
|
||||||
|
|
||||||
|
| Chapitre | Contenu clé | Statut |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| [Préface : Carte d'apprentissage](docs/stage-0/0.1-learning-map/index.md) | Guide général du parcours d'apprentissage | ✅ |
|
||||||
|
| [Débutant 1 : L'ère de l'IA, savoir parler c'est savoir programmer](docs/stage-0/0.2-ai-capabilities-through-games/index.md) | Découvrir pour la première fois les capacités de programmation IA à travers des cas comme Snake | ✅ |
|
||||||
|
|
||||||
|
### 1. Product Manager IA
|
||||||
|
|
||||||
|
| Chapitre | Contenu clé | Statut |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| [Débutant 2 : Découvrir les outils IDE IA](docs/stage-1/1.1-introduction-to-ai-ide/index.md) | Apprendre à utiliser l'IDE, créer des mini-jeux localement | ✅ |
|
||||||
|
| [Débutant 3 : Créer un prototype soi-même](docs/stage-1/1.2-building-prototype/index.md) | Analyse des besoins, génération d'une seule page par l'IA, jusqu'à générer des prototypes de produits multipages | ✅ |
|
||||||
|
| [Débutant 4 : Ajouter des capacités IA au prototype](docs/stage-1/1.3-integrating-ai-capabilities/index.md) | Apprendre à connecter des capacités IA courantes (texte, image, vidéo) | ✅ |
|
||||||
|
| [Débutant 5 : Projet complet pratique](docs/stage-1/1.4-complete-project-practice/index.md) | Simuler des scénarios réels, accepter les feedbacks des utilisateurs pour itérer, compléter le projet | ✅ |
|
||||||
|
| [Projet final : Créer un prototype complet d'application web et le présenter](docs/stage-1/1.5-final-project/index.md) | Implémenter complètement l'application, présenter les effets de l'application | ✅ |
|
||||||
|
|
||||||
|
#### Annexes
|
||||||
|
|
||||||
|
| Chapitre | Contenu clé | Statut |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| [Annexe A : Complément de pensée produit](docs/stage-1/appendix-a-product-thinking/index.md) | Cadres de pensée nécessaires pour créer un produit de zéro à un | ✅ |
|
||||||
|
| [Annexe B : Erreurs courantes et solutions](docs/stage-1/appendix-b-common-errors/index.md) | Erreurs courantes en Vibe Coding et méthodes de dépannage | ✅ |
|
||||||
|
|
||||||
|
### 2. Ingénieur de Développement Niveau Débutant-Intermédiaire
|
||||||
|
|
||||||
|
#### Partie Frontend
|
||||||
|
|
||||||
|
| Chapitre | Contenu clé | Statut |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| [Frontend 0 : Utiliser lovart pour générer des assets](docs/stage-2/frontend/2.0-lovart-assets/) | Utiliser lovart pour générer en lot des assets visuels comme des personnages et des scènes, fournissant une base d'assets pour la conception UI et le développement frontend | 🚧 |
|
||||||
|
| [Frontend 1 : Introduction à Figma et MasterGo](docs/stage-2/frontend/2.1-figma-mastergo/) | Utiliser des outils de conception pour organiser l'architecture de l'information et la structure des pages, préparant la base pour l'implémentation frontend | 🚧 |
|
||||||
|
| [Frontend 2 : Construire la première application moderne - Design UI](docs/stage-2/frontend/2.2-ui-design/) | Compléter une interface basée sur des composants à partir de maquettes, réaliser le premier parcours du design au code | 🚧 |
|
||||||
|
| [Frontend 3 : Référence des spécifications de design UI et design UI multiproduit](docs/stage-2/frontend/2.3-multi-product-ui/) | Étendre des interfaces multiproduits autour d'une visuelle principale unifiée, pratiquer les capacités de design systématique | 🚧 |
|
||||||
|
| [Frontend 4 : Créons ensemble les portraits de Poudlard](docs/stage-2/frontend/2.4-hogwarts-portraits/chapter4-lets-build-hogwarts-portraits.md) | Créer une application frontend avec capacités IA intégrées de 0 à 1, connecter conception et développement | ✅ |
|
||||||
|
|
||||||
|
#### Partie Backend et Full Stack
|
||||||
|
|
||||||
|
| Chapitre | Contenu clé | Statut |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| [Backend 1 : Qu'est-ce qu'une API](docs/stage-2/backend/2.1-what-is-api/extra2/extra2-what-is-api.md) | Comprendre les interfaces HTTP et les modèles requête-réponse, se préparer à l'intégration backend et à la coordination | ✅ |
|
||||||
|
| [Backend 2 : Des bases de données à Supabase](docs/stage-2/backend/2.2-database-supabase/chapter5/chapter5-from-database-to-supabase.md) : Implémenter des bases de données et des APIs sur Supabase, connecter des modèles de données aux pages frontend | ✅ |
|
||||||
|
| [Backend 3 : LLM assistant l'écriture de code d'interface et de documentation](docs/stage-2/backend/2.3-ai-interface-code/) : Utiliser le LLM pour aider à générer de la documentation et du code pour les interfaces et bases de données, réaliser un backend lisible et testable | 🚧 |
|
||||||
|
| [Backend 4 : Flux de travail Git](docs/stage-2/backend/2.4-git-workflow/extra1/extra1-what-is-git-and-what-is-github.md) : Gérer le code dans un flux de travail Git, effectuer le contrôle de version et la collaboration | ✅ |
|
||||||
|
| [Backend 5 : Déploiement Zeabur](docs/stage-2/backend/2.5-zeabur-deployment/extra6/extra6-zeabur-what-is-it-and-how-to-deploy-web-applications.md) : Déployer l'application sur Zeabur pour la mettre en ligne | ✅ |
|
||||||
|
| [Backend 6 : Outils de développement CLI modernes](docs/stage-2/backend/2.6-modern-cli/extra7/extra7-cli-ai-coding-tools-and-the-principles-of-test-driven-development.md) : Utiliser des outils de programmation IA de type CLI pour accélérer le développement et le débogage, former un flux d'ingénierie personnel | ✅ |
|
||||||
|
| [Backend 7 : Comment intégrer des systèmes de paiement comme Stripe](docs/stage-2/backend/2.7-stripe-payment/) : Connecter des systèmes de paiement, compléter le flux de paiement et le processus de base de règlement | 🚧 |
|
||||||
|
| [Projet final 1 : Construire la première application moderne - Application full stack](docs/stage-2/assignments/2.1-fullstack-app/) : Intégrer frontend, backend et modules de paiement, compléter une application web full stack prête pour la production | 🚧 |
|
||||||
|
| [Projet final 2 : Bibliothèque de composants frontend moderne + Trae pratique](docs/stage-2/assignments/2.2-modern-frontend-trae/) : Utiliser une bibliothèque de composants frontend moderne et Trae, compléter indépendamment un produit avec inscription/connexion et support de paiement | 🚧 |
|
||||||
|
|
||||||
|
#### Annexe des Capacités IA
|
||||||
|
|
||||||
|
| Chapitre | Contenu clé | Statut |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| [IA 1 : Introduction à Dify et intégration de base de connaissances](docs/stage-2/ai-capabilities/2.1-dify-knowledge-base/chapter3/chapter3-getting-started-with-dify-and-its-knowledge-base-integration.md) : Utiliser Dify Workflow et le RAG de base pour construire des produits de type outils, créant un exemple pour les futures mises à jour d'applications | ✅ |
|
||||||
|
| [IA 2 : Apprendre à consulter le dictionnaire IA et intégrer des APIs multimodales](docs/stage-2/ai-capabilities/2.2-multimodal-api/extra3/extra3-ai-capability-starter-handbook.md) : Apprendre à chercher des modèles et APIs appropriés, intégrer des capacités multimodales comme le texte et l'image dans des produits | 🚧 |
|
||||||
|
|
||||||
|
### 3. Ingénieur de Développement Avancé
|
||||||
|
|
||||||
|
| Chapitre | Contenu clé | Statut |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| [Avancé 1 : MCP et ClaudeCode Skills](docs/stage-3/core-skills/3.1-mcp-claudecode-skills/) : Étendre les capacités de l'IDE via MCP et Skills, connecter des services externes comme outils | 🚧 |
|
||||||
|
| [Avancé 2 : Comment faire fonctionner Coding Tools longtemps](docs/stage-3/core-skills/3.2-long-running-tasks/) : Concevoir et configurer des tâches à longue exécution, rendre Coding Tools plus stable et fiable | 🚧 |
|
||||||
|
| [Avancé 3 : Développement multiplateforme : Comment construire des mini-programmes WeChat](docs/stage-3/cross-platform/3.3-wechat-miniprogram/) : Comprendre l'écosystème des mini-programmes WeChat, compléter un mini-programme frontend du modèle officiel au lancement | ✅ |
|
||||||
|
| [Avancé 4 : Développement multiplateforme : Comment construire des mini-programmes WeChat - Y compris backend](docs/stage-3/cross-platform/3.4-wechat-miniprogram-backend/) : Intégrer une base de données et une logique backend dans les mini-programmes, réaliser un cycle d'activité complet | 🚧 |
|
||||||
|
| [Avancé 5 : Développement multiplateforme : Comment construire des applications Android](docs/stage-3/cross-platform/3.5-android-app/) : Utiliser des outils comme Expo, compléter le développement d'applications Android intégrant Web natif | 🚧 |
|
||||||
|
| [Avancé 6 : Développement multiplateforme : Comment construire des applications iOS](docs/stage-3/cross-platform/3.6-ios-app/) : Utiliser des outils comme Expo, compléter le développement d'applications iOS intégrant Web natif | 🚧 |
|
||||||
|
| [Avancé 7 : Comment construire son propre site web personnel et blog académique](docs/stage-3/personal-brand/3.7-personal-website-blog/) : Du choix, de la construction au déploiement, construire une homepage en ligne à long terme présentant des projets personnels et des réalisations académiques | 🚧 |
|
||||||
|
|
||||||
|
#### Annexe des Capacités IA
|
||||||
|
|
||||||
|
| Chapitre | Contenu clé | Statut |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| [IA Avancée 1 : Qu'est-ce que RAG et comment il fonctionne](docs/stage-3/ai-advanced/3.a1-rag-introduction/extra5-what-is-rag-and-how-does-it-work-and-future.md) : Comprendre systématiquement les principes du RAG et les architectures courantes, fournir une base de récupération de connaissances pour des applications complexes | ✅ |
|
||||||
|
| [IA Avancée 2 : RAG intermédiaire-avancé et orchestration de workflows : Exemple avec LangGraph](docs/stage-3/ai-advanced/3.a2-langgraph-advanced-rag/) : Utiliser des outils comme LangGraph pour concevoir des workflows multi-étapes et des systèmes RAG intermédiaire-avancés | 🚧 |
|
||||||
|
|
||||||
|
## 🛠️ Comment Apprendre
|
||||||
|
|
||||||
|
- Selon vos capacités personnelles, lisez et pratiquez sélectivement les chapitres pertinents, si vous avez des questions posez-les dans des Issues.
|
||||||
|
|
||||||
|
## 💻 Démarrer Ce Cours Localement
|
||||||
|
|
||||||
|
### Méthode Moderne
|
||||||
|
|
||||||
|
Dans la boîte de dialogue de l'IDE IA (vscode, cursor, trae, etc.), entrez le prompt suivant pour démarrer ce cours :
|
||||||
|
|
||||||
|
```
|
||||||
|
S'il vous plaît aidez-moi à exécuter le service local de ce projet
|
||||||
|
```
|
||||||
|
|
||||||
|
### Ancienne Méthode
|
||||||
|
|
||||||
|
1. npm install
|
||||||
|
2. npm run dev
|
||||||
|
3. Ouvrez votre navigateur et visitez `http://localhost:3000` pour voir.
|
||||||
|
|
||||||
|
## 🤝 Contribuer
|
||||||
|
|
||||||
|
- Si vous découvrez des problèmes, ou pensez qu'il y a des moyens d'améliorer ce projet, vous pouvez soumettre une Issue pour donner un feedback. Si après soumission personne ne répond, vous pouvez contacter l'[équipe des soignants](https://github.com/datawhalechina/DOPMC/blob/main/OP.md) pour un suivi~
|
||||||
|
- Si vous souhaitez contribuer à ce projet, vous pouvez soumettre une Pull Request, si après soumission personne ne répond, vous pouvez contacter l'[équipe des soignants](https://github.com/datawhalechina/DOPMC/blob/main/OP.md) pour un suivi~
|
||||||
|
- Si vous êtes très intéressé par Datawhale et souhaitez lancer un nouveau projet, veuillez suivre le [guide de projets open source Datawhale](https://github.com/datawhalechina/DOPMC/blob/main/GUIDE.md)~
|
||||||
|
|
||||||
|
## 🙏 Merci à Chaque Contributeur
|
||||||
|
|
||||||
|
- [散步-Chef de projet](https://github.com/sanbuphy) (Membre Datawhale)
|
||||||
|
- Fang Ke-Professeur guide (Membre Datawhale, Université Tsinghua)
|
||||||
|
- [Yerim Kang](https://github.com/yerim25)（Partie projets pratiques-Université Tsinghua）
|
||||||
|
- Zhao Zhilin（Partie projets pratiques-Université Tsinghua）
|
||||||
|
- [Li Yixuan](https://yixuan20.github.io/)（Design artistique de page-Université Tsinghua）
|
||||||
|
- Tous les camarades du groupe bêta AI Vibe Coding 101 qui ont fourni des suggestions et de l'expérience
|
||||||
|
|
||||||
|
### Remerciements Spéciaux
|
||||||
|
|
||||||
|
- Merci à [@Sm1les](https://github.com/Sm1les) pour son aide et son soutien à ce projet
|
||||||
|
- Merci à tous les développeurs qui ont contribué à ce projet ❤️
|
||||||
|
|
||||||
|
<div align=center style="margin-top: 30px;">
|
||||||
|
<a href="https://github.com/datawhalechina/easy-vibe/graphs/contributors">
|
||||||
|
<img src="https://contrib.rocks/image?repo=datawhalechina/easy-vibe" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
## <span id="contact">📧 Contactez-nous</span>
|
||||||
|
|
||||||
|
<div align=center>
|
||||||
|
<p>Si vous avez des questions, des suggestions, des plaintes, ou souhaitez échanger, veuillez scanner le code QR ci-dessous</p>
|
||||||
|
<img src="../assets/wechat.png" width="280">
|
||||||
|
|
||||||
|
<p>Scannez le code QR ci-dessous pour suivre le compte officiel : Datawhale</p>
|
||||||
|
<img src="https://raw.githubusercontent.com/datawhalechina/pumpkin-book/master/res/qrcode.jpeg" width="180" height="180">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
## 📄 LICENCE
|
||||||
|
|
||||||
|
<div align="center">
|
||||||
|
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">
|
||||||
|
<img
|
||||||
|
alt="Licence Creative Commons"
|
||||||
|
style="border-width:0"
|
||||||
|
src="https://img.shields.io/badge/license-CC%20BY--NC--SA%204.0-lightgrey"
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
<br />
|
||||||
|
Ce travail est sous licence
|
||||||
|
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">
|
||||||
|
Licence Creative Commons Attribution - Pas d'Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
## Star History
|
||||||
|
|
||||||
|
[](https://www.star-history.com/#datawhalechina/easy-vibe&type=date&legend=top-left)
|
||||||
@@ -0,0 +1,231 @@
|
|||||||
|
<!-- trigger vercel build -->
|
||||||
|
<div align="center">
|
||||||
|
|
||||||
|
<pre style="font-family: 'Courier New', monospace; font-size: 16px; color: #000000; margin: 0; padding: 0; line-height: 1.2; transform: skew(-1deg, 0deg); display: block;">
|
||||||
|
███████╗ █████╗ ███████╗██╗ ██╗ ██╗ ██╗██╗██████╗ ███████╗
|
||||||
|
██╔════╝██╔══██╗██╔════╝╚██╗ ██╔╝ ██║ ██║██║██╔══██╗██╔════╝
|
||||||
|
█████╗ ███████║███████╗ ╚████╔╝ ██║ ██║██║██████╔╝█████╗
|
||||||
|
██╔══╝ ██╔══██║╚════██║ ╚██╔╝ ╚██╗ ██╔╝██║██╔══██╗██╔══╝
|
||||||
|
███████╗██║ ██║███████║ ██║ ╚████╔╝ ██║██████╔╝███████╗
|
||||||
|
╚══════╝╚═╝ ╚═╝╚══════╝ ╚═╝ ╚═══╝ ╚═╝╚═════╝ ╚══════╝</pre>
|
||||||
|
|
||||||
|
# Easy-Vibe: Learn Vibe Coding from 0 to 1
|
||||||
|
|
||||||
|
### *ゼロから、プロジェクトベース学習、最初の AI 製品を構築*
|
||||||
|
|
||||||
|
<p align="center">
|
||||||
|
📌 <a href="https://datawhalechina.github.io/easy-vibe/">オンラインで読み始める (Start Reading Online)</a>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p align="center">
|
||||||
|
<a href="https://datawhalechina.github.io/easy-vibe/">オンラインで読む</a> ·
|
||||||
|
<a href="#-コンテンツナビゲーション">学習マップ</a> ·
|
||||||
|
<a href="#contact">コミュニティ交流</a>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p align="center">
|
||||||
|
<a href="https://github.com/datawhalechina/easy-vibe/stargazers" target="_blank">
|
||||||
|
<img src="https://img.shields.io/github/stars/datawhalechina/easy-vibe?color=660874&style=for-the-badge&logo=star&logoColor=white&labelColor=1a1a2e" alt="Stars"></a>
|
||||||
|
<a href="https://github.com/datawhalechina/easy-vibe/network/members" target="_blank">
|
||||||
|
<img src="https://img.shields.io/github/forks/datawhalechina/easy-vibe?color=660874&style=for-the-badge&logo=git-fork&logoColor=white&labelColor=1a1a2e" alt="Forks"></a>
|
||||||
|
<a href="LICENSE" target="_blank">
|
||||||
|
<img src="https://img.shields.io/badge/License-CC_BY_NC_SA_4.0-4ecdc4?style=for-the-badge&logo=creative-commons&logoColor=white&labelColor=1a1a2e" alt="License"></a>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p align="center">
|
||||||
|
<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="./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>
|
||||||
|
<a href="../ko-KR/README.md"><img alt="한국어" src="https://img.shields.io/badge/한국어-d9d9d9"></a>
|
||||||
|
<a href="../ar-SA/README.md"><img alt="العربية" src="https://img.shields.io/badge/العربية-d9d9d9"></a>
|
||||||
|
<a href="../vi-VN/README.md"><img alt="Tiếng_Việt" src="https://img.shields.io/badge/Tiếng_Việt-d9d9d9"></a>
|
||||||
|
<a href="../de-DE/README.md"><img alt="Deutsch" src="https://img.shields.io/badge/Deutsch-d9d9d9"></a>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
## 🚀 プロジェクト紹介
|
||||||
|
|
||||||
|
AI でコードを書こうとしてエラーが続き、諦めかけたくなり、プログラムを本当にオンラインにする方法がわからないとき 😢
|
||||||
|
|
||||||
|
本チュートリアルは、0 から 1 まで、Vibe Coding のスキルを段階的に習得できるように設計されています：
|
||||||
|
|
||||||
|
- **第 0 段階**：**ミニゲームから迅速に入門**して Vibe Coding のスキルを習得
|
||||||
|
- **第 1 段階**：プロダクトマネージャーの視点からの **Vibe Coding スキルと業務理解**、Web アプリケーションプロトタイプの実装
|
||||||
|
- **第 2 段階**：**フロントエンド・バックエンド開発と AI 能力**に関連する Vibe Coding テクニックの学習、完全なアプリケーションの完成
|
||||||
|
- **第 3 段階**：**マルチプラットフォーム複雑アプリケーション**の構築手法を習得、本番級アプリケーションへ
|
||||||
|
|
||||||
|
私たちは、Vibe Coding を習得し体系的なトレーニングを組み合わせることで、一人でフロントエンド開発、バックエンド開発、AI 能力統合、プロダクトデザインを兼ね備えた開発者になれると信じています。
|
||||||
|
|
||||||
|
> **本プロジェクトは主に 3 種類の学習者を対象としています：**
|
||||||
|
>
|
||||||
|
> - **初心者（一般人 / プロダクト・運用担当者）**：非技術系初心者が重要な概念を理解し、最初のプロダクトプロトタイプを完成させるのを支援
|
||||||
|
> - **初中級開発者（一定の基礎がある学生と開発者）**：フロントエンド・バックエンドの Vibe Coding と AI 能力の知識を習得
|
||||||
|
> - **上級開発者（企業・スタートアップ、オープンソース・独立開発者）**：高度な開発技術、マルチプラットフォーム開発
|
||||||
|
|
||||||
|
### 📖 コンテンツナビゲーション
|
||||||
|
|
||||||
|
<div align="center">
|
||||||
|
<img src="../assets/readme-image1.png" alt="Learning Map" width="100%" style="border-radius: 10px; box-shadow: 0 8px 20px rgba(45,55,72,0.3); margin: 15px 0;"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
### 総付録
|
||||||
|
|
||||||
|
[AI 能力辞書：一般的な AI コア概念と用語、シーンの解釈](docs/appendix/ai-capability-dictionary.md)
|
||||||
|
|
||||||
|
### 零、幼児園
|
||||||
|
|
||||||
|
| 章 | 主要内容 | 状態 |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| [前書：学習マップ](docs/stage-0/0.1-learning-map/index.md) | 全体学習パスのガイド | ✅ |
|
||||||
|
| [初級一：AI 時代、話せるだけでプログラミングできる](docs/stage-0/0.2-ai-capabilities-through-games/index.md) | スネークゲームなどの事例を通じて AI プログラミングの能力を初めて体験 | ✅ |
|
||||||
|
|
||||||
|
### 一、AI プロダクトマネージャー
|
||||||
|
|
||||||
|
| 章 | 主要内容 | 状態 |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| [初級二：AI IDE ツールを知る](docs/stage-1/1.1-introduction-to-ai-ide/index.md) | IDE の使用方法を学び、ローカルでミニゲームを作成 | ✅ |
|
||||||
|
| [初級三：手を動かしてプロトタイプを作る](docs/stage-1/1.2-building-prototype/index.md) | ニーズ分析、AI による単一ページ生成、複数ページプロダクトプロトタイプの生成へ | ✅ |
|
||||||
|
| [初級四：プロトタイプに AI 能力を追加](docs/stage-1/1.3-integrating-ai-capabilities/index.md) | 一般的な AI 能力（テキスト、画像、動画）の接続方法を習得 | ✅ |
|
||||||
|
| [初級五：完全プロジェクト実戦](docs/stage-1/1.4-complete-project-practice/index.md) | 実際のシーンをシミュレート、ユーザーフィードバックを受け反復改良、プロジェクトを完全に | ✅ |
|
||||||
|
| [大課題：完全な Web アプリケーションプロトタイプを作成し展示](docs/stage-1/1.5-final-project/index.md) | アプリケーションを完全に実装し、アプリケーション効果を展示 | ✅ |
|
||||||
|
|
||||||
|
#### 付録
|
||||||
|
|
||||||
|
| 章 | 主要内容 | 状態 |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| [付録 A：プロダクト思考補充](docs/stage-1/appendix-a-product-thinking/index.md) | ゼロからイチまでプロダクトを作る際に必要な思考フレームワーク | ✅ |
|
||||||
|
| [付録 B：一般的なエラーと解決策](docs/stage-1/appendix-b-common-errors/index.md) | Vibe Coding における一般的なエラーとトラブルシューティング方法 | ✅ |
|
||||||
|
|
||||||
|
### 二、初中級開発エンジニア
|
||||||
|
|
||||||
|
#### フロントエンド部分
|
||||||
|
|
||||||
|
| 章 | 主要内容 | 状態 |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| [フロントエンド零：lovart を使用して素材を生成](docs/stage-2/frontend/2.0-lovart-assets/) | lovart を使ってキャラクター、シーンなどの視覚素材を一括生成し、UI デザインとフロントエンド開発に素材基盤を提供 | 🚧 |
|
||||||
|
| [フロントエンド一：Figma と MasterGo 入門](docs/stage-2/frontend/2.1-figma-mastergo/) | デザインツールを使って情報アーキテクチャとページ構造を整理し、フロントエンド実装の基礎を築く | 🚧 |
|
||||||
|
| [フロントエンド二：最初のモダンアプリケーションを構築 - UI デザイン](docs/stage-2/frontend/2.2-ui-design/) | デザイン画に基づいてコンポーネント化インターフェースを完成させ、デザインからコードへの最初のパスを実現 | 🚧 |
|
||||||
|
| [フロントエンド三：UI デザイン仕様とマルチプロダクト UI デザインを参照](docs/stage-2/frontend/2.3-multi-product-ui/) | 統一されたメインビジュアルを中心にマルチプロダクトインターフェースを拡張し、体系的デザイン能力を練習 | 🚧 |
|
||||||
|
| [フロントエンド四：一緒にハリー・ポッターの肖像画を作ろう](docs/stage-2/frontend/2.4-hogwarts-portraits/chapter4-lets-build-hogwarts-portraits.md) | 0 から 1 まで AI 能力を統合したフロントエンドアプリケーションを作成し、デザインと開発を接続 | ✅ |
|
||||||
|
|
||||||
|
#### バックエンドとフルスタック部分
|
||||||
|
|
||||||
|
| 章 | 主要内容 | 状態 |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| [バックエンド一：API とは](docs/stage-2/backend/2.1-what-is-api/extra2/extra2-what-is-api.md) | HTTP インターフェースとリクエスト・レスポンスモデルを理解し、バックエンド統合と連携調整の準備 | ✅ |
|
||||||
|
| [バックエンド二：データベースから Supabase へ](docs/stage-2/backend/2.2-database-supabase/chapter5/chapter5-from-database-to-supabase.md) | Supabase 上でデータベースと API を実装し、データモデルとフロントエンドページを接続 | ✅ |
|
||||||
|
| [バックエンド三：大規模言語モデル支援によるインターフェースコードとドキュメント作成](docs/stage-2/backend/2.3-ai-interface-code/) | 大規模言語モデルを使ってインターフェースとデータベースのドキュメントおよびコードの生成を支援し、読みやすくテスト可能なバックエンドを実現 | 🚧 |
|
||||||
|
| [バックエンド四：Git ワークフロー](docs/stage-2/backend/2.4-git-workflow/extra1/extra1-what-is-git-and-what-is-github.md) | Git ワークフローでコードを管理し、バージョン管理とコラボレーションを行う | ✅ |
|
||||||
|
| [バックエンド五：Zeabur デプロイ](docs/stage-2/backend/2.5-zeabur-deployment/extra6/extra6-zeabur-what-is-it-and-how-to-deploy-web-applications.md) | アプリケーションを Zeabur にデプロイしてオンライン化 | ✅ |
|
||||||
|
| [バックエンド六：モダン CLI 開発ツール](docs/stage-2/backend/2.6-modern-cli/extra7/extra7-cli-ai-coding-tools-and-the-principles-of-test-driven-development.md) | CLI 系 AI プログラミングツールを使用して開発とデバッグを加速し、個人のエンジニアリングワークフローを形成 | ✅ |
|
||||||
|
| [バックエンド七：Stripe などの課金システムの統合方法](docs/stage-2/backend/2.7-stripe-payment/) | 決済システムを接続し、課金パスと基本決済フローを完成 | 🚧 |
|
||||||
|
| [大課題 1：最初のモダンアプリケーションを構築 - フルスタックアプリ](docs/stage-2/assignments/2.1-fullstack-app/) | フロントエンド、バックエンド、決済モジュールを統合し、オンライン可能なフルスタック Web アプリケーションを完成 | 🚧 |
|
||||||
|
| [大課題 2：モダンフロントエンドコンポーネントライブラリ + Trae 実戦](docs/stage-2/assignments/2.2-modern-frontend-trae/) | モダンフロントエンドコンポーネントライブラリと Trae を使用し、ログイン・登録可能で課金対応のプロダクトを独立完成 | 🚧 |
|
||||||
|
|
||||||
|
#### AI 能力付録
|
||||||
|
|
||||||
|
| 章 | 主要内容 | 状態 |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| [ AI 一：Dify 入門とナレッジベース統合](docs/stage-2/ai-capabilities/2.1-dify-knowledge-base/chapter3/chapter3-getting-started-with-dify-and-its-knowledge-base-integration.md) | Dify Workflow と基本 RAG を使ってツール系プロダクトを構築し、以降のアプリケーションアップグレードのモデルケースを作成 | ✅ |
|
||||||
|
| [ AI 二：AI 辞典の検索とマルチモーダル API 統合を学ぶ](docs/stage-2/ai-capabilities/2.2-multimodal-api/extra3/extra3-ai-capability-starter-handbook.md) | 適切なモデルと API を検索する方法を学び、テキスト、画像などのマルチモーダル能力をプロダクトに統合 | 🚧 |
|
||||||
|
|
||||||
|
### 三、上級開発エンジニア
|
||||||
|
|
||||||
|
| 章 | 主要内容 | 状態 |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| [上級一：MCP と ClaudeCode Skills](docs/stage-3/core-skills/3.1-mcp-claudecode-skills/) | MCP と Skills を通じて IDE 能力を拡張し、外部サービスをツールとして接続 | 🚧 |
|
||||||
|
| [上級二：Coding Tools を長時間動作させる方法](docs/stage-3/core-skills/3.2-long-running-tasks/) | 長時間動作するタスクを設計・設定し、Coding Tools をより安定して信頼性の高いものに | 🚧 |
|
||||||
|
| [上級三：マルチプラットフォーム開発：WeChat ミニプログラムの構築方法](docs/stage-3/cross-platform/3.3-wechat-miniprogram/) | WeChat ミニプログラムのエコシステムを理解し、公式テンプレートからリリースまでフロントエンドミニプログラムを完成 | ✅ |
|
||||||
|
| [上級四：マルチプラットフォーム開発：WeChat ミニプログラムの構築方法 - バックエンド含む](docs/stage-3/cross-platform/3.4-wechat-miniprogram-backend/) | ミニプログラムにデータベースとバックエンドロジックを統合し、完全な業務クローズドループを実現 | 🚧 |
|
||||||
|
| [上級五：マルチプラットフォーム開発：Android アプリの構築方法](docs/stage-3/cross-platform/3.5-android-app/) | Expo などのツールを使用し、Web/ネイティブ一体化の Android アプリ開発を完成 | 🚧 |
|
||||||
|
| [上級六：マルチプラットフォーム開発：iOS アプリの構築方法](docs/stage-3/cross-platform/3.6-ios-app/) | Expo などのツールを使用し、Web/ネイティブ一体化の iOS アプリ開発を完成 | 🚧 |
|
||||||
|
| [上級七：自分専用の個人ウェブページと学術ブログの構築方法](docs/stage-3/personal-brand/3.7-personal-website-blog/) | 選定、構築からデプロイまで、個人プロジェクトと学術成果を展示する長期的なオンラインホームページを構築 | 🚧 |
|
||||||
|
|
||||||
|
#### AI 能力付録
|
||||||
|
|
||||||
|
| 章 | 主要内容 | 状態 |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| [上級 AI 一：RAG とは、それがどのように動作するか](docs/stage-3/ai-advanced/3.a1-rag-introduction/extra5-what-is-rag-and-how-does-it-work-and-future.md) | RAG 原理と一般的なアーキテクチャを体系的に理解し、複雑なアプリケーションに知識検索基盤を提供 | ✅ |
|
||||||
|
| [上級 AI 二：中上級 RAG とワークフロー編成：LangGraph を例に](docs/stage-3/ai-advanced/3.a2-langgraph-advanced-rag/) | LangGraph などのツールを使用してマルチステップワークフローと中上級 RAG システムを設計 | 🚧 |
|
||||||
|
|
||||||
|
## 🛠️ 学習方法
|
||||||
|
|
||||||
|
- 個人の能力に応じて、関連する章を選択的に読み实践し、問題があれば Issue で質問してください。
|
||||||
|
|
||||||
|
## 💻 本课件をローカルで起動
|
||||||
|
|
||||||
|
### モダン手法
|
||||||
|
|
||||||
|
AI IDE ダイアログボックス（vscode、cursor、trae など）で、以下のプロンプトを入力して本课件を起動：
|
||||||
|
|
||||||
|
```
|
||||||
|
このプロジェクトのローカルサービスを実行してください
|
||||||
|
```
|
||||||
|
|
||||||
|
### 旧手法
|
||||||
|
|
||||||
|
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/sanbuphy) (Datawhale メンバー)
|
||||||
|
- 方可-指導教官（Datawhale メンバー、清華大学）
|
||||||
|
- [Yerim Kang](https://github.com/yerim25)（实践项目部分-清華大学）
|
||||||
|
- 赵芷霖（実践プロジェクト部分-清華大学）
|
||||||
|
- [李亦萱](https://yixuan20.github.io/)（ページ美術デザイン-清華大学）
|
||||||
|
- AI Vibe Coding 101 ベータテストグループでアドバイスと体験を提供してくれたすべての仲間たち
|
||||||
|
|
||||||
|
### 特別な感謝
|
||||||
|
|
||||||
|
- [@Sm1les](https://github.com/Sm1les) さんの本プロジェクトへの支援と支持に感謝
|
||||||
|
- 本プロジェクトに貢献してくれたすべての開発者に感謝 ❤️
|
||||||
|
|
||||||
|
<div align=center style="margin-top: 30px;">
|
||||||
|
<a href="https://github.com/datawhalechina/easy-vibe/graphs/contributors">
|
||||||
|
<img src="https://contrib.rocks/image?repo=datawhalechina/easy-vibe" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
## <span id="contact">📧 お問い合わせ</span>
|
||||||
|
|
||||||
|
<div align=center>
|
||||||
|
<p>ご質問、ご提案、不満、または交流をご希望の場合は、以下の QR コードをスキャンしてください</p>
|
||||||
|
<img src="../assets/wechat.png" width="280">
|
||||||
|
|
||||||
|
<p>以下の QR コードをスキャンして公式アカウントをフォローしてください：Datawhale</p>
|
||||||
|
<img src="https://raw.githubusercontent.com/datawhalechina/pumpkin-book/master/res/qrcode.jpeg" width="180" height="180">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
## 📄 LICENSE
|
||||||
|
|
||||||
|
<div align="center">
|
||||||
|
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">
|
||||||
|
<img
|
||||||
|
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>
|
||||||
|
の下でライセンスされています。
|
||||||
|
</div>
|
||||||
|
|
||||||
|
## Star History
|
||||||
|
|
||||||
|
[](https://www.star-history.com/#datawhalechina/easy-vibe&type=date&legend=top-left)
|
||||||
@@ -0,0 +1,231 @@
|
|||||||
|
<!-- trigger vercel build -->
|
||||||
|
<div align="center">
|
||||||
|
|
||||||
|
<pre style="font-family: 'Courier New', monospace; font-size: 16px; color: #000000; margin: 0; padding: 0; line-height: 1.2; transform: skew(-1deg, 0deg); display: block;">
|
||||||
|
███████╗ █████╗ ███████╗██╗ ██╗ ██╗ ██╗██╗██████╗ ███████╗
|
||||||
|
██╔════╝██╔══██╗██╔════╝╚██╗ ██╔╝ ██║ ██║██║██╔══██╗██╔════╝
|
||||||
|
█████╗ ███████║███████╗ ╚████╔╝ ██║ ██║██║██████╔╝█████╗
|
||||||
|
██╔══╝ ██╔══██║╚════██║ ╚██╔╝ ╚██╗ ██╔╝██║██╔══██╗██╔══╝
|
||||||
|
███████╗██║ ██║███████║ ██║ ╚████╔╝ ██║██████╔╝███████╗
|
||||||
|
╚══════╝╚═╝ ╚═╝╚══════╝ ╚═╝ ╚═══╝ ╚═╝╚═════╝ ╚══════╝</pre>
|
||||||
|
|
||||||
|
# Easy-Vibe: Learn Vibe Coding from 0 to 1
|
||||||
|
|
||||||
|
### *0부터, 프로젝트 기반 학습, 첫 번째 AI 제품 구축*
|
||||||
|
|
||||||
|
<p align="center">
|
||||||
|
📌 <a href="https://datawhalechina.github.io/easy-vibe/">온라인으로 읽기 시작하기 (Start Reading Online)</a>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p align="center">
|
||||||
|
<a href="https://datawhalechina.github.io/easy-vibe/">온라인으로 읽기</a> ·
|
||||||
|
<a href="#-콘텐츠네비게이션">학습 맵</a> ·
|
||||||
|
<a href="#contact">커뮤니티 소통</a>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p align="center">
|
||||||
|
<a href="https://github.com/datawhalechina/easy-vibe/stargazers" target="_blank">
|
||||||
|
<img src="https://img.shields.io/github/stars/datawhalechina/easy-vibe?color=660874&style=for-the-badge&logo=star&logoColor=white&labelColor=1a1a2e" alt="Stars"></a>
|
||||||
|
<a href="https://github.com/datawhalechina/easy-vibe/network/members" target="_blank">
|
||||||
|
<img src="https://img.shields.io/github/forks/datawhalechina/easy-vibe?color=660874&style=for-the-badge&logo=git-fork&logoColor=white&labelColor=1a1a2e" alt="Forks"></a>
|
||||||
|
<a href="LICENSE" target="_blank">
|
||||||
|
<img src="https://img.shields.io/badge/License-CC_BY_NC_SA_4.0-4ecdc4?style=for-the-badge&logo=creative-commons&logoColor=white&labelColor=1a1a2e" alt="License"></a>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p align="center">
|
||||||
|
<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>
|
||||||
|
<a href="./README.md"><img alt="한국어" src="https://img.shields.io/badge/한국어-d9d9d9"></a>
|
||||||
|
<a href="../ar-SA/README.md"><img alt="العربية" src="https://img.shields.io/badge/العربية-d9d9d9"></a>
|
||||||
|
<a href="../vi-VN/README.md"><img alt="Tiếng_Việt" src="https://img.shields.io/badge/Tiếng_Việt-d9d9d9"></a>
|
||||||
|
<a href="../de-DE/README.md"><img alt="Deutsch" src="https://img.shields.io/badge/Deutsch-d9d9d9"></a>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
## 🚀 프로젝트 소개
|
||||||
|
|
||||||
|
AI로 코드를 작성하려고 할 때 오류가 계속 발생하고, 포기하고 싶어지며, 프로그램을 실제로 온라인에 배포하는 방법을 명확히 알지 못할 때 😢
|
||||||
|
|
||||||
|
이 튜토리얼은 0에서 1까지 Vibe Coding 기술을 점진적으로 마스터할 수 있도록 특별히 설계되었습니다:
|
||||||
|
|
||||||
|
- **0단계**: **미니게임을 통해 빠르게 입문**하여 Vibe Coding 기술 습득
|
||||||
|
- **1단계**: 프로덕트 매니저 관점에서 **Vibe Coding 기술과 비즈니스 이해**, 웹 애플리케이션 프로토타입 구현
|
||||||
|
- **2단계**: **프론트엔드/백엔드 개발과 AI 능력**과 관련된 Vibe Coding 테크닉 학습, 완전한 애플리케이션 완성
|
||||||
|
- **3단계**: **멀티플랫폼 복잡 애플리케이션** 구축 방법 마스터, 프로덕션급 애플리케이션으로
|
||||||
|
|
||||||
|
우리는 Vibe Coding을 마스터하고 체계적인 훈련을 결합하면, 한 사람이 프론트엔드 개발, 백엔드 개발, AI 능력 통합, 프로덕트 디자인을 모두 갖춘 개발자가 될 수 있다고 믿습니다.
|
||||||
|
|
||||||
|
> **이 프로젝트는 주로 세 가지 유형의 학습자를 대상으로 합니다:**
|
||||||
|
>
|
||||||
|
> - **초보자(일반인 / 프로덕트 및 운용 담당자)**: 비기술 초보자가 핵심 개념을 이해하고 첫 번째 프로덕트 프로토타입을 완성하도록 지원
|
||||||
|
> - **초중급 개발자(일정 기초가 있는 학생과 개발자)**: 프론트엔드/백엔드 Vibe Coding과 AI 능력 지식 습득
|
||||||
|
> - **고급 개발자(기업/스타트업, 오픈소스/독립 개발자)**: 고급 개발 기술, 멀티플랫폼 개발
|
||||||
|
|
||||||
|
### 📖 콘텐츠 네비게이션
|
||||||
|
|
||||||
|
<div align="center">
|
||||||
|
<img src="../assets/readme-image1.png" alt="Learning Map" width="100%" style="border-radius: 10px; box-shadow: 0 8px 20px rgba(45,55,72,0.3); margin: 15px 0;"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
### 총 부록
|
||||||
|
|
||||||
|
[AI 능력 사전: 일반적인 AI 핵심 개념과 용어, 시나리오 설명](docs/appendix/ai-capability-dictionary.md)
|
||||||
|
|
||||||
|
### 0. 유치원
|
||||||
|
|
||||||
|
| 장 | 주요 내용 | 상태 |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| [서론: 학습 맵](docs/stage-0/0.1-learning-map/index.md) | 전체 학습 경로 가이드 | ✅ |
|
||||||
|
| [초급 1: AI 시대, 말할 수 있으면 프로그래밍 가능](docs/stage-0/0.2-ai-capabilities-through-games/index.md) | 스네이크 게임 등 사례를 통해 AI 프로그래밍 능력을 처음 체험 | ✅ |
|
||||||
|
|
||||||
|
### 1. AI 프로덕트 매니저
|
||||||
|
|
||||||
|
| 장 | 주요 내용 | 상태 |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| [초급 2: AI IDE 도구 이해](docs/stage-1/1.1-introduction-to-ai-ide/index.md) | IDE 사용법 배우기, 로컬에서 미니게임 제작 | ✅ |
|
||||||
|
| [초급 3: 직접 프로토타입 만들기](docs/stage-1/1.2-building-prototype/index.md) | 요구사항 분석, AI 단일 페이지 생성, 다중 페이지 프로덕트 프로토타입 생성으로 | ✅ |
|
||||||
|
| [초급 4: 프로토타입에 AI 능력 추가](docs/stage-1/1.3-integrating-ai-capabilities/index.md) | 일반적인 AI 능력(텍스트, 이미지, 비디오) 연결 방법 습득 | ✅ |
|
||||||
|
| [초급 5: 완전 프로젝트 실전](docs/stage-1/1.4-complete-project-practice/index.md) | 실제 시나리오 시뮬레이션, 사용자 피드백 수용 반복 개선, 프로젝트 완성 | ✅ |
|
||||||
|
| [대 과제: 완전한 웹 애플리케이션 프로토타입 만들기 및 전시](docs/stage-1/1.5-final-project/index.md) | 애플리케이션 완전 구현, 애플리케이션 효과 전시 | ✅ |
|
||||||
|
|
||||||
|
#### 부록
|
||||||
|
|
||||||
|
| 장 | 주요 내용 | 상태 |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| [부록 A: 프로덕트 사고 보충](docs/stage-1/appendix-a-product-thinking/index.md) | 0에서 1까지 프로덕트 만들 때 필요한 사고 프레임워크 | ✅ |
|
||||||
|
| [부록 B: 일반적인 오류 및 해결 방안](docs/stage-1/appendix-b-common-errors/index.md) | Vibe Coding의 일반적인 오류 및 문제 해결 방법 | ✅ |
|
||||||
|
|
||||||
|
### 2. 초중급 개발 엔지니어
|
||||||
|
|
||||||
|
#### 프론트엔드 부분
|
||||||
|
|
||||||
|
| 장 | 주요 내용 | 상태 |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| [프론트엔드 0: lovart 사용하여 소재 생성](docs/stage-2/frontend/2.0-lovart-assets/) | lovart를 사용하여 캐릭터, 장면 등 시각 자료 일괄 생성, UI 디자인과 프론트엔드 개발에 자료 기반 제공 | 🚧 |
|
||||||
|
| [프론트엔드 1: Figma와 MasterGo 입문](docs/stage-2/frontend/2.1-figma-mastergo/) | 디자인 도구로 정보 아키텍처와 페이지 구조 정리, 프론트엔드 구현 기반 마련 | 🚧 |
|
||||||
|
| [프론트엔드 2: 첫 번째 현대 애플리케이션 구축 - UI 디자인](docs/stage-2/frontend/2.2-ui-design/) | 디자인 안을 기반으로 컴포넌트화 인터페이스 완성, 디자인에서 코드까지의 첫 번째 경로 실현 | 🚧 |
|
||||||
|
| [프론트엔드 3: UI 디자인 사양 및 다중 프로덕트 UI 디자인 참조](docs/stage-2/frontend/2.3-multi-product-ui/) | 통합된 메인 비주얼을 중심으로 다중 프로덕트 인터페이스 확장, 체계적 디자인 능력 연습 | 🚧 |
|
||||||
|
| [프론트엔드 4: 함께 해리포트 초상화 만들기](docs/stage-2/frontend/2.4-hogwarts-portraits/chapter4-lets-build-hogwarts-portraits.md) | 0에서 1까지 AI 능력을 통합한 프론트엔드 애플리케이션 제작, 디자인과 개발 연결 | ✅ |
|
||||||
|
|
||||||
|
#### 백엔드와 풀스택 부분
|
||||||
|
|
||||||
|
| 장 | 주요 내용 | 상태 |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| [백엔드 1: API란](docs/stage-2/backend/2.1-what-is-api/extra2/extra2-what-is-api.md) | HTTP 인터페이스와 요청-응답 모델 이해, 백엔드 통합과 연동 조정 준비 | ✅ |
|
||||||
|
| [백엔드 2: 데이터베이스에서 Supabase로](docs/stage-2/backend/2.2-database-supabase/chapter5/chapter5-from-database-to-supabase.md) | Supabase상에서 데이터베이스와 API 구현, 데이터 모델과 프론트엔드 페이지 연결 | ✅ |
|
||||||
|
| [백엔드 3: 대규모 언어 모델 지원 인터페이스 코드 및 문서 작성](docs/stage-2/backend/2.3-ai-interface-code/) | 대규모 언어 모델을 활용하여 인터페이스와 데이터베이스 문서 및 코드 생성 지원, 읽기 쉽고 테스트 가능한 백엔드 실현 | 🚧 |
|
||||||
|
| [백엔드 4: Git 워크플로우](docs/stage-2/backend/2.4-git-workflow/extra1/extra1-what-is-git-and-what-is-github.md) | Git 워크플로우에서 코드 관리, 버전 관리 및 협업 수행 | ✅ |
|
||||||
|
| [백엔드 5: Zeabur 배포](docs/stage-2/backend/2.5-zeabur-deployment/extra6/extra6-zeabur-what-is-it-and-how-to-deploy-web-applications.md) | 애플리케이션을 Zeabur에 배포하여 온라인화 | ✅ |
|
||||||
|
| [백엔드 6: 현대 CLI 개발 도구](docs/stage-2/backend/2.6-modern-cli/extra7/extra7-cli-ai-coding-tools-and-the-principles-of-test-driven-development.md) | CLI 계열 AI 프로그래밍 도구 사용하여 개발과 디버깅 가속화, 개인 엔지니어링 워크플로우 형성 | ✅ |
|
||||||
|
| [백엔드 7: Stripe 등 유료 시스템 통합 방법](docs/stage-2/backend/2.7-stripe-payment/) | 결제 시스템 연결, 유료 경로와 기본 정산 흐름 완성 | 🚧 |
|
||||||
|
| [대 과제 1: 첫 번째 현대 애플리케이션 구축 - 풀스택 앱](docs/stage-2/assignments/2.1-fullstack-app/) | 프론트엔드, 백엔드, 결제 모듈 통합, 온라인 가능한 풀스택 웹 애플리케이션 완성 | 🚧 |
|
||||||
|
| [대 과제 2: 현대 프론트엔드 컴포넌트 라이브러리 + Trae 실전](docs/stage-2/assignments/2.2-modern-frontend-trae/) | 현대 프론트엔드 컴포넌트 라이브러리와 Trae 사용, 로그인/등록 가능하고 유료 지원 프로덕트 독립 완성 | 🚧 |
|
||||||
|
|
||||||
|
#### AI 능력 부록
|
||||||
|
|
||||||
|
| 장 | 주요 내용 | 상태 |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| [AI 1: Dify 입문과 지식 베이스 통합](docs/stage-2/ai-capabilities/2.1-dify-knowledge-base/chapter3/chapter3-getting-started-with-dify-and-its-knowledge-base-integration.md) | Dify Workflow와 기본 RAG 사용하여 도구 계열 프로덕트 구축, 이후 애플리케이션 업그레이드 모델 사례 작성 | ✅ |
|
||||||
|
| [AI 2: AI 사전 검색 및 멀티모달 API 통합 학습](docs/stage-2/ai-capabilities/2.2-multimodal-api/extra3/extra3-ai-capability-starter-handbook.md) | 적절한 모델과 API 검색 방법 학습, 텍스트, 이미지 등 멀티모달 능력을 프로덕트에 통합 | 🚧 |
|
||||||
|
|
||||||
|
### 3. 고급 개발 엔지니어
|
||||||
|
|
||||||
|
| 장 | 주요 내용 | 상태 |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| [고급 1: MCP와 ClaudeCode Skills](docs/stage-3/core-skills/3.1-mcp-claudecode-skills/) | MCP와 Skills를 통해 IDE 능력 확장, 외부 서비스를 도구로 연결 | 🚧 |
|
||||||
|
| [고급 2: Coding Tools를 장시간 작동시키는 방법](docs/stage-3/core-skills/3.2-long-running-tasks/) | 장시간 실행되는 작업 설계 및 구성, Coding Tools를 더 안정적이고 신뢰할 수 있게 | 🚧 |
|
||||||
|
| [고급 3: 멀티플랫폼 개발: 위챗 미니 프로그램 구축 방법](docs/stage-3/cross-platform/3.3-wechat-miniprogram/) | 위챗 미니 프로그램 생태계 이해, 공식 템플릿부터 출시까지 프론트엔드 미니 프로그램 완성 | ✅ |
|
||||||
|
| [고급 4: 멀티플랫폼 개발: 위챗 미니 프로그램 구축 방법 - 백엔드 포함](docs/stage-3/cross-platform/3.4-wechat-miniprogram-backend/) | 미니 프로그램에 데이터베이스와 백엔드 로직 통합, 완전한 비즈니스 폐루프 실현 | 🚧 |
|
||||||
|
| [고급 5: 멀티플랫폼 개발: 안드로이드 앱 구축 방법](docs/stage-3/cross-platform/3.5-android-app/) | Expo 등 도구 사용, Web/네이티브 일체화 안드로이드 앱 개발 완성 | 🚧 |
|
||||||
|
| [고급 6: 멀티플랫폼 개발: iOS 앱 구축 방법](docs/stage-3/cross-platform/3.6-ios-app/) | Expo 등 도구 사용, Web/네이티브 일체화 iOS 앱 개발 완성 | 🚧 |
|
||||||
|
| [고급 7: 자신만의 개인 웹페이지와 학술 블로그 구축 방법](docs/stage-3/personal-brand/3.7-personal-website-blog/) | 선정, 구축부터 배포까지, 개인 프로젝트와 학술 성과를 전시하는 장기 온라인 홈페이지 구축 | 🚧 |
|
||||||
|
|
||||||
|
#### AI 능력 부록
|
||||||
|
|
||||||
|
| 장 | 주요 내용 | 상태 |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| [고급 AI 1: RAG란 무엇이며 어떻게 작동하는가](docs/stage-3/ai-advanced/3.a1-rag-introduction/extra5-what-is-rag-and-how-does-it-work-and-future.md) | RAG 원리와 일반적인 아키텍처 체계적 이해, 복잡한 애플리케이션에 지식 검색 기반 제공 | ✅ |
|
||||||
|
| [고급 AI 2: 중고급 RAG와 워크플로우 편성: LangGraph 예시](docs/stage-3/ai-advanced/3.a2-langgraph-advanced-rag/) | LangGraph 등 도구 사용하여 다단계 워크플로우와 중고급 RAG 시스템 설계 | 🚧 |
|
||||||
|
|
||||||
|
## 🛠️ 학습 방법
|
||||||
|
|
||||||
|
- 개인 능력에 따라 관련 장을 선택적으로 읽고 실습하며, 문제가 있으면 Issue로 질문해 주세요.
|
||||||
|
|
||||||
|
## 💻 이 과정을 로컬에서 시작
|
||||||
|
|
||||||
|
### 현대적 방법
|
||||||
|
|
||||||
|
AI IDE 대화상자(vscode, cursor, trae 등)에서 다음 프롬프트를 입력하여 이 과정을 시작:
|
||||||
|
|
||||||
|
```
|
||||||
|
이 프로젝트의 로컬 서비스를 실행해주세요
|
||||||
|
```
|
||||||
|
|
||||||
|
### 구식 방법
|
||||||
|
|
||||||
|
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/sanbuphy) (Datawhale 회원)
|
||||||
|
- 방可-지도 교사(Datawhale 회원, 칭화대학)
|
||||||
|
- [Yerim Kang](https://github.com/yerim25)（실습 프로젝트 부분-칭화대학）
|
||||||
|
- 赵芷霖（실습 프로젝트 부분-칭화대학）
|
||||||
|
- [李亦萱](https://yixuan20.github.io/)（페이지 미술 디자인-칭화대학）
|
||||||
|
- AI Vibe Coding 101 베타 테스트 그룹에서 제안과 경험을 제공한 모든 동료들
|
||||||
|
|
||||||
|
### 특별한 감사
|
||||||
|
|
||||||
|
- [@Sm1les](https://github.com/Sm1les) 님이 이 프로젝트에 대한 도움과 지원에 감사
|
||||||
|
- 이 프로젝트에 기여한 모든 개발자에게 감사 ❤️
|
||||||
|
|
||||||
|
<div align=center style="margin-top: 30px;">
|
||||||
|
<a href="https://github.com/datawhalechina/easy-vibe/graphs/contributors">
|
||||||
|
<img src="https://contrib.rocks/image?repo=datawhalechina/easy-vibe" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
## <span id="contact">📧 문의하기</span>
|
||||||
|
|
||||||
|
<div align=center>
|
||||||
|
<p>질문, 제안, 불만, 또는 소통을 원하시면 아래 QR 코드를 스캔해 주세요</p>
|
||||||
|
<img src="../assets/wechat.png" width="280">
|
||||||
|
|
||||||
|
<p>아래 QR 코드를 스캔하여 공식 계정을 팔로우해 주세요: Datawhale</p>
|
||||||
|
<img src="https://raw.githubusercontent.com/datawhalechina/pumpkin-book/master/res/qrcode.jpeg" width="180" height="180">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
## 📄 LICENSE
|
||||||
|
|
||||||
|
<div align="center">
|
||||||
|
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">
|
||||||
|
<img
|
||||||
|
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>
|
||||||
|
에 따라 사용이 허가되었습니다.
|
||||||
|
</div>
|
||||||
|
|
||||||
|
## Star History
|
||||||
|
|
||||||
|
[](https://www.star-history.com/#datawhalechina/easy-vibe&type=date&legend=top-left)
|
||||||
@@ -0,0 +1,230 @@
|
|||||||
|
<!-- trigger vercel build -->
|
||||||
|
<div align="center">
|
||||||
|
|
||||||
|
<pre style="font-family: 'Courier New', monospace; font-size: 16px; color: #000000; margin: 0; padding: 0; line-height: 1.2; transform: skew(-1deg, 0deg); display: block;">
|
||||||
|
███████╗ █████╗ ███████╗██╗ ██╗ ██╗ ██╗██╗██████╗ ███████╗
|
||||||
|
██╔════╝██╔══██╗██╔════╝╚██╗ ██╔╝ ██║ ██║██║██╔══██╗██╔════╝
|
||||||
|
█████╗ ███████║███████╗ ╚████╔╝ ██║ ██║██║██████╔╝█████╗
|
||||||
|
██╔══╝ ██╔══██║╚════██║ ╚██╔╝ ╚██╗ ██╔╝██║██╔══██╗██╔══╝
|
||||||
|
███████╗██║ ██║███████║ ██║ ╚████╔╝ ██║██████╔╝███████╗
|
||||||
|
╚══════╝╚═╝ ╚═╝╚══════╝ ╚═╝ ╚═══╝ ╚═╝╚═════╝ ╚══════╝</pre>
|
||||||
|
|
||||||
|
# Easy-Vibe: Learn Vibe Coding from 0 to 1
|
||||||
|
|
||||||
|
### *Từ số không, học tập dựa trên dự án, xây dựng sản phẩm AI đầu tiên của bạn*
|
||||||
|
|
||||||
|
<p align="center">
|
||||||
|
📌 <a href="https://datawhalechina.github.io/easy-vibe/">Bắt đầu đọc online (Start Reading Online)</a>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p align="center">
|
||||||
|
<a href="https://datawhalechina.github.io/easy-vibe/">Đọc online</a> ·
|
||||||
|
<a href="#-điều-hướng-nội-dung">Bản đồ học tập</a> ·
|
||||||
|
<a href="#contact">Cộng đồng</a>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p align="center">
|
||||||
|
<a href="https://github.com/datawhalechina/easy-vibe/stargazers" target="_blank">
|
||||||
|
<img src="https://img.shields.io/github/stars/datawhalechina/easy-vibe?color=660874&style=for-the-badge&logo=star&logoColor=white&labelColor=1a1a2e" alt="Stars"></a>
|
||||||
|
<a href="https://github.com/datawhalechina/easy-vibe/network/members" target="_blank">
|
||||||
|
<img src="https://img.shields.io/github/forks/datawhalechina/easy-vibe?color=660874&style=for-the-badge&logo=git-fork&logoColor=white&labelColor=1a1a2e" alt="Forks"></a>
|
||||||
|
<a href="LICENSE" target="_blank">
|
||||||
|
<img src="https://img.shields.io/badge/License-CC_BY_NC_SA_4.0-4ecdc4?style=for-the-badge&logo=creative-commons&logoColor=white&labelColor=1a1a2e" alt="License"></a>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p align="center">
|
||||||
|
<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>
|
||||||
|
<a href="../ko-KR/README.md"><img alt="한국어" src="https://img.shields.io/badge/한국어-d9d9d9"></a>
|
||||||
|
<a href="../ar-SA/README.md"><img alt="العربية" src="https://img.shields.io/badge/العربية-d9d9d9"></a>
|
||||||
|
<a href="./README.md"><img alt="Tiếng_Việt" src="https://img.shields.io/badge/Tiếng_Việt-d9d9d9"></a>
|
||||||
|
<a href="../de-DE/README.md"><img alt="Deutsch" src="https://img.shields.io/badge/Deutsch-d9d9d9"></a>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
## 🚀 Giới thiệu dự án
|
||||||
|
|
||||||
|
Khi bạn cố gắng viết code bằng AI, liên tục gặp lỗi, thường muốn từ bỏ và không rõ cách đưa chương trình của bạn lên thực tế 😢
|
||||||
|
|
||||||
|
Hướng dẫn này được thiết kế đặc biệt để đưa bạn từ 0 đến 1, làm chủ dần các kỹ thuật Vibe Coding:
|
||||||
|
|
||||||
|
- **Giai đoạn 0**: **Nhập nhanh qua mini-game** để có kỹ năng Vibe Coding
|
||||||
|
- **Giai đoạn 1**: Từ góc nhìn Product Manager, **kỹ năng Vibe Coding và hiểu biết kinh doanh**, thực hiện nguyên mẫu ứng dụng web
|
||||||
|
- **Giai đoạn 2**: Học **phát triển frontend/backend và khả năng AI** liên quan đến kỹ thuật Vibe Coding, hoàn thành ứng dụng hoàn chỉnh
|
||||||
|
- **Giai đoạn 3**: Làm chủ xây dựng **ứng dụng phức tạp đa nền tảng**, hướng tới ứng dụng cấp sản xuất
|
||||||
|
|
||||||
|
Chúng tôi tin rằng thông qua việc làm chủ Vibe Coding kết hợp với đào tạo có hệ thống, một người có thể trở thành nhà phát triển kết hợp phát triển frontend, phát triển backend, tích hợp khả năng AI và thiết kế sản phẩm.
|
||||||
|
|
||||||
|
> **Dự án này chủ yếu hướng tới ba loại người học:**
|
||||||
|
>
|
||||||
|
> - **Người mới bắt đầu (người bình thường / sản phẩm và vận hành)**: Giúp người học phi kỹ thuật hiểu các khái niệm chính và hoàn thành nguyên mẫu sản phẩm đầu tiên
|
||||||
|
> - **Nhà phát triển cấp sơ-trung (sinh viên và nhà phát triển có cơ sở nhất định)**: Làm chủ kiến thức Vibe Coding frontend/backend và khả năng AI
|
||||||
|
> - **Nhà phát triển cấp cao (công ty và startup, mã nguồn mở và nhà phát triển độc lập)**: Kỹ thuật phát triển cấp cao, phát triển đa nền tảng
|
||||||
|
|
||||||
|
### 📖 Điều hướng nội dung
|
||||||
|
|
||||||
|
<div align="center">
|
||||||
|
<img src="../assets/readme-image1.png" alt="Learning Map" width="100%" style="border-radius: 10px; box-shadow: 0 8px 20px rgba(45,55,72,0.3); margin: 15px 0;"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
### Phụ lục tổng quát
|
||||||
|
|
||||||
|
[Từ điển khả năng AI: các khái niệm cốt lõi AI phổ biến, thuật ngữ và giải thích kịch bản](docs/appendix/ai-capability-dictionary.md)
|
||||||
|
|
||||||
|
### 0. Mẫu giáo
|
||||||
|
|
||||||
|
| Chương | Nội dung chính | Trạng thái |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| [Lời nói đầu: Bản đồ học tập](docs/stage-0/0.1-learning-map/index.md) | Hướng dẫn lộ trình học tập tổng thể | ✅ |
|
||||||
|
| [Sơ cấp 1: Kỷ nguyên AI, biết nói là biết lập trình](docs/stage-0/0.2-ai-capabilities-through-games/index.md) | Trải nghiệm khả năng lập trình AI lần đầu qua các trường hợp như Snake | ✅ |
|
||||||
|
|
||||||
|
### 1. Quản lý sản phẩm AI
|
||||||
|
|
||||||
|
| Chương | Nội dung chính | Trạng thái |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| [Sơ cấp 2: Biết các công cụ IDE AI](docs/stage-1/1.1-introduction-to-ai-ide/index.md) | Học sử dụng IDE, tạo mini-game cục bộ | ✅ |
|
||||||
|
| [Sơ cấp 3: Tự làm nguyên mẫu](docs/stage-1/1.2-building-prototype/index.md) | Phân tích yêu cầu, tạo trang đơn bằng AI, đến tạo nguyên mẫu sản phẩm đa trang | ✅ |
|
||||||
|
| [Sơ cấp 4: Thêm khả năng AI vào nguyên mẫu](docs/stage-1/1.3-integrating-ai-capabilities/index.md) | Học kết nối các khả năng AI phổ biến (văn bản, hình ảnh, video) | ✅ |
|
||||||
|
| [Sơ cấp 5: Dự án hoàn chỉnh thực chiến](docs/stage-1/1.4-complete-project-practice/index.md) | Mô phỏng kịch bản thực tế, chấp nhận phản hồi người dùng để cải tiến, hoàn thành dự án | ✅ |
|
||||||
|
| [Đề tài lớn: Tạo nguyên mẫu ứng dụng web hoàn chỉnh và trưng bày](docs/stage-1/1.5-final-project/index.md) | Thực hiện ứng dụng hoàn chỉnh, trình bày hiệu ứng ứng dụng | ✅ |
|
||||||
|
|
||||||
|
#### Phụ lục
|
||||||
|
|
||||||
|
| Chương | Nội dung chính | Trạng thái |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| [Phụ lục A: Bổ sung tư duy sản phẩm](docs/stage-1/appendix-a-product-thinking/index.md) | Các khung tư duy cần thiết để tạo sản phẩm từ số không đến một | ✅ |
|
||||||
|
| [Phụ lục B: Lỗi phổ biến và giải pháp](docs/stage-1/appendix-b-common-errors/index.md) | Các lỗi phổ biến trong Vibe Coding và phương pháp khắc phục sự cố | ✅ |
|
||||||
|
|
||||||
|
### 2. Kỹ sư phát triển cấp sơ-trung
|
||||||
|
|
||||||
|
#### Phần Frontend
|
||||||
|
|
||||||
|
| Chương | Nội dung chính | Trạng thái |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| [Frontend 0: Sử dụng lovart tạo tài sản](docs/stage-2/frontend/2.0-lovart-assets/) | Sử dụng lovart tạo hàng loạt tài sản hình ảnh như nhân vật, cảnh, cung cấp cơ sở tài sản cho thiết kế UI và phát triển frontend | 🚧 |
|
||||||
|
| [Frontend 1: Nhập môn Figma và MasterGo](docs/stage-2/frontend/2.1-figma-mastergo/) | Sử dụng công cụ thiết kế tổ chức kiến trúc thông tin và cấu trúc trang, chuẩn bị cơ sở cho triển khai frontend | 🚧 |
|
||||||
|
| [Frontend 2: Xây dựng ứng dụng hiện đại đầu tiên - Thiết kế UI](docs/stage-2/frontend/2.2-ui-design/) : Hoàn thành giao diện dựa trên thành phần từ thiết kế, thực hiện lộ trình đầu tiên từ thiết kế đến code | 🚧 |
|
||||||
|
| [Frontend 3: Tham khảo thông số thiết kế UI và thiết kế UI đa sản phẩm](docs/stage-2/frontend/2.3-multi-product-ui/) : Mở rộng giao diện đa sản phẩm quanh một hình ảnh chính thống nhất, thực hành khả năng thiết kế có hệ thống | 🚧 |
|
||||||
|
| [Frontend 4: Cùng làm chân dung Hogwarts](docs/stage-2/frontend/2.4-hogwarts-portraits/chapter4-lets-build-hogwarts-portraits.md) : Tạo ứng dụng frontend có khả năng AI tích hợp từ 0 đến 1, kết nối thiết kế và phát triển | ✅ |
|
||||||
|
|
||||||
|
#### Phần Backend và Full Stack
|
||||||
|
|
||||||
|
| Chương | Nội dung chính | Trạng thái |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| [Backend 1: API là gì](docs/stage-2/backend/2.1-what-is-api/extra2/extra2-what-is-api.md) : Hiểu giao diện HTTP và mô hình yêu cầu-phản hồi, chuẩn bị tích hợp backend và phối hợp | ✅ |
|
||||||
|
| [Backend 2: Từ cơ sở dữ liệu đến Supabase](docs/stage-2/backend/2.2-database-supabase/chapter5/chapter5-from-database-to-supabase.md) : Triển khai cơ sở dữ liệu và API trên Supabase, kết nối mô hình dữ liệu với trang frontend | ✅ |
|
||||||
|
| [Backend 3: LLM hỗ trợ viết code giao diện và tài liệu](docs/stage-2/backend/2.3-ai-interface-code/) : Sử dụng LLM hỗ trợ tạo tài liệu và code cho giao diện và cơ sở dữ liệu, thực hiện backend có thể đọc và kiểm tra | 🚧 |
|
||||||
|
| [Backend 4: Quy trình làm việc Git](docs/stage-2/backend/2.4-git-workflow/extra1/extra1-what-is-git-and-what-is-github.md) : Quản lý code trong quy trình làm việc Git, thực hiện kiểm soát phiên bản và cộng tác | ✅ |
|
||||||
|
| [Backend 5: Triển khai Zeabur](docs/stage-2/backend/2.5-zeabur-deployment/extra6/extra6-zeabur-what-is-it-and-how-to-deploy-web-applications.md) : Triển khai ứng dụng lên Zeabur để đưa vào hoạt động | ✅ |
|
||||||
|
| [Backend 6: Công cụ phát triển CLI hiện đại](docs/stage-2/backend/2.6-modern-cli/extra7/extra7-cli-ai-coding-tools-and-the-principles-of-test-driven-development.md) : Sử dụng công cụ lập trình AI loại CLI để tăng tốc phát triển và gỡ lỗi, hình thành quy trình kỹ thuật cá nhân | ✅ |
|
||||||
|
| [Backend 7: Cách tích hợp hệ thống thanh toán như Stripe](docs/stage-2/backend/2.7-stripe-payment/) : Kết nối hệ thống thanh toán, hoàn thành quy trình thanh toán và quy trình thanh toán cơ bản | 🚧 |
|
||||||
|
| [Đề tài lớn 1: Xây dựng ứng dụng hiện đại đầu tiên - Ứng dụng full stack](docs/stage-2/assignments/2.1-fullstack-app/) : Tích hợp frontend, backend và module thanh toán, hoàn thành ứng dụng web full stack sẵn sàng sản xuất | 🚧 |
|
||||||
|
| [Đề tài lớn 2: Thư viện thành phần frontend hiện đại + Trae thực chiến](docs/stage-2/assignments/2.2-modern-frontend-trae/) : Sử dụng thư viện thành phần frontend hiện đại và Trae, hoàn thành độc lập một sản phẩm có đăng nhập/đăng ký và hỗ trợ thanh toán | 🚧 |
|
||||||
|
|
||||||
|
#### Phụ lục khả năng AI
|
||||||
|
|
||||||
|
| Chương | Nội dung chính | Trạng thái |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| [AI 1: Nhập môn Dify và tích hợp cơ sở kiến thức](docs/stage-2/ai-capabilities/2.1-dify-knowledge-base/chapter3/chapter3-getting-started-with-dify-and-its-knowledge-base-integration.md) : Sử dụng Dify Workflow và RAG cơ bản để xây dựng sản phẩm loại công cụ, tạo ví dụ cho nâng cấp ứng dụng trong tương lai | ✅ |
|
||||||
|
| [AI 2: Học tra cứu từ điển AI và tích hợp API đa phương thức](docs/stage-2/ai-capabilities/2.2-multimodal-api/extra3/extra3-ai-capability-starter-handbook.md) : Học tìm kiếm mô hình và API phù hợp, tích hợp khả năng đa phương thức như văn bản, hình ảnh vào sản phẩm | 🚧 |
|
||||||
|
|
||||||
|
### 3. Kỹ sư phát triển cấp cao
|
||||||
|
|
||||||
|
| Chương | Nội dung chính | Trạng thái |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| [Cao cấp 1: MCP và ClaudeCode Skills](docs/stage-3/core-skills/3.1-mcp-claudecode-skills/) : Mở rộng khả năng IDE qua MCP và Skills, kết nối dịch vụ bên ngoài như công cụ | 🚧 |
|
||||||
|
| [Cao cấp 2: Cách để Coding Tools hoạt động lâu](docs/stage-3/core-skills/3.2-long-running-tasks/) : Thiết kế và cấu hình nhiệm vụ chạy dài, làm Coding Tools ổn định và đáng tin cậy hơn | 🚧 |
|
||||||
|
| [Cao cấp 3: Phát triển đa nền tảng: Cách xây dựng chương trình nhỏ WeChat](docs/stage-3/cross-platform/3.3-wechat-miniprogram/) : Hiểu hệ sinh thái chương trình nhỏ WeChat, hoàn thành chương trình nhỏ frontend từ mẫu chính thức đến phát hành | ✅ |
|
||||||
|
| [Cao cấp 4: Phát triển đa nền tảng: Cách xây dựng chương trình nhỏ WeChat - Bao gồm backend](docs/stage-3/cross-platform/3.4-wechat-miniprogram-backend/) : Tích hợp cơ sở dữ liệu và logic backend vào chương trình nhỏ, thực hiện vòng tuần hoàn hoạt động hoàn chỉnh | 🚧 |
|
||||||
|
| [Cao cấp 5: Phát triển đa nền tảng: Cách xây dựng ứng dụng Android](docs/stage-3/cross-platform/3.5-android-app/) : Sử dụng công cụ như Expo, hoàn thành phát triển ứng dụng Android tích hợp Web/native | 🚧 |
|
||||||
|
| [Cao cấp 6: Phát triển đa nền tảng: Cách xây dựng ứng dụng iOS](docs/stage-3/cross-platform/3.6-ios-app/) : Sử dụng công cụ như Expo, hoàn thành phát triển ứng dụng iOS tích hợp Web/native | 🚧 |
|
||||||
|
| [Cao cấp 7: Cách xây dựng trang web cá nhân và blog học thuật của riêng bạn](docs/stage-3/personal-brand/3.7-personal-website-blog/) : Từ lựa chọn, xây dựng đến triển khai, xây dựng trang chủ online dài hạn trưng bày dự án cá nhân và kết quả học thuật | 🚧 |
|
||||||
|
|
||||||
|
#### Phụ lục khả năng AI
|
||||||
|
|
||||||
|
| Chương | Nội dung chính | Trạng thái |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| [AI cao cấp 1: RAG là gì và nó hoạt động như thế nào](docs/stage-3/ai-advanced/3.a1-rag-introduction/extra5-what-is-rag-and-how-does-it-work-and-future.md) : Hiểu có hệ thống nguyên lý RAG và kiến trúc phổ biến, cung cấp cơ sở truy xuất kiến thức cho ứng dụng phức tạp | ✅ |
|
||||||
|
| [AI cao cấp 2: RAG trung cấp-cao cấp và điều phối quy trình làm việc: Ví dụ LangGraph](docs/stage-3/ai-advanced/3.a2-langgraph-advanced-rag/) : Sử dụng công cụ như LangGraph để thiết kế quy trình làm việc đa bước và hệ thống RAG trung cấp-cao cấp | 🚧 |
|
||||||
|
|
||||||
|
## 🛠️ Cách học
|
||||||
|
|
||||||
|
- Theo khả năng cá nhân, đọc và thực hành có chọn lọc các chương liên quan, nếu có câu hỏi hãy đặt trong Issues.
|
||||||
|
|
||||||
|
## 💻 Khởi động bài học này cục bộ
|
||||||
|
|
||||||
|
### Phương pháp hiện đại
|
||||||
|
|
||||||
|
Trong hộp thoại IDE AI (vscode, cursor, trae, v.v.), nhập prompt sau để khởi động bài học này:
|
||||||
|
|
||||||
|
```
|
||||||
|
Vui lòng giúp tôi chạy dịch vụ cục bộ của dự án này
|
||||||
|
```
|
||||||
|
|
||||||
|
### Phương pháp cũ
|
||||||
|
|
||||||
|
1. npm install
|
||||||
|
2. npm run dev
|
||||||
|
3. Mở trình duyệt của bạn và truy cập `http://localhost:3000` để xem.
|
||||||
|
|
||||||
|
## 🤝 Đóng góp
|
||||||
|
|
||||||
|
- Nếu bạn phát hiện ra vấn đề hoặc nghĩ có cách nào để cải thiện dự án này, bạn có thể gửi Issue để phản hồi. Nếu sau khi gửi không ai trả lời, bạn có thể liên hệ [đội ngũ chăm sóc](https://github.com/datawhalechina/DOPMC/blob/main/OP.md) để phản hồi và theo dõi~
|
||||||
|
- Nếu bạn muốn đóng góp vào dự án này, bạn có thể gửi Pull Request, nếu sau khi gửi không ai trả lời, bạn có thể liên hệ [đội ngũ chăm sóc](https://github.com/datawhalechina/DOPMC/blob/main/OP.md) để phản hồi và theo dõi~
|
||||||
|
- Nếu bạn rất quan tâm đến Datawhale và muốn bắt đầu một dự án mới, vui lòng làm theo [hướng dẫn dự án mã nguồn mở Datawhale](https://github.com/datawhalechina/DOPMC/blob/main/GUIDE.md)~
|
||||||
|
|
||||||
|
## 🙏 Cảm ơn mỗi người đóng góp
|
||||||
|
|
||||||
|
- [散步-Lãnh đạo dự án](https://github.com/sanbuphy) (Thành viên Datawhale)
|
||||||
|
- Fang Ke-Giảng viên hướng dẫn (Thành viên Datawhale, Đại học Thanh Hoa)
|
||||||
|
- [Yerim Kang](https://github.com/yerim25)（Phần dự án thực tế-Đại học Thanh Hoa）
|
||||||
|
- Triệu Tri Lân（Phần dự án thực tế-Đại học Thanh Hoa）
|
||||||
|
- [Lý Nghi Tuyên](https://yixuan20.github.io/)（Thiết kế nghệ thuật trang-Đại học Thanh Hoa）
|
||||||
|
- Tất cả các bạn trong nhóm beta test AI Vibe Coding 101 đã cung cấp đề xuất và kinh nghiệm
|
||||||
|
|
||||||
|
### Cảm ơn đặc biệt
|
||||||
|
|
||||||
|
- Cảm ơn [@Sm1les](https://github.com/Sm1les) đã giúp đỡ và hỗ trợ dự án này
|
||||||
|
- Cảm ơn tất cả các nhà phát triển đã đóng góp vào dự án này ❤️
|
||||||
|
|
||||||
|
<div align=center style="margin-top: 30px;">
|
||||||
|
<a href="https://github.com/datawhalechina/easy-vibe/graphs/contributors">
|
||||||
|
<img src="https://contrib.rocks/image?repo=datawhalechina/easy-vibe" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
## <span id="contact">📧 Liên hệ với chúng tôi</span>
|
||||||
|
|
||||||
|
<div align=center>
|
||||||
|
<p>Nếu bạn có câu hỏi, đề xuất, phàn nàn, hoặc muốn trao đổi, vui lòng quét mã QR bên dưới</p>
|
||||||
|
<img src="../assets/wechat.png" width="280">
|
||||||
|
|
||||||
|
<p>Quét mã QR bên dưới để theo dõi tài khoản chính thức: Datawhale</p>
|
||||||
|
<img src="https://raw.githubusercontent.com/datawhalechina/pumpkin-book/master/res/qrcode.jpeg" width="180" height="180">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
## 📄 GIẤY PHÉP
|
||||||
|
|
||||||
|
<div align="center">
|
||||||
|
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">
|
||||||
|
<img
|
||||||
|
alt="Creative Commons Giấy phép"
|
||||||
|
style="border-width:0"
|
||||||
|
src="https://img.shields.io/badge/license-CC%20BY--NC--SA%204.0-lightgrey"
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
<br />
|
||||||
|
Tác phẩm này được cấp phép theo
|
||||||
|
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">
|
||||||
|
Creative Commons Ghi nhận - Phi thương mại - Chia sẻ tương tự 4.0 Quốc tế
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
## Star History
|
||||||
|
|
||||||
|
[](https://www.star-history.com/#datawhalechina/easy-vibe&type=date&legend=top-left)
|
||||||
@@ -0,0 +1,234 @@
|
|||||||
|
<!-- trigger vercel build -->
|
||||||
|
<div align="center">
|
||||||
|
|
||||||
|
<pre style="font-family: 'Courier New', monospace; font-size: 16px; color: #000000; margin: 0; padding: 0; line-height: 1.2; transform: skew(-1deg, 0deg); display: block;">
|
||||||
|
███████╗ █████╗ ███████╗██╗ ██╗ ██╗ ██╗██╗██████╗ ███████╗
|
||||||
|
██╔════╝██╔══██╗██╔════╝╚██╗ ██╔╝ ██║ ██║██║██╔══██╗██╔════╝
|
||||||
|
█████╗ ███████║███████╗ ╚████╔╝ ██║ ██║██║██████╔╝█████╗
|
||||||
|
██╔══╝ ██╔══██║╚════██║ ╚██╔╝ ╚██╗ ██╔╝██║██╔══██╗██╔══╝
|
||||||
|
███████╗██║ ██║███████║ ██║ ╚████╔╝ ██║██████╔╝███████╗
|
||||||
|
╚══════╝╚═╝ ╚═╝╚══════╝ ╚═╝ ╚═══╝ ╚═╝╚═════╝ ╚══════╝</pre>
|
||||||
|
|
||||||
|
# Easy-Vibe: Learn Vibe Coding from 0 to 1
|
||||||
|
|
||||||
|
### *零基础、项目制学习、构建第一个 AI 产品*
|
||||||
|
|
||||||
|
<p align="center">
|
||||||
|
📌 <a href="https://datawhalechina.github.io/easy-vibe/">开始在线阅读 (Start Reading Online)</a>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p align="center">
|
||||||
|
<a href="https://datawhalechina.github.io/easy-vibe/">在线阅读</a> ·
|
||||||
|
<a href="#-内容导航">学习地图</a> ·
|
||||||
|
<a href="#contact">社区交流</a>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p align="center">
|
||||||
|
<a href="https://github.com/datawhalechina/easy-vibe/stargazers" target="_blank">
|
||||||
|
<img src="https://img.shields.io/github/stars/datawhalechina/easy-vibe?color=660874&style=for-the-badge&logo=star&logoColor=white&labelColor=1a1a2e" alt="Stars"></a>
|
||||||
|
<a href="https://github.com/datawhalechina/easy-vibe/network/members" target="_blank">
|
||||||
|
<img src="https://img.shields.io/github/forks/datawhalechina/easy-vibe?color=660874&style=for-the-badge&logo=git-fork&logoColor=white&labelColor=1a1a2e" alt="Forks"></a>
|
||||||
|
<a href="LICENSE" target="_blank">
|
||||||
|
<img src="https://img.shields.io/badge/License-CC_BY_NC_SA_4.0-4ecdc4?style=for-the-badge&logo=creative-commons&logoColor=white&labelColor=1a1a2e" alt="License"></a>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p align="center">
|
||||||
|
<a href="./README.md"><img alt="简体中文" src="https://img.shields.io/badge/简体中文-d9d9d9"></a>
|
||||||
|
<a href="./README_CHT.md"><img alt="繁體中文" src="https://img.shields.io/badge/繁體中文-d9d9d9"></a>
|
||||||
|
<a href="./README_EN.md"><img alt="English" src="https://img.shields.io/badge/English-d9d9d9"></a>
|
||||||
|
<a href="./README_JA.md"><img alt="日本語" src="https://img.shields.io/badge/日本語-d9d9d9"></a>
|
||||||
|
<a href="./README_ES.md"><img alt="Español" src="https://img.shields.io/badge/Español-d9d9d9"></a>
|
||||||
|
<a href="./README_FR.md"><img alt="Français" src="https://img.shields.io/badge/Français-d9d9d9"></a>
|
||||||
|
<a href="./README_KL.md"><img alt="Klingon" src="https://img.shields.io/badge/Klingon-d9d9d9"></a>
|
||||||
|
<a href="./README_KO.md"><img alt="한국어" src="https://img.shields.io/badge/한국어-d9d9d9"></a>
|
||||||
|
<a href="./README_AR.md"><img alt="العربية" src="https://img.shields.io/badge/العربية-d9d9d9"></a>
|
||||||
|
<a href="./README_TR.md"><img alt="Türkçe" src="https://img.shields.io/badge/Türkçe-d9d9d9"></a>
|
||||||
|
<a href="./README_VI.md"><img alt="Tiếng_Việt" src="https://img.shields.io/badge/Tiếng_Việt-d9d9d9"></a>
|
||||||
|
<a href="./README_DE.md"><img alt="Deutsch" src="https://img.shields.io/badge/Deutsch-d9d9d9"></a>
|
||||||
|
<a href="./README_BN.md"><img alt="বাংলা" src="https://img.shields.io/badge/বাংলা-d9d9d9"></a>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
## 🚀 项目介绍
|
||||||
|
|
||||||
|
当你尝试用AI写代码，出错不断，时常想放弃，不清楚如何将程序真正上线 😢。
|
||||||
|
|
||||||
|
本教程专门设计，从0到1，带你逐步掌握 Vibe Coding 技巧：
|
||||||
|
|
||||||
|
- **第零阶段**：从**小游戏快速入门** 上手 vibe coding 技能
|
||||||
|
- **第一阶段**：产品经理视角下的 **vibe coding 技能和业务理解**，实现 Web 应用原型
|
||||||
|
- **第二阶段**：学习**前后端开发与 AI 能力**相关的 vibecoding 技巧，完成完整应用
|
||||||
|
- **第三阶段**：掌握**多平台复杂应用**的构建方案，走向生产级应用
|
||||||
|
|
||||||
|
我们相信，掌握Vibe Coding并配合系统化训练，一个人就能成为集前后端开发、AI 能力集成、产品设计于一身的开发者。
|
||||||
|
|
||||||
|
> **本项目主要面向三类学习者：**
|
||||||
|
>
|
||||||
|
> - **新手（普通人 / 产品与运营侧）**：帮助非技术入门学习者听懂关键概念，完成第一个产品原型。
|
||||||
|
> - **初中级开发者（有一定基础的学生和开发者）**：掌握前后端 vibe coding 与 AI 能力知识。
|
||||||
|
> - **高级开发者（公司与初创、开源与独立开发者）**：高级开发技巧、多平台开发。
|
||||||
|
|
||||||
|
### 📖 内容导航
|
||||||
|
|
||||||
|
<div align="center">
|
||||||
|
<img src="assets/readme-image1.png" alt="Learning Map" width="100%" style="border-radius: 10px; box-shadow: 0 8px 20px rgba(45,55,72,0.3); margin: 15px 0;"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
### 总附录
|
||||||
|
|
||||||
|
[AI 能力词典：常见 AI 核心概念与名词、场景解释](docs/appendix/ai-capability-dictionary.md)
|
||||||
|
|
||||||
|
### 零、幼儿园
|
||||||
|
|
||||||
|
| 章节 | 关键内容 | 状态 |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| [前言：学习地图](docs/stage-0/0.1-learning-map/index.md) | 整体学习路径导览 | ✅ |
|
||||||
|
| [初级一：AI 时代，会说话就会编程](docs/stage-0/0.2-ai-capabilities-through-games/index.md) | 通过贪吃蛇等案例初步感受 AI 编程的能力 | ✅ |
|
||||||
|
|
||||||
|
### 一、AI 产品经理
|
||||||
|
|
||||||
|
| 章节 | 关键内容 | 状态 |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| [初级二：认识 AI IDE 工具](docs/stage-1/1.1-introduction-to-ai-ide/index.md) | 学会使用 IDE，在本地制作小游戏 | ✅ |
|
||||||
|
| [初级三：动手做出原型](docs/stage-1/1.2-building-prototype/index.md) | 从需求分析、AI 生成单页面，再到生成多页面产品原型 | ✅ |
|
||||||
|
| [初级四：给原型加上 AI 能力](docs/stage-1/1.3-integrating-ai-capabilities/index.md) | 学会接入常见 AI 能力（文本、图片、视频） | ✅ |
|
||||||
|
| [初级五：完整项目实战](docs/stage-1/1.4-complete-project-practice/index.md) | 模拟真实场景、接受用户反馈迭代，完整化项目 | ✅ |
|
||||||
|
| [大作业：做一个完整的 Web 应用原型并展示](docs/stage-1/1.5-final-project/index.md) | 完整实现应用，展示应用效果 | ✅ |
|
||||||
|
|
||||||
|
#### 附录
|
||||||
|
|
||||||
|
| 章节 | 关键内容 | 状态 |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| [附录A：产品思维补充](docs/stage-1/appendix-a-product-thinking/index.md) | 从零到一做产品需要考虑的思维框架 | ✅ |
|
||||||
|
| [附录B：常见报错及解决方案](docs/stage-1/appendix-b-common-errors/index.md) | vibe coding 中的常见错误及排查方法 | ✅ |
|
||||||
|
|
||||||
|
### 二、初中级开发工程师
|
||||||
|
|
||||||
|
#### 前端部分
|
||||||
|
|
||||||
|
| 章节 | 关键内容 | 状态 |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| [前端零：使用 lovart 生产素材](docs/stage-2/frontend/2.0-lovart-assets/) | 学会用 lovart 批量生成人物、场景等视觉素材，为 UI 设计和前端开发提供素材基础 | 🚧 |
|
||||||
|
| [前端一：Figma 与 MasterGo 入门](docs/stage-2/frontend/2.1-figma-mastergo/) | 用设计工具梳理信息架构和页面结构，为前端实现打基础 | 🚧 |
|
||||||
|
| [前端二：构建第一个现代应用程序-UI 设计](docs/stage-2/frontend/2.2-ui-design/) | 基于设计稿完成组件化界面，实现从设计到代码的第一条链路 | 🚧 |
|
||||||
|
| [前端三：参考 UI 设计规范与多产品 UI 设计](docs/stage-2/frontend/2.3-multi-product-ui/) | 围绕统一主视觉扩展多产品界面，练习系统化设计能力 | 🚧 |
|
||||||
|
| [前端四：一起做霍格沃茨画像](docs/stage-2/frontend/2.4-hogwarts-portraits/chapter4-lets-build-hogwarts-portraits.md) | 从 0 到 1 做出接入 AI 能力的前端应用，串联设计与开发 | ✅ |
|
||||||
|
|
||||||
|
#### 后端与全栈部分
|
||||||
|
|
||||||
|
| 章节 | 关键内容 | 状态 |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| [后端一：什么是 API](docs/stage-2/backend/2.1-what-is-api/extra2/extra2-what-is-api.md) | 理解 HTTP 接口与请求响应模型，为后端集成与联调做准备 | ✅ |
|
||||||
|
| [后端二：从数据库到 Supabase](docs/stage-2/backend/2.2-database-supabase/chapter5/chapter5-from-database-to-supabase.md) | 在 Supabase 上落地数据库和 API，打通数据模型与前端页面 | ✅ |
|
||||||
|
| [后端三：大模型辅助编写接口代码与接口文档](docs/stage-2/backend/2.3-ai-interface-code/) | 用大模型协助生成接口与数据库文档及代码，实现可读可测的后端 | 🚧 |
|
||||||
|
| [后端四：Git 工作流](docs/stage-2/backend/2.4-git-workflow/extra1/extra1-what-is-git-and-what-is-github.md) | 在 Git 工作流中管理代码，进行版本控制和协作 | ✅ |
|
||||||
|
| [后端五：Zeabur 部署](docs/stage-2/backend/2.5-zeabur-deployment/extra6/extra6-zeabur-what-is-it-and-how-to-deploy-web-applications.md) | 将应用部署到 Zeabur 上线 | ✅ |
|
||||||
|
| [后端六：现代 CLI 开发工具](docs/stage-2/backend/2.6-modern-cli/extra7/extra7-cli-ai-coding-tools-and-the-principles-of-test-driven-development.md) | 使用 CLI 类 AI 编程工具加速开发与调试，形成个人工程化工作流 | ✅ |
|
||||||
|
| [后端七：如何集成 Stripe 等收费系统](docs/stage-2/backend/2.7-stripe-payment/) | 接入支付系统，完成收费链路与基础结算流程 | 🚧 |
|
||||||
|
| [大作业 1：构建第一个现代应用程序-全栈应用](docs/stage-2/assignments/2.1-fullstack-app/) | 综合前端、后端与支付模块，完成可上线的全栈 Web 应用 | 🚧 |
|
||||||
|
| [大作业 2：现代前端组件库 + Trae 实战](docs/stage-2/assignments/2.2-modern-frontend-trae/) | 使用现代前端组件库与 Trae，独立完成可登录注册并支持收费的产品 | 🚧 |
|
||||||
|
|
||||||
|
#### AI 能力附录
|
||||||
|
|
||||||
|
| 章节 | 关键内容 | 状态 |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| [AI 一：Dify 入门与知识库集成](docs/stage-2/ai-capabilities/2.1-dify-knowledge-base/chapter3/chapter3-getting-started-with-dify-and-its-knowledge-base-integration.md) | 用 Dify Workflow 与基础 RAG 搭建工具类产品，为后续应用升级打样 | ✅ |
|
||||||
|
| [AI 二：学会查询 AI 词典与集成多模态 API](docs/stage-2/ai-capabilities/2.2-multimodal-api/extra3/extra3-ai-capability-starter-handbook.md) | 学会查找合适的模型与 API，并把文本、图像等多模态能力接入产品 | 🚧 |
|
||||||
|
|
||||||
|
### 三、高级开发工程师
|
||||||
|
|
||||||
|
| 章节 | 关键内容 | 状态 |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| [高级一：MCP 与 ClaudeCode Skills](docs/stage-3/core-skills/3.1-mcp-claudecode-skills/) | 通过 MCP 与 Skills 扩展 IDE 能力，把外部服务接成工具 | 🚧 |
|
||||||
|
| [高级二：如何让 Coding Tools 长时间工作](docs/stage-3/core-skills/3.2-long-running-tasks/) | 设计和配置长时间运行的任务，让 Coding Tools 更稳定可靠 | 🚧 |
|
||||||
|
| [高级三：多平台开发：如何构建微信小程序](docs/stage-3/cross-platform/3.3-wechat-miniprogram/) | 了解微信小程序生态，从官方模板到上线完成一个前端小程序 | ✅ |
|
||||||
|
| [高级四：多平台开发：如何构建微信小程序-包含后端](docs/stage-3/cross-platform/3.4-wechat-miniprogram-backend/) | 在小程序中接入数据库与后端逻辑，打通完整业务闭环 | 🚧 |
|
||||||
|
| [高级五：多平台开发：如何构建安卓程序](docs/stage-3/cross-platform/3.5-android-app/) | 使用 Expo 等工具，完成 Web/原生一体化的安卓应用开发 | 🚧 |
|
||||||
|
| [高级六：多平台开发：如何构建 iOS 程序](docs/stage-3/cross-platform/3.6-ios-app/) | 使用 Expo 等工具，完成 Web/原生一体化的 iOS 应用开发 | 🚧 |
|
||||||
|
| [高级七：如何构建属于自己的个人网页与学术博客](docs/stage-3/personal-brand/3.7-personal-website-blog/) | 从选型、搭建到部署，构建展示个人项目与学术成果的长久在线主页 | 🚧 |
|
||||||
|
|
||||||
|
#### AI 能力附录
|
||||||
|
|
||||||
|
| 章节 | 关键内容 | 状态 |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| [高级 AI 一：什么是 RAG 以及它如何工作](docs/stage-3/ai-advanced/3.a1-rag-introduction/extra5-what-is-rag-and-how-does-it-work-and-future.md) | 系统理解 RAG 原理与常见架构，为复杂应用提供知识检索基础 | ✅ |
|
||||||
|
| [高级 AI 二：中高级 RAG 与工作流编排：以 LangGraph 为例](docs/stage-3/ai-advanced/3.a2-langgraph-advanced-rag/) | 使用 LangGraph 等工具设计多步工作流与中高级 RAG 系统 | 🚧 |
|
||||||
|
|
||||||
|
## 🛠️ 如何学习
|
||||||
|
|
||||||
|
- 根据个人能力，选择性地阅读和实践相关章节，如果有问题欢迎 issue 提问。
|
||||||
|
|
||||||
|
## 💻 本地启动本课件
|
||||||
|
|
||||||
|
### 现代方案
|
||||||
|
|
||||||
|
在 AI IDE 对话框（vscode、cursor、trae 等）中，输入下列提示词启动本课件：
|
||||||
|
|
||||||
|
```
|
||||||
|
请你帮我运行这个项目的本地服务
|
||||||
|
```
|
||||||
|
|
||||||
|
### 旧方案
|
||||||
|
|
||||||
|
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/sanbuphy) (Datawhale成员)
|
||||||
|
- 方可-指导老师（Datawhale成员, 清华大学）
|
||||||
|
- [Yerim Kang](https://github.com/yerim25)（实践项目部分-清华大学）
|
||||||
|
- 赵芷霖（实践项目部分-清华大学）
|
||||||
|
- [李亦萱](https://yixuan20.github.io/)（页面美术设计-清华大学）
|
||||||
|
- AI Vibe Coding 101 内测群完整给建议体验的小伙伴们
|
||||||
|
|
||||||
|
### 特别感谢
|
||||||
|
|
||||||
|
- 感谢 [@Sm1les](https://github.com/Sm1les) 对本项目的帮助与支持
|
||||||
|
- 感谢所有为本项目做出贡献的开发者们 ❤️
|
||||||
|
|
||||||
|
<div align=center style="margin-top: 30px;">
|
||||||
|
<a href="https://github.com/datawhalechina/easy-vibe/graphs/contributors">
|
||||||
|
<img src="https://contrib.rocks/image?repo=datawhalechina/easy-vibe" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
## <span id="contact">📧 联系我们</span>
|
||||||
|
|
||||||
|
<div align=center>
|
||||||
|
<p>如果有问题提建议吐槽，或者想要一起交流，请扫描下方二维码</p>
|
||||||
|
<img src="assets/wechat.png" width="280">
|
||||||
|
|
||||||
|
<p>扫描下方二维码关注公众号：Datawhale</p>
|
||||||
|
<img src="https://raw.githubusercontent.com/datawhalechina/pumpkin-book/master/res/qrcode.jpeg" width="180" height="180">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
## 📄 LICENSE
|
||||||
|
|
||||||
|
<div align="center">
|
||||||
|
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">
|
||||||
|
<img
|
||||||
|
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>
|
||||||
|
进行许可。
|
||||||
|
</div>
|
||||||
|
|
||||||
|
## Star History
|
||||||
|
|
||||||
|
[](https://www.star-history.com/#datawhalechina/easy-vibe&type=date&legend=top-left)
|
||||||
@@ -0,0 +1,231 @@
|
|||||||
|
<!-- trigger vercel build -->
|
||||||
|
<div align="center">
|
||||||
|
|
||||||
|
<pre style="font-family: 'Courier New', monospace; font-size: 16px; color: #000000; margin: 0; padding: 0; line-height: 1.2; transform: skew(-1deg, 0deg); display: block;">
|
||||||
|
███████╗ █████╗ ███████╗██╗ ██╗ ██╗ ██╗██╗██████╗ ███████╗
|
||||||
|
██╔════╝██╔══██╗██╔════╝╚██╗ ██╔╝ ██║ ██║██║██╔══██╗██╔════╝
|
||||||
|
█████╗ ███████║███████╗ ╚████╔╝ ██║ ██║██║██████╔╝█████╗
|
||||||
|
██╔══╝ ██╔══██║╚════██║ ╚██╔╝ ╚██╗ ██╔╝██║██╔══██╗██╔══╝
|
||||||
|
███████╗██║ ██║███████║ ██║ ╚████╔╝ ██║██████╔╝███████╗
|
||||||
|
╚══════╝╚═╝ ╚═╝╚══════╝ ╚═╝ ╚═══╝ ╚═╝╚═════╝ ╚══════╝</pre>
|
||||||
|
|
||||||
|
# Easy-Vibe: Learn Vibe Coding from 0 to 1
|
||||||
|
|
||||||
|
### *零基礎、專案制學習、建構第一個 AI 產品*
|
||||||
|
|
||||||
|
<p align="center">
|
||||||
|
📌 <a href="https://datawhalechina.github.io/easy-vibe/">開始線上閱讀 (Start Reading Online)</a>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p align="center">
|
||||||
|
<a href="https://datawhalechina.github.io/easy-vibe/">線上閱讀</a> ·
|
||||||
|
<a href="#-內容導航">學習地圖</a> ·
|
||||||
|
<a href="#contact">社群交流</a>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p align="center">
|
||||||
|
<a href="https://github.com/datawhalechina/easy-vibe/stargazers" target="_blank">
|
||||||
|
<img src="https://img.shields.io/github/stars/datawhalechina/easy-vibe?color=660874&style=for-the-badge&logo=star&logoColor=white&labelColor=1a1a2e" alt="Stars"></a>
|
||||||
|
<a href="https://github.com/datawhalechina/easy-vibe/network/members" target="_blank">
|
||||||
|
<img src="https://img.shields.io/github/forks/datawhalechina/easy-vibe?color=660874&style=for-the-badge&logo=git-fork&logoColor=white&labelColor=1a1a2e" alt="Forks"></a>
|
||||||
|
<a href="LICENSE" target="_blank">
|
||||||
|
<img src="https://img.shields.io/badge/License-CC_BY_NC_SA_4.0-4ecdc4?style=for-the-badge&logo=creative-commons&logoColor=white&labelColor=1a1a2e" alt="License"></a>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p align="center">
|
||||||
|
<a href="./docs-readme/zh-CN/README.md"><img alt="简体中文" src="https://img.shields.io/badge/简体中文-d9d9d9"></a>
|
||||||
|
<a href="./docs-readme/zh-TW/README.md"><img alt="繁體中文" src="https://img.shields.io/badge/繁體中文-d9d9d9"></a>
|
||||||
|
<a href="./docs-readme/en-US/README.md"><img alt="English" src="https://img.shields.io/badge/English-d9d9d9"></a>
|
||||||
|
<a href="./docs-readme/ja-JP/README.md"><img alt="日本語" src="https://img.shields.io/badge/日本語-d9d9d9"></a>
|
||||||
|
<a href="./docs-readme/es-ES/README.md"><img alt="Español" src="https://img.shields.io/badge/Español-d9d9d9"></a>
|
||||||
|
<a href="./docs-readme/fr-FR/README.md"><img alt="Français" src="https://img.shields.io/badge/Français-d9d9d9"></a>
|
||||||
|
<a href="./docs-readme/ko-KR/README.md"><img alt="한국어" src="https://img.shields.io/badge/한국어-d9d9d9"></a>
|
||||||
|
<a href="./docs-readme/ar-SA/README.md"><img alt="العربية" src="https://img.shields.io/badge/العربية-d9d9d9"></a>
|
||||||
|
<a href="./docs-readme/vi-VN/README.md"><img alt="Tiếng_Việt" src="https://img.shields.io/badge/Tiếng_Việt-d9d9d9"></a>
|
||||||
|
<a href="./docs-readme/de-DE/README.md"><img alt="Deutsch" src="https://img.shields.io/badge/Deutsch-d9d9d9"></a>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
## 🚀 專案介紹
|
||||||
|
|
||||||
|
當你嘗試用AI寫程式碼，出錯不斷，時常想放棄，不清楚如何將程式真正上線 😢。
|
||||||
|
|
||||||
|
本教學專門設計，從0到1，帶你逐步掌握 Vibe Coding 技巧：
|
||||||
|
|
||||||
|
- **第零階段**：從**小遊戲快速入門** 上手 vibe coding 技能
|
||||||
|
- **第一階段**：產品經理視角下的 **vibe coding 技能和業務理解**，實現 Web 應用原型
|
||||||
|
- **第二階段**：學習**前後端開發與 AI 能力**相關的 vibecoding 技巧，完成完整應用
|
||||||
|
- **第三階段**：掌握**多平台複雜應用**的建構方案，走向生產級應用
|
||||||
|
|
||||||
|
我們相信，掌握Vibe Coding並配合系統化訓練，一個人就能成為集前後端開發、AI 能力整合、產品設計於一身的開發者。
|
||||||
|
|
||||||
|
> **本專案主要面向三類學習者：**
|
||||||
|
>
|
||||||
|
> - **新手（普通人 / 產品與運營側）**：幫助非技術入門學習者聽懂關鍵概念，完成第一個產品原型。
|
||||||
|
> - **初中級開發者（有一定基礎的學生和開發者）**：掌握前後端 vibe coding 與 AI 能力知識。
|
||||||
|
> - **高級開發者（公司與初創、開源與獨立開發者）**：高級開發技巧、多平台開發。
|
||||||
|
|
||||||
|
### 📖 內容導航
|
||||||
|
|
||||||
|
<div align="center">
|
||||||
|
<img src="../assets/readme-image1.png" alt="Learning Map" width="100%" style="border-radius: 10px; box-shadow: 0 8px 20px rgba(45,55,72,0.3); margin: 15px 0;"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
### 總附錄
|
||||||
|
|
||||||
|
[AI 能力詞典：常見 AI 核心概念與名詞、場景解釋](../docs/appendix/ai-capability-dictionary.md)
|
||||||
|
|
||||||
|
### 零、幼兒園
|
||||||
|
|
||||||
|
| 章节 | 關鍵內容 | 狀態 |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| [前言：學習地圖](../docs/stage-0/0.1-learning-map/index.md) | 整體學習路徑導覽 | ✅ |
|
||||||
|
| [初級一：AI 時代，會說話就會編程](../docs/stage-0/0.2-ai-capabilities-through-games/index.md) | 通過貪吃蛇等案例初步感受 AI 編程的能力 | ✅ |
|
||||||
|
|
||||||
|
### 一、AI 產品經理
|
||||||
|
|
||||||
|
| 章节 | 關鍵內容 | 狀態 |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| [初級二：認識 AI IDE 工具](../docs/stage-1/1.1-introduction-to-ai-ide/index.md) | 學會使用 IDE，在本地製作小遊戲 | ✅ |
|
||||||
|
| [初級三：動手做出原型](../docs/stage-1/1.2-building-prototype/index.md) | 從需求分析、AI 生成單頁面，再到生成多頁面產品原型 | ✅ |
|
||||||
|
| [初級四：給原型加上 AI 能力](../docs/stage-1/1.3-integrating-ai-capabilities/index.md) | 學會接入常見 AI 能力（文本、圖片、影片） | ✅ |
|
||||||
|
| [初級五：完整專案實戰](../docs/stage-1/1.4-complete-project-practice/index.md) | 模擬真實場景、接受用戶反饋迭代，完整化專案 | ✅ |
|
||||||
|
| [大作業：做一個完整的 Web 應用原型並展示](../docs/stage-1/1.5-final-project/index.md) | 完整實現應用，展示應用效果 | ✅ |
|
||||||
|
|
||||||
|
#### 附錄
|
||||||
|
|
||||||
|
| 章节 | 關鍵內容 | 狀態 |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| [附錄A：產品思維補充](../docs/stage-1/appendix-a-product-thinking/index.md) | 從零到一做產品需要考慮的思維框架 | ✅ |
|
||||||
|
| [附錄B：常見報錯及解決方案](../docs/stage-1/appendix-b-common-errors/index.md) | vibe coding 中的常見錯誤及排查方法 | ✅ |
|
||||||
|
|
||||||
|
### 二、初中級開發工程師
|
||||||
|
|
||||||
|
#### 前端部分
|
||||||
|
|
||||||
|
| 章节 | 關鍵內容 | 狀態 |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| [前端零：使用 lovart 生產素材](../docs/stage-2/frontend/2.0-lovart-assets/) | 學會用 lovart 批量生成人物、場景等視覺素材，為 UI 設計和前端開發提供素材基礎 | 🚧 |
|
||||||
|
| [前端一：Figma 與 MasterGo 入門](../docs/stage-2/frontend/2.1-figma-mastergo/) | 用設計工具梳理信息架構和頁面結構，為前端實現打基礎 | 🚧 |
|
||||||
|
| [前端二：建構第一個現代應用程式-UI 設計](../docs/stage-2/frontend/2.2-ui-design/) | 基於設計稿完成組件化界面，實現從設計到代碼的第一條鏈路 | 🚧 |
|
||||||
|
| [前端三：參考 UI 設計規範與多產品 UI 設計](../docs/stage-2/frontend/2.3-multi-product-ui/) | 圍繞統一主視覺擴展多產品界面，練習系統化設計能力 | 🚧 |
|
||||||
|
| [前端四：一起做霍格沃茨肖像](../docs/stage-2/frontend/2.4-hogwarts-portraits/chapter4-lets-build-hogwarts-portraits.md) | 從 0 到 1 做出接入 AI 能力的前端應用，串聯設計與開發 | ✅ |
|
||||||
|
|
||||||
|
#### 後端與全棧部分
|
||||||
|
|
||||||
|
| 章节 | 關鍵內容 | 狀態 |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| [後端一：什麼是 API](../docs/stage-2/backend/2.1-what-is-api/extra2/extra2-what-is-api.md) | 理解 HTTP 接口與請求響應模型，為後端整合與聯調做準備 | ✅ |
|
||||||
|
| [後端二：從數據庫到 Supabase](../docs/stage-2/backend/2.2-database-supabase/chapter5/chapter5-from-database-to-supabase.md) | 在 Supabase 上落地數據庫和 API，打通數據模型與前端頁面 | ✅ |
|
||||||
|
| [後端三：大模型輔助編寫接口代碼與接口文檔](../docs/stage-2/backend/2.3-ai-interface-code/) | 用大模型協助生成接口與數據庫文檔及代碼，實現可讀可測的後端 | 🚧 |
|
||||||
|
| [後端四：Git 工作流](../docs/stage-2/backend/2.4-git-workflow/extra1/extra1-what-is-git-and-what-is-github.md) | 在 Git 工作流中管理代碼，進行版本控制和協作 | ✅ |
|
||||||
|
| [後端五：Zeabur 部署](../docs/stage-2/backend/2.5-zeabur-deployment/extra6/extra6-zeabur-what-is-it-and-how-to-deploy-web-applications.md) | 將應用部署到 Zeabur 上線 | ✅ |
|
||||||
|
| [後端六：現代 CLI 開發工具](../docs/stage-2/backend/2.6-modern-cli/extra7/extra7-cli-ai-coding-tools-and-the-principles-of-test-driven-development.md) | 使用 CLI 類 AI 編程工具加速開發與調試，形成個人工程化工作流 | ✅ |
|
||||||
|
| [後端七：如何整合 Stripe 等收費系統](../docs/stage-2/backend/2.7-stripe-payment/) | 接入支付系統，完成收費鏈路與基礎結算流程 | 🚧 |
|
||||||
|
| [大作業 1：建構第一個現代應用程式-全棧應用](../docs/stage-2/assignments/2.1-fullstack-app/) | 綜合前端、後端與支付模塊，完成可上線的全棧 Web 應用 | 🚧 |
|
||||||
|
| [大作業 2：現代前端組件庫 + Trae 實戰](../docs/stage-2/assignments/2.2-modern-frontend-trae/) | 使用現代前端組件庫與 Trae，獨立完成可登錄註冊並支持收費的產品 | 🚧 |
|
||||||
|
|
||||||
|
#### AI 能力附錄
|
||||||
|
|
||||||
|
| 章节 | 關鍵內容 | 狀態 |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| [AI 一：Dify 入門與知識庫整合](../docs/stage-2/ai-capabilities/2.1-dify-knowledge-base/chapter3/chapter3-getting-started-with-dify-and-its-knowledge-base-integration.md) | 用 Dify Workflow 與基礎 RAG 搭建工具類產品，為後續應用升級打樣 | ✅ |
|
||||||
|
| [AI 二：學會查詢 AI 詞典與整合多模態 API](../docs/stage-2/ai-capabilities/2.2-multimodal-api/extra3/extra3-ai-capability-starter-handbook.md) | 學會查找合適的模型與 API，並把文本、圖像等多模態能力接入產品 | 🚧 |
|
||||||
|
|
||||||
|
### 三、高級開發工程師
|
||||||
|
|
||||||
|
| 章节 | 關鍵內容 | 狀態 |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| [高級一：MCP 與 ClaudeCode Skills](../docs/stage-3/core-skills/3.1-mcp-claudecode-skills/) | 通過 MCP 與 Skills 擴展 IDE 能力，把外部服務接成工具 | 🚧 |
|
||||||
|
| [高級二：如何讓 Coding Tools 長時間工作](../docs/stage-3/core-skills/3.2-long-running-tasks/) | 設計和配置長時間運行的任務，讓 Coding Tools 更穩定可靠 | 🚧 |
|
||||||
|
| [高級三：多平台開發：如何建構微信小程式](../docs/stage-3/cross-platform/3.3-wechat-miniprogram/) | 了解微信小程式生態，從官方模板到上線完成一個前端小程式 | ✅ |
|
||||||
|
| [高級四：多平台開發：如何建構微信小程式-包含後端](../docs/stage-3/cross-platform/3.4-wechat-miniprogram-backend/) | 在小程式中接入數據庫與後端邏輯，打通完整業務閉環 | 🚧 |
|
||||||
|
| [高級五：多平台開發：如何建構安卓程式](../docs/stage-3/cross-platform/3.5-android-app/) | 使用 Expo 等工具，完成 Web/原生一體化的安卓應用開發 | 🚧 |
|
||||||
|
| [高級六：多平台開發：如何建構 iOS 程式](../docs/stage-3/cross-platform/3.6-ios-app/) | 使用 Expo 等工具，完成 Web/原生一體化的 iOS 應用開發 | 🚧 |
|
||||||
|
| [高級七：如何建構屬於自己的個人網頁與學術博客](../docs/stage-3/personal-brand/3.7-personal-website-blog/) | 從選型、搭建到部署，建構展示個人專案與學術成果的長久在線主頁 | 🚧 |
|
||||||
|
|
||||||
|
#### AI 能力附錄
|
||||||
|
|
||||||
|
| 章节 | 關鍵內容 | 狀態 |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| [高級 AI 一：什麼是 RAG 以及它如何工作](../docs/stage-3/ai-advanced/3.a1-rag-introduction/extra5-what-is-rag-and-how-does-it-work-and-future.md) | 系統理解 RAG 原理與常見架構，為複雜應用提供知識檢索基礎 | ✅ |
|
||||||
|
| [高級 AI 二：中高級 RAG 與工作流編排：以 LangGraph 為例](../docs/stage-3/ai-advanced/3.a2-langgraph-advanced-rag/) | 使用 LangGraph 等工具設計多步工作流與中高級 RAG 系統 | 🚧 |
|
||||||
|
|
||||||
|
## 🛠️ 如何學習
|
||||||
|
|
||||||
|
- 根據個人能力，選擇性地閱讀和實踐相關章節，如果有問題歡迎 issue 提問。
|
||||||
|
|
||||||
|
## 💻 本地啟動本課件
|
||||||
|
|
||||||
|
### 現代方案
|
||||||
|
|
||||||
|
在 AI IDE 對話框（vscode、cursor、trae 等）中，輸入下列提示詞啟動本課件：
|
||||||
|
|
||||||
|
```
|
||||||
|
請你幫我運行這個專案的本地服務
|
||||||
|
```
|
||||||
|
|
||||||
|
### 舊方案
|
||||||
|
|
||||||
|
1. npm install
|
||||||
|
2. npm run dev
|
||||||
|
3. 打開瀏覽器訪問 `http://localhost:5173` 即可查看。
|
||||||
|
|
||||||
|
## 🤝 參與貢獻
|
||||||
|
|
||||||
|
- 如果你發現了一些問題，或者覺得任何可以改進本專案的地方，可以提 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://yixuan20.github.io/)（頁面美術設計-清華大學）
|
||||||
|
- AI Vibe Coding 101 內測群完整給建議體驗的小夥伴們
|
||||||
|
|
||||||
|
### 特別感謝
|
||||||
|
|
||||||
|
- 感謝 [@Sm1les](https://github.com/Sm1les) 對本專案的幫助與支持
|
||||||
|
- 感謝所有為本專案做出貢獻的開發者們 ❤️
|
||||||
|
|
||||||
|
<div align=center style="margin-top: 30px;">
|
||||||
|
<a href="https://github.com/datawhalechina/easy-vibe/graphs/contributors">
|
||||||
|
<img src="https://contrib.rocks/image?repo=datawhalechina/easy-vibe" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
## <span id="contact">📧 聯系我們</span>
|
||||||
|
|
||||||
|
<div align=center>
|
||||||
|
<p>如果有問題提建議吐槽，或者想要一起交流，請掃描下方二維碼</p>
|
||||||
|
<img src="../assets/wechat.png" width="280">
|
||||||
|
|
||||||
|
<p>掃描下方二維碼關注公眾號：Datawhale</p>
|
||||||
|
<img src="https://raw.githubusercontent.com/datawhalechina/pumpkin-book/master/res/qrcode.jpeg" width="180" height="180">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
## 📄 LICENSE
|
||||||
|
|
||||||
|
<div align="center">
|
||||||
|
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">
|
||||||
|
<img
|
||||||
|
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>
|
||||||
|
進行許可。
|
||||||
|
</div>
|
||||||
|
|
||||||
|
## Star History
|
||||||
|
|
||||||
|
[](https://www.star-history.com/#datawhalechina/easy-vibe&type=date&legend=top-left)
|
||||||
+369
-73
@@ -4,107 +4,128 @@ import { defineConfig } from 'vitepress'
|
|||||||
const isVercel = process.env.VERCEL === '1'
|
const isVercel = process.env.VERCEL === '1'
|
||||||
const base = isVercel ? '/' : '/easy-vibe/'
|
const base = isVercel ? '/' : '/easy-vibe/'
|
||||||
|
|
||||||
export default defineConfig({
|
// 通用配置
|
||||||
base: base,
|
const commonHead = [
|
||||||
title: 'Easy-Vibe Tutorial',
|
|
||||||
description: 'Easy-Vibe 中文实战课',
|
|
||||||
head: [
|
|
||||||
['link', { rel: 'icon', href: `${base}logo.png`.replace('//', '/') }],
|
['link', { rel: 'icon', href: `${base}logo.png`.replace('//', '/') }],
|
||||||
['link', { rel: 'stylesheet', href: `${base}style.css`.replace('//', '/') }]
|
['link', { rel: 'stylesheet', href: `${base}style.css`.replace('//', '/') }]
|
||||||
],
|
]
|
||||||
themeConfig: {
|
|
||||||
|
const commonThemeConfig = {
|
||||||
logo: `${base}logo.png`.replace('//', '/'),
|
logo: `${base}logo.png`.replace('//', '/'),
|
||||||
search: {
|
search: {
|
||||||
provider: 'local'
|
provider: 'local'
|
||||||
},
|
},
|
||||||
|
socialLinks: [
|
||||||
|
{ icon: 'github', link: 'https://github.com/datawhalechina/easy-vibe' }
|
||||||
|
],
|
||||||
|
outline: {
|
||||||
|
level: [1, 6]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
base: base,
|
||||||
|
|
||||||
|
// 多语言配置 - 使用 cn/en-us/ja 结构
|
||||||
|
locales: {
|
||||||
|
// 中文
|
||||||
|
'zh-cn': {
|
||||||
|
label: '简体中文',
|
||||||
|
lang: 'zh-CN',
|
||||||
|
link: '/zh-cn/',
|
||||||
|
title: 'Easy-Vibe 教程',
|
||||||
|
description: '从零到一学习 Vibe Coding',
|
||||||
|
head: commonHead,
|
||||||
|
themeConfig: {
|
||||||
|
...commonThemeConfig,
|
||||||
outline: {
|
outline: {
|
||||||
level: [1, 6],
|
level: [1, 6],
|
||||||
label: '页面导航'
|
label: '页面导航'
|
||||||
},
|
},
|
||||||
nav: [
|
nav: [
|
||||||
{ text: '首页', link: '/' },
|
{ text: '首页', link: '/zh-cn/' },
|
||||||
{ text: '新手入门', link: '/stage-0/0.1-learning-map/' },
|
{ text: '新手入门', link: '/zh-cn/stage-0/0.1-learning-map/' },
|
||||||
{ text: '产品经理', link: '/stage-1/1.1-introduction-to-ai-ide/' },
|
{ text: '产品经理', link: '/zh-cn/stage-1/1.1-introduction-to-ai-ide/' },
|
||||||
{
|
{
|
||||||
text: '初中级开发',
|
text: '初中级开发',
|
||||||
link: '/stage-2/frontend/2.0-lovart-assets/'
|
link: '/zh-cn/stage-2/frontend/2.0-lovart-assets/'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: '高级开发',
|
text: '高级开发',
|
||||||
link: '/stage-3/core-skills/3.1-mcp-claudecode-skills/'
|
link: '/zh-cn/stage-3/core-skills/3.1-mcp-claudecode-skills/'
|
||||||
},
|
},
|
||||||
{ text: '附录', link: '/appendix/ai-capability-dictionary' }
|
{ text: '附录', link: '/zh-cn/appendix/ai-capability-dictionary' }
|
||||||
],
|
],
|
||||||
sidebar: {
|
sidebar: {
|
||||||
'/stage-0/': [
|
'/zh-cn/stage-0/': [
|
||||||
{ text: '1. 学习地图', link: '/stage-0/0.1-learning-map/' },
|
{ text: '1. 学习地图', link: '/zh-cn/stage-0/0.1-learning-map/' },
|
||||||
{
|
{
|
||||||
text: '2. AI 时代，会说话就会编程',
|
text: '2. AI 时代，会说话就会编程',
|
||||||
link: '/stage-0/0.2-ai-capabilities-through-games/'
|
link: '/zh-cn/stage-0/0.2-ai-capabilities-through-games/'
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
'/stage-1/': [
|
'/zh-cn/stage-1/': [
|
||||||
{
|
{
|
||||||
text: '1. 认识 AI IDE 工具',
|
text: '1. 认识 AI IDE 工具',
|
||||||
link: '/stage-1/1.1-introduction-to-ai-ide/'
|
link: '/zh-cn/stage-1/1.1-introduction-to-ai-ide/'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: '2. 动手做出原型',
|
text: '2. 动手做出原型',
|
||||||
link: '/stage-1/1.2-building-prototype/'
|
link: '/zh-cn/stage-1/1.2-building-prototype/'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: '3. 给原型加上 AI 能力',
|
text: '3. 给原型加上 AI 能力',
|
||||||
link: '/stage-1/1.3-integrating-ai-capabilities/'
|
link: '/zh-cn/stage-1/1.3-integrating-ai-capabilities/'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: '4. 完整项目实战',
|
text: '4. 完整项目实战',
|
||||||
link: '/stage-1/1.4-complete-project-practice/'
|
link: '/zh-cn/stage-1/1.4-complete-project-practice/'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: '5. 大作业：完成一个 Web 应用原型',
|
text: '5. 大作业：完成一个 Web 应用原型',
|
||||||
link: '/stage-1/1.5-final-project/'
|
link: '/zh-cn/stage-1/1.5-final-project/'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: '附录 A：产品思维补充',
|
text: '附录 A：产品思维补充',
|
||||||
link: '/stage-1/appendix-a-product-thinking/'
|
link: '/zh-cn/stage-1/appendix-a-product-thinking/'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: '附录 B：常见报错及解决方案',
|
text: '附录 B：常见报错及解决方案',
|
||||||
link: '/stage-1/appendix-b-common-errors/'
|
link: '/zh-cn/stage-1/appendix-b-common-errors/'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: '附录示例：贪吃蛇游戏教程',
|
text: '附录示例：贪吃蛇游戏教程',
|
||||||
link: '/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial'
|
link: '/zh-cn/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: '附录示例：用 AI 搭建完整网站',
|
text: '附录示例：用 AI 搭建完整网站',
|
||||||
link: '/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents'
|
link: '/zh-cn/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents'
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
'/stage-2/': [
|
'/zh-cn/stage-2/': [
|
||||||
{
|
{
|
||||||
text: '前端开发',
|
text: '前端开发',
|
||||||
collapsed: false,
|
collapsed: false,
|
||||||
items: [
|
items: [
|
||||||
{
|
{
|
||||||
text: '前端零：使用 Lovart 生产素材',
|
text: '前端零：使用 Lovart 生产素材',
|
||||||
link: '/stage-2/frontend/2.0-lovart-assets/'
|
link: '/zh-cn/stage-2/frontend/2.0-lovart-assets/'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: '前端一：Figma 与 MasterGo 入门',
|
text: '前端一：Figma 与 MasterGo 入门',
|
||||||
link: '/stage-2/frontend/2.1-figma-mastergo/'
|
link: '/zh-cn/stage-2/frontend/2.1-figma-mastergo/'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: '前端二：构建第一个现代应用程序 - UI 设计',
|
text: '前端二：构建第一个现代应用程序 - UI 设计',
|
||||||
link: '/stage-2/frontend/2.2-ui-design/'
|
link: '/zh-cn/stage-2/frontend/2.2-ui-design/'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: '前端三：参考 UI 设计规范与多产品 UI 设计',
|
text: '前端三：参考 UI 设计规范与多产品 UI 设计',
|
||||||
link: '/stage-2/frontend/2.3-multi-product-ui/'
|
link: '/zh-cn/stage-2/frontend/2.3-multi-product-ui/'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: '前端四：一起做霍格沃茨画像',
|
text: '前端四：一起做霍格沃茨画像',
|
||||||
link: '/stage-2/frontend/2.4-hogwarts-portraits/chapter4-lets-build-hogwarts-portraits'
|
link: '/zh-cn/stage-2/frontend/2.4-hogwarts-portraits/chapter4-lets-build-hogwarts-portraits'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
@@ -114,31 +135,31 @@ export default defineConfig({
|
|||||||
items: [
|
items: [
|
||||||
{
|
{
|
||||||
text: '后端一：什么是 API',
|
text: '后端一：什么是 API',
|
||||||
link: '/stage-2/backend/2.1-what-is-api/extra2/extra2-what-is-api'
|
link: '/zh-cn/stage-2/backend/2.1-what-is-api/extra2/extra2-what-is-api'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: '后端二：从数据库到 Supabase',
|
text: '后端二：从数据库到 Supabase',
|
||||||
link: '/stage-2/backend/2.2-database-supabase/chapter5/chapter5-from-database-to-supabase'
|
link: '/zh-cn/stage-2/backend/2.2-database-supabase/chapter5/chapter5-from-database-to-supabase'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: '后端三：大模型辅助编写接口代码与接口文档',
|
text: '后端三：大模型辅助编写接口代码与接口文档',
|
||||||
link: '/stage-2/backend/2.3-ai-interface-code/'
|
link: '/zh-cn/stage-2/backend/2.3-ai-interface-code/'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: '后端四：Git 工作流',
|
text: '后端四：Git 工作流',
|
||||||
link: '/stage-2/backend/2.4-git-workflow/extra1/extra1-what-is-git-and-what-is-github'
|
link: '/zh-cn/stage-2/backend/2.4-git-workflow/extra1/extra1-what-is-git-and-what-is-github'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: '后端五：Zeabur 部署',
|
text: '后端五：Zeabur 部署',
|
||||||
link: '/stage-2/backend/2.5-zeabur-deployment/extra6/extra6-zeabur-what-is-it-and-how-to-deploy-web-applications'
|
link: '/zh-cn/stage-2/backend/2.5-zeabur-deployment/extra6/extra6-zeabur-what-is-it-and-how-to-deploy-web-applications'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: '后端六：现代 CLI 开发工具',
|
text: '后端六：现代 CLI 开发工具',
|
||||||
link: '/stage-2/backend/2.6-modern-cli/extra7/extra7-cli-ai-coding-tools-and-the-principles-of-test-driven-development'
|
link: '/zh-cn/stage-2/backend/2.6-modern-cli/extra7/extra7-cli-ai-coding-tools-and-the-principles-of-test-driven-development'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: '后端七：如何集成 Stripe 等收费系统',
|
text: '后端七：如何集成 Stripe 等收费系统',
|
||||||
link: '/stage-2/backend/2.7-stripe-payment/'
|
link: '/zh-cn/stage-2/backend/2.7-stripe-payment/'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
@@ -148,11 +169,11 @@ export default defineConfig({
|
|||||||
items: [
|
items: [
|
||||||
{
|
{
|
||||||
text: '大作业 1：构建第一个现代应用程序 - 全栈应用',
|
text: '大作业 1：构建第一个现代应用程序 - 全栈应用',
|
||||||
link: '/stage-2/assignments/2.1-fullstack-app/'
|
link: '/zh-cn/stage-2/assignments/2.1-fullstack-app/'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: '大作业 2：现代前端组件库 + Trae 实战',
|
text: '大作业 2：现代前端组件库 + Trae 实战',
|
||||||
link: '/stage-2/assignments/2.2-modern-frontend-trae/'
|
link: '/zh-cn/stage-2/assignments/2.2-modern-frontend-trae/'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
@@ -162,27 +183,27 @@ export default defineConfig({
|
|||||||
items: [
|
items: [
|
||||||
{
|
{
|
||||||
text: 'AI 一：Dify 入门与知识库集成',
|
text: 'AI 一：Dify 入门与知识库集成',
|
||||||
link: '/stage-2/ai-capabilities/2.1-dify-knowledge-base/chapter3/chapter3-getting-started-with-dify-and-its-knowledge-base-integration'
|
link: '/zh-cn/stage-2/ai-capabilities/2.1-dify-knowledge-base/chapter3/chapter3-getting-started-with-dify-and-its-knowledge-base-integration'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: 'AI 二：学会查询 AI 词典与集成多模态 API',
|
text: 'AI 二：学会查询 AI 词典与集成多模态 API',
|
||||||
link: '/stage-2/ai-capabilities/2.2-multimodal-api/extra3/extra3-ai-capability-starter-handbook'
|
link: '/zh-cn/stage-2/ai-capabilities/2.2-multimodal-api/extra3/extra3-ai-capability-starter-handbook'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
'/stage-3/': [
|
'/zh-cn/stage-3/': [
|
||||||
{
|
{
|
||||||
text: '核心技能',
|
text: '核心技能',
|
||||||
collapsed: false,
|
collapsed: false,
|
||||||
items: [
|
items: [
|
||||||
{
|
{
|
||||||
text: '高级一：MCP 与 ClaudeCode Skills',
|
text: '高级一：MCP 与 ClaudeCode Skills',
|
||||||
link: '/stage-3/core-skills/3.1-mcp-claudecode-skills/'
|
link: '/zh-cn/stage-3/core-skills/3.1-mcp-claudecode-skills/'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: '高级二：如何让 Coding Tools 长时间工作',
|
text: '高级二：如何让 Coding Tools 长时间工作',
|
||||||
link: '/stage-3/core-skills/3.2-long-running-tasks/'
|
link: '/zh-cn/stage-3/core-skills/3.2-long-running-tasks/'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
@@ -192,19 +213,19 @@ export default defineConfig({
|
|||||||
items: [
|
items: [
|
||||||
{
|
{
|
||||||
text: '高级三：如何构建微信小程序',
|
text: '高级三：如何构建微信小程序',
|
||||||
link: '/stage-3/cross-platform/3.3-wechat-miniprogram/'
|
link: '/zh-cn/stage-3/cross-platform/3.3-wechat-miniprogram/'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: '高级四：如何构建微信小程序（包含后端）',
|
text: '高级四：如何构建微信小程序（包含后端）',
|
||||||
link: '/stage-3/cross-platform/3.4-wechat-miniprogram-backend/'
|
link: '/zh-cn/stage-3/cross-platform/3.4-wechat-miniprogram-backend/'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: '高级五：如何构建安卓程序',
|
text: '高级五：如何构建安卓程序',
|
||||||
link: '/stage-3/cross-platform/3.5-android-app/'
|
link: '/zh-cn/stage-3/cross-platform/3.5-android-app/'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: '高级六：如何构建 iOS 程序',
|
text: '高级六：如何构建 iOS 程序',
|
||||||
link: '/stage-3/cross-platform/3.6-ios-app/'
|
link: '/zh-cn/stage-3/cross-platform/3.6-ios-app/'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
@@ -214,7 +235,7 @@ export default defineConfig({
|
|||||||
items: [
|
items: [
|
||||||
{
|
{
|
||||||
text: '高级七：如何构建属于自己的个人网页与学术博客',
|
text: '高级七：如何构建属于自己的个人网页与学术博客',
|
||||||
link: '/stage-3/personal-brand/3.7-personal-website-blog/'
|
link: '/zh-cn/stage-3/personal-brand/3.7-personal-website-blog/'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
@@ -224,93 +245,368 @@ export default defineConfig({
|
|||||||
items: [
|
items: [
|
||||||
{
|
{
|
||||||
text: '高级 AI 一：什么是 RAG 以及它如何工作',
|
text: '高级 AI 一：什么是 RAG 以及它如何工作',
|
||||||
link: '/stage-3/ai-advanced/3.a1-rag-introduction/extra5-what-is-rag-and-how-does-it-work-and-future'
|
link: '/zh-cn/stage-3/ai-advanced/3.a1-rag-introduction/extra5-what-is-rag-and-how-does-it-work-and-future'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: '高级 AI 二：中高级 RAG 与工作流编排 - 以 LangGraph 为例',
|
text: '高级 AI 二：中高级 RAG 与工作流编排 - 以 LangGraph 为例',
|
||||||
link: '/stage-3/ai-advanced/3.a2-langgraph-advanced-rag/'
|
link: '/zh-cn/stage-3/ai-advanced/3.a2-langgraph-advanced-rag/'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
'/guide/': [
|
'/zh-cn/guide/': [
|
||||||
{
|
{
|
||||||
text: '课程指南',
|
text: '课程指南',
|
||||||
items: [{ text: '课程介绍', link: '/guide/introduction' }]
|
items: [{ text: '课程介绍', link: '/zh-cn/guide/introduction' }]
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
'/extra/': [
|
'/zh-cn/extra/': [
|
||||||
{
|
{
|
||||||
text: 'Extra 扩展知识（旧版，已迁移到 Stage 2/3）',
|
text: 'Extra 扩展知识（旧版，已迁移到 Stage 2/3）',
|
||||||
items: [
|
items: [
|
||||||
{
|
{
|
||||||
text: 'Extra 1: Git & GitHub',
|
text: 'Extra 1: Git & GitHub',
|
||||||
link: '/extra/extra1/extra1-what-is-git-and-what-is-github'
|
link: '/zh-cn/extra/extra1/extra1-what-is-git-and-what-is-github'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: 'Extra 2: What is API',
|
text: 'Extra 2: What is API',
|
||||||
link: '/extra/extra2/extra2-what-is-api'
|
link: '/zh-cn/extra/extra2/extra2-what-is-api'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: 'Extra 5: What is RAG',
|
text: 'Extra 5: What is RAG',
|
||||||
link: '/extra/extra5/extra5-what-is-rag-and-how-does-it-work-and-future'
|
link: '/zh-cn/extra/extra5/extra5-what-is-rag-and-how-does-it-work-and-future'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: 'Extra 6: Zeabur Deployment',
|
text: 'Extra 6: Zeabur Deployment',
|
||||||
link: '/extra/extra6/extra6-zeabur-what-is-it-and-how-to-deploy-web-applications'
|
link: '/zh-cn/extra/extra6/extra6-zeabur-what-is-it-and-how-to-deploy-web-applications'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: 'Extra 7: CLI AI Tools & TDD',
|
text: 'Extra 7: CLI AI Tools & TDD',
|
||||||
link: '/extra/extra7/extra7-cli-ai-coding-tools-and-the-principles-of-test-driven-development'
|
link: '/zh-cn/extra/extra7/extra7-cli-ai-coding-tools-and-the-principles-of-test-driven-development'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
'/examples/': [
|
'/zh-cn/examples/': [
|
||||||
{
|
{
|
||||||
text: 'Examples 实战案例（旧版，已迁移到 Stage 0/3）',
|
text: 'Examples 实战案例（旧版，已迁移到 Stage 0/3）',
|
||||||
items: [
|
items: [
|
||||||
{
|
{
|
||||||
text: 'Ex 0.1: Snake Game',
|
text: 'Ex 0.1: Snake Game',
|
||||||
link: '/examples/example0/example0-1/vibe-coding-tools-snake-game-tutorial'
|
link: '/zh-cn/examples/example0/example0-1/vibe-coding-tools-snake-game-tutorial'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: 'Ex 0.2: Build Website with AI',
|
text: 'Ex 0.2: Build Website with AI',
|
||||||
link: '/examples/example0/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents'
|
link: '/zh-cn/examples/example0/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
'/project/': [
|
'/zh-cn/project/': [
|
||||||
{
|
{
|
||||||
text: 'Project 文档（旧版，已迁移到 Stage 2）',
|
text: 'Project 文档（旧版，已迁移到 Stage 2）',
|
||||||
items: [
|
items: [
|
||||||
{
|
{
|
||||||
text: '前端四：霍格沃茨画像',
|
text: '前端四：霍格沃茨画像',
|
||||||
link: '/project/chapter4/chapter4-lets-build-hogwarts-portraits'
|
link: '/zh-cn/project/chapter4/chapter4-lets-build-hogwarts-portraits'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: '后端二：Supabase 数据库',
|
text: '后端二：Supabase 数据库',
|
||||||
link: '/project/chapter5/chapter5-from-database-to-supabase'
|
link: '/zh-cn/project/chapter5/chapter5-from-database-to-supabase'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: 'AI 一：Dify & Knowledge Base',
|
text: 'AI 一：Dify & Knowledge Base',
|
||||||
link: '/project/chapter3/chapter3-getting-started-with-dify-and-its-knowledge-base-integration'
|
link: '/zh-cn/project/chapter3/chapter3-getting-started-with-dify-and-its-knowledge-base-integration'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
'/appendix/': [
|
'/zh-cn/appendix/': [
|
||||||
{
|
{
|
||||||
text: '附录',
|
text: '附录',
|
||||||
items: [
|
items: [
|
||||||
{ text: 'AI 能力词典', link: '/appendix/ai-capability-dictionary' }
|
{ text: 'AI 能力词典', link: '/zh-cn/appendix/ai-capability-dictionary' }
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
socialLinks: [
|
|
||||||
{ icon: 'github', link: 'https://github.com/datawhalechina/easy-vibe' }
|
// 英文
|
||||||
]
|
'en-us': {
|
||||||
|
label: 'English (US)',
|
||||||
|
lang: 'en-US',
|
||||||
|
link: '/en-us/',
|
||||||
|
title: 'Easy-Vibe Tutorial',
|
||||||
|
description: 'Learn Vibe Coding from Zero to Advanced',
|
||||||
|
head: commonHead,
|
||||||
|
themeConfig: {
|
||||||
|
...commonThemeConfig,
|
||||||
|
outline: {
|
||||||
|
level: [1, 6],
|
||||||
|
label: 'On this page'
|
||||||
|
},
|
||||||
|
nav: [
|
||||||
|
{ text: 'Home', link: '/en-us/' },
|
||||||
|
{ text: 'Getting Started', link: '/en-us/stage-0/0.1-learning-map/' },
|
||||||
|
{ text: 'AI Product Manager', link: '/en-us/stage-1/1.1-introduction-to-ai-ide/' },
|
||||||
|
{
|
||||||
|
text: 'Full-Stack Development',
|
||||||
|
link: '/en-us/stage-2/frontend/2.0-lovart-assets/'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: 'Advanced Development',
|
||||||
|
link: '/en-us/stage-3/core-skills/3.1-mcp-claudecode-skills/'
|
||||||
|
},
|
||||||
|
{ text: 'Appendix', link: '/en-us/appendix/ai-capability-dictionary' }
|
||||||
|
],
|
||||||
|
// TODO: Add English sidebar when content is ready
|
||||||
|
sidebar: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 日文
|
||||||
|
'ja-jp': {
|
||||||
|
label: '日本語',
|
||||||
|
lang: 'ja-JP',
|
||||||
|
link: '/ja-jp/',
|
||||||
|
title: 'Easy-Vibe チュートリアル',
|
||||||
|
description: 'ゼロから学ぶ Vibe Coding',
|
||||||
|
head: commonHead,
|
||||||
|
themeConfig: {
|
||||||
|
...commonThemeConfig,
|
||||||
|
outline: {
|
||||||
|
level: [1, 6],
|
||||||
|
label: 'このページの目次'
|
||||||
|
},
|
||||||
|
nav: [
|
||||||
|
{ text: 'ホーム', link: '/ja-jp/' },
|
||||||
|
{ text: '入門', link: '/ja-jp/stage-0/0.1-learning-map/' },
|
||||||
|
{ text: 'AI プロダクトマネージャー', link: '/ja-jp/stage-1/1.1-introduction-to-ai-ide/' },
|
||||||
|
{
|
||||||
|
text: 'フルスタック開発',
|
||||||
|
link: '/ja-jp/stage-2/frontend/2.0-lovart-assets/'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '上級開発',
|
||||||
|
link: '/ja-jp/stage-3/core-skills/3.1-mcp-claudecode-skills/'
|
||||||
|
},
|
||||||
|
{ text: '付録', link: '/ja-jp/appendix/ai-capability-dictionary' }
|
||||||
|
],
|
||||||
|
// TODO: Add Japanese sidebar when content is ready
|
||||||
|
sidebar: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
'zh-tw': {
|
||||||
|
label: '繁體中文',
|
||||||
|
lang: 'zh-TW',
|
||||||
|
link: '/zh-tw/',
|
||||||
|
title: 'Easy-Vibe 教程',
|
||||||
|
description: '從零到一學習 Vibe Coding',
|
||||||
|
head: commonHead,
|
||||||
|
themeConfig: {
|
||||||
|
...commonThemeConfig,
|
||||||
|
outline: {
|
||||||
|
level: [1, 6],
|
||||||
|
label: '頁面導航'
|
||||||
|
},
|
||||||
|
nav: [
|
||||||
|
{ text: '首頁', link: '/zh-tw/' },
|
||||||
|
{ text: '新手入門', link: '/zh-tw/stage-0/0.1-learning-map/' },
|
||||||
|
{ text: '產品經理', link: '/zh-tw/stage-1/1.1-introduction-to-ai-ide/' },
|
||||||
|
{
|
||||||
|
text: '初中級開發',
|
||||||
|
link: '/zh-tw/stage-2/frontend/2.0-lovart-assets/'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '高級開發',
|
||||||
|
link: '/zh-tw/stage-3/core-skills/3.1-mcp-claudecode-skills/'
|
||||||
|
},
|
||||||
|
{ text: '附錄', link: '/zh-tw/appendix/ai-capability-dictionary' }
|
||||||
|
],
|
||||||
|
sidebar: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
'ko-kr': {
|
||||||
|
label: '한국어',
|
||||||
|
lang: 'ko-KR',
|
||||||
|
link: '/ko-kr/',
|
||||||
|
title: 'Easy-Vibe 튜토리얼',
|
||||||
|
description: 'Vibe Coding을 처음부터 체계적으로 학습합니다',
|
||||||
|
head: commonHead,
|
||||||
|
themeConfig: {
|
||||||
|
...commonThemeConfig,
|
||||||
|
outline: {
|
||||||
|
level: [1, 6],
|
||||||
|
label: '페이지 탐색'
|
||||||
|
},
|
||||||
|
nav: [
|
||||||
|
{ text: '홈', link: '/ko-kr/' },
|
||||||
|
{ text: '입문', link: '/ko-kr/stage-0/0.1-learning-map/' },
|
||||||
|
{ text: 'AI PM', link: '/ko-kr/stage-1/1.1-introduction-to-ai-ide/' },
|
||||||
|
{
|
||||||
|
text: '풀스택 개발',
|
||||||
|
link: '/ko-kr/stage-2/frontend/2.0-lovart-assets/'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '고급 개발',
|
||||||
|
link: '/ko-kr/stage-3/core-skills/3.1-mcp-claudecode-skills/'
|
||||||
|
},
|
||||||
|
{ text: '부록', link: '/ko-kr/appendix/ai-capability-dictionary' }
|
||||||
|
],
|
||||||
|
sidebar: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
'es-es': {
|
||||||
|
label: 'Español',
|
||||||
|
lang: 'es-ES',
|
||||||
|
link: '/es-es/',
|
||||||
|
title: 'Tutorial de Easy-Vibe',
|
||||||
|
description: 'Aprende Vibe Coding desde cero hasta avanzado',
|
||||||
|
head: commonHead,
|
||||||
|
themeConfig: {
|
||||||
|
...commonThemeConfig,
|
||||||
|
outline: {
|
||||||
|
level: [1, 6],
|
||||||
|
label: 'Navegación de página'
|
||||||
|
},
|
||||||
|
nav: [
|
||||||
|
{ text: 'Inicio', link: '/es-es/' },
|
||||||
|
{ text: 'Principiante', link: '/es-es/stage-0/0.1-learning-map/' },
|
||||||
|
{ text: 'PM de IA', link: '/es-es/stage-1/1.1-introduction-to-ai-ide/' },
|
||||||
|
{
|
||||||
|
text: 'Desarrollo Full Stack',
|
||||||
|
link: '/es-es/stage-2/frontend/2.0-lovart-assets/'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: 'Desarrollo Avanzado',
|
||||||
|
link: '/es-es/stage-3/core-skills/3.1-mcp-claudecode-skills/'
|
||||||
|
},
|
||||||
|
{ text: 'Apéndice', link: '/es-es/appendix/ai-capability-dictionary' }
|
||||||
|
],
|
||||||
|
sidebar: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
'fr-fr': {
|
||||||
|
label: 'Français',
|
||||||
|
lang: 'fr-FR',
|
||||||
|
link: '/fr-fr/',
|
||||||
|
title: 'Tutoriel Easy-Vibe',
|
||||||
|
description: 'Apprenez Vibe Coding de zéro à avancé',
|
||||||
|
head: commonHead,
|
||||||
|
themeConfig: {
|
||||||
|
...commonThemeConfig,
|
||||||
|
outline: {
|
||||||
|
level: [1, 6],
|
||||||
|
label: 'Navigation de page'
|
||||||
|
},
|
||||||
|
nav: [
|
||||||
|
{ text: 'Accueil', link: '/fr-fr/' },
|
||||||
|
{ text: 'Débutant', link: '/fr-fr/stage-0/0.1-learning-map/' },
|
||||||
|
{ text: 'PM IA', link: '/fr-fr/stage-1/1.1-introduction-to-ai-ide/' },
|
||||||
|
{
|
||||||
|
text: 'Développement Full Stack',
|
||||||
|
link: '/fr-fr/stage-2/frontend/2.0-lovart-assets/'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: 'Développement Avancé',
|
||||||
|
link: '/fr-fr/stage-3/core-skills/3.1-mcp-claudecode-skills/'
|
||||||
|
},
|
||||||
|
{ text: 'Annexe', link: '/fr-fr/appendix/ai-capability-dictionary' }
|
||||||
|
],
|
||||||
|
sidebar: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
'de-de': {
|
||||||
|
label: 'Deutsch',
|
||||||
|
lang: 'de-DE',
|
||||||
|
link: '/de-de/',
|
||||||
|
title: 'Easy-Vibe Tutorial',
|
||||||
|
description: 'Lernen Sie Vibe Coding von Null bis Fortgeschritten',
|
||||||
|
head: commonHead,
|
||||||
|
themeConfig: {
|
||||||
|
...commonThemeConfig,
|
||||||
|
outline: {
|
||||||
|
level: [1, 6],
|
||||||
|
label: 'Seitennavigation'
|
||||||
|
},
|
||||||
|
nav: [
|
||||||
|
{ text: 'Start', link: '/de-de/' },
|
||||||
|
{ text: 'Einsteiger', link: '/de-de/stage-0/0.1-learning-map/' },
|
||||||
|
{ text: 'KI-PM', link: '/de-de/stage-1/1.1-introduction-to-ai-ide/' },
|
||||||
|
{
|
||||||
|
text: 'Full Stack Entwicklung',
|
||||||
|
link: '/de-de/stage-2/frontend/2.0-lovart-assets/'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: 'Fortgeschrittene Entwicklung',
|
||||||
|
link: '/de-de/stage-3/core-skills/3.1-mcp-claudecode-skills/'
|
||||||
|
},
|
||||||
|
{ text: 'Anhang', link: '/de-de/appendix/ai-capability-dictionary' }
|
||||||
|
],
|
||||||
|
sidebar: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
'ar-sa': {
|
||||||
|
label: 'العربية',
|
||||||
|
lang: 'ar-SA',
|
||||||
|
link: '/ar-sa/',
|
||||||
|
title: 'دروس Easy-Vibe',
|
||||||
|
description: 'تعلم Vibe Coding من الصفر إلى المتقدم',
|
||||||
|
head: commonHead,
|
||||||
|
themeConfig: {
|
||||||
|
...commonThemeConfig,
|
||||||
|
outline: {
|
||||||
|
level: [1, 6],
|
||||||
|
label: 'تنقل الصفحة'
|
||||||
|
},
|
||||||
|
nav: [
|
||||||
|
{ text: 'الرئيسية', link: '/ar-sa/' },
|
||||||
|
{ text: 'المبتدئين', link: '/ar-sa/stage-0/0.1-learning-map/' },
|
||||||
|
{ text: 'مدير منتج AI', link: '/ar-sa/stage-1/1.1-introduction-to-ai-ide/' },
|
||||||
|
{
|
||||||
|
text: 'تطوير Full Stack',
|
||||||
|
link: '/ar-sa/stage-2/frontend/2.0-lovart-assets/'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: 'تطوير متقدم',
|
||||||
|
link: '/ar-sa/stage-3/core-skills/3.1-mcp-claudecode-skills/'
|
||||||
|
},
|
||||||
|
{ text: 'ملحق', link: '/ar-sa/appendix/ai-capability-dictionary' }
|
||||||
|
],
|
||||||
|
sidebar: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
'vi-vn': {
|
||||||
|
label: 'Tiếng Việt',
|
||||||
|
lang: 'vi-VN',
|
||||||
|
link: '/vi-vn/',
|
||||||
|
title: 'Hướng dẫn Easy-Vibe',
|
||||||
|
description: 'Học Vibe Coding từ cơ bản đến nâng cao',
|
||||||
|
head: commonHead,
|
||||||
|
themeConfig: {
|
||||||
|
...commonThemeConfig,
|
||||||
|
outline: {
|
||||||
|
level: [1, 6],
|
||||||
|
label: 'Điều hướng trang'
|
||||||
|
},
|
||||||
|
nav: [
|
||||||
|
{ text: 'Trang chủ', link: '/vi-vn/' },
|
||||||
|
{ text: 'Người mới', link: '/vi-vn/stage-0/0.1-learning-map/' },
|
||||||
|
{ text: 'PM AI', link: '/vi-vn/stage-1/1.1-introduction-to-ai-ide/' },
|
||||||
|
{
|
||||||
|
text: 'Phát triển Full Stack',
|
||||||
|
link: '/vi-vn/stage-2/frontend/2.0-lovart-assets/'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: 'Phát triển Nâng cao',
|
||||||
|
link: '/vi-vn/stage-3/core-skills/3.1-mcp-claudecode-skills/'
|
||||||
|
},
|
||||||
|
{ text: 'Phụ lục', link: '/vi-vn/appendix/ai-capability-dictionary' }
|
||||||
|
],
|
||||||
|
sidebar: {}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -206,3 +206,29 @@
|
|||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 移除链接下划线，改善阅读体验 */
|
||||||
|
.vp-doc a {
|
||||||
|
text-decoration: none !important;
|
||||||
|
border-bottom: 1px solid transparent;
|
||||||
|
transition: border-bottom-color 0.2s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-doc a:hover {
|
||||||
|
border-bottom-color: var(--vp-c-brand-1, #646cff);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 链接保持无下划线，只在悬停时显示 */
|
||||||
|
.VPDoc a,
|
||||||
|
.VPLink a {
|
||||||
|
text-decoration: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 侧边栏链接无下划线 */
|
||||||
|
.VPSidebarItem .VPLink {
|
||||||
|
text-decoration: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.VPSidebarItem .VPLink:hover {
|
||||||
|
text-decoration: none !important;
|
||||||
|
}
|
||||||
|
|||||||
@@ -0,0 +1,114 @@
|
|||||||
|
# 🚀 部署说明
|
||||||
|
|
||||||
|
## Base 路径自动适配
|
||||||
|
|
||||||
|
本项目的 VitePress 配置已经正确处理了 **Vercel** 和 **GitHub Pages** 两种部署环境的不同 base 路径。
|
||||||
|
|
||||||
|
### 自动适配逻辑
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// docs/.vitepress/config.mjs
|
||||||
|
const isVercel = process.env.VERCEL === '1'
|
||||||
|
const base = isVercel ? '/' : '/easy-vibe/'
|
||||||
|
```
|
||||||
|
|
||||||
|
### 部署环境对比
|
||||||
|
|
||||||
|
| 平台 | Base 路径 | 示例 URL |
|
||||||
|
|------|----------|----------|
|
||||||
|
| **Vercel** | `/` | `https://your-project.vercel.app/cn/stage-0/...` |
|
||||||
|
| **GitHub Pages** | `/easy-vibe/` | `https://datawhalechina.github.io/easy-vibe/cn/stage-0/...` |
|
||||||
|
| **本地开发** | `/easy-vibe/` | `http://localhost:5173/easy-vibe/cn/stage-0/...` |
|
||||||
|
| **本地预览** | `/easy-vibe/` | `http://localhost:4173/easy-vibe/cn/stage-0/...` |
|
||||||
|
|
||||||
|
### 首页动态链接
|
||||||
|
|
||||||
|
首页使用 VitePress 的 `useData()` API 来动态获取 base 路径：
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<script setup>
|
||||||
|
import { useData } from 'vitepress'
|
||||||
|
|
||||||
|
const { site } = useData()
|
||||||
|
const base = site.value.base
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<a :href="base + 'cn/stage-0/0.1-learning-map/'">
|
||||||
|
<!-- 链接会自动适配部署环境 -->
|
||||||
|
</a>
|
||||||
|
</template>
|
||||||
|
```
|
||||||
|
|
||||||
|
**优点**：
|
||||||
|
- ✅ 无需硬编码 fallback 值
|
||||||
|
- ✅ 自动适配 Vercel 和 GitHub Pages
|
||||||
|
- ✅ 构建时和运行时都正确
|
||||||
|
|
||||||
|
## 部署步骤
|
||||||
|
|
||||||
|
### Vercel 部署
|
||||||
|
|
||||||
|
1. 推送代码到 GitHub
|
||||||
|
2. Vercel 会自动检测 `vercel.json` 配置
|
||||||
|
3. 自动构建并部署
|
||||||
|
4. 访问 `https://your-project.vercel.app`
|
||||||
|
|
||||||
|
**环境变量**：Vercel 自动设置 `VERCEL=1`
|
||||||
|
|
||||||
|
### GitHub Pages 部署
|
||||||
|
|
||||||
|
1. 配置 GitHub Pages 设置：
|
||||||
|
- Source: `gh-pages` 分支
|
||||||
|
- 或使用 GitHub Actions 从 `main` 分支部署
|
||||||
|
|
||||||
|
2. 构建命令：
|
||||||
|
```bash
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
3. 访问 `https://datawhalechina.github.io/easy-vibe`
|
||||||
|
|
||||||
|
## 验证部署
|
||||||
|
|
||||||
|
部署后检查以下链接是否正常：
|
||||||
|
|
||||||
|
- [ ] 首页能正常访问
|
||||||
|
- [ ] 导航栏链接能正确跳转
|
||||||
|
- [ ] 首页卡片"查看详情"链接正确
|
||||||
|
- [ ] 语言切换功能正常
|
||||||
|
- [ ] 图片资源能正常加载
|
||||||
|
|
||||||
|
## 常见问题
|
||||||
|
|
||||||
|
### Q: Vercel 部署后链接变成 `/easy-vibe/cn/...` 导致 404
|
||||||
|
|
||||||
|
**原因**：Vercel 环境变量未正确设置
|
||||||
|
|
||||||
|
**解决**：
|
||||||
|
1. 检查 Vercel 项目设置中 `Environment Variables`
|
||||||
|
2. 确保 `VERCEL` = `1` 已设置（通常自动设置）
|
||||||
|
3. 重新部署
|
||||||
|
|
||||||
|
### Q: GitHub Pages 部署后所有链接 404
|
||||||
|
|
||||||
|
**原因**：缺少 `/easy-vibe/` base 路径
|
||||||
|
|
||||||
|
**解决**：
|
||||||
|
1. 检查 `docs/.vitepress/config.mjs` 中的 base 配置
|
||||||
|
2. 确保 GitHub Pages 环境下 `isVercel = false`
|
||||||
|
3. 重新构建并部署
|
||||||
|
|
||||||
|
### Q: 本地预览链接缺少 `/easy-vibe/` 前缀
|
||||||
|
|
||||||
|
**原因**：使用了错误的预览命令
|
||||||
|
|
||||||
|
**解决**：
|
||||||
|
```bash
|
||||||
|
# 错误
|
||||||
|
npm run preview # 默认端口 4173，但路径可能不对
|
||||||
|
|
||||||
|
# 正确
|
||||||
|
npm run build
|
||||||
|
npm run preview # 访问 http://localhost:4173/easy-vibe/
|
||||||
|
```
|
||||||
Symlink
+1
@@ -0,0 +1 @@
|
|||||||
|
../../assets
|
||||||
@@ -0,0 +1,99 @@
|
|||||||
|
---
|
||||||
|
layout: home
|
||||||
|
hero:
|
||||||
|
name: 'Easy-Vibe'
|
||||||
|
text: 'تعلم Vibe Coding من الصفر'
|
||||||
|
tagline:
|
||||||
|
- كن شخصًا خارقًا يجمع بين المنتج والتصميم والتطوير الكامل.
|
||||||
|
- من الفكرة إلى النموذج الأولي، من النموذج الأولي إلى المنتج، حول كل مخرج إلى منتج قابل للتسليم.
|
||||||
|
- اجعل AI شريكك: أسرع ، أكثر استقرارًا ، أكثر إبداعًا.
|
||||||
|
- ابنِ خندقك التكنولوجي والمنتجي مع مسار تعلم منهجي.
|
||||||
|
actions:
|
||||||
|
- theme: brand
|
||||||
|
text: ابدأ التعلم
|
||||||
|
link: /stage-0/0.1-learning-map/
|
||||||
|
- theme: alt
|
||||||
|
text: ⭐️ Star على GitHub
|
||||||
|
link: https://github.com/datawhalechina/easy-vibe
|
||||||
|
features:
|
||||||
|
- title: ودود للمبتدئين
|
||||||
|
details: مصمم لخلفيات غير تقنية. ابدأ بـ "إذا يمكنك التحدث ، يمكنك البرمجة" ، ابدأ بسرعة من خلال ألعاب مثل Snake ، وتغلب على الخوف التقني.
|
||||||
|
- title: مسار تدريجي عملي
|
||||||
|
details: طريقة تعلم فريدة "ثلاث مراحل". من تفكير مدير منتج AI ، إلى تطوير كامل المكدس ، إلى بناء تطبيقات معقدة ، خطوة بخطوة.
|
||||||
|
- title: Vibe Coding نموذج جديد
|
||||||
|
details: إتقان جوهر البرمجة في عصر الذكاء الاصطناعي. تعلم البرمجة الزوجية مع AI ، وجعل IDE أقوى شريك لك.
|
||||||
|
- title: مدفوع بمشاريع حقيقية
|
||||||
|
details: لا رمز ألعاب. قم ببناء نماذج ويب وتطبيقات كاملة المكدس وبرامج WeChat المصغرة بيديك ، وجعل كل فكرة منتجًا حقًا.
|
||||||
|
---
|
||||||
|
|
||||||
|
<div align="center" style="margin-top: 60px; margin-bottom: 60px;">
|
||||||
|
<div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 40px; border-radius: 20px; max-width: 700px;">
|
||||||
|
<h2 style="color: white; border: none; font-size: 2rem; font-weight: 700; margin-bottom: 20px;">🚧 الترجمة العربية قيد التقدم</h2>
|
||||||
|
<p style="color: white; font-size: 1.2rem; line-height: 1.8; margin: 0;">
|
||||||
|
نحن نعمل بجد لترجمة البرنامج التعليمي الكامل لـ Easy-Vibe إلى العربية.<br>
|
||||||
|
ترقبوا النسخة الكاملة!<br><br>
|
||||||
|
في هذه الأثناء ، يمكنك زيارة<a href="../en-us/" style="color: #fbbf24; text-decoration: underline; font-weight: bold;">النسخة الإنجليزية</a> أو <a href="../zh-cn/" style="color: #fbbf24; text-decoration: underline; font-weight: bold;">النسخة الصينية</a>.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.VPHomeHero .text {
|
||||||
|
font-size: 1.8rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="footer-cta">
|
||||||
|
<p class="love-text">Made with ❤️ by Open Source Contributors</p>
|
||||||
|
<h3 class="support-title">هل تجد هذا مفيدًا؟</h3>
|
||||||
|
<p class="support-text">Star الخاص بك يحفزنا على الاستمرار في التحديث 🚀</p>
|
||||||
|
<div class="github-badge">
|
||||||
|
<a href="https://github.com/datawhalechina/easy-vibe" target="_blank" rel="noopener noreferrer">
|
||||||
|
<img src="https://img.shields.io/github/stars/datawhalechina/easy-vibe?style=social&label=Star on GitHub" alt="GitHub stars"/>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.footer-cta {
|
||||||
|
margin-top: 100px;
|
||||||
|
padding: 40px 24px;
|
||||||
|
text-align: center;
|
||||||
|
background: var(--vp-c-bg-soft);
|
||||||
|
border-radius: 24px;
|
||||||
|
max-width: 600px;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.love-text {
|
||||||
|
color: var(--vp-c-text-3);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
font-family: var(--vp-font-family-mono);
|
||||||
|
}
|
||||||
|
|
||||||
|
.support-title {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
color: var(--vp-c-text-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.support-text {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
color: var(--vp-c-text-2);
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.github-badge {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.github-badge img {
|
||||||
|
height: 32px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Symlink
+1
@@ -0,0 +1 @@
|
|||||||
|
../../assets
|
||||||
@@ -0,0 +1,99 @@
|
|||||||
|
---
|
||||||
|
layout: home
|
||||||
|
hero:
|
||||||
|
name: 'Easy-Vibe'
|
||||||
|
text: 'Lernen Sie Vibe Coding von Null'
|
||||||
|
tagline:
|
||||||
|
- Werden Sie eine Superperson, die Produkt, Design und Full-Stack-Entwicklung kombiniert.
|
||||||
|
- Von Idee zu Prototyp, von Prototyp zu Produkt, machen Sie aus jeder Ausgabe ein lieferbares Produkt.
|
||||||
|
- Machen Sie die KI zu Ihrem Partner: schneller, stabiler, kreativer.
|
||||||
|
- Bauen Sie Ihren technologie- und produktbezogenen Graben mit einem systematischen Lernpfad auf.
|
||||||
|
actions:
|
||||||
|
- theme: brand
|
||||||
|
text: Lernen beginnen
|
||||||
|
link: /stage-0/0.1-learning-map/
|
||||||
|
- theme: alt
|
||||||
|
text: ⭐️ Star auf GitHub
|
||||||
|
link: https://github.com/datawhalechina/easy-vibe
|
||||||
|
features:
|
||||||
|
- title: Einsteigerfreundlich
|
||||||
|
details: Entwickelt für nicht-technische Hintergründe. Beginnen Sie mit "wenn Sie sprechen können, können Sie programmieren", starten Sie schnell durch Spiele wie Snake, und überwinden Sie technische Angst.
|
||||||
|
- title: Progressive Praxis-Route
|
||||||
|
details: Einzigartige "Drei-Phasen"-Lernmethode. Von KI-Produktmanager-Denken, bis zu Full-Stack-Entwicklungs-Implementierung, bis zum Aufbau komplexer Anwendungen, Schritt für Schritt.
|
||||||
|
- title: Vibe Coding Neues Paradigma
|
||||||
|
details: Meistern Sie den Kern der Programmierung im KI-Zeitalter. Lernen Sie, mit der KI zu paaren, und machen Sie Ihre IDE zu Ihrem stärksten Partner.
|
||||||
|
- title: Durch echte Projekte getrieben
|
||||||
|
details: Kein Spielzeugcode. Bauen Sie Web-Prototypen, Full-Stack-Anwendungen, WeChat-Mini-Programme mit Ihren eigenen Händen und machen Sie wirklich jede Idee zu einem Produkt.
|
||||||
|
---
|
||||||
|
|
||||||
|
<div align="center" style="margin-top: 60px; margin-bottom: 60px;">
|
||||||
|
<div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 40px; border-radius: 20px; max-width: 700px;">
|
||||||
|
<h2 style="color: white; border: none; font-size: 2rem; font-weight: 700; margin-bottom: 20px;">🚧 Deutsche Übersetzung läuft</h2>
|
||||||
|
<p style="color: white; font-size: 1.2rem; line-height: 1.8; margin: 0;">
|
||||||
|
Wir arbeiten hart daran, das vollständige Easy-Vibe-Tutorial auf Deutsch zu übersetzen.<br>
|
||||||
|
Bleiben Sie dran für die vollständige Version!<br><br>
|
||||||
|
In der Zwischenzeit können Sie die<a href="../en-us/" style="color: #fbbf24; text-decoration: underline; font-weight: bold;">englische Version</a> oder die<a href="../zh-cn/" style="color: #fbbf24; text-decoration: underline; font-weight: bold;">chinesische Version</a> besuchen.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.VPHomeHero .text {
|
||||||
|
font-size: 1.8rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="footer-cta">
|
||||||
|
<p class="love-text">Made with ❤️ by Open Source Contributors</p>
|
||||||
|
<h3 class="support-title">Haben Sie das nützlich gefunden?</h3>
|
||||||
|
<p class="support-text">Ihr Star motiviert uns, weiter zu aktualisieren 🚀</p>
|
||||||
|
<div class="github-badge">
|
||||||
|
<a href="https://github.com/datawhalechina/easy-vibe" target="_blank" rel="noopener noreferrer">
|
||||||
|
<img src="https://img.shields.io/github/stars/datawhalechina/easy-vibe?style=social&label=Star on GitHub" alt="GitHub stars"/>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.footer-cta {
|
||||||
|
margin-top: 100px;
|
||||||
|
padding: 40px 24px;
|
||||||
|
text-align: center;
|
||||||
|
background: var(--vp-c-bg-soft);
|
||||||
|
border-radius: 24px;
|
||||||
|
max-width: 600px;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.love-text {
|
||||||
|
color: var(--vp-c-text-3);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
font-family: var(--vp-font-family-mono);
|
||||||
|
}
|
||||||
|
|
||||||
|
.support-title {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
color: var(--vp-c-text-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.support-text {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
color: var(--vp-c-text-2);
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.github-badge {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.github-badge img {
|
||||||
|
height: 32px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Symlink
+1
@@ -0,0 +1 @@
|
|||||||
|
../../assets
|
||||||
@@ -0,0 +1,237 @@
|
|||||||
|
---
|
||||||
|
layout: home
|
||||||
|
hero:
|
||||||
|
name: 'Easy-Vibe'
|
||||||
|
text: 'Learn Vibe Coding from 0 to 1'
|
||||||
|
tagline:
|
||||||
|
- Become a super individual combining product, design, and full-stack development.
|
||||||
|
- From idea to prototype, from prototype to production, turn every output into a deliverable product.
|
||||||
|
- Make AI your partner: faster, more stable, more creative.
|
||||||
|
- Build your personal technology and product moat with a systematic learning path.
|
||||||
|
actions:
|
||||||
|
- theme: brand
|
||||||
|
text: Start Learning
|
||||||
|
link: /stage-0/0.1-learning-map/
|
||||||
|
- theme: alt
|
||||||
|
text: ⭐️ Star on GitHub
|
||||||
|
link: https://github.com/datawhalechina/easy-vibe
|
||||||
|
features:
|
||||||
|
- title: Beginner-Friendly
|
||||||
|
details: Designed for non-technical backgrounds. Start with "if you can speak, you can code", quickly get started through games like Snake, and overcome technical fear.
|
||||||
|
- title: Progressive Practical Path
|
||||||
|
details: Unique "three-stage" learning method. From AI product manager thinking, to full-stack development implementation, to complex application construction, step by step.
|
||||||
|
- title: Vibe Coding New Paradigm
|
||||||
|
details: Master the core of AI era programming. Learn to pair-program with AI, making your IDE your strongest partner.
|
||||||
|
- title: Real Project-Driven
|
||||||
|
details: No toy code. Build web prototypes, full-stack applications, WeChat mini-programs with your own hands, and truly land every idea as a product.
|
||||||
|
---
|
||||||
|
|
||||||
|
<div align="center" style="margin-top: 40px; margin-bottom: 40px;">
|
||||||
|
<h2 style="border: none; font-size: 2rem; font-weight: 700; margin-bottom: 20px;">Why Choose Easy-Vibe?</h2>
|
||||||
|
<p style="font-size: 1.2rem; color: var(--vp-c-text-2); max-width: 800px; margin: 0 auto; line-height: 1.6;">
|
||||||
|
2025 is the first year of AI programming. More and more people are trying AI programming, but often stop at simple demos.<br>
|
||||||
|
Easy-Vibe is dedicated to filling this gap, teaching you how to organize the development process with AI like a professional, from prototype to production, bridging the last mile of product landing.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stage-container">
|
||||||
|
<div class="stage-card">
|
||||||
|
<div class="stage-icon">🌱</div>
|
||||||
|
<h3>Stage 0: Getting Started</h3>
|
||||||
|
<p>Suitable for product, operations, and non-technical backgrounds. Understand AI programming logic through games and build confidence.</p>
|
||||||
|
<a href="./stage-0/0.1-learning-map/">Learn More →</a>
|
||||||
|
</div>
|
||||||
|
<div class="stage-card">
|
||||||
|
<div class="stage-icon">🎨</div>
|
||||||
|
<h3>Stage 1: AI Product Manager</h3>
|
||||||
|
<p>Master the Vibe Coding workflow. Learn to break down requirements and independently complete high-fidelity web application prototypes.</p>
|
||||||
|
<a href="./stage-1/1.1-introduction-to-ai-ide/">Learn More →</a>
|
||||||
|
</div>
|
||||||
|
<div class="stage-card">
|
||||||
|
<div class="stage-icon">💻</div>
|
||||||
|
<h3>Stage 2: Full-Stack Development</h3>
|
||||||
|
<p>Dive deep into full-stack development. Frontend componentization, database design, backend API development, and deployment.</p>
|
||||||
|
<a href="./stage-2/frontend/2.0-lovart-assets/">Learn More →</a>
|
||||||
|
</div>
|
||||||
|
<div class="stage-card">
|
||||||
|
<div class="stage-icon">🚀</div>
|
||||||
|
<h3>Stage 3: Advanced Development</h3>
|
||||||
|
<p>Build complex cross-platform applications. WeChat mini-program practical实战, challenge higher-level AI-native application development.</p>
|
||||||
|
<a href="./stage-3/core-skills/3.1-mcp-claudecode-skills/">Learn More →</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.VPHomeHero .text {
|
||||||
|
font-size: 1.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stage-container {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||||
|
gap: 20px;
|
||||||
|
max-width: 1152px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stage-card:nth-child(1) { --card-color: #10b981; } /* Green for Stage 0 */
|
||||||
|
.stage-card:nth-child(2) { --card-color: #3b82f6; } /* Blue for Stage 1 */
|
||||||
|
.stage-card:nth-child(3) { --card-color: #8b5cf6; } /* Purple for Stage 2 */
|
||||||
|
.stage-card:nth-child(4) { --card-color: #f59e0b; } /* Orange for Stage 3 */
|
||||||
|
|
||||||
|
.stage-card {
|
||||||
|
background-color: var(--vp-c-bg-soft);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 24px;
|
||||||
|
transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
|
||||||
|
border: 1px solid var(--vp-c-bg-soft);
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stage-card::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 4px;
|
||||||
|
height: 100%;
|
||||||
|
background-color: var(--card-color);
|
||||||
|
opacity: 0.5;
|
||||||
|
transition: opacity 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stage-card:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||||
|
border-color: var(--card-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stage-card:hover::before {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stage-icon {
|
||||||
|
font-size: 3rem;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
|
||||||
|
}
|
||||||
|
|
||||||
|
.stage-card h3 {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
color: var(--vp-c-text-1);
|
||||||
|
transition: color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stage-card:hover h3 {
|
||||||
|
color: var(--card-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stage-card p {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: var(--vp-c-text-2);
|
||||||
|
margin-bottom: 16px;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stage-card a {
|
||||||
|
color: var(--card-color);
|
||||||
|
font-weight: 500;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
transition: transform 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stage-card a:hover {
|
||||||
|
text-decoration: none;
|
||||||
|
transform: translateX(4px);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="footer-cta">
|
||||||
|
<p class="love-text">Made with ❤️ by Open Source Contributors</p>
|
||||||
|
<h3 class="support-title">Find this helpful?</h3>
|
||||||
|
<p class="support-text">Your Star motivates us to keep updating 🚀</p>
|
||||||
|
<div class="github-badge">
|
||||||
|
<a href="https://github.com/datawhalechina/easy-vibe" target="_blank" rel="noopener noreferrer">
|
||||||
|
<img src="https://img.shields.io/github/stars/datawhalechina/easy-vibe?style=social&label=Star on GitHub" alt="GitHub stars"/>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.footer-cta {
|
||||||
|
margin-top: 100px;
|
||||||
|
padding: 40px 24px;
|
||||||
|
text-align: center;
|
||||||
|
background: var(--vp-c-bg-soft);
|
||||||
|
border-radius: 24px;
|
||||||
|
max-width: 600px;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
border: 1px solid var(--vp-c-bg-soft);
|
||||||
|
transition: border-color 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-cta:hover {
|
||||||
|
border-color: var(--vp-c-brand);
|
||||||
|
}
|
||||||
|
|
||||||
|
.love-text {
|
||||||
|
color: var(--vp-c-text-3);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
font-family: var(--vp-font-family-mono);
|
||||||
|
}
|
||||||
|
|
||||||
|
.support-title {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
color: var(--vp-c-text-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.support-text {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
color: var(--vp-c-text-2);
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.github-badge {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.github-badge img {
|
||||||
|
height: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.VPButton.alt[href*="github.com"] {
|
||||||
|
background: linear-gradient(90deg, #8B5CF6, #EC4899, #8B5CF6);
|
||||||
|
background-size: 200% auto;
|
||||||
|
border: 1px solid transparent !important;
|
||||||
|
color: white !important;
|
||||||
|
font-weight: 600;
|
||||||
|
animation: gradient 3s linear infinite;
|
||||||
|
box-shadow: 0 4px 14px 0 rgba(139, 92, 246, 0.5);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.VPButton.alt[href*="github.com"]:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 6px 20px rgba(236, 72, 153, 0.6);
|
||||||
|
background-position: right center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes gradient {
|
||||||
|
0% { background-position: 0% 50%; }
|
||||||
|
100% { background-position: 200% 50%; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 374 KiB |
@@ -0,0 +1,178 @@
|
|||||||
|
:root {
|
||||||
|
/* 调整侧边栏分组之间的间距 */
|
||||||
|
--vp-sidebar-nav-section-gap: 8px;
|
||||||
|
--ev-doc-font-size: 13px;
|
||||||
|
--ev-doc-line-height: 1.65;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-doc {
|
||||||
|
font-size: var(--ev-doc-font-size);
|
||||||
|
line-height: var(--ev-doc-line-height);
|
||||||
|
--el-font-size-extra-large: calc(var(--ev-doc-font-size) + 6px);
|
||||||
|
--el-font-size-large: calc(var(--ev-doc-font-size) + 4px);
|
||||||
|
--el-font-size-medium: calc(var(--ev-doc-font-size) + 2px);
|
||||||
|
--el-font-size-base: var(--ev-doc-font-size);
|
||||||
|
--el-font-size-small: calc(var(--ev-doc-font-size) - 1px);
|
||||||
|
--el-font-size-extra-small: calc(var(--ev-doc-font-size) - 2px);
|
||||||
|
--el-font-line-height-primary: var(--ev-doc-line-height);
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-doc p,
|
||||||
|
.vp-doc ul,
|
||||||
|
.vp-doc ol {
|
||||||
|
line-height: var(--ev-doc-line-height) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-doc :where(p, ul, ol, table, blockquote, pre, details, figure) {
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-doc blockquote {
|
||||||
|
font-size: 0.9em !important;
|
||||||
|
color: var(--vp-c-text-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-doc blockquote p {
|
||||||
|
font-size: inherit !important;
|
||||||
|
line-height: 1.4 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-doc :where(li) {
|
||||||
|
margin: 4px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-doc :where(ul, ol) {
|
||||||
|
padding-left: 1.15em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-doc :where(h1, h2, h3, h4, h5, h6) {
|
||||||
|
line-height: 1.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-doc :where(h1) {
|
||||||
|
margin: 22px 0 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-doc :where(h2) {
|
||||||
|
margin: 20px 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-doc h2 {
|
||||||
|
margin: 16px 0 8px !important;
|
||||||
|
padding-top: 10px !important;
|
||||||
|
border-top: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-doc :where(h3) {
|
||||||
|
margin: 18px 0 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-doc :where(h4, h5, h6) {
|
||||||
|
margin: 16px 0 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-doc :where(hr) {
|
||||||
|
margin: 14px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-doc :where(th, td) {
|
||||||
|
padding: 6px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-doc :where(:not(pre) > code) {
|
||||||
|
font-size: 0.95em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 减少一级标题（如"前端开发"）底部的间距 */
|
||||||
|
.VPSidebarItem.level-0 {
|
||||||
|
padding-bottom: 4px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 减少一级标题文字与下方子菜单的间距 */
|
||||||
|
.VPSidebarItem.level-0 > .item {
|
||||||
|
padding-bottom: 2px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 调整子菜单项之间的间距 - 针对所有层级 */
|
||||||
|
.VPSidebarItem.level-1 .item,
|
||||||
|
.VPSidebarItem.level-2 .item,
|
||||||
|
.VPSidebarItem.level-3 .item,
|
||||||
|
.VPSidebarItem.level-4 .item {
|
||||||
|
padding-top: 2px !important;
|
||||||
|
padding-bottom: 2px !important;
|
||||||
|
min-height: 24px !important; /* 强制减小最小高度 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 针对可能存在的特定类名进行覆盖，确保紧凑 */
|
||||||
|
.VPSidebarGroup {
|
||||||
|
padding-top: 6px !important;
|
||||||
|
padding-bottom: 6px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 进一步压缩分组标题与第一项之间的间距 */
|
||||||
|
.VPSidebarItem.level-0 + .VPSidebarItem.level-1 {
|
||||||
|
margin-top: -2px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 压缩分组标题本身的行高 */
|
||||||
|
.VPSidebarItem.level-0 .text {
|
||||||
|
line-height: 1.3 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 压缩子项的行高 */
|
||||||
|
.VPSidebarItem.level-1 .text,
|
||||||
|
.VPSidebarItem.level-2 .text,
|
||||||
|
.VPSidebarItem.level-3 .text {
|
||||||
|
line-height: 1.4 !important;
|
||||||
|
padding: 0 !important; /* 移除文字本身的内边距 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 强制链接本身没有额外的边距 */
|
||||||
|
.VPSidebarItem .VPLink {
|
||||||
|
padding-top: 2px !important;
|
||||||
|
padding-bottom: 2px !important;
|
||||||
|
min-height: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 图片高度限制策略：根据长宽比调整最大高度 */
|
||||||
|
/* 越高的图片（长宽比越大），限制的高度越小，避免占用过多纵向空间 */
|
||||||
|
.vp-doc img.img-tall {
|
||||||
|
max-height: 380px !important;
|
||||||
|
max-width: 100% !important;
|
||||||
|
width: auto !important;
|
||||||
|
height: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-doc img.img-very-tall {
|
||||||
|
max-height: 280px !important;
|
||||||
|
max-width: 100% !important;
|
||||||
|
width: auto !important;
|
||||||
|
height: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-doc img.img-ultra-tall {
|
||||||
|
max-height: 200px !important;
|
||||||
|
max-width: 100% !important;
|
||||||
|
width: auto !important;
|
||||||
|
height: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-doc img.img-limit-width {
|
||||||
|
max-width: 100% !important;
|
||||||
|
max-height: 320px !important;
|
||||||
|
width: auto !important;
|
||||||
|
height: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-doc img.img-limit-height {
|
||||||
|
max-height: 450px !important;
|
||||||
|
max-width: 100% !important;
|
||||||
|
width: auto !important;
|
||||||
|
height: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Fix tagline wrapping issues */
|
||||||
|
.VPHomeHero .tagline {
|
||||||
|
white-space: nowrap;
|
||||||
|
max-width: none !important;
|
||||||
|
}
|
||||||
Symlink
+1
@@ -0,0 +1 @@
|
|||||||
|
../../assets
|
||||||
@@ -0,0 +1,99 @@
|
|||||||
|
---
|
||||||
|
layout: home
|
||||||
|
hero:
|
||||||
|
name: 'Easy-Vibe'
|
||||||
|
text: 'Aprende Vibe Coding desde Cero'
|
||||||
|
tagline:
|
||||||
|
- Conviértete en un súper individuo combinando producto, diseño y desarrollo full-stack.
|
||||||
|
- De idea a prototipo, de prototipo a producto, convierte cada salida en un producto entregable.
|
||||||
|
- Haz de la IA tu pareja: más rápido, más estable, más creativo.
|
||||||
|
- Construye tu moat tecnológico y de producto con una ruta de aprendizaje sistemática.
|
||||||
|
actions:
|
||||||
|
- theme: brand
|
||||||
|
text: Empezar a Aprender
|
||||||
|
link: /stage-0/0.1-learning-map/
|
||||||
|
- theme: alt
|
||||||
|
text: ⭐️ Star en GitHub
|
||||||
|
link: https://github.com/datawhalechina/easy-vibe
|
||||||
|
features:
|
||||||
|
- title: Amigable para Principiantes
|
||||||
|
details: Diseñado para antecedentes no técnicos. Comienza con "si puedes hablar, puedes programar", empieza rápidamente a través de juegos como Snake, y supera el miedo técnico.
|
||||||
|
- title: Ruta Progresiva Práctica
|
||||||
|
details: Método único de aprendizaje en "tres etapas". Desde el pensamiento de producto de IA, hasta la implementación de desarrollo full-stack, hasta la construcción de aplicaciones complejas, paso a paso.
|
||||||
|
- title: Nuevo Paradigma de Vibe Coding
|
||||||
|
details: Domina el núcleo de la programación en la era de la IA. Aprende a programar en pareja con la IA, haciendo de tu IDE tu socio más fuerte.
|
||||||
|
- title: Impulsado por Proyectos Reales
|
||||||
|
details: Sin código de juguete. Construye prototipos web, aplicaciones full-stack, mini-programas de WeChat con tus propias manos, y realmente lleva cada idea a un producto.
|
||||||
|
---
|
||||||
|
|
||||||
|
<div align="center" style="margin-top: 60px; margin-bottom: 60px;">
|
||||||
|
<div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 40px; border-radius: 20px; max-width: 700px;">
|
||||||
|
<h2 style="color: white; border: none; font-size: 2rem; font-weight: 700; margin-bottom: 20px;">🚧 Traducción en Español en Progreso</h2>
|
||||||
|
<p style="color: white; font-size: 1.2rem; line-height: 1.8; margin: 0;">
|
||||||
|
Estamos trabajando duro para traducir el tutorial completo de Easy-Vibe al español.<br>
|
||||||
|
¡Estén atentos para la versión completa!<br><br>
|
||||||
|
Mientras tanto, puedes visitar la<a href="../en-us/" style="color: #fbbf24; text-decoration: underline; font-weight: bold;">versión en inglés</a> o la<a href="../zh-cn/" style="color: #fbbf24; text-decoration: underline; font-weight: bold;">versión en chino</a>.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.VPHomeHero .text {
|
||||||
|
font-size: 1.8rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="footer-cta">
|
||||||
|
<p class="love-text">Made with ❤️ by Open Source Contributors</p>
|
||||||
|
<h3 class="support-title">¿Te resulta útil?</h3>
|
||||||
|
<p class="support-text">Tu Star nos motiva a seguir actualizando 🚀</p>
|
||||||
|
<div class="github-badge">
|
||||||
|
<a href="https://github.com/datawhalechina/easy-vibe" target="_blank" rel="noopener noreferrer">
|
||||||
|
<img src="https://img.shields.io/github/stars/datawhalechina/easy-vibe?style=social&label=Star on GitHub" alt="GitHub stars"/>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.footer-cta {
|
||||||
|
margin-top: 100px;
|
||||||
|
padding: 40px 24px;
|
||||||
|
text-align: center;
|
||||||
|
background: var(--vp-c-bg-soft);
|
||||||
|
border-radius: 24px;
|
||||||
|
max-width: 600px;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.love-text {
|
||||||
|
color: var(--vp-c-text-3);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
font-family: var(--vp-font-family-mono);
|
||||||
|
}
|
||||||
|
|
||||||
|
.support-title {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
color: var(--vp-c-text-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.support-text {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
color: var(--vp-c-text-2);
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.github-badge {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.github-badge img {
|
||||||
|
height: 32px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Symlink
+1
@@ -0,0 +1 @@
|
|||||||
|
../../assets
|
||||||
@@ -0,0 +1,99 @@
|
|||||||
|
---
|
||||||
|
layout: home
|
||||||
|
hero:
|
||||||
|
name: 'Easy-Vibe'
|
||||||
|
text: 'Apprenez Vibe Coding de Zéro'
|
||||||
|
tagline:
|
||||||
|
- Devenez une super personne combinant produit, design et développement full-stack.
|
||||||
|
- De l'idée au prototype, du prototype au produit, transformez chaque sortie en un produit livrable.
|
||||||
|
- Faites de l'IA votre partenaire : plus rapide, plus stable, plus créatif.
|
||||||
|
- Construisez votre fossé technologique et produit avec une voie d'apprentissage systématique.
|
||||||
|
actions:
|
||||||
|
- theme: brand
|
||||||
|
text: Commencer à Apprendre
|
||||||
|
link: /stage-0/0.1-learning-map/
|
||||||
|
- theme: alt
|
||||||
|
text: ⭐️ Star sur GitHub
|
||||||
|
link: https://github.com/datawhalechina/easy-vibe
|
||||||
|
features:
|
||||||
|
- title: Adapté aux Débutants
|
||||||
|
details: Conçu pour les origines non techniques. Commencez par "si vous pouvez parler, vous pouvez coder", démarrez rapidement par des jeux comme Snake, et surmontez la peur technique.
|
||||||
|
- title: Voie Progressive Pratique
|
||||||
|
details: Méthode unique d'apprentissage en "trois étapes". De la pensée produit IA, à la implémentation développement full-stack, à la construction d'applications complexes, étape par étape.
|
||||||
|
- title: Nouveau Paradigme de Vibe Coding
|
||||||
|
details: Maîtrisez le cœur de la programmation à l'ère de l'IA. Apprenez à programmer en binôme avec l'IA, faisant de votre IDE votre partenaire le plus fort.
|
||||||
|
- title: Piloté par des Projets Réels
|
||||||
|
details: Pas de code jouet. Construisez des prototypes web, des applications full-stack, des mini-programmes WeChat de vos propres mains, et faites vraiment de chaque idée un produit.
|
||||||
|
---
|
||||||
|
|
||||||
|
<div align="center" style="margin-top: 60px; margin-bottom: 60px;">
|
||||||
|
<div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 40px; border-radius: 20px; max-width: 700px;">
|
||||||
|
<h2 style="color: white; border: none; font-size: 2rem; font-weight: 700; margin-bottom: 20px;">🚧 Traduction en Français en Cours</h2>
|
||||||
|
<p style="color: white; font-size: 1.2rem; line-height: 1.8; margin: 0;">
|
||||||
|
Nous travaillons dur pour traduire le tutoriel complet d'Easy-Vibe en français.<br>
|
||||||
|
Restez à l'écoute pour la version complète !<br><br>
|
||||||
|
En attendant, vous pouvez visiter la<a href="../en-us/" style="color: #fbbf24; text-decoration: underline; font-weight: bold;">version anglaise</a> ou la<a href="../zh-cn/" style="color: #fbbf24; text-decoration: underline; font-weight: bold;">version chinoise</a>.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.VPHomeHero .text {
|
||||||
|
font-size: 1.8rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="footer-cta">
|
||||||
|
<p class="love-text">Made with ❤️ by Open Source Contributors</p>
|
||||||
|
<h3 class="support-title">Trouvez cela utile ?</h3>
|
||||||
|
<p class="support-text">Votre Star nous motive à continuer à mettre à jour 🚀</p>
|
||||||
|
<div class="github-badge">
|
||||||
|
<a href="https://github.com/datawhalechina/easy-vibe" target="_blank" rel="noopener noreferrer">
|
||||||
|
<img src="https://img.shields.io/github/stars/datawhalechina/easy-vibe?style=social&label=Star on GitHub" alt="GitHub stars"/>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.footer-cta {
|
||||||
|
margin-top: 100px;
|
||||||
|
padding: 40px 24px;
|
||||||
|
text-align: center;
|
||||||
|
background: var(--vp-c-bg-soft);
|
||||||
|
border-radius: 24px;
|
||||||
|
max-width: 600px;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.love-text {
|
||||||
|
color: var(--vp-c-text-3);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
font-family: var(--vp-font-family-mono);
|
||||||
|
}
|
||||||
|
|
||||||
|
.support-title {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
color: var(--vp-c-text-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.support-text {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
color: var(--vp-c-text-2);
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.github-badge {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.github-badge img {
|
||||||
|
height: 32px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
+43
-229
@@ -1,239 +1,53 @@
|
|||||||
---
|
---
|
||||||
layout: home
|
layout: home
|
||||||
hero:
|
|
||||||
name: 'Easy-Vibe'
|
|
||||||
text: 'Learn Vibe Coding from 0 to 1'
|
|
||||||
tagline:
|
|
||||||
- 不止是写代码，而是成为集产品、设计、全栈开发于一身的超级个体。
|
|
||||||
- 从想法到原型，从原型到上线，把每一次输出变成可交付的产品。
|
|
||||||
- 让 AI 成为你的搭档：更快、更稳、更有创造力。
|
|
||||||
- 用系统化的学习路径，构建你的个人技术与产品护城河。
|
|
||||||
actions:
|
|
||||||
- theme: brand
|
|
||||||
text: 开启学习之旅
|
|
||||||
link: /stage-0/0.1-learning-map/
|
|
||||||
- theme: alt
|
|
||||||
text: ⭐️ github 加速更新
|
|
||||||
link: https://github.com/datawhalechina/easy-vibe
|
|
||||||
features:
|
|
||||||
- title: 零基础友好
|
|
||||||
details: 专为非技术背景设计。从“会说话就会编程”开始，通过贪吃蛇等小游戏快速上手，打破技术恐惧。
|
|
||||||
- title: 循序渐进的实战路径
|
|
||||||
details: 独创“三阶段”学习法。从 AI 产品经理思维，到全栈开发落地，再到复杂应用构建，步步为营。
|
|
||||||
- title: Vibe Coding 新范式
|
|
||||||
details: 掌握 AI 时代的编程核心。学会与 AI 结对编程，让 IDE 成为你的最强搭档。
|
|
||||||
- title: 真实项目驱动
|
|
||||||
details: 拒绝玩具代码。亲手构建 Web 原型、全栈应用、微信小程序，将每一个想法真正落地为产品。
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<div align="center" style="margin-top: 40px; margin-bottom: 40px;">
|
<script setup>
|
||||||
<h2 style="border: none; font-size: 2rem; font-weight: 700; margin-bottom: 20px;">为什么选择 Easy-Vibe？</h2>
|
import { onMounted } from 'vue'
|
||||||
<p style="font-size: 1.2rem; color: var(--vp-c-text-2); max-width: 800px; margin: 0 auto; line-height: 1.6;">
|
|
||||||
2025 年是 AI 编程的元年。越来越多的人开始尝试 AI 编程，但往往止步于简单的 Demo。<br>
|
|
||||||
Easy-Vibe 致力于填补这一空白，教你如何像专业人士一样，用 AI 组织开发流程，从原型到上线，打通产品落地的最后一公里。
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stage-container">
|
onMounted(() => {
|
||||||
<div class="stage-card">
|
// 获取当前的基础路径（考虑 Vercel 和 GitHub Pages）
|
||||||
<div class="stage-icon">🌱</div>
|
const isVercel = typeof window !== 'undefined' && window.location.hostname.includes('vercel.app')
|
||||||
<h3>Stage 0: 新手入门</h3>
|
const base = isVercel ? '' : '/easy-vibe'
|
||||||
<p>适合产品、运营及非技术背景。通过做游戏理解 AI 编程逻辑，建立信心。</p>
|
|
||||||
<a href="./stage-0/0.1-learning-map/">查看详情 →</a>
|
|
||||||
</div>
|
|
||||||
<div class="stage-card">
|
|
||||||
<div class="stage-icon">🎨</div>
|
|
||||||
<h3>Stage 1: AI 产品经理</h3>
|
|
||||||
<p>掌握 Vibe Coding 工作流。学会拆解需求，独立完成高保真 Web 应用原型。</p>
|
|
||||||
<a href="./stage-1/1.1-introduction-to-ai-ide/">查看详情 →</a>
|
|
||||||
</div>
|
|
||||||
<div class="stage-card">
|
|
||||||
<div class="stage-icon">💻</div>
|
|
||||||
<h3>Stage 2: 初中级开发</h3>
|
|
||||||
<p>深入全栈开发。前端组件化、数据库设计、后端 API 开发与部署上线。</p>
|
|
||||||
<a href="./stage-2/frontend/2.0-lovart-assets/">查看详情 →</a>
|
|
||||||
</div>
|
|
||||||
<div class="stage-card">
|
|
||||||
<div class="stage-icon">🚀</div>
|
|
||||||
<h3>Stage 3: 高级开发</h3>
|
|
||||||
<p>构建复杂跨平台应用。微信小程序实战，挑战更高阶的 AI 原生应用开发。</p>
|
|
||||||
<a href="./stage-3/core-skills/3.1-mcp-claudecode-skills/">查看详情 →</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style>
|
// 语言映射：浏览器语言代码 -> 网站路径
|
||||||
.VPHomeHero .text {
|
const langMap = {
|
||||||
font-size: 1.8rem;
|
'zh': '/zh-cn/',
|
||||||
|
'zh-cn': '/zh-cn/',
|
||||||
|
'zh-tw': '/zh-tw/',
|
||||||
|
'zh-hk': '/zh-tw/',
|
||||||
|
'en': '/en-us/',
|
||||||
|
'en-us': '/en-us/',
|
||||||
|
'en-gb': '/en-us/',
|
||||||
|
'ja': '/ja-jp/',
|
||||||
|
'ja-jp': '/ja-jp/',
|
||||||
|
'ko': '/ko-kr/',
|
||||||
|
'ko-kr': '/ko-kr/',
|
||||||
|
'es': '/es-es/',
|
||||||
|
'es-es': '/es-es/',
|
||||||
|
'fr': '/fr-fr/',
|
||||||
|
'fr-fr': '/fr-fr/',
|
||||||
|
'de': '/de-de/',
|
||||||
|
'de-de': '/de-de/',
|
||||||
|
'ar': '/ar-sa/',
|
||||||
|
'ar-sa': '/ar-sa/',
|
||||||
|
'vi': '/vi-vn/',
|
||||||
|
'vi-vn': '/vi-vn/'
|
||||||
}
|
}
|
||||||
|
|
||||||
.stage-container {
|
// 获取浏览器语言
|
||||||
display: grid;
|
const browserLang = navigator.language.toLowerCase()
|
||||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
const browserLangShort = browserLang.split('-')[0]
|
||||||
gap: 20px;
|
|
||||||
max-width: 1152px;
|
// 确定目标语言
|
||||||
margin: 0 auto;
|
let targetLang = langMap[browserLang] || langMap[browserLangShort]
|
||||||
padding: 20px;
|
|
||||||
|
// 如果没有匹配的语言，默认使用中文
|
||||||
|
if (!targetLang) {
|
||||||
|
targetLang = '/zh-cn/'
|
||||||
}
|
}
|
||||||
|
|
||||||
.stage-card:nth-child(1) { --card-color: #10b981; } /* Green for Stage 0 */
|
// 立即跳转，不显示任何内容
|
||||||
.stage-card:nth-child(2) { --card-color: #3b82f6; } /* Blue for Stage 1 */
|
window.location.replace(base + targetLang)
|
||||||
.stage-card:nth-child(3) { --card-color: #8b5cf6; } /* Purple for Stage 2 */
|
})
|
||||||
.stage-card:nth-child(4) { --card-color: #f59e0b; } /* Orange for Stage 3 */
|
</script>
|
||||||
|
|
||||||
.stage-card {
|
|
||||||
background-color: var(--vp-c-bg-soft);
|
|
||||||
border-radius: 12px;
|
|
||||||
padding: 24px;
|
|
||||||
transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
|
|
||||||
border: 1px solid var(--vp-c-bg-soft);
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stage-card::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 4px;
|
|
||||||
height: 100%;
|
|
||||||
background-color: var(--card-color);
|
|
||||||
opacity: 0.5;
|
|
||||||
transition: opacity 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stage-card:hover {
|
|
||||||
transform: translateY(-5px);
|
|
||||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
|
||||||
border-color: var(--card-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.stage-card:hover::before {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stage-icon {
|
|
||||||
font-size: 3rem;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
|
|
||||||
}
|
|
||||||
|
|
||||||
.stage-card h3 {
|
|
||||||
font-size: 1.2rem;
|
|
||||||
font-weight: 600;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
color: var(--vp-c-text-1);
|
|
||||||
transition: color 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stage-card:hover h3 {
|
|
||||||
color: var(--card-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.stage-card p {
|
|
||||||
font-size: 0.9rem;
|
|
||||||
color: var(--vp-c-text-2);
|
|
||||||
margin-bottom: 16px;
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stage-card a {
|
|
||||||
color: var(--card-color);
|
|
||||||
font-weight: 500;
|
|
||||||
text-decoration: none;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
transition: transform 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stage-card a:hover {
|
|
||||||
text-decoration: none;
|
|
||||||
transform: translateX(4px);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<div class="footer-cta">
|
|
||||||
<p class="love-text">Made with ❤️ by Open Source Contributors</p>
|
|
||||||
<h3 class="support-title">觉得有帮助？</h3>
|
|
||||||
<p class="support-text">你的 Star 是我们持续更新的动力 🚀</p>
|
|
||||||
<div class="github-badge">
|
|
||||||
<a href="https://github.com/datawhalechina/easy-vibe" target="_blank" rel="noopener noreferrer">
|
|
||||||
<img src="https://img.shields.io/github/stars/datawhalechina/easy-vibe?style=social&label=Star on GitHub" alt="GitHub stars"/>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
/* ... existing styles ... */
|
|
||||||
.footer-cta {
|
|
||||||
margin-top: 100px;
|
|
||||||
padding: 40px 24px;
|
|
||||||
text-align: center;
|
|
||||||
background: var(--vp-c-bg-soft);
|
|
||||||
border-radius: 24px;
|
|
||||||
max-width: 600px;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
margin-bottom: 40px;
|
|
||||||
border: 1px solid var(--vp-c-bg-soft);
|
|
||||||
transition: border-color 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-cta:hover {
|
|
||||||
border-color: var(--vp-c-brand);
|
|
||||||
}
|
|
||||||
|
|
||||||
.love-text {
|
|
||||||
color: var(--vp-c-text-3);
|
|
||||||
font-size: 0.875rem;
|
|
||||||
margin-bottom: 24px;
|
|
||||||
font-family: var(--vp-font-family-mono);
|
|
||||||
}
|
|
||||||
|
|
||||||
.support-title {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
font-weight: 700;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
color: var(--vp-c-text-1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.support-text {
|
|
||||||
font-size: 1.1rem;
|
|
||||||
color: var(--vp-c-text-2);
|
|
||||||
margin-bottom: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.github-badge {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.github-badge img {
|
|
||||||
height: 32px; /* Make the button slightly larger */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Custom style for the GitHub Star button in Hero section */
|
|
||||||
.VPButton.alt[href*="github.com"] {
|
|
||||||
background: linear-gradient(90deg, #8B5CF6, #EC4899, #8B5CF6);
|
|
||||||
background-size: 200% auto;
|
|
||||||
border: 1px solid transparent !important;
|
|
||||||
color: white !important;
|
|
||||||
font-weight: 600;
|
|
||||||
animation: gradient 3s linear infinite;
|
|
||||||
box-shadow: 0 4px 14px 0 rgba(139, 92, 246, 0.5);
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.VPButton.alt[href*="github.com"]:hover {
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: 0 6px 20px rgba(236, 72, 153, 0.6);
|
|
||||||
background-position: right center;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes gradient {
|
|
||||||
0% { background-position: 0% 50%; }
|
|
||||||
100% { background-position: 200% 50%; }
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
Symlink
+1
@@ -0,0 +1 @@
|
|||||||
|
../../assets
|
||||||
@@ -0,0 +1,237 @@
|
|||||||
|
---
|
||||||
|
layout: home
|
||||||
|
hero:
|
||||||
|
name: 'Easy-Vibe'
|
||||||
|
text: 'Vibe Coding を 0 から 1 へ'
|
||||||
|
tagline:
|
||||||
|
- プロダクト、デザイン、フルスタック開発を兼ね備えたスーパー個人になりましょう。
|
||||||
|
- アイデアからプロトタイプへ、プロトタイプから製品へ、すべてのアウトプットを納品可能な製品にします。
|
||||||
|
- AI をあなたのパートナーに：より速く、より安定して、より創造的に。
|
||||||
|
- システマティックな学習パスで、あなたの個人的技術と製品の護城河を構築します。
|
||||||
|
actions:
|
||||||
|
- theme: brand
|
||||||
|
text: 学習を始める
|
||||||
|
link: /stage-0/0.1-learning-map/
|
||||||
|
- theme: alt
|
||||||
|
text: ⭐️ GitHub で Star
|
||||||
|
link: https://github.com/datawhalechina/easy-vibe
|
||||||
|
features:
|
||||||
|
- title: 初心者に優しい
|
||||||
|
details: 非技術的背景のために設計されています。「話せるならコードも書ける」から始めて、Snake などのゲームを通じて素早く始め、技術への恐怖を克服しましょう。
|
||||||
|
- title: 段階的な実践パス
|
||||||
|
details: 独自の「3段階」学習法。AI プロダクトマネージャー思考から、フルスタック開発実装、複雑なアプリケーション構築へ、着実に進みます。
|
||||||
|
- title: Vibe Coding の新しいパラダイム
|
||||||
|
details: AI 時代のプログラミングの中核をマスターしましょう。AI とペアプログラミングする方法を学び、IDE を最強のパートナーにします。
|
||||||
|
- title: リアルプロジェクト主導
|
||||||
|
details: おもちゃのコードはありません。Web プロトタイプ、フルスタックアプリケーション、WeChat ミニプログラムを自分の手で構築し、すべてのアイデアを本当の製品として落地させます。
|
||||||
|
---
|
||||||
|
|
||||||
|
<div align="center" style="margin-top: 40px; margin-bottom: 40px;">
|
||||||
|
<h2 style="border: none; font-size: 2rem; font-weight: 700; margin-bottom: 20px;">Easy-Vibe を選ぶ理由</h2>
|
||||||
|
<p style="font-size: 1.2rem; color: var(--vp-c-text-2); max-width: 800px; margin: 0 auto; line-height: 1.6;">
|
||||||
|
2025 年は AI プログラミングの元年です。ますます多くの人々が AI プログラミングを試していますが、しばしば単純なデモで止まっています。<br>
|
||||||
|
Easy-Vibe はこのギャップを埋めることに専念しており、プロのように AI で開発プロセスを整理し、プロトタイプから製品まで、製品落地の最後の 1 キロを橋渡しする方法を教えます。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stage-container">
|
||||||
|
<div class="stage-card">
|
||||||
|
<div class="stage-icon">🌱</div>
|
||||||
|
<h3>Stage 0: 入門</h3>
|
||||||
|
<p>プロダクト、運用、非技術的背景に適しています。ゲームを通じて AI プログラミングロジックを理解し、自信を構築しましょう。</p>
|
||||||
|
<a href="./stage-0/0.1-learning-map/">詳しく見る →</a>
|
||||||
|
</div>
|
||||||
|
<div class="stage-card">
|
||||||
|
<div class="stage-icon">🎨</div>
|
||||||
|
<h3>Stage 1: AI プロダクトマネージャー</h3>
|
||||||
|
<p>Vibe Coding ワークフローをマスターしましょう。要件を分解し、高品質な Web アプリケーションプロトタイプを独立して完成させる方法を学びます。</p>
|
||||||
|
<a href="./stage-1/1.1-introduction-to-ai-ide/">詳しく見る →</a>
|
||||||
|
</div>
|
||||||
|
<div class="stage-card">
|
||||||
|
<div class="stage-icon">💻</div>
|
||||||
|
<h3>Stage 2: フルスタック開発</h3>
|
||||||
|
<p>フルスタック開発に深く潜り込みましょう。フロントエンドコンポーネント化、データベース設計、バックエンド API 開発、デプロイメント。</p>
|
||||||
|
<a href="./stage-2/frontend/2.0-lovart-assets/">詳しく見る →</a>
|
||||||
|
</div>
|
||||||
|
<div class="stage-card">
|
||||||
|
<div class="stage-icon">🚀</div>
|
||||||
|
<h3>Stage 3: 上級開発</h3>
|
||||||
|
<p>複雑なクロスプラットフォームアプリケーションを構築しましょう。WeChat ミニプログラム実戦、より高レベルの AI ネイティブアプリケーション開発に挑戦します。</p>
|
||||||
|
<a href="./stage-3/core-skills/3.1-mcp-claudecode-skills/">詳しく見る →</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.VPHomeHero .text {
|
||||||
|
font-size: 1.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stage-container {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||||
|
gap: 20px;
|
||||||
|
max-width: 1152px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stage-card:nth-child(1) { --card-color: #10b981; } /* Green for Stage 0 */
|
||||||
|
.stage-card:nth-child(2) { --card-color: #3b82f6; } /* Blue for Stage 1 */
|
||||||
|
.stage-card:nth-child(3) { --card-color: #8b5cf6; } /* Purple for Stage 2 */
|
||||||
|
.stage-card:nth-child(4) { --card-color: #f59e0b; } /* Orange for Stage 3 */
|
||||||
|
|
||||||
|
.stage-card {
|
||||||
|
background-color: var(--vp-c-bg-soft);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 24px;
|
||||||
|
transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
|
||||||
|
border: 1px solid var(--vp-c-bg-soft);
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stage-card::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 4px;
|
||||||
|
height: 100%;
|
||||||
|
background-color: var(--card-color);
|
||||||
|
opacity: 0.5;
|
||||||
|
transition: opacity 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stage-card:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||||
|
border-color: var(--card-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stage-card:hover::before {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stage-icon {
|
||||||
|
font-size: 3rem;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
|
||||||
|
}
|
||||||
|
|
||||||
|
.stage-card h3 {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
color: var(--vp-c-text-1);
|
||||||
|
transition: color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stage-card:hover h3 {
|
||||||
|
color: var(--card-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stage-card p {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: var(--vp-c-text-2);
|
||||||
|
margin-bottom: 16px;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stage-card a {
|
||||||
|
color: var(--card-color);
|
||||||
|
font-weight: 500;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
transition: transform 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stage-card a:hover {
|
||||||
|
text-decoration: none;
|
||||||
|
transform: translateX(4px);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="footer-cta">
|
||||||
|
<p class="love-text">Made with ❤️ by Open Source Contributors</p>
|
||||||
|
<h3 class="support-title">お役に立ちましたか？</h3>
|
||||||
|
<p class="support-text">あなたの Star が更新の励みになります 🚀</p>
|
||||||
|
<div class="github-badge">
|
||||||
|
<a href="https://github.com/datawhalechina/easy-vibe" target="_blank" rel="noopener noreferrer">
|
||||||
|
<img src="https://img.shields.io/github/stars/datawhalechina/easy-vibe?style=social&label=Star on GitHub" alt="GitHub stars"/>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.footer-cta {
|
||||||
|
margin-top: 100px;
|
||||||
|
padding: 40px 24px;
|
||||||
|
text-align: center;
|
||||||
|
background: var(--vp-c-bg-soft);
|
||||||
|
border-radius: 24px;
|
||||||
|
max-width: 600px;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
border: 1px solid var(--vp-c-bg-soft);
|
||||||
|
transition: border-color 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-cta:hover {
|
||||||
|
border-color: var(--vp-c-brand);
|
||||||
|
}
|
||||||
|
|
||||||
|
.love-text {
|
||||||
|
color: var(--vp-c-text-3);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
font-family: var(--vp-font-family-mono);
|
||||||
|
}
|
||||||
|
|
||||||
|
.support-title {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
color: var(--vp-c-text-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.support-text {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
color: var(--vp-c-text-2);
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.github-badge {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.github-badge img {
|
||||||
|
height: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.VPButton.alt[href*="github.com"] {
|
||||||
|
background: linear-gradient(90deg, #8B5CF6, #EC4899, #8B5CF6);
|
||||||
|
background-size: 200% auto;
|
||||||
|
border: 1px solid transparent !important;
|
||||||
|
color: white !important;
|
||||||
|
font-weight: 600;
|
||||||
|
animation: gradient 3s linear infinite;
|
||||||
|
box-shadow: 0 4px 14px 0 rgba(139, 92, 246, 0.5);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.VPButton.alt[href*="github.com"]:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 6px 20px rgba(236, 72, 153, 0.6);
|
||||||
|
background-position: right center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes gradient {
|
||||||
|
0% { background-position: 0% 50%; }
|
||||||
|
100% { background-position: 200% 50%; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 374 KiB |
@@ -0,0 +1,178 @@
|
|||||||
|
:root {
|
||||||
|
/* 调整侧边栏分组之间的间距 */
|
||||||
|
--vp-sidebar-nav-section-gap: 8px;
|
||||||
|
--ev-doc-font-size: 13px;
|
||||||
|
--ev-doc-line-height: 1.65;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-doc {
|
||||||
|
font-size: var(--ev-doc-font-size);
|
||||||
|
line-height: var(--ev-doc-line-height);
|
||||||
|
--el-font-size-extra-large: calc(var(--ev-doc-font-size) + 6px);
|
||||||
|
--el-font-size-large: calc(var(--ev-doc-font-size) + 4px);
|
||||||
|
--el-font-size-medium: calc(var(--ev-doc-font-size) + 2px);
|
||||||
|
--el-font-size-base: var(--ev-doc-font-size);
|
||||||
|
--el-font-size-small: calc(var(--ev-doc-font-size) - 1px);
|
||||||
|
--el-font-size-extra-small: calc(var(--ev-doc-font-size) - 2px);
|
||||||
|
--el-font-line-height-primary: var(--ev-doc-line-height);
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-doc p,
|
||||||
|
.vp-doc ul,
|
||||||
|
.vp-doc ol {
|
||||||
|
line-height: var(--ev-doc-line-height) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-doc :where(p, ul, ol, table, blockquote, pre, details, figure) {
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-doc blockquote {
|
||||||
|
font-size: 0.9em !important;
|
||||||
|
color: var(--vp-c-text-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-doc blockquote p {
|
||||||
|
font-size: inherit !important;
|
||||||
|
line-height: 1.4 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-doc :where(li) {
|
||||||
|
margin: 4px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-doc :where(ul, ol) {
|
||||||
|
padding-left: 1.15em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-doc :where(h1, h2, h3, h4, h5, h6) {
|
||||||
|
line-height: 1.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-doc :where(h1) {
|
||||||
|
margin: 22px 0 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-doc :where(h2) {
|
||||||
|
margin: 20px 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-doc h2 {
|
||||||
|
margin: 16px 0 8px !important;
|
||||||
|
padding-top: 10px !important;
|
||||||
|
border-top: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-doc :where(h3) {
|
||||||
|
margin: 18px 0 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-doc :where(h4, h5, h6) {
|
||||||
|
margin: 16px 0 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-doc :where(hr) {
|
||||||
|
margin: 14px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-doc :where(th, td) {
|
||||||
|
padding: 6px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-doc :where(:not(pre) > code) {
|
||||||
|
font-size: 0.95em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 减少一级标题（如"前端开发"）底部的间距 */
|
||||||
|
.VPSidebarItem.level-0 {
|
||||||
|
padding-bottom: 4px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 减少一级标题文字与下方子菜单的间距 */
|
||||||
|
.VPSidebarItem.level-0 > .item {
|
||||||
|
padding-bottom: 2px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 调整子菜单项之间的间距 - 针对所有层级 */
|
||||||
|
.VPSidebarItem.level-1 .item,
|
||||||
|
.VPSidebarItem.level-2 .item,
|
||||||
|
.VPSidebarItem.level-3 .item,
|
||||||
|
.VPSidebarItem.level-4 .item {
|
||||||
|
padding-top: 2px !important;
|
||||||
|
padding-bottom: 2px !important;
|
||||||
|
min-height: 24px !important; /* 强制减小最小高度 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 针对可能存在的特定类名进行覆盖，确保紧凑 */
|
||||||
|
.VPSidebarGroup {
|
||||||
|
padding-top: 6px !important;
|
||||||
|
padding-bottom: 6px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 进一步压缩分组标题与第一项之间的间距 */
|
||||||
|
.VPSidebarItem.level-0 + .VPSidebarItem.level-1 {
|
||||||
|
margin-top: -2px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 压缩分组标题本身的行高 */
|
||||||
|
.VPSidebarItem.level-0 .text {
|
||||||
|
line-height: 1.3 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 压缩子项的行高 */
|
||||||
|
.VPSidebarItem.level-1 .text,
|
||||||
|
.VPSidebarItem.level-2 .text,
|
||||||
|
.VPSidebarItem.level-3 .text {
|
||||||
|
line-height: 1.4 !important;
|
||||||
|
padding: 0 !important; /* 移除文字本身的内边距 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 强制链接本身没有额外的边距 */
|
||||||
|
.VPSidebarItem .VPLink {
|
||||||
|
padding-top: 2px !important;
|
||||||
|
padding-bottom: 2px !important;
|
||||||
|
min-height: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 图片高度限制策略：根据长宽比调整最大高度 */
|
||||||
|
/* 越高的图片（长宽比越大），限制的高度越小，避免占用过多纵向空间 */
|
||||||
|
.vp-doc img.img-tall {
|
||||||
|
max-height: 380px !important;
|
||||||
|
max-width: 100% !important;
|
||||||
|
width: auto !important;
|
||||||
|
height: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-doc img.img-very-tall {
|
||||||
|
max-height: 280px !important;
|
||||||
|
max-width: 100% !important;
|
||||||
|
width: auto !important;
|
||||||
|
height: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-doc img.img-ultra-tall {
|
||||||
|
max-height: 200px !important;
|
||||||
|
max-width: 100% !important;
|
||||||
|
width: auto !important;
|
||||||
|
height: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-doc img.img-limit-width {
|
||||||
|
max-width: 100% !important;
|
||||||
|
max-height: 320px !important;
|
||||||
|
width: auto !important;
|
||||||
|
height: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-doc img.img-limit-height {
|
||||||
|
max-height: 450px !important;
|
||||||
|
max-width: 100% !important;
|
||||||
|
width: auto !important;
|
||||||
|
height: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Fix tagline wrapping issues */
|
||||||
|
.VPHomeHero .tagline {
|
||||||
|
white-space: nowrap;
|
||||||
|
max-width: none !important;
|
||||||
|
}
|
||||||
Symlink
+1
@@ -0,0 +1 @@
|
|||||||
|
../../assets
|
||||||
@@ -0,0 +1,99 @@
|
|||||||
|
---
|
||||||
|
layout: home
|
||||||
|
hero:
|
||||||
|
name: 'Easy-Vibe'
|
||||||
|
text: 'Vibe Coding을 처음부터 체계적으로 학습'
|
||||||
|
tagline:
|
||||||
|
- 제품, 디자인, 풀스택 개발을 결합한 슈퍼 개인이 되세요.
|
||||||
|
- 아이디어에서 프로토타입으로, 프로토타입에서 제품으로, 모든 결과물을 실제 제품으로 전환하세요.
|
||||||
|
- AI를 파트너로 만드세요: 더 빠르게, 더 안정적으로, 더 창의적으로.
|
||||||
|
- 체계적인 학습 경로로 개인의 기술과 제품의 보호막을 구축하세요.
|
||||||
|
actions:
|
||||||
|
- theme: brand
|
||||||
|
text: 학습 시작
|
||||||
|
link: /stage-0/0.1-learning-map/
|
||||||
|
- theme: alt
|
||||||
|
text: ⭐️ GitHub Star
|
||||||
|
link: https://github.com/datawhalechina/easy-vibe
|
||||||
|
features:
|
||||||
|
- title: 초보자 친화적
|
||||||
|
details: 비기술 배경을 위해 설계되었습니다. "말할 수 있다면 코딩할 수 있습니다"로 시작하여 스네이크 게임 등을 통해 빠르게 시작하고 기술적 두려움을 극복하세요.
|
||||||
|
- title: 점진적 실무 경로
|
||||||
|
details: 독특한 "3단계" 학습 방법론. AI 제품 매니저 사고방식에서 풀스택 개발 구현까지, 복잡한 애플리케이션 구축까지 단계별로.
|
||||||
|
- title: Vibe Coding 새로운 패러다임
|
||||||
|
details: AI 시대 프로그래밍의 핵심을 마스터하세요. AI와 페어 프로그래밍하는 법을 배우고 IDE를 가장 강력한 파트너로 만드세요.
|
||||||
|
- title: 실제 프로젝트 주도
|
||||||
|
details: 장난감 코드는 없습니다. 직접 웹 프로토타입, 풀스택 애플리케이션, 위챗 미니 프로그램을 구축하고 모든 아이디어를 실제 제품으로 실현하세요.
|
||||||
|
---
|
||||||
|
|
||||||
|
<div align="center" style="margin-top: 60px; margin-bottom: 60px;">
|
||||||
|
<div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 40px; border-radius: 20px; max-width: 700px;">
|
||||||
|
<h2 style="color: white; border: none; font-size: 2rem; font-weight: 700; margin-bottom: 20px;">🚧 한국어 번역 진행 중</h2>
|
||||||
|
<p style="color: white; font-size: 1.2rem; line-height: 1.8; margin: 0;">
|
||||||
|
전체 Easy-Vibe 튜토리얼을 한국어로 번역하는 작업이 진행 중입니다.<br>
|
||||||
|
완전한 버전을 기다려주세요!<br><br>
|
||||||
|
그 전에는<a href="../zh-cn/" style="color: #fbbf24; text-decoration: underline; font-weight: bold;">중국어 간체판</a> 또는 <a href="../en-us/" style="color: #fbbf24; text-decoration: underline; font-weight: bold;">영문판</a>을 먼저 방문하실 수 있습니다.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.VPHomeHero .text {
|
||||||
|
font-size: 1.8rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="footer-cta">
|
||||||
|
<p class="love-text">Made with ❤️ by Open Source Contributors</p>
|
||||||
|
<h3 class="support-title">도움이 되셨나요?</h3>
|
||||||
|
<p class="support-text">Star는 저희가 계속 업데이트할 수 있는 동기가 됩니다 🚀</p>
|
||||||
|
<div class="github-badge">
|
||||||
|
<a href="https://github.com/datawhalechina/easy-vibe" target="_blank" rel="noopener noreferrer">
|
||||||
|
<img src="https://img.shields.io/github/stars/datawhalechina/easy-vibe?style=social&label=Star on GitHub" alt="GitHub stars"/>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.footer-cta {
|
||||||
|
margin-top: 100px;
|
||||||
|
padding: 40px 24px;
|
||||||
|
text-align: center;
|
||||||
|
background: var(--vp-c-bg-soft);
|
||||||
|
border-radius: 24px;
|
||||||
|
max-width: 600px;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.love-text {
|
||||||
|
color: var(--vp-c-text-3);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
font-family: var(--vp-font-family-mono);
|
||||||
|
}
|
||||||
|
|
||||||
|
.support-title {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
color: var(--vp-c-text-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.support-text {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
color: var(--vp-c-text-2);
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.github-badge {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.github-badge img {
|
||||||
|
height: 32px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Symlink
+1
@@ -0,0 +1 @@
|
|||||||
|
../../assets
|
||||||
@@ -0,0 +1,99 @@
|
|||||||
|
---
|
||||||
|
layout: home
|
||||||
|
hero:
|
||||||
|
name: 'Easy-Vibe'
|
||||||
|
text: 'Học Vibe Coding từ Con Số Không'
|
||||||
|
tagline:
|
||||||
|
- Trở thành một cá nhân siêu kết hợp sản phẩm, thiết kế và phát triển full-stack.
|
||||||
|
- Từ ý tưởng sang nguyên mẫu, từ nguyên mẫu sang sản phẩm, biến mọi đầu ra thành sản phẩm có thể giao hàng.
|
||||||
|
- Khiến AI trở thành đối tác của bạn: nhanh hơn, ổn định hơn, sáng tạo hơn.
|
||||||
|
- Xây dựng hào kỹ thuật và sản phẩm cá nhân với lộ trình học tập có hệ thống.
|
||||||
|
actions:
|
||||||
|
- theme: brand
|
||||||
|
text: Bắt Đầu Học
|
||||||
|
link: /stage-0/0.1-learning-map/
|
||||||
|
- theme: alt
|
||||||
|
text: ⭐️ Star trên GitHub
|
||||||
|
link: https://github.com/datawhalechina/easy-vibe
|
||||||
|
features:
|
||||||
|
- title: Thân thiện với Người mới
|
||||||
|
details: Được thiết kế cho nền tảng không kỹ thuật. Bắt đầu với "nếu bạn có thể nói, bạn có thể lập trình", bắt đầu nhanh thông qua các trò chơi như Snake, và vượt qua nỗi sợ kỹ thuật.
|
||||||
|
- title: Lộ trình Thực tế Tiến bộ
|
||||||
|
details: Phương pháp học tập độc đáo "ba giai đoạn". Từ tư duy quản lý sản phẩm AI, đến triển khai phát triển full-stack, đến xây dựng ứng dụng phức tạp, từng bước một.
|
||||||
|
- title: Vibe Coding Paradigm Mới
|
||||||
|
details: Làm chủ cốt lõi của lập trình trong kỷ nguyên AI. Học lập trình cặp với AI, làm cho IDE trở thành đối tác mạnh nhất của bạn.
|
||||||
|
- title: Dẫn dắt bởi Dự án Thực
|
||||||
|
details: Không mã đồ chơi. Tự xây dựng nguyên mẫu web, ứng dụng full-stack, chương trình nhỏ WeChat, và thực hiện biến mọi ý tưởng thành sản phẩm.
|
||||||
|
---
|
||||||
|
|
||||||
|
<div align="center" style="margin-top: 60px; margin-bottom: 60px;">
|
||||||
|
<div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 40px; border-radius: 20px; max-width: 700px;">
|
||||||
|
<h2 style="color: white; border: none; font-size: 2rem; font-weight: 700; margin-bottom: 20px;">🚧 Bản dịch tiếng Việt đang tiến hành</h2>
|
||||||
|
<p style="color: white; font-size: 1.2rem; line-height: 1.8; margin: 0;">
|
||||||
|
Chúng tôi đang nỗ lực dịch toàn bộ hướng dẫn Easy-Vibe sang tiếng Việt.<br>
|
||||||
|
Hãy chờ đợi phiên bản hoàn chỉnh!<br><br>
|
||||||
|
Trong thời gian chờ đợi, bạn có thể truy cập<a href="../en-us/" style="color: #fbbf24; text-decoration: underline; font-weight: bold;">phiên bản tiếng Anh</a> hoặc <a href="../zh-cn/" style="color: #fbbf24; text-decoration: underline; font-weight: bold;">phiên bản tiếng Trung</a>.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.VPHomeHero .text {
|
||||||
|
font-size: 1.8rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="footer-cta">
|
||||||
|
<p class="love-text">Made with ❤️ by Open Source Contributors</p>
|
||||||
|
<h3 class="support-title">Bạn thấy có hữu ích không?</h3>
|
||||||
|
<p class="support-text">Star của bạn thúc đẩy chúng tôi tiếp tục cập nhật 🚀</p>
|
||||||
|
<div class="github-badge">
|
||||||
|
<a href="https://github.com/datawhalechina/easy-vibe" target="_blank" rel="noopener noreferrer">
|
||||||
|
<img src="https://img.shields.io/github/stars/datawhalechina/easy-vibe?style=social&label=Star on GitHub" alt="GitHub stars"/>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.footer-cta {
|
||||||
|
margin-top: 100px;
|
||||||
|
padding: 40px 24px;
|
||||||
|
text-align: center;
|
||||||
|
background: var(--vp-c-bg-soft);
|
||||||
|
border-radius: 24px;
|
||||||
|
max-width: 600px;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.love-text {
|
||||||
|
color: var(--vp-c-text-3);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
font-family: var(--vp-font-family-mono);
|
||||||
|
}
|
||||||
|
|
||||||
|
.support-title {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
color: var(--vp-c-text-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.support-text {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
color: var(--vp-c-text-2);
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.github-badge {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.github-badge img {
|
||||||
|
height: 32px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -18,31 +18,31 @@
|
|||||||
|
|
||||||
### 总附录
|
### 总附录
|
||||||
|
|
||||||
[AI 能力词典：常见 AI 核心概念与名词、场景解释](/appendix/ai-capability-dictionary)
|
[AI 能力词典：常见 AI 核心概念与名词、场景解释](/zh-cn/appendix/ai-capability-dictionary)
|
||||||
|
|
||||||
### 零、幼儿园
|
### 零、幼儿园
|
||||||
|
|
||||||
| 章节 | 关键内容 | 状态 |
|
| 章节 | 关键内容 | 状态 |
|
||||||
| :------------------------------------------------------------------------------- | :------------------------------------- | :--- |
|
| :------------------------------------------------------------------------------- | :------------------------------------- | :--- |
|
||||||
| [新手入门：学习地图](/stage-0/0.1-learning-map/) | 整体学习路径导览 | ✅ |
|
| [新手入门：学习地图](/zh-cn/stage-0/0.1-learning-map/) | 整体学习路径导览 | ✅ |
|
||||||
| [新手入门：AI 时代，会说话就会编程](/stage-0/0.2-ai-capabilities-through-games/) | 通过贪吃蛇等案例初步感受 AI 编程的能力 | ✅ |
|
| [新手入门：AI 时代，会说话就会编程](/zh-cn/stage-0/0.2-ai-capabilities-through-games/) | 通过贪吃蛇等案例初步感受 AI 编程的能力 | ✅ |
|
||||||
|
|
||||||
### 一、AI 产品经理
|
### 一、AI 产品经理
|
||||||
|
|
||||||
| 章节 | 关键内容 | 状态 |
|
| 章节 | 关键内容 | 状态 |
|
||||||
| :---------------------------------------------------------------------- | :------------------------------------------------ | :--- |
|
| :---------------------------------------------------------------------- | :------------------------------------------------ | :--- |
|
||||||
| [初级二：认识 AI IDE 工具](/stage-1/1.1-introduction-to-ai-ide/) | 学会使用 IDE，掌握界面结构和高效提示方式 | ✅ |
|
| [初级二：认识 AI IDE 工具](/zh-cn/stage-1/1.1-introduction-to-ai-ide/) | 学会使用 IDE，掌握界面结构和高效提示方式 | ✅ |
|
||||||
| [初级三：动手做出原型](/stage-1/1.2-building-prototype/) | 从产品分析拆解，到多页面产品原型实现的完整闭环 | ✅ |
|
| [初级三：动手做出原型](/zh-cn/stage-1/1.2-building-prototype/) | 从产品分析拆解，到多页面产品原型实现的完整闭环 | ✅ |
|
||||||
| [初级四：给原型加上 AI 能力](/stage-1/1.3-integrating-ai-capabilities/) | 理解并完成常见 AI 能力（文本图片视频）的 API 接入 | ✅ |
|
| [初级四：给原型加上 AI 能力](/zh-cn/stage-1/1.3-integrating-ai-capabilities/) | 理解并完成常见 AI 能力（文本图片视频）的 API 接入 | ✅ |
|
||||||
| [初级五：完整项目实战](/stage-1/1.4-complete-project-practice/) | 模拟真实场景、接受用户反馈迭代并完成项目展示 | ✅ |
|
| [初级五：完整项目实战](/zh-cn/stage-1/1.4-complete-project-practice/) | 模拟真实场景、接受用户反馈迭代并完成项目展示 | ✅ |
|
||||||
| [大作业：做一个完整的 Web 应用原型并展示](/stage-1/1.5-final-project/) | 独立用 AI IDE 落地并演示一个可用 Web 应用 | ✅ |
|
| [大作业：做一个完整的 Web 应用原型并展示](/zh-cn/stage-1/1.5-final-project/) | 独立用 AI IDE 落地并演示一个可用 Web 应用 | ✅ |
|
||||||
|
|
||||||
#### 附录
|
#### 附录
|
||||||
|
|
||||||
| 章节 | 关键内容 | 状态 |
|
| 章节 | 关键内容 | 状态 |
|
||||||
| :-------------------------------------------------------------- | :---------------------------------------- | :--- |
|
| :-------------------------------------------------------------- | :---------------------------------------- | :--- |
|
||||||
| [附录A：产品思维补充](/stage-1/appendix-a-product-thinking/) | 从想法评估到需求拆解与 MVP 的产品思维框架 | ✅ |
|
| [附录A：产品思维补充](/zh-cn/stage-1/appendix-a-product-thinking/) | 从想法评估到需求拆解与 MVP 的产品思维框架 | ✅ |
|
||||||
| [附录B：常见报错及解决方案](/stage-1/appendix-b-common-errors/) | vibe coding 中的常见错误及排查方法 | ✅ |
|
| [附录B：常见报错及解决方案](/zh-cn/stage-1/appendix-b-common-errors/) | vibe coding 中的常见错误及排查方法 | ✅ |
|
||||||
|
|
||||||
### 二、初中级开发工程师
|
### 二、初中级开发工程师
|
||||||
|
|
||||||
@@ -54,14 +54,14 @@
|
|||||||
| 前端一：Figma 与 MasterGo 入门 | 用设计工具梳理信息架构和页面结构，为前端实现打基础 | 🚧 |
|
| 前端一：Figma 与 MasterGo 入门 | 用设计工具梳理信息架构和页面结构，为前端实现打基础 | 🚧 |
|
||||||
| 前端二：构建第一个现代应用程序-UI 设计 | 基于设计稿完成组件化界面，实现从设计到代码的第一条链路 | 🚧 |
|
| 前端二：构建第一个现代应用程序-UI 设计 | 基于设计稿完成组件化界面，实现从设计到代码的第一条链路 | 🚧 |
|
||||||
| 前端三：参考 UI 设计规范与多产品 UI 设计 | 围绕统一主视觉扩展多产品界面，练习系统化设计能力 | 🚧 |
|
| 前端三：参考 UI 设计规范与多产品 UI 设计 | 围绕统一主视觉扩展多产品界面，练习系统化设计能力 | 🚧 |
|
||||||
| [前端四：一起做霍格沃茨画像](/stage-2/frontend/2.4-hogwarts-portraits/chapter4-lets-build-hogwarts-portraits) | 从 0 到 1 做出接入 AI 能力的前端应用，串联设计与开发 | 🚧 |
|
| [前端四：一起做霍格沃茨画像](/zh-cn/stage-2/frontend/2.4-hogwarts-portraits/chapter4-lets-build-hogwarts-portraits) | 从 0 到 1 做出接入 AI 能力的前端应用，串联设计与开发 | 🚧 |
|
||||||
|
|
||||||
#### 后端与全栈部分
|
#### 后端与全栈部分
|
||||||
|
|
||||||
| 章节 | 关键内容 | 状态 |
|
| 章节 | 关键内容 | 状态 |
|
||||||
| :---------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------ | :--- |
|
| :---------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------ | :--- |
|
||||||
| 后端一：什么是 API | 理解 HTTP 接口与请求响应模型，为后端集成与联调做准备 | 🚧 |
|
| 后端一：什么是 API | 理解 HTTP 接口与请求响应模型，为后端集成与联调做准备 | 🚧 |
|
||||||
| [后端二：从数据库到 Supabase](/stage-2/backend/2.2-database-supabase/chapter5/chapter5-from-database-to-supabase) | 在 Supabase 上落地数据库和 API，打通数据模型与前端页面 | 🚧 |
|
| [后端二：从数据库到 Supabase](/zh-cn/stage-2/backend/2.2-database-supabase/chapter5/chapter5-from-database-to-supabase) | 在 Supabase 上落地数据库和 API，打通数据模型与前端页面 | 🚧 |
|
||||||
| 后端三：大模型辅助编写接口代码与接口文档 | 用大模型协助生成接口与数据库文档及代码，实现可读可测的后端 | 🚧 |
|
| 后端三：大模型辅助编写接口代码与接口文档 | 用大模型协助生成接口与数据库文档及代码，实现可读可测的后端 | 🚧 |
|
||||||
| 后端四：Git 工作流与 Zeabur 部署 | 在 Git 工作流中管理代码，并将应用部署到 Zeabur 上线 | 🚧 |
|
| 后端四：Git 工作流与 Zeabur 部署 | 在 Git 工作流中管理代码，并将应用部署到 Zeabur 上线 | 🚧 |
|
||||||
| 后端五：现代 CLI 开发工具 | 使用 CLI 类 AI 编程工具加速开发与调试，形成个人工程化工作流 | 🚧 |
|
| 后端五：现代 CLI 开发工具 | 使用 CLI 类 AI 编程工具加速开发与调试，形成个人工程化工作流 | 🚧 |
|
||||||
@@ -73,7 +73,7 @@
|
|||||||
|
|
||||||
| 章节 | 关键内容 | 状态 |
|
| 章节 | 关键内容 | 状态 |
|
||||||
| :-------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------- | :--- |
|
| :-------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------- | :--- |
|
||||||
| [AI 一：Dify 入门与知识库集成](/stage-2/ai-capabilities/2.1-dify-knowledge-base/chapter3/chapter3-getting-started-with-dify-and-its-knowledge-base-integration) | 用 Dify Workflow 与基础 RAG 搭建工具类产品，为后续应用升级打样 | 🚧 |
|
| [AI 一：Dify 入门与知识库集成](/zh-cn/stage-2/ai-capabilities/2.1-dify-knowledge-base/chapter3/chapter3-getting-started-with-dify-and-its-knowledge-base-integration) | 用 Dify Workflow 与基础 RAG 搭建工具类产品，为后续应用升级打样 | 🚧 |
|
||||||
| AI 二：学会查询 AI 词典与集成多模态 API | 学会查找合适的模型与 API，并把文本、图像等多模态能力接入产品 | 🚧 |
|
| AI 二：学会查询 AI 词典与集成多模态 API | 学会查找合适的模型与 API，并把文本、图像等多模态能力接入产品 | 🚧 |
|
||||||
|
|
||||||
### 三、高级开发工程师
|
### 三、高级开发工程师
|
||||||
@@ -0,0 +1,245 @@
|
|||||||
|
---
|
||||||
|
layout: home
|
||||||
|
hero:
|
||||||
|
name: 'Easy-Vibe'
|
||||||
|
text: 'Learn Vibe Coding from 0 to 1'
|
||||||
|
tagline:
|
||||||
|
- 不止是写代码，而是成为集产品、设计、全栈开发于一身的超级个体。
|
||||||
|
- 从想法到原型，从原型到上线，把每一次输出变成可交付的产品。
|
||||||
|
- 让 AI 成为你的搭档：更快、更稳、更有创造力。
|
||||||
|
- 用系统化的学习路径，构建你的个人技术与产品护城河。
|
||||||
|
actions:
|
||||||
|
- theme: brand
|
||||||
|
text: 开启学习之旅
|
||||||
|
link: /zh-cn/stage-0/0.1-learning-map/
|
||||||
|
- theme: alt
|
||||||
|
text: ⭐️ GitHub 加速更新
|
||||||
|
link: https://github.com/datawhalechina/easy-vibe
|
||||||
|
features:
|
||||||
|
- title: 零基础友好
|
||||||
|
details: 专为非技术背景设计。从"会说话就会编程"开始，通过贪吃蛇等小游戏快速上手，打破技术恐惧。
|
||||||
|
- title: 循序渐进的实战路径
|
||||||
|
details: 独创"三阶段"学习法。从 AI 产品经理思维，到全栈开发落地，再到复杂应用构建，步步为营。
|
||||||
|
- title: Vibe Coding 新范式
|
||||||
|
details: 掌握 AI 时代的编程核心。学会与 AI 结对编程，让 IDE 成为你的最强搭档。
|
||||||
|
- title: 真实项目驱动
|
||||||
|
details: 拒绝玩具代码。亲手构建 Web 原型、全栈应用、微信小程序，将每一个想法真正落地为产品。
|
||||||
|
---
|
||||||
|
|
||||||
|
<div align="center" style="margin-top: 40px; margin-bottom: 40px;">
|
||||||
|
<h2 style="border: none; font-size: 2rem; font-weight: 700; margin-bottom: 20px;">为什么选择 Easy-Vibe？</h2>
|
||||||
|
<p style="font-size: 1.2rem; color: var(--vp-c-text-2); max-width: 800px; margin: 0 auto; line-height: 1.6;">
|
||||||
|
2025 年是 AI 编程的元年。越来越多的人开始尝试 AI 编程，但往往止步于简单的 Demo。<br>
|
||||||
|
Easy-Vibe 致力于填补这一空白，教你如何像专业人士一样，用 AI 组织开发流程，从原型到上线，打通产品落地的最后一公里。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { useData } from 'vitepress'
|
||||||
|
|
||||||
|
const { site } = useData()
|
||||||
|
const base = site.value.base
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="stage-container">
|
||||||
|
<a :href="base + 'cn/stage-0/0.1-learning-map/'" class="stage-card">
|
||||||
|
<div class="stage-icon">🌱</div>
|
||||||
|
<h3>Stage 0: 新手入门</h3>
|
||||||
|
<p>适合产品、运营及非技术背景。通过做游戏理解 AI 编程逻辑，建立信心。</p>
|
||||||
|
<span>查看详情 →</span>
|
||||||
|
</a>
|
||||||
|
<a :href="base + 'cn/stage-1/1.1-introduction-to-ai-ide/'" class="stage-card">
|
||||||
|
<div class="stage-icon">🎨</div>
|
||||||
|
<h3>Stage 1: AI 产品经理</h3>
|
||||||
|
<p>掌握 Vibe Coding 工作流。学会拆解需求，独立完成高保真 Web 应用原型。</p>
|
||||||
|
<span>查看详情 →</span>
|
||||||
|
</a>
|
||||||
|
<a :href="base + 'cn/stage-2/frontend/2.0-lovart-assets/'" class="stage-card">
|
||||||
|
<div class="stage-icon">💻</div>
|
||||||
|
<h3>Stage 2: 初中级开发</h3>
|
||||||
|
<p>深入全栈开发。前端组件化、数据库设计、后端 API 开发与部署上线。</p>
|
||||||
|
<span>查看详情 →</span>
|
||||||
|
</a>
|
||||||
|
<a :href="base + 'cn/stage-3/core-skills/3.1-mcp-claudecode-skills/'" class="stage-card">
|
||||||
|
<div class="stage-icon">🚀</div>
|
||||||
|
<h3>Stage 3: 高级开发</h3>
|
||||||
|
<p>构建复杂跨平台应用。微信小程序实战，挑战更高阶的 AI 原生应用开发。</p>
|
||||||
|
<span>查看详情 →</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.VPHomeHero .text {
|
||||||
|
font-size: 1.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stage-container {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||||
|
gap: 20px;
|
||||||
|
max-width: 1152px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stage-card:nth-child(1) { --card-color: #10b981; } /* Green for Stage 0 */
|
||||||
|
.stage-card:nth-child(2) { --card-color: #3b82f6; } /* Blue for Stage 1 */
|
||||||
|
.stage-card:nth-child(3) { --card-color: #8b5cf6; } /* Purple for Stage 2 */
|
||||||
|
.stage-card:nth-child(4) { --card-color: #f59e0b; } /* Orange for Stage 3 */
|
||||||
|
|
||||||
|
.stage-card {
|
||||||
|
background-color: var(--vp-c-bg-soft);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 24px;
|
||||||
|
transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
|
||||||
|
border: 1px solid var(--vp-c-bg-soft);
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stage-card::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 4px;
|
||||||
|
height: 100%;
|
||||||
|
background-color: var(--card-color);
|
||||||
|
opacity: 0.5;
|
||||||
|
transition: opacity 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stage-card:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||||
|
border-color: var(--card-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stage-card:hover::before {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stage-icon {
|
||||||
|
font-size: 3rem;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
|
||||||
|
}
|
||||||
|
|
||||||
|
.stage-card h3 {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
color: var(--vp-c-text-1);
|
||||||
|
transition: color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stage-card:hover h3 {
|
||||||
|
color: var(--card-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stage-card p {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: var(--vp-c-text-2);
|
||||||
|
margin-bottom: 16px;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stage-card a {
|
||||||
|
color: var(--card-color);
|
||||||
|
font-weight: 500;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
transition: transform 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stage-card a:hover {
|
||||||
|
text-decoration: none;
|
||||||
|
transform: translateX(4px);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="footer-cta">
|
||||||
|
<p class="love-text">Made with ❤️ by Open Source Contributors</p>
|
||||||
|
<h3 class="support-title">觉得有帮助？</h3>
|
||||||
|
<p class="support-text">你的 Star 是我们持续更新的动力 🚀</p>
|
||||||
|
<div class="github-badge">
|
||||||
|
<a href="https://github.com/datawhalechina/easy-vibe" target="_blank" rel="noopener noreferrer">
|
||||||
|
<img src="https://img.shields.io/github/stars/datawhalechina/easy-vibe?style=social&label=Star on GitHub" alt="GitHub stars"/>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.footer-cta {
|
||||||
|
margin-top: 100px;
|
||||||
|
padding: 40px 24px;
|
||||||
|
text-align: center;
|
||||||
|
background: var(--vp-c-bg-soft);
|
||||||
|
border-radius: 24px;
|
||||||
|
max-width: 600px;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
border: 1px solid var(--vp-c-bg-soft);
|
||||||
|
transition: border-color 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-cta:hover {
|
||||||
|
border-color: var(--vp-c-brand);
|
||||||
|
}
|
||||||
|
|
||||||
|
.love-text {
|
||||||
|
color: var(--vp-c-text-3);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
font-family: var(--vp-font-family-mono);
|
||||||
|
}
|
||||||
|
|
||||||
|
.support-title {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
color: var(--vp-c-text-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.support-text {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
color: var(--vp-c-text-2);
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.github-badge {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.github-badge img {
|
||||||
|
height: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.VPButton.alt[href*="github.com"] {
|
||||||
|
background: linear-gradient(90deg, #8B5CF6, #EC4899, #8B5CF6);
|
||||||
|
background-size: 200% auto;
|
||||||
|
border: 1px solid transparent !important;
|
||||||
|
color: white !important;
|
||||||
|
font-weight: 600;
|
||||||
|
animation: gradient 3s linear infinite;
|
||||||
|
box-shadow: 0 4px 14px 0 rgba(139, 92, 246, 0.5);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.VPButton.alt[href*="github.com"]:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 6px 20px rgba(236, 72, 153, 0.6);
|
||||||
|
background-position: right center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes gradient {
|
||||||
|
0% { background-position: 0% 50%; }
|
||||||
|
100% { background-position: 200% 50%; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 374 KiB |
@@ -0,0 +1,178 @@
|
|||||||
|
:root {
|
||||||
|
/* 调整侧边栏分组之间的间距 */
|
||||||
|
--vp-sidebar-nav-section-gap: 8px;
|
||||||
|
--ev-doc-font-size: 13px;
|
||||||
|
--ev-doc-line-height: 1.65;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-doc {
|
||||||
|
font-size: var(--ev-doc-font-size);
|
||||||
|
line-height: var(--ev-doc-line-height);
|
||||||
|
--el-font-size-extra-large: calc(var(--ev-doc-font-size) + 6px);
|
||||||
|
--el-font-size-large: calc(var(--ev-doc-font-size) + 4px);
|
||||||
|
--el-font-size-medium: calc(var(--ev-doc-font-size) + 2px);
|
||||||
|
--el-font-size-base: var(--ev-doc-font-size);
|
||||||
|
--el-font-size-small: calc(var(--ev-doc-font-size) - 1px);
|
||||||
|
--el-font-size-extra-small: calc(var(--ev-doc-font-size) - 2px);
|
||||||
|
--el-font-line-height-primary: var(--ev-doc-line-height);
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-doc p,
|
||||||
|
.vp-doc ul,
|
||||||
|
.vp-doc ol {
|
||||||
|
line-height: var(--ev-doc-line-height) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-doc :where(p, ul, ol, table, blockquote, pre, details, figure) {
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-doc blockquote {
|
||||||
|
font-size: 0.9em !important;
|
||||||
|
color: var(--vp-c-text-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-doc blockquote p {
|
||||||
|
font-size: inherit !important;
|
||||||
|
line-height: 1.4 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-doc :where(li) {
|
||||||
|
margin: 4px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-doc :where(ul, ol) {
|
||||||
|
padding-left: 1.15em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-doc :where(h1, h2, h3, h4, h5, h6) {
|
||||||
|
line-height: 1.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-doc :where(h1) {
|
||||||
|
margin: 22px 0 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-doc :where(h2) {
|
||||||
|
margin: 20px 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-doc h2 {
|
||||||
|
margin: 16px 0 8px !important;
|
||||||
|
padding-top: 10px !important;
|
||||||
|
border-top: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-doc :where(h3) {
|
||||||
|
margin: 18px 0 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-doc :where(h4, h5, h6) {
|
||||||
|
margin: 16px 0 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-doc :where(hr) {
|
||||||
|
margin: 14px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-doc :where(th, td) {
|
||||||
|
padding: 6px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-doc :where(:not(pre) > code) {
|
||||||
|
font-size: 0.95em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 减少一级标题（如"前端开发"）底部的间距 */
|
||||||
|
.VPSidebarItem.level-0 {
|
||||||
|
padding-bottom: 4px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 减少一级标题文字与下方子菜单的间距 */
|
||||||
|
.VPSidebarItem.level-0 > .item {
|
||||||
|
padding-bottom: 2px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 调整子菜单项之间的间距 - 针对所有层级 */
|
||||||
|
.VPSidebarItem.level-1 .item,
|
||||||
|
.VPSidebarItem.level-2 .item,
|
||||||
|
.VPSidebarItem.level-3 .item,
|
||||||
|
.VPSidebarItem.level-4 .item {
|
||||||
|
padding-top: 2px !important;
|
||||||
|
padding-bottom: 2px !important;
|
||||||
|
min-height: 24px !important; /* 强制减小最小高度 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 针对可能存在的特定类名进行覆盖，确保紧凑 */
|
||||||
|
.VPSidebarGroup {
|
||||||
|
padding-top: 6px !important;
|
||||||
|
padding-bottom: 6px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 进一步压缩分组标题与第一项之间的间距 */
|
||||||
|
.VPSidebarItem.level-0 + .VPSidebarItem.level-1 {
|
||||||
|
margin-top: -2px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 压缩分组标题本身的行高 */
|
||||||
|
.VPSidebarItem.level-0 .text {
|
||||||
|
line-height: 1.3 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 压缩子项的行高 */
|
||||||
|
.VPSidebarItem.level-1 .text,
|
||||||
|
.VPSidebarItem.level-2 .text,
|
||||||
|
.VPSidebarItem.level-3 .text {
|
||||||
|
line-height: 1.4 !important;
|
||||||
|
padding: 0 !important; /* 移除文字本身的内边距 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 强制链接本身没有额外的边距 */
|
||||||
|
.VPSidebarItem .VPLink {
|
||||||
|
padding-top: 2px !important;
|
||||||
|
padding-bottom: 2px !important;
|
||||||
|
min-height: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 图片高度限制策略：根据长宽比调整最大高度 */
|
||||||
|
/* 越高的图片（长宽比越大），限制的高度越小，避免占用过多纵向空间 */
|
||||||
|
.vp-doc img.img-tall {
|
||||||
|
max-height: 380px !important;
|
||||||
|
max-width: 100% !important;
|
||||||
|
width: auto !important;
|
||||||
|
height: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-doc img.img-very-tall {
|
||||||
|
max-height: 280px !important;
|
||||||
|
max-width: 100% !important;
|
||||||
|
width: auto !important;
|
||||||
|
height: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-doc img.img-ultra-tall {
|
||||||
|
max-height: 200px !important;
|
||||||
|
max-width: 100% !important;
|
||||||
|
width: auto !important;
|
||||||
|
height: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-doc img.img-limit-width {
|
||||||
|
max-width: 100% !important;
|
||||||
|
max-height: 320px !important;
|
||||||
|
width: auto !important;
|
||||||
|
height: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-doc img.img-limit-height {
|
||||||
|
max-height: 450px !important;
|
||||||
|
max-width: 100% !important;
|
||||||
|
width: auto !important;
|
||||||
|
height: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Fix tagline wrapping issues */
|
||||||
|
.VPHomeHero .tagline {
|
||||||
|
white-space: nowrap;
|
||||||
|
max-width: none !important;
|
||||||
|
}
|
||||||
|
Before Width: | Height: | Size: 623 KiB After Width: | Height: | Size: 623 KiB |
|
Before Width: | Height: | Size: 1.1 MiB After Width: | Height: | Size: 1.1 MiB |
|
Before Width: | Height: | Size: 64 KiB After Width: | Height: | Size: 64 KiB |
|
Before Width: | Height: | Size: 107 KiB After Width: | Height: | Size: 107 KiB |
|
Before Width: | Height: | Size: 379 KiB After Width: | Height: | Size: 379 KiB |
|
Before Width: | Height: | Size: 373 KiB After Width: | Height: | Size: 373 KiB |
|
Before Width: | Height: | Size: 656 KiB After Width: | Height: | Size: 656 KiB |
|
Before Width: | Height: | Size: 318 KiB After Width: | Height: | Size: 318 KiB |
|
Before Width: | Height: | Size: 41 KiB After Width: | Height: | Size: 41 KiB |
|
Before Width: | Height: | Size: 283 KiB After Width: | Height: | Size: 283 KiB |
|
Before Width: | Height: | Size: 119 KiB After Width: | Height: | Size: 119 KiB |
|
Before Width: | Height: | Size: 127 KiB After Width: | Height: | Size: 127 KiB |
|
Before Width: | Height: | Size: 108 KiB After Width: | Height: | Size: 108 KiB |
|
Before Width: | Height: | Size: 223 KiB After Width: | Height: | Size: 223 KiB |
|
Before Width: | Height: | Size: 385 KiB After Width: | Height: | Size: 385 KiB |
|
Before Width: | Height: | Size: 299 KiB After Width: | Height: | Size: 299 KiB |
|
Before Width: | Height: | Size: 98 KiB After Width: | Height: | Size: 98 KiB |
|
Before Width: | Height: | Size: 268 KiB After Width: | Height: | Size: 268 KiB |
|
Before Width: | Height: | Size: 167 KiB After Width: | Height: | Size: 167 KiB |
|
Before Width: | Height: | Size: 640 KiB After Width: | Height: | Size: 640 KiB |
|
Before Width: | Height: | Size: 13 MiB After Width: | Height: | Size: 13 MiB |
|
Before Width: | Height: | Size: 2.9 MiB After Width: | Height: | Size: 2.9 MiB |
|
Before Width: | Height: | Size: 514 KiB After Width: | Height: | Size: 514 KiB |
|
Before Width: | Height: | Size: 148 KiB After Width: | Height: | Size: 148 KiB |
|
Before Width: | Height: | Size: 5.3 MiB After Width: | Height: | Size: 5.3 MiB |
|
Before Width: | Height: | Size: 529 KiB After Width: | Height: | Size: 529 KiB |
|
Before Width: | Height: | Size: 313 KiB After Width: | Height: | Size: 313 KiB |
|
Before Width: | Height: | Size: 407 KiB After Width: | Height: | Size: 407 KiB |
|
Before Width: | Height: | Size: 587 KiB After Width: | Height: | Size: 587 KiB |
|
Before Width: | Height: | Size: 234 KiB After Width: | Height: | Size: 234 KiB |
|
Before Width: | Height: | Size: 651 KiB After Width: | Height: | Size: 651 KiB |
|
Before Width: | Height: | Size: 3.3 MiB After Width: | Height: | Size: 3.3 MiB |
|
Before Width: | Height: | Size: 3.1 MiB After Width: | Height: | Size: 3.1 MiB |
|
Before Width: | Height: | Size: 124 KiB After Width: | Height: | Size: 124 KiB |
|
Before Width: | Height: | Size: 238 KiB After Width: | Height: | Size: 238 KiB |
|
Before Width: | Height: | Size: 183 KiB After Width: | Height: | Size: 183 KiB |
|
Before Width: | Height: | Size: 442 KiB After Width: | Height: | Size: 442 KiB |
|
Before Width: | Height: | Size: 540 KiB After Width: | Height: | Size: 540 KiB |
|
Before Width: | Height: | Size: 4.1 MiB After Width: | Height: | Size: 4.1 MiB |
|
Before Width: | Height: | Size: 2.6 MiB After Width: | Height: | Size: 2.6 MiB |
|
Before Width: | Height: | Size: 3.7 MiB After Width: | Height: | Size: 3.7 MiB |
|
Before Width: | Height: | Size: 2.3 MiB After Width: | Height: | Size: 2.3 MiB |
|
Before Width: | Height: | Size: 1.1 MiB After Width: | Height: | Size: 1.1 MiB |
|
Before Width: | Height: | Size: 57 KiB After Width: | Height: | Size: 57 KiB |
|
Before Width: | Height: | Size: 602 KiB After Width: | Height: | Size: 602 KiB |
|
Before Width: | Height: | Size: 658 KiB After Width: | Height: | Size: 658 KiB |
|
Before Width: | Height: | Size: 333 KiB After Width: | Height: | Size: 333 KiB |
|
Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 36 KiB |
|
Before Width: | Height: | Size: 97 KiB After Width: | Height: | Size: 97 KiB |
|
Before Width: | Height: | Size: 236 KiB After Width: | Height: | Size: 236 KiB |
|
Before Width: | Height: | Size: 336 KiB After Width: | Height: | Size: 336 KiB |
|
Before Width: | Height: | Size: 880 KiB After Width: | Height: | Size: 880 KiB |
|
Before Width: | Height: | Size: 201 KiB After Width: | Height: | Size: 201 KiB |
|
Before Width: | Height: | Size: 388 KiB After Width: | Height: | Size: 388 KiB |
|
Before Width: | Height: | Size: 556 KiB After Width: | Height: | Size: 556 KiB |
|
Before Width: | Height: | Size: 478 KiB After Width: | Height: | Size: 478 KiB |
|
Before Width: | Height: | Size: 44 KiB After Width: | Height: | Size: 44 KiB |
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 23 KiB |
|
Before Width: | Height: | Size: 92 KiB After Width: | Height: | Size: 92 KiB |
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user