add secondary english navigation links in smaller font to all localized readme files for better accessibility fix incorrect internal links in english documentation
███████╗ █████╗ ███████╗██╗ ██╗ ██╗ ██╗██╗██████╗ ███████╗ ██╔════╝██╔══██╗██╔════╝╚██╗ ██╔╝ ██║ ██║██║██╔══██╗██╔════╝ █████╗ ███████║███████╗ ╚████╔╝ ██║ ██║██║██████╔╝█████╗ ██╔══╝ ██╔══██║╚════██║ ╚██╔╝ ╚██╗ ██╔╝██║██╔══██╗██╔══╝ ███████╗██║ ██║███████║ ██║ ╚████╔╝ ██║██████╔╝███████╗ ╚══════╝╚═╝ ╚═╝╚══════╝ ╚═╝ ╚═══╝ ╚═╝╚═════╝ ╚══════╝
Easy-Vibe : Apprendre le Vibe Coding de 0 à 1
Lancez-vous tout de suite et vibez avec nous : si vous pouvez parler, vous pouvez créer des apps
Jump right in and vibe together — if you can talk, you can build apps.
📌 Lire en ligne (Read Online) · ✨ Tutoriel interactif
Lire en ligne ·
Carte d'apprentissage ·
Communauté
Read Online ·
Learning Map ·
Community
⭐ Cliquez ici pour mettre une etoile et accelerer les mises a jour ❤️
À l'ère de l'IA, les personnes qui transforment les idées en produits sont souvent celles qui font le premier pas. Easy-Vibe est né pour cela.
Easy-Vibe vous guide de 0 à 1 à travers les étapes suivantes :
Choisissez votre point de départ selon votre niveau :
- Débutant / Product Manager : Commencez par Stage 1 pour développer une pensée de programmation et maîtriser AI IDE pour le prototypage rapide
- Développeur : Commencez par Stage 2 pour approfondir le développement full-stack et l'intégration IA
- Développeur avancé : Passez directement à Stage 3 pour explorer Claude Code et le développement multiplateforme
| Étape | Compétences clés | Résultat |
|---|---|---|
| Stage 1 | Carte d'apprentissage, Intro programmation IA, AI IDE, Pensée produit, Prototypage, Intégration capacités IA | Mini-jeux interactifs, Prototypes de produit complets |
| Stage 2 | Développement Full-stack, Bases de données, Intégration IA, Déploiement et opérations | Applications IA Full-stack prêtes pour la production |
| Stage 3 | Claude Code avancé, Développement multiplateforme | Applications multiplateformes de niveau production |
| Annexe | Fondamentaux informatique, Intro IA, 9 domaines de connaissance | Plus de 80 sujets interactifs |
🔥 Nouvelles
- [2026-03-25] 📚 README aligne sur la derniere version chinoise : L'entree en francais a ete synchronisee avec l'introduction, la navigation d'apprentissage et la structure de contenu les plus recentes.
- [2026-03-02] 🦞 Support OpenClaw & AI Agents : Ajout du fichier de navigation AI
llms.txt, permettant à OpenClaw, Claude, Cursor, Trae et autres AI Agents de comprendre rapidement la structure du dépôt et de localiser précisément le contenu du tutoriel. Nous espérons que chaque 🦞 appréciera l'apprentissage ! - [2026-03-01] Section développement avancé mise à niveau complète : Ajout de sept guides détaillés Claude Code (MCP, Skills, Agent Teams, etc.) et huit tutoriels de développement multiplateforme (PWA, Electron, NFT, extensions VS Code, applications industrielles Qt, etc.).
- [2026-02-25] Mise à jour de la Base de connaissances de l'annexe, couvrant 9 domaines de connaissance et plus de 80 sujets interactifs.
- [2026-01-27] Ajout de tutoriels de developpement d'applications pour Android et iOS.
- [2026-01-19] Publication d'une serie de composants de demonstration interactifs sur le Prompt Engineering, l'evolution de l'IA, la conception d'authentification et les principes de Git.
Past News
- [2026-01-16] Restructuration du projet, établissement formel du chapitre "Introduction pour débutants", réduction des obstacles.
- [2026-01-14] Mise à jour massive du document Stage 1 "Construction de prototypes de produits".
- [2026-01-13] Reconstruction de l'architecture documentaire, support multilingue complet (i18n).
- [2026-01-01] Lancement de la carte d'apprentissage principale du projet.
📖 Navigation
📚 Base de connaissances de l'annexe
Couvre 9 domaines de connaissance et 80+ sujets interactifs avec des animations et des composants visuels pour vous aider a comprendre intuitivement les concepts essentiels, des fondements informatiques jusqu'aux frontieres de l'IA.
|
💻 Fondamentaux Informatiques • Du transistor au CPU • Systèmes d'exploitation • Codage, stockage et transmission des données • Réseaux : comment deux ordinateurs dialoguent • Structures de données • Introduction à la pensée algorithmique |
🔧 Outils de Développement • Git : la machine à remonter le temps du code • Ligne de commande et scripts Shell • IDE et VS Code • Outils de développement navigateur • Gestionnaires de paquets |
💡 Programmation Web • HTML & CSS • JavaScript • Manipulation du DOM • Fetch API et programmation asynchrone • Frameworks MV* (Vue/React) |
I. Entrée Zéro Base
| Chapitre | Contenu clé | État |
|---|---|---|
| Préface : Carte d'apprentissage | Navigation globale du parcours d'apprentissage | ✅ |
| Niveau 1 : Ère de l'IA, Parler c'est programmer | Expérimenter la programmation IA à travers des cas | ✅ |
| Niveau 2 : Trouver de grandes idées | Apprendre à trouver et valider des idées produits | ✅ |
| Niveau 3 : Introduction aux outils AI IDE | Apprendre à utiliser l'IDE, créer des jeux localement | ✅ |
| Niveau 4 : Construction de prototypes pratiques | Des besoins aux prototypes mono/multipage | ✅ |
| Niveau 5 : Ajouter des capacités IA aux prototypes | Intégrer l'IA (texte, image, vidéo) | ✅ |
| Niveau 6 : Pratique de projet complet | Simuler des scénarios réels, itérer avec les retours | ✅ |
Annexe : Pensée Commerciale
| Chapitre | Contenu clé | État |
|---|---|---|
| Annexe A : Pensée produit et conception de solutions | Cadres de pensée pour créer des produits | ✅ |
| Annexe B : Scènes d'application IA (B2B) | Applications IA dans différents secteurs | ✅ |
| Annexe C : Inspiration scènes de consommation IA (B2C) | Explorer les applications IA grand public | ✅ |
Annexe : Solutions Techniques
| Chapitre | Contenu clé | État |
|---|---|---|
| Annexe D : Que faire en cas d'erreur | Erreurs courantes en vibe coding | ✅ |
| Annexe E : Comparatif de 7 outils de programmation IA | Comparatif des plateformes IA | ✅ |
| Annexe F : Conception de sites avec agents de design et programmation | Collaboration multi-agents | ✅ |
II. Développeur Intermédiaire
Front-end
| Chapitre | Contenu clé | État |
|---|---|---|
| Front-end 0 : Assets avec Lovart | Générer en masse des assets visuels | 🚧 |
| Front-end 1 : Introduction à Figma & MasterGo | Organiser l'architecture de l'information et la structure des pages | 🚧 |
| Front-end 2 : Construction du premier app moderne - UI Design | Workflow design-to-code avec composants | 🚧 |
| Front-end 3 : Spécifications UI et design multi-produits | Design systématique multi-produits | 🚧 |
| Front-end 4 : Portraits de Hogwarts ensemble | Créer une app front-end avec IA de 0 à 1 | ✅ |
Back-end & Full-stack
| Chapitre | Contenu clé | État |
|---|---|---|
| Back-end 1 : Qu'est-ce qu'une API | Comprendre HTTP et les modèles requête/réponse | ✅ |
| Back-end 2 : De la base de données à Supabase | Implémenter DB et API sur Supabase | ✅ |
| Back-end 3 : Code et documentation d'API assistés par IA | Générer docs et code d'API avec LLM | 🚧 |
| Back-end 4 : Workflow Git | Contrôle de version et collaboration Git | ✅ |
| Back-end 5 : Déploiement sur Zeabur | Déployer des applications sur Zeabur | ✅ |
| Back-end 6 : Outils CLI modernes | Accélérer le développement avec CLI IA | ✅ |
| Back-end 7 : Intégration de systèmes de paiement comme Stripe | Intégrer le paiement et le flux de règlement | 🚧 |
| Projet 1 : Première application moderne - App Full-stack | Compléter une app Web full-stack production | 🚧 |
| Projet 2 : Bibliothèque UI moderne + Pratique Trae | Produit indépendant avec auth et paiement | 🚧 |
Annexe Capacité IA
| Chapitre | Contenu clé | État |
|---|---|---|
| IA 1 : Introduction à Dify & Base de connaissances | Construire des produits utilitaires avec Dify & RAG | ✅ |
| IA 2 : Dictionnaire IA & APIs multimodales | Rechercher modèles/APIs et intégrer le multimodal | 🚧 |
III. Développeur Avancé
Compétences Fondamentales Claude Code
| Chapitre | Contenu clé | État |
|---|---|---|
| Démarrage rapide Claude Code | Installation, opérations de base, tips et commandes | ✅ |
| Guide complet Claude Code MCP | Connecter Claude Code à GitHub, DB, APIs via MCP | ✅ |
| Guide complet Claude Code Skills | Empaqueter les connaissances en skill packs réutilisables | ✅ |
| Meilleures pratiques workflow Claude Code | Meilleures pratiques pour dev quotidien, refactoring, code review | ✅ |
| Guide complet Claude Agent Teams | Collaboration multi-IA comme une vraie équipe de dev | ✅ |
| Claude Code Superpowers Développement ingénierie | Écrire du code de qualité professionnelle avec TDD et bonnes pratiques | ✅ |
| Comment faire travailler Claude Code longtemps | Concevoir des tâches de longue durée pour un travail continu | ✅ |
Développement Multiplateforme
| Chapitre | Contenu clé | État |
|---|---|---|
| Comment construire un Mini Programme WeChat | Écosystème mini programme, du template au lancement | ✅ |
| Comment construire un Mini Programme WeChat avec Back-end | Intégrer DB et logique back-end dans les mini programmes | ✅ |
| Développement d'applications Android | Développement Android unifié Web/Natif avec Expo | ✅ |
| Développement d'applications iOS | Développement iOS unifié Web/Natif avec Expo | ✅ |
| Comment construire un site personnel et blog académique | Du choix tech au déploiement, construire une page personnelle | ✅ |
| Développement PWA | Construire des Progressive Web Apps avec support offline | 🚧 |
| Développement d'extension navigateur AI | Développer des extensions Chrome pour résumer des pages | 🚧 |
| Développement d'application bureau Electron | Construire une app bureau reconnaissance vocale avec Electron | 🚧 |
| Comment développer et créer un NFT rapidement | Écrire des smart contracts, déployer sur testnet Ethereum | 🚧 |
| Développement d'extensions VS Code | Développer des extensions pour assistants de projet IA | 🚧 |
| Développement d'applications industrielles Qt | Construire un système HMI de surveillance de pompe industrielle avec Qt | 🚧 |
Annexe Capacité IA Avancée
| Chapitre | Contenu clé | État |
|---|---|---|
| Qu'est-ce que le RAG et comment il fonctionne | Comprendre le RAG et les architectures courantes | ✅ |
| RAG intermédiaire et orchestration de workflow : LangGraph | Concevoir des workflows multi-étapes et systèmes RAG avancés | 🚧 |
🛠️ Comment apprendre
- Choisissez les chapitres à lire et pratiquer selon votre niveau. N'hésitez pas à ouvrir une issue pour des questions.
💻 Configuration locale
Approche moderne
Dans un AI IDE (VS Code, Cursor, Trae, etc.), utilisez le prompt suivant :
Veuillez m'aider à exécuter le service local de ce projet.
Approche traditionnelle
- npm install
- npm run dev
- Ouvrez
http://localhost:3000dans votre navigateur.
🤝 Contribuer
- Si vous trouvez des problèmes ou avez des suggestions, veuillez ouvrir une Issue.
- Pour contribuer, veuillez soumettre une Pull Request.
- Si vous voulez démarrer un nouveau projet avec Datawhale, suivez le Guide de projet open source Datawhale.
🙏 Remerciements
- Sanbu - Lead du projet (Membre Datawhale)
- Fang Ke - Advisor (Membre Datawhale, Université Tsinghua)
- Yerim Kang (Projets pratiques - Université Tsinghua)
- Zhao Zhilin (Projets pratiques - Université Tsinghua)
- Li Yixuan (Design visuel - Université Tsinghua)
- Liu Siyi (Projets pratiques - Université Tsinghua)
- Tous les beta-testeurs du groupe AI Vibe Coding 101 pour leurs retours.
Remerciements spéciaux
- Merci à @Sm1les pour son support et son aide.
- Merci à tous les contributeurs et à tous ceux qui ont mis une étoile à ce projet ❤️
(Voir les détails dans les autres langues ou le dépôt principal)






