docs: update stage-0 pages and navigation for content restructuring

- Mark stage-0 links as "Coming Soon" across all language versions
- Update navigation labels from "Product Manager" to "Novice & PM" variants
- Consolidate stage-0 and stage-1 content into single "Novice & Product Prototype" section
- Refactor homepage feature grid to use Apple Store-style layout
- Update stage descriptions and learning path summaries to reflect new structure
- Ensure consistency across all supported languages (en, zh, ja, ko, es, fr, de, ar, vi)
This commit is contained in:
sanbuphy
2026-01-29 20:01:05 +08:00
parent 119304a0a4
commit a9a5c5c8a7
17 changed files with 186 additions and 178 deletions
+6 -12
View File
@@ -113,8 +113,7 @@ Easy-Vibe 通过以下几个阶段,带你从 0 到 1:
| 阶段 | 核心技能 | 产出 | | 阶段 | 核心技能 | 产出 |
| ------------ | -------------------------------- | --------------------- | | ------------ | -------------------------------- | --------------------- |
| **第阶段** | 小游戏开发、AI 编程入门 | 完成第一个互动小游戏 | | **第阶段** | AI 编程入门、产品思维、原型设计 | 互动小游戏、Web 应用原型 |
| **第一阶段** | 产品思维、需求分析、原型设计 | 可交互的 Web 应用原型 |
| **第二阶段** | 全栈开发、AI 集成、数据库 | 完整的全栈 AI 应用 | | **第二阶段** | 全栈开发、AI 集成、数据库 | 完整的全栈 AI 应用 |
| **第三阶段** | claude code 进阶、小程序安卓开发 | 生产级多平台应用 | | **第三阶段** | claude code 进阶、小程序安卓开发 | 生产级多平台应用 |
@@ -141,17 +140,12 @@ Easy-Vibe 通过以下几个阶段,带你从 0 到 1:
[AI 能力词典:常见 AI 核心概念与名词、场景解释](docs/zh-cn/appendix/ai-capability-dictionary.md) [AI 能力词典:常见 AI 核心概念与名词、场景解释](docs/zh-cn/appendix/ai-capability-dictionary.md)
### 、新手入门 ### 、新手入门与产品原型
| 章节 | 关键内容 | 状态 | | 章节 | 关键内容 | 状态 |
| :----------------------------------------------------------------------------------------------- | :------------------------------------- | :--- | | :----------------------------------------------------------------------------------------------- | :------------------------------------------------ | :--- |
| [前言:学习地图](docs/zh-cn/stage-0/0.1-learning-map/index.md) | 整体学习路径导览 | ✅ | | [前言:学习地图](docs/zh-cn/stage-0/0.1-learning-map/index.md) | 整体学习路径导览 | ✅ |
| [初级一:AI 时代,会说话就会编程](docs/zh-cn/stage-0/0.2-ai-capabilities-through-games/index.md) | 通过贪吃蛇等案例初步感受 AI 编程的能力 | ✅ | | [初级一:AI 时代,会说话就会编程](docs/zh-cn/stage-0/0.2-ai-capabilities-through-games/index.md) | 通过贪吃蛇等案例初步感受 AI 编程的能力 | ✅ |
### 一、AI 产品经理
| 章节 | 关键内容 | 状态 |
| :---------------------------------------------------------------------------------------- | :------------------------------------------------ | :--- |
| [初级二:认识 AI IDE 工具](docs/zh-cn/stage-1/1.1-introduction-to-ai-ide/index.md) | 学会使用 IDE,在本地制作小游戏 | ✅ | | [初级二:认识 AI IDE 工具](docs/zh-cn/stage-1/1.1-introduction-to-ai-ide/index.md) | 学会使用 IDE,在本地制作小游戏 | ✅ |
| [初级三:动手做出原型](docs/zh-cn/stage-1/1.2-building-prototype/index.md) | 从需求分析、AI 生成单页面,再到生成多页面产品原型 | ✅ | | [初级三:动手做出原型](docs/zh-cn/stage-1/1.2-building-prototype/index.md) | 从需求分析、AI 生成单页面,再到生成多页面产品原型 | ✅ |
| [初级四:给原型加上 AI 能力](docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/index.md) | 学会接入常见 AI 能力(文本、图片、视频) | ✅ | | [初级四:给原型加上 AI 能力](docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/index.md) | 学会接入常见 AI 能力(文本、图片、视频) | ✅ |
+2 -8
View File
@@ -53,8 +53,7 @@
هذا البرنامج التعليمي مصمم خصيصًا ليأخذك من 0 إلى 1، وإتقان تقنيات Vibe Coding تدريجيًا: هذا البرنامج التعليمي مصمم خصيصًا ليأخذك من 0 إلى 1، وإتقان تقنيات Vibe Coding تدريجيًا:
- **المرحلة 0**: **دخول سريع من خلال الألعاب المصغرة** لاكتساب مهارات Vibe Coding - **المرحلة 1**: **من الألعاب المصغرة إلى نماذج الويب**، إتقان أساسيات برمجة الذكاء الاصطناعي وتفكير المنتج
- **المرحلة 1**: من منظور مدير المنتج، **مهارات Vibe Coding وفهم الأعمال**، تنفيذ نموذج أولي لتطبيق الويب
- **المرحلة 2**: تعلم **تطوير الواجهة الأمامية/الخلفية وقدرات الذكاء الاصطناعي** المتعلقة بتقنيات Vibe Coding، إكمال تطبيق كامل - **المرحلة 2**: تعلم **تطوير الواجهة الأمامية/الخلفية وقدرات الذكاء الاصطناعي** المتعلقة بتقنيات Vibe Coding، إكمال تطبيق كامل
- **المرحلة 3**: إتقان بناء **التطبيقات المعقدة متعددة المنصات**، نحو تطبيقات مستوى الإنتاج - **المرحلة 3**: إتقان بناء **التطبيقات المعقدة متعددة المنصات**، نحو تطبيقات مستوى الإنتاج
@@ -76,17 +75,12 @@
[قاموس قدرات الذكاء الاصطناعي: المفاهيم الأساسية الشائعة للذكاء الاصطناعي والمصطلحات والشروحات السيناريوية](docs/appendix/ai-capability-dictionary.md) [قاموس قدرات الذكاء الاصطناعي: المفاهيم الأساسية الشائعة للذكاء الاصطناعي والمصطلحات والشروحات السيناريوية](docs/appendix/ai-capability-dictionary.md)
### 0. الروضة ### 1. مدخل للمبتدئين ونموذج المنتج
| الفصل | المحتوى الرئيسي | الحالة | | الفصل | المحتوى الرئيسي | الحالة |
| :------------------------------------------------------------------------------------------------------------------------------ | :--------------------------------------------------------------------- | :----- | | :------------------------------------------------------------------------------------------------------------------------------ | :--------------------------------------------------------------------- | :----- |
| [المقدمة: خريطة التعلم](docs/stage-0/0.1-learning-map/index.md) | دليل مسار التعلم الشامل | ✅ | | [المقدمة: خريطة التعلم](docs/stage-0/0.1-learning-map/index.md) | دليل مسار التعلم الشامل | ✅ |
| [المبتدئ 1: عصر الذكاء الاصطناعي، إذا كنت تستطيع التحدث يمكنك البرمجة](docs/stage-0/0.2-ai-capabilities-through-games/index.md) | تجربة قدرات البرمجة بالذكاء الاصطناعي لأول مرة من خلال حالات مثل Snake | ✅ | | [المبتدئ 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، إنشاء ألعاب مصغرة محليًا | ✅ | | [المبتدئ 2: معرفة أدوات IDE الذكاء الاصطناعي](docs/stage-1/1.1-introduction-to-ai-ide/index.md) | تعلم استخدام IDE، إنشاء ألعاب مصغرة محليًا | ✅ |
| [المبتدئ 3: بناء نموذج أولي بنفسك](docs/stage-1/1.2-building-prototype/index.md) | تحليل المتطلبات، توليد صفحة واحدة بالذكاء الاصطناعي، حتى توليد نماذج منتجات متعددة الصفحات | ✅ | | [المبتدئ 3: بناء نموذج أولي بنفسك](docs/stage-1/1.2-building-prototype/index.md) | تحليل المتطلبات، توليد صفحة واحدة بالذكاء الاصطناعي، حتى توليد نماذج منتجات متعددة الصفحات | ✅ |
| [المبتدئ 4: إضافة قدرات الذكاء الاصطناعي إلى النموذج الأولي](docs/stage-1/1.3-integrating-ai-capabilities/index.md) | تعلم توصيل القدرات الشائعة للذكاء الاصطناعي (النص، الصورة، الفيديو) | ✅ | | [المبتدئ 4: إضافة قدرات الذكاء الاصطناعي إلى النموذج الأولي](docs/stage-1/1.3-integrating-ai-capabilities/index.md) | تعلم توصيل القدرات الشائعة للذكاء الاصطناعي (النص، الصورة، الفيديو) | ✅ |
+2 -8
View File
@@ -53,8 +53,7 @@ Wenn du versuchst, mit KI Code zu schreiben, ständig auf Fehler stößt, oft au
Dieses Tutorial ist speziell dafür konzipiert, dich von 0 auf 1 zu bringen und Vibe Coding-Techniken schrittweise zu meistern: 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**: **Von Mini-Spielen zu Web-Prototypen**, Beherrschung von KI-Programmiergrundlagen und Produktdenken
- **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 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 - **Stufe 3**: Beherrschung des Baus von **plattformübergreifenden komplexen Anwendungen**, hin zu produktionsreifen Anwendungen
@@ -76,17 +75,12 @@ Wir glauben, dass durch die Beherrschung von Vibe Coding in Kombination mit syst
[KI-Fähigkeitslexikon: gängige KI-Kernkonzepte und Begriffe, Szenario-Erklärungen](docs/zh-cn/appendix/ai-capability-dictionary.md) [KI-Fähigkeitslexikon: gängige KI-Kernkonzepte und Begriffe, Szenario-Erklärungen](docs/zh-cn/appendix/ai-capability-dictionary.md)
### 0. Kindergarten ### 1. Anfängereinstieg und Produktprototyp
| Kapitel | Schlüsselinhalt | Status | | Kapitel | Schlüsselinhalt | Status |
| :------------------------------------------------------------------------------------------------------------------------------------------ | :------------------------------------------------------------------ | :----- | | :------------------------------------------------------------------------------------------------------------------------------------------ | :------------------------------------------------------------------ | :----- |
| [Vorwort: Lernkarte](docs/zh-cn/stage-0/0.1-learning-map/index.md) | Gesamtführung durch den Lernpfad | ✅ | | [Vorwort: Lernkarte](docs/zh-cn/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/zh-cn/stage-0/0.2-ai-capabilities-through-games/index.md) | Erste Erfahrung mit KI-Programmierfähigkeiten durch Fälle wie Snake | ✅ | | [Anfänger 1: KI-Zeitalter, wenn du sprechen kannst, kannst du programmieren](docs/zh-cn/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/zh-cn/stage-1/1.1-introduction-to-ai-ide/index.md) | IDE-Nutzung lernen, lokal Mini-Spiele erstellen | ✅ | | [Anfänger 2: KI-IDE-Tools kennenlernen](docs/zh-cn/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/zh-cn/stage-1/1.2-building-prototype/index.md) | Anforderungsanalyse, KI-generierte Einzelseite, bis zu Generierung von Mehrseiten-Produktprototypen | ✅ | | [Anfänger 3: Einen Prototyp selbst bauen](docs/zh-cn/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/zh-cn/stage-1/1.3-integrating-ai-capabilities/index.md) | Verbindung gängiger KI-Fähigkeiten (Text, Bild, Video) lernen | ✅ | | [Anfänger 4: KI-Fähigkeiten zum Prototyp hinzufügen](docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/index.md) | Verbindung gängiger KI-Fähigkeiten (Text, Bild, Video) lernen | ✅ |
+2 -8
View File
@@ -56,8 +56,7 @@ When you try to write code with AI, encounter constant errors, often want to giv
This tutorial is specifically designed to take you from 0 to 1, progressively mastering Vibe Coding techniques: This tutorial is specifically designed to take you from 0 to 1, progressively mastering Vibe Coding techniques:
- **Stage 0**: Get started with **vibe coding skills through simple games** - **Stage 1**: From **Games to Web Prototypes**, mastering AI programming basics and product thinking
- **Stage 1**: **Vibe coding skills and business understanding** from a product manager perspective, implementing web application prototypes
- **Stage 2**: Learn **frontend/backend development and AI capabilities** related vibe coding techniques, complete full applications - **Stage 2**: Learn **frontend/backend development and AI capabilities** related vibe coding techniques, complete full applications
- **Stage 3**: Master **multi-platform complex application** construction solutions, moving towards production-grade applications - **Stage 3**: Master **multi-platform complex application** construction solutions, moving towards production-grade applications
@@ -79,17 +78,12 @@ We believe that by mastering Vibe Coding combined with systematic training, one
[AI Capability Dictionary: Common AI Core Concepts, Terminology, and Scenario Explanations](docs/zh-cn/appendix/ai-capability-dictionary.md) [AI Capability Dictionary: Common AI Core Concepts, Terminology, and Scenario Explanations](docs/zh-cn/appendix/ai-capability-dictionary.md)
### Stage 0: Kindergarten ### Stage 1: Novice Entry & Product Prototype
| Chapter | Key Content | Status | | Chapter | Key Content | Status |
| :---------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------- | :----- | | :---------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------- | :----- |
| [Preface: Learning Map](docs/zh-cn/stage-0/0.1-learning-map/index.md) | Overall learning path overview | ✅ | | [Preface: Learning Map](docs/zh-cn/stage-0/0.1-learning-map/index.md) | Overall learning path overview | ✅ |
| [Primary 1: Programming by Speaking in the AI Era](docs/zh-cn/stage-0/0.2-ai-capabilities-through-games/index.md) | Experience AI programming capabilities through Snake and other cases | ✅ | | [Primary 1: Programming by Speaking in the AI Era](docs/zh-cn/stage-0/0.2-ai-capabilities-through-games/index.md) | Experience AI programming capabilities through Snake and other cases | ✅ |
### Stage 1: AI Product Manager
| Chapter | Key Content | Status |
| :------------------------------------------------------------------------------------------------------------------------ | :---------------------------------------------------------------------------------- | :----- |
| [Primary 2: Understanding AI IDE Tools](docs/zh-cn/stage-1/1.1-introduction-to-ai-ide/index.md) | Learn to use IDE, create small games locally | ✅ | | [Primary 2: Understanding AI IDE Tools](docs/zh-cn/stage-1/1.1-introduction-to-ai-ide/index.md) | Learn to use IDE, create small games locally | ✅ |
| [Primary 3: Building Prototypes Hands-On](docs/zh-cn/stage-1/1.2-building-prototype/index.md) | From requirement analysis, AI-generated single page to multi-page product prototype | ✅ | | [Primary 3: Building Prototypes Hands-On](docs/zh-cn/stage-1/1.2-building-prototype/index.md) | From requirement analysis, AI-generated single page to multi-page product prototype | ✅ |
| [Primary 4: Adding AI Capabilities to Prototypes](docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/index.md) | Learn to integrate common AI capabilities (text, image, video) | ✅ | | [Primary 4: Adding AI Capabilities to Prototypes](docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/index.md) | Learn to integrate common AI capabilities (text, image, video) | ✅ |
+2 -8
View File
@@ -53,8 +53,7 @@ Cuando intentas escribir código con IA, encuentras errores constantes, a menudo
Este tutorial está específicamente diseñado para llevarte de 0 a 1, dominando progresivamente las técnicas de Vibe Coding: 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**: **De mini juegos a prototipos web**, dominar los conceptos básicos de programación de IA y pensamiento de producto
- **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 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 - **Etapa 3**: Dominar la construcción de **aplicaciones complejas multiplataforma**, avanzando hacia aplicaciones de nivel de producción
@@ -76,17 +75,12 @@ Creemos que al dominar Vibe Coding y combinarlo con entrenamiento sistemático,
[Diccionario de capacidades de IA: conceptos centrales comunes de IA, términos y explicaciones de escenarios](docs/zh-cn/appendix/ai-capability-dictionary.md) [Diccionario de capacidades de IA: conceptos centrales comunes de IA, términos y explicaciones de escenarios](docs/zh-cn/appendix/ai-capability-dictionary.md)
### 0. Jardín de Infancia ### 1. Entrada de Novatos y Prototipo de Producto
| Capítulo | Contenido clave | Estado | | Capítulo | Contenido clave | Estado |
| :---------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------- | :----- | | :---------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------- | :----- |
| [Prólogo: Mapa de aprendizaje](docs/zh-cn/stage-0/0.1-learning-map/index.md) | Guía general de la ruta de aprendizaje | ✅ | | [Prólogo: Mapa de aprendizaje](docs/zh-cn/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/zh-cn/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 | ✅ | | [Principiante 1: La era de la IA, si puedes hablar puedes programar](docs/zh-cn/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/zh-cn/stage-1/1.1-introduction-to-ai-ide/index.md) | Aprender a usar el IDE, crear mini juegos localmente | ✅ | | [Principiante 2: Conociendo herramientas de IDE de IA](docs/zh-cn/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/zh-cn/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 3: Haz un prototipo tú mismo](docs/zh-cn/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/zh-cn/stage-1/1.3-integrating-ai-capabilities/index.md) | Aprender a conectar capacidades comunes de IA (texto, imagen, video) | ✅ | | [Principiante 4: Añade capacidades de IA al prototipo](docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/index.md) | Aprender a conectar capacidades comunes de IA (texto, imagen, video) | ✅ |
+2 -8
View File
@@ -53,8 +53,7 @@ Quand vous essayez d'écrire du code avec l'IA, vous rencontrez des erreurs cons
Ce tutoriel est spécialement conçu pour vous mener de 0 à 1, maîtrisant progressivement les techniques de Vibe Coding : 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** : Des **mini-jeux aux prototypes web**, maîtriser les bases de la programmation IA et la pensée produit
- **É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 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 - **Étape 3** : Maîtriser la construction d'**applications complexes multiplateformes**, vers des applications de niveau production
@@ -76,17 +75,12 @@ Nous croyons qu'en maîtrisant Vibe Coding et en le combinant avec un entraînem
[Dictionnaire des capacités IA : concepts centraux IA courants, termes et explications de scénarios](docs/zh-cn/appendix/ai-capability-dictionary.md) [Dictionnaire des capacités IA : concepts centraux IA courants, termes et explications de scénarios](docs/zh-cn/appendix/ai-capability-dictionary.md)
### 0. Maternelle ### 1. Entrée débutant et prototype de produit
| Chapitre | Contenu clé | Statut | | Chapitre | Contenu clé | Statut |
| :--------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------- | :----- | | :--------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------- | :----- |
| [Préface : Carte d'apprentissage](docs/zh-cn/stage-0/0.1-learning-map/index.md) | Guide général du parcours d'apprentissage | ✅ | | [Préface : Carte d'apprentissage](docs/zh-cn/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/zh-cn/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 | ✅ | | [Débutant 1 : L'ère de l'IA, savoir parler c'est savoir programmer](docs/zh-cn/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/zh-cn/stage-1/1.1-introduction-to-ai-ide/index.md) | Apprendre à utiliser l'IDE, créer des mini-jeux localement | ✅ | | [Débutant 2 : Découvrir les outils IDE IA](docs/zh-cn/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/zh-cn/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 3 : Créer un prototype soi-même](docs/zh-cn/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/zh-cn/stage-1/1.3-integrating-ai-capabilities/index.md) | Apprendre à connecter des capacités IA courantes (texte, image, vidéo) | ✅ | | [Débutant 4 : Ajouter des capacités IA au prototype](docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/index.md) | Apprendre à connecter des capacités IA courantes (texte, image, vidéo) | ✅ |
+2 -8
View File
@@ -53,8 +53,7 @@ AI でコードを書こうとしてエラーが続き、諦めかけたくな
本チュートリアルは、0 から 1 まで、Vibe Coding のスキルを段階的に習得できるように設計されています: 本チュートリアルは、0 から 1 まで、Vibe Coding のスキルを段階的に習得できるように設計されています:
- **第 0 段階****ミニゲームから迅速に入門**して Vibe Coding のスキルを習得 - **第 1 段階****ミニゲームからWeb プロトタイプまで**、AI プログラミングの基礎とプロダクト思考を習得
- **第 1 段階**:プロダクトマネージャーの視点からの **Vibe Coding スキルと業務理解**、Web アプリケーションプロトタイプの実装
- **第 2 段階**:**フロントエンド・バックエンド開発と AI 能力**に関連する Vibe Coding テクニックの学習、完全なアプリケーションの完成 - **第 2 段階**:**フロントエンド・バックエンド開発と AI 能力**に関連する Vibe Coding テクニックの学習、完全なアプリケーションの完成
- **第 3 段階**:**マルチプラットフォーム複雑アプリケーション**の構築手法を習得、本番級アプリケーションへ - **第 3 段階**:**マルチプラットフォーム複雑アプリケーション**の構築手法を習得、本番級アプリケーションへ
@@ -76,17 +75,12 @@ AI でコードを書こうとしてエラーが続き、諦めかけたくな
[AI 能力辞書:一般的な AI コア概念と用語、シーンの解釈](docs/zh-cn/appendix/ai-capability-dictionary.md) [AI 能力辞書:一般的な AI コア概念と用語、シーンの解釈](docs/zh-cn/appendix/ai-capability-dictionary.md)
### 零、幼児園 ### 一、初心者入門とプロダクトプロトタイプ
| 章 | 主要内容 | 状態 | | 章 | 主要内容 | 状態 |
| :----------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------- | :--- | | :----------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------- | :--- |
| [前書:学習マップ](docs/zh-cn/stage-0/0.1-learning-map/index.md) | 全体学習パスのガイド | ✅ | | [前書:学習マップ](docs/zh-cn/stage-0/0.1-learning-map/index.md) | 全体学習パスのガイド | ✅ |
| [初級一:AI 時代、話せるだけでプログラミングできる](docs/zh-cn/stage-0/0.2-ai-capabilities-through-games/index.md) | スネークゲームなどの事例を通じて AI プログラミングの能力を初めて体験 | ✅ | | [初級一:AI 時代、話せるだけでプログラミングできる](docs/zh-cn/stage-0/0.2-ai-capabilities-through-games/index.md) | スネークゲームなどの事例を通じて AI プログラミングの能力を初めて体験 | ✅ |
### 一、AI プロダクトマネージャー
| 章 | 主要内容 | 状態 |
| :----------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------- | :--- |
| [初級二:AI IDE ツールを知る](docs/zh-cn/stage-1/1.1-introduction-to-ai-ide/index.md) | IDE の使用方法を学び、ローカルでミニゲームを作成 | ✅ | | [初級二:AI IDE ツールを知る](docs/zh-cn/stage-1/1.1-introduction-to-ai-ide/index.md) | IDE の使用方法を学び、ローカルでミニゲームを作成 | ✅ |
| [初級三:手を動かしてプロトタイプを作る](docs/zh-cn/stage-1/1.2-building-prototype/index.md) | ニーズ分析、AI による単一ページ生成、複数ページプロダクトプロトタイプの生成へ | ✅ | | [初級三:手を動かしてプロトタイプを作る](docs/zh-cn/stage-1/1.2-building-prototype/index.md) | ニーズ分析、AI による単一ページ生成、複数ページプロダクトプロトタイプの生成へ | ✅ |
| [初級四:プロトタイプに AI 能力を追加](docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/index.md) | 一般的な AI 能力(テキスト、画像、動画)の接続方法を習得 | ✅ | | [初級四:プロトタイプに AI 能力を追加](docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/index.md) | 一般的な AI 能力(テキスト、画像、動画)の接続方法を習得 | ✅ |
+2 -8
View File
@@ -53,8 +53,7 @@ AI로 코드를 작성하려고 할 때 오류가 계속 발생하고, 포기하
이 튜토리얼은 0에서 1까지 Vibe Coding 기술을 점진적으로 마스터할 수 있도록 특별히 설계되었습니다: 이 튜토리얼은 0에서 1까지 Vibe Coding 기술을 점진적으로 마스터할 수 있도록 특별히 설계되었습니다:
- **0단계**: **미니게임을 통해 빠르게 입문**하여 Vibe Coding 기술 습득 - **1단계**: **미니게임부터 웹 프로토타입까지**, AI 프로그래밍 기초와 제품 사고 습득
- **1단계**: 프로덕트 매니저 관점에서 **Vibe Coding 기술과 비즈니스 이해**, 웹 애플리케이션 프로토타입 구현
- **2단계**: **프론트엔드/백엔드 개발과 AI 능력**과 관련된 Vibe Coding 테크닉 학습, 완전한 애플리케이션 완성 - **2단계**: **프론트엔드/백엔드 개발과 AI 능력**과 관련된 Vibe Coding 테크닉 학습, 완전한 애플리케이션 완성
- **3단계**: **멀티플랫폼 복잡 애플리케이션** 구축 방법 마스터, 프로덕션급 애플리케이션으로 - **3단계**: **멀티플랫폼 복잡 애플리케이션** 구축 방법 마스터, 프로덕션급 애플리케이션으로
@@ -76,17 +75,12 @@ AI로 코드를 작성하려고 할 때 오류가 계속 발생하고, 포기하
[AI 능력 사전: 일반적인 AI 핵심 개념과 용어, 시나리오 설명](docs/zh-cn/appendix/ai-capability-dictionary.md) [AI 능력 사전: 일반적인 AI 핵심 개념과 용어, 시나리오 설명](docs/zh-cn/appendix/ai-capability-dictionary.md)
### 0. 유치원 ### 1. 초보자 입문 및 제품 프로토타입
| 장 | 주요 내용 | 상태 | | 장 | 주요 내용 | 상태 |
| :--------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------- | :--- | | :--------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------- | :--- |
| [서론: 학습 맵](docs/zh-cn/stage-0/0.1-learning-map/index.md) | 전체 학습 경로 가이드 | ✅ | | [서론: 학습 맵](docs/zh-cn/stage-0/0.1-learning-map/index.md) | 전체 학습 경로 가이드 | ✅ |
| [초급 1: AI 시대, 말할 수 있으면 프로그래밍 가능](docs/zh-cn/stage-0/0.2-ai-capabilities-through-games/index.md) | 스네이크 게임 등 사례를 통해 AI 프로그래밍 능력을 처음 체험 | ✅ | | [초급 1: AI 시대, 말할 수 있으면 프로그래밍 가능](docs/zh-cn/stage-0/0.2-ai-capabilities-through-games/index.md) | 스네이크 게임 등 사례를 통해 AI 프로그래밍 능력을 처음 체험 | ✅ |
### 1. AI 프로덕트 매니저
| 장 | 주요 내용 | 상태 |
| :--------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------- | :--- |
| [초급 2: AI IDE 도구 이해](docs/zh-cn/stage-1/1.1-introduction-to-ai-ide/index.md) | IDE 사용법 배우기, 로컬에서 미니게임 제작 | ✅ | | [초급 2: AI IDE 도구 이해](docs/zh-cn/stage-1/1.1-introduction-to-ai-ide/index.md) | IDE 사용법 배우기, 로컬에서 미니게임 제작 | ✅ |
| [초급 3: 직접 프로토타입 만들기](docs/zh-cn/stage-1/1.2-building-prototype/index.md) | 요구사항 분석, AI 단일 페이지 생성, 다중 페이지 프로덕트 프로토타입 생성으로 | ✅ | | [초급 3: 직접 프로토타입 만들기](docs/zh-cn/stage-1/1.2-building-prototype/index.md) | 요구사항 분석, AI 단일 페이지 생성, 다중 페이지 프로덕트 프로토타입 생성으로 | ✅ |
| [초급 4: 프로토타입에 AI 능력 추가](docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/index.md) | 일반적인 AI 능력(텍스트, 이미지, 비디오) 연결 방법 습득 | ✅ | | [초급 4: 프로토타입에 AI 능력 추가](docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/index.md) | 일반적인 AI 능력(텍스트, 이미지, 비디오) 연결 방법 습득 | ✅ |
+9 -15
View File
@@ -53,8 +53,7 @@ Khi bạn cố gắng viết code bằng AI, liên tục gặp lỗi, thường
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: 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ừ mini-game đến nguyên mẫu web**, nắm vững cơ sở lập trình AI và tư duy sản phẩm
- **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 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 - **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
@@ -76,22 +75,17 @@ Chúng tôi tin rằng thông qua việc làm chủ Vibe Coding kết hợp vớ
[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) [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 ### 1. Nhập môn cho người mới và Nguyên mẫu sản phẩm
| Chương | Nội dung chính | Trạng thái | | 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ể | ✅ | | [Lời nói đầu: Bản đồ học tập](docs/zh-cn/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 | ✅ | | [Sơ cấp 1: Kỷ nguyên AI, biết nói là biết lập trình](docs/zh-cn/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 | ✅ |
| [Sơ cấp 2: Biết các công cụ IDE AI](docs/zh-cn/stage-1/1.1-introduction-to-ai-ide/index.md) | Học sử dụng IDE, tạo mini-game cục bộ | ✅ |
### 1. Quản lý sản phẩm AI | [Sơ cấp 3: Tự làm nguyên mẫu](docs/zh-cn/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/zh-cn/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) | ✅ |
| Chương | Nội dung chính | Trạng thái | | [Sơ cấp 5: Dự án hoàn chỉnh thực chiến](docs/zh-cn/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/zh-cn/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 | ✅ |
| [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 #### Phụ lục
+6 -12
View File
@@ -56,8 +56,7 @@
本教程专门设计,从0到1,带你逐步掌握 Vibe Coding 技巧: 本教程专门设计,从0到1,带你逐步掌握 Vibe Coding 技巧:
- **第阶段**:从**小游戏快速入门** 上手 vibe coding 技能 - **第阶段**:从**小游戏入门**到**Web 应用原型**,掌握 AI 编程基础与产品思维
- **第一阶段**:产品经理视角下的 **vibe coding 技能和业务理解**,实现 Web 应用原型
- **第二阶段**:学习**前后端开发与 AI 能力**相关的 vibecoding 技巧,完成完整应用 - **第二阶段**:学习**前后端开发与 AI 能力**相关的 vibecoding 技巧,完成完整应用
- **第三阶段**:掌握**多平台复杂应用**的构建方案,走向生产级应用 - **第三阶段**:掌握**多平台复杂应用**的构建方案,走向生产级应用
@@ -79,17 +78,12 @@
[AI 能力词典:常见 AI 核心概念与名词、场景解释](docs/zh-cn/appendix/ai-capability-dictionary.md) [AI 能力词典:常见 AI 核心概念与名词、场景解释](docs/zh-cn/appendix/ai-capability-dictionary.md)
### 零、幼儿园 ### 一、新手入门与产品原型
| 章节 | 关键内容 | 状态 | | 章节 | 关键内容 | 状态 |
| :----------------------------------------------------------------------------------------------- | :------------------------------------- | :--- | | :----------------------------------------------------------------------------------------------- | :------------------------------------------------ | :--- |
| [前言:学习地图](docs/zh-cn/stage-0/0.1-learning-map/index.md) | 整体学习路径导览 | ✅ | | [前言:学习地图](docs/zh-cn/stage-0/0.1-learning-map/index.md) | 整体学习路径导览 | ✅ |
| [初级一:AI 时代,会说话就会编程](docs/zh-cn/stage-0/0.2-ai-capabilities-through-games/index.md) | 通过贪吃蛇等案例初步感受 AI 编程的能力 | ✅ | | [初级一:AI 时代,会说话就会编程](docs/zh-cn/stage-0/0.2-ai-capabilities-through-games/index.md) | 通过贪吃蛇等案例初步感受 AI 编程的能力 | ✅ |
### 一、AI 产品经理
| 章节 | 关键内容 | 状态 |
| :---------------------------------------------------------------------------------------- | :------------------------------------------------ | :--- |
| [初级二:认识 AI IDE 工具](docs/zh-cn/stage-1/1.1-introduction-to-ai-ide/index.md) | 学会使用 IDE,在本地制作小游戏 | ✅ | | [初级二:认识 AI IDE 工具](docs/zh-cn/stage-1/1.1-introduction-to-ai-ide/index.md) | 学会使用 IDE,在本地制作小游戏 | ✅ |
| [初级三:动手做出原型](docs/zh-cn/stage-1/1.2-building-prototype/index.md) | 从需求分析、AI 生成单页面,再到生成多页面产品原型 | ✅ | | [初级三:动手做出原型](docs/zh-cn/stage-1/1.2-building-prototype/index.md) | 从需求分析、AI 生成单页面,再到生成多页面产品原型 | ✅ |
| [初级四:给原型加上 AI 能力](docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/index.md) | 学会接入常见 AI 能力(文本、图片、视频) | ✅ | | [初级四:给原型加上 AI 能力](docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/index.md) | 学会接入常见 AI 能力(文本、图片、视频) | ✅ |
+2 -8
View File
@@ -53,8 +53,7 @@
本教學專門設計,從0到1,帶你逐步掌握 Vibe Coding 技巧: 本教學專門設計,從0到1,帶你逐步掌握 Vibe Coding 技巧:
- **第階段**:從**小遊戲快速入門** 上手 vibe coding 技能 - **第階段**:從**小遊戲入門**到**Web 應用原型**,掌握 AI 編程基礎與產品思維
- **第一階段**:產品經理視角下的 **vibe coding 技能和業務理解**,實現 Web 應用原型
- **第二階段**:學習**前後端開發與 AI 能力**相關的 vibecoding 技巧,完成完整應用 - **第二階段**:學習**前後端開發與 AI 能力**相關的 vibecoding 技巧,完成完整應用
- **第三階段**:掌握**多平台複雜應用**的建構方案,走向生產級應用 - **第三階段**:掌握**多平台複雜應用**的建構方案,走向生產級應用
@@ -76,17 +75,12 @@
[AI 能力詞典:常見 AI 核心概念與名詞、場景解釋](../docs/zh-cn/appendix/ai-capability-dictionary.md) [AI 能力詞典:常見 AI 核心概念與名詞、場景解釋](../docs/zh-cn/appendix/ai-capability-dictionary.md)
### 零、幼兒園 ### 一、新手入門與產品原型
| 章节 | 關鍵內容 | 狀態 | | 章节 | 關鍵內容 | 狀態 |
| :-------------------------------------------------------------------------------------------------- | :------------------------------------- | :--- | | :-------------------------------------------------------------------------------------------------- | :------------------------------------- | :--- |
| [前言:學習地圖](../docs/zh-cn/stage-0/0.1-learning-map/index.md) | 整體學習路徑導覽 | ✅ | | [前言:學習地圖](../docs/zh-cn/stage-0/0.1-learning-map/index.md) | 整體學習路徑導覽 | ✅ |
| [初級一:AI 時代,會說話就會編程](../docs/zh-cn/stage-0/0.2-ai-capabilities-through-games/index.md) | 通過貪吃蛇等案例初步感受 AI 編程的能力 | ✅ | | [初級一:AI 時代,會說話就會編程](../docs/zh-cn/stage-0/0.2-ai-capabilities-through-games/index.md) | 通過貪吃蛇等案例初步感受 AI 編程的能力 | ✅ |
### 一、AI 產品經理
| 章节 | 關鍵內容 | 狀態 |
| :------------------------------------------------------------------------------------------- | :------------------------------------------------ | :--- |
| [初級二:認識 AI IDE 工具](../docs/zh-cn/stage-1/1.1-introduction-to-ai-ide/index.md) | 學會使用 IDE,在本地製作小遊戲 | ✅ | | [初級二:認識 AI IDE 工具](../docs/zh-cn/stage-1/1.1-introduction-to-ai-ide/index.md) | 學會使用 IDE,在本地製作小遊戲 | ✅ |
| [初級三:動手做出原型](../docs/zh-cn/stage-1/1.2-building-prototype/index.md) | 從需求分析、AI 生成單頁面,再到生成多頁面產品原型 | ✅ | | [初級三:動手做出原型](../docs/zh-cn/stage-1/1.2-building-prototype/index.md) | 從需求分析、AI 生成單頁面,再到生成多頁面產品原型 | ✅ |
| [初級四:給原型加上 AI 能力](../docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/index.md) | 學會接入常見 AI 能力(文本、圖片、影片) | ✅ | | [初級四:給原型加上 AI 能力](../docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/index.md) | 學會接入常見 AI 能力(文本、圖片、影片) | ✅ |
+10 -10
View File
@@ -311,7 +311,7 @@ export default defineConfig({
nav: [ nav: [
{ text: '首页', link: '/zh-cn/' }, { text: '首页', link: '/zh-cn/' },
{ {
text: '产品经理', text: '新手与产品原型',
link: '/zh-cn/stage-0/' link: '/zh-cn/stage-0/'
}, },
{ {
@@ -669,7 +669,7 @@ export default defineConfig({
nav: [ nav: [
{ text: 'Home', link: '/en-us/' }, { text: 'Home', link: '/en-us/' },
{ {
text: 'Product Manager', text: 'Novice & PM',
link: '/en-us/stage-0/' link: '/en-us/stage-0/'
}, },
{ {
@@ -709,7 +709,7 @@ export default defineConfig({
nav: [ nav: [
{ text: 'ホーム', link: '/ja-jp/' }, { text: 'ホーム', link: '/ja-jp/' },
{ {
text: 'AI プロダクトマネージャー', text: '初心者とPM',
link: '/ja-jp/stage-0/' link: '/ja-jp/stage-0/'
}, },
{ {
@@ -747,7 +747,7 @@ export default defineConfig({
nav: [ nav: [
{ text: '首頁', link: '/zh-tw/' }, { text: '首頁', link: '/zh-tw/' },
{ {
text: '產品經理', text: '新手與產品原型',
link: '/zh-tw/stage-0/' link: '/zh-tw/stage-0/'
}, },
{ {
@@ -783,7 +783,7 @@ export default defineConfig({
}, },
nav: [ nav: [
{ text: '홈', link: '/ko-kr/' }, { text: '홈', link: '/ko-kr/' },
{ text: 'AI PM', link: '/ko-kr/stage-0/' }, { text: '초보자 & PM', link: '/ko-kr/stage-0/' },
{ {
text: '풀스택 개발', text: '풀스택 개발',
link: '/ko-kr/stage-2/' link: '/ko-kr/stage-2/'
@@ -818,7 +818,7 @@ export default defineConfig({
nav: [ nav: [
{ text: 'Inicio', link: '/es-es/' }, { text: 'Inicio', link: '/es-es/' },
{ {
text: 'PM de IA', text: 'Principiante y PM',
link: '/es-es/stage-0/' link: '/es-es/stage-0/'
}, },
{ {
@@ -854,7 +854,7 @@ export default defineConfig({
}, },
nav: [ nav: [
{ text: 'Accueil', link: '/fr-fr/' }, { text: 'Accueil', link: '/fr-fr/' },
{ text: 'PM IA', link: '/fr-fr/stage-0/' }, { text: 'Débutant & PM', link: '/fr-fr/stage-0/' },
{ {
text: 'Développement Full Stack', text: 'Développement Full Stack',
link: '/fr-fr/stage-2/' link: '/fr-fr/stage-2/'
@@ -888,7 +888,7 @@ export default defineConfig({
}, },
nav: [ nav: [
{ text: 'Start', link: '/de-de/' }, { text: 'Start', link: '/de-de/' },
{ text: 'KI-PM', link: '/de-de/stage-0/' }, { text: 'Anfänger & PM', link: '/de-de/stage-0/' },
{ {
text: 'Full Stack Entwicklung', text: 'Full Stack Entwicklung',
link: '/de-de/stage-2/' link: '/de-de/stage-2/'
@@ -923,7 +923,7 @@ export default defineConfig({
nav: [ nav: [
{ text: 'الرئيسية', link: '/ar-sa/' }, { text: 'الرئيسية', link: '/ar-sa/' },
{ {
text: دير منتج AI', text: بتدأ & PM',
link: '/ar-sa/stage-0/' link: '/ar-sa/stage-0/'
}, },
{ {
@@ -960,7 +960,7 @@ export default defineConfig({
nav: [ nav: [
{ text: 'Trang chủ', link: '/vi-vn/' }, { text: 'Trang chủ', link: '/vi-vn/' },
{ {
text: 'PM AI', text: 'Người mới & PM',
link: '/vi-vn/stage-0/' link: '/vi-vn/stage-0/'
}, },
{ {
+103 -29
View File
@@ -70,13 +70,13 @@ const i18n = {
start: '开始学习' start: '开始学习'
}, },
stage1: { stage1: {
cat: 'Stage 1 · 产品经理', cat: 'Stage 1 · 新手与产品原型',
title: '零基础入门,<br><span class="highlight">做自己的产品经理。</span>', title: '零基础入门,<br><span class="highlight">做自己的产品经理。</span>',
sub: '不需要计算机专业背景,只要会说话,就能通过 AI 将你的创意转化为高保真的 Web 原型。', sub: '不需要计算机专业背景,只要会说话,就能通过 AI 将你的创意转化为高保真的 Web 原型。',
cards: [ cards: [
{ title: 'AI 产品经理', desc: '从想法到高保真原型,你只需要会说话。', sub: '适合非技术背景', link: '/zh-cn/stage-0/0.1-learning-map/' }, { title: 'AI 产品经理', desc: '从想法到高保真原型,你只需要会说话。', sub: '适合非技术背景', link: '/zh-cn/stage-0/' },
{ title: '游戏化入门', desc: '通过制作贪吃蛇、俄罗斯方块,打破对代码的恐惧。', sub: '边玩边学', link: '/zh-cn/stage-0/0.2-ai-capabilities-through-games/' }, { title: '游戏化入门', desc: '通过制作贪吃蛇、俄罗斯方块,打破对代码的恐惧。', sub: '边玩边学', link: '/zh-cn/stage-0/' },
{ title: 'Vibe Coding', desc: '掌握 AI 时代的编程核心:提示词工程与上下文管理。', sub: '核心心法', link: '/zh-cn/stage-1/1.1-introduction-to-ai-ide/' } { title: 'Vibe Coding', desc: '掌握 AI 时代的编程核心:提示词工程与上下文管理。', sub: '核心心法', link: '/zh-cn/stage-0/' }
] ]
}, },
stage2: { stage2: {
@@ -121,7 +121,7 @@ const i18n = {
}, },
footer: { footer: {
title: '你的想法,<br>此刻上线。', title: '你的想法,<br>此刻上线。',
desc: '灵感到现实,只差这一个开始。', desc: '灵感到现实,何不从现在开始。',
btn: '>_ Start' btn: '>_ Start'
} }
}, },
@@ -136,7 +136,7 @@ const i18n = {
start: 'Start Learning' start: 'Start Learning'
}, },
stage1: { stage1: {
cat: 'Stage 1 · Product Manager', cat: 'Stage 1 · Novice & PM',
title: 'Zero to Hero, <br><span class="highlight">Be Your Own PM.</span>', title: 'Zero to Hero, <br><span class="highlight">Be Your Own PM.</span>',
sub: 'No CS background needed. Just speak your idea, and AI will turn it into high-fidelity web prototypes.', sub: 'No CS background needed. Just speak your idea, and AI will turn it into high-fidelity web prototypes.',
cards: [ cards: [
@@ -202,7 +202,7 @@ const i18n = {
start: '学習を開始' start: '学習を開始'
}, },
stage1: { stage1: {
cat: 'Stage 1 · プロダクトマネージャー', cat: 'Stage 1 · 初心者とPM',
title: 'ゼロからの入門、<br><span class="highlight">自分だけのPMになる。</span>', title: 'ゼロからの入門、<br><span class="highlight">自分だけのPMになる。</span>',
sub: 'CSの背景は不要。アイデアを話すだけで、AIが高精度のWebプロトタイプに変換します。', sub: 'CSの背景は不要。アイデアを話すだけで、AIが高精度のWebプロトタイプに変換します。',
cards: [ cards: [
@@ -260,7 +260,7 @@ const i18n = {
start: '開始學習' start: '開始學習'
}, },
stage1: { stage1: {
cat: 'Stage 1 · 產品經理', cat: 'Stage 1 · 新手與產品原型',
title: '零基礎入門,<br><span class="highlight">做自己的產品經理。</span>', title: '零基礎入門,<br><span class="highlight">做自己的產品經理。</span>',
sub: '不需要計算機專業背景,只要會說話,就能通過 AI 將你的創意轉化為高保真的 Web 原型。', sub: '不需要計算機專業背景,只要會說話,就能通過 AI 將你的創意轉化為高保真的 Web 原型。',
cards: [ cards: [
@@ -318,7 +318,7 @@ const i18n = {
start: '학습 시작' start: '학습 시작'
}, },
stage1: { stage1: {
cat: 'Stage 1 · 제품 관리자', cat: 'Stage 1 · 초보자 & PM',
title: '제로 베이스 입문,<br><span class="highlight">나만의 PM이 되다.</span>', title: '제로 베이스 입문,<br><span class="highlight">나만의 PM이 되다.</span>',
sub: 'CS 배경지식이 없어도 괜찮습니다. 아이디어를 말하기만 하면 AI가 고품질 웹 프로토타입으로 변환해줍니다.', sub: 'CS 배경지식이 없어도 괜찮습니다. 아이디어를 말하기만 하면 AI가 고품질 웹 프로토타입으로 변환해줍니다.',
cards: [ cards: [
@@ -376,7 +376,7 @@ const i18n = {
start: 'Empezar' start: 'Empezar'
}, },
stage1: { stage1: {
cat: 'Stage 1 · Gerente de Producto', cat: 'Stage 1 · Principiante y PM',
title: 'De Cero a Héroe,<br><span class="highlight">Sé tu propio PM.</span>', title: 'De Cero a Héroe,<br><span class="highlight">Sé tu propio PM.</span>',
sub: 'No necesitas experiencia en CS. Solo di tu idea y la IA la convertirá en prototipos web de alta fidelidad.', sub: 'No necesitas experiencia en CS. Solo di tu idea y la IA la convertirá en prototipos web de alta fidelidad.',
cards: [ cards: [
@@ -434,7 +434,7 @@ const i18n = {
start: 'Commencer' start: 'Commencer'
}, },
stage1: { stage1: {
cat: 'Stage 1 · Chef de Produit', cat: 'Stage 1 · Débutant & PM',
title: 'De Zéro à Héros,<br><span class="highlight">Soyez votre propre PM.</span>', title: 'De Zéro à Héros,<br><span class="highlight">Soyez votre propre PM.</span>',
sub: 'Pas besoin de background CS. Parlez juste de votre idée, et l\'IA la transformera en prototypes web haute fidélité.', sub: 'Pas besoin de background CS. Parlez juste de votre idée, et l\'IA la transformera en prototypes web haute fidélité.',
cards: [ cards: [
@@ -492,7 +492,7 @@ const i18n = {
start: 'Starten' start: 'Starten'
}, },
stage1: { stage1: {
cat: 'Stage 1 · Produktmanager', cat: 'Stage 1 · Anfänger & PM',
title: 'Von Null auf Hundert,<br><span class="highlight">Sei dein eigener PM.</span>', title: 'Von Null auf Hundert,<br><span class="highlight">Sei dein eigener PM.</span>',
sub: 'Kein CS-Hintergrund nötig. Sprich einfach deine Idee aus, und KI verwandelt sie in High-Fidelity-Web-Prototypen.', sub: 'Kein CS-Hintergrund nötig. Sprich einfach deine Idee aus, und KI verwandelt sie in High-Fidelity-Web-Prototypen.',
cards: [ cards: [
@@ -608,7 +608,7 @@ const i18n = {
start: 'Bắt đầu học' start: 'Bắt đầu học'
}, },
stage1: { stage1: {
cat: 'Stage 1 · Quản lý sản phẩm', cat: 'Stage 1 · Người mới & PM',
title: 'Từ số 0 đến Hero,<br><span class="highlight">Tự làm PM cho chính mình.</span>', title: 'Từ số 0 đến Hero,<br><span class="highlight">Tự làm PM cho chính mình.</span>',
sub: 'Không cần nền tảng CS. Chỉ cần nói ra ý tưởng, AI sẽ biến nó thành nguyên mẫu web độ trung thực cao.', sub: 'Không cần nền tảng CS. Chỉ cần nói ra ý tưởng, AI sẽ biến nó thành nguyên mẫu web độ trung thực cao.',
cards: [ cards: [
@@ -967,24 +967,16 @@ const appendixCards = [
<p class="section-sub">{{ t.stage1.sub }}</p> <p class="section-sub">{{ t.stage1.sub }}</p>
</div> </div>
<div class="bento-grid"> <div class="feature-grid">
<a :href="withBase(t.stage1.cards[0].link)" class="bento-item large" :style="{ background: stage1Cards[0].color }"> <a v-for="(card, i) in stage1Cards" :key="i" :href="withBase(t.stage1.cards[i].link)" class="feature-card glass">
<div class="card-content"> <div class="feature-icon" :style="{ background: card.color }">
<span class="card-icon">{{ stage1Cards[0].icon }}</span> {{ card.icon }}
<h4>{{ t.stage1.cards[0].title }}</h4> </div>
<p>{{ t.stage1.cards[0].desc }}</p> <div class="feature-content">
<span class="card-sub">{{ t.stage1.cards[0].sub }}</span> <h4>{{ t.stage1.cards[i].title }}</h4>
<p>{{ t.stage1.cards[i].desc }}</p>
</div> </div>
</a> </a>
<div class="bento-column">
<a v-for="(card, i) in stage1Cards.slice(1)" :key="i" :href="withBase(t.stage1.cards[i+1].link)" class="bento-item small" :style="{ background: card.color }">
<div class="card-content">
<span class="card-icon">{{ card.icon }}</span>
<h4>{{ t.stage1.cards[i+1].title }}</h4>
<p>{{ t.stage1.cards[i+1].desc }}</p>
</div>
</a>
</div>
</div> </div>
</section> </section>
@@ -1738,3 +1730,85 @@ a {
padding-top: 52px !important; padding-top: 52px !important;
} }
</style> </style>
<style scoped>
/* Feature Grid (Apple Store Style) */
.feature-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.feature-card {
background: var(--vp-c-bg-soft);
border-radius: 18px;
padding: 32px;
display: flex;
flex-direction: column;
transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
box-shadow: 0 4px 20px rgba(0,0,0,0.04);
height: 100%;
position: relative;
overflow: hidden;
text-decoration: none !important;
border: 1px solid rgba(0,0,0,0.05);
}
.dark .feature-card {
border: 1px solid rgba(255,255,255,0.1);
background: var(--vp-c-bg-mute);
}
.feature-card:hover {
transform: scale(1.02);
box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}
.feature-icon {
width: 56px;
height: 56px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
margin-bottom: 24px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.feature-content {
display: flex;
flex-direction: column;
}
.feature-content h4 {
font-size: 22px;
font-weight: 600;
margin-bottom: 10px;
color: var(--vp-c-text-1);
line-height: 1.3;
}
.feature-content p {
font-size: 15px;
color: var(--vp-c-text-2);
line-height: 1.6;
margin-top: 4px;
margin-bottom: 0;
}
@media (max-width: 960px) {
.feature-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.feature-grid {
grid-template-columns: 1fr;
}
.feature-card {
padding: 24px;
}
}
</style>
+6 -6
View File
@@ -7,13 +7,13 @@ Welcome to the AI Product Manager stage. Here, you will start from scratch and m
### Getting Started ### Getting Started
Suitable for product, operations, and non-technical backgrounds. Understand AI programming logic through games and build confidence. Suitable for product, operations, and non-technical backgrounds. Understand AI programming logic through games and build confidence.
- [1. Learning Map](/en-us/stage-0/0.1-learning-map/) - 1. Learning Map (Coming Soon)
- [2. If you can speak, you can code](/en-us/stage-0/0.2-ai-capabilities-through-games/) - 2. If you can speak, you can code (Coming Soon)
### Product Manager ### Product Manager
Master the Vibe Coding workflow. Learn to break down requirements and independently complete high-fidelity web application prototypes. Master the Vibe Coding workflow. Learn to break down requirements and independently complete high-fidelity web application prototypes.
- [1. Introduction to AI IDE](/en-us/stage-1/1.1-introduction-to-ai-ide/) - 1. Introduction to AI IDE (Coming Soon)
- [2. Building a Prototype](/en-us/stage-1/1.2-building-prototype/) - 2. Building a Prototype (Coming Soon)
- [3. Integrating AI Capabilities](/en-us/stage-1/1.3-integrating-ai-capabilities/) - 3. Integrating AI Capabilities (Coming Soon)
- [4. Complete Project Practice](/en-us/stage-1/1.4-complete-project-practice/) - 4. Complete Project Practice (Coming Soon)
+6 -6
View File
@@ -7,13 +7,13 @@ Welcome to the AI Product Manager stage. Here, you will start from scratch and m
### Getting Started ### Getting Started
Suitable for product, operations, and non-technical backgrounds. Understand AI programming logic through games and build confidence. Suitable for product, operations, and non-technical backgrounds. Understand AI programming logic through games and build confidence.
- [1. Learning Map](/ja-jp/stage-0/0.1-learning-map/) - 1. Learning Map (Coming Soon)
- [2. If you can speak, you can code](/ja-jp/stage-0/0.2-ai-capabilities-through-games/) - 2. If you can speak, you can code (Coming Soon)
### Product Manager ### Product Manager
Master the Vibe Coding workflow. Learn to break down requirements and independently complete high-fidelity web application prototypes. Master the Vibe Coding workflow. Learn to break down requirements and independently complete high-fidelity web application prototypes.
- [1. Introduction to AI IDE](/ja-jp/stage-1/1.1-introduction-to-ai-ide/) - 1. Introduction to AI IDE (Coming Soon)
- [2. Building a Prototype](/ja-jp/stage-1/1.2-building-prototype/) - 2. Building a Prototype (Coming Soon)
- [3. Integrating AI Capabilities](/ja-jp/stage-1/1.3-integrating-ai-capabilities/) - 3. Integrating AI Capabilities (Coming Soon)
- [4. Complete Project Practice](/ja-jp/stage-1/1.4-complete-project-practice/) - 4. Complete Project Practice (Coming Soon)
+6 -6
View File
@@ -7,13 +7,13 @@ Welcome to the AI Product Manager stage. Here, you will start from scratch and m
### Getting Started ### Getting Started
Suitable for product, operations, and non-technical backgrounds. Understand AI programming logic through games and build confidence. Suitable for product, operations, and non-technical backgrounds. Understand AI programming logic through games and build confidence.
- [1. Learning Map](/ko-kr/stage-0/0.1-learning-map/) - 1. Learning Map (Coming Soon)
- [2. If you can speak, you can code](/ko-kr/stage-0/0.2-ai-capabilities-through-games/) - 2. If you can speak, you can code (Coming Soon)
### Product Manager ### Product Manager
Master the Vibe Coding workflow. Learn to break down requirements and independently complete high-fidelity web application prototypes. Master the Vibe Coding workflow. Learn to break down requirements and independently complete high-fidelity web application prototypes.
- [1. Introduction to AI IDE](/ko-kr/stage-1/1.1-introduction-to-ai-ide/) - 1. Introduction to AI IDE (Coming Soon)
- [2. Building a Prototype](/ko-kr/stage-1/1.2-building-prototype/) - 2. Building a Prototype (Coming Soon)
- [3. Integrating AI Capabilities](/ko-kr/stage-1/1.3-integrating-ai-capabilities/) - 3. Integrating AI Capabilities (Coming Soon)
- [4. Complete Project Practice](/ko-kr/stage-1/1.4-complete-project-practice/) - 4. Complete Project Practice (Coming Soon)
+18 -18
View File
@@ -1,24 +1,24 @@
# AI 产品经 # AI 產品經
欢迎来到 AI 产品经理阶段。在这里,你将从零开始,掌握 Vibe Coding 工作流,成为能够独立完成产品设计的超级个体 歡迎來到 AI 產品經理階段。在這裡,你將從零開始,掌握 Vibe Coding 工作流,成為能夠獨立完成產品設計的超級個體
## 段概 ## 段概
### 新手入 ### 新手入
适合产品、运营及非技背景。通过做游戏理解 AI 编程逻辑,建立信心。 適合產品、運營及非技背景。通過做遊戲理解 AI 編程邏輯,建立信心。
- [1. 学习地图](/zh-tw/stage-0/0.1-learning-map/) - 1. 學習地圖 (即將推出)
- [2. AI 代,会说话就会编程](/zh-tw/stage-0/0.2-ai-capabilities-through-games/) - 2. AI 代,會說話就會編程 (即將推出)
### 产品经 ### 產品經
掌握 Vibe Coding 工作流。学会拆解需求,立完成高保真 Web 用原型。 掌握 Vibe Coding 工作流。學會拆解需求,立完成高保真 Web 用原型。
- [1. 认识 AI IDE 工具](/zh-tw/stage-1/1.1-introduction-to-ai-ide/) - 1. 認識 AI IDE 工具 (即將推出)
- [2. 手做出原型](/zh-tw/stage-1/1.2-building-prototype/) - 2. 手做出原型 (即將推出)
- [3. 原型加上 AI 能力](/zh-tw/stage-1/1.3-integrating-ai-capabilities/) - 3. 原型加上 AI 能力 (即將推出)
- [4. 完整项目实战](/zh-tw/stage-1/1.4-complete-project-practice/) - 4. 完整項目實戰 (即將推出)
- [附录 A品思维补充](/zh-tw/stage-1/appendix-a-product-thinking/) - 附錄 A品思維補充 (即將推出)
- [附录 B:常见报错及解方案](/zh-tw/stage-1/appendix-b-common-errors/) - 附錄 B:常見報錯及解方案 (即將推出)
- [附录 C:产业多分类场景方向参考](/zh-tw/stage-1/appendix-industry-scenarios/) - 附錄 C:產業多分類場景方向參考 (即將推出)
- [扩展阅读 17 款主流 Vibe Coding 在线平台实测对比](/zh-tw/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial) - 擴展閱讀 17 款主流 Vibe Coding 在平台實測對比 (即將推出)
- [扩展阅读 2:用程和设计智能体开发网站](/zh-tw/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents) - 擴展閱讀 2:用程和設計智能體開發網站 (即將推出)