Files
test-repo/docs-readme/fr-FR
sanbuphy c8b68e5139 feat(ui): update hero button text and enhance welcome screen
- Change primary hero button text from "Start Learning" to "Start Vibe Together!" across all language versions to align with project branding
- Update online reading links in README files to point to /welcome.html for better user onboarding
- Enhance WelcomeScreen.vue with improved animation timing and spacing
- Add dynamic SVG wordmark to homepage hero section for visual appeal
- Implement animated color transition for top promo bar
- Remove testing guidelines comment in AGENTS.md as placeholder
- Adjust feature card styling with increased min-height and icon sizes
2026-03-18 12:17:03 +08:00
..

███████╗ █████╗ ███████╗██╗   ██╗    ██╗   ██╗██╗██████╗ ███████╗
██╔════╝██╔══██╗██╔════╝╚██╗ ██╔╝    ██║   ██║██║██╔══██╗██╔════╝
█████╗  ███████║███████╗ ╚████╔╝     ██║   ██║██║██████╔╝█████╗  
██╔══╝  ██╔══██║╚════██║  ╚██╔╝      ╚██╗ ██╔╝██║██╔══██╗██╔══╝  
███████╗██║  ██║███████║   ██║        ╚████╔╝ ██║██████╔╝███████╗
╚══════╝╚═╝  ╚═╝╚══════╝   ╚═╝         ╚═══╝  ╚═╝╚═════╝ ╚══════╝

Easy-Vibe : Apprendre le Vibe Coding de 0 à 1

📌 Lire en ligne (Read Online) · ✨ Tutoriel interactif

Lire en ligne · Carte d'apprentissage · Communauté

Stars Forks License

简体中文 繁體中文 English 日本語 Español Français Klingon 한국어 العربية Türkçe Tiếng_Việt Deutsch বাংলা


Carte d'apprentissage exclusive pour débutants
Guidage à partir de zéro, planification claire, dites adieu à "apprendre et oublier"

Tutoriel graphique pas à pas
Explications détaillées, comme un tuteur privé à vos côtés

À 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-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.
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

Learning Map

📚 Base de connaissances de l'annexe

Covers 9 knowledge domains and 80+ interactive topics with animations and visual components to help you intuitively understand core concepts from computer fundamentals to AI frontiers.

💻 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

  1. npm install
  2. npm run dev
  3. Ouvrez http://localhost:3000 dans 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)