docs: stage-1 i18n coverage + news
This commit is contained in:
sanbuphy
@@ -0,0 +1,82 @@
|
||||
# Presentation du projet
|
||||
|
||||
En 2025, de nombreuses personnes considèrent cette année comme le point de départ de la programmation par IA. De plus en plus de gens commencent à utiliser l'IA pour écrire du code, mais les résultats restent souvent au stade de prototype -- sans savoir comment organiser un processus de développement avec le Vibe Coding, quels outils choisir, et encore moins quelles étapes clés séparent le prototype de la mise en production.
|
||||
|
||||
Nous adoptons une **approche pratique en trois étapes** : l'étape débutant permet de se familiariser rapidement avec la programmation par IA grâce à des mini-jeux ; la première étape permet de maîtriser le flux de travail du Vibe Coding et de réaliser un prototype d'application Web ; la deuxième étape couvre le développement full-stack et le déploiement en production ; la troisième étape permet de construire des applications complexes multiplateformes.
|
||||
|
||||
Chaque étape est accompagnée d'un projet pratique complet, vous permettant de passer du prototype au produit grâce à des défis concrets, et d'acquérir finalement la capacité à **transformer n'importe quelle idée en une application fonctionnelle**.
|
||||
|
||||
Nous sommes convaincus qu'en maîtrisant le Vibe Coding associé à une formation systématique, vous pouvez devenir à vous seul un **développeur polyvalent, combinant développement front-end et back-end, intégration de capacités IA et conception de produits**.
|
||||
|
||||
Ce projet s'adresse principalement à trois types d'apprenants :
|
||||
|
||||
- **Débutants (grand public / côté produit et operations)** : aider les profils non techniques et les apprenants débutants à comprendre les concepts clés et à réaliser un premier petit outil IA ou prototype de produit.
|
||||
- **Développeurs intermédiaires (étudiants et développeurs ayant quelques bases)** : maîtriser systématiquement le Vibe Coding et le développement d'applications IA natives.
|
||||
- **Développeurs avancés (entreprises et startups, open source et développeurs indépendants)** : accompagner les équipes et les individus dans la création, la validation et l'itération rapide d'applications IA natives.
|
||||
|
||||
## 📖 Navigation du contenu
|
||||
|
||||
### Appendice général
|
||||
|
||||
[Dictionnaire des capacités IA : explication des concepts clés, termes et scénarios courants](/fr-fr/appendix/8-artificial-intelligence/ai-capability-dictionary)
|
||||
|
||||
### Étape 0 : Maternelle
|
||||
|
||||
| Chapitre | Contenu clé | Statut |
|
||||
| :------------------------------------------------------------------------------------- | :------------------------------------- | :--- |
|
||||
| [Guide debutant : carte d'apprentissage](/fr-fr/stage-1/learning-map/) | Aperçu global du parcours d'apprentissage | ✅ |
|
||||
| [Guide debutant : À l'ère de l'IA, savoir parler, c'est savoir coder](/fr-fr/stage-1/ai-capabilities-through-games/) | Découvrir les capacités de la programmation IA grâce à des exemples comme le jeu du serpent | ✅ |
|
||||
|
||||
### Étape 1 : Chef de produit IA
|
||||
|
||||
| Chapitre | Contenu clé | Statut |
|
||||
| :---------------------------------------------------------------------------- | :------------------------------------------------------- | :--- |
|
||||
| [Niveau 1 chapitre 2 : Decouvrir les outils AI IDE](/fr-fr/stage-1/introduction-to-ai-ide/) | Apprendre à utiliser un IDE, maîtriser la structure de l'interface et les méthodes de prompting efficaces | ✅ |
|
||||
| [Niveau 1 chapitre 3 : Creer un prototype](/fr-fr/stage-1/building-prototype/) | De l'analyse produit au prototype multipage, un cycle complet | ✅ |
|
||||
| [Niveau 1 chapitre 4 : Ajouter des capacites IA au prototype](/fr-fr/stage-1/integrating-ai-capabilities/) | Comprendre et intégrer les API de capacités IA courantes (texte, image, vidéo) | ✅ |
|
||||
| [Niveau 1 chapitre 5 : Projet complet pratique](/fr-fr/stage-1/complete-project-practice/) | Simuler des scénarios réels, itérer à partir des retours utilisateurs et finaliser la présentation du projet (projet de fin de parcours inclus) | ✅ |
|
||||
|
||||
#### Annexes
|
||||
|
||||
| Chapitre | Contenu clé | Statut |
|
||||
| :-------------------------------------------------------------------- | :---------------------------------------- | :--- |
|
||||
| [Annexe A : Complement sur la pensee produit](/fr-fr/stage-1/appendix-a-product-thinking/) | Du cadrage des idées à la réflexion produit en passant par le MVP | ✅ |
|
||||
| [Annexe B : Erreurs courantes et solutions](/fr-fr/stage-1/appendix-b-common-errors/) | Erreurs fréquentes en Vibe Coding et méthodes de dépannage | ✅ |
|
||||
| [Annexe : Ou trouver des idees](/fr-fr/stage-1/appendix-idea-sources/) | Identifier des directions à partir d'applications de référence, de tendances et de listes de VC | ✅ |
|
||||
| [Annexe : Le modele Double Diamond](/fr-fr/stage-1/appendix-double-diamond/) | Comprendre le rythme complet : définir d'abord le problème, puis concevoir la solution | ✅ |
|
||||
| [Annexe : Jobs to Be Done](/fr-fr/stage-1/appendix-jobs-to-be-done/) | Utiliser la méthode JTBD pour comprendre ce que l'utilisateur veut vraiment accomplir | ✅ |
|
||||
| [Annexe : The Mom Test - Entretiens utilisateurs](/fr-fr/stage-1/appendix-mom-test/) | Méthode de recherche pour valider les besoins via des entretiens utilisateurs | ✅ |
|
||||
|
||||
### Étape 2 : Développeur intermédiaire
|
||||
|
||||
#### Partie front-end
|
||||
|
||||
| Chapitre | Contenu clé | Statut |
|
||||
| :------------------------------------------------------------------------------------------------------------------ | :--------------------------------------------------------------------------- | :--- |
|
||||
| Utiliser lovart pour produire des ressources | Apprendre à utiliser lovart pour générer en masse des visuels (personnages, décors, etc.), fournissant une base de ressources pour le design UI et le développement front-end | 🚧 |
|
||||
| Introduction à Figma et MasterGo | Utiliser les outils de design pour structurer l'architecture de l'information et la mise en page, posant les bases de l'implémentation front-end | 🚧 |
|
||||
| Construire une premiere application moderne - Design UI | Réaliser une interface basée sur les composants à partir des maquettes, établissant le premier lien entre design et code | 🚧 |
|
||||
| Concevoir des pages et boutons selon les normes UI | Apprendre à organiser la structure des pages et la hiérarchie des boutons selon les standards de design dominants, et utiliser l'IA pour générer des propositions | 🚧 |
|
||||
| [Creer des portraits de Poudlard ensemble](/fr-fr/stage-2/frontend/hogwarts-portraits/) | Créer de A à Z une application front-end intégrant des capacités IA, en combinant design et développement | 🚧 |
|
||||
|
||||
#### Partie back-end
|
||||
|
||||
| Chapitre | Contenu clé | Statut |
|
||||
| :---------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------ | :--- |
|
||||
| Qu'est-ce qu'une API | Comprendre les interfaces HTTP et le modèle requête/réponse, en préparation de l'intégration et des tests back-end | 🚧 |
|
||||
| [De la base de données à Supabase](/fr-fr/stage-2/backend/database-supabase/) | Implémenter une base de données et une API sur Supabase, relier le modèle de données aux pages front-end | 🚧 |
|
||||
| Rediger du code d'interface et de la documentation assistee par LLM | Utiliser les LLM pour générer du code d'interface et de la documentation de base de données, réalisant un back-end lisible et testable | 🚧 |
|
||||
| Flux de travail Git et deploiement Zeabur | Gérer le code avec un flux Git et déployer l'application sur Zeabur pour la mise en production | 🚧 |
|
||||
| Outils de développement CLI modernes | Utiliser les outils CLI de programmation IA pour accélérer le développement et le débogage, et établir un flux de travail personnel industrialisé | 🚧 |
|
||||
| Comment integrer un systeme de paiement comme stripe | Intégrer un système de paiement et compléter le circuit de facturation et le processus de règlement de base | 🚧 |
|
||||
| Construire une premiere application moderne - Application full-stack | Combiner front-end, back-end et module de paiement pour livrer une application Web full-stack déployable | 🚧 |
|
||||
| Bibliotheque de composants front-end modernes + Trae en pratique | Utiliser une bibliothèque de composants front-end modernes et Trae pour réaliser de manière autonome un produit avec connexion/inscription et support de paiement | 🚧 |
|
||||
|
||||
#### Appendice capacites IA
|
||||
|
||||
| Chapitre | Contenu clé | Statut |
|
||||
| :-------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------- | :--- |
|
||||
| [Introduction à Dify et integration de base de connaissances](/fr-fr/stage-2/ai-capabilities/dify-knowledge-base/) | Créer un produit de type outil avec Dify Workflow et un RAG basique, en préparation des évolutions futures de l'application | 🚧 |
|
||||
| Apprendre à consulter le dictionnaire IA et integrer des API multimodales | Apprendre à trouver les modèles et API appropriés, et intégrer les capacités multimodales (texte, image, etc.) dans le produit | 🚧 |
|
||||
|
||||
### Étape 3 : Développeur avancé
|
||||
@@ -0,0 +1 @@
|
||||
../../../../zh-cn/stage-1/ai-capabilities-through-games/images
|
||||
@@ -0,0 +1,679 @@
|
||||
# Niveau 1 : À l'ère de l'IA, savoir parler, c'est savoir programmer
|
||||
|
||||
Ceci est un tutoriel basé sur l'<strong>apprentissage par projet</strong>. Nous vous encourageons à suivre les étapes une par une et à essayer de reproduire les résultats.
|
||||
Ne craignez pas de faire des erreurs ou de modifier le contenu, nous croyons toujours que vous pouvez y arriver. N'oubliez jamais :
|
||||
|
||||
<div style="text-align: center;">
|
||||
<div style="display: inline-block; padding: 8px 20px; border-radius: 8px; border: 1px dashed #FFB6C1; background: linear-gradient(135deg, #FFF0F5 0%, #FFE4EC 100%); margin: 12px 0;">
|
||||
<span style="font-size: 15px; font-weight: 500; color: #666;">Terminer vaut mieux que parfait 🐣</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script setup>
|
||||
import { relatedArticlesMap } from '@theme/data/relatedArticles'
|
||||
|
||||
const duration = 'Environ <strong>4 heures</strong>, réalisables en plusieurs sessions'
|
||||
const relatedArticles =
|
||||
relatedArticlesMap['zh-cn/stage-1/ai-capabilities-through-games'] ?? []
|
||||
</script>
|
||||
|
||||
## Introduction du chapitre
|
||||
|
||||
<ChapterIntroduction :duration="duration" :tags="['Programmation conversationnelle par IA', 'Mini-jeu IA-native', 'Projet pratique : Snake']" coreOutput="Snake IA-native + mini-jeu original" expectedOutput="1 Snake IA-native fonctionnel + (optionnel) 1 mini-jeu ou démo IA-native de votre création">
|
||||
|
||||
Si vous <strong>ne savez absolument pas programmer</strong>, ou que vous ne connaissez que les bases, ce chapitre est fait pour vous. Nous commencerons par les fondamentaux : utiliser la <strong>conversation</strong> pour demander à l'IA d'écrire du code, sans avoir besoin de mémoriser la syntaxe, de configurer un environnement, et en faisant tourner le tout directement dans le navigateur.
|
||||
|
||||
Vous créerez de vos propres mains <strong>votre premier programme fonctionnel</strong> — un jeu de Snake qui « mange des mots, écrit des poèmes et dessine ». À travers ce projet pratique, vous découvrirez ce que signifie vraiment la programmation par IA : ce n'est pas l'IA qui pense à votre place, c'est vous qui exprimez vos idées et l'IA qui les réalise.
|
||||
|
||||
Toute création commence par un passage de 0 à 1, et nous sommes ravis de transmettre confiance et expertise à chaque étape. Pour vous, <strong>l'exécution is all you need</strong>.
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="0" :items="[
|
||||
{ title: 'Défis et opportunités', description: 'Les nouvelles possibilités pour tous' },
|
||||
{ title: 'Premier contact', description: 'Développement express en 60 secondes' },
|
||||
{ title: 'Projet pratique', description: 'Créer un Snake IA-native' },
|
||||
{ title: 'Explorer et créer', description: 'Réinventer le jeu' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 1. Le défi et l'opportunité pour les non-programmeurs
|
||||
|
||||
Beaucoup de gens ont la tête pleine d'idées de produits : un petit outil pour gérer ses comptes, une page web pour suivre la croissance de leur enfant, voire un mini-jeu. Mais dès qu'ils pensent au code à écrire, au développeur à trouver, ils abandonnent tout de suite.
|
||||
|
||||
Depuis l'apparition de l'IA, une toute nouvelle possibilité s'est offerte pour la première fois aux non-techniciens : vous n'avez pas besoin de savoir coder, il vous suffit de savoir exprimer clairement à l'IA ce que vous voulez. Les [données de GitHub Copilot](https://www.wearetenet.com/blog/github-copilot-usage-data-statistics) montrent que plus de 15 millions de développeurs utilisent déjà l'IA pour les aider à coder, et qu'en moyenne 46 % du code est généré par l'IA ! Sur les projets Java, cette proportion atteint 61 %.
|
||||
|
||||
<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
|
||||
<template #header>
|
||||
<div style="display: flex; align-items: center; gap: 8px;">
|
||||
<span style="font-size: 20px;">🚀</span>
|
||||
<span style="font-weight: bold; font-size: 16px;">Bond en efficacité et taux d'adoption</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-row :gutter="20" style="margin-bottom: 24px;">
|
||||
<el-col :span="6" :xs="12">
|
||||
<div style="text-align: center; padding: 10px;">
|
||||
<div style="color: #409EFF; font-size: 24px; font-weight: bold;">55 %</div>
|
||||
<div style="color: #909399; font-size: 12px; margin-top: 4px;">Gain de vitesse</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6" :xs="12">
|
||||
<div style="text-align: center; padding: 10px;">
|
||||
<div style="color: #67C23A; font-size: 24px; font-weight: bold;">2,4 <span style="font-size: 14px;">jours</span></div>
|
||||
<div style="color: #909399; font-size: 12px; margin-top: 4px;">Durée des tâches (contre 9,6 jours)</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6" :xs="12">
|
||||
<div style="text-align: center; padding: 10px;">
|
||||
<div style="color: #E6A23C; font-size: 24px; font-weight: bold;">81 %</div>
|
||||
<div style="color: #909399; font-size: 12px; margin-top: 4px;">Taux d'installation dès le premier jour</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6" :xs="12">
|
||||
<div style="text-align: center; padding: 10px;">
|
||||
<div style="color: #F56C6C; font-size: 24px; font-weight: bold;">96 %</div>
|
||||
<div style="color: #909399; font-size: 12px; margin-top: 4px;">Taux d'adoption des suggestions</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<div style="line-height: 1.8; color: #606266;">
|
||||
Ce qui est vraiment excitant, c'est le bond en efficacité : la vitesse à laquelle les développeurs accomplissent leurs tâches a augmenté de <b>55 %</b>. Ce qui prenait 9,6 jours à livrer ne nécessite plus que <b>2,4 jours</b>. Cette amélioration visible montre que l'IA n'est plus un « outil optionnel », mais un assistant de programmation devenu indispensable dans le flux de développement. Les chiffres d'adoption le confirment : le jour même où ils ont obtenu l'accès, <b>81 %</b> des développeurs l'ont installé et commencé à l'utiliser immédiatement ; parmi eux, <b>96 %</b> ont adopté les suggestions de code dès le premier jour. En d'autres termes, les développeurs ont quasi instantanément intégré l'IA dans leur travail quotidien.
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
Pour les non-programmeurs, cette tendance est encore plus significative : si les développeurs professionnels s'appuient massivement sur l'IA pour coder, <strong>pourquoi ne pas simplement discuter avec l'IA pour concrétiser nos propres idées ?</strong>
|
||||
|
||||
L'objectif de ce cours est de vous former à une nouvelle compétence : créer des applications grâce au dialogue en langage naturel. Nous vous apprendrons à communiquer avec l'IA dans le langage des ordinateurs, et comment la laisser transformer vos idées en produits réels et utilisables.
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="1" :items="[
|
||||
{ title: 'Défis et opportunités', description: 'Les nouvelles possibilités pour tous' },
|
||||
{ title: 'Premier contact', description: 'Développement express en 60 secondes' },
|
||||
{ title: 'Projet pratique', description: 'Créer un Snake IA-native' },
|
||||
{ title: 'Explorer et créer', description: 'Réinventer le jeu' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 2. Jusqu'où l'IA peut-elle vous aider ?
|
||||
|
||||
Dans cette section, nous n'aborderons qu'une seule question : si vous ne savez pas coder du tout, jusqu'où l'IA actuelle peut-elle vous aider ?
|
||||
|
||||
Globalement, vous pouvez comprendre les capacités des modèles actuels comme suit : ils sont capables de développer des <strong>outils internes simples</strong>, des <strong>tableaux de bord de data visualisation</strong>, ainsi que quelques <strong>mini-jeux légers</strong>. Ces capacités suffisent pour créer des <strong>outils personnels</strong> et <strong>valider des besoins du point de vue produit</strong>. Mais si vous espérez générer en un clic un <strong>produit commercial mature</strong>, il faudra généralement encore un travail humain pour <strong>la conception du flux</strong>, <strong>le polissage des détails</strong>.
|
||||
|
||||
Voyons concrètement, avec l'exemple du jeu de Snake, ce que la programmation par IA peut accomplir aujourd'hui.
|
||||
|
||||
### 2.1 Créer un Snake en 60 secondes
|
||||
|
||||
Commencez par ouvrir la page expérimentale utilisée dans ce cours : [z.ai](https://chat.z.ai/). `z.ai` est une plateforme IA développée par Zhipu AI (l'une des principales entreprises chinoises de grands modèles de langage), dont les capacités sont fournies par la série de modèles GLM développée en interne. La plateforme intègre plusieurs fonctionnalités IA, notamment la génération de diapositives, la conception d'affiches et le développement full-stack. Dans ce tutoriel, nous nous concentrerons sur l'utilisation du module de développement full-stack.
|
||||
|
||||
::: details 💡 Qu'est-ce que le nouveau mode « coder dans le navigateur » ?
|
||||
|
||||
Autrefois, développer une application web nécessitait :
|
||||
- Installer un environnement de programmation (Python, Node.js, etc.)
|
||||
- Configurer un éditeur de code
|
||||
- Apprendre HTML/CSS/JavaScript
|
||||
- Gérer les dépendances et les erreurs
|
||||
|
||||
Maintenant, grâce aux plateformes de programmation par IA, il vous suffit de :
|
||||
- Ouvrir votre navigateur et accéder à la page
|
||||
- Décrire ce que vous voulez en langage naturel
|
||||
- L'IA génère le code et affiche un aperçu en temps réel
|
||||
|
||||
Ce mode « dialoguer pour coder » transforme la programmation : au lieu « d'écrire du code », vous « décrivez vos besoins ». Vous n'avez pas besoin de comprendre les détails techniques, il vous suffit d'expliquer clairement à l'IA ce que vous souhaitez, et elle transforme vos idées en un programme fonctionnel. C'est le nouveau paradigme de la programmation à l'ère de l'IA — le <strong>Vibe Coding</strong>.
|
||||
:::
|
||||
|
||||
|
||||
|
||||
Après avoir saisi vos besoins et cliqué sur le bouton **Développement full-stack**, vous pouvez observer en temps réel le processus complet de création de la page. En général, le temps de préparer un café suffit pour que la page soit générée automatiquement !
|
||||
|
||||
```
|
||||
Crée-moi un jeu de Snake :
|
||||
1. Contrôler le serpent avec les flèches directionnelles
|
||||
2. Le serpent grandit et le score augmente quand il mange la nourriture
|
||||
3. Le jeu se termine si le serpent heurte un mur ou son propre corps
|
||||
4. Il faut des boutons Démarrer et Recommencer
|
||||
5. L'interface doit être simple et élégante
|
||||
```
|
||||
|
||||
|
||||
|
||||
Une fois la génération terminée, vous verrez apparaître à droite une interface navigable. Vous pouvez faire défiler la page ou cliquer sur le bouton 🧭 en haut à droite pour passer en mode plein écran.
|
||||
|
||||
> Les boutons de gauche à droite ont les fonctions suivantes : le bouton flèche ouvre la barre latérale de l'historique des conversations, le bouton crayon crée une nouvelle conversation, le bouton flèche circulaire rafraîchit la page, le bouton boussole bascule en mode plein écran, le bouton Download télécharge le projet, le bouton <> bascule vers la vue code, et le bouton Publish publie le projet.
|
||||
|
||||
|
||||
|
||||
Si vous souhaitez consulter le code source de la page, cliquez sur l'icône de code en haut à droite pour voir le code complet.
|
||||
|
||||
|
||||
|
||||
::: tip 🌐 Explorer d'autres outils de programmation par IA
|
||||
|
||||
Outre z.ai, nous vous recommandons également d'essayer les plateformes suivantes :
|
||||
|
||||
| Outil | Adresse | Caractéristiques |
|
||||
|------|---------|-----------------|
|
||||
| **Google AI Studio** (recommandé) | [aistudio.google.com/apps](https://aistudio.google.com/apps) | Proposé par Google, avec le modèle Gemini, idéal pour le prototypage rapide |
|
||||
| **Figma Make** | [figma.com/make](https://www.figma.com/make) | Intégré à l'outil de design, adapté aux designers pour des prototypes interactifs |
|
||||
| **Coze** | [coze.com](https://www.coze.cn) | Plateforme de création de bots IA par ByteDance, développement sans code, intégration avec Doubao, Kimi et d'autres modèles chinois |
|
||||
| **v0.dev** | [v0.dev](https://v0.dev) | Outil de génération d'UI par Vercel, génère des composants React fonctionnels à partir d'une description |
|
||||
| **Bolt.new** | [bolt.new](https://bolt.new) | Plateforme de développement full-stack par StackBlitz, génère et déploie des applications web complètes |
|
||||
| **Lovable** | [lovable.dev](https://lovable.dev) | Spécialisé dans les applications React de haute qualité, avec intégration GitHub et déploiement en un clic |
|
||||
| **Replit Agent** | [replit.com](https://replit.com) | IDE en ligne avec assistant de programmation IA, supporte plusieurs langages et collaboration en temps réel |
|
||||
|
||||
Pour en savoir plus sur la comparaison détaillée des outils de programmation en ligne, consultez notre lecture complémentaire : [Comparaison de 7 plateformes Vibe Coding](../../stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md)
|
||||
:::
|
||||
|
||||
### 2.2 Ce que la programmation conversationnelle peut et ne peut pas faire
|
||||
|
||||
Cette section se concentre sur une question précise : lorsque vous dépendez uniquement d'une IA conversationnelle, sans écrire aucune ligne de code, jusqu'où pouvez-vous réellement aller ?
|
||||
|
||||
En pratique, une conclusion relativement stable est la suivante : elle peut vous aider à réaliser quelque chose de « petit mais complet », mais la notion de « suffisant » reste à votre appréciation à chaque étape.
|
||||
|
||||
#### Plus performant pour les applications « petites et claires »
|
||||
|
||||
À partir de l'exemple du Snake ci-dessus, vous avez déjà observé un schéma typique : tant que vous pouvez décrire clairement l'interface et les interactions, l'IA peut généralement, en quelques tours de conversation, assembler une page web complète, navigable et jouable.
|
||||
|
||||
Ce type de tâche présente souvent plusieurs caractéristiques communes :
|
||||
|
||||
- Périmètre clair : une page web, un outil interne simple, un petit jeu
|
||||
- Résultat visible : vous pouvez immédiatement vérifier dans le navigateur si cela fonctionne comme prévu
|
||||
- Correction directe : en cas de problème, vous pouvez le signaler dans la conversation suivante et demander une correction (en copiant l'erreur ou en envoyant une capture d'écran à l'IA)
|
||||
|
||||
Dans ces limites, vous pouvez considérer l'IA conversationnelle comme un « développeur assistant » efficace. Il vous suffit d'affiner et de corriger les besoins à chaque tour en langage naturel pour obtenir rapidement un prototype utilisable.
|
||||
|
||||
**Taux de réussite de l'IA pour les petits projets :**
|
||||
<el-progress :percentage="90" :stroke-width="15" status="success" striped striped-flow />
|
||||
|
||||
#### Les grands projets nécessitent une « vision de flux »
|
||||
|
||||
Dès que vous dépassez le cadre des applications petites et claires, espérer qu'une IA termine un système complexe de bout en bout en quelques conversations atteint vite ses limites. Les grands projets impliquent souvent un backend, une base de données, l'intégration de services tiers, ainsi que des questions de permissions, de sécurité, de concurrence et de nombreuses règles métier, avec pour objectif de livrer un système complet intégré aux opérations existantes, et non une simple page web.
|
||||
|
||||
Dans ce cas, l'approche la plus raisonnable n'est pas de tout jeter à l'IA d'un coup, mais de commencer par cartographier clairement le flux global : quelles sont les étapes clés, quelles sont les entrées/sorties et les changements d'état à chaque étape, quels nœuds sont les plus sensibles en termes de performance et de sécurité. Ensuite, sur la base de ce diagramme de flux, séparer les étapes relativement indépendantes et les confier à l'IA conversationnelle pour générer des interfaces, des modules, des scripts et des tests.
|
||||
|
||||
Avec les capacités actuelles, l'IA est plus performante pour accélérer une série de petites étapes, tandis que vous (ou votre équipe) décidez comment les découper, les enchaîner, et vous chargez de l'architecture, de l'intégration système et de la maintenance.
|
||||
|
||||
#### La différence entre « écrire » et « utiliser »
|
||||
|
||||
À première vue, l'IA semble capable de tout faire, mais dans la pratique, jusqu'où ces résultats sont-ils réellement utilisables ?
|
||||
|
||||
Une référence utile est la suivante :
|
||||
|
||||
::: warning ⚠️ Guide des scénarios d'utilisation
|
||||
|
||||
- **Prototype / Démo / Outil interne** : très adapté pour confier à l'IA la première version, puis itérer les détails vous-même.
|
||||
- **Produit grand public** : nécessite généralement un investissement continu de la part d'ingénieurs sur l'architecture, l'abstraction, les performances et la maintenance.
|
||||
- **Systèmes critiques / fortement réglementés (paiement, contrôle des risques, santé, etc.)** : à ce stade, il ne faut pas « déployer directement après génération » ; un processus strict de revue et de test est indispensable.
|
||||
:::
|
||||
|
||||
À l'heure actuelle, vous pouvez relativement sereinement considérer l'IA comme un partenaire efficace pour les démos et les outils internes : tant que vous êtes prêt à tester, itérer et poser des questions supplémentaires (« c'est faux ici, corrige et explique pourquoi »), la qualité globale au niveau prototype et outil interne est généralement suffisante et pertinente.
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="2" :items="[
|
||||
{ title: 'Défis et opportunités', description: 'Les nouvelles possibilités pour tous' },
|
||||
{ title: 'Premier contact', description: 'Développement express en 60 secondes' },
|
||||
{ title: 'Projet pratique', description: 'Créer un Snake IA-native' },
|
||||
{ title: 'Explorer et créer', description: 'Réinventer le jeu' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 3. Pratique : votre première application IA-native
|
||||
|
||||
Revenons à la pratique. Dans la partie précédente, nous avons rapidement créé un prototype jouable de Snake avec l'IA, et nous avons compris ce que l'IA peut et ne peut pas faire. Nous allons maintenant apprendre à utiliser les techniques de base du <strong>vibe coding</strong> pour créer un jeu de Snake <strong>moderne</strong> version IA-native. Nous allons faire en sorte que le serpent mange des caractères textuels au lieu de haricots. Enfin, le jeu générera un poème d'après les mots mangés, puis dessinera une image.
|
||||
À travers ce cas concret, vous comprendrez le concept fondamental de ce nouveau mode de programmation : comment exprimer clairement vos besoins en langage naturel.
|
||||
|
||||
### 3.1 Snake IA-native
|
||||
|
||||
Au début, nous pouvons dialoguer avec le modèle de la manière la plus simple possible, ce qui nous aidera à obtenir rapidement un prototype de produit. Nous pouvons saisir directement dans la boîte de dialogue :
|
||||
|
||||
> **💡 Exemple de prompt :** Crée-moi un jeu de Snake
|
||||
>
|
||||
> 
|
||||
|
||||
> **💡 Exemple de prompt :** Crée-moi un jeu de Snake qui supporte :
|
||||
>
|
||||
> 1. Je peux manger différents mots, ils seront collectés dans une boîte
|
||||
> 
|
||||
|
||||
> **💡 Exemple de prompt :** Crée-moi un jeu de Snake qui supporte :
|
||||
>
|
||||
> 1. Je peux manger différents mots, ils seront collectés dans une boîte
|
||||
> 2. Quand le serpent a mangé 8 mots, le LLM doit créer un poème à partir de ces mots, et nous pouvons le remixer selon nos besoins.
|
||||
> 3. Une fois le poème terminé, l'étape suivante créera automatiquement une image basée sur ce poème.
|
||||
>
|
||||
> 
|
||||
|
||||
Notez que pendant le développement, vous pouvez rencontrer des problèmes : boutons sans réaction, erreurs lors de l'utilisation de fonctionnalités, comportement inattendu, ou interface qui ne correspond pas au design attendu.
|
||||
|
||||
Dans ce cas, vous devez poser des questions supplémentaires au modèle pour l'aider à résoudre ces problèmes imprévus.
|
||||
|
||||
|
||||
|
||||
### 3.2 Ajouter de nouvelles fonctionnalités au jeu
|
||||
|
||||
Une fois les fonctionnalités de base terminées, vous pouvez essayer d'ajouter des nouveautés à votre programme ! Si vous trouvez que le fait que le serpent mange des mots ou des caractères est un peu ennuyeux, vous pouvez faire manger des mots de différentes couleurs au serpent et changer sa couleur en conséquence.
|
||||
|
||||
Vous pouvez également ajouter des effets spéciaux au processus de « mangeage », ou introduire des « mots magiques » qui déclenchent des effets — par exemple en augmentant la vitesse ou la taille du serpent. Une autre idée est de faire générer un poème et une image par le modèle à chaque fois que le serpent mange un mot, plutôt que d'attendre qu'il en mange huit.
|
||||
|
||||
Si cela vous semble trop difficile, vous pouvez demander directement au modèle de langage de l'aide ! Il peut fournir des suggestions créatives pour rendre votre jeu plus amusant. Essayez !
|
||||
|
||||
```
|
||||
1. Mécanique "Les mots déverrouillent des mondes"
|
||||
Chaque fois que le serpent mange un mot, le LLM fait une association poétique (par exemple, "arbre" → "forêt", "ombrage"), et le modèle d'image génère instantanément une petite œuvre d'art pour ce mot. Ces images s'assemblent progressivement en un panorama unique créé par le joueur.
|
||||
|
||||
2. Jouabilité "Puzzle poétique"
|
||||
Chaque mot mangé par le serpent déclenche la génération d'un vers court par le LLM et une illustration par le modèle d'image. Ces vers et images se combinent comme un puzzle pour former, à la fin de la partie, un poème et un tableau collaboratifs avec l'IA.
|
||||
|
||||
3. "Mots magiques" et "Branches narratives"
|
||||
Des "mots magiques" spéciaux (par exemple, "vent", "nuit", "rêve") ne déclenchent pas seulement de la poésie, mais changent aussi l'ambiance ou le thème — transformant le style de l'image générée en nocturne, tempête ou ambiance onirique.
|
||||
|
||||
4. "Génération en temps réel"
|
||||
Après chaque mot, le LLM génère une ligne de dialogue ou de description, un NPC dans le jeu peut "parler" au joueur, ou l'environnement change en conséquence.
|
||||
|
||||
5. "Créer et partager"
|
||||
Les joueurs peuvent sauvegarder et partager leurs poèmes et images créés par l'IA à la fin de la session.
|
||||
|
||||
6. "Snake par phrase" — mode inversé
|
||||
Le LLM donne un vers ou une énigme, le joueur doit guider le serpent pour manger les mots dans le bon ordre pour reconstituer la phrase.
|
||||
|
||||
7. "Niveaux thématiques" et "Sélection de style"
|
||||
Au début, le joueur choisit un thème (par exemple, "conte de fées", "science-fiction", "poésie Tang"), et le LLM ainsi que le modèle d'image adaptent les mots, le style poétique et les effets visuels en conséquence.
|
||||
|
||||
8. "Co-création en direct"
|
||||
Quand un mot spécial est mangé, le LLM peut inviter le joueur à saisir une phrase ou à choisir un style, puis l'IA génère les vers et illustrations correspondants.
|
||||
|
||||
9. "Easter eggs IA" et "Succès"
|
||||
Certaines combinaisons de mots sont identifiées par le LLM comme des thèmes spéciaux, déclenchant des vers et illustrations rares.
|
||||
|
||||
10. "Histoire qui grandit"
|
||||
Au fil de la croissance du serpent, le LLM génère un poème narratif continu, et le modèle d'image crée un long parchemin panoramique.
|
||||
```
|
||||
|
||||
De plus, nous pouvons demander au LLM de générer directement un prompt de niveau projet. Dans la section précédente, nous n'avons écrit nous-mêmes que le prompt du Snake. Maintenant, essayons de demander au modèle de générer un prompt avec un cadre d'ensemble et un chemin de réalisation (vous pouvez utiliser z.ai directement).
|
||||
|
||||
Si vous souhaitez apprendre à écrire de meilleurs prompts, consultez [l'annexe sur le Prompt Engineering](/zh-cn/appendix/8-artificial-intelligence/prompt-engineering).
|
||||
|
||||
> Je veux que l'IA génère un jeu de Snake en page web, avec un prompt plus complet pour un résultat plus impressionnant et amusant. Génère le prompt correspondant. L'objectif actuel : créer un jeu de Snake avec la fonctionnalité de génération de poèmes à partir de mots mangés, incluant un module de génération d'images.
|
||||
|
||||
La réponse de z.ai ressemblera à ceci :
|
||||
|
||||
|
||||
|
||||
Nous pouvons utiliser ce prompt en mode développement full-stack pour régénérer le projet :
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="3" :items="[
|
||||
{ title: 'Défis et opportunités', description: 'Les nouvelles possibilités pour tous' },
|
||||
{ title: 'Premier contact', description: 'Développement express en 60 secondes' },
|
||||
{ title: 'Projet pratique', description: 'Créer un Snake IA-native' },
|
||||
{ title: 'Explorer et créer', description: 'Réinventer le jeu' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
### 3.3 Essayer de créer d'autres mini-jeux
|
||||
|
||||
Outre le Snake, nous pouvons laisser libre cours à notre imagination.
|
||||
|
||||
Créer tout ce que nous voulons, même essayer de tout casser ! Puis recommencer à zéro !
|
||||
|
||||
```
|
||||
1. Galerie d'art IA
|
||||
Description : une galerie en ligne présentant des œuvres d'art générées par IA, avec upload, partage et commentaires.
|
||||
Fonctionnalités : comptes utilisateurs, upload et affichage d'œuvres, système de notation, navigation par catégorie, intégration d'outils de génération IA.
|
||||
|
||||
2. Archives de jeux rétro
|
||||
Description : un site rendant hommage aux jeux classiques, avec historique, guides de jeu et jeux rétro jouables en ligne.
|
||||
|
||||
3. Suivi de vie durable
|
||||
Description : un site aidant à suivre et réduire l'empreinte carbone grâce à des conseils écologiques et des défis communautaires.
|
||||
|
||||
4. Assistant culinaire virtuel
|
||||
Description : une plateforme de cuisine assistée par IA avec recommandations de recettes personnalisées et instructions étape par étape.
|
||||
|
||||
5. Plateforme de découverte musicale underground
|
||||
Description : un service de streaming musical centré sur les artistes indépendants et émergents.
|
||||
|
||||
6. Gestionnaire de tâches minimaliste
|
||||
Description : un outil de gestion de tâches avec une esthétique zen, axé sur la simplicité et l'efficacité.
|
||||
|
||||
7. Atelier d'écriture science-fiction
|
||||
Description : une plateforme offrant des outils créatifs et de l'inspiration aux écrivains de SF, incluant la construction d'univers et le développement de personnages.
|
||||
|
||||
8. Graphe de connaissances personnel
|
||||
Description : un outil permettant de construire un réseau de connaissances personnel, avec visualisation et connexion d'idées.
|
||||
|
||||
9. Jardin botanique virtuel
|
||||
Description : une encyclopédie interactive des plantes où les utilisateurs peuvent explorer le monde végétal et créer un jardin virtuel.
|
||||
|
||||
10. Arène de défis de programmation
|
||||
Description : une plateforme de compétition en ligne pour programmeurs avec des défis de différents niveaux de difficulté.
|
||||
```
|
||||
|
||||
Et aussi... si vous aimez les jeux, essayons ensemble d'en créer !
|
||||
|
||||
```
|
||||
1. RPG monde ouvert 3D
|
||||
2. FPS arène multijoueur
|
||||
3. Échecs IA et multijoueur
|
||||
4. Mahjong en ligne multijoueur
|
||||
5. Jeu de stratégie au tour par tour
|
||||
6. Course automobile contre la montre
|
||||
7. Jeu de cartes à collectionner
|
||||
8. Battle royale (vue 2D du dessus)
|
||||
9. Jeu d'horreur survival (vue à la première personne)
|
||||
10. Jeu de rythme musical (3D)
|
||||
```
|
||||
|
||||
## 📚 Devoir
|
||||
|
||||
<el-card id="assignment-card" shadow="hover" style="margin: 20px 0; border-radius: 12px;">
|
||||
<template #header>
|
||||
<div style="font-weight: bold; font-size: 16px;">🎯 Devoir du chapitre : réaliser vos premiers mini-jeux IA-native</div>
|
||||
</template>
|
||||
|
||||
<p>
|
||||
Dans cette section, vous avez suivi les étapes du processus complet : de la « génération conversationnelle d'un Snake » à la « compréhension des principes de conception d'un mini-jeu IA-native ». Le devoir ci-dessous vous aide à transformer cette compréhension en compétence réelle.
|
||||
</p>
|
||||
|
||||
<ol>
|
||||
<li>
|
||||
<strong>Reproduire intégralement le jeu de Snake IA-native</strong>
|
||||
<ul>
|
||||
<li>Au minimum : le serpent peut se déplacer, sa longueur et son score changent quand il mange de la « nourriture », et le jeu se termine s'il heurte un mur ou son propre corps.</li>
|
||||
<li>Lors de la reproduction, pratiquez en envoyant à l'IA le phénomène erroné + le message d'erreur + l'extrait de code clé, en demandant une correction en « mode débutant ».</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<strong>(Optionnel) Créer 1 mini-jeu ou démo IA-native original</strong>
|
||||
<ul>
|
||||
<li>Il peut s'agir de n'importe quel gameplay léger autour de texte, images, musique, rythme, etc.</li>
|
||||
<li>L'important n'est pas la qualité visuelle, mais de pouvoir expliquer clairement : en quoi l'IA vous a concrètement aidé, et ce qu'elle a résolu de « difficile ou fastidieux à faire manuellement ».</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<p>
|
||||
Voilà pour le tutoriel complet ! Il vous faudra peut-être <strong>4 heures</strong> pour terminer tout le contenu et construire votre propre jeu de Snake. Ne vous pressez pas — explorez, expérimentez et profitez du processus. Si vous rencontrez des concepts difficiles à comprendre, n'hésitez pas à consulter les annexes ci-dessous.
|
||||
</p>
|
||||
</el-card>
|
||||
|
||||
## Annexes
|
||||
|
||||
<el-card id="appendix-nav" shadow="hover" style="margin-top: 24px; margin-bottom: 24px; border-left: 5px solid #67C23A;">
|
||||
<div style="font-weight: bold; margin-bottom: 8px;">Navigation des annexes</div>
|
||||
<div style="color: #606266; font-size: 14px; line-height: 1.6; margin-bottom: 12px;">
|
||||
Voici quelques concepts de base liés à ce chapitre : si vous rencontrez des questions comme « qu'est-ce que le frontend ? » ou « qu'est-ce que le Vibe Coding ? », vous pouvez revenir ici à tout moment.
|
||||
</div>
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="12">
|
||||
<a href="#appendix-1" style="text-decoration: none; color: inherit;"><b>Annexe 1 : Avons-nous besoin de connaissances en développement frontend ?</b></a><br/>
|
||||
<span style="font-size: 12px; color: #909399">Comprendre la place du frontend dans une application, savoir ce qui est « visible ».</span>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<a href="#appendix-2" style="text-decoration: none; color: inherit;"><b>Annexe 2 : Qu'est-ce que le Vibe Coding exactement ?</b></a><br/>
|
||||
<span style="font-size: 12px; color: #909399">Comprendre les principes du « développement conversationnel » et comment collaborer avec l'IA.</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="16" style="margin-top: 10px;">
|
||||
<el-col :span="12">
|
||||
<a href="#appendix-3" style="text-decoration: none; color: inherit;"><b>Annexe 3 : Contexte des modèles</b></a><br/>
|
||||
<span style="font-size: 12px; color: #909399">Clarifier les concepts souvent entendus mais facilement confondus comme la « longueur de contexte ».</span>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<a href="#appendix-4" style="text-decoration: none; color: inherit;"><b>Annexe 4 : Capacité de suivi des instructions</b></a><br/>
|
||||
<span style="font-size: 12px; color: #909399">Comprendre pourquoi le modèle « ne comprend pas » parfois, et comment écrire plus clairement.</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div style="margin-top: 12px; font-size: 12px; color: #909399;">
|
||||
Astuce : vous pouvez utiliser Ctrl/⌘+F pour rechercher des mots-clés, ou copier les passages que vous ne comprenez pas et les donner à l'IA en lui demandant de les réexpliquer « de façon compréhensible pour un vrai débutant ».
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
## <span id="appendix-1">[Annexe 1 : Avons-nous besoin de connaissances en développement frontend ?](#appendix-nav)</span>
|
||||
|
||||
::: tip 💡 En résumé
|
||||
Vous n'avez pas besoin de savoir coder, mais connaître les concepts de base vous aidera à mieux décrire vos besoins à l'IA.
|
||||
:::
|
||||
|
||||
<el-row :gutter="16" style="margin: 20px 0;">
|
||||
<el-col :span="12" :xs="24" style="margin-bottom: 16px;">
|
||||
<el-card shadow="hover" style="border-radius: 12px; height: 100%;">
|
||||
<template #header>
|
||||
<div style="display: flex; align-items: center; gap: 8px;">
|
||||
<span style="font-size: 20px;">👁️</span>
|
||||
<span style="font-weight: bold;">Frontend</span>
|
||||
<el-tag type="success" size="small">Visible</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
<div style="color: #606266; line-height: 1.8;">
|
||||
Tout ce que l'utilisateur peut <strong>voir et cliquer</strong>
|
||||
<ul style="margin: 12px 0; padding-left: 20px;">
|
||||
<li>Titres, textes, images de la page</li>
|
||||
<li>Boutons, champs de saisie, menus déroulants</li>
|
||||
<li>Interface de jeu, animations</li>
|
||||
</ul>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="12" :xs="24" style="margin-bottom: 16px;">
|
||||
<el-card shadow="hover" style="border-radius: 12px; height: 100%;">
|
||||
<template #header>
|
||||
<div style="display: flex; align-items: center; gap: 8px;">
|
||||
<span style="font-size: 20px;">⚙️</span>
|
||||
<span style="font-weight: bold;">Backend</span>
|
||||
<el-tag type="info" size="small">Invisible</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
<div style="color: #606266; line-height: 1.8;">
|
||||
Traitement des données sur le serveur
|
||||
<ul style="margin: 12px 0; padding-left: 20px;">
|
||||
<li>Stockage des scores</li>
|
||||
<li>Vérification de connexion</li>
|
||||
<li>Attribution des niveaux</li>
|
||||
</ul>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
### La trinité du frontend
|
||||
|
||||
Le navigateur construit les pages à partir de trois types de « code » :
|
||||
|
||||
<el-tabs type="border-card" style="margin: 20px 0;">
|
||||
<el-tab-pane label="🏗️ HTML - La structure">
|
||||
<div style="padding: 10px;">
|
||||
<p><strong>Rôle :</strong> Définir <strong>quels éléments</strong> se trouvent sur la page</p>
|
||||
<p><strong>Analogie :</strong> Le plan de la maison (où sont les murs, les portes, les fenêtres)</p>
|
||||
<el-card style="background: #f5f7fa; margin-top: 12px;">
|
||||
<pre style="margin: 0;"><code><button>Cliquez ici</button>
|
||||
<h1>Titre</h1>
|
||||
<img src="photo.png"></code></pre>
|
||||
</el-card>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="🎨 CSS - Le style">
|
||||
<div style="padding: 10px;">
|
||||
<p><strong>Rôle :</strong> Contrôler <strong>l'apparence</strong> des éléments</p>
|
||||
<p><strong>Analogie :</strong> La décoration de la maison (couleurs, matériaux, agencement)</p>
|
||||
<el-card style="background: #f5f7fa; margin-top: 12px;">
|
||||
<pre style="margin: 0;"><code>button {
|
||||
background: blue;
|
||||
color: white;
|
||||
border-radius: 8px;
|
||||
}</code></pre>
|
||||
</el-card>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="⚡ JavaScript - Le comportement">
|
||||
<div style="padding: 10px;">
|
||||
<p><strong>Rôle :</strong> Rendre la page <strong>interactive</strong></p>
|
||||
<p><strong>Analogie :</strong> L'électricité de la maison (la réponse au clic)</p>
|
||||
<el-card style="background: #f5f7fa; margin-top: 12px;">
|
||||
<pre style="margin: 0;"><code>button.onclick = () => {
|
||||
alert('Vous avez cliqué !')
|
||||
}</code></pre>
|
||||
</el-card>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
### Comment le code devient-il une page ?
|
||||
|
||||
Quand vous ouvrez une page web, le navigateur traite les trois types de code dans l'ordre :
|
||||
|
||||
**1. HTML — Définir la structure de la page**
|
||||
Le navigateur analyse d'abord le HTML pour comprendre quels éléments se trouvent sur la page (titres, paragraphes, images, boutons, etc.) et leurs relations hiérarchiques.
|
||||
|
||||
**2. CSS — Appliquer les styles**
|
||||
Ensuite, le navigateur applique les règles CSS pour ajouter des styles aux éléments : couleurs, tailles, positions, espacements, etc.
|
||||
|
||||
**3. JavaScript — Ajouter de l'interactivité**
|
||||
Enfin, le code JavaScript est exécuté pour rendre la page « vivante » : répondre aux clics, soumettre des formulaires, lire des animations, etc.
|
||||
|
||||
**4. Affichage de la page**
|
||||
La combinaison de ces trois éléments produit la page web que vous voyez finalement.
|
||||
|
||||
### Les frameworks frontend modernes : de HTML à React/Vue
|
||||
|
||||
HTML, CSS et JavaScript constituent la « trinité » du développement frontend ; ils sont la base de toutes les pages web. Mais quand les pages deviennent complexes, les utiliser directement devient difficile : le code est dur à maintenir, il y a beaucoup de travail répétitif, et la synchronisation des données est problématique.
|
||||
|
||||
Les <strong>frameworks frontend modernes</strong> (React, Vue, Angular) s'appuient sur HTML/CSS/JS pour rendre le développement plus efficace :
|
||||
|
||||
**1. HTML/CSS/JS (stade de base)**
|
||||
Manipulation directe des éléments de la page, adapté aux pages simples. Mais quand le volume de code augmente, toute la logique est mélangée, ce qui rend la maintenance difficile.
|
||||
|
||||
**2. jQuery (stade de transition)**
|
||||
Simplifie les manipulations du DOM, rendant le code plus concis. Mais il faut toujours gérer manuellement l'état de la page et mettre à jour manuellement les éléments correspondants quand les données changent.
|
||||
|
||||
**3. React/Vue (stade moderne)**
|
||||
Adopte une conception par composants et pilotée par l'état :
|
||||
- **Composants** : découper la page en modules indépendants et réutilisables (boutons, cartes, barres de navigation)
|
||||
- **Pilotage par l'état** : quand les données changent, le framework met à jour automatiquement l'interface correspondante
|
||||
|
||||
::: tip 💡 Pour comprendre simplement
|
||||
- **HTML/CSS/JS** = matériaux de base (briques, ciment, acier)
|
||||
- **React/Vue** = charpente de construction (fournit les normes et outils pour bâtir)
|
||||
|
||||
À l'ère de la programmation assistée par IA, vous n'avez pas besoin de maîtriser tous les détails des frameworks ; il vous suffit de comprendre leurs concepts de base pour pouvoir utiliser le langage naturel pour demander à l'IA de générer du code.
|
||||
:::
|
||||
|
||||
### Dans le Vibe Coding
|
||||
|
||||
**Point clé : vous n'avez pas besoin de coder, juste de savoir décrire.**
|
||||
|
||||
Une fois les concepts frontend compris, vous pouvez décrire vos besoins à l'IA ainsi :
|
||||
|
||||
> « Crée une page de classement avec React, avec la liste des scores à droite, et en cliquant sur une ligne, affiche les détails du joueur en dessous, dans un style épuré et moderne. »
|
||||
|
||||
Pour approfondir les bases du frontend (HTML, CSS, JavaScript), consultez [l'annexe sur les fondamentaux du Web](/zh-cn/appendix/3-browser-and-frontend/javascript-deep-dive). Pour comprendre l'évolution historique du frontend, consultez [l'annexe sur l'évolution des frameworks frontend](/zh-cn/appendix/3-browser-and-frontend/frontend-frameworks).
|
||||
|
||||
## <span id="appendix-2">[Annexe 2 : Qu'est-ce que le Vibe Coding exactement](#appendix-nav)</span>
|
||||
|
||||
> 💡 Qu'est-ce que le Vibe Coding ? L'informaticien [Andrej Karpathy](https://karpathy.ai/) (co-fondateur d'OpenAI, ancien responsable IA chez Tesla) a introduit le terme **vibe coding** en février 2025. Ce concept désigne une méthode de programmation reposant sur les LLM, <strong>permettant aux développeurs de générer du code fonctionnel en fournissant des descriptions en langage naturel plutôt qu'en écrivant manuellement du code.</strong>
|
||||
|
||||
|
||||
|
||||
Littéralement, le Vibe Coding peut être compris comme une façon de « développer en parlant ». Son changement fondamental est le suivant : vous n'avez plus besoin d'écrire du code ligne par ligne, de vérifier la syntaxe, de déboguer ; vous décrivez simplement ce que vous voulez en langage naturel, par exemple :
|
||||
|
||||
« J'ai besoin d'une page de connexion, avec un champ pour le numéro de téléphone et un champ pour le code de vérification. »
|
||||
« Après une connexion réussie, rediriger vers la page d'accueil et afficher le nom d'utilisateur en haut à droite. »
|
||||
« Donne-moi un simple jeu de Snake contrôlable au clavier avec les flèches directionnelles. »
|
||||
Les grands modèles de langage (LLM) traduisent automatiquement ces descriptions en code réellement exécutable et génèrent les pages, la logique et les structures de données correspondantes. Après avoir vu le résultat, vous exprimez vos modifications en langage naturel : « rends le bouton plus grand », « change le fond en sombre », « enregistre le score et affiche un classement », et l'IA continue à ajuster l'implémentation selon vos demandes.
|
||||
|
||||
Dans ce mode, vous n'avez pas besoin d'apprendre un langage de programmation avant de coder ; vous concentrez votre énergie sur : décrire clairement ce que vous voulez faire, évaluer le résultat « est-ce que ça correspond ? », puis proposer de nouvelles modifications. L'IA se charge de traduire ces idées de haut niveau en implémentation concrète, réduisant ainsi considérablement le travail de codage mécanique et répétitif.
|
||||
|
||||
Pour plus de détails sur le Vibe Coding : [https://www.ibm.com/think/topics/vibe-coding](https://www.ibm.com/think/topics/vibe-coding)
|
||||
|
||||
Pour plus de contenu de Karpathy : [https://karpathy.bearblog.dev/blog/](https://karpathy.bearblog.dev/blog/)
|
||||
|
||||
### Comment faire semblant d'être un maître du Vibe Coding
|
||||
|
||||
En réalité, dans un vrai processus de vibe coding, on n'utilise généralement pas de prompts très complexes. Peut-être qu'au début on doit fournir un prompt global précis et modérément complexe pour l'ensemble du programme, mais ensuite, à chaque étape, vous n'aurez probablement besoin que de ce type de prompts :
|
||||
|
||||
```
|
||||
"Il y a un bug dans le code, corrige-le."
|
||||
"Je ne veux pas un bout de code, donne-moi le code corrigé complet."
|
||||
"Ton code a toujours des problèmes."
|
||||
"Corrige à nouveau et donne-moi le code corrigé complet."
|
||||
"Ça marchait tout à l'heure, pourquoi ça ne marche plus ?"
|
||||
"Tu n'as pas compris ce que je voulais ? Ne modifie pas mon code d'origine."
|
||||
"N'ajoute pas de fonctionnalités de débogage."
|
||||
"Ne fais pas ce que je ne t'ai pas demandé."
|
||||
"Où est la fonctionnalité que je t'ai demandée ?"
|
||||
"Tu ne me comprends pas ?"
|
||||
"Je veux juste une fonction."
|
||||
"Je t'ai dit de te référer à mon code précédent."
|
||||
"N'ajoute pas de commentaires inutiles."
|
||||
"Ne modifie pas la logique de base de mon code."
|
||||
"Aide-moi à modifier le code."
|
||||
"Modifie en te basant sur mon code..."
|
||||
"Ne change pas mes noms de variables !!!"
|
||||
"Ne change pas les noms de fonctions originaux !"
|
||||
"Ne touche pas à mes variables."
|
||||
"N'ajoute pas de fonctionnalités supplémentaires."
|
||||
"Ne génère pas juste un squelette, génère le code complet."
|
||||
```
|
||||
|
||||
Cela peut paraître exagéré, mais en réalité, ce sont les types de prompts que nous utilisons couramment dans notre travail quotidien. En raison de la <strong>limite de longueur de contexte</strong> des grands modèles de langage, ou parfois de leur <strong>capacité de suivi des instructions</strong> qui n'est pas très forte, le modèle peut oublier des contenus discutés plus tôt dans la conversation. En vibe coding, nous préférons les modèles à contexte long et ceux avec une forte capacité de suivi des instructions.
|
||||
|
||||
## <span id="appendix-3">[Annexe 3 : Contexte des modèles](#appendix-nav)</span>
|
||||
|
||||
Le contexte d'un modèle peut être compris comme la mémoire à court terme de l'IA. Il désigne tout le contenu textuel que le modèle peut « voir » et « retenir » au cours d'une conversation ou d'une tâche, y compris vos questions précédentes, les instructions système, les documents de référence, etc.
|
||||
|
||||
C'est précisément grâce au contexte que l'IA peut comprendre que vous poursuivez sur le sujet précédent, et mener des conversations tour par tour qui semblent cohérentes et naturelles. Sans contexte, chaque phrase serait pour le modèle une question entièrement nouvelle, incapable de savoir ce que vous avez dit avant.
|
||||
|
||||
Chaque modèle a sa propre longueur de contexte effective (context window), généralement mesurée en tokens (une unité correspondant approximativement à des « fragments de mots »). Les modèles actuels se situent généralement entre 32k et 128k tokens. Plus le contexte est long, plus le modèle peut « lire » de contenu en une seule fois.
|
||||
|
||||
Quand le contenu que vous saisissez approche ou dépasse la limite de contexte du modèle, plusieurs phénomènes courants peuvent apparaître :
|
||||
|
||||
- Le modèle commence à oublier des détails ou des informations clés dans les longs textes
|
||||
- La conversation dévie progressivement de l'objectif initial
|
||||
- Les contenus cités deviennent incohérents entre différentes questions
|
||||
|
||||
Ces phénomènes ne signifient pas que le modèle est soudainement « devenu bête », mais résultent naturellement lorsque la capacité de contexte est saturée ou presque saturée.
|
||||
|
||||
Dans la pratique, nous souhaitons un contexte aussi long que possible, tout en étant conscients que :
|
||||
|
||||
- Plus le contexte est long, plus les ressources de calcul sont importantes
|
||||
- Le coût d'appel augmente en conséquence
|
||||
|
||||
Il faut donc trouver un équilibre entre laisser le modèle voir suffisamment de contenu et maîtriser les coûts et l'efficacité.
|
||||
|
||||
## <span id="appendix-4">[Annexe 4 : Capacité de suivi des instructions](#appendix-nav)</span>
|
||||
|
||||
La capacité de suivi des instructions désigne la capacité du modèle, après avoir compris vos instructions, à les exécuter de manière précise et complète. Cela inclut non seulement la capacité à répondre à des questions, mais aussi à accomplir des tâches selon un format, un style et des étapes spécifiés.
|
||||
|
||||
Un modèle avec une forte capacité de suivi des instructions présente généralement les caractéristiques suivantes :
|
||||
|
||||
- Il produit le contenu dans la quantité demandée
|
||||
- Il couvre tous les éléments spécifiés
|
||||
- Il respecte le format et le ton spécifiés
|
||||
- Il ne fait pas d'extensions inutiles
|
||||
|
||||
En pratique, une forte capacité de suivi des instructions est très importante car elle améliore la stabilité, la reproductibilité et facilite l'intégration système.
|
||||
|
||||
<RelatedArticlesSection
|
||||
title="Continuer l'apprentissage"
|
||||
description="À partir de l'« expérience ludique », nous vous recommandons de poursuivre vers le développement local et la pratique produit."
|
||||
:items="relatedArticles"
|
||||
/>
|
||||
---
|
||||
title: 'Debutant 1 : A l ere de l IA, parler c est programmer'
|
||||
description: 'Creer un jeu du serpent AI-native par conversation, puis reutiliser la methode pour construire ton propre mini jeu ou demo.'
|
||||
---
|
||||
@@ -0,0 +1 @@
|
||||
../../../../zh-cn/stage-1/appendix-a-product-thinking/images
|
||||
File diff suppressed because it is too large
Load Diff
+359
@@ -0,0 +1,359 @@
|
||||
# Comparaison de sept outils de programmation AI
|
||||
|
||||
## Introduction du chapitre
|
||||
|
||||
Face à la multitude d'outils de programmation AI, lequel est le plus adapté à vos besoins ? Ce chapitre propose une évaluation comparative approfondie de 7 plateformes Web Vibe Coding grand public — Lovable, Replit, Z.ai et autres — à travers une tâche pratique commune : développer un jeu « Snake + Poésie AI ». Nous comparerons la convivialité pour les débutants, la maîtrise du code et la facilité de déploiement pour vous aider à choisir rapidement le meilleur outil d'assistance au développement.
|
||||
|
||||
---
|
||||
|
||||
# 1. Construire un jeu Snake avec Vibe Coding : Tutoriel complet
|
||||
|
||||
Cet article présente une pratique de développement émergente — le « Vibe Coding (codage ambiance) » — qui utilise l'intelligence artificielle pour accélérer le processus de construction d'applications.
|
||||
|
||||
Nous présenterons successivement les concepts fondamentaux du Vibe Coding, expliquerons ce qu'est un AI Agent, et proposerons des méthodes pratiques pour écrire des prompts. Enfin, nous construirons de zéro un jeu « Snake » complet, et comparerons en détail plusieurs plateformes Vibe Coding pour vous aider à choisir la combinaison d'outils la plus adaptée.
|
||||
|
||||
## Vous apprendrez :
|
||||
|
||||
- **Qu'est-ce que le Vibe Coding :** comprendre sa définition, son flux de travail et ses avantages clés.
|
||||
- **Le rôle de l'AI Agent :** comprendre le fonctionnement d'un AI Agent et sa différence avec les programmes traditionnels.
|
||||
- **Comment écrire de bons prompts :** maîtriser l'écriture de prompts clairs et spécifiques pour obtenir de meilleurs résultats.
|
||||
- **Outils Vibe Coding :** découvrir un ensemble de plateformes AI de programmation et de design.
|
||||
- **Comparaison de plateformes :** évaluer et comparer les forces et faiblesses de 7 plateformes AI Agent du point de vue d'un débutant.
|
||||
- **Outils UI / UX :** apprendre à intégrer Figma, Mastergo et autres outils UI/UX dans le flux de travail global.
|
||||
|
||||
## 1. Introduction
|
||||
|
||||
Dans les cours précédents, nous avons toujours utilisé le modèle de développement full-stack de z.ai pour accomplir les tâches de programmation.
|
||||
|
||||
Mais nous sommes-nous demandé : son cœur est en réalité un « AI Agent » (différent de l'AI chatbot classique, et bien plus intelligent) ? Parce qu'il ne fait pas que dialoguer avec vous — il peut réfléchir (quand vous lui donnez une tâche, il élabore d'abord un plan), et aussi prendre des initiatives (comme appeler une recherche web, exécuter des commandes système, ouvrir des pages web, etc.). Nous détaillerons cela plus tard.
|
||||
|
||||
## 1. Qu'est-ce que le Vibe Coding ?
|
||||
|
||||
Le Vibe Coding est une nouvelle approche de développement logiciel qui utilise l'IA pour accélérer le processus de développement d'applications. Ce n'est pas un remplacement de la programmation traditionnelle, mais un mode de programmation plus « conversationnel ». Ce concept a été proposé par le chercheur en IA Andrej Karpathy : dans ce flux de travail, les développeurs n'écrivent plus le code ligne par ligne, mais s'appuient principalement sur la direction d'un AI Agent pour générer, optimiser et déboguer des applications.
|
||||
|
||||
L'idée centrale du Vibe Coding est de passer d'une approche **« centrée sur le code (code-first) »** à une approche **« centrée sur l'intention (intent-first) »**. Vous n'avez plus besoin de concevoir à partir de la première ligne de code, mais vous décrivez le résultat souhaité en langage naturel.
|
||||
|
||||
Le flux de travail typique du Vibe Coding est un cycle itératif :
|
||||
|
||||
- **Décrire l'objectif :** décrivez d'abord en une phrase ou un paragraphe la fonctionnalité que vous souhaitez implémenter, par exemple : « Crée un jeu Snake simple avec un backend Python qui peut générer de la poésie. »
|
||||
- **L'IA génère le code :** l'AI Agent analyse votre besoin, génère le code initial, incluant la structure de base, les pages frontend et la logique backend.
|
||||
- **Exécuter et observer :** exécutez le code généré, vérifiez s'il fonctionne comme prévu, et identifiez les bugs ou les lacunes.
|
||||
- **Retourner et itérer :** s'il y a des erreurs ou des résultats insatisfaisants, continuez à donner des instructions dans la conversation, par exemple : « Le serpent se déplace trop lentement, accélère-le », ou « Le fichier `.env` ne lit pas correctement la clé API, corrige le code backend. »
|
||||
- **Répéter les étapes ci-dessus :** itérez continuellement dans le cycle « description → génération → exécution → retour » jusqu'à ce que l'application atteigne un état satisfaisant.
|
||||
|
||||
### Avantages principaux du Vibe Coding :
|
||||
|
||||
- **Réduction de la barrière d'entrée :** permet aux designers, entrepreneurs, étudiants et autres personnes sans expérience en programmation de participer au développement d'applications via le langage naturel.
|
||||
- **Prototypage rapide :** le temps entre l'idée et le produit minimum viable (MVP) est considérablement réduit.
|
||||
- **Amélioration de l'efficacité :** traitement automatique d'une grande quantité de travail de codage répétitif et mécanique (comme le code boilerplate), permettant aux développeurs de se concentrer sur la conception architecturale et l'abstraction des problèmes.
|
||||
- **Favorise l'expérimentation :** encourage une approche « produire d'abord rapidement, puis perfectionner », facilitant les essais de nouvelles idées et fonctionnalités.
|
||||
|
||||
## 2. Qu'est-ce qu'une plateforme Vibe Coding en ligne (Web-based) ?
|
||||
|
||||
Dans ce test pratique, vous remarquerez que les outils évalués sont divisés en deux catégories : **Web-based (plateformes en ligne)** et **IDE (environnements de développement locaux)**.
|
||||
|
||||
Bien que leur cœur soit le même — utiliser l'IA pour vous aider à écrire du code — ils diffèrent considérablement en termes d'expérience utilisateur et de scénarios d'utilisation :
|
||||
|
||||
### Plateformes Vibe Coding en ligne (Web-based)
|
||||
|
||||
**Outils représentatifs :** Lovable, Replit, Z.ai, v0
|
||||
|
||||
C'est comme un appartement hôtel meublé « prêt à emménager ».
|
||||
|
||||
- **Pas de configuration d'environnement :** vous n'avez pas besoin de vous soucier de l'environnement Python, de la version Node.js, ni de l'installation des dépendances. Ouvrez le navigateur, entrez l'URL, et vous pouvez commencer à coder immédiatement.
|
||||
- **Prévisualisation et déploiement en un clic :** une fois le code généré, la plateforme affiche généralement automatiquement le résultat dans la fenêtre de droite. Une fois terminé, un seul clic génère un lien partageable avec vos amis.
|
||||
- **Scénarios adaptés :**
|
||||
- **Validation rapide d'idées (MVP) :** vous avez une idée en tête et voulez passer une demi-heure à voir si c'est faisable.
|
||||
- **Débutants :** vous ne voulez surtout pas être découragé par des erreurs d'environnement complexes, vous voulez juste expérimenter le plaisir de la programmation AI.
|
||||
- **Applications légères :** créer une page d'outil simple, un petit jeu ou une page de présentation personnelle.
|
||||
|
||||
### AI IDE (environnement de développement local)
|
||||
|
||||
**Outils représentatifs :** Cursor, Trae, VS Code + plugins AI
|
||||
|
||||
C'est comme une maison en propriété « entièrement rénovée ».
|
||||
|
||||
- **Puissantes capacités locales :** il s'exécute sur votre ordinateur, peut accéder directement à tous vos fichiers locaux et exploiter la puissance de calcul de votre machine.
|
||||
- **Intégration transparente avec les flux professionnels :** adapté aux projets volumineux, vous pouvez installer librement divers plugins, vous connecter à des bases de données locales, et effectuer des débogages complexes.
|
||||
- **Scénarios adaptés :**
|
||||
- **Développement de projets professionnels :** projets commerciaux nécessitant une maintenance à long terme et une structure complexe.
|
||||
- **Personnalisation approfondie :** besoin d'un contrôle extrême sur les détails du code, ou nécessité de s'intégrer profondément avec les flux de travail locaux existants (comme Git, Docker).
|
||||
- **Confidentialité des données :** le code reste entièrement en local, plus conforme aux normes de sécurité de certaines entreprises.
|
||||
|
||||
**En résumé :** si vous découvrez tout juste la programmation AI, ou si vous voulez juste créer rapidement un petit projet pour vous amuser, les **plateformes en ligne** sont un excellent point de départ. Si vous êtes un développeur professionnel, ou si votre projet devient de plus en plus complexe, un **IDE local** vous offrira un plafond plus élevé.
|
||||
|
||||
---
|
||||
|
||||
## 3. Qu'est-ce qu'un AI Agent ?
|
||||
|
||||
### Qu'est-ce qu'un AI Agent ?
|
||||
|
||||
Un AI Agent est un système logiciel capable de percevoir son environnement, de prendre des décisions et d'agir de manière autonome pour atteindre un objectif spécifique. Comparé aux logiciels traditionnels qui suivent des instructions fixes et des flux uniques, l'AI Agent est plus flexible et adaptatif.
|
||||
|
||||
Voici quelques caractéristiques clés qui distinguent un AI Agent d'un programme traditionnel :
|
||||
|
||||
- **Autonomie :** l'AI Agent possède un haut degré d'indépendance. Les programmes traditionnels nécessitent généralement une intervention humaine étape par étape, tandis que l'Agent peut décider de lui-même de la prochaine action en fonction de l'objectif.
|
||||
- **Perception et mémoire :** l'Agent collecte des données depuis l'environnement (par exemple, réponses API, données de capteurs, entrées utilisateur, etc.) et conserve le contexte grâce à la « mémoire », permettant de réutiliser l'expérience dans les actions ultérieures et d'améliorer continuellement les résultats.
|
||||
- **Rationalité et orientation objectif :** l'Agent analyse et planifie autour de l'objectif donné, choisissant la séquence d'actions la plus appropriée pour optimiser les « indicateurs de performance ».
|
||||
- **Utilisation d'outils :** une caractéristique majeure des AI Agents modernes est la capacité d'appeler des outils externes, au-delà de la simple « génération de texte ». Par exemple, il peut naviguer sur le web, exécuter du code, interroger des bases de données, envoyer des emails, etc. — c'est un « cerveau qui orchestre des outils ».
|
||||
|
||||
Analogie pour comprendre :
|
||||
|
||||
- Un **programme traditionnel** est comme une calculatrice. Vous lui donnez des nombres et des opérateurs, il n'exécute le calcul que lorsque vous appuyez sur un bouton.
|
||||
- Un **assistant AI** est comme un assistant humain. Vous lui demandez « Trouve-moi un restaurant à proximité », il vous donne les résultats de recherche et liste les options, mais c'est vous qui prenez la décision finale.
|
||||
- Un **AI Agent** est plutôt comme une équipe de recherche automatisée. Vous donnez simplement un objectif de haut niveau (comme « Planifie-moi un voyage au Japon »), et il décompose les tâches, cherche des informations en ligne, réserve des vols et hôtels (via API), organise l'itinéraire, et vous livre le résultat — le tout presque sans intervention de votre part sur les détails.
|
||||
|
||||
---
|
||||
|
||||
# 2. À propos de la rédaction des prompts
|
||||
|
||||
## 1. Mieux vaut-il écrire un prompt parfait d'un coup ou procéder par étapes ?
|
||||
|
||||
Beaucoup de gens sont tentés de tout expliquer en un seul prompt pour « créer une application full-stack complète ». En fait, les outils actuels sont suffisamment puissants pour potentiellement produire un résultat décent en une seule fois. Mais en termes d'expérience globale et de taux de réussite, décomposer le travail en petites étapes et itérer par phases donne souvent de meilleurs résultats, et réduit le risque de se retrouver coincé dans une impasse « impossible à modifier ».
|
||||
|
||||
> **Petit conseil :** au lieu d'espérer « tout faire en une fois », décomposez le grand objectif en petites tâches exécutables (To-do).
|
||||
> Par exemple, au lieu de dire directement « build me a Snake game », décomposez en :
|
||||
> « 1. D'abord, crée le frontend d'un jeu Snake »,
|
||||
> « 2. Ensuite, implémente un backend pour enregistrer les scores »,
|
||||
> « 3. Enfin, connecte le frontend et le backend ».
|
||||
> Cela permet à l'IA de comprendre plus précisément vos besoins et de produire un résultat plus fiable.
|
||||
|
||||
## 2. Plus c'est clair, mieux c'est
|
||||
|
||||
- En Vibe Coding, les prompts que vous écrivez sont aussi importants que le code que vous écrivez. Plus le prompt est clair et spécifique, plus le résultat sera proche de ce que vous avez en tête.
|
||||
- Définir clairement les objectifs et les contraintes dès le début réduit le nombre de modifications ultérieures — ce qui fait gagner du temps et économise les crédits et les coûts.
|
||||
|
||||
---
|
||||
|
||||
# 3. Panorama des outils (Vibe Coding / Outils UIUX)
|
||||
|
||||
## 1. Plateformes AI Agent
|
||||
|
||||
| **Nom** | **Plateforme** |
|
||||
| ------------------------------------------ | ------------ |
|
||||
| **[Lovable](https://lovable.dev/)** | Web-based |
|
||||
| **[Cursor](https://cursor.com/cn/agents)** | PC |
|
||||
| **[Z.ai](https://chat.z.ai/)** | Web-based |
|
||||
| **[Replit](https://replit.com/~)** | Web-based |
|
||||
| **[Minimax](https://agent.minimaxi.com/)** | Web-based |
|
||||
| **[Trae](https://www.trae.ai/)** | PC |
|
||||
| **[V0](https://v0.app/)** | Web-based |
|
||||
|
||||
## 2. Plateformes AI UIUX
|
||||
|
||||
| **Nom** | **Plateforme** |
|
||||
| ------------------------------------- | -------------------- |
|
||||
| **[Mastergo](https://mastergo.com/)** | Web-based |
|
||||
| **[FIgma](https://www.figma.com/)** | Web-based, PC Plugin |
|
||||
|
||||
---
|
||||
|
||||
# 4. Tutoriel pratique (Vibe Coding + UI combiné)
|
||||
|
||||
1. Dans la fenêtre de chat de la plateforme Vibe Coding de votre choix, entrez la description du programme que vous souhaitez.
|
||||
Exemple :
|
||||
|
||||
> Merci de construire une application web Snake simple avec frontend et backend.
|
||||
>
|
||||
> 1. Frontend
|
||||
>
|
||||
> - Page 1 : Page de jeu
|
||||
> - Contrôler le déplacement du serpent avec le clavier.
|
||||
> - Le serpent ne mange pas de la nourriture, mais des mots anglais.
|
||||
> - La barre latérale affiche les mots collectés et leur nombre.
|
||||
> - Après la fin du jeu, les mots collectés sont conservés et continuent dans la nouvelle partie.
|
||||
> - Page 2 : Page de poésie (Make Poem)
|
||||
> - Afficher la même liste de mots que la page de jeu (données cohérentes).
|
||||
> - Fournir un bouton pour envoyer les mots collectés au backend afin de générer un poème.
|
||||
> - Après génération du poème, les mots utilisés sont retirés de la liste ou leur compteur est décrémenté.
|
||||
>
|
||||
> * Ajouter une navigation simple pour basculer entre les pages Game et Make Poem.
|
||||
> * S'assurer que les mots collectés sont visibles sur les deux pages.
|
||||
>
|
||||
> 2. Backend
|
||||
>
|
||||
> - Fournir une API backend qui reçoit les mots collectés et retourne un poème.
|
||||
> - Utiliser l'API DeepSeek pour générer la poésie.
|
||||
> - Stocker la clé API dans un fichier `.env`, et ignorer ce fichier dans `.gitignore`.
|
||||
|
||||
2. Entrez votre clé API DeepSeek. (Vous pouvez l'obtenir sur [https://platform.deepseek.com/](https://platform.deepseek.com/))
|
||||
1. La clé API du LLM est utilisée pour appeler le grand modèle dans votre propre projet. Étant une information sensible, elle ne peut pas être publique et doit être écrite séparément dans un fichier de configuration.
|
||||
**Pourquoi utiliser un fichier `.env` et ne pas le pousser sur GitHub ?**
|
||||
- Le fichier `.env` est spécifiquement conçu pour stocker des **clés ou mots de passe** (comme la clé API DeepSeek).
|
||||
- Si ce fichier est poussé sur GitHub, tout le monde pourra voir votre clé et l'utiliser frauduleusement.
|
||||
- Pour des raisons de sécurité, nous devons déclarer dans le fichier `.gitignore` d'ignorer `.env`, pour que Git ne le suive pas.
|
||||
- Ainsi, votre projet peut toujours utiliser ces clés localement, sans les divulguer dans le dépôt.
|
||||
|
||||
3. Après avoir consulté le résultat généré, si vous trouvez des erreurs ou des points à modifier, vous pouvez directement entrer vos demandes de modification dans la fenêtre de chat.
|
||||
4. Si vous n'êtes pas satisfait du design de la page, vous pouvez également choisir de redessiner l'interface dans Figma ou Mastergo, puis transmettre les idées de design à l'Agent.
|
||||
|
||||
- **Exemple**
|
||||
|
||||
> Merci de concevoir une **application Web à deux pages** nommée _Word-Snake_.
|
||||
>
|
||||
> - **Page Game :**
|
||||
> - Le serpent est contrôlé par le clavier.
|
||||
> - Le serpent mange des mots anglais, pas de la nourriture classique.
|
||||
> - Le panneau latéral affiche les mots collectés et leur nombre.
|
||||
> - Après la fin du jeu, l'inventaire des mots n'est pas vidé, il continue dans la nouvelle partie.
|
||||
> - **Page Make Poem :**
|
||||
> - Afficher le même inventaire partagé de mots.
|
||||
> - L'utilisateur sélectionne certains mots et clique sur le bouton **Generate Poem**.
|
||||
> - Ces mots sont envoyés au backend, où l'API DeepSeek génère un poème.
|
||||
> - Après génération du poème, les mots utilisés sont retirés de l'inventaire.
|
||||
> - **Navigation :** basculer entre les deux pages via des onglets simples ou un menu en haut.
|
||||
> - **État partagé :** s'assurer que les mots collectés restent toujours synchronisés et visibles sur les deux pages.
|
||||
|
||||
- **Exemple de résultat**
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# 5. Comparaison des plateformes AI Agent (comment choisir la meilleure combinaison pour un projet simple)
|
||||
|
||||
Différentes plateformes Vibe Coding ont chacune leurs particularités et leur flux de travail. Nous avons testé la même exigence « jeu Snake avec API DeepSeek » sur plusieurs plateformes, et évalué leurs forces et faiblesses du point de vue d'un débutant. Voici le résumé.
|
||||
|
||||
## 1. Critères de comparaison
|
||||
|
||||
1. **Objectif**
|
||||
Construire une application web Snake intégrée à l'API DeepSeek.
|
||||
2. **Détails du jeu**
|
||||
1. Le jeu génère de la poésie via l'API DeepSeek LLM.
|
||||
2. Le serpent mange des mots anglais, les mots collectés sont conservés après la fin du jeu et continuent dans la nouvelle partie. Les mêmes mots peuvent être collectés plusieurs fois et sont comptés séparément.
|
||||
3. Quand un poème est généré, les mots utilisés sont retirés de l'inventaire.
|
||||
|
||||
3. **Fonctionnalités indispensables**
|
||||
1. Une page frontend exécutable, incluant le jeu Snake (contrôle clavier, rendu Canvas).
|
||||
2. Mécanisme de collecte de mots (les mots apparaissent sur le plateau, quand le serpent les mange, la liste latérale se met à jour).
|
||||
3. Persistance de l'inventaire des mots entre les parties.
|
||||
4. Un backend utilisant l'API DeepSeek (si pas de clé API, peut d'abord retourner des poèmes simulés).
|
||||
5. Un bouton « Générer un poème » : au clic, appelle le backend, affiche le poème, et met à jour l'inventaire en fonction de l'utilisation.
|
||||
6. Support du fichier `.env` pour la clé API, et exclusion via `.gitignore` pour éviter la fuite de la clé.
|
||||
|
||||
4. **Bonus**
|
||||
1. L'utilisateur peut choisir quels mots utiliser pour générer le poème.
|
||||
2. UX conviviale (par exemple, barre latérale affichant clairement la liste de mots, mise en page raisonnable de la zone de poésie).
|
||||
3. Commentaires dans le code pour les débutants, expliquant la logique clé.
|
||||
|
||||
## 2. Comparaison des résultats de codage
|
||||
|
||||
### 1. Lovable (Web-based)
|
||||
|
||||
- **Type de plateforme :** Web
|
||||
- **Caractéristiques principales et flux de travail :** Lovable excelle dans l'intégration et la collaboration. Il automatise des tâches comme la connexion à la base de données Supabase, rendant le processus de configuration du projet très fluide. Il suffit de décrire les besoins du projet pour que l'Agent connecte les différents services et construise la structure de base.
|
||||
- **Utilisateurs ciblés :** Pour les débutants qui essaient le Vibe Coding pour la première fois, Lovable est un choix très convivial. Il simplifie la complexité de la connexion multi-services, vous permettant de vous concentrer sur les prompts et l'itération plutôt que sur la configuration de l'environnement. Grâce à une automatisation poussée, vous obtenez rapidement un prototype fonctionnel.
|
||||
- **Processus de prompts :**
|
||||
|
||||
- **Résultat du jeu Snake :**
|
||||
|
||||
|
||||
|
||||
- **Prix :** relativement élevé, mais si vous avez un email universitaire, vous pouvez bénéficier d'une réduction de 50% via la vérification étudiante.
|
||||
|
||||
|
||||
### 2. Cursor (IDE)
|
||||
|
||||
- **Type de plateforme :** Application desktop (PC)
|
||||
- **Caractéristiques principales et flux de travail :** Cursor est un IDE propriétaire intégrant des capacités AI, supportant Windows, macOS et Linux. Il intègre directement la génération de code, la réécriture intelligente et la recherche dans la base de code dans l'environnement de développement. Comparé aux outils Web, il offre une expérience plus proche du développement local traditionnel. Étant un environnement local, les configurations varient d'un ordinateur à l'autre, ce qui peut occasionner des problèmes liés à l'environnement. L'avantage est que le projet est sur votre machine, pas besoin de télécharger ou configurer un environnement d'exécution supplémentaire — Cursor gère de nombreuses étapes fastidieuses pour vous.
|
||||
- **Utilisateurs ciblés :** Pour les utilisateurs ayant déjà des bases en programmation, Cursor est un environnement très puissant et familier. Mais pour les débutants complets, il faut comprendre soi-même la structure du projet, la gestion des dépendances et l'organisation des fichiers — la courbe d'apprentissage est plus raide. Plus adapté aux développeurs qui souhaitent intégrer un assistant AI dans leur flux de codage traditionnel.
|
||||
- **Processus de prompts :**
|
||||
|
||||
- **Résultat du jeu Snake :**
|
||||
|
||||
|
||||
|
||||
- **Prix :**
|
||||
|
||||
|
||||
### 3. Z.ai (Web-based)
|
||||
|
||||
- **Type de plateforme :** Web
|
||||
- **Caractéristiques principales et flux de travail :** L'utilisation de Z.ai est assez directe, mais un défi notable : vous devez **copier-coller manuellement le code généré**. La plateforme elle-même manque d'une fenêtre de prévisualisation en temps réel, ce qui rend difficile de voir immédiatement le résultat de l'exécution du code.
|
||||
- **Utilisateurs ciblés :** Cette plateforme requiert une utilisation assez « manuelle ». L'absence d'automatisation signifie que vous devez interagir directement avec le code, ce qui est un exercice formateur pour ceux qui veulent comprendre en profondeur le contenu généré par l'IA. Mais les copier-coller fréquents posent des problèmes d'efficacité et de risque d'erreur. Plus adapté à ceux qui veulent voir « le code brut généré par l'IA » plutôt que ceux qui recherchent une expérience en un clic.
|
||||
- **Processus de prompts :**
|
||||
|
||||
- **Résultat du jeu Snake :**
|
||||
|
||||
|
||||
|
||||
- **Prix :**
|
||||
|
||||
|
||||
### 4. Replit (Web-based)
|
||||
|
||||
- **Type de plateforme :** Web
|
||||
- **Caractéristiques principales et flux de travail :** Replit est un environnement de développement et de déploiement en ligne tout-en-un. Dans le navigateur, vous pouvez écrire du code, exécuter des programmes et générer des URL d'accès en ligne. Avant de commencer à coder, il affiche un plan d'action clair ; il propose aussi un éditeur visuel où vous pouvez modifier l'UI directement dans la fenêtre de prévisualisation, et le code source se met à jour automatiquement. Cela vous permet de vérifier en permanence si la sortie de l'IA correspond à vos attentes, réduisant considérablement les allers-retours de modification.
|
||||
|
||||
|
||||
|
||||
- **Utilisateurs ciblés :** Replit est très convivial pour les débutants. Il simplifie le cycle complet du codage au déploiement, sans nécessiter de configuration supplémentaire de serveur ou de service d'hébergement. Les fonctionnalités de collaboration sont également solides, adaptées pour les projets entre camarades de classe ou pour demander de l'aide à distance.
|
||||
- **Processus de prompts :** Pendant la construction, l'IA n'a pas compris le besoin du premier coup — environ 3 itérations ont été nécessaires pour obtenir le résultat idéal.
|
||||
|
||||
- **Résultat du jeu Snake :**
|
||||
|
||||
|
||||
|
||||
- **Prix :**
|
||||
|
||||
|
||||
### 5. Minimax (Web-based)
|
||||
|
||||
- **Type de plateforme :** Web
|
||||
- **Caractéristiques principales et flux de travail :** Minimax prend généralement plus de temps pour exécuter les tâches. Son processus inclut souvent : l'IA découvre et corrige automatiquement les erreurs, ce qui rend l'ensemble plus lent, voire un peu chaotique. Pour ce projet, l'Agent génère généralement d'abord un plan détaillé, puis construit étape par étape le backend, la base de données et la logique frontend.
|
||||
- **Utilisateurs ciblés :** Comme il exécute automatiquement les tests et corrige les erreurs, la consommation de temps et de tokens est importante, mais vous pouvez clairement voir comment l'IA localise et résout les problèmes — ce qui est très valuable d'un point de vue apprentissage.
|
||||
- **Processus de prompts :**
|
||||
|
||||
|
||||
|
||||
- **Résultat du jeu Snake :**
|
||||
|
||||
|
||||
|
||||
- **Prix :** La version gratuite ne permet probablement pas de mener à bien un projet complexe du début à la fin, il est donc recommandé de passer à la version payante pour garantir que le projet puisse être construit complètement.
|
||||
|
||||
|
||||
### 6. Trae (IDE)
|
||||
|
||||
- **Type de plateforme :** Application desktop (PC)
|
||||
- **Caractéristiques principales et flux de travail :** En tant qu'application desktop, Trae est généralement plus performant et plus réactif que les outils Web. Mais il nécessite un téléchargement et une installation, ce qui peut représenter une barrière d'entrée légèrement plus élevée pour certains utilisateurs. De même, étant un environnement local, les différences de configuration et de dépendances entre les ordinateurs introduisent une certaine incertitude. L'avantage est que Trae vous aide à créer et configurer le projet localement, et vous pouvez développer et déboguer directement sur votre machine.
|
||||
- **Utilisateurs ciblés :** Plus adapté aux utilisateurs qui prévoient de faire du Vibe Coding sur le long terme et souhaitent utiliser un outil desktop dédié. Pour ceux qui veulent juste « essayer de temps en temps », ce n'est peut-être pas le choix le plus léger.
|
||||
- **Processus de prompts :**
|
||||
|
||||
- **Résultat du jeu Snake :**
|
||||
|
||||
|
||||
|
||||
- **Prix :** Le prix est relativement abordable, même la version gratuite suffit pour réaliser des petits projets de bonne qualité.
|
||||
|
||||
|
||||
### 7. V0 (Web-based)
|
||||
|
||||
- **Type de plateforme :** Web
|
||||
- **Caractéristiques principales et flux de travail :** V0 est un outil spécialisé dans la génération de composants UI React, fourni par Vercel. Il excelle dans la génération d'interfaces de haute qualité, prêtes pour la production. Cependant, en utilisation réelle, on rencontre des problèmes comme « difficile de trouver la vue code » ou « pas d'indication claire sur où configurer la clé API ».
|
||||
- **Utilisateurs ciblés :** V0 est très adapté aux étudiants ou designers focalisés sur le frontend et le design UI/UX. Mais ce n'est pas une solution full-stack complète — vous avez toujours besoin d'autres plateformes pour implémenter la logique backend et l'intégration API. Si votre objectif est de « construire une application complète en un seul endroit », ce n'est probablement pas le meilleur premier choix.
|
||||
- **Processus de prompts :**
|
||||
|
||||
|
||||
|
||||
|
||||
- **Résultat du jeu Snake :**
|
||||
|
||||
- **Prix :** Les utilisateurs gratuits peuvent construire environ 4 à 5 projets simples.
|
||||
|
||||
|
||||
## 3. Tableau comparatif récapitulatif
|
||||
|
||||
| **Plateforme** | **Avis** | **Plateforme** | **Notes** |
|
||||
| ------------------------------------------ | ------------------------------------------------------------------------------ | ------------ | ------------------------------------------------------------------------------ |
|
||||
| **[Lovable](https://lovable.dev/)** | Très convivial pour les débutants en programmation AI, prise en main simple et fluide, un choix idéal pour démarrer. | Web-based | Complète automatiquement les connexions de services comme Supabase, réduisant les coûts de configuration. |
|
||||
| **[Cursor](https://cursor.com/cn/agents)** | Adapté aux utilisateurs ayant déjà une expérience de développement, améliore considérablement la productivité et la qualité du code. | PC | Nécessite des bases en programmation, l'environnement local demande de comprendre la structure du projet et les dépendances. |
|
||||
| **[Z.ai](https://chat.z.ai/)** | Plus adapté aux utilisateurs avec des bases en programmation qui veulent étudier directement les détails du code généré par l'IA. | Web-based | Pas de fenêtre de prévisualisation, vérifier les résultats est plus fastidieux ; nécessite de copier-coller manuellement le code, créer des dossiers et fichiers et lancer les services manuellement. |
|
||||
| **[Replit](https://replit.com/~)** | Recommandé pour ceux qui veulent transformer rapidement une idée en service en ligne accessible. | Web-based | Développement et déploiement en ligne tout-en-un, supporte la collaboration et fournit un éditeur visuel. |
|
||||
| **[Minimax](https://agent.minimaxi.com/)** | Adapté à ceux qui veulent voir le processus complet de détection et correction automatique des erreurs par l'IA et en tirer des leçons, mais globalement lent et coûteux en tokens. | Web-based | Le processus global est long, l'IA exécute plusieurs fois les tests automatiquement et corrige les erreurs. |
|
||||
| **[Trae](https://www.trae.ai/)** | Pour les utilisateurs expérimentés en programmation qui souhaitent combiner un IDE desktop et un AI Agent, c'est un outil puissant pour améliorer l'efficacité. | PC | Nécessite une installation locale et une configuration d'environnement, mais de meilleures performances, adapté aux projets Vibe Coding à long terme. |
|
||||
| **[V0](https://v0.app/)** | Optimisé pour les non-développeurs qui veulent créer rapidement des effets visuels React UI, adapté aux étudiants orientés frontend / design. | Web-based | Spécialisé dans la génération d'UI React, nécessite de collaborer avec d'autres plateformes pour le backend et la construction d'applications complètes. |
|
||||
---
|
||||
title: 'Comparatif de 7 outils de programmation IA'
|
||||
description: 'Evaluation pratique de plateformes Web de Vibe Coding avec une tache unifiee, en comparant prise en main, controle du code et deploiement.'
|
||||
---
|
||||
+348
@@ -0,0 +1,348 @@
|
||||
# Concevoir un site web avec des Agents de design et de programmation
|
||||
|
||||
## Introduction du chapitre
|
||||
|
||||
Ce chapitre montrera comment le design et le développement peuvent parfaitement collaborer grâce à l'IA. Vous jouerez le rôle de chef de produit, dirigeant un « Agent de design » pour créer le Logo, le schéma de couleurs et la mise en page, puis coordonnant un « Agent de programmation » pour transformer les maquettes visuelles en code exécutable. De l'idée créative à la mise en ligne du site, vous vivrez le flux de développement complet propulsé par l'IA, et deviendrez une équipe à vous seul.
|
||||
|
||||
---
|
||||
|
||||
# 1. Guide de démarrage
|
||||
|
||||
## 1. Présentation du tutoriel
|
||||
|
||||
Construisons un site web complet à partir de zéro en utilisant un Agent de design AI et un Agent de codage.
|
||||
|
||||
- **Agent de design** : responsable de la création du logo, de la mise en page des pages, du schéma de couleurs et d'autres éléments visuels
|
||||
- **Agent de codage** : écrit le code réel (HTML/CSS/JS etc.) en fonction des besoins et de la mise en page que vous spécifiez dans vos prompts, pour construire un site web fonctionnel
|
||||
|
||||
## 2. Agent de design et Agent de codage
|
||||
|
||||
- **Agent de design** : une IA qui génère des images, des maquettes ou des styles de design en fonction des prompts que vous fournissez.
|
||||
- Mastergo
|
||||
- Lovart
|
||||
- Figma MCP
|
||||
- **Agent de codage** : une IA qui écrit du code réel (HTML/CSS/JS etc.) en fonction des fonctionnalités et de la mise en page que vous demandez dans vos prompts.
|
||||
- Z.AI
|
||||
- Trae
|
||||
- Cursor
|
||||
- Lovable
|
||||
|
||||
---
|
||||
|
||||
# 2. Créer un Logo avec l'Agent de design
|
||||
|
||||
## 1. Éléments clés à considérer pour le design du Logo
|
||||
|
||||
Le Logo est l'un des éléments clés qui déterminent la première impression de votre site web. Pour obtenir des résultats satisfaisants de l'Agent de design AI, vous devez décrire clairement dans votre prompt le type de Logo que vous souhaitez.
|
||||
|
||||
1. **Nom de marque / Texte**
|
||||
|
||||
- Le texte qui doit apparaître dans le Logo (par exemple : titre du site, nom de marque, etc.).
|
||||
|
||||
2. **Style (humeur / atmosphère)**
|
||||
|
||||
- Le sentiment ou l'ambiance globale que le Logo doit transmettre.
|
||||
- _Exemples : minimaliste, mignon, épuré, moderne, vintage, futuriste, etc._
|
||||
|
||||
3. **Schéma de couleurs** (optionnel)
|
||||
|
||||
- Il est préférable que les couleurs du Logo correspondent au ton général du site web.
|
||||
- Vous pouvez spécifier des codes hexadécimaux précis ou des tons généraux (froids, chauds, etc.).
|
||||
- _Exemples : **`#171721`** (noir), **`#FF7130`** (orange)._
|
||||
|
||||
4. **Forme (structure / composition)**
|
||||
|
||||
- Précisez si le Logo nécessite une forme ou une composition spécifique.
|
||||
- _Exemples : texte à l'intérieur d'un cercle, combinaison icône + texte, Logo principalement basé sur une icône, etc._
|
||||
|
||||
5. **Éléments d'icône / symbole** (optionnel)
|
||||
|
||||
- Les graphiques ou symboles que vous souhaitez voir apparaître dans le Logo.
|
||||
- _Exemples : icône de livre, symbole d'éclair, graphique lié à l'IA, forme géométrique abstraite, etc._
|
||||
|
||||
## 2. Rédiger le prompt de design du Logo
|
||||
|
||||
**Exemple de prompt**
|
||||
|
||||
```
|
||||
"Merci de concevoir un Logo au style minimaliste, le nom de marque est 'My First Website'.
|
||||
Utilise le noir (#171721) et l'orange (#FF7130), et place le texte à l'intérieur d'un cercle."
|
||||
```
|
||||
|
||||
```
|
||||
"Merci de concevoir un Logo avec 'AIID' comme nom de marque.
|
||||
Le style global doit être futuriste, propre et épuré, avec le bleu et le blanc comme couleurs principales.
|
||||
Combine un graphique abstrait symbolisant l'IA avec le texte, et exporte en PNG avec fond transparent."
|
||||
```
|
||||
|
||||
## 3. Demander le design à l'Agent
|
||||
|
||||
- Saisissez le prompt ci-dessus -> comparez les plusieurs propositions de design générées par l'Agent.
|
||||
|
||||
|
||||
|
||||
## 4. Finaliser le Logo
|
||||
|
||||
- Choisissez la version que vous préférez parmi les brouillons et téléchargez-la.
|
||||
|
||||
---
|
||||
|
||||
# 3. Planifier la structure de votre site web
|
||||
|
||||
## 1. Comprendre les sections de base
|
||||
|
||||
Avant de vraiment commencer à construire le site web, il est important de planifier les menus (sections) à inclure. Le design des menus dépend de ce que vous voulez que les visiteurs voient et des actions que vous attendez d'eux.
|
||||
En général, un site web se compose généralement de sections de base comme **Home / About / Contact**.
|
||||
|
||||
## 2. Dessinez d'abord un croquis de structure (optionnel)
|
||||
|
||||
Vous pouvez d'abord écrire une structure de menu simple en fonction des objectifs du site.
|
||||
|
||||
### Menu de base
|
||||
|
||||
1. **Home**
|
||||
1. La page principale que les visiteurs voient en premier en arrivant sur le site
|
||||
2. Comprend généralement le Logo, une zone visuelle principale et un slogan ou une brève présentation
|
||||
2. **About**
|
||||
1. Présente qui vous êtes, ou le but du projet / service
|
||||
2. Portfolio personnel : présentation + bref CV
|
||||
3. Site de services : vision, objectifs et fonctionnalités clés
|
||||
3. **Contact**
|
||||
1. Coordonnées, comme email, numéro de téléphone, liens vers les réseaux sociaux, etc.
|
||||
2. Vous pouvez aussi ajouter un simple formulaire de contact
|
||||
|
||||
### Menus optionnels
|
||||
|
||||
4. **Services / Projects**
|
||||
1. Présente les services que vous offrez, ou vos projets / portfolio
|
||||
2. Généralement affiché sous forme de liste ou de cartes
|
||||
|
||||
5. **Gallery**
|
||||
1. Pour afficher des images, photos ou créations graphiques
|
||||
|
||||
6. **Blog / News**
|
||||
1. Pour publier des articles, des actualités ou un journal
|
||||
|
||||
7. **FAQ**
|
||||
1. Compile les questions fréquemment posées par les visiteurs et leurs réponses
|
||||
|
||||
## 3. Choisir un schéma de couleurs (optionnel)
|
||||
|
||||
Si vous avez déjà un Logo, ou si vous voulez utiliser une combinaison de couleurs spécifique pour le site, vous pouvez directement inclure les codes couleur dans votre prompt.
|
||||
|
||||
**Exemple :** `#171721, #872B97, #FF7130, #FF3C68`
|
||||
|
||||
Même si vous n'avez pas encore de schéma de couleurs en tête, vous pouvez trouver de l'inspiration sur des sites spécialisés ou en cherchant par mots-clés.
|
||||
|
||||
- **Sites de référence pour les couleurs**
|
||||
- https://colorhunt.co/
|
||||
- https://coolors.co/
|
||||
|
||||
|
||||
|
||||
- **Recherche de couleurs par mots-clés sur Google**
|
||||
|
||||
|
||||
|
||||
## 4. Rédiger le prompt de design du site web
|
||||
|
||||
**Exemple de prompt**
|
||||
|
||||
```
|
||||
"Merci de concevoir un site web monopage composé des sections Home, About et Contact.
|
||||
Utilise les couleurs #171721, #FF7130 et #FF3C68.
|
||||
Le style global doit être moderne et épuré."
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
# 4. Concevoir le site web avec l'Agent de design
|
||||
|
||||
## 1. Saisir le prompt -> générer la maquette
|
||||
|
||||
- Écrivez dans le prompt la structure planifiée et les couleurs choisies.
|
||||
|
||||
**Exemple de prompt Mastergo**
|
||||
|
||||
|
||||
|
||||
## 2. Réviser la maquette et faire des retours
|
||||
|
||||
Vous pouvez faire des retours à l'Agent en fonction de vos besoins, par exemple :
|
||||
|
||||
- « C'est trop chargé, rends le style global plus épuré. »
|
||||
- « Change la police. »
|
||||
- « Ajuste la combinaison de couleurs. »
|
||||
- « Supprime cette section ici. »
|
||||
|
||||
|
||||
|
||||
## 3. Finaliser le design
|
||||
|
||||
Une fois que vous êtes satisfait de la maquette après plusieurs itérations, vous pouvez transformer ce design en code, pour que l'Agent de codage puisse le comprendre et continuer le travail.
|
||||
|
||||
La méthode pour convertir le design en code varie selon les plateformes, mais se fait généralement en installant et utilisant certains plugins dans la plateforme de design.
|
||||
|
||||
**Exemple Mastergo**
|
||||
|
||||
1. Ouvrez le [site des plugins Mastergo](https://mastergo.com/community/plugin), cherchez **seal**.
|
||||
|
||||
|
||||
|
||||
2. Retournez à la page de design, cliquez sur l'**icône carrée (plugin)**.
|
||||
|
||||
|
||||
|
||||
3. Sélectionnez la zone de design que vous voulez convertir en code, cliquez sur le bouton **Generate** pour générer le code.
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# 5. Construire le site web avec l'Agent de codage
|
||||
|
||||
## 1. Comprendre les concepts de base de HTML/CSS/JS
|
||||
|
||||
Un site web est essentiellement composé de trois langages :
|
||||
|
||||
- **HTML (HyperText Markup Language)** -> Structure (squelette)
|
||||
- **CSS (Cascading Style Sheets)** -> Style (apparence)
|
||||
- **JavaScript (JS)** -> Fonctionnalité (interaction)
|
||||
|
||||
Ces trois éléments travaillent ensemble pour former la page web complète que nous voyons.
|
||||
|
||||
1. **🏗️ HTML (structure)**
|
||||
|
||||
- Définit « ce qui est affiché » dans la page
|
||||
- Utilisé pour placer du texte, des images, des boutons, des liens et autres éléments
|
||||
- Analogie : les **murs et la charpente** d'un bâtiment
|
||||
|
||||
**Exemple**
|
||||
|
||||
```html
|
||||
<h1>Hello!</h1>
|
||||
<p>This is my first website.</p>
|
||||
<a href="contact.html">Contact</a>
|
||||
```
|
||||
|
||||
2. **🎨 CSS (style)**
|
||||
|
||||
- Détermine « comment le contenu est affiché »
|
||||
- Contrôle la taille du texte, les couleurs, les espaces, les arrière-plans, la forme des boutons, etc.
|
||||
- Donne à HTML ses « vêtements » et son style visuel
|
||||
|
||||
**Exemple**
|
||||
|
||||
```css
|
||||
h1 {
|
||||
color: #FF7130; /* Text color */
|
||||
font-size: 36px; /* Font size */
|
||||
text-align: center; /* Center alignment */
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #171721; /* Background color */
|
||||
color: white; /* Default text color */
|
||||
}
|
||||
```
|
||||
|
||||
3. **⚙️ JavaScript (JS) (fonctionnalité)**
|
||||
|
||||
- Permet à la page web d'interagir avec l'utilisateur
|
||||
- Peut implémenter des clics de bouton, des menus déroulants, des carrousels d'images, des soumissions de formulaire et autres effets dynamiques
|
||||
- Si HTML/CSS sont le squelette et l'apparence statiques, alors JS est le **cerveau** qui donne vie à la page web
|
||||
|
||||
**Exemple**
|
||||
|
||||
```javascript
|
||||
function showAlert() {
|
||||
alert("The button has been clicked!");
|
||||
}
|
||||
```
|
||||
|
||||
```html
|
||||
<button onclick="showAlert()">Click me</button>
|
||||
```
|
||||
|
||||
## 2. Laisser l'Agent de codage générer le code
|
||||
|
||||
**Exemple de prompt**
|
||||
|
||||
```
|
||||
"Merci d'écrire le HTML et CSS pour un site web monopage contenant les sections Home, About et Contact.
|
||||
Utilise les couleurs #171721, #FF7130, #FF3C68.
|
||||
Fond noir, texte blanc."
|
||||
```
|
||||
|
||||
|
||||
|
||||
## 3. Lancer le site web
|
||||
|
||||
Une fois le code brouillon généré, l'Agent démarre généralement le projet automatiquement et affiche la page web générée.
|
||||
|
||||
Si vous avez redémarré l'Agent, ou si la page web ne s'affiche pas, vous pouvez entrer un prompt comme :
|
||||
|
||||
```
|
||||
"Please activate the project"
|
||||
```
|
||||
|
||||
Pour que l'Agent redémarre le projet et ouvre la page de prévisualisation, afin que vous puissiez voir le résultat actuel.
|
||||
|
||||
## 4. Faire des modifications simples
|
||||
|
||||
Vous pouvez continuer à affiner le brouillon via le langage naturel, par exemple :
|
||||
|
||||
- « Rends le bouton plus grand. »
|
||||
- « La police plus grasse. »
|
||||
|
||||
|
||||
|
||||
## 5. Modifier le contenu textuel du site
|
||||
|
||||
Le site web généré en première version par l'Agent contient généralement du texte de remplissage automatique. Pour le rendre plus adapté à votre cas réel, vous pouvez préparer le contenu réel à l'avance, puis demander à l'Agent de le remplacer.
|
||||
|
||||
**Exemple d'application** : mise à jour de la page About du site AIID
|
||||
|
||||
1. Écrivez d'abord le contenu que vous souhaitez afficher sur la page About. Pour faciliter la compréhension par l'Agent, vous pouvez enregistrer le contenu au format Markdown.
|
||||
|
||||
|
||||
|
||||
2. Ensuite, dites à l'Agent dans la conversation d'appliquer le contenu de ce fichier à la page spécifiée.
|
||||
|
||||
|
||||
|
||||
3. Consultez la version mise à jour après application du contenu.
|
||||
|
||||
|
||||
|
||||
## 6. Insérer des images
|
||||
|
||||
Si vous souhaitez ajouter des images spécifiques (par exemple Logo, image de fond, etc.), vous pouvez d'abord uploader les images dans le dossier du projet, puis indiquer dans votre prompt où les utiliser dans la page.
|
||||
|
||||
- **Exemple :**
|
||||
|
||||
|
||||
|
||||
- **Résultat :**
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# 6. Intégrer le design et le code
|
||||
|
||||
## 1. Intégrer les fichiers de design avec le code du site web (optionnel)
|
||||
|
||||
Une fois que vous avez téléchargé les fichiers de code depuis l'Agent de design, vous pouvez les déplacer dans le répertoire du projet actuel, puis demander à l'Agent de codage de fusionner le code de design avec le projet existant.
|
||||
|
||||
- **Exemple :**
|
||||
|
||||
|
||||
|
||||
- **Résultat :**
|
||||
|
||||
|
||||
---
|
||||
title: 'Construire un site avec des agents design et code'
|
||||
description: 'De l idee a la mise en ligne : piloter un agent design pour le visuel puis un agent code pour produire un site fonctionnel, avec un workflow reutilisable.'
|
||||
---
|
||||
@@ -0,0 +1,325 @@
|
||||
---
|
||||
title: "Que faire en cas d'erreur de code - Guide pratique pour poser des questions à l'IA"
|
||||
description: "Apprenez à poser efficacement des questions à l'IA pour résoudre les erreurs de développement, maîtrisez le processus standard de capture d'écran, de description et de localisation des problèmes, et faites de l'IA votre assistant de débogage."
|
||||
---
|
||||
|
||||
<script setup>
|
||||
const duration = 'Environ <strong>30 minutes</strong>'
|
||||
</script>
|
||||
|
||||
# Que faire en cas d'erreur de code
|
||||
|
||||
## Introduction du chapitre
|
||||
|
||||
<ChapterIntroduction :duration="duration" :tags="['Techniques de débogage', 'Collaboration IA', 'Résolution de problèmes', 'Outils de développement']" coreOutput="Un processus standardisé de résolution des erreurs" expectedOutput="Capable de résoudre 90 % des erreurs courantes de manière autonome">
|
||||
|
||||
À l'ère de l'IA, la façon de résoudre les erreurs a changé.
|
||||
|
||||
Vous n'avez pas besoin de mémoriser tous les types d'erreurs, de devenir un expert du débogage, ni même de comprendre ce que signifie l'erreur.
|
||||
|
||||
<strong>Vous n'avez besoin d'apprendre qu'une seule chose : comment poser des questions à l'IA.</strong>
|
||||
|
||||
Ce chapitre vous enseignera un processus de résolution <strong>du simple à l'avancé</strong> :
|
||||
|
||||
1. <strong>Première étape : Poser directement la question</strong> : décrire le phénomène + capture d'écran, poser la question en une phrase
|
||||
2. <strong>Deuxième étape : Fournir des informations supplémentaires</strong> : si cela ne résout pas le problème, ouvrir F12 pour ajouter des informations clés
|
||||
|
||||
En maîtrisant ce processus, <strong>vous pourrez résoudre 90 % des erreurs par vous-même</strong>.
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
::: info Remarque
|
||||
Toutes les méthodes de ce chapitre sont basées sur l'expérience réelle avec Cursor/Trae/Claude et d'autres IDE IA, et peuvent être directement appliquées au développement quotidien.
|
||||
:::
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="0" :items="[
|
||||
{ title: 'Poser directement', description: 'Décrire le phénomène + capture d\'écran' },
|
||||
{ title: 'Compléter les infos', description: 'Ouvrir F12 pour localiser le problème' },
|
||||
{ title: 'Résolution itérative', description: 'Jusqu\'à la résolution du problème' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 1. Principe fondamental : Capturer l'écran et poser la question à l'IA
|
||||
|
||||
::: warning Pourquoi ce chapitre est-il important ?
|
||||
|
||||
Beaucoup de débutants, face à une erreur, réagissent ainsi :
|
||||
- Panique, et se mettent à modifier le code au hasard
|
||||
- Passent une demi-heure à chercher "comment résoudre l'erreur xxx"
|
||||
- Essayent de comprendre par eux-mêmes ce que signifie l'erreur
|
||||
- Font du debug seul jusqu'à minuit
|
||||
|
||||
<strong>Tout cela est une perte de temps.</strong>
|
||||
|
||||
À l'ère de l'IA, le débogage est devenu une tâche simple :
|
||||
|
||||
```
|
||||
Voir l'erreur → Capturer l'écran → Poser la question à l'IA → Suivre les instructions de l'IA
|
||||
```
|
||||
|
||||
Vous n'avez pas besoin de comprendre l'erreur, ni de savoir déboguer, ni même de savoir où se trouve le problème.
|
||||
|
||||
<strong>Vous avez juste besoin d'apprendre comment poser la question.</strong>
|
||||
|
||||
:::
|
||||
|
||||
### 1.1 La façon la plus simple de poser une question
|
||||
|
||||
Pas besoin de modèle complexe, choisissez parmi deux méthodes :
|
||||
|
||||
**Méthode 1 : Décrire le phénomène**
|
||||
|
||||
Format : ce que vous venez de faire, ce qui apparaît maintenant
|
||||
|
||||
```
|
||||
Je viens de modifier le code de la page de connexion, maintenant la page est blanche, que faire ?
|
||||
```
|
||||
|
||||
**Méthode 2 : Capture d'écran**
|
||||
|
||||
Capturer directement la page actuelle ou le message d'erreur
|
||||
|
||||
```
|
||||
[Capture d'écran]
|
||||
|
||||
Comment résoudre cette erreur ?
|
||||
```
|
||||
|
||||
**La meilleure méthode : Description + Capture d'écran**
|
||||
|
||||
```
|
||||
Je viens de modifier le code de la page de connexion, maintenant la page est blanche.
|
||||
|
||||
[Capture d'écran]
|
||||
|
||||
Que faire ?
|
||||
```
|
||||
|
||||
**Retenez : Décrivez clairement le contexte, ajoutez une capture d'écran, et l'IA pourra vous aider à résoudre le problème plus rapidement.**
|
||||
|
||||
### 1.2 Comment bien expliquer le problème
|
||||
|
||||
Beaucoup de débutants savent qu'il faut poser des questions, mais ne savent pas comment s'exprimer. En réalité, il suffit d'expliquer clairement trois choses :
|
||||
|
||||
**1. Ce que vous venez de faire**
|
||||
|
||||
```
|
||||
Je viens de cliquer sur le bouton Enregistrer
|
||||
Je viens de modifier le code de la page de connexion
|
||||
Je viens de rafraîchir la page
|
||||
```
|
||||
|
||||
**2. Ce que vous voyez maintenant**
|
||||
|
||||
```
|
||||
La page est vide maintenant
|
||||
Le bouton ne réagit pas au clic maintenant
|
||||
Un message d'erreur s'affiche maintenant
|
||||
```
|
||||
|
||||
**3. Ce que vous voulez obtenir**
|
||||
|
||||
```
|
||||
Je veux que les données soient enregistrées avec succès
|
||||
Je veux que la page s'affiche normalement
|
||||
Je veux qu'une alerte apparaisse après le clic sur le bouton
|
||||
```
|
||||
|
||||
**Exemple complet :**
|
||||
|
||||
```
|
||||
Je viens de cliquer sur le bouton Enregistrer, la page affiche maintenant l'erreur "Échec de l'enregistrement".
|
||||
|
||||
[Capture d'écran]
|
||||
|
||||
Je veux que les données du formulaire soient enregistrées avec succès dans la base de données, que faire ?
|
||||
```
|
||||
|
||||
**Principes clés :**
|
||||
- Décrivez dans un langage simple, sans jargon technique
|
||||
- Suivez l'ordre chronologique : ce que vous avez fait d'abord, puis ce qui s'est passé
|
||||
- Exprimez vos attentes pour que l'IA sache ce que vous souhaitez
|
||||
|
||||
## 2. Première étape : Décrire directement le phénomène
|
||||
|
||||
Face à un problème, <strong>ne vous précipitez pas pour ouvrir F12</strong>. Décrivez d'abord le phénomène, capturez la page actuelle, et montrez-le à l'IA.
|
||||
|
||||
Souvent, l'IA peut directement vous donner une solution rien qu'en voyant la capture d'écran.
|
||||
|
||||
### 2.1 Comment décrire les phénomènes courants
|
||||
|
||||
::: tip Décrivez simplement
|
||||
|
||||
**Page blanche**
|
||||
```
|
||||
La page s'ouvre mais est vide, que faire ?
|
||||
|
||||
[Capture d'écran]
|
||||
```
|
||||
|
||||
**Le bouton ne réagit pas au clic**
|
||||
```
|
||||
Cliquer sur ce bouton ne produit aucun effet, pouvez-vous vérifier ?
|
||||
|
||||
[Capture d'écran]
|
||||
```
|
||||
|
||||
**Les données ne s'enregistrent pas**
|
||||
```
|
||||
J'ai cliqué sur Enregistrer, les données ne sont pas sauvegardées, que faire ?
|
||||
|
||||
[Capture d'écran]
|
||||
```
|
||||
|
||||
**L'affichage est incorrect**
|
||||
```
|
||||
Ce bouton est décalé, comment l'ajuster ?
|
||||
|
||||
[Capture d'écran]
|
||||
```
|
||||
|
||||
**Erreur d'API**
|
||||
```
|
||||
L'appel à l'API renvoie une erreur, pouvez-vous vérifier ?
|
||||
|
||||
[Capture d'écran]
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### 2.2 Si l'IA a résolu directement le problème
|
||||
|
||||
Félicitations, le problème est résolu ! Suivez simplement les instructions de l'IA pour modifier.
|
||||
|
||||
### 2.3 Si l'IA dit "besoin de plus d'informations"
|
||||
|
||||
C'est le moment d'ouvrir F12 et de fournir des informations clés. Voyons comment.
|
||||
|
||||
## 3. Deuxième étape : Fournir les informations clés
|
||||
|
||||
Quand l'IA indique qu'elle a besoin de plus d'informations, selon le type de problème, ouvrez F12 et capturez le contenu correspondant.
|
||||
|
||||
### 3.1 Quand faut-il fournir des informations supplémentaires ?
|
||||
|
||||
L'IA peut répondre ainsi :
|
||||
- "Veuillez ouvrir la Console pour voir s'il y a des erreurs"
|
||||
- "Capturer le panneau Network pour que je puisse voir"
|
||||
- "J'ai besoin de voir le message d'erreur spécifique"
|
||||
|
||||
À ce moment, suivez les instructions ci-dessous pour fournir des captures d'écran.
|
||||
|
||||
### 3.2 Fournir les informations de la Console (page blanche/erreur)
|
||||
|
||||
::: tip Étapes à suivre
|
||||
|
||||
**Première étape : Appuyer sur F12 pour ouvrir les outils de développement**
|
||||
|
||||
Sur Mac, c'est `Cmd+Option+I`, ou faites un clic droit sur la page et sélectionnez "Inspecter".
|
||||
|
||||
**Deuxième étape : Basculer vers l'onglet Console**
|
||||
|
||||
**Troisième étape : Capturer les messages d'erreur en rouge**
|
||||
|
||||
**Quatrième étape : Envoyer à l'IA**
|
||||
|
||||
```
|
||||
L'erreur de la Console est la suivante :
|
||||
|
||||
[Capture d'écran]
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### 3.3 Fournir les informations Network (problème de données/erreur API)
|
||||
|
||||
::: tip Étapes à suivre
|
||||
|
||||
**Première étape : Appuyer sur F12 pour ouvrir les outils de développement**
|
||||
|
||||
**Deuxième étape : Basculer vers l'onglet Network**
|
||||
|
||||
**Troisième étape : Recommencer l'opération** (cliquer sur Enregistrer/rafraîchir la page)
|
||||
|
||||
**Quatrième étape : Trouver la requête correspondante et capturer l'écran**
|
||||
|
||||
- Regarder l'URL et le code d'état
|
||||
- Regarder le Payload (paramètres envoyés)
|
||||
- Regarder la Response (résultat retourné)
|
||||
|
||||
**Cinquième étape : Envoyer à l'IA**
|
||||
|
||||
```
|
||||
Les informations Network sont les suivantes :
|
||||
|
||||
Requête : [Capture d'écran 1]
|
||||
Paramètres : [Capture d'écran 2]
|
||||
Réponse : [Capture d'écran 3]
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### 3.4 Fournir les informations Elements (problème de style)
|
||||
|
||||
::: tip Étapes à suivre
|
||||
|
||||
**Première étape : Clic droit sur l'élément → "Inspecter"**
|
||||
|
||||
Les outils de développement se positionneront automatiquement sur cet élément.
|
||||
|
||||
**Deuxième étape : Capturer le panneau Styles**
|
||||
|
||||
**Troisième étape : Envoyer à l'IA**
|
||||
|
||||
```
|
||||
Le style de l'élément est le suivant :
|
||||
|
||||
[Capture d'écran]
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## 4. Troisième étape : Itérer jusqu'à la résolution
|
||||
|
||||
### 4.1 Les pratiques inefficaces
|
||||
|
||||
Ces pratiques vous font perdre du temps :
|
||||
|
||||
Voir une erreur et paniquer, se mettre à modifier le code au hasard
|
||||
Passer une demi-heure à chercher une solution en ligne
|
||||
Essayer de comprendre chaque erreur par soi-même
|
||||
Faire du debug seul jusqu'à minuit
|
||||
|
||||
### 4.2 Les pratiques efficaces
|
||||
|
||||
Suivez ce processus :
|
||||
|
||||
D'abord, décrire directement le phénomène et capturer l'écran pour poser la question
|
||||
Quand l'IA dit qu'elle a besoin de plus d'informations, ouvrir F12 pour compléter
|
||||
Suivre les suggestions pour modifier le code
|
||||
Après modification, tester, et si le problème persiste, continuer à capturer et poser la question
|
||||
|
||||
## 5. Résumé : Processus complet
|
||||
|
||||
```
|
||||
Rencontrer un problème
|
||||
↓
|
||||
Décrire directement le phénomène + capture d'écran
|
||||
↓
|
||||
Envoyer à l'IA : "Que faire ?"
|
||||
↓
|
||||
L'IA résout directement ?
|
||||
↓ Oui
|
||||
Suivre les instructions de l'IA
|
||||
↓
|
||||
Tester si le problème est résolu
|
||||
↓
|
||||
↓ Non / L'IA a besoin de plus d'informations
|
||||
Ouvrir F12, fournir les informations clés
|
||||
↓
|
||||
Renvoyer à l'IA
|
||||
↓
|
||||
Répéter jusqu'à résolution
|
||||
```
|
||||
@@ -0,0 +1 @@
|
||||
../../../../zh-cn/stage-1/appendix-c-consumer-scenarios/images
|
||||
@@ -0,0 +1,642 @@
|
||||
---
|
||||
title: "Inspiration pour scénarios de consommation B2C"
|
||||
description: "Ce document recense les directions créatives d'application des grands modèles LLM dans les scénarios de consommation B2C, couvrant des domaines tels que le style de vie, l'accompagnement émotionnel, les loisirs, le développement personnel, les interactions sociales, etc., afin de servir de référence aux développeurs d'applications IA grand public."
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
const duration = 'Environ <strong>4 heures</strong>'
|
||||
|
||||
const vibePoint = ref('')
|
||||
const feeling = ref('')
|
||||
|
||||
// Pool de thèmes pour chaque scénario - accent sur les sensations, l'ambiance, les suggestions psychologiques
|
||||
const topicPool = {
|
||||
'lifestyle': [
|
||||
{ title: 'Assistant de réveil rituel matinal', desc: 'Générer un rituel matinal personnalisé selon la météo, l\'agenda et l\'humeur, pour bien commencer chaque journée' },
|
||||
{ title: 'Créateur d\'ambiance pour célibataires', desc: 'Concevoir des solutions d\'ambiance intérieure pour les personnes vivant seules : éclairage, musique, diffuseur d\'huiles essentielles' },
|
||||
{ title: 'Générateur de programme cocooning week-end', desc: 'Recommander la combinaison parfaite selon l\'humeur du moment : film + snacks + décoration d\'ambiance' },
|
||||
{ title: 'Radio apaisante du soir', desc: 'Générer des histoires douces, des guidages de méditation, une radio personnelle pour s\'endormir' },
|
||||
{ title: 'Chasseur d\'inspiration esthétique du quotidien', desc: 'Découvrir la beauté dans les petites choses du quotidien, générer des suggestions esthétiques et des guides rituels' }
|
||||
],
|
||||
'emotion': [
|
||||
{ title: 'Confident nocturne', desc: 'Réceptacle émotionnel disponible 24h/24, accueillant sans jugement toutes les confidences' },
|
||||
{ title: 'Accompagnateur de guérison post-rupture', desc: 'Offrir une présence douce, des conseils de guérison et un exutoire émotionnel pendant les moments difficiles' },
|
||||
{ title: 'Coach de respiration anti-anxiété', desc: 'Percevoir l\'anxiété, guider des exercices de respiration et de méditation en pleine conscience' },
|
||||
{ title: 'Mentor de reconstruction de la confiance en soi', desc: 'Aider à reconstruire l\'estime de soi et le sentiment de valeur grâce à des dialogues positifs et des suggestions psychologiques' },
|
||||
{ title: 'Analyse intelligente du journal émotionnel', desc: 'Analyser le journal émotionnel, découvrir les schémas émotionnels, offrir des perspectives chaleureuses et des conseils' }
|
||||
],
|
||||
'entertainment': [
|
||||
{ title: 'Maître du jeu immersif (murder mystery)', desc: 'Jouer le rôle du maître du jeu, créer une ambiance mystérieuse, faire avancer l\'intrigue' },
|
||||
{ title: 'NPC sensible dans un monde ouvert', desc: 'Des NPC avec une vraie personnalité, qui se souviennent de l\'histoire du joueur et créent des liens émotionnels authentiques' },
|
||||
{ title: 'Génération de contenu podcast personnalisé', desc: 'Générer un podcast exclusif selon les centres d\'intérêt, aussi naturel qu\'une conversation entre amis' },
|
||||
{ title: 'Équipe d\'ambiance pour concert virtuel', desc: 'Créer une atmosphère live pour les concerts en ligne : interactions en temps réel, soutien, rendu d\'ambiance' },
|
||||
{ title: 'Partenaire de co-création de fiction interactive', desc: 'Co-créer une histoire avec le lecteur, chaque choix influence la direction du monde narratif' }
|
||||
],
|
||||
'growth': [
|
||||
{ title: 'Témoin de croissance personnelle', desc: 'Enregistrer les trajectoires de développement, offrir encouragements et rétrospectives aux moments clés' },
|
||||
{ title: 'Coach ludifié de formation d\'habitudes', desc: 'Transformer la formation d\'habitudes ennuyeuses en une aventure ludique' },
|
||||
{ title: 'Appariement de partenaires d\'apprentissage', desc: 'Trouver des partenaires d\'apprentissage partageant les mêmes centres d\'intérêt, s\'encourager mutuellement et partager les progrès' },
|
||||
{ title: 'Découvreur de petites joies quotidiennes', desc: 'Aider à découvrir les petites beautés de la vie, cultiver la gratitude et un état d\'esprit positif' },
|
||||
{ title: 'Simulateur d\'expériences de vie', desc: 'Simuler différents choix de vie, explorer les possibilités d\'une réalité parallèle' }
|
||||
],
|
||||
'social': [
|
||||
{ title: 'Générateur de sujets brise-glace', desc: 'Fournir des sujets intéressants lors d\'événements sociaux, dissiper la gêne et rapprocher les gens' },
|
||||
{ title: 'Styliste d\'ambiance pour publications sociales', desc: 'Générer des textes élégants pour les réseaux sociaux à partir de photos et de l\'humeur' },
|
||||
{ title: 'Planificateur d\'ambiance pour rendez-vous', desc: 'Concevoir un plan d\'ambiance complet pour les rendez-vous : lieu, sujets de conversation et surprises' },
|
||||
{ title: 'Animateur de réunions à distance', desc: 'Animer les réunions en ligne, organiser des jeux et guider les interactions' },
|
||||
{ title: 'Assistant de gestion d\'énergie sociale', desc: 'Aider les introvertis à gérer leur énergie sociale et à trouver un rythme social confortable' }
|
||||
],
|
||||
'creative': [
|
||||
{ title: 'Kit d\'urgence anti-panne d\'inspiration', desc: 'Fournir des étincelles d\'inspiration inattendues en cas de blocage créatif' },
|
||||
{ title: 'Guide d\'exploration du style personnel', desc: 'Aider à découvrir un style personnel unique, du vestimentaire à l\'expression' },
|
||||
{ title: 'Consultant esthétique pour journal et bulletins', desc: 'Fournir des suggestions esthétiques de mise en page, couleurs et contenu créatif' },
|
||||
{ title: 'Guide d\'ambiance photographique', desc: 'Fournir des conseils de photographie et de retouche selon le contexte et l\'ambiance souhaitée' },
|
||||
{ title: 'Adaptateur musique-humeur', desc: 'Recommander la combinaison musicale parfaite selon l\'humeur et le contexte du moment' }
|
||||
],
|
||||
'travel': [
|
||||
{ title: 'Guide d\'exploration urbaine à pied', desc: 'Explorer la ville comme un local, découvrir des lieux cachés et authentiques' },
|
||||
{ title: 'Génération de journal de voyage émotionnel', desc: 'Transformer les photos et sentiments de voyage en un récit de voyage poétique et des souvenirs' },
|
||||
{ title: 'Compagnon pour voyageurs solitaires', desc: 'Offrir compagnie, conseils et sentiment de sécurité aux voyageurs solo' },
|
||||
{ title: 'Aperçu d\'ambiance de destination', desc: 'Vivre une expérience immersive de la destination avant le départ, se mettre dans l\'ambiance' },
|
||||
{ title: 'Guide d\'ambiance photographique de voyage', desc: 'Guider pour prendre des photos de voyage pleines d\'histoires selon le contexte et la lumière' }
|
||||
],
|
||||
'health': [
|
||||
{ title: 'Réveilleur de motivation sportive', desc: 'Offrir juste ce qu\'il faut d\'encouragement et de motivation quand l\'envie de bouger n\'est pas là' },
|
||||
{ title: 'Cuisine inspiration alimentation saine', desc: 'Générer des recettes saines réconfortantes selon l\'humeur et les ingrédients disponibles' },
|
||||
{ title: 'Optimisateur d\'ambiance pour la qualité du sommeil', desc: 'Créer une ambiance de sommeil optimale de l\'environnement au psychologique' },
|
||||
{ title: 'Guide de perception corporelle', desc: 'Guider l\'attention sur les signaux du corps, établir la connexion corps-esprit' },
|
||||
{ title: 'Assistant rappel de self-care', desc: 'Rappeler de s\'arrêter dans l\'agitation et de prendre soin de soi' }
|
||||
],
|
||||
'learning': [
|
||||
{ title: 'Guide ludifié d\'exploration des savoirs', desc: 'Transformer l\'apprentissage de connaissances ennuyeuses en une aventure d\'exploration amusante' },
|
||||
{ title: 'Partenaire de scénarios d\'apprentissage linguistique', desc: 'Jouer différents rôles, acquérir naturellement la langue dans des dialogues situationnels' },
|
||||
{ title: 'Assistant de satisfaction de la curiosité', desc: 'Répondre à toutes sortes d\'idées farfelues, satisfaire la curiosité pour le monde' },
|
||||
{ title: 'Stimulateur d\'inspiration pour notes de lecture', desc: 'Aider à organiser les réflexions de lecture, découvrir de nouveaux angles de pensée' },
|
||||
{ title: 'Créateur d\'ambiance pour le partage de connaissances', desc: 'Transformer les connaissances acquises en contenus de partage intéressants' }
|
||||
],
|
||||
'relationship': [
|
||||
{ title: 'Coach de communication en couple', desc: 'Aider à exprimer les émotions difficiles à dire, améliorer les relations intimes' },
|
||||
{ title: 'Assistant rappel d\'attention familiale', desc: 'Rappeler de prendre soin de sa famille, fournir des suggestions d\'interactions chaleureuses' },
|
||||
{ title: 'Mainteneur d\'ambiance d\'amitié', desc: 'Aider à entretenir les amitiés à distance, créer des sujets de conversation communs' },
|
||||
{ title: 'Planificateur de déclarations et surprises', desc: 'Planifier des moments inoubliables et romantiques pour les personnes importantes' },
|
||||
{ title: 'Guide d\'apaisement des conflits', desc: 'Fournir des conseils et des formulations pour apaiser l\'ambiance lors de tensions relationnelles' }
|
||||
],
|
||||
'pet': [
|
||||
{ title: 'Journal anthropomorphique de l\'animal', desc: 'Générer un journal du point de vue de l\'animal, enregistrer les moments chaleureux avec le maître' },
|
||||
{ title: 'Interprète du comportement animal', desc: 'Décoder le langage comportemental de l\'animal, approfondir le lien avec lui' },
|
||||
{ title: 'Planificateur de moments complicité animal', desc: 'Concevoir des activités créatives pour interagir avec l\'animal, renforcer la complicité' },
|
||||
{ title: 'Générateur d\'histoires souvenir animalières', desc: 'Transformer les photos et souvenirs de l\'animal en histoires chaleureuses' },
|
||||
{ title: 'Guide rassurant pour nouveaux maîtres', desc: 'Offrir une présence chaleureuse et des conseils aux nouveaux propriétaires d\'animaux' }
|
||||
],
|
||||
'finance': [
|
||||
{ title: 'Assistant de conscience émotionnelle des dépenses', desc: 'Percevoir les émotions derrière les achats impulsifs, construire une vision saine de la consommation' },
|
||||
{ title: 'Motivation visuelle des objectifs d\'épargne', desc: 'Transformer les objectifs d\'épargne en progression visuelle de rêves' },
|
||||
{ title: 'Apprendre la gestion financière facilement', desc: 'Apprendre les connaissances financières de manière légère et amusante' },
|
||||
{ title: 'Apaisseur d\'anxiété financière', desc: 'Offrir soutien émotionnel et conseils pratiques face à la pression financière' },
|
||||
{ title: 'Jeu d\'expérience d\'investissement à petit montant', desc: 'Découvrir l\'investissement par le jeu, baisser la barrière d\'entrée' }
|
||||
],
|
||||
'career': [
|
||||
{ title: 'Compagnon de doute professionnel', desc: 'Offrir écoute, exploration et suggestions d\'orientation pendant les périodes de doute professionnel' },
|
||||
{ title: 'Réveilleur de sentiment d\'accomplissement au travail', desc: 'Aider à découvrir la valeur et le sens dans le travail, raviver l\'enthousiasme' },
|
||||
{ title: 'Assistant d\'ambiance sociale au travail', desc: 'Fournir des sujets de conversation légers et des suggestions d\'interaction pour le networking professionnel' },
|
||||
{ title: 'Stimulateur d\'idées d\'activité secondaire', desc: 'Stimuler des idées créatives d\'activité parallèle selon les centres d\'intérêt et compétences' },
|
||||
{ title: 'Station-service de confiance avant entretien', desc: 'Offrir préparation psychologique et encouragement avant un entretien' }
|
||||
],
|
||||
'home': [
|
||||
{ title: 'Designer d\'ambiance d\'espace intérieur', desc: 'Concevoir des solutions d\'ambiance intérieure selon l\'humeur et la saison' },
|
||||
{ title: 'Guide de transformation saisonnière du logement', desc: 'Changer la décoration intérieure au fil des saisons, garder un sentiment de fraîcheur' },
|
||||
{ title: 'Magie des petits espaces', desc: 'Créer une ambiance chaleureuse et confortable même dans les petits espaces' },
|
||||
{ title: 'Créateur de rituels du quotidien à la maison', desc: 'Créer des rituels pour les activités domestiques quotidiennes' },
|
||||
{ title: 'Compagnon psychologique du désencombrement', desc: 'Offrir soutien psychologique et conseils de décision lors du tri des affaires' }
|
||||
],
|
||||
'food': [
|
||||
{ title: 'Cuisine réconfortante pour une personne', desc: 'Concevoir des solutions culinaires simples et réconfortantes pour les personnes vivant seules' },
|
||||
{ title: 'Design d\'ambiance de table de fête', desc: 'Concevoir une mise en table rituelle pour les occasions spéciales' },
|
||||
{ title: 'Adaptateur cuisine-humeur', desc: 'Recommander des aliments et recettes adaptés selon l\'humeur du moment' },
|
||||
{ title: 'Constructeur de confiance pour débutants en cuisine', desc: 'Offrir encouragements chaleureux et recettes simples aux cuisiniers débutants' },
|
||||
{ title: 'Guide d\'ambiance photographie culinaire', desc: 'Faire en sorte que même les plats maison rendent irrésistiblement bien en photo' }
|
||||
],
|
||||
'fashion': [
|
||||
{ title: 'Mood board de tenue du jour', desc: 'Générer des inspirations de tenues selon la météo, l\'occasion et l\'humeur' },
|
||||
{ title: 'Styliste de garde-robe capsule', desc: 'Créer des combinaisons infinies avec un nombre limité de pièces' },
|
||||
{ title: 'Voyage d\'exploration du style personnel', desc: 'Aider à découvrir et construire un style personnel unique' },
|
||||
{ title: 'Créatif de relookage vestimentaire', desc: 'Offrir de nouvelles inspirations d\'association pour les vêtements existants' },
|
||||
{ title: 'Consultant look pour occasions spéciales', desc: 'Concevoir des tenues qui inspirent confiance pour les événements importants' }
|
||||
]
|
||||
}
|
||||
|
||||
// Table de correspondance de recommandations prédéfinie - basée sur l'ambiance et les sensations
|
||||
const recommendationMap = {
|
||||
// Point d'ambiance : Guérison
|
||||
'healing': {
|
||||
'relax': ['emotion', 'lifestyle', 'health', 'home'],
|
||||
'inspire': ['creative', 'growth', 'learning', 'entertainment'],
|
||||
'connect': ['relationship', 'social', 'pet', 'emotion'],
|
||||
'escape': ['travel', 'entertainment', 'creative', 'lifestyle']
|
||||
},
|
||||
// Point d'ambiance : Croissance
|
||||
'growth': {
|
||||
'relax': ['growth', 'learning', 'creative', 'health'],
|
||||
'inspire': ['career', 'learning', 'creative', 'growth'],
|
||||
'connect': ['social', 'relationship', 'career', 'learning'],
|
||||
'escape': ['travel', 'entertainment', 'creative', 'lifestyle']
|
||||
},
|
||||
// Point d'ambiance : Social
|
||||
'social': {
|
||||
'relax': ['social', 'pet', 'food', 'home'],
|
||||
'inspire': ['social', 'creative', 'entertainment', 'travel'],
|
||||
'connect': ['relationship', 'social', 'pet', 'travel'],
|
||||
'escape': ['social', 'travel', 'entertainment', 'creative']
|
||||
},
|
||||
// Point d'ambiance : Exploration
|
||||
'explore': {
|
||||
'relax': ['travel', 'creative', 'lifestyle', 'food'],
|
||||
'inspire': ['travel', 'creative', 'learning', 'entertainment'],
|
||||
'connect': ['travel', 'social', 'relationship', 'pet'],
|
||||
'escape': ['travel', 'entertainment', 'creative', 'lifestyle']
|
||||
},
|
||||
// Point d'ambiance : Quotidien
|
||||
'daily': {
|
||||
'relax': ['lifestyle', 'home', 'health', 'emotion'],
|
||||
'inspire': ['creative', 'food', 'fashion', 'home'],
|
||||
'connect': ['relationship', 'social', 'pet', 'lifestyle'],
|
||||
'escape': ['entertainment', 'creative', 'travel', 'lifestyle']
|
||||
}
|
||||
}
|
||||
|
||||
const vibeOptions = [
|
||||
{ label: 'Guérison', value: 'healing', desc: 'Chaleur, apaisement, réconfort' },
|
||||
{ label: 'Croissance', value: 'growth', desc: 'Progrès, percée, transformation' },
|
||||
{ label: 'Social', value: 'social', desc: 'Connexion, partage, interaction' },
|
||||
{ label: 'Exploration', value: 'explore', desc: 'Curiosité, aventure, découverte' },
|
||||
{ label: 'Quotidien', value: 'daily', desc: 'Ordinaire, authentique, ici et maintenant' }
|
||||
]
|
||||
|
||||
const feelingOptions = [
|
||||
{ label: 'Envie de se détendre', value: 'relax', desc: 'Relâcher la pression, se vider l\'esprit' },
|
||||
{ label: 'Chercher l\'inspiration', value: 'inspire', desc: 'Stimuler la créativité, trouver l\'élan' },
|
||||
{ label: 'Besoin de connexion', value: 'connect', desc: 'Se connecter aux autres, résonance émotionnelle' },
|
||||
{ label: 'S\'évader un moment', value: 'escape', desc: 'Échapper à la réalité, immersion totale' }
|
||||
]
|
||||
|
||||
const scenarios = [
|
||||
{ key: 'lifestyle', name: 'Style de vie', anchor: '#_1-style-de-vie' },
|
||||
{ key: 'emotion', name: 'Accompagnement émotionnel', anchor: '#_2-accompagnement-emotionnel' },
|
||||
{ key: 'entertainment', name: 'Divertissement et loisirs', anchor: '#_3-divertissement-et-loisirs' },
|
||||
{ key: 'growth', name: 'Développement personnel', anchor: '#_4-developpement-personnel' },
|
||||
{ key: 'social', name: 'Interactions sociales', anchor: '#_5-interactions-sociales' },
|
||||
{ key: 'creative', name: 'Expression créative', anchor: '#_6-expression-creative' },
|
||||
{ key: 'travel', name: 'Voyage et exploration', anchor: '#_7-voyage-et-exploration' },
|
||||
{ key: 'health', name: 'Santé physique et mentale', anchor: '#_8-sante-physique-et-mentale' },
|
||||
{ key: 'learning', name: 'Exploration des savoirs', anchor: '#_9-exploration-des-savoirs' },
|
||||
{ key: 'relationship', name: 'Entretien des relations', anchor: '#_10-entretien-des-relations' },
|
||||
{ key: 'pet', name: 'Compagnie animulaire', anchor: '#_11-compagnie-animulaire' },
|
||||
{ key: 'finance', name: 'Santé financière', anchor: '#_12-sante-financiere' },
|
||||
{ key: 'career', name: 'Développement professionnel', anchor: '#_13-developpement-professionnel' },
|
||||
{ key: 'home', name: 'Espace intérieur', anchor: '#_14-espace-interieur' },
|
||||
{ key: 'food', name: 'Gastronomie et cuisine', anchor: '#_15-gastronomie-et-cuisine' },
|
||||
{ key: 'fashion', name: 'Style vestimentaire', anchor: '#_16-style-vestimentaire' }
|
||||
]
|
||||
|
||||
// Calculer les résultats de recommandation - tirer au hasard depuis le pool de thèmes
|
||||
const recommendationTopics = computed(() => {
|
||||
if (!vibePoint.value || !feeling.value) return []
|
||||
|
||||
const keys = recommendationMap[vibePoint.value]?.[feeling.value] || []
|
||||
const topics = []
|
||||
|
||||
// Tirer au hasard 1-2 thèmes de chaque scénario recommandé
|
||||
keys.forEach(key => {
|
||||
const scenario = scenarios.find(item => item.key === key)
|
||||
const scenarioTopics = topicPool[key] || []
|
||||
|
||||
if (scenario && scenarioTopics.length > 0) {
|
||||
// Tirer au hasard 1-2 thèmes
|
||||
const count = Math.floor(Math.random() * 2) + 1
|
||||
const shuffled = [...scenarioTopics].sort(() => Math.random() - 0.5)
|
||||
const selected = shuffled.slice(0, Math.min(count, shuffled.length))
|
||||
|
||||
selected.forEach(topic => {
|
||||
topics.push({
|
||||
...topic,
|
||||
scenarioKey: key,
|
||||
scenarioName: scenario.name,
|
||||
scenarioAnchor: scenario.anchor
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
// Trier aléatoirement et limiter le nombre total
|
||||
return topics.sort(() => Math.random() - 0.5).slice(0, 8)
|
||||
})
|
||||
|
||||
// Obtenir la description de la sélection actuelle
|
||||
const currentSelection = computed(() => {
|
||||
const vibe = vibeOptions.find(i => i.value === vibePoint.value)
|
||||
const feel = feelingOptions.find(p => p.value === feeling.value)
|
||||
return {
|
||||
vibe: vibe?.label || '',
|
||||
feeling: feel?.label || ''
|
||||
}
|
||||
})
|
||||
|
||||
const scrollToAnchor = (anchor) => {
|
||||
// Retarder le défilement pour s'assurer que le DOM est mis à jour
|
||||
setTimeout(() => {
|
||||
// Essayer de trouver par ID (prend en charge plusieurs formats)
|
||||
let element = document.querySelector(anchor)
|
||||
|
||||
// Si non trouvé, essayer d'autres formats d'ID possibles
|
||||
if (!element) {
|
||||
// Essayer sans le préfixe underscore
|
||||
const altAnchor = anchor.replace('#_', '#')
|
||||
element = document.querySelector(altAnchor)
|
||||
}
|
||||
|
||||
// Si toujours pas trouvé, chercher par texte de titre
|
||||
if (!element) {
|
||||
// Extraire le nom du scénario depuis l'ancre
|
||||
const anchorText = decodeURIComponent(anchor.replace('#', '').replace(/^_/, ''))
|
||||
const headings = document.querySelectorAll('h2, h3')
|
||||
|
||||
for (let heading of headings) {
|
||||
const headingText = heading.textContent.trim()
|
||||
// Correspondance exacte ou partielle
|
||||
const cleanHeading = headingText.replace(/^\d+\.\s*/, '')
|
||||
if (cleanHeading === anchorText || headingText.includes(anchorText)) {
|
||||
element = heading
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (element) {
|
||||
element.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start'
|
||||
})
|
||||
// Mettre en surbrillance le paragraphe cible
|
||||
element.style.backgroundColor = '#fdf2f8'
|
||||
element.style.transition = 'background-color 0.3s'
|
||||
element.style.padding = '8px'
|
||||
element.style.borderRadius = '4px'
|
||||
setTimeout(() => {
|
||||
element.style.backgroundColor = ''
|
||||
element.style.padding = ''
|
||||
}, 2000)
|
||||
}
|
||||
}, 100)
|
||||
}
|
||||
|
||||
const resetSelection = () => {
|
||||
vibePoint.value = ''
|
||||
feeling.value = ''
|
||||
}
|
||||
</script>
|
||||
|
||||
# Inspiration pour scénarios de consommation B2C
|
||||
|
||||
## Introduction du chapitre
|
||||
|
||||
<ChapterIntroduction :duration="duration" :tags="['Applications B2C', 'Style de vie', 'Expérience émotionnelle', 'Création d\'ambiance']" coreOutput="Découvrir plus de 15 inspirations de scénarios de vie" expectedOutput="Trouver une direction de produit qui touche les utilisateurs">
|
||||
|
||||
Ce document recense les <strong>directions d'application créatives des grands modèles LLM dans les scénarios de consommation B2C</strong>. Contrairement au B2B qui se concentre sur l'efficacité et les points de douleur, les produits B2C accordent davantage d'importance à la <strong>création de sensations, aux suggestions psychologiques et à l'ambiance</strong>, permettant aux utilisateurs de ressentir une résonance émotionnelle et une expérience agréable lors de l'utilisation.
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
## Sélection rapide d'ambiance de scénario
|
||||
|
||||
<el-card shadow="hover" style="margin-top: 16px; margin-bottom: 24px; border-left: 5px solid #ec4899;">
|
||||
<div style="font-weight: 600; margin-bottom: 8px;">Trouvez l'inspiration de scénario qui vous touche</div>
|
||||
<div style="color: #606266; font-size: 14px; line-height: 1.6; margin-bottom: 12px;">
|
||||
Choisissez l'ambiance souhaitée et votre sensation du moment, le système recommandera des directions de scénarios pertinentes. Cliquez sur un tag pour accéder au chapitre correspondant.
|
||||
</div>
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="12">
|
||||
<el-select v-model="vibePoint" placeholder="Choisir le type d'ambiance" style="width: 100%;">
|
||||
<el-option
|
||||
v-for="item in vibeOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
<div style="font-weight: 500;">{{ item.label }}</div>
|
||||
<div style="font-size: 12px; color: #909399;">{{ item.desc }}</div>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-select v-model="feeling" placeholder="Choisir votre sensation" style="width: 100%;">
|
||||
<el-option
|
||||
v-for="item in feelingOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
<div style="font-weight: 500;">{{ item.label }}</div>
|
||||
<div style="font-size: 12px; color: #909399;">{{ item.desc }}</div>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<div v-if="recommendationTopics.length > 0" style="margin-top: 16px;">
|
||||
<div style="font-weight: 600; margin-bottom: 12px; color: #ec4899;">
|
||||
Scénarios recommandés pour vous : {{ currentSelection.vibe }} x {{ currentSelection.feeling }}
|
||||
</div>
|
||||
<div style="display: flex; flex-wrap: wrap; gap: 8px;">
|
||||
<el-tag
|
||||
v-for="topic in recommendationTopics"
|
||||
:key="topic.title"
|
||||
type="danger"
|
||||
effect="light"
|
||||
style="cursor: pointer; margin-bottom: 4px;"
|
||||
@click="scrollToAnchor(topic.scenarioAnchor)"
|
||||
>
|
||||
{{ topic.title }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<el-button type="text" size="small" @click="resetSelection" style="margin-top: 8px;">
|
||||
Rechoisir
|
||||
</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
---
|
||||
|
||||
## 1. Style de vie
|
||||
|
||||
> 💡 **Concept clé** : Donner un sens rituel au quotidien ordinaire, créer de la beauté dans les détails
|
||||
|
||||
| N° | Nom du scénario | Fonctionnalité du scénario |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Assistant de réveil rituel matinal | Intégration de l'API météo, des données du calendrier, le LLM génère un programme matinal personnalisé ; couplé à un enceinte intelligente pour une musique sur mesure, éclairage intelligent avec réveil progressif |
|
||||
| 2 | Créateur d'ambiance pour célibataires | Connexion aux appareils domotiques (éclairage, enceinte, diffuseur), le LLM ajuste automatiquement les paramètres selon l'heure/l'humeur ; apprentissage continu des préférences utilisateur |
|
||||
| 3 | Générateur de programme cocooning week-end | Connexion aux API de plateformes de streaming pour les programmes, génération de combinaisons film + gastronomie + décoration basées sur les préférences historiques |
|
||||
| 4 | Radio apaisante du soir | Synthèse vocale TTS pour générer des histoires douces, algorithme de mixage de bruits blancs, volume décroissant intelligent ; ajustement du contenu selon les données de sommeil |
|
||||
| 5 | Chasseur d'inspiration esthétique du quotidien | Reconnaissance d'image analysant les photos d'environnement, le LLM génère des suggestions esthétiques ; recommandations de contenu style Pinterest/Xiaohongshu |
|
||||
|
||||
---
|
||||
|
||||
## 2. Accompagnement émotionnel
|
||||
|
||||
> 💡 **Concept clé** : Accueil inconditionnel et présence, devenir un doux contenant pour les émotions
|
||||
|
||||
| N° | Nom du scénario | Fonctionnalité du scénario |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Confident nocturne | Chiffrement de bout en bout garantissant la confidentialité, analyse émotionnelle par LLM, mémoire à long terme des histoires utilisateur, conversation multi-tours pour un accompagnement continu |
|
||||
| 2 | Accompagnateur de guérison post-rupture | Algorithme d'identification du stade émotionnel, soutien différencié par phase (expression -> libération -> reconstruction) ; base de connaissances psychologiques avec recherche RAG |
|
||||
| 3 | Coach de respiration anti-anxiété | Intégration de données de capteurs biométriques (fréquence cardiaque/respiration), monitoring en temps réel du niveau d'anxiété ; guidage vocal du rythme respiratoire, instructions de relaxation musculaire progressive |
|
||||
| 4 | Mentor de reconstruction de la confiance en soi | Cadre de dialogue de psychologie positive, enregistrement et retour des petites réussites ; techniques de restructuration cognitive pour changer les autodialogues négatifs |
|
||||
| 5 | Analyse intelligente du journal émotionnel | Modèle NLP de reconnaissance émotionnelle, analyse de séries temporelles pour découvrir les schémas émotionnels ; visualisation du spectre émotionnel, alertes prédictives |
|
||||
|
||||
---
|
||||
|
||||
## 3. Divertissement et loisirs
|
||||
|
||||
> 💡 **Concept clé** : Créer des expériences immersives, faire du divertissement un refuge pour l'âme
|
||||
|
||||
| N° | Nom du scénario | Fonctionnalité du scénario |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Maître du jeu immersif (murder mystery) | Le LLM génère en temps réel des branches narratives, synthèse vocale pour incarner les NPC, ajustement dynamique de la difficulté et du rythme selon les réactions ; rendu de scènes AR/VR |
|
||||
| 2 | NPC sensible dans un monde ouvert | Base de données de mémoire à long terme stockant l'historique des interactions, dialogues personnalisés générés par LLM ; calcul émotionnel pour des réactions émotionnelles authentiques des NPC |
|
||||
| 3 | Génération de contenu podcast personnalisé | Contenu exclusif basé sur le graphe d'intérêts, clonage vocal TTS de la voix préférée ; interaction en temps réel avec les questions des auditeurs |
|
||||
| 4 | Équipe d'ambiance pour concert virtuel | Rendu d'avatars, interactions de commentaires en temps réel, bâtons lumineux virtuels/accessoires de soutien ; audio spatial pour une sensation de live |
|
||||
| 5 | Partenaire de co-création de fiction interactive | Le LLM génère l'intrigue en temps réel, les choix utilisateur influencent le déroulement ; fins multiples, développement dynamique des relations entre personnages |
|
||||
|
||||
---
|
||||
|
||||
## 4. Développement personnel
|
||||
|
||||
> 💡 **Concept clé** : La croissance n'est pas une ascèse, c'est un voyage fascinant de découverte de soi
|
||||
|
||||
| N° | Nom du scénario | Fonctionnalité du scénario |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Témoin de croissance personnelle | Visualisation chronologique de la trajectoire de croissance, marquage automatique des jalons ; comparatifs « moi d'avant » vs « moi d'aujourd'hui » |
|
||||
| 2 | Coach ludifié de formation d'habitudes | Mécanismes de ludification (points d'expérience, niveaux, badges), classement social, rôle de coach IA (ex. « mentor de l'aventure ») |
|
||||
| 3 | Appariement de partenaires d'apprentissage | Algorithme de matching basé sur les intérêts et objectifs, communautés d'apprentissage, mécanisme de suivi mutuel |
|
||||
| 4 | Découvreur de petites joies quotidiennes | Reconnaissance d'image pour détecter les beaux moments, guidage de journal de gratitude, rétrospective hebdomadaire des moments agréables |
|
||||
| 5 | Simulateur d'expériences de vie | Simulation narrative multi-branches des conséquences de différents choix, comparaison de vies parallèles ; visualisation des conséquences des décisions |
|
||||
|
||||
---
|
||||
|
||||
## 5. Interactions sociales
|
||||
|
||||
> 💡 **Concept clé** : Rendre les interactions sociales légères et naturelles, trouver un mode de connexion confortable
|
||||
|
||||
| N° | Nom du scénario | Fonctionnalité du scénario |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Générateur de sujets brise-glace | Recommandation intelligente de sujets basée sur le contexte et les participants, analyse de conversation en temps réel pour suggestions de prolongation ; sauvetage des moments gênants |
|
||||
| 2 | Styliste d'ambiance pour publications sociales | Analyse du contenu image, génération de textes multi-styles (littéraire/humoristique/profond) ; recommandation intelligente d'emojis et de mise en forme |
|
||||
| 3 | Planificateur d'ambiance pour rendez-vous | Génération de plans de rendez-vous basés sur les intérêts communs, recommandations de restaurants/activités, suggestions de sujets de conversation ; rappels météo et trafic en temps réel |
|
||||
| 4 | Animateur de réunions à distance | Bibliothèque de jeux en ligne, générateur d'activités brise-glace, roue de sujets ; fonds virtuels et filtres pour renforcer l'ambiance |
|
||||
| 5 | Assistant de gestion d'énergie sociale | Évaluation de la dépense énergétique après les activités sociales, suggestions de récupération (activités en solitaire) ; planification intelligente du calendrier social |
|
||||
|
||||
---
|
||||
|
||||
## 6. Expression créative
|
||||
|
||||
> 💡 **Concept clé** : Chacun a de la créativité, il suffit juste de l'éveiller
|
||||
|
||||
| N° | Nom du scénario | Fonctionnalité du scénario |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Kit d'urgence anti-panne d'inspiration | Algorithme d'association trans-domaines, génération de stimuli aléatoires, bibliothèque de prompts créatifs ; outil de divergence d'idées en carte mentale |
|
||||
| 2 | Guide d'exploration du style personnel | Analyse d'image pour identifier le style existant, recommandation de tendances, essayage virtuel/makeup ; timeline d'évolution du style |
|
||||
| 3 | Consultant esthétique pour journal et bulletins | Recommandation de modèles de mise en page, génération de palettes de couleurs, suggestions d'éléments décoratifs ; reconnaissance d'écriture manuscrite et embellissement |
|
||||
| 4 | Guide d'ambiance photographique | Identification de scène et suggestions de composition, recommandation de filtres, ajustement intelligent des paramètres de retouche ; parcours d'apprentissage de la photographie |
|
||||
| 5 | Adaptateur musique-humeur | Algorithme d'analyse émotionnelle musicale, reconnaissance de l'humeur utilisateur, génération de playlists personnalisées ; histoires et contexte musical |
|
||||
|
||||
---
|
||||
|
||||
## 7. Voyage et exploration
|
||||
|
||||
> 💡 **Concept clé** : Voyager, ce n'est pas seulement voir des paysages, c'est aussi ressentir des modes de vie différents
|
||||
|
||||
| N° | Nom du scénario | Fonctionnalité du scénario |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Guide d'exploration urbaine à pied | Agrégation de contenus d'initiés locaux, recommandation de lieux insolites, navigation AR ; traduction et commentaire vocal en temps réel |
|
||||
| 2 | Génération de journal de voyage émotionnel | Tri et sélection automatiques des photos, génération de récits de voyage poétiques par LLM, timeline géolocalisée ; vidéo de voyage en un clic |
|
||||
| 3 | Compagnon pour voyageurs solitaires | Partage de localisation en temps réel et alertes de sécurité, contacts d'urgence locaux, guide vocal IA ; communauté de voyageurs solo |
|
||||
| 4 | Aperçu d'ambiance de destination | Aperçu VR/360°, simulation des sons et odeurs locaux, présentation du contexte culturel ; expérience de « test d'hébergement » virtuel |
|
||||
| 5 | Guide d'ambiance photographique de voyage | Rappel de l'heure dorée, lignes de composition, points de prise de vue typiques ; suggestions de style d'étalonnage en post-production |
|
||||
|
||||
---
|
||||
|
||||
## 8. Santé physique et mentale
|
||||
|
||||
> 💡 **Concept clé** : La santé n'est pas un objectif, c'est un doux acte de self-care
|
||||
|
||||
| N° | Nom du scénario | Fonctionnalité du scénario |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Réveilleur de motivation sportive | Recommandation intelligente du type d'exercice selon l'état utilisateur, options de micro-exercices (5 minutes), défis sportifs ludifiés ; check-in sportif social |
|
||||
| 2 | Cuisine inspiration alimentation saine | Identification des ingrédients du frigo, recommandation de recettes personnalisées, analyse nutritionnelle ; guide de cuisson étape par étape |
|
||||
| 3 | Optimisateur d'ambiance pour la qualité du sommeil | Analyse des données de monitoring du sommeil, génération de rituels du coucher, conseils d'optimisation de l'environnement (température/humidité/lumière) ; réveil intelligent |
|
||||
| 4 | Guide de perception corporelle | Guidage de méditation de scan corporel, associations émotionnelles des parties du corps, exercices de connexion corps-esprit ; biofeedback visualisé |
|
||||
| 5 | Assistant rappel de self-care | Monitoring de l'intensité de travail, rappels réguliers de pause, suggestions de micro-activités de soin (boire/s'étirer/respirer profondément) ; journal de self-care |
|
||||
|
||||
---
|
||||
|
||||
## 9. Exploration des savoirs
|
||||
|
||||
> 💡 **Concept clé** : Apprendre est une aventure sans fin, la curiosité est le meilleur des professeurs
|
||||
|
||||
| N° | Nom du scénario | Fonctionnalité du scénario |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Guide ludifié d'exploration des savoirs | Visualisation cartographique des connaissances, parcours d'apprentissage en mode « niveau », système de badges de réussite ; jeu de rôle de tuteur IA |
|
||||
| 2 | Partenaire de scénarios d'apprentissage linguistique | Le LLM joue différents rôles dans des dialogues, correction de prononciation, présentation du contexte culturel ; simulation immersive de scénarios |
|
||||
| 3 | Assistant de satisfaction de la curiosité | Connexion Wikipédia/graphes de connaissances, vulgarisation de concepts complexes, recommandation de savoirs connexes ; journal de curiosité |
|
||||
| 4 | Stimulateur d'inspiration pour notes de lecture | Analyse du contenu du livre, extraction et mise en relation d'idées, recommandation d'angles de réflexion ; modèles et embellissement de notes de lecture |
|
||||
| 5 | Créateur d'ambiance pour le partage de connaissances | Génération automatique de fiches de connaissances, optimisation des textes de partage, embellissement visuel ; retour sur les données de partage social |
|
||||
|
||||
---
|
||||
|
||||
## 10. Entretien des relations
|
||||
|
||||
> 💡 **Concept clé** : Les bonnes relations demandent de l'attention, et l'attention n'a pas besoin d'être compliquée
|
||||
|
||||
| N° | Nom du scénario | Fonctionnalité du scénario |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Coach de communication en couple | Génération de modèles d'expression émotionnelle, guidage en communication non violente, formulations de résolution de conflits ; évaluation de la santé relationnelle |
|
||||
| 2 | Assistant rappel d'attention familiale | Rappels des dates importantes (anniversaires/commémorations), suggestions de messages attentionnés, recommandations d'activités familiales ; album familial généré |
|
||||
| 3 | Mainteneur d'ambiance d'amitié | Historique des interactions entre amis, recommandation de sujets communs, organisation de réunions à distance ; timeline et souvenirs d'amitié |
|
||||
| 4 | Planificateur de déclarations et surprises | Génération de plans de surprises personnalisés, recommandation de cadeaux, suggestions de formulations romantiques ; planning d'exécution et rappels |
|
||||
| 5 | Guide d'apaisement des conflits | Formulations de désamorçage émotionnel, guidage de changement de perspective, suggestions d'étapes de réconciliation ; suivi de réparation relationnelle |
|
||||
|
||||
---
|
||||
|
||||
## 11. Compagnie animulaire
|
||||
|
||||
> 💡 **Concept clé** : Les animaux de compagnie sont des membres de la famille, leur présence mérite d'être enregistrée et chérie
|
||||
|
||||
| N° | Nom du scénario | Fonctionnalité du scénario |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Journal anthropomorphique de l'animal | Analyse du comportement animal, génération de journal à la première personne, illustration automatique des photos ; « fil social » de l'animal |
|
||||
| 2 | Interprète du comportement animal | Analyse vidéo du comportement animal, alertes sanitaires, conseils d'éducation ; base de connaissances des caractéristiques de race |
|
||||
| 3 | Planificateur de moments complicité animal | Recommandations d'activités avec l'animal, tutoriels de jouets DIY, lieux accueillants pour animaux ; matchmaking social animal |
|
||||
| 4 | Générateur d'histoires souvenir animalières | Sélection de photos et vidéos, génération d'histoires chronologiques, accompagnement musical ; album/vidéo souvenir auto-généré |
|
||||
| 5 | Guide rassurant pour nouveaux maîtres | Guide d'entretien par étapes, FAQ, gestion des urgences ; communauté de soutien pour débutants |
|
||||
|
||||
---
|
||||
|
||||
## 12. Santé financière
|
||||
|
||||
> 💡 **Concept clé** : La liberté financière n'est pas l'objectif, la santé financière l'est
|
||||
|
||||
| N° | Nom du scénario | Fonctionnalité du scénario |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Assistant de conscience émotionnelle des dépenses | Analyse des relevés de dépenses, corrélation émotions-dépenses, alertes anti-achats impulsifs ; suggestions de satisfactions alternatives |
|
||||
| 2 | Motivation visuelle des objectifs d'épargne | Visualisation de la progression vers l'objectif, rendu de scènes de rêve, célébration des jalons ; jeu de formation d'habitudes d'épargne |
|
||||
| 3 | Apprendre la gestion financière facilement | Envoi de connaissances fragmentées, enseignement par scénarios, quiz interactifs ; tests et certificats de connaissances |
|
||||
| 4 | Apaisseur d'anxiété financière | Évaluation de la santé financière, techniques de gestion du stress, plans d'action progressifs ; conseil psychologique financier |
|
||||
| 5 | Jeu d'expérience d'investissement à petit montant | Simulation d'investissement virtuel, éducation aux risques, jeu de portefeuille d'investissement ; guidage vers le micro-investissement réel |
|
||||
|
||||
---
|
||||
|
||||
## 13. Développement professionnel
|
||||
|
||||
> 💡 **Concept clé** : La carrière n'est pas une voie ferrée, c'est un champ ouvert à explorer
|
||||
|
||||
| N° | Nom du scénario | Fonctionnalité du scénario |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Compagnon de doute professionnel | Tests d'intérêts professionnels, inventaire des compétences, recommandation d'informations sectorielles ; dialogue avec un mentor de carrière |
|
||||
| 2 | Réveilleur de sentiment d'accomplissement au travail | Enregistrement des réalisations professionnelles, extraction de la valeur, visualisation des succès ; collecte de retours positifs collègues/clients |
|
||||
| 3 | Assistant d'ambiance sociale au travail | Recommandations de sujets professionnels, techniques de networking, événements sectoriels ; optimisation de contenu LinkedIn |
|
||||
| 4 | Stimulateur d'idées d'activité secondaire | Matching compétences-intérêts-demande du marché, bibliothèque de cas de side projects, guide de démarrage ; communauté d'échange |
|
||||
| 5 | Station-service de confiance avant entretien | Simulation d'entretien, préparation aux questions courantes, techniques de renforcement de la confiance ; conseils d'image |
|
||||
|
||||
---
|
||||
|
||||
## 14. Espace intérieur
|
||||
|
||||
> 💡 **Concept clé** : La maison n'est pas seulement un lieu de résidence, c'est le refuge de l'âme
|
||||
|
||||
| N° | Nom du scénario | Fonctionnalité du scénario |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Designer d'ambiance d'espace intérieur | Analyse de photos d'espace, recommandations de style, suggestions mobilier/décoration ; prévisualisation AR |
|
||||
| 2 | Guide de transformation saisonnière du logement | Thèmes saisonniers, suggestions de rangement et de mise en valeur, plans de décoration festive ; génération de liste de courses |
|
||||
| 3 | Magie des petits espaces | Algorithme d'optimisation spatiale, mobilier multifonction, techniques de rangement ; astuces d'agrandissement visuel |
|
||||
| 4 | Créateur de rituels du quotidien à la maison | Design de rituels quotidiens (matin/soir/week-end), rappels d'exécution ; retour sur les effets des rituels |
|
||||
| 5 | Compagnon psychologique du désencombrement | Évaluation de la valeur émotionnelle des objets, guidage étape par étape du tri, soutien psychologique ; recommandation de canaux de don/recyclage |
|
||||
|
||||
---
|
||||
|
||||
## 15. Gastronomie et cuisine
|
||||
|
||||
> 💡 **Concept clé** : La nourriture est un langage d'amour, cuisiner est une façon d'exprimer l'amour
|
||||
|
||||
| N° | Nom du scénario | Fonctionnalité du scénario |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Cuisine réconfortante pour une personne | Identification des ingrédients du frigo, recettes simples, guide étape par étape ; esthétique de dressage solo |
|
||||
| 2 | Design d'ambiance de table de fête | Menu thématique festif, plan de mise en table, techniques d'ambiance ; optimisation de l'expérience des convives |
|
||||
| 3 | Adaptateur cuisine-humeur | Algorithme d'association humeur-aliment, recettes de régulation émotionnelle, recommandations de comfort food ; guidage de guérison par la cuisine |
|
||||
| 4 | Constructeur de confiance pour débutants en cuisine | Recettes ultra-simples, astuces de sauvetage des ratés, formulations de renforcement de la confiance ; progression graduelle de difficulté |
|
||||
| 5 | Guide d'ambiance photographie culinaire | Suggestions de dressage, utilisation de la lumière naturelle, guidage des angles de prise de vue ; filtres et retouches recommandés |
|
||||
|
||||
---
|
||||
|
||||
## 16. Style vestimentaire
|
||||
|
||||
> 💡 **Concept clé** : S'habiller, c'est s'exprimer ; le style est la manifestation extérieure de l'intérieur
|
||||
|
||||
| N° | Nom du scénario | Fonctionnalité du scénario |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Mood board de tenue du jour | Recommandation combinée météo/occasion/humeur, essayage virtuel, inspiration de looks ; gestion de garde-robe |
|
||||
| 2 | Styliste de garde-robe capsule | Inventaire de la garde-robe, combinaisons de pièces, programmes une pièce-multi looks ; conseils d'achat (combler les lacunes) |
|
||||
| 3 | Voyage d'exploration du style personnel | Test de style, recommandation d'icônes de référence, parcours d'évolution stylistique ; construction de la confiance |
|
||||
| 4 | Créatif de relookage vestimentaire | Inspirations de transformation de vêtements anciens, nouvelles associations, techniques d'accessoirisation ; mode durable |
|
||||
| 5 | Consultant look pour occasions spéciales | Décryptage du dress code, génération de plans de tenue, suggestions coiffure et maquillage ; coordination de l'ensemble |
|
||||
|
||||
---
|
||||
|
||||
## Principes fondamentaux pour la conception de produits B2C
|
||||
|
||||
### 1. De la « fonctionnalité » au « ressenti »
|
||||
|
||||
Les produits B2B se demandent « quel problème cette fonctionnalité résout-elle », les produits B2C se demandent « quel ressenti cette fonctionnalité procure-t-elle ».
|
||||
|
||||
| Pensée B2B | Pensée B2C |
|
||||
|---------|---------|
|
||||
| Améliorer l'efficacité | Gagner du temps pour faire ce qu'on aime |
|
||||
| Réduire les coûts | Faire en sorte que chaque euro en vaille la peine |
|
||||
| Résoudre les points de douleur | Créer des expériences agréables |
|
||||
| Fonctionnalité complète | Le ressenti est au rendez-vous |
|
||||
|
||||
### 2. Les trois niveaux de la création d'ambiance
|
||||
|
||||
**Niveau sensoriel** : conception visuelle, auditive et tactile
|
||||
- Couleurs chaleureuses
|
||||
- Sons apaisants
|
||||
- Animations fluides
|
||||
|
||||
**Niveau émotionnel** : résonance et guidage des émotions
|
||||
- Comprendre l'humeur de l'utilisateur
|
||||
- Offrir un soutien émotionnel
|
||||
- Créer des émotions positives
|
||||
|
||||
**Niveau de sens** : adhésion aux valeurs et sentiment d'appartenance
|
||||
- Faire sentir à l'utilisateur qu'il est compris
|
||||
- Créer un sentiment d'appartenance
|
||||
- Donner du sens aux actions
|
||||
|
||||
### 3. La puissance de la suggestion psychologique
|
||||
|
||||
Le texte et le design des produits B2C transmettent tous des suggestions psychologiques :
|
||||
|
||||
- **Suggestions positives** : « Tu fais déjà du bon travail », « Prends ton temps, ce n'est pas grave »
|
||||
- **Suggestions d'appartenance** : « Beaucoup de gens sont comme toi », « Tu n'es pas seul(e) »
|
||||
- **Suggestions de croissance** : « Chaque essai est un progrès », « Tu deviens meilleur(e) »
|
||||
|
||||
### 4. Permettre aux utilisateurs de devenir la meilleure version d'eux-mêmes
|
||||
|
||||
Le meilleur produit B2C ne change pas l'utilisateur, il l'aide à devenir la personne qu'il souhaite être.
|
||||
|
||||
- Pas « tu devrais... », mais « tu peux... »
|
||||
- Pas « tu dois... », mais « si tu le souhaites... »
|
||||
- Pas « tu n'es pas encore assez... », mais « tu es déjà... »
|
||||
|
||||
---
|
||||
|
||||
> 🌟 **Rappelez-vous** : les utilisateurs B2C n'achètent pas des fonctionnalités, ils achètent des sensations ; pas des outils, mais de la compagnie ; pas des services, mais de la compréhension.
|
||||
@@ -0,0 +1 @@
|
||||
../../../../zh-cn/stage-1/appendix-consumer-scenarios/images
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,542 @@
|
||||
---
|
||||
title: "Le modèle Double Diamond : faire d'abord les bonnes choses, puis faire les choses correctement"
|
||||
description: "Article d'introduction au Double Diamond pour les lecteurs débutants. Comprendre les quatre phases Discover, Define, Develop, Deliver, et éviter de se précipiter dans les prototypes avant d'avoir compris le problème."
|
||||
---
|
||||
|
||||
<script setup>
|
||||
const duration = 'Environ <strong>1,5 heure</strong>'
|
||||
</script>
|
||||
|
||||
# Le modèle Double Diamond : faire d'abord les bonnes choses, puis faire les choses correctement
|
||||
|
||||
<a id="top-dd"></a>
|
||||
|
||||
## Introduction du chapitre
|
||||
|
||||
<ChapterIntroduction
|
||||
:duration="duration"
|
||||
:tags="['Double Diamond', 'Design Thinking', 'Analyse des besoins', 'Conception de solutions']"
|
||||
coreOutput="1 définition de problème plus claire et 1 point d'entrée de validation plus raisonnable"
|
||||
expectedOutput="Ne plus se précipiter pour dessiner des prototypes, mais savoir d'abord clarifier le problème avant de comparer les solutions"
|
||||
>
|
||||
|
||||
Beaucoup de gens, lorsqu'ils créent un produit pour la première fois, le piège le plus courant n'est pas « ne pas travailler assez dur », mais de passer trop vite à la solution.
|
||||
|
||||
À peine une direction a-t-elle germé dans leur esprit qu'ils commencent à penser : comment dessiner les pages, où placer les boutons, faut-il intégrer l'IA, faut-il faire un système de connexion, quel outil utiliser pour les prototypes. Après s'être agité un moment, ils se rendent compte que le problème fondamental n'a jamais été vraiment clarifié : les utilisateurs ont-ils vraiment ce point de douleur ? Ce problème mérite-t-il d'être résolu maintenant ? Vous pensiez faire avancer le projet, mais en réalité vous accélérez juste dans la mauvaise direction.
|
||||
|
||||
Le modèle Double Diamond est conçu pour éviter ce genre de situation.
|
||||
|
||||
Son rappel le plus précieux est : **« faire les bonnes choses » et « faire les choses correctement » sont deux étapes complètement différentes.** Si vous n'avez pas encore compris le problème et que vous vous précipitez pour faire un prototype, vous ne ferez généralement que rendre la mauvaise direction plus complète.
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
::: info SOP minimale
|
||||
**Objectif** : après avoir lu, vous saurez mieux quand réfléchir d'abord au problème et quand commencer à penser aux solutions et aux prototypes, évitant ainsi de travailler dur dans la mauvaise direction dès le début.
|
||||
|
||||
**Actions** : suivez les quatre étapes `Discover → Define → Develop → Deliver`, en ne faisant à chaque étape que ce qui est nécessaire.
|
||||
|
||||
**Résultat** : vous obtiendrez une définition de problème plus claire, plusieurs solutions comparables, et une version minimale validable.
|
||||
|
||||
**Navigation rapide** : [Qu'est-ce que le Double Diamond](#dd-what) · [Le premier diamant](#dd-first) · [Comment l'IA peut vous aider](#dd-ai)
|
||||
:::
|
||||
|
||||
## Ce que vous apprendrez
|
||||
|
||||
1. Qu'est-ce que le modèle Double Diamond, et pourquoi il est adapté aux débutants en création de produit
|
||||
2. Ce que font les quatre phases Discover, Define, Develop, Deliver
|
||||
3. Comment distinguer « je devrais continuer à diverger » de « je devrais commencer à converger »
|
||||
4. Comment appliquer le modèle Double Diamond aux produits AI, à la conception de prototypes et à la validation des besoins
|
||||
|
||||
<a id="dd-what"></a>
|
||||
## [1. Qu'est-ce que le modèle Double Diamond](#top-dd)
|
||||
|
||||
Le modèle Double Diamond est un cadre de processus de design classique promu par le **Design Council** britannique. Il représente un processus complet de design et d'innovation sous la forme de deux diamants consécutifs.
|
||||
|
||||
La raison pour laquelle c'est des « diamants » est que chaque diamant comprend deux actions opposées mais toutes deux importantes :
|
||||
|
||||
- **Divergence** : élargir d'abord la vision, voir plus de possibilités
|
||||
- **Convergence** : réduire ensuite le périmètre, prendre des décisions et faire des compromis
|
||||
|
||||
Le processus complet se déroule en quatre étapes :
|
||||
|
||||
1. **Discover** : comprendre largement les utilisateurs, les problèmes, l'environnement et le marché
|
||||
2. **Define** : extraire des masses d'informations le problème central véritablement digne d'être résolu
|
||||
3. **Develop** : diverger autour du problème central pour trouver plusieurs solutions
|
||||
4. **Deliver** : filtrer, prototyper, tester et livrer la solution la plus appropriée
|
||||
|
||||
Si l'on compresse ces quatre étapes en une seule phrase facile à retenir :
|
||||
|
||||
- **Le premier diamant** : comprendre d'abord quel problème résoudre exactement
|
||||
- **Le deuxième diamant** : décider ensuite quelle solution utiliser pour le résoudre
|
||||
|
||||
C'est aussi la phrase que vous avez prononcée avec justesse :
|
||||
|
||||
- **Le premier diamant : faire les bonnes choses**
|
||||
- **Le deuxième diamant : faire les choses correctement**
|
||||
|
||||
## 2. Pourquoi le modèle Double Diamond est particulièrement adapté aux débutants
|
||||
|
||||
Le rythme le plus courant chez les débutants en création de produit ressemble souvent à ça :
|
||||
|
||||
- Avoir une idée
|
||||
- Trouver la direction cool
|
||||
- Commencer immédiatement à dessiner des prototypes
|
||||
- En construisant, découvrir que les fonctionnalités se multiplient
|
||||
- Finalement, ne plus savoir quel problème on résout
|
||||
|
||||
La valeur du modèle Double Diamond n'est pas de rendre le processus plus complexe, mais de **vous forcer à séparer « comprendre le problème » et « concevoir la solution »**.
|
||||
|
||||
Cela semble banal, mais c'est en réalité très important. Parce que beaucoup de produits qui échouent ne le font pas par manque d'effort, mais parce que :
|
||||
|
||||
- Ils ont choisi le mauvais problème
|
||||
- Ils ont mal compris les utilisateurs
|
||||
- Ils ont verrouillé une solution trop tôt
|
||||
- Ils ont passé beaucoup de temps à peaufiner les détails sans valider la direction
|
||||
|
||||
Le modèle Double Diamond vous rappelle constamment :
|
||||
|
||||
- Ne présumez pas que le problème est établi juste parce que l'idée semble bonne
|
||||
- Ne présumez pas que la solution mérite d'être réalisée juste parce qu'elle est réalisable
|
||||
- Ne présumez pas que les utilisateurs en auront vraiment besoin juste parce que le prototype paraît complet
|
||||
|
||||
<a id="dd-first"></a>
|
||||
## [3. Le premier diamant : faire les bonnes choses](#top-dd)
|
||||
|
||||
Le premier diamant se concentre sur **le problème lui-même**, pas sur la solution.
|
||||
|
||||
Vous pouvez le résumer en une phrase : **ne vous précipitez pas, déterminez d'abord si ça vaut la peine d'être fait.**
|
||||
|
||||
### 3.1 Discover : ouvrir d'abord l'espace du problème
|
||||
|
||||
La tâche centrale de la phase Discover est de **faire une recherche large, pas de tirer des conclusions rapides**.
|
||||
|
||||
Les activités typiques de cette étape incluent :
|
||||
|
||||
- Observer comment les utilisateurs se comportent dans des scénarios réels
|
||||
- Interviewer des utilisateurs potentiels pour comprendre quand ils ont rencontré le problème pour la dernière fois
|
||||
- Observer comment ils se débrouillent actuellement
|
||||
- Examiner comment les concurrents et les alternatives gèrent la situation
|
||||
- Collecter des informations sur le marché, les processus, les contraintes, la chaîne de valeur
|
||||
|
||||
Beaucoup de gens pensent à tort que Discover consiste à « lire plus de documentation ». En réalité, ce qui est plus crucial, c'est : **vous devez comprendre les personnes et les contextes, pas juste accumuler des informations.**
|
||||
|
||||
Par exemple, si vous voulez créer un outil « AI qui aide à organiser les comptes rendus de réunion », en phase Discover, il serait plus pertinent de se concentrer sur :
|
||||
|
||||
- Où les utilisateurs souffrent-ils le plus après une réunion
|
||||
- Est-ce la prise de notes, l'organisation, ou la synchronisation qui est difficile
|
||||
- Est-ce qu'ils écrivent eux-mêmes, demandent à des stagiaires, réécoutent les enregistrements, ou ne font simplement pas de compte rendu
|
||||
- Quels types de réunions nécessitent le plus un compte rendu, lesquels n'en ont pas besoin du tout
|
||||
|
||||
L'objectif le plus important de cette étape n'est pas d'obtenir une réponse, mais de **ne pas supposer trop tôt que vous connaissez déjà la réponse.**
|
||||
|
||||
### 3.2 Define : extraire le problème central de la masse d'informations
|
||||
|
||||
Si Discover est l'ouverture, Define est le recentrage.
|
||||
|
||||
La phase Define ne consiste pas à conserver toutes les observations, mais à se demander :
|
||||
|
||||
- Quel est le problème véritablement prioritaire à résoudre
|
||||
- Quel problème est le plus fréquent, le plus douloureux, le plus porteur de valeur
|
||||
- Quelle est la seule scène à cibler pour la première version
|
||||
|
||||
L'essence de cette étape est de transformer un sujet large en une définition de problème claire.
|
||||
|
||||
Par exemple, au début vous disiez :
|
||||
|
||||
> Je veux créer un outil AI pour améliorer l'efficacité des réunions.
|
||||
|
||||
En phase Define, une meilleure formulation pourrait devenir :
|
||||
|
||||
> Nous allons d'abord résoudre le problème des équipes projet qui, après des réunions collaboratives de 30 à 60 minutes, ne parviennent pas à produire en 10 minutes un compte rendu incluant les tâches, les responsables et les délais.
|
||||
|
||||
À ce stade, le problème commence à devenir clair :
|
||||
|
||||
- Qui est l'utilisateur
|
||||
- Quel est le contexte
|
||||
- Quel est le blocage
|
||||
- Quel est le critère de succès
|
||||
|
||||
L'essence de Define est de **passer de « beaucoup de problèmes » à « quel problème résoudre en premier cette fois-ci ».**
|
||||
|
||||
## 4. Le deuxième diamant : faire les choses correctement
|
||||
|
||||
Ce n'est qu'après avoir terminé le premier diamant qu'il est vraiment approprié d'entrer dans le deuxième. Parce qu'à ce stade, vous ne résolvez pas une direction vague, mais un problème spécifique qui a été cerné.
|
||||
|
||||
### 4.1 Develop : diverger les solutions autour du problème central
|
||||
|
||||
L'accent de la phase Develop est de **plorer plusieurs solutions possibles pour le même problème**.
|
||||
|
||||
Notez que cette divergence est différente de celle de la phase Discover.
|
||||
|
||||
- La divergence de Discover explore l'espace des problèmes
|
||||
- La divergence de Develop explore l'espace des solutions
|
||||
|
||||
Par exemple, pour le cas du compte rendu de réunion, en phase Develop, vous pouvez commencer à penser :
|
||||
|
||||
- Faire un outil web ou un plugin de réunion
|
||||
- Traiter après upload de l'enregistrement ou faire une prise de notes en temps réel
|
||||
- Ne faire que des résumés ou se concentrer sur l'extraction des tâches
|
||||
- Mettre l'accent sur l'efficacité individuelle ou la synchronisation d'équipe
|
||||
- Donner aux utilisateurs la liberté d'éditer ou produire directement un modèle structuré
|
||||
|
||||
Cette étape se prête bien au brainstorming, et aussi à l'élargissement des solutions avec l'équipe.
|
||||
|
||||
Mais il y a un prérequis : **toutes les solutions doivent servir le même problème déjà défini.**
|
||||
Si le problème n'est pas clairement défini, Develop risque de redevenir une dispersion de fonctionnalités.
|
||||
|
||||
### 4.2 Deliver : choisir la solution, faire le prototype, tester et livrer
|
||||
|
||||
La phase Deliver est l'étape de convergence du deuxième diamant.
|
||||
|
||||
Ce qu'il faut faire ici n'est pas de continuer à imaginer plus, mais de commencer à juger :
|
||||
|
||||
- Quelle solution est la plus adaptée à la phase actuelle
|
||||
- Quelle version est la plus petite mais la plus utile
|
||||
- Quelles fonctionnalités sont essentielles d'abord, lesquelles peuvent attendre
|
||||
- Comment prototyper, tester et valider à petite échelle
|
||||
|
||||
Beaucoup de gens pensent que Deliver équivaut à « mise en ligne ». En réalité, son sens plus précis est : **transformer une solution en quelque chose de testable, de validable et d'itérable.**
|
||||
|
||||
Cela peut être :
|
||||
|
||||
- Un flux basse fidélité
|
||||
- Un prototype Figma
|
||||
- Un MVP fonctionnel
|
||||
- Un test utilisateur à petite échelle
|
||||
- Une version itérée après des retours réels
|
||||
|
||||
L'essentiel de Deliver n'est pas la « livraison parfaite », mais de **mettre la solution dans un environnement réel pour validation aussi rapidement que possible.**
|
||||
|
||||
## 5. Un tableau comparatif facile à retenir
|
||||
|
||||
Si vous n'arrivez jamais à distinguer les quatre phases, retenez simplement cette version :
|
||||
|
||||
| Phase | Ce que vous faites | Mots-clés | Produits courants |
|
||||
| --- | --- | --- | --- |
|
||||
| Discover | Comprendre le problème | Recherche, observation, entretiens, collecte d'informations | Insights utilisateurs, notes de contexte, liste de problèmes |
|
||||
| Define | Définir le problème | Synthèse, focalisation, compromis, reformulation | Définition du problème, priorités, point d'entrée MVP |
|
||||
| Develop | Explorer les solutions | Brainstorming, comparaison, co-création, hypothèses de prototype | Liste de solutions, schémas de flux, direction de prototype |
|
||||
| Deliver | Valider les solutions | Prototypage, tests, itération, livraison | Prototype, retours de test, version optimisée |
|
||||
|
||||
Compressé encore plus, cela donne :
|
||||
|
||||
- **Discover / Define** : résoudre « faire les bonnes choses »
|
||||
- **Develop / Deliver** : résoudre « faire les choses correctement »
|
||||
|
||||
## 6. Les malentendus les plus courants sur le modèle Double Diamond
|
||||
|
||||
### 6.1 Passer directement à Deliver sans Discover
|
||||
|
||||
C'est le cas le plus fréquent. Beaucoup de gens, à peine ont-ils une idée, se mettent à dessiner des prototypes, rédiger des PRD, intégrer des modèles, créer des pages.
|
||||
|
||||
Le problème n'est pas que vous ne travaillez pas sérieusement, mais que vous n'avez peut-être même pas confirmé si le problème mérite d'être résolu.
|
||||
|
||||
### 6.2 Faire beaucoup de Discover, mais jamais Define
|
||||
|
||||
L'autre extrême est de toujours faire des recherches, lire des documents, interviewer, sans jamais oser converger.
|
||||
|
||||
Le Double Diamond ne vous demande pas de diverger indéfiniment, mais vous rappelle : après la divergence, il faut entrer dans le jugement et les compromis.
|
||||
|
||||
### 6.3 Après Define, modifier subrepticement le problème
|
||||
|
||||
Beaucoup d'équipes, en phase Develop, modifient la définition du problème pour l'adapter à une solution plus facile à réaliser.
|
||||
|
||||
C'est dangereux. Vous n'êtes peut-être plus en train de résoudre le problème, mais en train de trouver des justifications pour la solution que vous préférez.
|
||||
|
||||
### 6.4 Confondre Deliver avec « mise en ligne complète »
|
||||
|
||||
Deliver ne signifie pas qu'il faut terminer le produit complet. Très souvent, un prototype testable ou un essai utilisateur réel constitue déjà un bon deliver.
|
||||
|
||||
## 7. Comment utiliser le modèle Double Diamond dans les produits AI
|
||||
|
||||
Les produits AI tombent particulièrement facilement dans le piège du « capacités d'abord », parce que les capacités des modèles semblent très alléchantes. Vous aurez envie de penser directement :
|
||||
|
||||
- Faut-il intégrer le multimodal
|
||||
- Faut-il faire un Agent
|
||||
- Faut-il ajouter des workflows
|
||||
- Faut-il intégrer la voix, l'image, la recherche en ligne
|
||||
|
||||
Mais le modèle Double Diamond vous oblige à demander d'abord :
|
||||
|
||||
- Où les utilisateurs sont-ils vraiment bloqués
|
||||
- Ce blocage nécessite-t-il absolument l'IA
|
||||
- Sans IA, qu'est-ce qui manque le plus dans les méthodes actuelles
|
||||
- Une fois l'IA ajoutée, quel est le progrès le plus essentiel
|
||||
|
||||
Cela vous aide à éviter une situation courante : **capacités puissantes, valeur faible.**
|
||||
|
||||
Un ordre pratique serait :
|
||||
|
||||
1. En phase Discover, observer comment les utilisateurs gèrent les tâches actuellement
|
||||
2. En phase Define, écrire le scénario le plus douloureux en une définition de problème claire
|
||||
3. En phase Develop, comparer quelles capacités AI sont les plus adaptées à ce problème
|
||||
4. En phase Deliver, construire une version minimale et la faire tester par de vrais utilisateurs
|
||||
|
||||
## 8. Un modèle Double Diamond prêt à l'emploi
|
||||
|
||||
Si vous êtes en train de créer votre propre produit, vous pouvez suivre cet ordre :
|
||||
|
||||
### Discover
|
||||
|
||||
- Qui sont les utilisateurs que j'ai observés ?
|
||||
- Quand est la dernière fois qu'ils ont rencontré ce problème ?
|
||||
- Comment le résolvent-ils actuellement ?
|
||||
- Où est-ce le plus pénible, le plus lent, le plus angoissant ?
|
||||
|
||||
### Define
|
||||
|
||||
- Parmi tous ces problèmes, lequel mérite le plus d'être résolu en priorité ?
|
||||
- Quel scénario est le plus fréquent ou le plus crucial ?
|
||||
- Qui et quoi servirons-nous uniquement dans la première version ?
|
||||
- Une fois le problème résolu, quel sera le changement d'état de l'utilisateur ?
|
||||
|
||||
### Develop
|
||||
|
||||
- Pour ce problème, quelles solutions sont possibles ?
|
||||
- Quelles sont les plus légères, les plus rapides, les plus faciles à valider ?
|
||||
- Qu'est-ce qui est indispensable, qu'est-ce qui peut attendre ?
|
||||
|
||||
### Deliver
|
||||
|
||||
- Que pouvons-nous livrer au minimum pour valider cette direction ?
|
||||
- Un flux, un prototype, ou un MVP ?
|
||||
- Qui devons-nous trouver pour tester ?
|
||||
- Après le test, comment décider : continuer, modifier ou abandonner ?
|
||||
|
||||
## 9. Un exemple compréhensible même par un débutant
|
||||
|
||||
Supposons que vous voulez créer un outil AI pour « aider les étudiants à préparer leur CV de candidature ».
|
||||
|
||||
Beaucoup de gens entreraient directement dans le deuxième diamant, commençant à penser :
|
||||
|
||||
- Faut-il embellir en un clic
|
||||
- Faut-il faire de la réécriture intelligente
|
||||
- Faut-il faire correspondre automatiquement avec l'offre d'emploi
|
||||
- Faut-il générer une lettre de motivation
|
||||
|
||||
Mais selon le modèle Double Diamond, un meilleur processus serait :
|
||||
|
||||
### Premier diamant
|
||||
|
||||
**Discover**
|
||||
|
||||
- Aller parler aux diplômés récents pour savoir quand ils ont modifié leur CV pour la dernière fois
|
||||
- Voir comment ils transforment l'ancien CV en nouvelle version
|
||||
- Comprendre s'ils sont surtout gênés par « ne pas savoir écrire », « ne pas savoir modifier », ou « ne pas savoir juger si c'est bien »
|
||||
|
||||
**Define**
|
||||
|
||||
- Converger vers un problème plus spécifique :
|
||||
- Ce n'est pas « les étudiants ne savent pas faire de CV »
|
||||
- Mais « les étudiants qui postulent pour la première fois à un stage ont du mal à reformuler leurs expériences existantes en formulations adaptées au poste, ce qui les pousse à retarder leur candidature »
|
||||
|
||||
### Deuxième diamant
|
||||
|
||||
**Develop**
|
||||
|
||||
- Imaginer plusieurs solutions : bibliothèque de modèles, réécriture AI, comparaison avec l'offre, notation du CV, exemples de référence
|
||||
|
||||
**Deliver**
|
||||
|
||||
- La première version ne fait que « reformuler les points d'expérience en fonction de la description du poste »
|
||||
- La faire tester par 5 étudiants, pour voir s'ils soumettent leur première version de CV plus rapidement
|
||||
|
||||
Vous constaterez que, une fois le premier diamant bien fait, le deuxième devient beaucoup plus clair.
|
||||
|
||||
## 10. Résumé
|
||||
|
||||
La force du modèle Double Diamond réside dans le fait qu'il vous aide à décomposer un ensemble chaotique en quatre actions plus claires :
|
||||
|
||||
- D'abord, diverger pour comprendre le problème
|
||||
- Puis, converger pour définir le problème
|
||||
- Ensuite, diverger pour explorer les solutions
|
||||
- Enfin, converger pour livrer la solution
|
||||
|
||||
Il ne vous ralentit pas, il vous fait **gagner les détours qui donnent l'impression d'être occupé mais vont dans la mauvaise direction.**
|
||||
|
||||
Surtout à l'ère de l'IA, où créer des choses devient de plus en plus rapide, le modèle Double Diamond devient encore plus important. Parce que quand « produire » devient de plus en plus facile, la capacité vraiment rare sera : **êtes-vous en train de résoudre un problème qui mérite d'être résolu, et le faites-vous de la bonne manière.**
|
||||
|
||||
Retenez juste cette phrase :
|
||||
|
||||
**Faites d'abord les bonnes choses, puis faites les choses correctement.**
|
||||
|
||||
<a id="dd-ai"></a>
|
||||
## [11. Comment utiliser l'IA pour piloter votre processus Double Diamond](#top-dd)
|
||||
|
||||
Le modèle Double Diamond n'est pas un outil AI en soi, mais l'IA est très bien adaptée pour servir d'« accélérateur » dans les quatre phases. L'essentiel n'est pas de laisser l'IA décider à votre place, mais de l'utiliser pour élargir votre vision, organiser les informations, comparer les solutions et générer du matériel de validation.
|
||||
|
||||
### 11.1 En phase Discover, utilisez l'IA pour préparer le terrain
|
||||
|
||||
Avant les entretiens et la recherche formels, vous pouvez demander à l'IA de faire un balayage léger des problèmes, comme :
|
||||
|
||||
- Quelles alternatives existent sur le marché
|
||||
- De quoi les utilisateurs se plaignent-ils le plus dans les communautés publiques
|
||||
- Dans quels contextes et pour quels publics ce problème est-il courant
|
||||
- Que les produits existants négligent-ils souvent
|
||||
|
||||
Cette étape ne remplace pas la recherche terrain, mais elle est idéale pour construire rapidement une carte des problèmes.
|
||||
|
||||
Une entrée très simple pour un débutant pourrait être :
|
||||
|
||||
```text
|
||||
Je veux créer un outil pour aider les étudiants à modifier leur CV.
|
||||
Ne me proposez pas de fonctionnalités, aidez-moi d'abord à voir quels problèmes les gens rencontrent le plus souvent.
|
||||
```
|
||||
|
||||
L'IA pourrait répondre :
|
||||
|
||||
```text
|
||||
Carte préliminaire des problèmes :
|
||||
|
||||
1. Ne sait pas quelles expériences mentionner
|
||||
2. Ne sait pas comment adapter le CV pour chaque poste
|
||||
3. Après de nombreuses modifications, on n'est toujours pas sûr que c'est bien
|
||||
4. On a besoin de quelqu'un pour relire, mais on ne veut pas déranger
|
||||
5. Parce qu'on n'est pas sûr, on retarde l'envoi
|
||||
```
|
||||
|
||||
Ce type de résultat ne remplace pas vos conclusions, mais vous permet d'entrer plus vite dans le Discover.
|
||||
|
||||
### 11.2 En phase Define, laissez l'IA vous aider à converger vers une définition du problème
|
||||
|
||||
Beaucoup de gens, après avoir collecté beaucoup de matériel, trouvent la partie la plus difficile de condenser le problème en une phrase vraiment claire. Vous pouvez confier vos notes de recherche à l'IA et lui demander de les compresser en plusieurs définitions candidates :
|
||||
|
||||
```text
|
||||
Voici les retours utilisateurs et les notes de recherche que j'ai collectés en phase Discover :
|
||||
[insérez le contenu]
|
||||
|
||||
Merci de m'aider à faire trois choses :
|
||||
1. Identifier les modèles de problèmes les plus fréquents
|
||||
2. Classer 3 problèmes prioritaires par fréquence, intensité de douleur et validabilité
|
||||
3. Écrire chaque problème en une définition spécifique
|
||||
```
|
||||
|
||||
Vous pouvez même écrire une entrée très simple :
|
||||
|
||||
```text
|
||||
Les problèmes que j'ai collectés sont :
|
||||
1. Les gens ne savent pas quoi mettre dans leur CV
|
||||
2. Les gens ne savent pas comment le modifier
|
||||
3. Les gens trouvent toujours que ce n'est pas assez bien et n'osent pas l'envoyer
|
||||
|
||||
Lequel est le plus adapté pour une première version ?
|
||||
```
|
||||
|
||||
L'IA pourrait répondre :
|
||||
|
||||
```text
|
||||
Problème recommandé en priorité :
|
||||
|
||||
« Les étudiants qui postulent pour la première fois à un stage ne sont pas sûrs que leur CV est au niveau requis pour être envoyé, ce qui les pousse à modifier sans cesse et à retarder leur candidature. »
|
||||
|
||||
Raisons :
|
||||
1. Ce problème est plus spécifique
|
||||
2. Il explique le comportement de procrastination
|
||||
3. Il est plus facile de concevoir une petite version pour le valider
|
||||
```
|
||||
|
||||
Ce type de résultat est utile parce qu'il vous aide à passer d'un ensemble de problèmes flous à une définition plus proche d'un point de départ MVP.
|
||||
|
||||
### 11.3 En phase Develop, utilisez l'IA pour diverger sur plusieurs solutions
|
||||
|
||||
Beaucoup de gens, une fois le problème défini, ne se concentrent que sur la première solution qui leur vient à l'esprit. L'IA est idéale ici pour vous forcer à diverger :
|
||||
|
||||
```text
|
||||
J'ai défini un problème central : [votre définition du problème]
|
||||
Ne me donnez pas une seule réponse finale, mais proposez 2-3 directions de solution pour chacun des angles suivants :
|
||||
1. Le MVP le plus léger
|
||||
2. La solution la plus adaptée pour valider le besoin
|
||||
3. La solution la plus adaptée pour améliorer l'expérience
|
||||
4. Une solution sans IA
|
||||
5. Une solution avec IA
|
||||
Enfin, comparez les avantages, les risques et les coûts de validation de chaque solution.
|
||||
```
|
||||
|
||||
Ainsi, vous ne vous enfermerez pas trop tôt dans une seule solution.
|
||||
|
||||
Une entrée simple pourrait être :
|
||||
|
||||
```text
|
||||
Ma définition du problème est :
|
||||
« Les étudiants ne sont pas sûrs que leur CV est prêt à être envoyé, donc ils retardent. »
|
||||
|
||||
Proposez-moi 4 solutions différentes, pas une seule.
|
||||
```
|
||||
|
||||
L'IA pourrait répondre :
|
||||
|
||||
```text
|
||||
Solution 1 : Checklist de validation du CV
|
||||
Solution 2 : Réécriture ciblée en fonction de la description du poste
|
||||
Solution 3 : Upload du CV avec indicateurs de risque
|
||||
Solution 4 : Comparaison avec des exemples de qualité pour aider à évaluer l'écart
|
||||
```
|
||||
|
||||
Vous êtes alors plus en mesure d'entrer dans la « comparaison de solutions » au lieu de ne vous concentrer que sur la réécriture AI.
|
||||
|
||||
### 11.4 En phase Deliver, utilisez l'IA pour générer des textes de prototype et du matériel de test
|
||||
|
||||
Quand vous entrez en phase Deliver, l'IA est très adaptée pour accélérer ces tâches :
|
||||
|
||||
- Générer les textes de pages pour un prototype basse fidélité
|
||||
- Organiser un script de test utilisateur
|
||||
- Générer plusieurs versions comparables de titres, boutons, descriptions
|
||||
- Synthétiser les retours post-test en liste de problèmes
|
||||
|
||||
Par exemple, vous pouvez demander à l'IA de générer un script de test utilisateur de 20 minutes, ou de classer les retours de 5 utilisateurs en « continuer / changer de direction / mettre en pause ».
|
||||
|
||||
Une entrée minimale pourrait être :
|
||||
|
||||
```text
|
||||
J'ai fait un prototype très simple :
|
||||
l'utilisateur uploade son CV, le système lui indique quels éléments ne sont pas encore prêts pour l'envoi.
|
||||
|
||||
Générez-moi un script de test utilisateur de 15 minutes.
|
||||
```
|
||||
|
||||
L'IA pourrait répondre :
|
||||
|
||||
```text
|
||||
Script de test de 15 minutes :
|
||||
|
||||
1. D'abord, demandez à l'utilisateur de décrire sa dernière expérience de candidature
|
||||
2. Laissez l'utilisateur uploader son CV de manière autonome
|
||||
3. Observez s'il comprend les résultats du retour
|
||||
4. Demandez : parmi ces indications, lesquelles sont les plus utiles, lesquelles sont confuses
|
||||
5. Demandez : avant la prochaine candidature, aimeriez-vous réutiliser cet outil
|
||||
```
|
||||
|
||||
Ce type de résultat est pratique parce qu'il vous fait passer de « j'ai fini mon prototype » à « comment je le teste ensuite ».
|
||||
|
||||
### 11.5 Laissez l'IA jouer le rôle de « gardien des phases »
|
||||
|
||||
Le problème le plus courant du modèle Double Diamond est que les gens sautent les étapes. Vous pouvez demander à l'IA de jouer un gardien, pour vous rappeler où vous êtes vraiment :
|
||||
|
||||
```text
|
||||
Merci de jouer le rôle de coach en processus produit.
|
||||
Voici l'état actuel de mon projet : [votre description]
|
||||
Déterminez si je suis plutôt en Discover, Define, Develop ou Deliver.
|
||||
Et dites-moi :
|
||||
1. Est-ce que j'ai sauté une étape trop tôt
|
||||
2. Quelle est l'action la plus importante à compléter à l'étape actuelle
|
||||
3. Quelles choses je ne dois pas faire pour l'instant
|
||||
```
|
||||
|
||||
C'est particulièrement utile pour les débutants, car il est facile de « commencer à dessiner des prototypes avant d'avoir clarifié le problème ».
|
||||
|
||||
## 📚 Exercices
|
||||
|
||||
En vous basant sur le contenu ci-dessus, veuillez réaliser les exercices suivants :
|
||||
|
||||
1. Choisissez une idée produit que vous avez récemment, et rédigez le brouillon des quatre étapes Discover, Define, Develop, Deliver
|
||||
2. En phase Define, forcez-vous à réduire le problème à une phrase spécifique
|
||||
3. En phase Develop, listez au moins 3 solutions différentes, au lieu de ne vous concentrer que sur la première idée venue
|
||||
4. En phase Deliver, écrivez une version minimale validable livrable en une semaine
|
||||
|
||||
## Lectures complémentaires
|
||||
|
||||
Cet article s'inspire principalement des ressources officielles du Design Council sur le Double Diamond, idéales pour approfondir :
|
||||
|
||||
- [Design Council : The Double Diamond](https://www.designcouncil.org.uk/our-resources/the-double-diamond/)
|
||||
- [Design Council : Framework for Innovation](https://www.designcouncil.org.uk/our-work/skills-learning/tools-frameworks/framework-for-innovation-design-councils-evolved-double-diamond/)
|
||||
- [Design Council : History of the Double Diamond](https://www.designcouncil.org.uk/our-resources/the-double-diamond/history-of-the-double-diamond/)
|
||||
@@ -0,0 +1,301 @@
|
||||
---
|
||||
title: "Où trouver des idées : 3 sources de référence idéales pour les débutants"
|
||||
description: "Article d'introduction sur les sources d'idées produit pour les lecteurs débutants. Recense les sites web idéaux pour parcourir des idées, les sources de tendances, les sources d'activités réelles et les listes VC, pour vous aider à trouver rapidement une direction plus concrète à partir de liens."
|
||||
---
|
||||
|
||||
<script setup>
|
||||
const duration = 'Environ <strong>1,5 heure</strong>'
|
||||
</script>
|
||||
|
||||
# Où trouver des idées : 3 sources de référence idéales pour les débutants
|
||||
|
||||
<a id="top-idea-sources"></a>
|
||||
|
||||
## Introduction du chapitre
|
||||
|
||||
<ChapterIntroduction
|
||||
:duration="duration"
|
||||
:tags="['Trouver des idées', 'Direction produit', 'Découverte de besoins', 'Observation sectorielle']"
|
||||
coreOutput="1 direction produit plus concrète et digne d'investigation"
|
||||
expectedOutput="Savoir où chercher, comment regarder, par quoi commencer — ne plus se contenter d'idées vides comme « AI + secteur X »"
|
||||
>
|
||||
|
||||
Beaucoup de gens restent bloqués à la première étape, non pas parce qu'ils manquent totalement d'inspiration, mais parce qu'après avoir parcouru beaucoup de contenu, il ne reste dans leur esprit que de grands concepts :
|
||||
|
||||
- AI for education
|
||||
- AI for healthcare
|
||||
- AI for finance
|
||||
- AI agent for business
|
||||
|
||||
Ce ne sont pas encore des idées. Elles vous disent simplement « la direction est vaste », sans vous dire :
|
||||
|
||||
- Qui l'utilise
|
||||
- Dans quel contexte
|
||||
- Comment les gens s'en sortent actuellement
|
||||
- Quelle étape mérite d'être attaquée en premier
|
||||
|
||||
Cet article ne présente pas de méthodologie abstraite, mais compile directement un ensemble de sources plus utiles.
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
::: info SOP minimale
|
||||
**Objectif** : après avoir lu, vous saurez où aller chercher quand vous n'avez pas d'idées, quels liens consulter pour les « besoins concrets », lesquels pour les « tendances », et lesquels pour les « activités réelles ».
|
||||
|
||||
**Actions** : parcourez d'abord une liste d'idées, puis consultez des petits produits rentables, ensuite les tendances et les sources plus opérationnelles, et enfin gardez 1 direction que vous êtes prêt à approfondir.
|
||||
|
||||
**Résultat** : vous obtiendrez 1 direction plus concrète, digne de validation, au lieu de rester sur de grands concepts.
|
||||
|
||||
**Navigation rapide** : [Liste d'applications de référence](#idea-apps) · [Sources de tendances](#idea-trends) · [Sources plus opérationnelles](#idea-business) · [Sources VC / accélérateurs](#idea-vc) · [Chemin le plus court](#idea-path) · [Comment l'IA peut vous aider](#idea-ai)
|
||||
:::
|
||||
|
||||
## Ce que vous apprendrez
|
||||
|
||||
1. Quels sites web sont idéaux pour parcourir directement des idées
|
||||
2. Quels sites permettent de voir des petits produits déjà rentables
|
||||
3. Quelles sources conviennent pour observer les tendances et les évolutions sectorielles
|
||||
4. Quelles sources sont plus proches des activités réelles et des paiements réels
|
||||
5. Un chemin le plus court adapté aux débutants
|
||||
|
||||
<a id="idea-apps"></a>
|
||||
## [1. Liste d'applications de référence : voyez d'abord ce que les autres font déjà](#top-idea-sources)
|
||||
|
||||
C'est le meilleur point de départ pour les débutants, car c'est le plus concret.
|
||||
|
||||
### Premier niveau : des listes d'idées directement accessibles
|
||||
|
||||
- [Reddit — r/SomebodyMakeThis](https://www.reddit.com/r/SomebodyMakeThis/)
|
||||
L'utilisation principale de ce subreddit est : de vrais utilisateurs postent directement « j'aimerais que quelqu'un crée un XX ». Chaque post est généralement un besoin produit concret, souvent accompagné d'une description de contexte. Triez par `Top -> Past Month` ou `Top -> Past Year`, et en 20 minutes vous pourrez balayer un ensemble de besoins réels.
|
||||
- [Reddit — r/AppIdeas](https://www.reddit.com/r/AppIdeas/)
|
||||
Similaire au précédent, mais plus orienté logiciel/App. Le format courant est « j'ai besoin d'une application qui fait XX », avec un niveau de détail plus fin, beaucoup de niches petites mais intéressantes.
|
||||
- [Reddit — r/Startup_Ideas](https://www.reddit.com/r/Startup_Ideas/)
|
||||
Plus complet que les deux précédents. Beaucoup de posts ne sont pas qu'une seule phrase de besoin, mais incluent une analyse de marché, un modèle économique et pourquoi c'est le bon moment.
|
||||
- [Unvalidated Ideas](https://unvalidatedideas.com/)
|
||||
Publie chaque semaine des idées de startup non validées. Les champs courants incluent le public cible, le mode de monétisation et les pistes de validation initiale. Format uniforme, idéal pour un parcours rapide.
|
||||
- [IdeasAI](https://ideasai.com/)
|
||||
Génère des idées de startup par AI, on peut naviguer indéfiniment. La qualité est inégale, mais c'est parfait pour stimuler l'inspiration quand on est « complètement bloqué », avant de creuser soi-même dans des scénarios plus spécifiques.
|
||||
|
||||
### Deuxième niveau : voyez les petits produits rentables que d'autres ont déjà créés, et déduisez des idées
|
||||
|
||||
La logique de ces plateformes est : d'autres ont déjà validé le besoin, voire gagnent déjà de l'argent. Vous les consultez non pas pour copier, mais pour voir « quels petits problèmes génèrent déjà des paiements ».
|
||||
|
||||
- [Starter Story](https://www.starterstory.com/)
|
||||
Recueille de nombreux cas réels de petites entreprises, généralement avec des interviews de fondateurs, des données de revenus et le processus de démarrage. Concentrez-vous sur les petits produits avec des revenus mensuels de 10 000 à 100 000 dollars — généralement plus niche et plus proches d'une échelle de produit compréhensible par tous.
|
||||
- [Indie Hackers — Products](https://www.indiehackers.com/products)
|
||||
Là où les développeurs indépendants présentent leurs produits, beaucoup publient leurs revenus et leur croissance. Triez par revenus et regardez quels problèmes concrets résolvent les produits générant quelques milliers à quelques dizaines de milliers de dollars par mois.
|
||||
- [MicroConf Blog](https://microconf.com/blog)
|
||||
Plutôt orienté Micro SaaS. Idéal pour voir des « produits assez petits, mais pour lesquels les gens sont prêts à payer ».
|
||||
- [1000 Tools](https://1000.tools/)
|
||||
Agrégateur d'outils AI. Utile pour voir quelles catégories sont déjà occupées mais avec une qualité moyenne, ou quelles directions ne sont pas encore bien couvertes dans un pays ou un secteur vertical.
|
||||
- [Product Hunt](https://www.producthunt.com/)
|
||||
Observez les types de produits qui apparaissent de manière récurrente, ne vous limitez pas au numéro 1 — regardez surtout les catégories où les gens continuent de créer sans qu'il n'y ait encore de gagnant clair.
|
||||
- [BetaList](https://betalist.com/)
|
||||
Idéal pour découvrir des produits en phase précoce et des équipes encore en exploration.
|
||||
|
||||
### Quand vous examinez les produits, ne regardez pas seulement le produit lui-même — regardez aussi les avis négatifs et les « services de substitution »
|
||||
|
||||
- [G2](https://www.g2.com/)
|
||||
Utilisation : regardez les avis 1 et 2 étoiles. Les avis négatifs cachent souvent « quelle étape du produit existant est mal faite ».
|
||||
- [Capterra](https://www.capterra.com/)
|
||||
Utilisation : similaire à G2, adapté pour voir les plaintes réelles sur les produits SaaS.
|
||||
- Taobao / Xianyu / [Fiverr](https://www.fiverr.com/) / [Upwork](https://www.upwork.com/) / Zhu Ba Jie
|
||||
Utilisation : cherchez « faire à votre place », « saisie à votre place », « retranscription à votre place ». Si un certain service manuel se vend bien, il y a généralement derrière un processus reproductible et productisable.
|
||||
|
||||
Les signaux à repérer sont simples :
|
||||
|
||||
- Les utilisateurs se plaignent déjà des outils existants
|
||||
- Les utilisateurs paient déjà pour des services de substitution
|
||||
- Les utilisateurs ont déjà investi beaucoup de main-d'œuvre et de temps dans ce processus
|
||||
|
||||
### Quatrième niveau : regardez des vidéos, certains font le travail de décomposition d'idées pour vous
|
||||
|
||||
Si vous n'aimez pas parcourir des forums et des classements, et préférez « quelqu'un qui décompose les idées pour moi », alors les vidéos et les podcasts sont aussi très adaptés.
|
||||
|
||||
- Recherchez `Greg Isenberg startup ideas`
|
||||
Idéal pour voir quelqu'un décomposer directement 2 à 3 idées concrètes, avec un aperçu du marché, une analyse concurrentielle et un angle d'attaque.
|
||||
- Recherchez `My First Million podcast`
|
||||
Les deux animateurs font souvent des épisodes entiers de brainstorming d'idées business, à haute densité, avec souvent des niches très concrètes.
|
||||
- Recherchez `YC startup ideas` ou `Michael Seibel startup ideas`
|
||||
Adapté aux débutants, contenu direct, beaucoup expliquent comment choisir une direction.
|
||||
|
||||
<a id="idea-trends"></a>
|
||||
## [2. Sources de tendances : voir quelles directions sont en croissance](#top-idea-sources)
|
||||
|
||||
Les sites de tendances ne vous donnent pas directement des idées, mais vous aident à juger : une direction est-elle en train de monter, mérite-t-on d'y regarder de plus près.
|
||||
|
||||
- [Exploding Topics](https://explodingtopics.com/)
|
||||
Utilise les données pour suivre les sujets et catégories de produits en croissance rapide mais pas encore entrés dans le grand public. Idéal pour voir les directions « en montée mais pas encore bondées ».
|
||||
- [Google Trends](https://trends.google.com/)
|
||||
Recherchez un mot-clé, regardez la courbe de tendance sur l'année écoulée, puis consultez les « requêtes associées » avec les termes « en hausse ».
|
||||
- [Glimpse](https://meetglimpse.com/)
|
||||
Similaire à Google Trends.
|
||||
- Pages de synthèse de rapports sectoriels
|
||||
Adapté quand vous avez déjà une direction et voulez rapidement voir sa position dans le secteur.
|
||||
- Contenu de tendances de McKinsey / BCG / Gartner
|
||||
Plus orienté entreprises et grandes industries, adapté au B2B, à l'industrie et aux secteurs traditionnels.
|
||||
- [State of AI Report](https://www.stateof.ai/)
|
||||
Si votre direction est liée à la technologie AI elle-même, ce type de rapport annuel est idéal pour établir une vue d'ensemble.
|
||||
|
||||
En regardant les tendances, concentrez-vous sur trois choses seulement :
|
||||
|
||||
- Le terme est-il en croissance continue
|
||||
- Dans quel scénario concret s'inscrit-il
|
||||
- Qui sera le premier à y consacrer du temps, des coûts de changement ou un budget
|
||||
|
||||
<a id="idea-business"></a>
|
||||
## [3. Sources plus opérationnelles : voir qui dépense, qui se plaint, qui vend des services manuels](#top-idea-sources)
|
||||
|
||||
Si vous cherchez non pas une direction « qui a l'air cool » mais une direction « plus proche des activités réelles », il faut consulter des sources plus proches des flux de travail.
|
||||
|
||||
### Voir qui dépense vraiment et pour quoi
|
||||
|
||||
- [China Government Procurement Network](https://www.ccgp.gov.cn/)
|
||||
Utilisation : cherchez des termes comme « chantier intelligent », « système de gestion de laboratoire », « collecte de données », « gestion de clinique », « système de devis », et examinez les budgets, les exigences techniques et les scénarios d'utilisation.
|
||||
- Centres d'échange de ressources publiques de chaque province et ville
|
||||
Utilisation : voyez quels systèmes les gouvernements locaux et les entreprises d'État achètent réellement.
|
||||
- Bi Biao Wang / Qianlima Tender Network / Biao Shi Tong
|
||||
Utilisation : voyez les besoins d'achat côté entreprise et les types de systèmes à haute fréquence.
|
||||
|
||||
Le signal fort de ces sources est : il ne s'agit pas de discussions sur l'avenir, mais de la révélation que « aujourd'hui déjà, quelqu'un est prêt à payer pour cette chose ».
|
||||
|
||||
### Voir de quoi les gens se plaignent vraiment
|
||||
|
||||
- Industrie manufacturière : communautés de mécanique, forums d'automatisation industrielle
|
||||
- Santé : Dingxiangyuan, Yimaitong
|
||||
- Construction / Ingénierie : Tumu Online, forums Guanglianda
|
||||
- Finance / Comptabilité : Forum China Accounting Vision
|
||||
- Commerce extérieur : Forum Fubu Foreign Trade, Mike Quan
|
||||
- Restauration / Commerce de détail : Zhiye Catering Network, Lianshang Wang Forum
|
||||
- Sections verticales de [Reddit](https://www.reddit.com/) : `r/smallbusiness`, `r/Entrepreneur`, `r/SaaS`, `r/healthcare`, `r/manufacturing`
|
||||
- [V2EX](https://www.v2ex.com/)
|
||||
- Jike
|
||||
- Xiaohongshu
|
||||
|
||||
Ne cherchez pas seulement « AI » ou « innovation » — ce qui est plus efficace, c'est de chercher :
|
||||
|
||||
- C'est trop compliqué
|
||||
- Y a-t-il une meilleure méthode
|
||||
- Recommandez un outil
|
||||
- Excel ne suffit plus
|
||||
- I wish there was
|
||||
- is there a tool for
|
||||
- I hate
|
||||
|
||||
### Voir qui vend des services manuels répétitifs
|
||||
|
||||
- [Fiverr](https://www.fiverr.com/)
|
||||
- [Upwork](https://www.upwork.com/)
|
||||
- Zhu Ba Jie Wang
|
||||
- Taobao
|
||||
- Xianyu
|
||||
|
||||
Si vous voyez que ces services se vendent bien, ça vaut la peine d'investiguer :
|
||||
|
||||
- Transformer vos devis PDF en Excel
|
||||
- Organiser en masse vos données clients
|
||||
- Modifier votre CV / corriger vos textes / faire des transcriptions / archiver
|
||||
|
||||
Derrière ces services, il n'y a généralement pas un besoin ponctuel, mais un flux de travail qui se répète.
|
||||
|
||||
### Regarder les flux de travail complets, pas seulement les listes d'idées
|
||||
|
||||
Parfois, la méthode la plus directe est de choisir un secteur, d'examiner ses processus, et de trouver les étapes qui dépendent encore de WeChat, Excel, papier-crayon et téléphone.
|
||||
|
||||
- Commerce extérieur : trouver des fournisseurs, demande de prix, comparaison, création de devis, envoi aux clients, suivi des réponses, organisation des inspections, réservation de fret, dédouanement.
|
||||
Angle d'attaque intéressant : transformer les devis fournisseurs en devis clients.
|
||||
- Cliniques dentaires : accueil, radiographie, lecture des radios, discussion du plan de traitement, suivi, traitement, rendez-vous de contrôle.
|
||||
Angle d'attaque intéressant : expliquer le plan au patient et assurer un suivi continu.
|
||||
- Chantiers de construction : inspection, photos, envoi dans le groupe, compilation du rapport, transmission au client.
|
||||
Angle d'attaque intéressant : des photos de terrain au rapport de conformité.
|
||||
|
||||
<a id="idea-vc"></a>
|
||||
## [4. Sources VC / accélérateurs : voir « dans quelle direction souffle le vent »](#top-idea-sources)
|
||||
|
||||
Ce type de source vous aide à trouver de grandes directions, mais ne remplace pas la validation.
|
||||
|
||||
- [Y Combinator — Requests for Startups](https://www.ycombinator.com/rfs)
|
||||
Utilisation : idéal pour trouver des angles d'attaque, car il indique souvent directement « nous aimerions voir quelqu'un créer ça ».
|
||||
- [a16z — Big Ideas](https://a16z.com/big-ideas-2025/)
|
||||
Utilisation : plus orienté grandes tendances et jugement de secteur, idéal pour se faire une sensibilité sectorielle.
|
||||
- [NFX](https://www.nfx.com/)
|
||||
Utilisation : idéal pour balayer rapidement un ensemble de sujets de startup.
|
||||
- [Sequoia Capital](https://www.sequoiacap.com/article/)
|
||||
Utilisation : ne liste pas nécessairement des idées directement, mais parle souvent de changements de plateforme et d'opportunités.
|
||||
- [First Round Review](https://review.firstround.com/)
|
||||
Utilisation : idéal pour approfondir une direction, pas forcément une liste d'idées, mais la qualité des articles est généralement excellente.
|
||||
|
||||
Avantages de ces sources :
|
||||
|
||||
- Elles peuvent vous dire quelles directions méritent d'être suivies à l'avenir
|
||||
- Elles peuvent vous dire quels secteurs pourraient continuer à être poussés
|
||||
- Elles vous permettent d'entrer rapidement dans le jargon d'un secteur
|
||||
|
||||
Limites de ces sources :
|
||||
|
||||
- Généralement du point de vue des investisseurs
|
||||
- Ne vous disent pas nécessairement quel rôle souffre le plus
|
||||
- Ne vous disent pas nécessairement quelle étape du processus est la plus bloquante
|
||||
- Ne vous disent pas nécessairement qui paie déjà pour ça aujourd'hui
|
||||
|
||||
Donc la meilleure utilisation est : utilisez-les d'abord pour trouver une direction, puis revenez aux produits de référence, aux forums sectoriels, aux informations d'achat et aux flux de travail réels pour trouver des angles d'attaque plus concrets.
|
||||
|
||||
<a id="idea-path"></a>
|
||||
## [5. Le chemin le plus court pour ceux qui « n'ont pas d'idées et ne savent faire que des assistants »](#top-idea-sources)
|
||||
|
||||
Si vous ne prenez qu'un seul chemin le plus court, voici comment faire :
|
||||
|
||||
1. Première étape, 30 minutes.
|
||||
Ouvrez [r/SomebodyMakeThis](https://www.reddit.com/r/SomebodyMakeThis/), triz par `Top -> Past Year`, balayez rapidement 50 posts, et sauvegardez toutes les directions où vous vous dites « ça, je pourrais peut-être le faire ».
|
||||
2. Deuxième étape, 30 minutes.
|
||||
Ouvrez [Starter Story](https://www.starterstory.com/) ou [Indie Hackers Products](https://www.indiehackers.com/products), triez par revenus, regardez les produits à revenus moyens, pas seulement les plus performants. Trouvez des directions liées à la première étape, et voyez à qui ils vendent exactement et quelle étape ils résolvent.
|
||||
3. Troisième étape, 20 minutes.
|
||||
Allez sur [Google Trends](https://trends.google.com/) et cherchez les mots-clés associés, voyez si la tendance est à la hausse, puis regardez les termes « en hausse » dans les « requêtes associées ».
|
||||
4. Quatrième étape, 20 minutes.
|
||||
Allez sur G2 / Capterra / forums sectoriels / plateformes d'appels d'offres / Fiverr et autres, pour voir où exactement cette direction est la plus pénible aujourd'hui, et où on dépend encore du travail manuel.
|
||||
|
||||
Après ce parcours, être capable de formuler clairement cette phrase suffit :
|
||||
|
||||
- Un certain type de personne, dans un certain contexte, est bloqué par une certaine étape du processus, et s'en sort principalement avec une méthode de fortune.
|
||||
|
||||
<a id="idea-ai"></a>
|
||||
## [6. Comment l'IA peut vous aider](#top-idea-sources)
|
||||
|
||||
L'accent ici n'est pas sur l'IA, mais l'IA est très adaptée pour organiser.
|
||||
|
||||
Les deux utilisations les plus pratiques sont :
|
||||
|
||||
- Collez à l'IA les liens, titres de posts et propos d'utilisateurs que vous avez trouvés, et demandez-lui de les classer par « population / contexte / point de douleur / alternative ».
|
||||
- Demandez à l'IA de condenser un ensemble d'informations dispersées en 3 directions candidates, au lieu de continuer à diverger en 50 fonctionnalités.
|
||||
|
||||
Vous pouvez demander directement :
|
||||
|
||||
```text
|
||||
Voici les sources que j'ai consultées récemment :
|
||||
1. [collez le titre ou la citation]
|
||||
2. [collez le titre ou la citation]
|
||||
3. [collez le titre ou la citation]
|
||||
|
||||
Ne me donnez pas de liste de fonctionnalités.
|
||||
Faites seulement trois choses :
|
||||
1. Classifiez par population et contexte
|
||||
2. Identifiez les étapes problématiques qui reviennent
|
||||
3. Aidez-moi à organiser le tout en 3 directions candidates plus concrètes
|
||||
```
|
||||
|
||||
## Lectures complémentaires
|
||||
|
||||
- [Y Combinator - Requests for Startups](https://www.ycombinator.com/rfs)
|
||||
- [a16z - Big Ideas](https://a16z.com/big-ideas-2025/)
|
||||
- [NFX](https://www.nfx.com/)
|
||||
- [Reddit - r/SomebodyMakeThis](https://www.reddit.com/r/SomebodyMakeThis/)
|
||||
- [Reddit - r/AppIdeas](https://www.reddit.com/r/AppIdeas/)
|
||||
- [Reddit - r/Startup_Ideas](https://www.reddit.com/r/Startup_Ideas/)
|
||||
- [Starter Story](https://www.starterstory.com/)
|
||||
- [Indie Hackers - Products](https://www.indiehackers.com/products)
|
||||
- [Product Hunt](https://www.producthunt.com/)
|
||||
- [BetaList](https://betalist.com/)
|
||||
- [IdeasAI](https://ideasai.com/)
|
||||
- [Unvalidated Ideas](https://unvalidatedideas.com/)
|
||||
- [Google Trends](https://trends.google.com/)
|
||||
- [Exploding Topics](https://explodingtopics.com/)
|
||||
- [G2](https://www.g2.com/)
|
||||
- [Capterra](https://www.capterra.com/)
|
||||
@@ -0,0 +1,698 @@
|
||||
---
|
||||
title: "Références de scénarios d'application B2B"
|
||||
description: "Ce document recense les applications concrètes des modèles LLM dans les scénarios d'entreprise B2B, couvrant l'industrie manufacturière, le service client intelligent, l'éducation, la programmation assistée par IA, la santé, la cybersécurité, la finance, les services d'entreprise et d'autres domaines, offrant une référence aux développeurs d'applications IA destinées aux clients professionnels."
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
const duration = 'Environ <strong>6 heures</strong>'
|
||||
|
||||
const interestPoint = ref('')
|
||||
const purpose = ref('')
|
||||
|
||||
// Pool de sujets par industrie
|
||||
const topicPool = {
|
||||
'manufacturing': [
|
||||
{ title: "Plateforme d'aide au design extérieur de bus électriques par IA", desc: "Conception de design conceptuel basée sur des modèles de génération d'images" },
|
||||
{ title: "Assistant intelligent de conception et vérification de plans", desc: "Construction d'une base de connaissances de normes de conception d'entreprise via RAG" },
|
||||
{ title: "Génération automatique et gestion de documentation technique", desc: "Génération automatique de spécifications produit et de manuels d'utilisation basée sur LLM" },
|
||||
{ title: "Assistant de génération automatique de rapports d'inspection d'équipements", desc: "Description vocale de l'état des équipements, génération structurée de rapports d'inspection" },
|
||||
{ title: "Assistant Q&R de diagnostic de pannes d'équipements industriels", desc: "Construction d'une base de connaissances vectorielle basée sur les historiques de pannes" }
|
||||
],
|
||||
'customer-service': [
|
||||
{ title: "Système de réponse automatique multicanal et génération de tickets", desc: "Intégration multi-canal, LLM compréhend l'intention et génère la réponse" },
|
||||
{ title: "Assistant de prospection et suivi de prospects potentiels", desc: "Analyse des historiques de conversations pour identifier les prospects à forte intention" },
|
||||
{ title: "Système de recherche intelligente et Q&R de connaissances internes", desc: "Construction d'une base de connaissances vectorielle à partir de documents internes" },
|
||||
{ title: "Outil de résumé intelligent de conversations et génération de tickets", desc: "Génération automatique de résumés de session et extraction d'informations clés" },
|
||||
{ title: "Système de recommandation de scripts de service client", desc: "Analyse des cas exemplaires, extraction de modèles de scripts performants" }
|
||||
],
|
||||
'education': [
|
||||
{ title: "Planification de parcours d'apprentissage linguistique personnalisé et système de tutorat intelligent", desc: "Évaluation du niveau de l'apprenant, planification des tâches quotidiennes" },
|
||||
{ title: "Plateforme de création automatique de plans de cours et de ressources pédagogiques", desc: "Génération de cadres de plans de cours basée sur le programme" },
|
||||
{ title: "Système de correction automatique et diagnostic de résultats scolaires", desc: "Correction automatique de questions ouvertes et génération de suggestions" },
|
||||
{ title: "Construction de modèles de compétences et cartographie d'apprentissage", desc: "Analyse des descriptions de postes pour extraire les compétences requises" },
|
||||
{ title: "Pratique orale de langues en scénarios individuels", desc: "LLM joue différents rôles pour des dialogues oraux" }
|
||||
],
|
||||
'programming': [
|
||||
{ title: "Assistant de complétion de code et correction automatique de bugs", desc: "Plugin IDE fournissant des suggestions de complétion en temps réel" },
|
||||
{ title: "Plateforme de construction low-code et automatisation de processus", desc: "Description en langage naturel convertie en configuration low-code" },
|
||||
{ title: "Système de génération de tests unitaires", desc: "Analyse AST du code source, génération de tests aux limites" },
|
||||
{ title: "Outil d'analyse de code et migration entre langages", desc: "Analyse de la qualité du code et suggestions d'optimisation" },
|
||||
{ title: "Outil de génération automatique de code UI frontend", desc: "Reconnaissance d'images de maquettes, génération de CSS responsive" }
|
||||
],
|
||||
'healthcare': [
|
||||
{ title: "Assistant intelligent d'interprétation de rapports médicaux", desc: "OCR pour identifier les indicateurs clés, interpréter les valeurs anormales" },
|
||||
{ title: "Conseiller en santé basé sur la recherche documentaire", desc: "Construction d'un graphe de connaissances médicales, réponses par RAG" },
|
||||
{ title: "Plateforme d'analyse décisionnelle de données de recherche clinique", desc: "Intégration de données EMR, assistance à la génération de code d'analyse statistique" },
|
||||
{ title: "Outil de génération automatique de rapports d'imagerie médicale", desc: "Description des caractéristiques d'imagerie, génération automatique de rapports structurés" },
|
||||
{ title: "Assistant intelligent de rappels médicamenteux pour maladies chroniques", desc: "Génération de rappels personnalisés, vérification des contre-indications" }
|
||||
],
|
||||
'security': [
|
||||
{ title: "Moteur de détection et correction de vulnérabilités de code", desc: "Analyse SAST du code, analyse des principes de vulnérabilité" },
|
||||
{ title: "Système de détection et interception de phishing par IA", desc: "Analyse du contenu des e-mails, identification des tentatives de phishing générées par IA" },
|
||||
{ title: "Assistant de génération automatique de rapports quotidiens de sécurité", desc: "Consolidation des journaux, extraction automatique des événements clés" },
|
||||
{ title: "Assistant de génération intelligente de rapports de tests de pénétration", desc: "Génération automatique de rapports basée sur les descriptions de vulnérabilités" },
|
||||
{ title: "Assistant de recherche et d'analyse de renseignements sur les menaces", desc: "Connexion à des sources multiples de renseignements sur les menaces" }
|
||||
],
|
||||
'finance': [
|
||||
{ title: "Assistant intelligent de génération de rapports de due diligence", desc: "Saisie de données financières, génération automatique de rapports de due diligence" },
|
||||
{ title: "Conseiller intelligent en gestion de patrimoine bancaire privé", desc: "Analyse du profil de risque du client, génération de suggestions d'allocation d'actifs" },
|
||||
{ title: "Assistant de génération et vérification de conformité de prospectus IPO", desc: "Modèles modulaires, remplissage automatique des descriptions commerciales" },
|
||||
{ title: "Système de génération automatique de rapports financiers et d'alertes d'anomalies", desc: "Génération automatique d'analyses financières et de discussions de la direction" },
|
||||
{ title: "Assistant de simulation de scripts pour agents d'assurance", desc: "Simulation de dialogues, évaluation de la conformité et de la force de persuasion" }
|
||||
],
|
||||
'enterprise': [
|
||||
{ title: "Plateforme de vérification de conformité et suggestions de modification pour le cycle de vie des contrats", desc: "Comparaison des clauses avec le référentiel réglementaire, génération de rapports de conformité" },
|
||||
{ title: "Transcription vocale de ventes et recommandation de scripts", desc: "Transcription ASR, analyse des conversations et recommandation de scripts performants" },
|
||||
{ title: "Système de génération intelligente de contenu marketing", desc: "Génération de textes marketing et extraction de points de vente" },
|
||||
{ title: "Plateforme d'analyse des dépenses publicitaires des concurrents", desc: "Collecte des publicités concurrentes, analyse des stratégies de diffusion" },
|
||||
{ title: "Système d'analyse et de recommandation de sujets tendances", desc: "Analyse des tendances et recommandation d'angles de sujets" }
|
||||
],
|
||||
'content': [
|
||||
{ title: "Plateforme d'aide à la création de contenu pour films et romans", desc: "Fourniture de synopsis, développement de personnages, génération de dialogues" },
|
||||
{ title: "Assistant intelligent de rédaction d'histoires de marque et de RP", desc: "Saisie de mots-clés de marque, génération de textes multi-styles" },
|
||||
{ title: "Système de gestion d'interaction et de diffusion en direct par avatar numérique", desc: "Avatar numérique + synthèse vocale TTS + dialogue LLM" },
|
||||
{ title: "Génération de scripts vidéo courts et montage intelligent", desc: "Génération de scripts et storyboards pour vidéos courtes" },
|
||||
{ title: "Système de génération intelligente de contenu marketing", desc: "Génération de textes marketing et extraction de points de vente" }
|
||||
],
|
||||
'government': [
|
||||
{ title: "Système de navigation vocale intelligente et de répartition automatique pour la ligne d'assistance 12345", desc: "Reconnaissance vocale, compréhension des demandes et répartition intelligente" },
|
||||
{ title: "Robot d'accueil et de questions-réponses sur les services administratifs", desc: "Recherche RAG dans la base de connaissances gouvernementales" },
|
||||
{ title: "Plateforme de correspondance et de diffusion ciblée de politiques de soutien aux entreprises", desc: "Appariement automatique des profils d'entreprises avec les politiques applicables" },
|
||||
{ title: "Assistant de pré-examen des documents administratifs et de vérification de conformité", desc: "OCR et extraction d'informations clés" },
|
||||
{ title: "Plateforme d'identification et de gestion des événements urbains", desc: "Identification du type d'événement et répartition" }
|
||||
],
|
||||
'legal': [
|
||||
{ title: "Agent de détection de risques contractuels en un clic", desc: "Identification des problèmes potentiels par comparaison avec une liste de contrôle" },
|
||||
{ title: "Conseiller IA d'évaluation du taux de succès de litiges similaires", desc: "Extraction de caractéristiques de cas, recherche et correspondance de cas similaires" },
|
||||
{ title: "Radar de surveillance en temps réel des changements législatifs", desc: "Analyse des modifications et évaluation de l'impact commercial" },
|
||||
{ title: "Outil AIGC de rédaction automatique de lettres de mise en demeure", desc: "Saisie des faits, génération de modèles de lettres de mise en demeure normalisées" },
|
||||
{ title: "Plugin de traduction en langage simple de clauses juridiques complexes", desc: "Génération d'explications accessibles" }
|
||||
],
|
||||
'travel': [
|
||||
{ title: "Générateur d'itinéraires paresseux basé sur l'AIGC", desc: "Génération d'itinéraires quotidiens" },
|
||||
{ title: "Robot de prédiction de tendances de prix de vols et d'hôtels et verrouillage automatique des prix bas", desc: "Modèle ML de prédiction des tendances de prix" },
|
||||
{ title: "Système de pré-examen des documents de visa et d'aide au remplissage automatique", desc: "Vérification OCR de l'exhaustivité des informations" },
|
||||
{ title: "Assistant de traduction vocale en temps réel et de visualisation de menus en voyage", desc: "Traduction vocale hors ligne, OCR de photos de menus" },
|
||||
{ title: "Assistant de génération de récits de voyage et de posts sociaux à partir de traces de voyage", desc: "Extraction d'informations de photos, génération de textes de récits" }
|
||||
],
|
||||
'emotion': [
|
||||
{ title: "Compagnon virtuel d'accompagnement profond 24h/24 basé sur les LLM", desc: "Système de mémorisation stockant l'historique des conversations" },
|
||||
{ title: "Conseiller AI de reconnaissance émotionnelle multimodale et d'accompagnement psychologique", desc: "Analyse du ton vocal + reconnaissance émotionnelle textuelle" },
|
||||
{ title: "Agent numérique de rééducation cognitive et de stimulation mnésique pour personnes atteintes de la maladie d'Alzheimer", desc: "Jeux cognitifs, stimulation par vieilles photos" },
|
||||
{ title: "Coach de simulation sociale AIGC pour personnes souffrant d'anxiété sociale", desc: "Simulation de scénarios sociaux virtuels" },
|
||||
{ title: "Assistant de suivi d'humeur 24h/24 et de motivation positive par IA", desc: "Analyse des tendances d'humeur et génération de contenu motivant" }
|
||||
],
|
||||
'entertainment': [
|
||||
{ title: "Moteur de décision autonome de PNJ pour jeux en monde ouvert basé sur les LLM", desc: "Arbre de comportement des PNJ fusionné avec les décisions LLM" },
|
||||
{ title: "Outil AIGC de progression narrative et d'assistance MJ pour murder games immersifs", desc: "Choix des joueurs déclenchant des branches narratives" },
|
||||
{ title: "Modificateur génératif de fins pour fiction interactive", desc: "Les choix des lecteurs influencent le cours de l'histoire" },
|
||||
{ title: "Analyste visuel CV et commentateur intelligent de parties esport", desc: "Analyse en temps réel du gameplay" },
|
||||
{ title: "Système de génération automatique de livres audio multi-voix par TTS", desc: "Attribution de rôles textuels, génération de voix personnalisées" }
|
||||
],
|
||||
'ecommerce': [
|
||||
{ title: "Outil de production en masse de fiches produit à fort taux de conversion par AIGC", desc: "Génération de textes vendeurs et de descriptions de scènes" },
|
||||
{ title: "Usine de génération de vidéos d'essayage virtuel par IA pour vêtements", desc: "Génération d'essayages virtuels" },
|
||||
{ title: "Assistant de traduction et d'adaptation multilingue LLM pour e-commerce transfrontalier", desc: "Traduction multilingue de descriptions de produits" },
|
||||
{ title: "Système de live shopping 24h/24 par avatar numérique AIGC", desc: "Avatar numérique + génération de scripts en temps réel" },
|
||||
{ title: "Moteur de détection de tendances et de prédiction de produits populaires par IA", desc: "Analyse des tendances, suggestions de sélection" }
|
||||
],
|
||||
'energy': [
|
||||
{ title: "Analyse IA des comportements de consommation domestique et conseiller en économie d'énergie", desc: "Analyse des modes de consommation, génération de conseils d'économie" },
|
||||
{ title: "Système de détection CV de défauts de panneaux photovoltaïques par drone", desc: "Inspection par drone, analyse d'images thermoinfrarouges" },
|
||||
{ title: "Agent de prédiction de tendances de prix de l'énergie et de stratégie automatique de profit", desc: "Modèle de prédiction des prix, génération de stratégies" },
|
||||
{ title: "Assistant IA de comptabilisation automatique des émissions carbone et de génération de rapports ESG", desc: "Calcul des facteurs d'émission, génération de rapports ESG" },
|
||||
{ title: "Système IA de prévision de charge en conditions météorologiques extrêmes et de commande d'urgence", desc: "Modèle de prévision de charge, génération de stratégies d'ordonnancement" }
|
||||
],
|
||||
'av-media': [
|
||||
{ title: "Outil IA d'identification de moments forts et de montage automatique de vidéos longues", desc: "Analyse du contenu vidéo, identification des images clés" },
|
||||
{ title: "Assistant IA de séparation intelligente du bruit de fond et d'amélioration vocale", desc: "Modèle de séparation audio, suppression du bruit de fond" },
|
||||
{ title: "Station de restauration 4K et colorisation IA pour images anciennes", desc: "Modèle de super-résolution, colorisation automatique" },
|
||||
{ title: "Système de doublage TTS de qualité professionnelle et contrôle des émotions", desc: "Modèle TTS multi-voix, contrôle émotionnel" },
|
||||
{ title: "Assistant de transcription intelligente et d'extraction de TODO à partir d'enregistrements de réunions", desc: "Séparation et transcription vocale de réunions multi-participants" }
|
||||
],
|
||||
'ai-marketing': [
|
||||
{ title: "Moteur AIGC de rédaction automatique de posts viraux pour Xiaohongshu", desc: "Génération de posts sponsorisés, optimisation d'emojis" },
|
||||
{ title: "Outil IA de mise en page de supports marketing et d'adaptation multi-tailles", desc: "Association intelligente de modèles de supports" },
|
||||
{ title: "Plateforme AIGC de création de logos et de construction de charte VI", desc: "Génération créative de logos, génération de normes VI" },
|
||||
{ title: "Assistant de suivi des tendances et de génération d'idées marketing opportunistes", desc: "Analyse des angles marketing, génération de concepts créatifs" },
|
||||
{ title: "Outil AIGC de génération de scripts vidéo courts et d'aide au storyboard", desc: "Génération de scripts et de storyboards, conseils de tournage" }
|
||||
],
|
||||
'data-intelligence': [
|
||||
{ title: "Outil de génération automatique de requêtes SQL en langage naturel", desc: "Conversion de requêtes en langage naturel en SQL" },
|
||||
{ title: "Système intelligent d'inventaire et de classification des actifs de données d'entreprise", desc: "Collecte de métadonnées, classification automatique" },
|
||||
{ title: "Moteur de détection automatique et de suggestions de correction d'anomalies de données", desc: "Moteur de règles + modèle ML de détection d'anomalies" },
|
||||
{ title: "Assistant de génération et de configuration de rapports intelligents", desc: "Génération conversationnelle de configurations de rapports" },
|
||||
{ title: "Assistant Q&R intelligent sur les indicateurs de données", desc: "Construction d'une base de connaissances à partir de documents de définition d'indicateurs" }
|
||||
]
|
||||
}
|
||||
|
||||
// Table de correspondance des recommandations
|
||||
const recommendationMap = {
|
||||
'creative-content': {
|
||||
'increase-efficiency': ['content', 'av-media', 'ai-marketing', 'entertainment'],
|
||||
'reduce-cost': ['content', 'ecommerce', 'ai-marketing'],
|
||||
'improve-experience': ['entertainment', 'emotion', 'travel', 'content'],
|
||||
'innovate-business': ['ai-marketing', 'content', 'av-media', 'entertainment']
|
||||
},
|
||||
'tech-service': {
|
||||
'increase-efficiency': ['programming', 'enterprise', 'data-intelligence', 'customer-service'],
|
||||
'reduce-cost': ['programming', 'enterprise', 'manufacturing'],
|
||||
'improve-experience': ['customer-service', 'enterprise', 'programming'],
|
||||
'innovate-business': ['data-intelligence', 'programming', 'security', 'enterprise']
|
||||
},
|
||||
'data-intel': {
|
||||
'increase-efficiency': ['data-intelligence', 'finance', 'enterprise', 'manufacturing'],
|
||||
'reduce-cost': ['data-intelligence', 'manufacturing', 'energy'],
|
||||
'improve-experience': ['data-intelligence', 'customer-service', 'ecommerce'],
|
||||
'innovate-business': ['data-intelligence', 'finance', 'security', 'ai-marketing']
|
||||
},
|
||||
'user-service': {
|
||||
'increase-efficiency': ['customer-service', 'ecommerce', 'travel', 'enterprise'],
|
||||
'reduce-cost': ['customer-service', 'ecommerce', 'enterprise'],
|
||||
'improve-experience': ['customer-service', 'emotion', 'travel', 'ecommerce', 'entertainment'],
|
||||
'innovate-business': ['ecommerce', 'travel', 'emotion', 'entertainment']
|
||||
},
|
||||
'industry-solution': {
|
||||
'increase-efficiency': ['manufacturing', 'healthcare', 'finance', 'government'],
|
||||
'reduce-cost': ['manufacturing', 'energy', 'enterprise', 'finance'],
|
||||
'improve-experience': ['healthcare', 'education', 'government', 'travel'],
|
||||
'innovate-business': ['finance', 'security', 'legal', 'healthcare', 'government']
|
||||
}
|
||||
}
|
||||
|
||||
const interestOptions = [
|
||||
{ label: 'Création de contenu', value: 'creative-content', desc: 'Textes, images, vidéos et autres contenus créatifs' },
|
||||
{ label: 'Outils techniques', value: 'tech-service', desc: 'Outils de développement, automatisation, assistance au code' },
|
||||
{ label: 'Analyse de données', value: 'data-intel', desc: 'Analyse de données, prévision, décision intelligente' },
|
||||
{ label: 'Expérience utilisateur', value: 'user-service', desc: 'Service client, marketing, expérience utilisateur' },
|
||||
{ label: 'Solutions sectorielles', value: 'industry-solution', desc: 'Applications approfondies dans des secteurs spécifiques' }
|
||||
]
|
||||
|
||||
const purposeOptions = [
|
||||
{ label: 'Améliorer l\'efficacité', value: 'increase-efficiency', desc: 'Automatisation, accélération des processus' },
|
||||
{ label: 'Réduire les coûts', value: 'reduce-cost', desc: 'Réduction de la main-d\'œuvre, optimisation des ressources' },
|
||||
{ label: 'Améliorer l\'expérience', value: 'improve-experience', desc: 'Satisfaction client, qualité de service' },
|
||||
{ label: 'Innovation commerciale', value: 'innovate-business', desc: 'Nouveaux produits, nouveaux modèles' }
|
||||
]
|
||||
|
||||
const industries = [
|
||||
{ key: 'manufacturing', name: 'Industrie manufacturière', anchor: '#_1-industrie-manufacturiere' },
|
||||
{ key: 'customer-service', name: 'Service client intelligent', anchor: '#_2-service-client-intelligent' },
|
||||
{ key: 'education', name: 'Éducation', anchor: '#_3-education' },
|
||||
{ key: 'programming', name: 'Programmation intelligente', anchor: '#_4-programmation-intelligente' },
|
||||
{ key: 'healthcare', name: 'Santé', anchor: '#_5-sante' },
|
||||
{ key: 'security', name: 'Cybersécurité', anchor: '#_6-cybersecurite' },
|
||||
{ key: 'finance', name: 'Finance, banque et assurance', anchor: '#_7-finance-banque-et-assurance' },
|
||||
{ key: 'enterprise', name: 'Services d\'entreprise', anchor: '#_8-services-dentreprise' },
|
||||
{ key: 'content', name: 'Production et exploitation de contenu', anchor: '#_9-production-et-exploitation-de-contenu' },
|
||||
{ key: 'government', name: 'Administration publique intelligente', anchor: '#_10-administration-publique-intelligente' },
|
||||
{ key: 'legal', name: 'Affaires juridiques et gestion contractuelle', anchor: '#_11-affaires-juridiques-et-gestion-contractuelle' },
|
||||
{ key: 'travel', name: 'Tourisme et voyages', anchor: '#_12-tourisme-et-voyages' },
|
||||
{ key: 'emotion', name: 'Accompagnement émotionnel', anchor: '#_13-accompagnement-emotionnel' },
|
||||
{ key: 'entertainment', name: 'Loisirs et divertissement', anchor: '#_14-loisirs-et-divertissement' },
|
||||
{ key: 'ecommerce', name: 'E-commerce', anchor: '#_15-e-commerce' },
|
||||
{ key: 'energy', name: 'Énergie', anchor: '#_16-energie' },
|
||||
{ key: 'av-media', name: 'Audiovisuel', anchor: '#_17-audiovisuel' },
|
||||
{ key: 'ai-marketing', name: 'Marketing IA', anchor: '#_18-marketing-ia' },
|
||||
{ key: 'data-intelligence', name: 'Intelligence de données', anchor: '#_19-intelligence-de-donnees' }
|
||||
]
|
||||
|
||||
const recommendationTopics = computed(() => {
|
||||
if (!interestPoint.value || !purpose.value) return []
|
||||
const keys = recommendationMap[interestPoint.value]?.[purpose.value] || []
|
||||
const topics = []
|
||||
keys.forEach(key => {
|
||||
const industry = industries.find(item => item.key === key)
|
||||
const industryTopics = topicPool[key] || []
|
||||
if (industry && industryTopics.length > 0) {
|
||||
const count = Math.floor(Math.random() * 2) + 1
|
||||
const shuffled = [...industryTopics].sort(() => Math.random() - 0.5)
|
||||
const selected = shuffled.slice(0, Math.min(count, shuffled.length))
|
||||
selected.forEach(topic => {
|
||||
topics.push({ ...topic, industryKey: key, industryName: industry.name, industryAnchor: industry.anchor })
|
||||
})
|
||||
}
|
||||
})
|
||||
return topics.sort(() => Math.random() - 0.5).slice(0, 8)
|
||||
})
|
||||
|
||||
const currentSelection = computed(() => {
|
||||
const interest = interestOptions.find(i => i.value === interestPoint.value)
|
||||
const pur = purposeOptions.find(p => p.value === purpose.value)
|
||||
return { interest: interest?.label || '', purpose: pur?.label || '' }
|
||||
})
|
||||
|
||||
const scrollToAnchor = (anchor) => {
|
||||
setTimeout(() => {
|
||||
let element = document.querySelector(anchor)
|
||||
if (!element) {
|
||||
const altAnchor = anchor.replace('#_', '#')
|
||||
element = document.querySelector(altAnchor)
|
||||
}
|
||||
if (!element) {
|
||||
const anchorText = decodeURIComponent(anchor.replace('#', '').replace(/^_/, ''))
|
||||
const headings = document.querySelectorAll('h2, h3')
|
||||
for (let heading of headings) {
|
||||
const headingText = heading.textContent.trim()
|
||||
const cleanHeading = headingText.replace(/^\d+\.\s*/, '')
|
||||
if (cleanHeading === anchorText || headingText.includes(anchorText)) {
|
||||
element = heading
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
if (element) {
|
||||
element.scrollIntoView({ behavior: 'smooth', block: 'start' })
|
||||
element.style.backgroundColor = '#f0f9ff'
|
||||
element.style.transition = 'background-color 0.3s'
|
||||
element.style.padding = '8px'
|
||||
element.style.borderRadius = '4px'
|
||||
setTimeout(() => { element.style.backgroundColor = ''; element.style.padding = '' }, 2000)
|
||||
}
|
||||
}, 100)
|
||||
}
|
||||
|
||||
const resetSelection = () => {
|
||||
interestPoint.value = ''
|
||||
purpose.value = ''
|
||||
}
|
||||
</script>
|
||||
|
||||
# Références de scénarios d'application B2B
|
||||
|
||||
## Introduction du chapitre
|
||||
|
||||
<ChapterIntroduction :duration="duration" :tags="['Applications B2B', 'Applications industrielles', 'Scénarios IA', 'Références de mise en œuvre', 'Solutions sectorielles']" coreOutput="Découvrir plus de 15 scénarios d'application B2B" expectedOutput="Trouver une direction de projet adaptée aux clients professionnels">
|
||||
|
||||
Ce document recense les <strong>applications concrètes des modèles LLM dans les scénarios d'entreprise B2B</strong>. Contrairement aux applications B2C centrées sur l'expérience utilisateur et l'émotion, les produits B2B mettent l'accent sur la <strong>résolution de besoins métier réels, l'amélioration de l'efficacité et la réduction des coûts</strong>. Chaque scénario présente une <strong>faisabilité de mise en œuvre concrète</strong>, couvrant une démarche complète de <strong>l'analyse des besoins à l'implémentation technique</strong>, destinée aux développeurs d'applications IA pour les clients professionnels.
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
## Sélection rapide par secteur
|
||||
|
||||
<el-card shadow="hover" style="margin-top: 16px; margin-bottom: 24px; border-left: 5px solid #409EFF;">
|
||||
<div style="font-weight: 600; margin-bottom: 8px;">Trouvez votre scénario d'application</div>
|
||||
<div style="color: #606266; font-size: 14px; line-height: 1.6; margin-bottom: 12px;">
|
||||
Sélectionnez votre domaine d'intérêt et votre objectif, le système recommandera les scénarios pertinents. Cliquez sur un tag pour accéder au chapitre correspondant.
|
||||
</div>
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="12">
|
||||
<el-select v-model="interestPoint" placeholder="Sélectionnez un domaine d'intérêt" style="width: 100%;">
|
||||
<el-option v-for="item in interestOptions" :key="item.value" :label="item.label" :value="item.value">
|
||||
<div style="display: flex; flex-direction: column;">
|
||||
<span>{{ item.label }}</span>
|
||||
<span style="font-size: 12px; color: #909399;">{{ item.desc }}</span>
|
||||
</div>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-select v-model="purpose" placeholder="Sélectionnez un objectif" style="width: 100%;">
|
||||
<el-option v-for="item in purposeOptions" :key="item.value" :label="item.label" :value="item.value">
|
||||
<div style="display: flex; flex-direction: column;">
|
||||
<span>{{ item.label }}</span>
|
||||
<span style="font-size: 12px; color: #909399;">{{ item.desc }}</span>
|
||||
</div>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<div v-if="recommendationTopics.length > 0" style="margin-top: 16px;">
|
||||
<div style="font-weight: 600; margin-bottom: 10px; color: #409EFF;">
|
||||
{{ recommendationTopics.length }} scénarios d'application recommandés
|
||||
<span style="font-weight: normal; color: #909399; font-size: 13px; margin-left: 8px;">
|
||||
({{ currentSelection.interest }} + {{ currentSelection.purpose }})
|
||||
</span>
|
||||
</div>
|
||||
<el-table :data="recommendationTopics" style="width: 100%; cursor: pointer;" @row-click="(row) => scrollToAnchor(row.industryAnchor)" highlight-current-row>
|
||||
<el-table-column prop="title" label="Scénario d'application" min-width="300">
|
||||
<template #default="scope">
|
||||
<div style="font-weight: 500; color: #303133;">{{ scope.row.title }}</div>
|
||||
<div style="font-size: 12px; color: #909399; margin-top: 4px;">{{ scope.row.desc }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="industryName" label="Secteur" width="180" align="center">
|
||||
<template #default="scope">
|
||||
<el-tag type="info" effect="light" size="small">{{ scope.row.industryName }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div style="margin-top: 10px; font-size: 12px; color: #909399;">
|
||||
💡 Cliquez sur n'importe quelle ligne du tableau pour accéder au chapitre correspondant
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="!interestPoint || !purpose" style="margin-top: 14px; color: #909399; font-size: 13px;">
|
||||
<span v-if="!interestPoint && !purpose">💡 Veuillez sélectionner un domaine d'intérêt et un objectif</span>
|
||||
<span v-else-if="!interestPoint">💡 Veuillez sélectionner un domaine d'intérêt</span>
|
||||
<span v-else>💡 Veuillez sélectionner un objectif</span>
|
||||
</div>
|
||||
|
||||
<div v-if="interestPoint || purpose" style="margin-top: 12px;">
|
||||
<el-button size="small" @click="resetSelection">Réinitialiser</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
## Présentation rapide des secteurs
|
||||
|
||||
### Choix technologique courant
|
||||
|
||||
En développement d'applications IA, les directions technologiques courantes incluent :
|
||||
|
||||
1. **LLM (grands modèles de langage)** : compétents pour les tâches en langage naturel telles que la conversation, la génération de texte, le résumé, la traduction, etc., adaptés à la construction d'applications de service client, de création de contenu et de Q&R.
|
||||
2. **VLM (modèles vision-langage)** : combinent la compréhension visuelle et les capacités linguistiques pour la description d'images, la réponse aux questions visuelles, la génération de contenu multimodal, etc.
|
||||
3. **GenAI (IA générative)** : inclut la génération de texte, d'images (Stable Diffusion, DALL·E), de vidéos, etc., permettant de créer rapidement du contenu créatif.
|
||||
|
||||
### Stratégie de sélection
|
||||
|
||||
Les apprenants peuvent choisir leur direction en fonction des dimensions suivantes :
|
||||
|
||||
1. **Orienté par l'intérêt** : prioriser les secteurs ou directions techniques qui vous intéressent.
|
||||
2. **Adaptation sectorielle** : tirer parti de votre expérience professionnelle ou de vos ressources.
|
||||
3. **Difficulté technique** : choisir en fonction de votre niveau technique.
|
||||
|
||||
## 1. Industrie manufacturière
|
||||
|
||||
Les scénarios de l'industrie manufacturière s'articulent autour de trois axes principaux : l'aide à la conception, l'optimisation de la production et la maintenance intelligente.
|
||||
|
||||
| # | Scénario d'application | Référence d'implémentation |
|
||||
|---|---|---|
|
||||
| 1 | Plateforme d'aide au design extérieur de bus électriques par IA | Génération de designs conceptuels, vérification des normes via LLM, intégration Three.js pour le rendu 3D |
|
||||
| 2 | Assistant intelligent de conception et vérification de plans | Base de connaissances RAG des normes de conception, API CAD pour l'analyse automatique des plans |
|
||||
| 3 | Génération automatique et gestion de documentation technique | Génération automatique de spécifications et manuels à partir de la base de données produit, stockage vectoriel ChromaDB |
|
||||
| 4 | Assistant de génération automatique de rapports d'inspection d'équipements | Description vocale de l'état des équipements, génération structurée de rapports par LLM, association automatique des historiques de pannes |
|
||||
| 5 | Système intelligent de planification et d'ordonnancement pour chariots industriels | LLM analyse les commandes et les positions d'entrepôt, génération de plans d'ordonnancement optimaux via API cartographiques |
|
||||
| 6 | Entrepôt de données basé sur LLM et recherche en langage naturel | Conversion Text-to-SQL, visualisation Superset, moteur OLAP Doris ou ClickHouse |
|
||||
| 7 | Assistant Q&R de diagnostic de pannes d'équipements industriels | Base de connaissances vectorielle construite à partir d'historiques de pannes, suggestions de diagnostic par LLM |
|
||||
| 8 | Génération intelligente de rapports de contrôle qualité et classification de défauts | OCR pour identifier les défauts, génération structurée de rapports par LLM, classification automatique des types de défauts |
|
||||
| 9 | Assistant intelligent d'inventaire et génération de rapports d'inventaire | Saisie des données d'inventaire, comparaison automatique avec le stock système, alertes sur les écarts |
|
||||
| 10 | Système Q&R intelligent d'optimisation de processus de fabrication | Base de connaissances RAG construite à partir de documents de processus, suggestions d'optimisation par LLM |
|
||||
|
||||
## 2. Service client intelligent
|
||||
|
||||
Les scénarios de service client se concentrent sur l'amélioration de l'efficacité et l'optimisation de l'expérience utilisateur.
|
||||
|
||||
| # | Scénario d'application | Référence d'implémentation |
|
||||
|---|---|---|
|
||||
| 1 | Système de réponse automatique multicanal et génération de tickets | Intégration multi-canal (WeChat, APP, site web), compréhension LLM des intentions, création automatique de tickets, construction du flux conversationnel via LangChain, stockage MySQL |
|
||||
| 2 | Assistant de prospection et suivi de prospects potentiels | Analyse LLM des historiques de conversations, identification et scoring des prospects à forte intention, système de recommandation avec filtrage collaboratif |
|
||||
| 3 | Système de recherche intelligente et Q&R de connaissances internes | Base de connaissances vectorielle construite à partir de Confluence et documents internes, réponses LLM via RAG |
|
||||
| 4 | Système d'enquête de satisfaction et d'amélioration du service | Analyse LLM du contenu des conversations pour la classification émotionnelle et le scoring de satisfaction, rapports BI |
|
||||
| 5 | Outil de résumé intelligent de conversations et génération de tickets | Résumé automatique de session après clôture de la conversation, extraction d'informations clés, remplissage automatique des champs du ticket |
|
||||
| 6 | Assistant de détection automatique de conformité des scripts de service | Détection en temps réel de la conformité des réponses du service client, identification des mots sensibles, suggestions de modification |
|
||||
| 7 | Outil de résumé automatique et classification de tickets de service | Résumé automatique et étiquetage de longues conversations par LLM, recherche plein texte via Elasticsearch |
|
||||
| 8 | Outil de surveillance émotionnelle des clients et alertes d'anomalies | Analyse en temps réel des caractéristiques vocales et du sentiment textuel, alertes LLM sur les émotions anormales, notifications WebSocket |
|
||||
| 9 | Système de recommandation de scripts de service client performants | Analyse LLM des conversations exemplaires, extraction de modèles de scripts performants, recommandation contextuelle en temps réel |
|
||||
| 10 | Assistant d'analyse de contenu et de contrôle qualité pour appels sortants | Transcription ASR des appels sortants, analyse de contenu par LLM, génération automatique de rapports de contrôle et suggestions d'amélioration |
|
||||
|
||||
## 3. Éducation
|
||||
|
||||
Les scénarios éducatifs visent à réaliser un enseignement personnalisé et une gestion éducative intelligente.
|
||||
|
||||
| # | Scénario d'application | Référence d'implémentation |
|
||||
|---|---|---|
|
||||
| 1 | Planification de parcours d'apprentissage linguistique personnalisé et système de tutorat intelligent | Évaluation LLM du niveau de l'apprenant, planification quotidienne des tâches d'apprentissage, algorithme de recommandation combinant graphe de connaissances |
|
||||
| 2 | Plateforme de création automatique de plans de cours et de ressources pédagogiques | Génération LLM de cadres de plans de cours et de conceptions pédagogiques, stockage vectoriel de plans de cours et supports, recherche par mots-clés et recommandation de similarité |
|
||||
| 3 | Système de correction automatique et diagnostic de résultats scolaires | Correction automatique LLM de questions ouvertes avec suggestions, localisation des lacunes via graphe de connaissances |
|
||||
| 4 | Construction de modèles de compétences et cartographie d'apprentissage | Analyse LLM des descriptions de postes pour extraire les compétences, construction de profils de compétences, génération de cartes d'apprentissage personnalisées |
|
||||
| 5 | Outil de construction de programmes scolaires et de création de supports de cours | Analyse LLM des caractéristiques de l'école et des besoins des élèves, génération de cadres de programmes scolaires, intégration d'API de génération PPT |
|
||||
| 6 | Pratique orale de langues en scénarios individuels | LLM joue différents rôles pour des dialogues oraux, reconnaissance ASR de la prononciation et notation, synthèse TTS de la prononciation standard |
|
||||
| 7 | Plateforme de recommandation et d'orientation universitaire basée sur le big data | Analyse LLM des scores, classements et intérêts des candidats, recommandation d'établissements et de filières basée sur les données d'admission |
|
||||
| 8 | Assistant de code pour l'initiation à la programmation des enfants | Explication LLM de la logique du code et guidance de programmation, support commutation bloc-langage et Python |
|
||||
| 9 | Outil de génération automatique de cartes mentales de connaissances et recommandation de parcours | Saisie d'un sujet de cours, génération automatique de cartes mentales par LLM, recommandation du contenu suivant en fonction de la progression |
|
||||
| 10 | Moteur de notation et de correction automatique de compositions en chinois et anglais | Scoring multidimensionnel par LLM (structure, langue, diversité) et génération d'annotations, comparaison avec des modèles de compositions |
|
||||
|
||||
## 4. Programmation intelligente
|
||||
|
||||
Les scénarios de programmation intelligente visent à améliorer l'efficacité du développement et la qualité du code.
|
||||
|
||||
| # | Scénario d'application | Référence d'implémentation |
|
||||
|---|---|---|
|
||||
| 1 | Assistant de complétion de code et correction automatique de bugs | Complétion de code en temps réel via plugin IDE basé sur un modèle CodeLlama fine-tuné, analyse LLM des piles d'erreur pour localiser les bugs et générer le code correctif |
|
||||
| 2 | Plateforme de construction low-code et automatisation de processus | Description en langage naturel convertie par LLM en configuration low-code ou en squelette de code |
|
||||
| 3 | Système de génération de tests unitaires | Analyse AST du code source pour extraire la logique des fonctions, LLM génère des tests aux limites et aux scénarios d'exception, intégration Jest/Pytest |
|
||||
| 4 | Outil d'analyse de code et migration entre langages | Analyse de la structure du code via Tree-sitter, suggestions d'optimisation par LLM, migration entre langages via moteur de règles |
|
||||
| 5 | Outil de génération automatique de requêtes SQL en langage naturel | Conversion LLM de requêtes en langage naturel en SQL, support des jointures multi-tables et des agrégations |
|
||||
| 6 | Plateforme de tests API automatisés et génération de documentation | Analyse LLM des commentaires de code et des définitions d'API, génération automatique de tests et de documentation API, intégration Postman |
|
||||
| 7 | Outil de capture et de maintenance intelligente de scripts de tests UI | Plugin navigateur pour capturer les trajectoires utilisateur, LLM analyse l'intention et génère des scripts de test, correction par IA des localisateurs obsolètes |
|
||||
| 8 | Analyse de journaux système et localisation de pannes | Collecte de journaux via ELK Stack, analyse LLM des journaux anormaux pour extraire les informations clés et identifier la cause racine, suggestions de correction |
|
||||
| 9 | Outil de génération automatique de code UI frontend | Reconnaissance OCR de la structure de mise en page des maquettes, génération par LLM de CSS responsive et de composants, intégration TailwindCSS |
|
||||
| 10 | Assistant intelligent de conception et de modélisation de structures de bases de données | Saisie des documents de besoins métier, génération automatique de diagrammes ER et de structures de tables, support d'export vers MySQL/PostgreSQL |
|
||||
|
||||
## 5. Santé
|
||||
|
||||
Les scénarios de santé visent à améliorer l'efficacité du diagnostic et la qualité des services médicaux.
|
||||
|
||||
| # | Scénario d'application | Référence d'implémentation |
|
||||
|---|---|---|
|
||||
| 1 | Assistant intelligent d'interprétation de rapports médicaux | Upload de photos de rapports médicaux, OCR pour identifier les indicateurs clés, interprétation LLM des valeurs anormales et génération d'explications accessibles |
|
||||
| 2 | Conseiller en santé basé sur la recherche documentaire | Construction d'un graphe de connaissances médicales (CIM-10, notices de médicaments, guides de diagnostic), réponses par RAG |
|
||||
| 3 | Plateforme d'analyse décisionnelle de données de recherche clinique | Intégration de données EMR et de résultats de laboratoire, assistance LLM à la génération de code d'analyse statistique et de visualisations |
|
||||
| 4 | Outil de génération automatique de rapports d'imagerie médicale | Description des caractéristiques d'imagerie par le radiologue, génération automatique de rapports structurés par LLM, support de modèles pour les types d'examens courants |
|
||||
| 5 | Génération intelligente et résolution automatique de questions d'examens médicaux | Saisie de chapitres et de points de connaissances, génération LLM d'exercices et d'explications, archivage automatique des erreurs et analyse des lacunes |
|
||||
| 6 | Assistant Q&R intelligent sur les notices de médicaments | Upload de photos ou saisie de noms de médicaments, réponses LLM sur le dosage, les effets secondaires et les précautions |
|
||||
| 7 | Assistant de génération d'articles de vulgarisation médicale | Saisie de noms de maladies et de publics cibles, génération LLM d'articles vulgarisés, support de versions multiples (patient/famille) |
|
||||
| 8 | Outil de génération automatique de rapports d'imagerie médicale | Description des caractéristiques d'imagerie par le radiologue, génération automatique de rapports structurés par LLM, support de modèles pour les types d'examens courants |
|
||||
| 9 | Assistant de génération et d'archivage de comptes rendus opératoires | Saisie vocale des étapes clés pendant l'opération, génération structurée de comptes rendus par LLM, association automatique des codes opératoires |
|
||||
| 10 | Assistant intelligent de rappels médicamenteux pour maladies chroniques | Saisie de la liste des médicaments du patient, génération LLM de rappels personnalisés, vérification des contre-indications et Q&R interactif |
|
||||
|
||||
## 6. Cybersécurité
|
||||
|
||||
Les scénarios de cybersécurité se concentrent sur la protection et la gestion des risques.
|
||||
|
||||
| # | Scénario d'application | Référence d'implémentation |
|
||||
|---|---|---|
|
||||
| 1 | Moteur de détection et correction de vulnérabilités de code | Analyse statique du code (SAST), analyse LLM des principes de vulnérabilité et génération de suggestions de correction, intégration au pipeline CI/CD |
|
||||
| 2 | Système de détection et interception de phishing par IA générative | Analyse LLM du contenu des e-mails, des caractéristiques de l'expéditeur et de la sécurité des liens, identification du phishing généré par IA, interception en temps réel via la passerelle de messagerie |
|
||||
| 3 | Assistant de génération automatique de rapports quotidiens de sécurité | Consolidation des journaux des équipements de sécurité, extraction automatique des événements clés par LLM, marquage highlight des événements anormaux |
|
||||
| 4 | Assistant Q&R intelligent sur les connaissances en sécurité | Base de connaissances vectorielle construite à partir de documents de sécurité et de la base CVE, réponses LLM sur les techniques de sécurité et les recommandations de traitement |
|
||||
| 5 | Assistant de génération intelligente de rapports de tests de pénétration | Après les tests de pénétration, génération automatique de rapports par LLM basée sur les descriptions de vulnérabilités, génération en masse de suggestions de correction |
|
||||
| 6 | Protection contre le code malveillant et surveillance de la conformité à la vie privée | Analyse en bac à sable des comportements des fichiers suspects, identification par LLM des caractéristiques malveillantes et génération de signatures, scan d'identification des données privées |
|
||||
| 7 | Outil de génération de listes de contrôle de conformité de la configuration de sécurité | Saisie du type de système cible, génération LLM de listes de contrôle, support des normes telles que la protection classifiée 2.0 et CIS |
|
||||
| 8 | Assistant de recherche et d'analyse de renseignements sur les menaces | Connexion à des sources multiples de renseignements (open source, commerciaux), interprétation LLM des renseignements et corrélation avec les actifs de l'entreprise, recommandation de stratégies de protection |
|
||||
| 9 | Assistant de génération de rapports post-incident de sécurité | Après un incident de sécurité, génération automatique de rapports post-mortem par LLM basée sur la chronologie, analyse de la cause racine et suggestions d'amélioration |
|
||||
| 10 | Centre de surveillance et d'alerte sur les menaces mondiales | Collecte de données de sécurité et de divulgations de vulnérabilités via scraping, extraction LLM des informations clés et évaluation de l'impact, alertes par e-mail/SMS |
|
||||
|
||||
## 7. Finance, banque et assurance
|
||||
|
||||
Les scénarios financiers s'articulent autour du contrôle des risques et de l'intelligence métier.
|
||||
|
||||
| # | Scénario d'application | Référence d'implémentation |
|
||||
|---|---|---|
|
||||
| 1 | Assistant intelligent de génération de rapports de due diligence de crédit | Saisie des informations de base et des données financières de l'entreprise, génération automatique de rapports de due diligence, marquage automatique des points de risque |
|
||||
| 2 | Conseiller intelligent en gestion de patrimoine bancaire privé | Analyse LLM du profil de risque et des objectifs financiers du client, génération de suggestions d'allocation d'actifs, connexion aux produits de gestion de patrimoine et aux fonds |
|
||||
| 3 | Assistant de génération et de vérification de conformité de prospectus IPO | Modèles modulaires de prospectus, remplissage automatique par LLM des descriptions commerciales et des facteurs de risque, vérification de cohérence par moteur de règles |
|
||||
| 4 | Système de génération automatique de rapports financiers et d'alertes d'anomalies | Collecte automatique des données du système financier, génération LLM d'analyses financières et de discussions de la direction, alertes sur les indicateurs anormaux |
|
||||
| 5 | Assistant d'extraction d'informations de justificatifs et Q&R | Upload de photos de factures, reconnaissance OCR des informations, réponses LLM aux questions liées aux justificatifs, support de factures de TVA, reçus de train, etc. |
|
||||
| 6 | Assistant de recherche et Q&R de jurisprudence | Base de connaissances construite à partir de sanctions réglementaires, réponses LLM aux questions de conformité et références de cas |
|
||||
| 7 | Assistant de simulation de scripts pour agents d'assurance | LLM joue différents types de clients pour des dialogues simulés, évaluation de la conformité et de la force de persuasion des scripts, analyse de transcriptions d'enregistrements |
|
||||
| 8 | Plateforme d'analyse de clauses de polices d'assurance et comparaison des concurrents | Analyse structurée des clauses, génération LLM de résumés des points forts et des points d'attention |
|
||||
| 9 | Service de reconnaissance émotionnelle dans les conversations clients | Reconnaissance émotionnelle vocale combinée à la détection de conformité des scripts, feedback en temps réel à l'agent pour amélioration |
|
||||
| 10 | Assistant intelligent de suivi et de Q&R de progression de sinistres | Saisie du numéro de police ou de déclaration de sinistre par l'utilisateur, consultation LLM de la progression du sinistre et réponses aux questions liées |
|
||||
|
||||
## 8. Services d'entreprise
|
||||
|
||||
Les scénarios de services d'entreprise visent à améliorer l'efficacité opérationnelle et le niveau de management.
|
||||
|
||||
| # | Scénario d'application | Référence d'implémentation |
|
||||
|---|---|---|
|
||||
| 1 | Plateforme d'analyse de rétention et d'alerte de churn | Collecte de données comportementales via tracking, modèle ML de prédiction du churn, génération LLM de suggestions de rétention |
|
||||
| 2 | Plateforme de prospection et marketing par e-mail pour prospects B2B | Filtrage des données commerciales pour identifier les cibles, génération LLM de contenu marketing personnalisé, connexion à une plateforme d'envoi groupé |
|
||||
| 3 | Plateforme de suivi du pipeline commercial et de prévision de performance | Collecte automatique de données CRM, analyse LLM de l'entonnoir des ventes et prévision des objectifs, alertes push aux managers |
|
||||
| 4 | Radar de surveillance de l'e-réputation de marque et d'alerte de crise | Collecte de données d'opinion sur tout le web (réseaux sociaux, actualités, forums), analyse LLM du sentiment et des tendances de propagation, alertes de crise |
|
||||
| 5 | Assistant de rédaction intelligente d'e-mails professionnels et de gestion émotionnelle | Compréhension contextuelle des e-mails, génération LLM de brouillons professionnels, feedback d'analyse émotionnelle |
|
||||
| 6 | Système d'analyse intelligente de CV et de correspondance postes | Analyse PDF des CV pour extraire les informations clés, correspondance LLM avec les postes appropriés et génération de suggestions d'entretien, intégration ATS |
|
||||
| 7 | Assistant d'accueil et Q&R pour les nouveaux employés | Recherche RAG dans la base de connaissances des documents d'intégration, réponses LLM aux questions fréquentes des nouveaux employés |
|
||||
| 8 | Plateforme de feedback sur la performance et gestion OKR | Collecte de données OKR, analyse LLM de l'avancement des objectifs et génération de suggestions de feedback, collecte de feedback 360° |
|
||||
| 9 | Prise de notes intelligentes de réunions et gestion des TODO | Transcription des enregistrements de réunions, extraction LLM des points clés et des TODO, création automatique de tâches dans le système de gestion |
|
||||
| 10 | Reconnaissance de factures et traitement automatique de remboursements | Reconnaissance OCR des informations de factures, vérification automatique de l'authenticité et de la conformité des remboursements, connexion au système financier |
|
||||
|
||||
## 9. Production et exploitation de contenu
|
||||
|
||||
Les scénarios de production et d'exploitation de contenu se concentrent sur la création et le trafic.
|
||||
|
||||
| # | Scénario d'application | Référence d'implémentation |
|
||||
|---|---|---|
|
||||
| 1 | Plateforme d'aide à la création de contenu pour films et romans | Assistance LLM à la création : synopsis, développement de personnages, génération de dialogues ; visualisation de la structure narrative en carte mentale |
|
||||
| 2 | Assistant intelligent de rédaction d'histoires de marque et de RP | Saisie de mots-clés de marque et d'informations produit, génération LLM de plusieurs versions stylistiques de textes ; intégration de tests A/B |
|
||||
| 3 | Système de gestion d'interaction et de diffusion en direct par avatar numérique | Modélisation d'avatar + synthèse vocale TTS + dialogue LLM, réponse en temps réel aux commentaires en direct ; intégration OBS pour la diffusion |
|
||||
| 4 | Génération de scripts vidéo courts et montage intelligent | Génération LLM de scripts et de storyboards, Sora/Runway pour les extraits vidéo ; assemblage automatique par l'outil de montage |
|
||||
| 5 | Transcription vocale de ventes et recommandation de scripts | Transcription ASR des appels téléphoniques, analyse LLM des conversations et recommandation de scripts performants ; intégration CRM |
|
||||
| 6 | Système de génération intelligente de contenu marketing | Saisie des informations produit, génération LLM de textes marketing et d'extraction de points de vente ; intégration de modèles Canva/Gaoding Design |
|
||||
| 7 | Système de surveillance en temps réel du ROI des publicités et d'optimisation stratégique | Connexion API aux plateformes publicitaires pour collecter les données, analyse LLM de l'efficacité et génération de suggestions d'optimisation, alertes sur les anomalies |
|
||||
| 8 | Analyse de mots-clés et de trafic des moteurs de recherche | Collecte de données Baidu Index et 5118, analyse LLM des tendances des mots-clés et de la compétitivité, recommandation de sujets |
|
||||
| 9 | Plateforme d'analyse des dépenses publicitaires des concurrents | Collecte de données publicitaires via API de plateformes tierces, analyse LLM des stratégies de diffusion et des caractéristiques créatives |
|
||||
| 10 | Système d'analyse intelligente des tendances et de recommandation de sujets | Collecte de données de tendances (Recherche Weibo, classement Douyin), analyse LLM des tendances et recommandation d'angles de sujets ; planification de contenu calendaire |
|
||||
|
||||
## 10. Administration publique intelligente
|
||||
|
||||
Les scénarios d'administration publique visent à améliorer l'efficacité des services publics et la capacité de gouvernance.
|
||||
|
||||
| # | Scénario d'application | Référence d'implémentation |
|
||||
|---|---|---|
|
||||
| 1 | Système de navigation vocale intelligente et de répartition automatique pour la ligne 12345 | Reconnaissance vocale des appels des citoyens, compréhension LLM des demandes et répartition automatique vers le service compétent ; circulation automatique des tickets |
|
||||
| 2 | Robot d'accueil et de questions-réponses sur les services administratifs | Recherche RAG dans la base de connaissances gouvernementales, réponses LLM aux procédures et questions de politique ; connexion au système de prise de numéro |
|
||||
| 3 | Plateforme de correspondance et de diffusion ciblée de politiques de soutien aux entreprises | Analyse structurée des politiques, correspondance automatique des profils d'entreprises avec les politiques applicables ; rappels par SMS/e-mail |
|
||||
| 4 | Assistant de pré-examen des documents administratifs et de vérification de conformité | OCR des documents et extraction d'informations clés, vérification LLM de l'exhaustivité et de la conformité des documents |
|
||||
| 5 | Système de détection de comportements anormaux par vidéo surveillance publique | Analyse en temps réel des flux vidéo, détection CV de comportements anormaux (bagarres, chutes) ; alertes push |
|
||||
| 6 | Plateforme d'identification intelligente d'événements urbains et de gestion de dispatch | Collecte de données urbaines (IoT, caméras), identification LLM du type d'événement et répartition |
|
||||
| 7 | Système d'analyse multidimensionnelle d'opinion publique et d'alertes de risques | Fusion de données multi-sources (ligne 12345, opinion en ligne, visites de terrain), identification LLM des points chauds de risque |
|
||||
| 8 | Plateforme de numérisation, d'identification intelligente et d'archivage de dossiers administratifs | OCR du contenu textuel des archives, extraction LLM des informations clés et classification automatique ; support de recherche plein texte |
|
||||
| 9 | Plateforme de commande d'urgence et de distribution de ressources de secours | Collecte d'informations sur les événements, génération LLM de plans de réponse d'urgence ; optimisation algorithmique de la distribution des ressources |
|
||||
| 10 | Système de surveillance en grille de la pollution atmosphérique et de traçabilité de la source | Collecte de données des capteurs de qualité de l'air, modèle CV d'identification des sources de pollution ; analyse LLM des tendances de pollution et traçabilité |
|
||||
|
||||
## 11. Affaires juridiques et gestion contractuelle
|
||||
|
||||
Les scénarios juridiques se concentrent sur l'amélioration de l'efficacité des services juridiques et la gestion de la conformité.
|
||||
|
||||
| # | Scénario d'application | Référence d'implémentation |
|
||||
|---|---|---|
|
||||
| 1 | Agent de détection de risques contractuels en un clic | Analyse structurée des textes contractuels, identification par LLM des problèmes potentiels par comparaison avec une liste de contrôle ; marquage des clauses à haut risque |
|
||||
| 2 | Plateforme de vérification de conformité et de suggestions de modification pour le cycle de vie des contrats | Comparaison des clauses avec la base de données réglementaire, génération LLM de rapports de conformité ; suivi des suggestions de modification |
|
||||
| 3 | Conseiller AI d'évaluation du taux de succès de litiges similaires | Extraction de caractéristiques de cas, recherche et correspondance de cas similaires ; analyse LLM des facteurs influençant le succès |
|
||||
| 4 | Radar de surveillance en temps réel des changements législatifs et d'analyse d'impact | Mise à jour en temps réel de la base de données juridique, analyse LLM des modifications et évaluation de l'impact commercial ; alertes push |
|
||||
| 5 | Outil AIGC de rédaction automatique de lettres de mise en demeure | Saisie des faits, génération LLM de modèles de lettres de mise en demeure normalisées ; vérification des éléments et conformité |
|
||||
| 6 | Enregistreur de transcription en temps réel et extraction automatique des points litigieux | Transcription ASR des audiences, extraction LLM des points litigieux et des arguments clés ; annotation de timestamps |
|
||||
| 7 | Système de surveillance automatique de violations de propriété intellectuelle et de preuves blockchain | Surveillance des violations de propriété intellectuelle sur les plateformes e-commerce et les réseaux sociaux ; collecte automatique de preuves |
|
||||
| 8 | Agent de vérification de cohérence et d'alerte de risques pour les prospectus IPO | Comparaison de données multi-chapitres des prospectus, identification LLM des incohérences et des anomalies de données ; marquage des risques |
|
||||
| 9 | Plugin de traduction en langage simple de clauses juridiques complexes | Sélection de clauses juridiques, génération LLM d'explications accessibles |
|
||||
| 10 | Système intelligent de structuration et de visualisation de chaînes de preuves | Upload de documents de preuves, analyse LLM des relations entre les preuves et de la chronologie |
|
||||
|
||||
## 12. Tourisme et voyages
|
||||
|
||||
Les scénarios de tourisme visent à améliorer l'expérience de voyage et la commodité.
|
||||
|
||||
| # | Scénario d'application | Référence d'implémentation |
|
||||
|---|---|---|
|
||||
| 1 | Générateur d'itinéraires paresseux basé sur l'AIGC | Saisie des préférences (durée, budget, intérêts), génération LLM d'itinéraires quotidiens ; API de lieux touristiques pour les horaires et les billets |
|
||||
| 2 | Robot de prédiction de tendances de prix de vols et d'hôtels et verrouillage automatique des prix bas | Collecte de données de prix des OTA, modèle ML de prédiction des tendances ; alertes de surveillance des prix |
|
||||
| 3 | Conseiller en recomposition d'itinéraire inter-compagnies et suggestions de plans de secours après annulation de vol | Surveillance de l'état des vols, analyse LLM de plans de rechange ; comparaison multi-compagnies |
|
||||
| 4 | Système de pré-examen des documents de visa et d'aide au remplissage automatique | Photos des documents uploadées, vérification OCR de l'exhaustivité des informations ; remplissage automatique des formulaires |
|
||||
| 5 | Assistant de traduction vocale en temps réel et de visualisation de menus pour voyages à l'étranger | Modèle de traduction vocale hors ligne, OCR de photos de menus et traduction |
|
||||
| 6 | Analyseur de commentaires d'hôtels basé sur le big data pour éviter les mauvaises surprises | Collecte de données de commentaires d'hôtels, extraction LLM des mots-clés positifs et négatifs |
|
||||
| 7 | Plateforme de prévisualisation immersive en VR et sélection interactive de chambres | Collecte de panoramas à 360°, prévisualisation immersive en VR ; visite virtuelle des chambres |
|
||||
| 8 | Assistant de génération de récits de voyage et de posts sociaux à partir de traces de voyage | Extraction d'informations de lieu et de date à partir des photos, génération LLM de textes de récits ; modèles de mise en page |
|
||||
| 9 | Plateforme de collecte et de gestion de justificatifs de frais de déplacement professionnels | Connexion API aux plateformes de voyages d'affaires, collecte automatique de justificatifs ; vérification de conformité |
|
||||
| 10 | Navigation prédictive de la congestion touristique et planification d'itinéraires hors pointe | Collecte de données de fréquentation touristique, modèle ML de prédiction des périodes de pointe ; recommandation d'horaires hors pointe |
|
||||
|
||||
## 13. Accompagnement émotionnel
|
||||
|
||||
Les scénarios d'accompagnement émotionnel se concentrent sur la santé mentale et le soutien affectif.
|
||||
|
||||
| # | Scénario d'application | Référence d'implémentation |
|
||||
|---|---|---|
|
||||
| 1 | Compagnon virtuel d'accompagnement profond 24h/24 basé sur les LLM | Système de mémorisation stockant l'historique des conversations, génération LLM de réponses personnalisées ; module de soutien émotionnel |
|
||||
| 2 | Conseiller AI de reconnaissance émotionnelle multimodale et de soutien psychologique | Analyse du ton vocal + reconnaissance émotionnelle textuelle, génération LLM de conseils de soutien ; alerte d'intervention en crise |
|
||||
| 3 | Agent numérique de rééducation cognitive et de stimulation mnésique pour personnes atteintes de la maladie d'Alzheimer | Jeux cognitifs (mémoire, calcul, langage) ; stimulation par vieilles photos/vieilles chansons |
|
||||
| 4 | Coach de simulation sociale AIGC pour personnes souffrant d'anxiété sociale | Simulation de scénarios sociaux virtuels, LLM jouant différents rôles ; suggestions de techniques sociales |
|
||||
| 5 | Machine à histoires personnalisées générative pour enfants par IA | Saisie par les parents du thème et des préférences, génération LLM d'histoires personnalisées ; génération de musique de fond |
|
||||
| 6 | Système de résurrection numérique et de dialogue inter-temporel via LLM pour les défunts | Entraînement d'un modèle personnalisé à partir de données (voix, textes) du défunt ; génération de dialogues mémoriels |
|
||||
| 7 | Robot de chat empathique basé sur les données MBTI | Saisie des résultats du test MBTI, génération LLM d'analyse de personnalité et de réponses empathiques ; recommandation de correspondances de personnalité |
|
||||
| 8 | Assistant de suivi d'humeur 24h/24 et de motivation positive par IA | Enregistrement quotidien de l'état émotionnel, analyse LLM des tendances et génération de contenu motivant ; rappels positifs push |
|
||||
| 9 | Arbre à confidences pour adolescents avec respect de la vie privée | Entrée anonyme pour la confidence, LLM fournit écoute et conseils ; alerte sur les mots sensibles |
|
||||
| 10 | Système d'animaux de compagnie virtuels à évolution autonome | Entraînement d'un modèle de personnalité de l'animal, interaction et croissance évolutives ; système de personnalisation virtuelle |
|
||||
|
||||
## 14. Loisirs et divertissement
|
||||
|
||||
Les scénarios de loisirs visent à offrir une expérience de divertissement numérique riche.
|
||||
|
||||
| # | Scénario d'application | Référence d'implémentation |
|
||||
|---|---|---|
|
||||
| 1 | Moteur de décision autonome de PNJ pour jeux en monde ouvert basé sur les LLM | Arbre de comportement des PNJ fusionné avec les décisions LLM, système de dialogue pour des interactions personnalisées ; moteur de comportement |
|
||||
| 2 | Outil AIGC de progression narrative et d'assistance MJ pour murder games immersifs | Les choix des joueurs déclenchent des branches narratives, génération LLM de logique déductive ; génération automatique de cartes d'indices |
|
||||
| 3 | Modificateur génératif de fins pour fiction interactive | Les choix des lecteurs influencent le cours de l'histoire, génération LLM de multiples branches de fins |
|
||||
| 4 | Station de travail AIGC de modélisation 3D de personnages de style anime | Description textuelle pour générer des croquis de personnages, modélisation 3D automatique ; rendu de textures |
|
||||
| 5 | Analyste visuel CV et commentateur intelligent de parties esport | Analyse en temps réel du gameplay, identification des moments clés ; génération LLM de commentaires de match |
|
||||
| 6 | Moteur de recommandation algorithmique de contenu humoristique | Profilage d'intérêts des utilisateurs, correspondance et recommandation de contenu humoristique |
|
||||
| 7 | Logiciel d'optimisation vocale et d'embellissement de chant KTV | Traitement de réduction du bruit et d'amélioration vocale ; algorithme IA d'optimisation vocale |
|
||||
| 8 | Outil d'extraction et de montage intelligent de scènes par personnage de séries | Analyse du contenu vidéo, extraction de séquences par personnage ; montage automatique |
|
||||
| 9 | Système de génération automatique de livres audio multi-voix par TTS | Attribution de rôles textuels, génération de voix personnalisées ; ajout de musique de fond et d'effets sonores |
|
||||
| 10 | Coach d'analyse et de révision de parties de jeux de société basé sur l'apprentissage par renforcement | Analyse de parties, simulation d'adversaire par IA ; génération de suggestions de révision |
|
||||
|
||||
## 15. E-commerce
|
||||
|
||||
Les scénarios d'e-commerce se concentrent sur l'efficacité opérationnelle et l'amélioration des taux de conversion.
|
||||
|
||||
| # | Scénario d'application | Référence d'implémentation |
|
||||
|---|---|---|
|
||||
| 1 | Outil de production en masse de fiches produit à fort taux de conversion par AIGC | Saisie d'informations produit, génération LLM de textes vendeurs et de descriptions de scènes ; génération d'images de fond |
|
||||
| 2 | Usine de génération de vidéos d'essayage virtuel par IA pour vêtements | Traitement de photos de vêtements à plat, génération d'essayages virtuels ; vidéos multi-angles |
|
||||
| 3 | Assistant de traduction et d'adaptation multilingue LLM pour e-commerce transfrontalier | Traduction multilingue de descriptions de produits, adaptation culturelle ; interfaces de publication multi-plateformes |
|
||||
| 4 | Robot d'analyse de sentiment client basé sur le NLP et réponse intelligente | Analyse de sentiment des conversations de conseil, génération automatique de réponses apaisantes ; classification des avis positifs/négatifs |
|
||||
| 5 | Système de live shopping 24h/24 par avatar numérique AIGC | Avatar numérique + génération de scripts en temps réel, appel en temps réel aux informations produit ; interaction avec les commentaires en direct |
|
||||
| 6 | Plugin IA de comparaison de prix et de prédiction de tendances pour les produits similaires sur tout le web | Scraping de prix sur les plateformes e-commerce, tableaux comparatifs ; prédiction des tendances de prix |
|
||||
| 7 | Plateforme de filtrage intelligent de photos de clients et de synthèse de vidéos courtes | Scoring de qualité des photos des clients, recommandation automatique des contenus de qualité ; synthèse de modèles de vidéos courtes |
|
||||
| 8 | Analyse en temps réel de conversations de vente et recommandation de scripts performants basée sur LLM | Transcription ASR des appels, détection en temps réel de la conformité des scripts ; recommandation de scripts |
|
||||
| 9 | Moteur de détection de tendances du marché et de prédiction de produits populaires par IA | Collecte et analyse de données de réseaux sociaux et d'e-commerce, détection LLM des tendances et points chauds ; suggestions de sélection de produits |
|
||||
| 10 | Système de segmentation d'utilisateurs par IA et d'exploitation fine basé sur les données comportementales | Analyse par clustering de données comportementales, génération de tags de profils ; déclenchement automatisé du marketing |
|
||||
|
||||
## 16. Énergie
|
||||
|
||||
Les scénarios énergétiques visent à réaliser une gestion intelligente et une transition verte du secteur de l'énergie.
|
||||
|
||||
| # | Scénario d'application | Référence d'implémentation |
|
||||
|---|---|---|
|
||||
| 1 | Analyse IA des comportements de consommation domestique et conseiller en économie d'énergie | Collecte de données des compteurs intelligents, analyse des modes de consommation ; génération LLM de conseils d'économie |
|
||||
| 2 | Système de détection CV de défauts de panneaux photovoltaïques par drone | Inspection par drone, analyse d'images thermoinfrarouges ; détection et annotation de défauts |
|
||||
| 3 | Agent de prédiction de tendances de prix de l'énergie et de stratégie automatique de profit | Collecte de données du marché de l'énergie, modèle de prédiction des prix ; génération de stratégies et exécution de transactions |
|
||||
| 4 | Système de détection non destructive de la santé des batteries et d'alerte sur les risques de surchauffe | Surveillance des données de fonctionnement des batteries, modèle d'évaluation de la santé ; alertes push sur les risques |
|
||||
| 5 | Assistant IA de comptabilisation automatique des émissions carbone et de génération de rapports ESG | Collecte de données de consommation d'énergie, calcul des facteurs d'émission ; génération automatique de rapports ESG |
|
||||
| 6 | Système IA de prévision de charge en conditions météorologiques extrêmes et de commande d'urgence | Connexion aux données météorologiques, modèle de prévision de charge ; génération de stratégies d'ordonnancement |
|
||||
| 7 | Gardien IA de détection de violations dans les stations-service et alerte | Analyse vidéo des stations-service, détection de violations (appels téléphoniques, tabagisme) ; alertes push |
|
||||
| 8 | Système IA de surveillance par ondes acoustiques et de localisation précise de fuites d'oléoducs | Collecte de données de capteurs acoustiques, modèle de détection de fuites ; calcul de localisation |
|
||||
| 9 | Système d'agrégation de ressources virtuelles et de prise de décision de trading d'électricité par IA | Connexion de ressources distribuées, optimisation de l'ordonnancement agrégé ; exécution de stratégies de trading |
|
||||
| 10 | Suivi IA de la position des personnes dans les mines et alerte d'intrusion dans les zones dangereuses | Localisation UWB/BLE, suivi des trajectoires de personnes ; barrières électroniques pour les zones dangereuses |
|
||||
|
||||
## 17. Audiovisuel
|
||||
|
||||
Les scénarios audiovisuels se concentrent sur la production et le traitement des médias.
|
||||
|
||||
| # | Scénario d'application | Référence d'implémentation |
|
||||
|---|---|---|
|
||||
| 1 | Outil IA d'identification de moments forts et de montage automatique de vidéos longues | Analyse du contenu vidéo, identification des images clés ; montage automatique des moments forts |
|
||||
| 2 | Assistant IA de séparation intelligente du bruit de fond et d'amélioration vocale | Modèle de séparation audio, suppression du bruit de fond ; amélioration vocale |
|
||||
| 3 | Station de restauration 4K et de colorisation IA pour images anciennes | Modèle de super-résolution, restauration de la qualité des images anciennes ; colorisation automatique |
|
||||
| 4 | Système de doublage TTS de qualité professionnelle et contrôle des émotions | Modèle TTS multi-voix, contrôle émotionnel ; export audio |
|
||||
| 5 | Outil de reconnaissance vocale ASR automatique et génération de sous-titres bilingues | Reconnaissance vocale pour génération de sous-titres, traduction multilingue ; superposition de sous-titres bilingues |
|
||||
| 6 | Moteur IA d'effacement intelligent d'objets superflus dans les vidéos | Suivi de cibles vidéo par modèle de suivi d'objets, suppression et restauration par frames ; gestion de la cohérence inter-frames |
|
||||
| 7 | Compositeur automatique de musique de fond sans droits d'auteur par AIGC | Modèle de génération musicale, contrôle des émotions et du style ; détection des droits d'auteur |
|
||||
| 8 | Logiciel de clonage et de conversion vocale par IA pour voix de personnalités spécifiques | Entraînement d'un modèle de voix avec peu d'échantillons ; traitement de conversion vocale |
|
||||
| 9 | Plateforme de conversion de scripts en storyboards et génération de vidéos de prévisualisation par IA | Analyse de scripts pour génération de storyboards, génération LLM de vidéos de prévisualisation |
|
||||
| 10 | Assistant de transcription intelligente de réunions et d'extraction de TODO à partir d'enregistrements | Séparation et transcription vocale de réunions multi-participants, extraction LLM des TODO ; annotation de timestamps |
|
||||
|
||||
## 18. Marketing IA
|
||||
|
||||
Les scénarios de marketing IA visent à améliorer l'efficacité marketing et la production créative.
|
||||
|
||||
| # | Scénario d'application | Référence d'implémentation |
|
||||
|---|---|---|
|
||||
| 1 | Moteur AIGC de rédaction automatique de posts viraux pour Xiaohongshu | Saisie de sujets, génération LLM de posts sponsorisés ; optimisation d'emojis et de tags de sujets |
|
||||
| 2 | Outil IA de mise en page de supports marketing et d'adaptation multi-tailles | Saisie de textes, association intelligente de modèles de supports et export multi-tailles |
|
||||
| 3 | Plateforme AIGC de création de logos et de construction de charte VI | Saisie de mots-clés de marque, génération créative de logos ; génération de normes VI |
|
||||
| 4 | Assistant de suivi des tendances et de génération d'idées marketing opportunistes par IA | Collecte de données de tendances, analyse LLM des angles marketing ; génération de concepts créatifs |
|
||||
| 5 | Gestionnaire de budget publicitaire et système deenchères IA en temps réel | Connexion aux données des plateformes publicitaires, modèle d'analyse d'efficacité ; optimisation des stratégies d'enchères |
|
||||
| 6 | Analyseur approfondi des stratégies marketing des concurrents et générateur de rapports hebdomadaires par IA | Collecte et analyse de contenu des concurrents, extraction de stratégies ; génération automatique de rapports hebdomadaires |
|
||||
| 7 | Planification de mots-clés SEO et rédaction en masse d'articles par IA | Analyse de mots-clés, génération en masse d'articles ; suggestions d'optimisation SEO |
|
||||
| 8 | Expert en rédaction d'e-mails marketing personnalisés un-à-un | Données de profils d'utilisateurs, génération de contenu personnalisé ; tests A/B |
|
||||
| 9 | Radar de surveillance de la réputation de marque sur tout le web et alerte de crise IA | Collecte de données d'opinion sur tout le web, analyse de sentiment ; alertes push en cas de crise |
|
||||
| 10 | Outil AIGC de génération de scripts vidéo courts et d'aide au storyboard | Saisie de sujets, génération de scripts et de storyboards ; conseils de tournage |
|
||||
|
||||
## 19. Intelligence de données
|
||||
|
||||
Les scénarios d'intelligence de données se concentrent sur l'analyse et la valorisation des données.
|
||||
|
||||
| # | Scénario d'application | Référence d'implémentation |
|
||||
|---|---|---|
|
||||
| 1 | Moteur de recherche en langage naturel basé sur le Text-to-SQL | Conversion de requêtes en langage naturel en SQL, visualisation des résultats |
|
||||
| 2 | BI conversationnel : génération de graphiques en une phrase | Description des besoins en données, génération automatique de graphiques ; support de la bascule entre plusieurs types de graphiques |
|
||||
| 3 | Outil de reconnaissance de tableaux à partir de captures d'écran | Upload de captures d'écran, reconnaissance VLM de la structure et des données du tableau ; export en fichier Excel |
|
||||
| 4 | Outil IA de reconnaissance de tableaux à partir d'images et de captures d'écran | Reconnaissance OCR de la structure des tableaux à partir d'images, export des données en Excel |
|
||||
| 5 | Construction automatisée de graphes de connaissances à partir de données multi-sources | Connexion multi-sources, extraction d'entités et de relations ; stockage en base de données de graphes |
|
||||
| 6 | Assistant intelligent d'interprétation de rapports de données et d'analyse de tendances | Upload d'images ou saisie de données de rapports de données, interprétation VLM des graphiques et analyse de tendances |
|
||||
| 7 | Assistant d'interprétation de structures de tables de bases de données et de génération de requêtes exemple | Saisie de noms de tables ou de descriptions de champs, génération LLM de descriptions de tables et de requêtes SQL exemple |
|
||||
| 8 | Alignement intelligent et déduplication IA des données maîtresses d'entreprise | Correspondance multi-sources de données maîtresses, identification des enregistrements en double ; configuration de règles de fusion |
|
||||
| 9 | Outil de conversion de spécifications de données en scénarios de test | Saisie de descriptions de besoins en données, génération LLM de scénarios de test et de cas de validation |
|
||||
| 10 | Assistant Q&R intelligent sur les indicateurs de données | Construction d'une base de connaissances à partir de documents de définition d'indicateurs, réponses LLM sur la portée et la logique de calcul des indicateurs |
|
||||
@@ -0,0 +1,496 @@
|
||||
---
|
||||
title: "Jobs to Be Done : trouver ce que les utilisateurs veulent vraiment accomplir"
|
||||
description: "Article d'introduction à Jobs to Be Done pour les lecteurs débutants. Comprendre que les utilisateurs n'achètent pas des fonctionnalités mais « emploient » votre produit pour accomplir une progression dans un contexte spécifique, et apprendre à utiliser JTBD pour décomposer la direction produit, les questions d'entretien et les prompts AI."
|
||||
---
|
||||
|
||||
<script setup>
|
||||
const duration = 'Environ <strong>1,5 heure</strong>'
|
||||
</script>
|
||||
|
||||
# Jobs to Be Done : trouver ce que les utilisateurs veulent vraiment accomplir
|
||||
|
||||
<a id="top-jtbd"></a>
|
||||
|
||||
## Introduction du chapitre
|
||||
|
||||
<ChapterIntroduction
|
||||
:duration="duration"
|
||||
:tags="['JTBD', 'Besoins utilisateurs', 'Réflexion produit', 'Découverte de besoins']"
|
||||
coreOutput="1 phrase JTBD qui ressemble davantage à un vrai besoin"
|
||||
expectedOutput="Transformer une idée vague en un scénario utilisateur et une direction MVP plus concrets"
|
||||
>
|
||||
|
||||
Beaucoup de gens, quand ils commencent à créer un produit, font l'erreur la plus courante de concentrer toute leur attention sur « quelles fonctionnalités je vais créer ». Ils voient que d'autres ont une classification intelligente, ils veulent aussi l'ajouter ; ils voient que d'autres ont un résumé automatique, ils veulent aussi l'intégrer ; ils voient que d'autres ont fait des Agents, du multimodal, des workflows, ils se sentent obligés d'en faire autant.
|
||||
|
||||
Mais dans la réalité, les utilisateurs décident rarement d'utiliser un produit parce que « le nom de la fonctionnalité est cool ». Ils sont plutôt dans un moment précis, voulant faire avancer une tâche, et « embauchent » temporairement un outil, un service, voire une personne pour les aider à franchir cette étape.
|
||||
|
||||
C'est exactement ce que la méthode **Jobs to Be Done (JTBD)** nous rappelle : **les utilisateurs n'achètent pas des fonctionnalités en soi, ils emploient une certaine solution pour les aider à accomplir une progression.**
|
||||
|
||||
Cet article vous guidera, dans un langage aussi simple que possible, pour comprendre JTBD depuis zéro et en faire un outil d'analyse directement utilisable pour vos applications AI.
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
::: info SOP minimale
|
||||
**Objectif** : après avoir lu, vous saurez mieux comment transformer une idée vague en un besoin avec un vrai scénario utilisateur, au lieu de n'avoir en tête qu'une liste de noms de fonctionnalités.
|
||||
|
||||
**Actions** : écrivez 1 idée vague, trouvez 3 utilisateurs potentiels et demandez-leur « comment avez-vous géré ça la dernière fois », puis organisez le tout en 1 phrase JTBD.
|
||||
|
||||
**Résultat** : vous obtiendrez une hypothèse de besoin plus claire, sachant ce que la première version doit résoudre en priorité.
|
||||
|
||||
**Navigation rapide** : [Qu'est-ce que JTBD](#jtbd-what) · [La formule en une phrase](#jtbd-formula) · [Comment l'IA peut vous aider](#jtbd-ai)
|
||||
:::
|
||||
|
||||
## Ce que vous apprendrez
|
||||
|
||||
1. Qu'est-ce que Jobs to Be Done, et pourquoi c'est plus proche des besoins réels que le « brainstorming de fonctionnalités »
|
||||
2. Comment distinguer « les fonctionnalités que les utilisateurs disent vouloir » de « ce qu'ils veulent vraiment accomplir »
|
||||
3. Comment utiliser un modèle simple pour décomposer une idée vague en contexte, déclencheur, obstacle et critère de succès
|
||||
4. Comment utiliser JTBD pour les produits AI, les questions d'entretien et l'organisation des prompts
|
||||
|
||||
<a id="jtbd-what"></a>
|
||||
## [1. Qu'est-ce que Jobs to Be Done](#top-jtbd)
|
||||
|
||||
Jobs to Be Done est souvent abrégé en **JTBD**. L'idée centrale derrière cette méthode est liée à l'expression classique popularisée par l'équipe de Clayton Christensen : **les utilisateurs vont « employer » un certain produit pour accomplir une tâche.**
|
||||
|
||||
La « tâche » ici n'est pas une action superficielle de liste de choses à faire, mais une **progression** que l'utilisateur souhaite voir dans son état. Par exemple :
|
||||
|
||||
- Pas « je veux un outil AI de compte rendu », mais « je veux organiser les points clés, les tâches et les responsables en moins de 10 minutes après la réunion, sans dépendre de ma mémoire pour compléter les notes »
|
||||
- Pas « je veux une app de comptabilité », mais « je veux savoir où va mon argent, pour ne plus être anxieux en fin de mois »
|
||||
- Pas « je veux un optimiseur de CV », mais « je veux soumettre un CV décent avec plus de confiance, sans douter de la qualité de ce que j'ai écrit à chaque candidature »
|
||||
|
||||
Donc, **JTBD ne s'intéresse pas à l'apparence du produit, mais à la raison pour laquelle l'utilisateur en a besoin à ce moment précis.**
|
||||
|
||||
C'est aussi pourquoi de nombreux produits apparemment différents sont en réalité en concurrence pour le même job. L'utilisateur qui veut « ne pas s'ennuyer sur le chemin du travail » peut embaucher des vidéos courtes, des podcasts, des jeux, des chats, ou même la sieste. L'utilisateur qui veut « comprendre rapidement un PDF très long » peut embaucher un outil de résumé AI, un stagiaire, un collègue, lire lui-même en serrant les dents, ou simplement ne pas lire pour l'instant.
|
||||
|
||||
Une fois que vous regardez le problème sous cet angle, vous découvrirez que vos véritables concurrents ne sont souvent pas « une autre app qui vous ressemble », mais **toutes les alternatives actuellement acceptables pour l'utilisateur**.
|
||||
|
||||
## 2. Quelle est la différence entre JTBD, les personas et les listes de fonctionnalités
|
||||
|
||||
Beaucoup de débutants, quand ils commencent l'analyse des besoins, écrivent d'abord un persona : 25 ans, femme, ville de premier rang, cadre, aime les outils d'efficacité, prête à essayer de nouveaux produits. Ce type d'information n'est pas totalement inutile, mais il est généralement **insuffisant pour expliquer pourquoi une personne agirait à ce moment précis**.
|
||||
|
||||
JTBD s'intéresse davantage aux questions suivantes :
|
||||
|
||||
- Dans quel contexte a-t-il décidé de chercher une solution
|
||||
- Qu'est-ce qui le bloquait exactement à ce moment-là
|
||||
- Quelle tâche veut-il faire passer à l'étape suivante
|
||||
- Quelle méthode de fortune utilise-t-il actuellement
|
||||
- Si les choses sont bien résolues, quel résultat lui ferait dire « ça valait le coup »
|
||||
|
||||
Autrement dit, **le persona ressemble davantage à « qui est cette personne en gros », tandis que JTBD ressemble davantage à « que veut-elle vraiment accomplir maintenant »**.
|
||||
|
||||
De même, les listes de fonctionnalités peuvent facilement vous égarer. Les utilisateurs disent « je veux exporter en Word », « je veux une réécriture AI », « je veux une saisie vocale » — tout cela n'est qu'expression de surface. JTBD continue de creuser :
|
||||
|
||||
- Pourquoi avez-vous besoin d'exporter en Word maintenant, et pas en PDF ?
|
||||
- Vous voulez réécrire, est-ce parce que le style est mauvais, ou parce qu'il faut adapter à différents publics ?
|
||||
- Vous voulez la saisie vocale, est-ce parce que vous êtes paresseux pour taper, ou parce que vous êtes souvent en marchant, en conduisant, ou juste après une réunion pour prendre des notes immédiatement ?
|
||||
|
||||
Très souvent, **les fonctionnalités ne sont qu'une traduction temporaire du job**. Si vous ne collectez que des fonctionnalités, vous risquez de construire un produit « qui empile tout ce que les utilisateurs disent » ; si vous pouvez voir le job derrière, vous avez plus de chances de créer une solution vraiment fluide et véritablement compétitive.
|
||||
|
||||
## 3. Un exemple compréhensible même par un débutant
|
||||
|
||||
Ne vous précipitez pas pour penser à des produits AI complexes, commençons par un exemple de la vie quotidienne.
|
||||
|
||||
Supposons que quelqu'un n'a jamais le temps de prendre le petit-déjeuner avant de sortir le matin, alors il achète souvent un sandwich et un café à l'entrée du métro. En surface, il « achète » un petit-déjeuner ; mais vu par JTBD, ce qu'il veut vraiment accomplir pourrait être :
|
||||
|
||||
- Résoudre un repas le matin pressé, avec le moins d'effort mental possible
|
||||
- Ne pas avoir faim avant d'arriver au bureau
|
||||
- Ne pas retarder son trajet à cause du petit-déjeuner
|
||||
|
||||
Ici, l'utilisateur n'embauche pas « un sandwich d'une marque spécifique », mais une solution qui l'aide à faire avancer sa matinée sans encombre. Si le convenience store d'à côté est plus rapide, plus proche et plus fiable, il pourrait changer immédiatement.
|
||||
|
||||
Transposons cette logique aux produits AI et cela devient encore plus évident.
|
||||
|
||||
Par exemple, vous voulez créer un « outil AI de compte rendu de réunion ». Si vous vous arrêtez au niveau des fonctionnalités, vous commencerez facilement à penser :
|
||||
|
||||
- Faut-il supporter l'upload audio
|
||||
- Faut-il intégrer la séparation des locuteurs
|
||||
- Faut-il exporter en Markdown
|
||||
- Faut-il générer automatiquement les tâches
|
||||
|
||||
Tout cela n'est pas faux, mais ce n'est pas suffisant. Avec JTBD, on demande une couche de plus : ce que l'utilisateur veut vraiment accomplir pourrait être :
|
||||
|
||||
- Je veux, dans les 10 minutes après la réunion, synchroniser les résultats de la discussion avec les absents
|
||||
- Je veux extraire proprement les tâches, les responsables et les délais, pour que l'équipe ne collabore plus à base de mémoire
|
||||
- Je veux réduire le temps passé à organiser le contenu des réunions, pour consacrer mon énergie aux décisions et à l'avancement
|
||||
|
||||
Une fois le job clairement énoncé, beaucoup de priorités de fonctionnalités émergent naturellement. La chose la plus importante pour la première version n'est peut-être pas « supporter 12 formats d'exportation », mais :
|
||||
|
||||
- La structure du compte rendu doit être suffisamment claire
|
||||
- L'extraction des tâches doit être fiable
|
||||
- Le lien de partage doit être pratique
|
||||
- Le résultat doit être assez fiable pour être directement transféré à l'équipe
|
||||
|
||||
C'est la valeur de JTBD : **il vous aide à passer de « quelles capacités dois-je empiler » à « quelle progression je dois aider l'utilisateur à accomplir ».**
|
||||
|
||||
## 4. Un modèle JTBD pratique
|
||||
|
||||
Si vous êtes débutant, ne cherchez pas à rendre JTBD trop académique. Saisissez les 5 éléments les plus utiles pour commencer.
|
||||
|
||||
### 4.1 Contexte
|
||||
|
||||
À quel moment, dans quel environnement l'utilisateur pense-t-il à ce produit ?
|
||||
|
||||
- Juste après une réunion
|
||||
- Quand le patron demande soudainement un document
|
||||
- Le soir en préparant une candidature
|
||||
- En fin de mois quand on réalise que l'argent manque à nouveau
|
||||
|
||||
**Un besoin sans contexte n'est généralement pas encore assez réel.**
|
||||
|
||||
### 4.2 Déclencheur
|
||||
|
||||
Qu'est-ce qui le pousse à chercher immédiatement une solution ?
|
||||
|
||||
- Être submergé par un long document, sans savoir par où commencer
|
||||
- Devoir rendre un document demain, et découvrir aujourd'hui que le format est chaotique
|
||||
- Venir d'être rappelé par le manager sur l'avancement, et réaliser qu'on n'a pas organisé clairement
|
||||
- Vouloir tenir un journal, mais l'écriture manuelle, le copier-coller et l'organisation sont trop pénibles
|
||||
|
||||
Le déclencheur porte souvent une émotion. Cette émotion est importante, car elle détermine pourquoi l'utilisateur passe à l'action à ce moment précis.
|
||||
|
||||
### 4.3 La progression souhaitée
|
||||
|
||||
Il ne veut pas seulement « faire une action », mais se propulser vers quel nouvel état ?
|
||||
|
||||
- Du chaos à la clarté
|
||||
- De l'anxiété à la tranquillité
|
||||
- De la procrastination au démarrage
|
||||
- De l'inefficacité à la fluidité
|
||||
- De l'incapacité à expliquer à la capacité de livrer directement
|
||||
|
||||
À cette étape, le mot « progression » est crucial. Parce que beaucoup de gens n'achètent pas vraiment un outil, mais un **changement d'état**.
|
||||
|
||||
### 4.4 L'alternative actuelle
|
||||
|
||||
Sans votre produit, comment fait-il ?
|
||||
|
||||
- Copier-coller manuel
|
||||
- Se débrouiller avec Excel ou Notes
|
||||
- Demander de l'aide à un collègue
|
||||
- Remettre à plus tard
|
||||
- Naviguer entre plusieurs outils
|
||||
|
||||
Qui est l'alternative, qui est votre véritable environnement concurrentiel.
|
||||
|
||||
### 4.5 Critère de succès
|
||||
|
||||
Quand peut-on dire que le problème est vraiment résolu ?
|
||||
|
||||
- Obtenir un résultat partageable en 10 minutes
|
||||
- Pouvoir envoyer aux autres sans révision majeure
|
||||
- Ne pas facilement oublier, se tromper ou manquer quelque chose
|
||||
- Savoir quoi faire dès la première utilisation
|
||||
|
||||
Si vous ne savez même pas « comment l'utilisateur juge si ça valait le coup », cette direction n'est probablement pas encore assez aboutie.
|
||||
|
||||
<a id="jtbd-formula"></a>
|
||||
## [5. La formule en une phrase, prête à l'emploi](#top-jtbd)
|
||||
|
||||
Quand vous voulez clarifier une direction produit, vous pouvez d'abord utiliser cette formule très pratique :
|
||||
|
||||
> Quand __________, je veux __________, afin de __________.
|
||||
> Actuellement, je ne peux accomplir cette tâche qu'en __________.
|
||||
|
||||
Par exemple :
|
||||
|
||||
> Quand je sors d'une réunion de projet chargée en informations, je veux obtenir rapidement un compte rendu structuré avec les tâches, les responsables et les délais, afin de pouvoir synchroniser immédiatement l'équipe et faire avancer l'exécution.
|
||||
> Actuellement, je ne peux m'en sortir qu'en me remémorant, en fouillant dans l'historique de chat et en organisant manuellement.
|
||||
|
||||
Autre exemple :
|
||||
|
||||
> Quand je prépare une candidature pour un nouveau poste, je veux rapidement adapter mes expériences existantes en une version plus ciblée sur le poste, afin de soumettre un CV décent avec plus de confiance.
|
||||
> Actuellement, je ne fais que copier-coller l'ancien CV, modifier les formulations à la main, et à la fin, je suis de moins en moins sûr de moi.
|
||||
|
||||
Si vous pouvez écrire une phrase avec ce niveau de clarté, la conception des pages, des prompts et la hiérératisation des fonctionnalités deviendront beaucoup plus faciles.
|
||||
|
||||
## 6. Pour les produits AI, trois couches de job à examiner particulièrement
|
||||
|
||||
Beaucoup de produits AI semblent impressionnants en démonstration, mais ne parviennent pas à fidéliser les utilisateurs une fois en ligne. La raison courante est qu'ils ne résolvent que l'action de surface, pas le job plus profond.
|
||||
|
||||
Vous pouvez grossièrement diviser un job en trois couches :
|
||||
|
||||
### 6.1 Couche fonctionnelle
|
||||
|
||||
Quelle est la tâche la plus en surface ?
|
||||
|
||||
- Résumer un document
|
||||
- Réécrire un texte
|
||||
- Extraire les tâches
|
||||
- Générer une image
|
||||
|
||||
C'est la couche que les utilisateurs expriment le plus facilement.
|
||||
|
||||
### 6.2 Couche émotionnelle
|
||||
|
||||
Quel inconfort l'utilisateur veut-il réduire, ou quel ressenti veut-il obtenir ?
|
||||
|
||||
- Ne plus paniquer
|
||||
- Ne plus paraître non professionnel
|
||||
- Ne plus recommencer de zéro à chaque fois
|
||||
- Avoir plus de sentiment de contrôle
|
||||
|
||||
Beaucoup de volontés de paiement sont en réalité liées à la couche émotionnelle.
|
||||
|
||||
### 6.3 Couche sociale
|
||||
|
||||
Comment l'utilisateur veut-il être perçu par les autres ?
|
||||
|
||||
- Avoir l'air plus fiable
|
||||
- Avoir l'air plus organisé dans l'équipe
|
||||
- Avoir l'air plus professionnel face aux clients
|
||||
- Avoir l'air plus expressif sur les réseaux sociaux
|
||||
|
||||
Si vous ne faites que la couche fonctionnelle, le produit sera facilement remplaçable ; si vous comprenez aussi les couches émotionnelle et sociale, vous trouverez plus facilement une valeur vraiment engageante.
|
||||
|
||||
## 7. Utiliser JTBD pour filtrer les directions produit en sens inverse
|
||||
|
||||
Parfois, ce n'est pas que vous avez déjà un produit, mais que vous avez 3 à 5 idées et ne savez pas laquelle réaliser. JTBD est alors idéal pour le filtrage.
|
||||
|
||||
Vous pouvez prendre chaque idée et vous poser 5 questions :
|
||||
|
||||
1. Le contexte correspondant à cette idée est-il suffisamment spécifique ?
|
||||
2. Les utilisateurs utilisent-ils déjà une méthode de fortune pour s'en sortir ?
|
||||
3. La douleur de ce job est-elle suffisamment forte, ou suffisamment fréquente ?
|
||||
4. Si je le fais bien, l'utilisateur sentira-t-il clairement que « son état s'est amélioré » ?
|
||||
5. La première version peut-elle se concentrer uniquement sur l'étape clé de ce job, pour produire une version petite mais utile ?
|
||||
|
||||
Si une direction, après réflexion, ne peut toujours être décrite que par « ça a l'air intéressant », sans pouvoir préciser le déclencheur, l'alternative et le critère de succès, c'est probablement encore une inspiration vague, pas une direction aboutie.
|
||||
|
||||
## 8. Des questions prêtes à l'emploi pour interroger les utilisateurs
|
||||
|
||||
Beaucoup de gens, quand ils font une étude, demandent : « Quelle fonctionnalité voulez-vous ? » Ce type de question génère facilement des réponses superficielles.
|
||||
|
||||
JTBD est plus adapté pour poser les questions suivantes :
|
||||
|
||||
- Quand est la dernière fois que vous avez rencontré ce problème ?
|
||||
- Que faisiez-vous à ce moment-là, pourquoi étiez-vous bloqué ?
|
||||
- Comment l'avez-vous finalement résolu ?
|
||||
- Dans ce processus, qu'est-ce qui était le plus pénible, le plus lent, le plus angoissant ?
|
||||
- S'il y avait un outil pour vous aider, quel résultat vous ferait dire qu'il est vraiment utile ?
|
||||
- Quelles alternatives avez-vous essayées ? Pourquoi n'étaient-elles pas assez bonnes ?
|
||||
|
||||
L'avantage de cette approche est qu'elle ramène la conversation vers les expériences réelles, au lieu de rester sur des préférences imaginaires.
|
||||
|
||||
## 9. Utiliser l'IA pour vous aider dans la décomposition JTBD
|
||||
|
||||
JTBD n'a pas été inventé par l'IA, mais l'IA est très bien adaptée pour vous aider à organiser et affiner les analyses JTBD.
|
||||
|
||||
Par exemple, si vous avez collecté 5 à 10 retours utilisateurs, vous pouvez les confier au modèle et lui demander de les synthétiser selon la structure suivante :
|
||||
|
||||
```text
|
||||
Merci de jouer le rôle d'assistant de recherche produit.
|
||||
Je vais vous donner des citations d'utilisateurs, ne donnez pas d'abord de suggestions de fonctionnalités,
|
||||
mais organisez-les d'abord selon le framework Jobs to Be Done :
|
||||
|
||||
1. Dans quel contexte se trouve l'utilisateur
|
||||
2. Quel est l'événement déclencheur de son action
|
||||
3. Quelle progression veut-il vraiment accomplir
|
||||
4. Quelle est l'alternative actuelle
|
||||
5. Quel critère de succès est le plus important pour lui
|
||||
6. Quels mots émotionnels reviennent dans ces retours
|
||||
|
||||
Enfin, organisez tout cela en 3 hypothèses JTBD les plus dignes d'être validées en priorité.
|
||||
```
|
||||
|
||||
Si vous avez déjà une idée, vous pouvez aussi demander à l'IA de faire une première convergence :
|
||||
|
||||
```text
|
||||
Je veux créer un [votre idée produit].
|
||||
Ne me donnez pas directement une liste de fonctionnalités, mais analysez avec la méthode Jobs to Be Done :
|
||||
|
||||
1. Quels contextes spécifiques ce produit pourrait-il servir
|
||||
2. Quel est le job central que l'utilisateur veut accomplir dans chaque contexte
|
||||
3. Quelles sont les alternatives existantes
|
||||
4. Quel job est le plus adapté comme point de départ MVP, et pourquoi
|
||||
5. Écrivez le job final recommandé en une phrase JTBD claire
|
||||
```
|
||||
|
||||
L'avantage de cette approche est que vous ne vous faites pas immédiatement emporter par l'IA vers « 50 idées de fonctionnalités », mais vous clarifiez d'abord la direction.
|
||||
|
||||
## 10. Les 4 erreurs les plus courantes chez les débutants
|
||||
|
||||
### 10.1 Écrire le job comme un nom de fonctionnalité
|
||||
|
||||
« Résumé AI », « Classification intelligente », « Génération automatique » — ce ne sont pas des jobs, ce sont seulement des modes de réalisation possibles.
|
||||
|
||||
### 10.2 Écrire un public beaucoup trop large
|
||||
|
||||
« Tous les professionnels », « tous les étudiants », « tous les entrepreneurs » — tout cela est généralement trop vague. Plus c'est vague, plus il est difficile de voir les scénarios réels.
|
||||
|
||||
### 10.3 Écouter seulement ce que les utilisateurs disent, sans observer ce qu'ils font
|
||||
|
||||
Les utilisateurs peuvent décrire ce qu'ils veulent, mais leurs véritables priorités sont souvent cachées dans la façon dont ils se débrouillent actuellement.
|
||||
|
||||
### 10.4 Vouloir construire une plateforme complète dès le début
|
||||
|
||||
La bonne approche de JTBD n'est généralement pas « je vais construire une grande plateforme qui fait tout », mais cibler d'abord l'étape la plus critique dans un scénario, et la rendre extrêmement fluide.
|
||||
|
||||
## 11. Résumé
|
||||
|
||||
La valeur la plus importante de Jobs to Be Done n'est pas de vous donner un nouveau terme, mais de vous aider à changer de perspective : **ne vous fixez pas uniquement sur les fonctionnalités du produit, mais sur ce que l'utilisateur veut faire avancer à l'étape suivante.**
|
||||
|
||||
Quand vous commencerez à vous poser répétitivement ces questions :
|
||||
|
||||
- Dans quel contexte l'utilisateur embauche-t-il ce produit
|
||||
- Où est-il exactement bloqué
|
||||
- Quelle méthode de fortune utilise-t-il actuellement
|
||||
- Une fois le problème résolu, quel sera le changement d'état
|
||||
|
||||
Vous découvrirez que beaucoup d'idées floues deviennent soudainement claires, et que beaucoup de fonctionnalités tape-à-l'œil deviennent soudainement moins importantes.
|
||||
|
||||
Créer un produit, surtout un produit AI, le plus grand risque est de se laisser absorber par la démonstration de capacités dès le début. JTBD vous aide à ramener l'attention sur ce qui compte vraiment : **pourquoi l'utilisateur a besoin de vous, et quelle progression vous l'aidez à accomplir.**
|
||||
|
||||
<a id="jtbd-ai"></a>
|
||||
## [12. Comment utiliser l'IA pour mettre en pratique JTBD](#top-jtbd)
|
||||
|
||||
JTBD n'a pas été inventé par l'IA, mais l'IA est très bien adaptée pour servir d'assistante de recherche, d'assistante d'organisation et de miroir dans cette méthode. L'essentiel est : **laissez l'IA vous aider à organiser et à élargir, pas à deviner les utilisateurs à votre place.**
|
||||
|
||||
Voici comment l'utiliser :
|
||||
|
||||
### 12.1 Laissez l'IA réécrire vos idées vagues en hypothèses JTBD
|
||||
|
||||
Quand vous n'avez qu'une description vague en tête, comme « je veux créer un outil pour aider les étudiants à trouver un stage », vous pouvez d'abord demander à l'IA de la décomposer en plusieurs jobs possibles :
|
||||
|
||||
```text
|
||||
J'ai une idée produit vague : [votre idée]
|
||||
Ne me donnez pas directement une liste de fonctionnalités, mais analysez avec la méthode Jobs to Be Done :
|
||||
1. Quels contextes spécifiques cela pourrait-il correspondre
|
||||
2. Quelle progression l'utilisateur veut vraiment accomplir dans chaque contexte
|
||||
3. Quelles pourraient être les alternatives actuelles
|
||||
4. Quel job est le plus adapté pour un MVP en premier
|
||||
Écrivez chaque job en une phrase JTBD claire.
|
||||
```
|
||||
|
||||
Vous pouvez même écrire une entrée très basique :
|
||||
|
||||
```text
|
||||
Je veux créer un truc pour aider les étudiants à trouver un stage.
|
||||
Je ne sais pas encore exactement quoi faire, aidez-moi à réfléchir à ce que les utilisateurs veulent vraiment accomplir.
|
||||
```
|
||||
|
||||
L'IA pourrait répondre quelque chose comme :
|
||||
|
||||
```text
|
||||
Directions JTBD possibles :
|
||||
|
||||
1. Quand je prépare ma première candidature de stage, je veux savoir rapidement quels documents préparer en priorité,
|
||||
pour ne pas reporter ma candidature à cause de la confusion.
|
||||
|
||||
2. Quand je vois une offre de stage, je veux juger rapidement si ça vaut le coup de postuler,
|
||||
pour ne pas perdre trop de temps sur des postes inadaptés.
|
||||
|
||||
3. Quand je commence à postuler, je veux adapter mon CV existant en une version plus ciblée sur le poste,
|
||||
pour pouvoir postuler plus vite et améliorer mon taux de réussite.
|
||||
```
|
||||
|
||||
La valeur de ce type de résultat est qu'il décompose votre pensée vague en plusieurs directions plus proches de scénarios réels.
|
||||
|
||||
### 12.2 Laissez l'IA organiser les citations d'utilisateurs
|
||||
|
||||
Si vous avez déjà fait quelques entretiens, vous pouvez confier les notes à l'IA pour qu'elle en extraie les contextes, déclencheurs, alternatives et critères de succès qui reviennent :
|
||||
|
||||
```text
|
||||
Voici les citations de 5 utilisateurs.
|
||||
Ne donnez pas d'abord de solution, mais organisez selon le framework JTBD :
|
||||
1. Dans quel contexte se trouve l'utilisateur
|
||||
2. Quel est l'événement déclencheur de son action
|
||||
3. Quelle progression veut-il vraiment accomplir
|
||||
4. Quelle est l'alternative actuelle
|
||||
5. Quel critère de succès est le plus important pour lui
|
||||
6. Quelles informations reviennent chez plusieurs utilisateurs
|
||||
Enfin, organisez en 3 hypothèses JTBD prioritaires pour validation.
|
||||
```
|
||||
|
||||
Une entrée très simple pourrait être :
|
||||
|
||||
```text
|
||||
J'ai demandé à 3 personnes, ils m'ont dit à peu près ceci :
|
||||
|
||||
1. Chaque fois que je dois postuler, je dois refaire mon CV, c'est vraiment pénible.
|
||||
2. En fait, ce que je crains le plus, c'est de ne pas savoir si ce que j'écris est correct.
|
||||
3. Actuellement, je demande aux anciens de m'aider à relire, mais je n'ose pas toujours les déranger.
|
||||
|
||||
Organisez-moi ça : que veulent-ils vraiment accomplir ?
|
||||
```
|
||||
|
||||
L'IA pourrait répondre :
|
||||
|
||||
```text
|
||||
Résultat de l'organisation :
|
||||
|
||||
- Contexte commun : préparer une candidature de stage, besoin de traiter le CV
|
||||
- Difficulté commune : ne pas savoir comment modifier pour que ce soit « assez bon »
|
||||
- Alternative actuelle : demander aux anciens de relire, modifier soi-même en boucle
|
||||
- JTBD possible :
|
||||
Quand je prépare ma candidature de stage, je veux juger plus vite si mon CV a atteint le niveau pour être envoyé,
|
||||
pour ne pas rester bloqué à « encore un peu de modification » et ne jamais l'envoyer.
|
||||
```
|
||||
|
||||
Ce type de résultat est utile parce qu'il vous aide à extraire des notes dispersées quelque chose qui ressemble davantage à un « besoin ».
|
||||
|
||||
### 12.3 Laissez l'IA faire une recherche en ligne légère
|
||||
|
||||
Avant de vous lancer dans des entretiens à grande échelle, vous pouvez demander à l'IA de faire un scan externe très léger, comme :
|
||||
|
||||
- Dans les forums ou communautés publics, comment les gens se plaignent-ils de ce problème
|
||||
- Les produits existants résolvent-ils principalement quelle couche du problème
|
||||
- Quelle est l'alternative la plus courante des utilisateurs
|
||||
- Dans les avis fréquents, qu'est-ce que les gens apprécient le plus et le moins
|
||||
|
||||
Ce type de recherche ne remplace pas les entretiens avec de vrais utilisateurs, mais il est idéal comme échauffement en phase Discover, pour construire d'abord une carte des problèmes.
|
||||
|
||||
Une entrée simple pourrait être :
|
||||
|
||||
```text
|
||||
Merci de rechercher :
|
||||
« Quelles sont les douleurs les plus fréquentes quand les étudiants modifient leur CV et postulent pour des stages ? »
|
||||
Priorisez les forums publics, les posts d'expérience et les communautés de recherche d'emploi.
|
||||
Organisez en 5 problèmes les plus fréquents.
|
||||
```
|
||||
|
||||
L'IA pourrait répondre :
|
||||
|
||||
```text
|
||||
Douleurs fréquentes :
|
||||
|
||||
1. Ne sait pas quoi mettre dans le CV, trop peu d'expériences
|
||||
2. Ne sait pas comment adapter pour différents postes
|
||||
3. A modifié beaucoup de versions, mais n'est toujours pas sûr que c'est assez bon
|
||||
4. Ne trouve personne de fiable pour relire
|
||||
5. Le processus de candidature est complexe, tendance à procrastiner
|
||||
```
|
||||
|
||||
Ce type de résultat ne peut pas être considéré comme conclusion finale, mais il est idéal pour décider quel type de problème interviewer en priorité.
|
||||
|
||||
### 12.4 Laissez l'IA jouer le rôle de « contre-partie »
|
||||
|
||||
Très souvent, nous sommes trop attachés à nos propres idées. Vous pouvez demander à l'IA de jouer un rôle de critique pour vous forcer à clarifier vos questions :
|
||||
|
||||
```text
|
||||
Merci de jouer le rôle d'un consultant en recherche produit très strict.
|
||||
Voici mon hypothèse JTBD : [votre hypothèse]
|
||||
Critiquez-la sous les angles suivants :
|
||||
1. Le contexte est-il trop large
|
||||
2. Le job est-il écrit comme une fonctionnalité plutôt qu'une vraie progression
|
||||
3. L'alternative est-elle trop faible
|
||||
4. Le critère de succès n'est-il pas assez clair
|
||||
5. Quel est le risque principal qui nécessite une validation pour cette hypothèse
|
||||
```
|
||||
|
||||
L'avantage de cette approche est que vous découvrirez plus vite si vous regardez un besoin ou seulement une solution que vous aimez.
|
||||
|
||||
## 📚 Exercices
|
||||
|
||||
En vous basant sur le contenu ci-dessus, veuillez réaliser les exercices suivants :
|
||||
|
||||
1. Choisissez une idée produit que vous avez récemment, et écrivez-la clairement avec une phrase JTBD
|
||||
2. Complétez les 5 éléments pour cette idée : contexte, déclencheur, progression, alternative, critère de succès
|
||||
3. Trouvez 3 utilisateurs potentiels, et demandez au moins une fois « quand est la dernière fois que vous avez rencontré ce problème »
|
||||
4. Confiez les notes d'entretien à l'IA et organisez-les en 3 hypothèses JTBD prioritaires pour validation
|
||||
|
||||
## Lectures complémentaires
|
||||
|
||||
- [Christensen Institute : Jobs to Be Done](https://www.christenseninstitute.org/theory/jobs-to-be-done/)
|
||||
- [Harvard Business School Online : What Is Jobs to Be Done?](https://online.hbs.edu/blog/post/jobs-to-be-done)
|
||||
- [Intercom : Jobs-to-be-Done : A framework for customer needs](https://www.intercom.com/blog/jobs-to-be-done-framework/)
|
||||
- [Mural : Jobs to Be Done framework guide](https://www.mural.co/blog/jobs-to-be-done-framework)
|
||||
@@ -0,0 +1,589 @@
|
||||
---
|
||||
title: "The Mom Test : comment valider les besoins par les entretiens utilisateurs"
|
||||
description: "Article d'introduction à The Mom Test pour les lecteurs débutants. Apprenez à éviter les retours de politesse, à mener des entretiens utilisateurs axés sur les comportements réels, les faits concrets et les problèmes existants, et à transformer les « ça a l'air pas mal » en jugements de besoins plus fiables."
|
||||
---
|
||||
|
||||
<script setup>
|
||||
const duration = 'Environ <strong>1,5 heure</strong>'
|
||||
</script>
|
||||
|
||||
# The Mom Test : comment valider les besoins par les entretiens utilisateurs
|
||||
|
||||
<a id="top-mom"></a>
|
||||
|
||||
## Introduction du chapitre
|
||||
|
||||
<ChapterIntroduction
|
||||
:duration="duration"
|
||||
:tags="['Entretien utilisateur', 'Validation des besoins', 'Recherche utilisateur', 'Étude de marché']"
|
||||
coreOutput="1 ensemble de questions d'entretien plus à même de révéler des informations réelles"
|
||||
expectedOutput="Ne plus prendre les encouragements de politesse pour une validation, et savoir juger la direction à partir de comportements réels"
|
||||
>
|
||||
|
||||
Beaucoup de gens, lorsqu'ils font leur première étude de marché, pensent que le plus important est de « discuter avec des gens ». Alors ils vont demander à leurs amis, collègues, voire leur famille :
|
||||
|
||||
- Tu penses quoi de mon idée ?
|
||||
- S'il y avait un produit comme ça, tu l'utiliserais ?
|
||||
- Cette fonctionnalité, ça a l'air pas mal, non ?
|
||||
|
||||
L'autre personne donne souvent un retour très encourageant :
|
||||
|
||||
- C'est pas mal
|
||||
- Ça a l'air utile
|
||||
- Je pense que tu devrais essayer
|
||||
|
||||
Le problème, c'est que ces réponses ne vous aident généralement pas à prendre une décision. Elles ressemblent davantage à de la politesse, du soutien, ou une réaction naturelle pour ne pas vous décevoir sur le moment. Vous pensez avoir obtenu une « validation de marché », mais en réalité vous n'avez collecté qu'un ensemble de réconforts difficilement exploitables pour la prise de décision.
|
||||
|
||||
La méthode The Mom Test a été conçue précisément pour résoudre ce problème. Elle nous rappelle : **ce n'est pas que les utilisateurs essaient de vous mentir, c'est que votre façon de poser les questions oriente naturellement l'autre personne vers des réponses flatteuses mais inutiles.**
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
::: info SOP minimale
|
||||
**Objectif** : après avoir lu, vous saurez mieux comment discuter avec les utilisateurs pour ne pas entendre uniquement « ça a l'air pas mal », mais vraiment obtenir des informations qui vous aident à juger la direction.
|
||||
|
||||
**Actions** : réécrivez vos 5 questions initiales, en privilégiant « quand est la dernière fois que ça s'est produit » et « comment avez-vous géré ça à ce moment-là ».
|
||||
|
||||
**Résultat** : vous saurez plus facilement distinguer ce qui est une opinion de ce qui constitue une véritable preuve pour étayer vos décisions.
|
||||
|
||||
**Navigation rapide** : [Qu'est-ce que The Mom Test](#mom-what) · [Trois principes fondamentaux](#mom-principles) · [Comment l'IA peut vous aider](#mom-ai)
|
||||
:::
|
||||
|
||||
## Ce que vous apprendrez
|
||||
|
||||
1. Quel problème The Mom Test résout réellement, et pourquoi beaucoup de « recherches utilisateurs » ne capturent en fait pas d'informations réelles
|
||||
2. Les principes fondamentaux de cette méthode : moins demander des opinions, plus demander des comportements ; moins demander des hypothèses, plus demander des faits
|
||||
3. Comment transformer une question qui génère facilement des faux positifs en une question d'entretien plus précieuse
|
||||
4. Comment combiner The Mom Test avec JTBD, la validation des besoins et l'évaluation du MVP
|
||||
|
||||
<a id="mom-what"></a>
|
||||
## [1. Qu'est-ce que The Mom Test vraiment](#top-mom)
|
||||
|
||||
The Mom Test vient du livre du même nom de Rob Fitzpatrick. Son nom ressemble à une blague, mais il touche juste :
|
||||
|
||||
**Même votre maman aurait du mal à vous dire directement « c'est une mauvaise idée ».**
|
||||
|
||||
La raison n'est pas qu'elle est malhonnête, mais :
|
||||
|
||||
- Elle ne veut pas vous blesser
|
||||
- Elle va instinctivement vous encourager
|
||||
- Elle a facilement tendance à répondre dans le sens de ce que vous exprimez
|
||||
|
||||
Et ce n'est pas seulement votre maman — les amis, collègues, anciens camarades de classe, et même beaucoup d'inconnus, face à votre idée de produit, donnent souvent des « retours positifs » similaires. Cela ne signifie pas que le besoin est réel, seulement que vous avez formulé votre question d'une manière qui génère facilement des réponses flatteuses.
|
||||
|
||||
Donc, l'essentiel de The Mom Test n'a jamais été « ne demandez pas à votre maman », mais :
|
||||
|
||||
**Ne formulez pas vos questions de façon à ce que n'importe qui soit enclin à vous donner une réponse qui vous va droit au cœur.**
|
||||
|
||||
Ce que cette méthode veut vraiment vous apprendre, c'est comment obtenir, par la conversation, des informations plus proches des besoins réels, plutôt que de collecter un ensemble de commentaires qui vous font simplement vous sentir bien.
|
||||
|
||||
## 2. Quel est le problème fondamental qu'elle résout
|
||||
|
||||
The Mom Test résout principalement une illusion cognitive très courante :
|
||||
|
||||
**Prendre les retours positifs de politesse pour des besoins réels.**
|
||||
|
||||
Par exemple, si vous demandez :
|
||||
|
||||
- Tu penses quoi de cette idée d'application ?
|
||||
- Si je faisais un outil AI pour t'aider à écrire ton CV, tu l'utiliserais ?
|
||||
- Cette fonctionnalité, est-ce qu'elle a de la valeur ?
|
||||
|
||||
Ces questions ont en commun :
|
||||
|
||||
- Elles demandent toutes des « opinions »
|
||||
- Elles portent toutes une pointe de suggestion
|
||||
- Elles parlent toutes d'un futur qui n'est pas encore arrivé
|
||||
|
||||
Or, les réponses des gens aux « opinions » et aux « hypothèses futures » sont généralement instables. Beaucoup de gens surestiment leur intérêt, leur capacité d'exécution, et leur volonté future de payer.
|
||||
|
||||
The Mom Test vous rappelle donc :
|
||||
|
||||
- Ne croyez pas trop les évaluations des autres sur vos idées
|
||||
- Ne croyez pas trop les prédictions des autres sur leurs comportements futurs
|
||||
- Revenez autant que possible aux comportements réels déjà observés chez les utilisateurs
|
||||
|
||||
Parce que comparé à « est-ce que tu utiliserais ça », « comment as-tu géré ce problème la dernière fois » est souvent bien plus proche de la vérité.
|
||||
|
||||
<a id="mom-principles"></a>
|
||||
## [3. Les trois principes fondamentaux](#top-mom)
|
||||
|
||||
Si vous ne deviez retenir que la partie la plus importante, commencez par ces trois principes.
|
||||
|
||||
### 3.1 Parlez moins de votre idée, parlez plus des expériences réelles passées de l'utilisateur
|
||||
|
||||
Beaucoup d'entretiens inefficaces commencent par exposer sa propre solution, à quel point on est enthousiaste, quel produit on prépare. Le problème, c'est qu'une fois que vous avez trop parlé, l'autre personne passe facilement en mode « vous accompagner » et « vous encourager ».
|
||||
|
||||
Une meilleure approche consiste à se concentrer sur l'expérience de l'autre :
|
||||
|
||||
- Quand est la dernière fois que vous avez rencontré ce problème ?
|
||||
- Que faisiez-vous à ce moment-là ?
|
||||
- Comment avez-vous fini par le résoudre ?
|
||||
- Quelle étape était la plus pénible ?
|
||||
|
||||
Ce type de questions ramène naturellement la conversation vers la réalité, au lieu de rester sur des préférences imaginaires.
|
||||
|
||||
### 3.2 Demandez moins d'opinions abstraites, demandez plus de faits concrets
|
||||
|
||||
« Je trouve cette fonctionnalité pas mal », « ça a l'air bien », « ça semble utile » — toutes ces expressions sont trop abstraites pour guider les décisions produit.
|
||||
|
||||
Les informations plus précieuses ressemblent plutôt à ça :
|
||||
|
||||
- La semaine dernière, j'ai passé 2 heures à me débattre avec ce problème
|
||||
- Actuellement, je me débrouille avec Excel et WeChat
|
||||
- Le mois dernier, j'ai déjà payé pour un outil similaire
|
||||
- Ma plus grande crainte est de me tromper, pas d'être lent
|
||||
|
||||
Ce sont ces informations qui vous aident vraiment à juger l'intensité du problème, sa fréquence et la probabilité de paiement.
|
||||
|
||||
### 3.3 Demandez moins aux utilisateurs quelle solution ils veulent, observez davantage comment ils résolvent le problème actuellement
|
||||
|
||||
Les utilisateurs sont très doués pour décrire leurs frustrations, mais pas nécessairement pour concevoir des solutions.
|
||||
|
||||
Si vous demandez :
|
||||
|
||||
- Voudriez-vous un AI qui fait ça automatiquement pour vous ?
|
||||
- Pensez-vous qu'ajouter une fonctionnalité intelligente serait utile ?
|
||||
|
||||
Vous n'obtiendrez généralement qu'une attitude vague envers une solution, pas le besoin lui-même.
|
||||
|
||||
Les meilleures questions sont :
|
||||
|
||||
- Comment gérez-vous ce problème actuellement ?
|
||||
- Pourquoi avez-vous choisi cette méthode ?
|
||||
- Qu'est-ce qui ne va pas avec cette méthode ?
|
||||
|
||||
Comprendre les alternatives actuelles est souvent plus important que de demander directement « que voulez-vous ».
|
||||
|
||||
## 4. Pourquoi les gens vous donnent toujours des réponses flatteuses mais inutiles
|
||||
|
||||
Si vous comprenez cela, vous ferez beaucoup moins d'erreurs de jugement lors des entretiens.
|
||||
|
||||
### 4.1 Les gens sont instinctivement polis
|
||||
|
||||
Surtout quand votre interlocuteur a une relation avec vous, il aura du mal à dire directement :
|
||||
|
||||
- Cette direction ne me semble pas viable
|
||||
- Je n'utiliserais pas ça du tout
|
||||
- Ce problème n'est pas si important pour moi
|
||||
|
||||
Il dira plus probablement « c'est pas mal » ou « ça vaut le coup d'essayer ».
|
||||
|
||||
### 4.2 Les gens surestiment leur futur moi
|
||||
|
||||
Beaucoup de gens croient sincèrement qu'ils seront à l'avenir :
|
||||
|
||||
- Plus disciplinés
|
||||
- Plus disposés à apprendre
|
||||
- Plus disposés à payer
|
||||
- Plus ouverts aux nouveaux outils
|
||||
|
||||
Donc la phrase « si ça existait, je l'utiliserais probablement » ne signifie souvent pas que la personne l'utilisera vraiment.
|
||||
|
||||
### 4.3 Votre façon de poser les questions oriente les réponses
|
||||
|
||||
Quand vous demandez :
|
||||
|
||||
- Mon idée est pas mal, non ?
|
||||
- Cette fonctionnalité vous serait très utile, n'est-ce pas ?
|
||||
|
||||
Vous avez subtilement glissé la « bonne réponse » dans la question.
|
||||
|
||||
C'est pourquoi The Mom Test insiste particulièrement : **ne transformez pas vos entretiens en quête de validation.**
|
||||
|
||||
## 5. Comparaison directe : quelles questions sont inutiles, lesquelles sont plus précieuses
|
||||
|
||||
Ces comparaisons sont utiles pour presque tous les débutants.
|
||||
|
||||
| Questions inutiles | Questions plus précieuses |
|
||||
| --- | --- |
|
||||
| Tu penses quoi de mon idée ? | Quand est la dernière fois que tu as rencontré ce problème ? |
|
||||
| S'il y avait ce produit, tu l'utiliserais ? | Comment gérez-vous ce problème actuellement ? |
|
||||
| Serais-tu prêt à payer pour cette fonctionnalité ? | As-tu déjà dépensé de l'argent pour ce problème ? Pour quoi ? |
|
||||
| Trouves-tu cette fonctionnalité importante ? | Dans ce processus, quelle étape est la plus pénible, la plus lente, la plus angoissante ? |
|
||||
| Voudrais-tu un AI qui fait ça automatiquement ? | Pourquoi n'as-tu pas encore trouvé de meilleure solution ? |
|
||||
|
||||
Ce qui est le plus important dans ce tableau, ce ne sont pas les phrases exactes, mais la direction sous-jacente :
|
||||
|
||||
- Des opinions vers les faits
|
||||
- Du futur vers le passé
|
||||
- De votre solution vers le problème de l'utilisateur
|
||||
|
||||
## 6. Un rythme d'entretien que même un débutant peut utiliser immédiatement
|
||||
|
||||
Si vous voulez aller parler à des gens dès maintenant, vous pouvez suivre cet ordre.
|
||||
|
||||
### 6.1 Ouverture : expliquez que vous apprenez, pas que vous vendez
|
||||
|
||||
Par exemple :
|
||||
|
||||
> Je fais des recherches sur la façon dont les gens gèrent ce type de problème, je veux d'abord comprendre la situation réelle, je ne viens pas vous vendre quelque chose.
|
||||
|
||||
Cette formulation permet à l'autre personne de relâcher plus facilement le fardeau psychologique de « devoir vous donner un retour positif ».
|
||||
|
||||
### 6.2 Commencez par la dernière expérience réelle
|
||||
|
||||
Vous pouvez commencer par ce type de questions :
|
||||
|
||||
- Quand est la dernière fois que vous avez rencontré ce problème ?
|
||||
- Que s'est-il passé à ce moment-là ?
|
||||
- Quelle a été votre première réaction pour le gérer ?
|
||||
|
||||
Une fois que la conversation entre dans des événements précis, la qualité des informations s'améliore généralement de manière significative.
|
||||
|
||||
### 6.3 Approfondissez sur les comportements, les coûts et les alternatives
|
||||
|
||||
Continuez à demander :
|
||||
|
||||
- Comment résolvez-vous ce problème actuellement ?
|
||||
- Qu'est-ce qui est le plus désagréable dans cette méthode ?
|
||||
- Combien de temps, d'argent ou d'énergie y consacrez-vous ?
|
||||
- Avez-vous essayé d'autres méthodes ? Pourquoi ne les avez-vous pas poursuivies ?
|
||||
|
||||
### 6.4 Enfin, évaluez la douleur et la priorité
|
||||
|
||||
Vous n'avez pas besoin de demander directement « est-ce douloureux ? », vous pouvez juger à partir des détails :
|
||||
|
||||
- Est-ce que ça arrive souvent
|
||||
- Est-ce qu'il cherche activement des solutions de secours
|
||||
- Est-ce qu'il est déjà prêt à payer pour ça
|
||||
- Est-ce qu'il montre des émotions évidentes quand il en parle
|
||||
|
||||
Tout cela est plus utile qu'une simple « est-ce que c'est votre point de douleur ».
|
||||
|
||||
## 7. Un exemple plus complet
|
||||
|
||||
Supposons que vous voulez créer un produit « AI qui aide les étudiants à améliorer leur CV ».
|
||||
|
||||
### Mauvaise approche
|
||||
|
||||
Vous allez demander à des camarades :
|
||||
|
||||
> Je veux créer un outil d'optimisation de CV par AI, tu en penses quoi ?
|
||||
> S'il pouvait adapter automatiquement le CV selon le poste, tu l'utiliserais ?
|
||||
|
||||
À ce moment, l'autre personne dira probablement :
|
||||
|
||||
- Ça a l'air pas mal
|
||||
- Je pense que ça pourrait être utile
|
||||
> Si c'est gratuit, j'essaierais
|
||||
|
||||
Ces réponses ne vous aident pratiquement pas à déterminer si le besoin est fort ou non.
|
||||
|
||||
### Meilleure approche
|
||||
|
||||
Vous pourriez reformuler :
|
||||
|
||||
> Quand est la dernière fois que tu as modifié ton CV ?
|
||||
> Pourquoi devais-tu le modifier à ce moment-là ?
|
||||
> Comment t'y es-tu pris ?
|
||||
> Quelle étape t'a le plus bloqué ?
|
||||
> As-tu demandé à quelqu'un de t'aider à le relire ?
|
||||
> As-tu déjà passé beaucoup de temps ou dépensé de l'argent pour ton CV ?
|
||||
|
||||
Grâce à ces questions, les informations que vous pourriez obtenir sont :
|
||||
|
||||
- Beaucoup de gens ne savent pas écrire, mais ne savent pas comment adapter leur CV pour différents postes
|
||||
- Leur plus grande difficulté n'est pas la mise en page, mais « ne pas savoir quelles expériences valent la peine d'être mentionnées »
|
||||
- Ils procrastinent, pas parce qu'ils sont paresseux, mais parce que chaque modification de CV est épuisante
|
||||
- Ils utilisent déjà les conseils de leurs aînés, les sites de modèles, les outils AI et les relectures par des amis pour s'en sortir
|
||||
|
||||
À ce stade, vous êtes bien plus proche du problème réel.
|
||||
|
||||
## 8. Comment combiner The Mom Test avec JTBD
|
||||
|
||||
Si JTBD vous aide à voir « ce que l'utilisateur veut accomplir », The Mom Test vous apprend plutôt :
|
||||
|
||||
**Comment vérifier, par des entretiens, si ce job existe vraiment.**
|
||||
|
||||
Vous pouvez tout à fait les utiliser ensemble :
|
||||
|
||||
1. D'abord, utilisez JTBD pour formuler une hypothèse de job
|
||||
2. Puis utilisez les techniques de The Mom Test pour interroger les utilisateurs sur leur dernière expérience réelle
|
||||
3. Vérifiez si ce job est vraiment fréquent, réel et prioritaire
|
||||
|
||||
Par exemple, votre hypothèse JTBD pourrait être :
|
||||
|
||||
> Quand je prépare ma candidature pour un stage, je veux rapidement adapter mon ancien CV en une version adaptée au poste, pour pouvoir soumettre ma candidature dès que possible.
|
||||
|
||||
Vous pouvez alors vérifier avec des questions de style The Mom Test :
|
||||
|
||||
- Quand est la dernière fois que tu as postulé ?
|
||||
- Comment as-tu modifié ton CV à ce moment-là ?
|
||||
- Quelle partie a été la plus difficile à écrire ?
|
||||
- Après modification, comment jugerais-tu si c'est assez bon ?
|
||||
|
||||
Ainsi, les méthodes se connectent :
|
||||
|
||||
- JTBD vous aide à définir l'hypothèse de besoin
|
||||
- The Mom Test vous aide à vérifier l'hypothèse par entretien
|
||||
|
||||
## 9. Erreurs les plus courantes des débutants lors des entretiens utilisateurs
|
||||
|
||||
### 9.1 Transformer l'entretien en présentation produit
|
||||
|
||||
Plus vous parlez de vos propres idées, plus l'autre personne aura tendance à vous suivre, au lieu de vous dire la réalité.
|
||||
|
||||
### 9.2 N'interroger que des connaissances
|
||||
|
||||
Les connaissances ne sont pas interdites, mais elles sont plus enclines à vous encourager. Vous devez au moins mélanger des personnes plus proches des utilisateurs réels, pas seulement des gens qui vous soutiennent.
|
||||
|
||||
### 9.3 Poser des questions sur les fonctionnalités trop tôt
|
||||
|
||||
Si vous n'avez pas encore compris le problème, commencer à poser des questions sur les boutons, l'interface et les détails des fonctionnalités, c'est généralement entrer trop tôt dans la solution.
|
||||
|
||||
### 9.4 Prendre un « je l'utiliserais » pour un résultat de validation
|
||||
|
||||
L'entretien vous aide au mieux à juger la direction, il ne remplace pas la validation. La vraie validation, c'est de voir si les utilisateurs sont prêts à payer un coût réel — temps, coût de changement, essai, voire paiement.
|
||||
|
||||
### 9.5 Ne pas organiser les notes après l'entretien
|
||||
|
||||
Si vous laissez les informations de côté après avoir discuté, elles deviennent vite des impressions floues. Il vaut mieux les organiser rapidement :
|
||||
|
||||
- Les problèmes les plus fréquents
|
||||
- Les mots émotionnels dans les propos originaux des utilisateurs
|
||||
- Les solutions alternatives actuelles
|
||||
- Les coûts déjà engagés
|
||||
- Vos propres nouveaux jugements
|
||||
|
||||
## 10. Liste de questions prêtes à l'emploi
|
||||
|
||||
Si vous voulez commencer rapidement, voici un ensemble de questions suffisamment polyvalentes.
|
||||
|
||||
### Questions d'ouverture
|
||||
|
||||
- Quand est la dernière fois que vous avez rencontré ce problème ?
|
||||
- Que s'est-il passé exactement à ce moment-là ?
|
||||
|
||||
### Questions sur les comportements
|
||||
|
||||
- Comment avez-vous géré la situation à ce moment-là ?
|
||||
- Pourquoi avez-vous choisi cette méthode ?
|
||||
|
||||
### Questions sur les coûts
|
||||
|
||||
- Combien de temps ou d'énergie cette tâche vous prend-elle généralement ?
|
||||
- Avez-vous déjà dépensé de l'argent pour la résoudre ?
|
||||
|
||||
### Questions sur les alternatives
|
||||
|
||||
- Avez-vous essayé d'autres outils ou méthodes ?
|
||||
- Pourquoi ne les avez-vous pas continués ?
|
||||
|
||||
### Questions de clôture
|
||||
|
||||
- Si vous rencontrez le même problème à l'avenir, à quoi ressemblerait la solution idéale ?
|
||||
|
||||
Notez que cette question de clôture peut être posée, mais il vaut mieux la garder pour la fin. Parce que vous avez d'abord besoin de recueillir des faits, pas des souhaits.
|
||||
|
||||
## 11. Résumé
|
||||
|
||||
La contribution la plus importante de The Mom Test n'est pas de vous donner une technique pour « mieux discuter », mais de vous aider à construire un mode de jugement plus lucide :
|
||||
|
||||
- Ne croyez pas trop vite aux compliments des autres sur vos idées
|
||||
- Ne prenez pas « si ça existait, je l'utiliserais » pour un besoin réel
|
||||
- Ne transformez pas vos entretiens en quête de validation
|
||||
|
||||
Un entretien véritablement précieux devrait revenir autant que possible à ces éléments :
|
||||
|
||||
- La dernière expérience réelle de l'utilisateur
|
||||
- Comment il gère le problème actuellement
|
||||
- Ce qu'il a déjà payé
|
||||
- Où il est visiblement mal à l'aise
|
||||
|
||||
Quand vous commencez à poser les questions de cette façon, les informations que vous obtiendrez seront parfois moins flatteuses, mais généralement plus utiles.
|
||||
Et quand on crée un produit, **une vérité utile est toujours plus importante qu'un encouragement flatteur.**
|
||||
|
||||
<a id="mom-ai"></a>
|
||||
## [12. Comment utiliser l'IA pour vos entretiens utilisateurs](#top-mom)
|
||||
|
||||
The Mom Test est fondamentalement une méthode pour « discuter avec de vraies personnes », l'IA ne peut donc pas remplacer les entretiens réels. Mais l'IA est très utile comme assistante avant, pendant et après les entretiens, surtout pour réduire la barrière d'entrée des débutants.
|
||||
|
||||
### 12.1 Laissez l'IA réécrire vos questions « faciles à rater »
|
||||
|
||||
Beaucoup de gens savent qu'ils ne devraient pas demander « tu penses quoi de mon idée », mais à la première occasion, ils reviennent à ce type de phrase. Vous pouvez d'abord confier vos questions préparées à l'IA pour qu'elle les réécrive :
|
||||
|
||||
```text
|
||||
Voici les questions que je prépare pour des entretiens utilisateurs :
|
||||
[insérez vos questions]
|
||||
|
||||
Merci de les réécrire selon les principes de The Mom Test :
|
||||
1. Supprimez les questions d'opinion
|
||||
2. Supprimez les questions qui supposent l'avenir
|
||||
3. Reformulez-les autant que possible autour des comportements passés réels, des alternatives existantes et des coûts déjà engagés
|
||||
4. Organisez le tout en une liste de 8 à 10 questions prêtes pour l'entretien
|
||||
```
|
||||
|
||||
Même une entrée très basique fonctionne :
|
||||
|
||||
```text
|
||||
Je veux demander aux utilisateurs :
|
||||
1. Tu penses quoi de mon idée d'outil AI pour améliorer les CV ?
|
||||
2. Tu l'utiliserais ?
|
||||
3. Serais-tu prêt à payer ?
|
||||
|
||||
Aide-moi à reformuler ces questions.
|
||||
```
|
||||
|
||||
L'IA pourrait produire quelque chose comme :
|
||||
|
||||
```text
|
||||
Questions réécrites :
|
||||
|
||||
1. Quand est la dernière fois que tu as modifié ton CV ?
|
||||
2. Pourquoi devais-tu le modifier ?
|
||||
3. Comment t'y es-tu pris ?
|
||||
4. Quelle étape t'a pris le plus de temps ?
|
||||
5. As-tu demandé à quelqu'un de t'aider à le relire ?
|
||||
6. As-tu déjà passé beaucoup de temps ou dépensé de l'argent pour modifier ton CV ?
|
||||
```
|
||||
|
||||
Ce type de résultat est très utile parce qu'il transforme directement vos questions « demandant des opinions » en questions « demandant des comportements réels ».
|
||||
|
||||
### 12.2 Laissez l'IA générer des guides d'entretien pour différents profils
|
||||
|
||||
Pour un même domaine, face à différents publics, l'accent de l'entretien sera différent. Par exemple, les étudiants, les RH, les travailleurs indépendants ont des préoccupations complètement différentes. Vous pouvez demander à l'IA de générer une version de guide pour chaque type d'interlocuteur :
|
||||
|
||||
- Pour les utilisateurs débutants, concentrez-vous sur la dernière expérience réelle
|
||||
- Pour les utilisateurs intensifs, concentrez-vous sur les alternatives et la douleur
|
||||
- Pour les utilisateurs payants, concentrez-vous sur les coûts déjà engagés
|
||||
|
||||
Ainsi, vous aurez un meilleur rythme lors des vraies conversations, au lieu de poser les mêmes questions à tout le monde.
|
||||
|
||||
Par exemple, vous pouvez saisir directement :
|
||||
|
||||
```text
|
||||
Je vais discuter avec deux types de personnes :
|
||||
1. Étudiants qui cherchent leur premier stage
|
||||
2. Étudiants plus avancés qui ont déjà relu beaucoup de CV
|
||||
|
||||
Donnez-moi un guide d'entretien pour chacun, 6 questions par guide.
|
||||
```
|
||||
|
||||
L'IA pourrait générer :
|
||||
|
||||
```text
|
||||
Pour les étudiants :
|
||||
1. Quand est la dernière fois que tu as postulé pour un stage ?
|
||||
2. Quelle étape t'a le plus bloqué ?
|
||||
3. Comment sais-tu si ton CV est prêt à être envoyé ?
|
||||
...
|
||||
|
||||
Pour les étudiants avancés :
|
||||
1. Quand est la dernière fois que tu as aidé quelqu'un à relire son CV ?
|
||||
2. Quels problèmes évidents vois-tu le plus souvent ?
|
||||
3. À quelle étape les plus jeunes bloquent-ils le plus ?
|
||||
...
|
||||
```
|
||||
|
||||
Ainsi, vous n'avez pas besoin d'inventer les questions à partir de zéro, la préparation de l'entretien sera beaucoup plus facile.
|
||||
|
||||
### 12.3 Laissez l'IA organiser vos notes d'entretien
|
||||
|
||||
Après les entretiens, le problème le plus fréquent n'est pas « manquer d'informations », mais « les informations sont trop dispersées ». L'IA est très adaptée pour vous aider à organiser des conversations fragmentées en notes structurées :
|
||||
|
||||
```text
|
||||
Voici les notes de mes entretiens avec 3 utilisateurs.
|
||||
Merci de les organiser selon la perspective de The Mom Test :
|
||||
1. Quels contenus sont des faits, lesquels sont juste des opinions
|
||||
2. Quel est le dernier comportement réel de l'utilisateur
|
||||
3. Quelle est la solution alternative actuelle
|
||||
4. Quels sont les coûts en temps, argent ou énergie déjà engagés par l'utilisateur
|
||||
5. Quels problèmes ont été mentionnés à plusieurs reprises
|
||||
6. Quelles déclarations semblent positives mais manquent de preuves
|
||||
```
|
||||
|
||||
Cette étape est particulièrement précieuse car elle vous aide à séparer le contenu « qui a l'air pas mal » du contenu « qui peut vraiment étayer vos décisions ».
|
||||
|
||||
Une entrée simple pourrait être :
|
||||
|
||||
```text
|
||||
Voici les notes après une conversation avec un utilisateur :
|
||||
|
||||
- Elle a dit que si un outil existait, elle essaierait probablement
|
||||
- La semaine dernière, elle a passé une soirée entière à modifier son CV
|
||||
- Actuellement, elle demande principalement à des amis de l'aider à relire
|
||||
- Elle a dit que le plus difficile est de savoir quand un CV est « prêt à être envoyé »
|
||||
|
||||
Aidez-moi à distinguer ce qui est opinion et ce qui est fait.
|
||||
```
|
||||
|
||||
L'IA pourrait répondre :
|
||||
|
||||
```text
|
||||
Opinions :
|
||||
- Si un outil existait, elle essaierait probablement
|
||||
|
||||
Faits :
|
||||
- La semaine dernière, elle a passé une soirée à modifier son CV
|
||||
- La solution alternative actuelle est de demander à des amis de relire
|
||||
- Le point le plus difficile est de savoir quand on peut considérer le CV « prêt à envoyer »
|
||||
|
||||
Points clés pour évaluer le besoin :
|
||||
- Ce problème est survenu récemment
|
||||
- L'utilisateur a déjà investi un temps significatif
|
||||
- La solution actuelle dépend d'autres personnes, elle n'est pas stable
|
||||
```
|
||||
|
||||
Ce résultat montre très intuitivement aux débutants : quelles phrases peuvent servir à prendre des décisions, et lesquelles ne sont que des commentaires.
|
||||
|
||||
### 12.4 Laissez l'IA faire une première recherche en ligne légère
|
||||
|
||||
Si vous n'avez pas encore commencé vos entretiens, vous pouvez d'abord demander à l'IA de faire une recherche externe très légère, comme :
|
||||
|
||||
- Dans les communautés publiques, comment les gens se plaignent-ils de ce problème récemment
|
||||
- Qu'est-ce qui est le plus critiqué dans les outils existants
|
||||
- Les utilisateurs ont-ils déjà payé pour des problèmes similaires
|
||||
- Quelles alternatives existent déjà sur le marché
|
||||
|
||||
Ce type d'information ne remplace pas les entretiens avec de vraies personnes, mais peut vous aider à entrer plus rapidement dans le sujet et à savoir par où commencer les questions.
|
||||
|
||||
Par exemple, une entrée simple pourrait être :
|
||||
|
||||
```text
|
||||
Merci de rechercher :
|
||||
« Ce dont les étudiants se plaignent le plus quand ils modifient leur CV »
|
||||
Organisez les 5 plaintes les plus fréquentes, dans un langage très simple.
|
||||
```
|
||||
|
||||
L'IA pourrait répondre :
|
||||
|
||||
```text
|
||||
Plaintes fréquentes :
|
||||
|
||||
1. Ne sait pas ce qu'il faut mettre dans le CV
|
||||
2. Devoir le modifier pour chaque poste, c'est fatigant
|
||||
3. Après de nombreuses modifications, on n'est toujours pas sûr que c'est bien
|
||||
4. Personne ne peut donner un retour fiable
|
||||
5. On a toujours l'impression de ne pas être prêt, donc on remet à plus tard
|
||||
```
|
||||
|
||||
La valeur de ce type de résultat est qu'il vous permet de trouver plus facilement un angle d'attaque pour vos entretiens.
|
||||
|
||||
### 12.5 Laissez l'IA jouer le rôle de « coach de débriefing d'entretien »
|
||||
|
||||
Vous pouvez aussi confier les notes d'un entretien que vous venez de terminer à l'IA, et lui demander de vous faire des critiques :
|
||||
|
||||
```text
|
||||
Voici les notes d'un entretien utilisateur que je viens de faire.
|
||||
Merci de m'aider à débriefé depuis la perspective de The Mom Test :
|
||||
1. Quelles questions ressemblaient trop à une recherche de validation
|
||||
2. Quelles questions étaient trop orientées
|
||||
3. Où aurais-je pu approfondir sur les faits
|
||||
4. Si je pouvais recommencer, comment pourrais-je mieux poser les questions dans cette conversation
|
||||
```
|
||||
|
||||
C'est particulièrement utile pour les débutants, car vous développerez plus rapidement une sensibilité à « est-ce que je collecte des preuves ou des encouragements ».
|
||||
|
||||
## 📚 Exercices
|
||||
|
||||
En vous basant sur le contenu ci-dessus, veuillez réaliser les exercices suivants :
|
||||
|
||||
1. Choisissez un produit que vous voulez créer récemment, et écrivez d'abord 5 questions « faciles à rater » que vous auriez posées
|
||||
2. Réécrivez ces 5 questions dans un style plus conforme à The Mom Test
|
||||
3. Trouvez 3 utilisateurs potentiels, et posez au moins une fois « quand est la dernière fois que vous avez rencontré ce problème »
|
||||
4. Après l'entretien, organisez 4 types d'informations : comportements réels, alternatives, coûts engagés, difficultés récurrentes
|
||||
|
||||
## Lectures complémentaires
|
||||
|
||||
- [Site officiel de The Mom Test](https://momtestbook.com/)
|
||||
- [Rob Fitzpatrick : The Mom Test](https://www.robfitz.com/the-mom-test/)
|
||||
@@ -0,0 +1 @@
|
||||
../../../../zh-cn/stage-1/building-prototype/images
|
||||
@@ -0,0 +1,607 @@
|
||||
---
|
||||
title: "Créer votre prototype : de l'analyse métier au prototype produit multi-pages"
|
||||
description: "Vivre le cycle complet de l'analyse métier à la réalisation d'un prototype produit multi-pages. Apprendre à poser des questions métier, décomposer les besoins, utiliser l'IDE AI pour générer des applications mono-page et multi-pages, et peaufiner et tester les prototypes."
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { relatedArticlesMap } from '@theme/data/relatedArticles'
|
||||
|
||||
const duration = 'Environ <strong>8 heures</strong>'
|
||||
const relatedArticles =
|
||||
relatedArticlesMap['fr-fr/stage-1/building-prototype'] ?? []
|
||||
</script>
|
||||
|
||||
# Niveau débutant 3 : Créer votre prototype
|
||||
|
||||
## Introduction du chapitre
|
||||
|
||||
<ChapterIntroduction :duration="duration" :tags="['Analyse métier', 'Conception de prototype', 'Programmation assistée par AI', 'Applications multi-pages']" coreOutput="1 prototype d'atelier de contenus e-commerce" expectedOutput="Prototype Web interactif">
|
||||
|
||||
Dans le chapitre précédent, nous avons appris à <strong>trouver de bonnes idées</strong> — partir des besoins utilisateurs pour trouver des directions pour lesquelles quelqu'un est prêt à payer. Mais trouver la direction n'est que la première étape, <strong>ce qui met vraiment à l'épreuve le chef de produit, c'est : comment transformer des besoins flous en un produit utilisable.</strong>
|
||||
|
||||
Ce chapitre va résoudre un <strong>problème réel</strong> : votre patron vous lance un « utilise l'IA pour améliorer l'efficacité de la publication de produits sur les plateformes e-commerce » — comment transformer ça en un <strong>prototype produit fonctionnel</strong> ?
|
||||
|
||||
Contrairement aux jeux Snake et calculatrices précédents, <strong>dans les vrais projets on ne peut pas inventer les fonctionnalités</strong> :
|
||||
|
||||
1. <strong>Identifier les points de douleur</strong> : discuter avec les opérationnels, extraire des <strong>vrais points de douleur</strong> du vague « améliorer l'efficacité »
|
||||
2. <strong>Prioriser</strong> : parmi tous les problèmes, résoudre d'abord <strong>le plus douloureux</strong>, sans vouloir tout faire d'un coup
|
||||
3. <strong>Valider rapidement</strong> : utiliser l'IDE AI pour d'abord faire un <strong>prototype mono-page</strong>, puis étendre en multi-pages une fois que ça fonctionne
|
||||
4. <strong>Produire quelque chose d'utilisable</strong> : livrer finalement un <strong>atelier de contenus e-commerce démontrable et utilisable</strong>
|
||||
|
||||
Nous apprendrons la transition de <strong>faire des jouets à faire des applications</strong>, et à <strong>empathiser et réfléchir aux vrais besoins des clients</strong>.
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
::: info ℹ️ Note
|
||||
Ce chapitre peut contenir des termes métier que vous ne connaissez pas — vous pouvez demander à l'IA de vous les expliquer.
|
||||
:::
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="0" :items="[
|
||||
{ title: 'Analyse des besoins', description: 'Du flou au concret' },
|
||||
{ title: 'Validation mono-page', description: 'Fonctionnalité clé implémentée' },
|
||||
{ title: 'Extension multi-pages', description: 'Structure d\'application complète' },
|
||||
{ title: 'Peaufinage', description: 'Amélioration de l\'expérience utilisateur' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 1. Définir les besoins avant de coder
|
||||
|
||||
Dans les tutoriels précédents, nous avons utilisé l'IDE AI pour générer facilement des jeux Snake et autres petits jeux, mais ce ne sont que des projets ludiques qui ne peuvent pas être appliqués au travail et à la vie quotidienne ; si nous voulons que les capacités AI soient véritablement utiles à tous, nous devons faire du Vibe Coding en combinant des scénarios de vie et de travail.
|
||||
|
||||
Dans le chapitre précédent, nous avons appris à trouver des <strong>bonnes idées pour lesquelles quelqu'un est prêt à payer</strong>, mais trouver une direction n'est que le début. Quand on fait vraiment un produit, on découvre que : <strong>il y a un énorme fossé entre savoir « quoi faire » et savoir « comment le faire ».</strong>
|
||||
|
||||
Ce fossé, c'est la <strong>spécification des besoins</strong>.
|
||||
|
||||
Par exemple, dans un projet de classe ou personnel, on part souvent de la fonctionnalité exécutable la plus simple pour faire un produit ou une application :
|
||||
|
||||
- « Fais un tableau Kanban, liste les tâches. »
|
||||
- « Aide-moi à faire un outil de dessin. »
|
||||
- « Aide-moi à faire un logiciel pour collecter des questionnaires. »
|
||||
|
||||
Ce ne sont souvent qu'un outil, un module fonctionnel, et même pas un problème métier clair. Plus important encore, <strong>ces idées sont souvent « ce que tu trouves utile » et non « ce dont l'utilisateur a vraiment besoin ».</strong>
|
||||
|
||||
Dans les projets d'entreprise ou de startup, les chefs de produit et les ingénieurs partent souvent d'une proposition métier plus large. Par exemple, nous pouvons imaginer le scénario suivant :
|
||||
|
||||
<el-card shadow="hover" style="border-left: 5px solid #409EFF; background-color: #ecf5ff; margin: 20px 0;">
|
||||
<div style="font-weight: bold; color: #303133; margin-bottom: 10px;">🛍️ Scénario métier :</div>
|
||||
<div style="color: #606266; line-height: 1.6;">
|
||||
<p>Vous êtes chef de produit e-commerce dans une boutique. Le patron vous donne une proposition vague mais stressante :</p>
|
||||
<p style="font-style: italic; margin-top: 10px;">« Maintenant tout le monde utilise l'IA pour faire des images et des textes sur les réseaux sociaux, ça a l'air simple. Aide-moi à mettre ça en place pour qu'on soit plus efficace quand on met de nouveaux produits sur TikTok Shop. »</p>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
À ce moment-là, vous pourriez penser : « Patron, tu rêves encore ! » Pourtant, dans le monde réel, ce genre de décision vague en une phrase est très courant — même plus fréquent que le nombre de bubble tea que vous commandez en une semaine. Donc, pour devenir un bon professionnel (ou mieux, le CEO d'une nouvelle startup), nous devons apprendre à passer de la création d'outils personnels à la création de vrais prototypes produits.
|
||||
|
||||
Puisque nous avons appris l'IDE AI, en y réfléchissant bien, ce besoin est assez simple — il suffit de donner un prompt à l'IA et de laisser l'Agent s'occuper de tout, non ?
|
||||
|
||||
```
|
||||
Merci de te référer à mon besoin xxxx,
|
||||
aide-moi à concevoir un atelier de contenus e-commerce,
|
||||
incluant la génération et la gestion de descriptions produits, images, vidéos et autres contenus.
|
||||
```
|
||||
|
||||
Si vous transformez joyeusement ce besoin en prototype et l'envoyez au patron — félicitations, votre bonus de ce trimestre est annulé !
|
||||
|
||||
**Pourquoi ? C'est le point de douleur central que nous devons résoudre :**
|
||||
|
||||
Quand nous avons appris l'IDE AI, nous faisions des **projets ludiques personnels** comme Snake ou une calculatrice — fonctionnalités simples, on sait ce qu'on veut, et on fait pour soi. Mais **les vrais scénarios métier sont complètement différents** :
|
||||
|
||||
- **Vous n'êtes pas l'utilisateur** : le patron veut « améliorer l'efficacité », mais vous ne savez pas comment les opérationnels travaillent au quotidien ni où ils bloquent ;
|
||||
- **L'IA ne comprend pas le métier** : vous donnez un besoin vague à l'IA, elle ne peut que deviner à partir de connaissances générales, et le résultat peut ressembler à quelque chose mais être inutilisable en pratique ;
|
||||
- **Une bonne idée n'est pas un bon produit** : vous trouvez peut-être que « ajouter une fonctionnalité de génération AI » est cool, mais les utilisateurs pourraient ne pas en avoir besoin, ou l'utiliser pourrait être plus compliqué qu'avant.
|
||||
|
||||
**C'est pourquoi nous devons apprendre à « passer de l'idée à la compréhension utilisateur »**. Ce n'est que lorsque votre idée résout vraiment le problème des autres, en posant des questions et en comprenant le métier en profondeur, que vous pourrez créer quelque chose de véritablement précieux. (Une bonne idée peut même être plus importante que la bonne technique.)
|
||||
|
||||
### 1.1 De l'imaginaire au réel : apprendre à poser des questions métier
|
||||
|
||||
::: info 💡 D'abord, clarifions : qu'est-ce qu'un besoin ? Qu'est-ce que le métier ?
|
||||
|
||||
Un **besoin** (requirement), c'est ce que l'utilisateur veut vraiment, le problème qu'il rencontre, la chose qu'il veut résoudre. Par exemple, « le patron veut que je mette les produits en ligne plus vite » — c'est un besoin.
|
||||
|
||||
Le **métier** (business), c'est ce que l'utilisateur fait réellement chaque jour, sa façon de travailler. Par exemple, un opérationnel e-commerce fait chaque jour : mettre des produits en ligne, modifier les prix, créer des images, analyser les données... tout ça, c'est le métier.
|
||||
|
||||
**Pourquoi s'intéresser au métier ?**
|
||||
Parce que si vous ne comprenez pas le métier, l'outil que vous créerez risque d'être « beau mais inutilisé ». Ce n'est qu'en comprenant vraiment comment les utilisateurs travaillent au quotidien et où ils bloquent que vous pourrez créer quelque chose qui les aide vraiment.
|
||||
|
||||
:::
|
||||
|
||||
En partant de la perspective la plus simple, vous pouvez d'abord vous poser quelques questions :
|
||||
|
||||
- Quand le patron dit « **efficacité améliorée** », qu'est-ce que ça veut dire exactement ? Faire les choses **plus vite** ? **Dépenser moins** ? **Vendre plus** ?
|
||||
- Comment sont mis en ligne les produits actuellement ? **Où ça coince** ?
|
||||
- Combien de **nouveaux produits** faut-il traiter chaque jour ? Combien d'**images** et combien de **textes** par produit ?
|
||||
- Dans le travail actuel, **quelle est la tâche la plus pénible**, celle qu'on **aimerait le plus éviter** ?
|
||||
|
||||
Mais ce sont toutes des questions spéculatives. Nous devons poser directement des questions aux opérationnels TikTok Shop : « Quelles sont vos difficultés et vos points d'attention ? » pour obtenir des réponses plus précises par la communication :
|
||||
|
||||
::: info 📋 Résultats d'entretien métier réel
|
||||
|
||||
Nous avons demandé à des personnes faisant de l'e-commerce, voici leurs frustrations :
|
||||
|
||||
**1. Trop de choses à faire, trop dispersées**
|
||||
- Une personne gère plusieurs boutiques, chacune avec beaucoup de produits à traiter ;
|
||||
- Chaque jour c'est la course : **mise en ligne de nouveaux produits**, **modification de prix**, **création d'images**, **analyse des données**, une tâche pas finie qu'il faut déjà passer à la suivue.
|
||||
|
||||
**2. Le contenu n'est pas fait en une fois, c'est un processus itératif**
|
||||
- On commence avec les **images fournies par le fabricant**, les **anciens contenus** ou des **images de référence trouvées en ligne**, pour rapidement **mettre le produit en ligne** et tester ;
|
||||
- On dépense un peu en promotion pour **voir si ça vend** ;
|
||||
- Ce n'est que pour les **produits qui se vendent bien** qu'on prend le temps de faire de vraies images, descriptions détaillées et vidéos.
|
||||
|
||||
:::
|
||||
|
||||
Après avoir interrogé les opérationnels, nous sommes enthousiastes, car maintenant nous pouvons vraiment créer un prototype produit parfaitement adapté au métier ! — Encore raté. Si nous essayons de « satisfaire toutes les demandes d'un coup », le produit sera très volumineux et difficile à livrer dans le temps du cours. Il faut donc encore trier et converger pour identifier le vrai point de douleur central.
|
||||
|
||||
### 1.2 De la divergence à la convergence : verrouiller le point de douleur métier central et les fonctionnalités
|
||||
|
||||
::: info 💡 Pourquoi « converger » ? Qu'est-ce qu'un « point de douleur » ?
|
||||
|
||||
**Il y a beaucoup de problèmes, mais par lequel commencer ?**
|
||||
|
||||
L'utilisateur peut vous dire plein de problèmes : A est pénible, B est pénible, C est pénible... mais si vous essayez de tout résoudre en même temps, vous risquez de ne rien faire de bien. Donc il faut **converger** — c'est-à-dire, parmi tous les problèmes, choisir celui qui est **le plus douloureux, le plus urgent, le plus soluble** pour commencer.
|
||||
|
||||
**Qu'est-ce qu'un point de douleur ?**
|
||||
C'est le problème spécifique que l'utilisateur **trouve le plus pénible, qui lui prend le plus de temps, qu'il veut le plus résoudre**. Pas « je trouve ça utile », mais la chose dont l'utilisateur **se plaint tous les jours, qui est douloureuse à chaque fois**.
|
||||
|
||||
:::
|
||||
|
||||
À travers les entretiens ci-dessus, nous avons découvert que les opérationnels rencontrent de nombreux problèmes : rythme perturbé par les promotions, gestion de plusieurs boutiques, jonglage entre mise en ligne / modification de prix / création d'images / analyse de données...
|
||||
|
||||
Si nous essayons de « résoudre tous ces problèmes », nous finirons par créer un outil **vaste mais peu utilisable**.
|
||||
|
||||
Classons ces problèmes (l'IA peut vous aider), on trouve grosso modo trois catégories :
|
||||
|
||||
1. **Problème de rythme** : quand mettre en ligne, quand ajuster les prix ;
|
||||
2. **Problème d'efficacité** : comment gérer simultanément plusieurs boutiques et produits ;
|
||||
3. **Problème de contenu** : comment créer rapidement des images et textes de produits.
|
||||
|
||||
Pour notre cours, le plus adapté à résoudre en premier est la **catégorie 3 : le problème de contenu**. Mais « créer du contenu rapidement » reste un peu abstrait, demandons encore aux opérationnels où ils bloquent exactement :
|
||||
|
||||
::: info 📋 Les opérationnels disent : il y a deux endroits les plus douloureux pour le contenu
|
||||
|
||||
**Douleur 1 : la création en masse d'images et de textes est trop pénible**
|
||||
- Les contenus sont éparpillés : cloud, messages WeChat, back-office de la plateforme... **difficiles à retrouver** ;
|
||||
- Il faut mettre en ligne beaucoup de produits d'un coup, **pas le temps de faire chaque chose soigneusement**, on assemble à la va-vite ;
|
||||
- Les exigences ne sont pas élevées, **ça doit être présentable et publiable**, pas besoin d'être magnifique.
|
||||
|
||||
**Douleur 2 : les bonnes solutions ne peuvent pas être sauvegardées pour réutilisation**
|
||||
- Les bons titres et mises en page d'avant, **la prochaine fois on ne les retrouve plus** ;
|
||||
- Les solutions sont dispersées dans les historiques de chat, les anciens liens de produits ;
|
||||
- Quand on veut les utiliser, il faut **chercher pendant des heures, copier-coller et modifier pendant des heures** ;
|
||||
- Il manque un outil pour **sauvegarder, gérer et appliquer directement**.
|
||||
|
||||
:::
|
||||
|
||||
Sur la base de ces deux points de douleur, nous allons créer un petit outil simple : **aider les opérationnels à créer en masse des images et textes, et permettre de sauvegarder les bonnes solutions pour les réutiliser directement la prochaine fois**.
|
||||
|
||||
Il ne fait que deux choses (l'IA peut vous aider à affiner, n'oubliez pas de supprimer les fonctionnalités en fonction des retours métier) :
|
||||
|
||||
::: info Fonctionnalité 1 : Générer en masse des images et textes de produits e-commerce
|
||||
|
||||
**À quoi ça sert ?**
|
||||
Donner au système des informations produit, il génère automatiquement des images et textes utilisables pour la mise en ligne sur les plateformes e-commerce (comme TikTok, Taobao).
|
||||
|
||||
**Entrée**
|
||||
| Type | Contenu |
|
||||
|------|------|
|
||||
| Informations produit | Nom, catégorie, marque, matière, taille, couleur, etc. |
|
||||
| Images produit | Image sur fond blanc ou photo en situation simple |
|
||||
| Images de référence | Captures d'écran de produits qui se vendent bien ou liens de référence |
|
||||
| Mode d'importation | Import par lot via Excel, ou saisie directe sur la page |
|
||||
|
||||
**Sortie (contenus e-commerce générés)**
|
||||
- **Image principale** : image de présentation du produit avec points de vente en texte (la première image que l'utilisateur voit en scrollant)
|
||||
- **Titre du produit** : combinaison de mots-clés trouvables par recherche
|
||||
- **Texte de vente** : 1-2 phrases pour attirer les acheteurs
|
||||
- Tous des produits finis **prêts à publier après quelques ajustements**
|
||||
|
||||
**Résultat**
|
||||
- Avant : chaque produit nécessite de créer des images et textes à partir de zéro
|
||||
- Maintenant : on envoie un lot de produits au système, on obtient des brouillons qu'il suffit de sélectionner et peaufiner
|
||||
|
||||
:::
|
||||
|
||||
::: info Fonctionnalité 2 : Sauvegarder les bonnes solutions en tant que modèles
|
||||
|
||||
**Entrée**
|
||||
| Type | Contenu |
|
||||
|------|------|
|
||||
| Un ensemble complet | Image principale + titre + texte |
|
||||
|
||||
**Sortie**
|
||||
| Fonction | Description |
|
||||
|------|------|
|
||||
| Appliquer | Utiliser le modèle pour générer automatiquement les nouveaux produits |
|
||||
| Modifier | Modifier directement le titre et le texte |
|
||||
| Gérer | Nommer, étiqueter (ex : « modèle sac homme », « titre promo ») pour faciliter la recherche |
|
||||
|
||||
**Résultat**
|
||||
1. Importer un nouveau produit
|
||||
2. Choisir : laisser le système générer par défaut, ou **utiliser mon modèle sauvegardé**
|
||||
3. Le système applique automatiquement le style du modèle, et produit de nouvelles images et textes
|
||||
|
||||
:::
|
||||
|
||||
---
|
||||
|
||||
**Récapitulons ce que nous venons de faire :**
|
||||
|
||||
1. **D'abord poser des questions** : au lieu de se lancer directement, on demande d'abord aux opérationnels « ce qui vous embête le plus » ;
|
||||
2. **Trouver les points de douleur** : on découvre que ce qu'ils trouvent le plus pénible, c'est « créer des images et textes est trop laborieux » et « les bonnes solutions ne peuvent pas être sauvegardées » ;
|
||||
3. **Converger le périmètre** : au lieu de faire une plateforme exhaustive, on se concentre sur « génération en masse d'images et textes + sauvegarde de modèles », ces deux fonctionnalités uniquement.
|
||||
|
||||
**Pourquoi est-ce important ?**
|
||||
|
||||
L'erreur de beaucoup de débutants en produit est : plus il y a de fonctionnalités, mieux c'est. Mais ce dont l'utilisateur a vraiment besoin, c'est qu'on **résolve le problème le plus douloureux**. Mieux vaut faire une ou deux fonctionnalités qui aident vraiment l'utilisateur, qu'un tas de fonctionnalités mal faites.
|
||||
|
||||
**Le cœur de la réflexion produit et métier :**
|
||||
- Ne pas imaginer « je pense que l'utilisateur a besoin de ceci »
|
||||
- Aller demander à l'utilisateur « que fais-tu chaque jour ? Où as-tu le plus mal ? »
|
||||
- Parmi tous les problèmes, **converger** vers le plus douloureux et le plus soluble
|
||||
- D'abord créer la version **minimum viable**, puis itérer progressivement
|
||||
|
||||
Voilà ce qu'il faut clarifier avant de coder. Le code n'est qu'un outil — **comprendre l'utilisateur et identifier le bon problème** est la première étape.
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="1" :items="[
|
||||
{ title: 'Analyse des besoins', description: 'Du flou au concret' },
|
||||
{ title: 'Validation mono-page', description: 'Fonctionnalité clé implémentée' },
|
||||
{ title: 'Extension multi-pages', description: 'Structure d\'application complète' },
|
||||
{ title: 'Peaufinage', description: 'Amélioration de l\'expérience utilisateur' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 2. Produire un prototype en 10 minutes : faire atterrir la « fonctionnalité clé » avec l'IDE AI
|
||||
|
||||
::: info 💡 Conseil Plan de programmation
|
||||
Si vous trouvez que l'IDE actuel n'est pas assez intelligent, ou que vous épuisez rapidement vos crédits, vous pouvez acheter un **Plan de programmation**. Pour anticiper, consultez [cet article](../../stage-2/backend/modern-cli/) sur l'utilisation de Claude pour programmer.
|
||||
:::
|
||||
|
||||
Réfléchir est une bonne chose, mais il ne faut pas sur-réfléchir. Arrêtons de trop philosopher et essayons de créer un prototype en commençant par une seule page.
|
||||
|
||||
### 2.1 Première étape : dire à l'IA ce que vous voulez en langage courant
|
||||
|
||||
Au début, ne cherchez pas le prompt parfait. Partez de votre expression la plus naturelle. Comme si vous décriviez le besoin à un collègue, dites à l'IA en langage courant ce que vous voulez faire, puis laissez l'IA vous aider à optimiser en une expression plus professionnelle.
|
||||
|
||||
#### 2.1.1 Commencer par l'oral (recommandé pour les débutants)
|
||||
|
||||
Décrivez d'abord votre idée dans vos propres mots, même si c'est très brut :
|
||||
|
||||
```
|
||||
Je veux créer un outil pour aider les opérationnels e-commerce à générer automatiquement des images principales et des textes de produits.
|
||||
Les opérationnels doivent actuellement créer les images et textes un par un manuellement, c'est très pénible.
|
||||
Mon idée : ils uploadent les informations produit, le système génère un lot de brouillons,
|
||||
et les opérationnels sélectionnent ceux qui sont bons, les modifient légèrement et les utilisent.
|
||||
|
||||
Pour commencer, la version la plus simple : une seule page, à gauche on remplit les infos produit,
|
||||
à droite on affiche les résultats générés. On peut uploader des images, saisir du texte,
|
||||
et après génération on voit l'aperçu de l'image principale et le texte.
|
||||
```
|
||||
|
||||
Ensuite, envoyez ce texte à une IA (comme ChatGPT, Claude, etc.) pour qu'elle vous aide à l'enrichir. L'IA vous aidera généralement à combler des détails auxquels vous n'aviez pas pensé, et à structurer votre idée plus clairement, pour finalement générer un prompt adapté à l'IDE AI.
|
||||
|
||||
Vous pouvez dire à l'IA :
|
||||
```
|
||||
Aide-moi à enrichir l'idée ci-dessus, organise-la en un document de logique métier clair,
|
||||
puis génère un prompt adapté à un IDE AI (comme Cursor, Trae) pour générer le code d'un prototype mono-page.
|
||||
```
|
||||
|
||||
L'IA retournera un besoin structuré et le prompt correspondant. Vérifiez-le vous-même, supprimez les fonctionnalités inutiles, et une fois confirmé, utilisez-le pour générer le code.
|
||||
|
||||
L'avantage de cette approche : l'expression orale est l'idée la plus authentique, mais peut manquer des détails importants. Quand l'IA enrichit, elle peut poser des questions comme « voulez-vous supporter l'upload par lot ? » que vous n'aviez pas envisagées, vous aidant à valider davantage. Vous pouvez choisir de conserver ou supprimer les fonctionnalités non essentielles en fonction des retours, et déterminer le prompt initial pour l'IA après plusieurs révisions.
|
||||
|
||||
#### 2.1.2 Passer l'étape d'enrichissement : envoyer directement votre document métier à l'IA
|
||||
|
||||
Si vous avez déjà préparé un document de logique métier dans les chapitres précédents (par exemple, un cahier des charges en langage courant), vous pouvez directement utiliser le format suivant pour l'envoyer à l'IDE AI, en sautant l'étape d'enrichissement. Adapté quand le besoin est déjà clair et que vous voulez passer directement au code :
|
||||
|
||||
```
|
||||
Aide-moi à implémenter une application mono-page en te référant à la logique métier, pour valider la fonctionnalité clé.
|
||||
|
||||
La logique métier de référence est la suivante :
|
||||
1. Aider les opérationnels à générer en masse une première version de brouillons images/textes :
|
||||
- **Entrée (supporte l'upload direct et l'import par lot de contenus) :**
|
||||
- Informations de base produit : nom, catégorie, marque, matière, taille, couleur, public cible, etc. ;
|
||||
- Images produit : image fond blanc / photo situation simple ;
|
||||
- Chaque génération supporte l'upload supplémentaire de captures de produits best-sellers ou liens de référence, permettant d'avoir des références ;
|
||||
- Supporte l'import par lot via Excel, ou la saisie en ligne / upload sur la page.
|
||||
- Supporte la spécification sur la page pour sauvegarder ou non les contenus dans la bibliothèque, pour réutilisation
|
||||
- **Sortie (contenu directement publiable ou publiable après légères modifications) :**
|
||||
- Pour chaque produit, une image principale brouillon « présentable, contenant les points de vente de base » ;
|
||||
- Un titre « bien structuré, contenant les mots-clés clés » + 1-2 phrases de texte de vente.
|
||||
- **Changement d'usage attendu :**
|
||||
Passer de la création de zéro pour chaque lot de produits à l'envoi d'un lot au système, puis sélection et ajustement des brouillons générés.
|
||||
|
||||
Faire d'abord la première fonctionnalité, la deuxième (bibliothèque de modèles) sera ajoutée plus tard.
|
||||
```
|
||||
|
||||
#### 2.1.3 L'approche programmeur (avancé) : laisser l'IA écrire le « prompt de prompt »
|
||||
|
||||
Si vous voulez contrôler plus finement le processus de génération de code, vous pouvez d'abord demander à une IA (comme ChatGPT) de générer, à partir de votre besoin, un prompt spécialement conçu pour l'IDE AI :
|
||||
|
||||
```
|
||||
En te basant sur l'idée ci-dessous, aide-moi à écrire un prompt pour un Agent de codage,
|
||||
j'ai besoin de ce prompt pour générer du code.
|
||||
|
||||
[Colle ici ta description de logique métier]
|
||||
|
||||
Exigences :
|
||||
1. Le prompt doit contenir une description claire de la mise en page
|
||||
2. Préciser la structure de données et la logique d'interaction
|
||||
3. Spécifier la stack technique (ex : React + Tailwind)
|
||||
4. Lister les points fonctionnels clés à implémenter
|
||||
```
|
||||
|
||||
L'IA générera généralement un prompt structuré comme suit :
|
||||
|
||||
|
||||
Vous pouvez modifier légèrement ce prompt avant de l'envoyer à l'IDE AI pour générer le code.
|
||||
|
||||
### 2.2 Deuxième étape : laisser l'IDE AI générer directement le code
|
||||
|
||||
#### 2.2.1 Préparation : comprendre les opérations de base de l'IDE AI
|
||||
|
||||
Si vous n'êtes pas encore familier avec l'utilisation basique de l'IDE AI (comme Cursor, Trae, Windsurf, etc.), il est recommandé de consulter d'abord le [tutoriel de base sur l'IDE](/fr-fr/appendix/2-development-tools/ide-basics/) en annexe, pour apprendre comment :
|
||||
- Créer un nouveau projet
|
||||
- Dialoguer avec l'AI Agent
|
||||
- Comprendre le processus de génération de code de l'IA
|
||||
|
||||
#### 2.2.2 Commencer à générer le code
|
||||
|
||||
Vous avez maintenant obtenu le prompt initial. Prenons le premier style de prompt comme exemple, et laissons l'IA nous aider à générer le code. Créez d'abord une fenêtre et le dossier correspondant, et ouvrez le dossier (initialisez un nouveau projet à l'emplacement de votre choix) :
|
||||
|
||||
|
||||
|
||||
Dans la barre latérale, choisissez un modèle que vous aimez (recommandé : gemini, gpt, glm, kimi, minimax, etc.), et saisissez le prompt obtenu à la première étape :
|
||||
|
||||
|
||||
Après avoir cliqué sur Générer, nous verrons une séquence familière : l'IA va planifier la structure de répertoires du projet, les fichiers nécessaires, et donner le contenu initial de chaque fichier.
|
||||
|
||||
::: warning ⚠️ Attention particulière : l'IA peut s'arrêter et attendre votre confirmation
|
||||
Pendant la génération, l'AI Agent **s'arrête souvent pour attendre votre saisie ou confirmation**, par exemple :
|
||||
- Vous demander si vous voulez passer à l'étape suivante
|
||||
- Vous demander d'appuyer sur Entrée pour confirmer une action
|
||||
- Vous demander un choix sur un détail technique
|
||||
|
||||
**Si vous voyez que l'IA ne bouge plus, vérifiez d'abord l'interface de chat pour voir si elle attend votre réponse.** Beaucoup de débutants pensent que l'IA est en train de réfléchir, alors qu'elle s'est arrêtée pour les attendre. Répondez activement ou appuyez sur Entrée, et l'IA reprendra son travail.
|
||||
:::
|
||||
|
||||
N'oubliez pas non plus d'appuyer sur Entrée pour confirmer (sinon vous resterez bloqué en attente — certains IDE AI ne rencontrent pas ce problème) :
|
||||
|
||||
|
||||
Si vous rencontrez le scénario suivant, cela signifie qu'un service local a déjà été démarré. Vous devez cliquer pour passer, sinon vous resterez sur cet écran (si rien ne s'affiche après la génération du code, vous devrez dire activement « aide-moi à démarrer ce projet ») :
|
||||
|
||||
|
||||
::: info 💡 Explication du scénario
|
||||
**Explication du scénario** : vous avez créé un projet React + TypeScript avec `npm create vite@latest` (easy-vibe-web). Une fois la création terminée, l'ordinateur va automatiquement « lancer » la page web, pour que vous puissiez voir le résultat immédiatement.
|
||||
|
||||
**Service local** : on peut comprendre ça comme une fenêtre d'affichage web temporaire ouverte sur votre ordinateur, qui ne fonctionne que sur cette machine — les autres n'y ont pas accès.
|
||||
|
||||
**localhost (adresse locale)** : `localhost` signifie « cet ordinateur lui-même ». Quand le navigateur y accède, il accède en fait à la page web exécutée sur votre ordinateur.
|
||||
|
||||
**Port** : le port est un numéro utilisé pour distinguer les différents services web sur le même ordinateur. Ce projet utilise le port 5174.
|
||||
|
||||
**Lien d'accès `http://localhost:5174/`** : cette adresse signifie « accéder à la page web numéro 5174 sur cet ordinateur ». Ouvrez-la dans le navigateur pour voir le résultat.
|
||||
|
||||
**Explication de ce scénario** : le système voulait initialement utiliser le port 5173, mais celui-ci était déjà occupé, donc il a automatiquement basculé vers 5174 — c'est normal.
|
||||
|
||||
**Instructions** : ouvrez le navigateur, tapez `http://localhost:5174/` dans la barre d'adresse et appuyez sur Entrée pour voir la page du projet actuel.
|
||||
:::
|
||||
|
||||
Une fois toutes les confirmations terminées, attendez que l'agent s'exécute quelques instants, et vous obtiendrez le résultat suivant :
|
||||
|
||||
|
||||
On peut voir qu'il y a déjà une première version fonctionnelle, mais la page frontend est vraiment laide. À ce stade, vous pouvez essayer de dialoguer directement avec l'IA pour optimiser l'affichage de l'interface :
|
||||
|
||||
|
||||
Après optimisation, nous obtenons une interface plus esthétique :
|
||||
|
||||
|
||||
Vous pouvez modifier les fonctionnalités de la page selon vos besoins, joindre des captures d'écran et poser des questions librement, par exemple : « Je n'ai pas besoin de la fonctionnalité d'import par lot pour l'instant, aide-moi à la supprimer », « Il y a trop de champs à remplir à gauche, garde uniquement xxxxx ». Vous pouvez même vous référer à d'autres sites matures — par exemple, vous pouvez directement « vous inspirer » d'un produit de design de Google (vous pouvez coller une capture d'écran d'un site mature que vous aimez) :
|
||||
|
||||
|
||||
Et finalement obtenir :
|
||||
|
||||
|
||||
### 2.3 Que faire en cas d'erreur
|
||||
|
||||
En pratique, rencontrer des erreurs est inévitable — c'est normal et ne signifie pas que vous avez fait quelque chose de mal. Vous n'avez pas besoin de comprendre l'erreur ; il suffit de transmettre la « situation observée » en entier à l'IA.
|
||||
|
||||
Il n'y a que trois approches courantes :
|
||||
|
||||
- **Approche 1 : Erreur sur la page ou le terminal**
|
||||
Quand la page devient rouge, affiche un écran blanc, ou quand le terminal affiche un tas de texte rouge, faites une capture d'écran ou copiez l'intégralité du message d'erreur et envoyez-le à l'IA pour qu'elle vous aide à réparer.
|
||||
|
||||
- **Approche 2 : La fonctionnalité ne fonctionne pas mais pas d'erreur**
|
||||
Par exemple, un bouton ne réagit pas, les données ne s'affichent pas, les styles sont cassés — décrivez en langage courant « ce qui se passe + ce que vous vouliez », en ajoutant une capture d'écran si nécessaire.
|
||||
|
||||
- **Approche 3 : Vous n'êtes pas sûr s'il y a un problème**
|
||||
Vous pouvez demander directement à l'IA : « Aide-moi à vérifier si cette fonctionnalité a des problèmes évidents, est-ce qu'il faut ajuster quelque chose. »
|
||||
|
||||
#### 2.3.1 Questions fréquentes des débutants
|
||||
|
||||
- **Q : Je ne sais pas où trouver le message d'erreur ?**
|
||||
- R : En général, cherchez tout le « texte rouge ». Dans le terminal, la console ou sur la page, trouvez les indications rouges, sélectionnez tout et copiez pour l'IA.
|
||||
|
||||
- **Q : L'IA a corrigé mais l'erreur persiste ?**
|
||||
- R : C'est courant. Continuez à faire une capture d'écran ou copiez le dernier message d'erreur et envoyez-le, pour qu'elle corrige davantage sur la base de la modification précédente.
|
||||
|
||||
- **Q : Dois-je comprendre complètement la solution de réparation de l'IA ?**
|
||||
- R : Non, pas besoin de tout comprendre d'un coup. Vous pouvez vous concentrer sur un ou deux points à chaque fois. Avec le temps, vous comprendrez de plus en plus de code, comme en accumulant du vocabulaire anglais.
|
||||
|
||||
- **Q : J'ai corrigé plein de fois, le problème persiste ?**
|
||||
- R : Vous pouvez essayer :
|
||||
- Utiliser la fonction « retour en arrière » de l'IDE, trouver le bouton de retour dans la conversation de l'agent, revenir à une version fonctionnelle et recommencer ;
|
||||
- Changer de modèle ou ajuster le prompt, décrire le phénomène et le message d'erreur plus précisément ;
|
||||
- Regrouper « code actuel + log d'erreurs + comportement attendu » et tout envoyer d'un coup à l'IA, pour qu'elle restructure globalement la partie problématique.
|
||||
|
||||
## 3. Passer d'une application mono-page à une application multi-pages
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="2" :items="[
|
||||
{ title: 'Analyse des besoins', description: 'Du flou au concret' },
|
||||
{ title: 'Validation mono-page', description: 'Fonctionnalité clé implémentée' },
|
||||
{ title: 'Extension multi-pages', description: 'Structure d\'application complète' },
|
||||
{ title: 'Peaufinage', description: 'Amélioration de l\'expérience utilisateur' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
Une fois la logique de la fonctionnalité clé générée, nous pouvons générer le reste du contenu. Par exemple, à ce stade, si vous cliquez sur Paramètres ou certains boutons, ils ne fonctionnent pas du tout.
|
||||
|
||||
Vous pouvez demander à l'IA de vérifier selon les besoins du prompt métier, de générer les parties manquantes, ou de compléter directement les pages non implémentées. Vous pouvez aussi spécifier une page pour que l'IA la complète, jusqu'à ce que toutes les pages soient cliquables et que les fonctionnalités soient interactives :
|
||||
|
||||
|
||||
Après quelques instants, nous pouvons voir que le programme a complété plusieurs pages et fonctionnalités interactives sur la base de ce qui existait déjà :
|
||||
|
||||
|
||||
|
||||
|
||||
Il vous suffit alors de cliquer manuellement sur chaque fonctionnalité et bouton qui vous intéresse, pour vous assurer que les interactions sont normales. Si une fonctionnalité n'est pas interactive, vous pouvez en parler avec l'IA pour qu'elle vous aide à la corriger.
|
||||
|
||||
## 4. Rendre le prototype « convaincant »
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="3" :items="[
|
||||
{ title: 'Analyse des besoins', description: 'Du flou au concret' },
|
||||
{ title: 'Validation mono-page', description: 'Fonctionnalité clé implémentée' },
|
||||
{ title: 'Extension multi-pages', description: 'Structure d\'application complète' },
|
||||
{ title: 'Peaufinage', description: 'Amélioration de l\'expérience utilisateur' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
Une fois la structure multi-pages en place, la dernière étape consiste à faire passer le prototype de « ça fonctionne » à « c'est fluide à utiliser et ça a l'air pro ». Cela nécessite de tester manuellement tout le flux (parcours utilisateur), et de faire corriger par l'IA les parties qui ne fonctionnent pas, pour qu'à chaque rafraîchissement on puisse simuler un nouvel utilisateur parcourant tout le flux et obtenir le résultat attendu.
|
||||
|
||||
Revenons au besoin initial :
|
||||
|
||||
```
|
||||
1. Aider les opérationnels à générer en masse une première version de brouillons images/textes :
|
||||
- **Entrée (supporte l'upload direct et l'import par lot de contenus) :**
|
||||
- Informations de base produit : nom, catégorie, marque, matière, taille, couleur, public cible, etc. ;
|
||||
- Images produit : image fond blanc / photo situation simple ;
|
||||
- Chaque génération supporte l'upload supplémentaire de captures de produits best-sellers ou liens de référence ;
|
||||
- Supporte l'import par lot via Excel, ou la saisie en ligne / upload sur la page.
|
||||
- Supporte la spécification sur la page pour sauvegarder ou non les contenus dans la bibliothèque
|
||||
- **Sortie (contenu directement publiable ou après légères modifications) :**
|
||||
- Pour chaque produit, une image principale brouillon « présentable, contenant les points de vente de base » ;
|
||||
- Un titre « bien structuré, contenant les mots-clés clés » + 1-2 phrases de texte de vente.
|
||||
- **Changement d'usage attendu :**
|
||||
Passer de la création de zéro pour chaque lot de produits à l'envoi d'un lot au système, puis sélection et ajustement des brouillons générés.
|
||||
|
||||
2. Capitaliser les bonnes sorties en une bibliothèque de modèles réutilisables :
|
||||
- **Que peut-on sauvegarder ?**
|
||||
- Toute sortie que l'opérationnel juge « bonne » peut être sauvegardée en un clic :
|
||||
- Ça peut être la combinaison complète « image principale + titre + texte de vente » ;
|
||||
- Ou seulement une partie, comme une structure de titre ou un texte de vente spécifique.
|
||||
- **Que peut-on faire après sauvegarde ?**
|
||||
- **Réutiliser :**
|
||||
- Utiliser cette sauvegarde pour appliquer un lot de nouveaux paramètres produit, et régénérer des brouillons images/textes ;
|
||||
- Ou sur le même produit, générer plusieurs variantes basées sur ce modèle pour des tests A/B.
|
||||
- **Éditer :**
|
||||
- Modifier directement le titre / texte de vente ;
|
||||
- Si l'édition d'images est supportée, affiner le texte, les stickers, etc. sur l'image principale.
|
||||
- **Gérer :**
|
||||
- Nommer les sauvegardes, étiqueter (ex : « modèle image principale sac homme », « structure titre promo »), classer par boutique pour faciliter la recherche.
|
||||
- **Comment utiliser lors de la prochaine mise en ligne ?**
|
||||
- Après import de nouveaux produits, l'opérationnel peut choisir :
|
||||
- Utiliser la logique par défaut du système, ou
|
||||
- Spécifier « utiliser un de mes modèles sauvegardés pour générer » ;
|
||||
- Le système applique automatiquement la structure et le style du modèle aux nouvelles données produit, et génère de nouveaux brouillons image principale + titre + texte de vente.
|
||||
```
|
||||
|
||||
Si vous devez créer de nouvelles données à chaque test, cela prend beaucoup de temps. C'est là qu'on utilise généralement ce qu'on appelle des « données de test ». Vous pouvez communiquer avec l'IA de la façon suivante, pour qu'elle génère une entrée rapide de données de test sur l'interface, pour que nous puissions vérifier que toutes les fonctionnalités fonctionnent correctement :
|
||||
|
||||
```
|
||||
J'ai besoin de tester ce parcours utilisateur pour m'assurer qu'il fonctionne complètement.
|
||||
Merci de générer une entrée de données de test en te basant sur les besoins suivants,
|
||||
pour que je puisse cliquer et tester rapidement si le flux complet fonctionne normalement :
|
||||
1. Aider les opérationnels à générer en masse une première version de brouillons images/textes :
|
||||
- **Entrée (supporte l'upload direct et l'import par lot de contenus) :**
|
||||
- Informations de base produit : nom, catégorie, marque, matière, taille, couleur, public cible, etc. ;
|
||||
- Images produit : image fond blanc / photo situation simple ;
|
||||
- Chaque génération supporte l'upload supplémentaire de captures de produits best-sellers ou liens de référence ;
|
||||
- Supporte l'import par lot via Excel, ou la saisie en ligne / upload sur la page.
|
||||
- Supporte la spécification sur la page pour sauvegarder ou non les contenus dans la bibliothèque
|
||||
- **Sortie (contenu directement publiable ou après légères modifications) :**
|
||||
- Pour chaque produit, une image principale brouillon « présentable, contenant les points de vente de base » ;
|
||||
- Un titre « bien structuré, contenant les mots-clés clés » + 1-2 phrases de texte de vente.
|
||||
- **Changement d'usage attendu :**
|
||||
Passer de la création de zéro pour chaque lot de produits à l'envoi d'un lot au système, puis sélection et ajustement des brouillons générés.
|
||||
```
|
||||
|
||||
On obtient facilement le résultat (si vous trouvez qu'une donnée c'est trop peu, vous pouvez demander à l'IA de générer plusieurs cas de test) :
|
||||
|
||||
|
||||
Résultat après clic :
|
||||
|
||||
|
||||
À ce stade, nous obtenons directement le résultat, sans qu'il y ait un « processus de génération simulé ». Si nous voulons simuler un vrai processus de génération, nous pouvons directement parler à l'IA : « Merci de simuler un vrai processus de génération, il faut attendre un moment après le clic avant de me donner le résultat. »
|
||||
|
||||
|
||||
Une fois la fonctionnalité de génération validée, nous devons aussi nous assurer que la fonctionnalité de bibliothèque de modèles fonctionne correctement. Sur la carte de génération de la page, nous pouvons voir que la fonctionnalité de favoris de la bibliothèque de modèles n'est pas implémentée. Il faut alors approfondir la conversation avec l'IA : « Merci de t'assurer que le besoin [collez ici le contenu du point 2 ci-dessus] fonctionne correctement, on peut cliquer sur un résultat pour sauvegarder le modèle correspondant, et en l'ouvrant on peut voir les paramètres de génération »
|
||||
|
||||
La génération n'est souvent pas immédiate, il faut régulièrement corriger avec des captures d'écran :
|
||||
|
||||
|
||||
Et finalement obtenir le résultat attendu :
|
||||
|
||||
|
||||
En plus du test manuel du parcours des besoins, vous pouvez aussi demander à l'IA de faire directement une vérification des besoins, par exemple :
|
||||
|
||||
- « Merci de vérifier par rapport à mon besoin initial si l'application actuelle couvre toutes les fonctionnalités clés. »
|
||||
- « Aide-moi à lister un checklist des fonctionnalités, en indiquant lesquelles sont terminées, lesquelles ne sont pas encore implémentées ou ont une expérience insuffisante. »
|
||||
|
||||
L'IA générera généralement un checklist, à partir duquel vous pouvez décider s'il faut continuer à améliorer. Après des modifications itératives, vous obtiendrez un prototype assez abouti.
|
||||
|
||||
## 5. 📚 Exercice : reproduisez votre propre atelier de contenus TikTok e-commerce
|
||||
|
||||
<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
|
||||
<template #header>
|
||||
<div style="font-weight: bold; font-size: 16px;">🚀 Défi : reproduire l'atelier de contenus e-commerce</div>
|
||||
</template>
|
||||
|
||||
<p>
|
||||
En vous référant aux prompts et au contenu de ce cours, réalisez un cycle complet :
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<strong>Pratique du cycle complet</strong>
|
||||
<ul>
|
||||
<li>Génération de prompt de synthèse métier → génération de prototype mono-page → génération de prototype multi-pages</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<strong>Partage des résultats</strong>
|
||||
<ul>
|
||||
<li>Faites une capture d'écran de votre programme et partagez-la avec tout le monde</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<strong>Question de réflexion</strong>
|
||||
<ul>
|
||||
<li>Réservez de l'espace pour la prochaine section « Intégration des capacités LLM et de génération d'images à partir de texte », et anticipez : comment votre atelier pourrait-il intégrer des capacités comme « IA écrit le texte / génère les images / génère le script » ?</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</el-card>
|
||||
|
||||
## Prochaine étape
|
||||
|
||||
Dans la section suivante, nous construirons sur cet atelier de production de contenus en y intégrant des capacités AI spécifiques (texte vers texte, image vers texte, texte vers image), par exemple :
|
||||
|
||||
- Générer automatiquement des brouillons de textes et plusieurs propositions de titres pour une tâche de contenu
|
||||
- Générer automatiquement des brouillons d'images à partir de la description de la tâche (texte vers image)
|
||||
- Classer et résumer automatiquement les tâches de contenu passées, pour vous aider à planifier les sujets de la prochaine promotion
|
||||
|
||||
<RelatedArticlesSection
|
||||
title="Continuer à apprendre"
|
||||
description="Il est recommandé de continuer dans l'ordre : intégrer les capacités AI → cycle complet du projet → ingénierie du design."
|
||||
:items="relatedArticles"
|
||||
/>
|
||||
@@ -0,0 +1,301 @@
|
||||
---
|
||||
title: 'Projet complet - De la démo au prototype de niveau produit'
|
||||
description: 'Dépassez le stade de la démo, apprenez à compléter les parcours produit, à construire des données simulées réalistes, à itérer rapidement grâce au feedback, et finalisez un prototype AI complet, présentable et interactif.'
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { relatedArticlesMap } from '@theme/data/relatedArticles'
|
||||
|
||||
const duration = 'Environ <strong>3 jours</strong>'
|
||||
const relatedArticles =
|
||||
relatedArticlesMap['fr-fr/stage-1/complete-project-practice'] ?? []
|
||||
</script>
|
||||
|
||||
# Débutant 5 : Projet complet en conditions réelles
|
||||
|
||||
## Introduction du chapitre
|
||||
|
||||
<ChapterIntroduction :duration="duration" :tags="['Esprit produit', 'Données simulées', 'Interactions complètes', 'LocalStorage']" coreOutput="1 prototype de produit AI fonctionnel" expectedOutput="Application Web avec des parcours complets et des données réalistes">
|
||||
|
||||
Au chapitre précédent, vous avez intégré les capacités AI et la démo fonctionne, mais vous êtes encore <strong>très loin</strong> d'un vrai « produit » : au premier rafraîchissement, <strong>les données disparaissent</strong>, en cas d'erreur c'est <strong>un écran blanc</strong>, la liste ne contient que des « données de test 1, données de test 2 », et si l'utilisateur se trompe, <strong>impossible d'annuler</strong>...
|
||||
|
||||
Ce chapitre va <strong>combler toutes ces lacunes</strong> : nous allons <strong>compléter les parcours produit</strong>, utiliser l'AI pour générer des <strong>données métier réalistes</strong> à la place des fausses données, ajouter la <strong>gestion des erreurs et le feedback utilisateur</strong>, et enfin produire un <strong>prototype complet que vous pourrez fièrement montrer</strong>.
|
||||
|
||||
C'est le <strong>dernier chapitre</strong> de la phase débutant. Une fois cette étape franchie, vous serez passé de « incapable de programmer » à « <strong>capable de créer seul un prototype de produit AI</strong> ».
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="0" :items="[
|
||||
{ title: 'Compléter les parcours', description: 'D\'une fonctionnalité isolée à une boucle complète' },
|
||||
{ title: 'Insuffler l\'âme', description: 'Simuler des données métier réalistes' },
|
||||
{ title: 'Feedback et itération', description: 'Améliorer l\'expérience à partir des retours' },
|
||||
{ title: 'Projet final', description: 'Votre projet de fin d\'études' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 1. Refuser le « Happy Path » : compléter les parcours critiques
|
||||
|
||||
Beaucoup de débutants, en réalisant un prototype, se contentent du « Happy Path » (le chemin idéal) : l'utilisateur clique -> l'API répond avec succès -> le résultat s'affiche.
|
||||
Mais dans le monde réel, les choses se passent rarement aussi bien. Pour que votre prototype ressemble à un vrai produit, vous devez prendre en compte ces étapes « invisibles ».
|
||||
|
||||
### 1.1 Ajouter de l'attente et du feedback
|
||||
|
||||
Lorsque l'utilisateur clique sur « Générer le texte », l'AI met souvent plusieurs secondes à répondre. Si l'interface ne réagit pas, l'utilisateur pensera que le programme est planté.
|
||||
**Demandez à votre AI IDE d'ajouter un état de chargement (Loading) :**
|
||||
|
||||
> Exemple de prompt :
|
||||
> « Lorsque je clique sur le bouton de génération, transforme le bouton en "Génération en cours..." et rends-le non cliquable, tout en affichant une animation de chargement dans la zone de droite. Ce n'est qu'au retour de l'API que tout redevient normal. »
|
||||
|
||||
### 1.2 Gérer les échecs et les exceptions
|
||||
|
||||
La clé API peut expirer, le réseau peut tomber en panne.
|
||||
**Demandez à votre AI IDE de gérer les erreurs :**
|
||||
|
||||
> Exemple de prompt :
|
||||
> « Si la requête API échoue, ne te contente pas d'afficher une erreur dans la console. Fais apparaître une notification rouge (Toast) en haut de la page indiquant "Échec de la génération, veuillez réessayer plus tard", et permets à l'utilisateur de cliquer à nouveau sur le bouton. »
|
||||
|
||||
### 1.3 Persistance de l'historique de conversation
|
||||
|
||||
Au cours de l'interaction avec l'AI, nous devons sauvegarder le contenu des conversations pour que l'utilisateur puisse revoir l'historique et poursuivre ses échanges précédents. À ce stade, nous n'introduisons pas encore de base de données ; vous pouvez choisir l'une des solutions légères suivantes :
|
||||
|
||||
**Choix de la solution de stockage :**
|
||||
|
||||
| Solution | Cas d'usage | Caractéristiques |
|
||||
| ---------------- | -------------------------------- | ------------------------------------ |
|
||||
| **LocalStorage** | Projet purement frontend, données utilisateur sauvegardées dans le navigateur | Simple à implémenter, persiste au rafraîchissement, pas de synchronisation entre appareils |
|
||||
| **Fichier JSON** | Prototype local, données stockées sous forme de fichier | Structure claire, facile à déboguer, modifiable manuellement |
|
||||
| **Fichier TXT** | Solution minimale, enregistrement rapide de texte | Format libre, bonne compatibilité |
|
||||
|
||||
**Exemple de contenu de conversation :**
|
||||
L'historique sauvegardé contient généralement les éléments suivants :
|
||||
|
||||
```json
|
||||
[
|
||||
{
|
||||
"role": "user",
|
||||
"content": "Aide-moi à générer un texte promotionnel TikTok pour des écouteurs Bluetooth",
|
||||
"timestamp": "2026-01-20 10:30:00"
|
||||
},
|
||||
{
|
||||
"role": "assistant",
|
||||
"content": "【Texte promotionnel écouteurs Bluetooth】\n\n🎧 Dites adieu à la latence, une expérience d'écoute immersive\n\nLes amis ! Ces écouteurs Bluetooth sont vraiment incroyables 👇\n\n✅ 40 dB de réduction de bruit active, plongez instantanément dans la musique\n✅ 30 heures d'autonomie, une semaine de trajets sans recharge\n✅ Appels clairs comme en face-à-face, même dans le métro\n✅ Design demi-intra, confortable même après des heures d'utilisation\n\n💰 Offre à durée limitée, cliquez sur le lien ci-dessous pour commander !",
|
||||
"timestamp": "2026-01-20 10:30:05"
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
**Prompt pour l'implémentation :**
|
||||
|
||||
> « Aide-moi à implémenter la fonctionnalité de sauvegarde de l'historique de conversation. Supporte la sauvegarde des enregistrements de conversation entre l'utilisateur et l'AI sous forme de fichier JSON (ou utilise LocalStorage). Au chargement de la page, charge automatiquement l'historique précédent. Permet de consulter et de supprimer des conversations individuelles. »
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="1" :items="[
|
||||
{ title: 'Compléter les parcours', description: 'D\'une fonctionnalité isolée à une boucle complète' },
|
||||
{ title: 'Insuffler l\'âme', description: 'Simuler des données métier réalistes' },
|
||||
{ title: 'Feedback et itération', description: 'Améliorer l\'expérience à partir des retours' },
|
||||
{ title: 'Projet final', description: 'Votre projet de fin d\'études' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 2. Insuffler l'âme : simuler des données réalistes (Mock Data)
|
||||
|
||||
Une page vide ne convaincra personne. Imaginez que vous présentiez un « espace de travail e-commerce » et que l'historique soit totalement vide, ou ne contienne qu'une seule ligne « test / test / test ».
|
||||
Pour obtenir le meilleur effet de démonstration, nous devons « forger » des données réalistes afin que votre prototype ressemble à un vrai produit en exploitation depuis six mois.
|
||||
|
||||
### 2.1 Laissez l'AI concevoir la structure de données
|
||||
|
||||
Nous n'avons pas besoin de réfléchir nous-mêmes au nom de chaque champ (par exemple, faut-il utiliser `name` ou `title` ?). Cette tâche peut être entièrement déléguée à l'AI.
|
||||
|
||||
Il suffit de décrire votre **scénario métier** à l'AI :
|
||||
|
||||
> **Exemple de prompt :**
|
||||
> « Je suis en train de réaliser le prototype d'un **espace de travail e-commerce TikTok**.
|
||||
> Aide-moi à concevoir une structure de données JSON pour décrire une "tâche produit".
|
||||
> Cette tâche doit contenir : les informations de base du produit (nom, catégorie), les ressources fournies en entrée (liens d'images), et les résultats générés par l'AI (titre, texte, image d'affiche).
|
||||
> Donne-moi directement un exemple JSON. »
|
||||
|
||||
L'AI concevra automatiquement des champs comme `productName`, `generatedContent` en fonction de votre description.
|
||||
|
||||
### 2.2 Laissez l'AI produire en masse des données « réalistes »
|
||||
|
||||
Une fois la structure de données établie, l'étape suivante consiste à demander à l'AI de « remplir les cases » et de générer un jeu de données d'apparence réaliste.
|
||||
|
||||
**Astuces pour les prompts :**
|
||||
Vous ne pouvez pas simplement dire à l'AI « génère des données ». Vous devez lui donner des instructions comme si vous assigniez une tâche à un stagiaire : précisez le **contexte métier** et les **exigences de contenu** :
|
||||
|
||||
- **Contexte métier** : dites à l'AI que nous faisons du « e-commerce TikTok », donc les titres de produits doivent être accrocheurs (par exemple « L'astuce infaillible pour paraître plus mince », « Indispensable pour les étudiants »), et les textes doivent être conversationnels.
|
||||
- **Exigences pour les images** : pour que le prototype soit attrayant, les images ne doivent pas être des espaces réservés en noir et blanc ; il est préférable d'utiliser des images aléatoires en couleur (paysages ou objets réels).
|
||||
|
||||
> **Exemple de prompt :**
|
||||
> « En te basant sur la structure conçue précédemment, génère 10 entrées de données simulées réalistes.
|
||||
> (Remarque : le format n'a pas besoin d'être JSON. Si tu écris du frontend, tu peux générer directement un tableau JavaScript ; si tu utilises Python, tu peux générer une List.)
|
||||
>
|
||||
> **Exigences du scénario métier :**
|
||||
>
|
||||
> 1. Suppose qu'il s'agit d'un grand magasin généraliste, avec des produits couvrant les catégories "Mode féminine", "Électronique" et "Beauté".
|
||||
> 2. **Les titres et textes générés doivent être très "style TikTok"** : par exemple, les titres doivent contenir des Emoji (🔥, ✨), les textes doivent utiliser un ton comme "C'est trop bien !", "Testé et approuvé".
|
||||
> 3. **Champ image** : utilise systématiquement le format `https://picsum.photos/seed/{random_id}/300/400` pour garantir que chaque image est différente. »
|
||||
|
||||
**Exemple de Mock Data généré :**
|
||||
|
||||
```javascript
|
||||
export const mockProductTasks = [
|
||||
{
|
||||
id: 'task_001',
|
||||
name: 'Robe d\'été vintage à imprimé fleuri style français',
|
||||
status: 'completed',
|
||||
input: {
|
||||
category: 'Mode féminine',
|
||||
features: ['Taille marquée', 'Amincissant', 'Élégant'],
|
||||
originalImage: 'https://picsum.photos/seed/dress_input/300/400'
|
||||
},
|
||||
output: {
|
||||
generatedTitle: '✨ Magnifique sur tout le monde ! Cette robe à imprimé fleuri style français est vraiment incroyable 🔥',
|
||||
generatedCopy:
|
||||
'Les filles ! Cette robe affine vraiment la silhouette ! La taille marquée est parfaite, on a immédiatement une silhouette élégante. Le tissu est très respirant, pas du tout étouffant en été. Idéale pour un rendez-vous ou une sortie ! 👗',
|
||||
generatedPosterImage: 'https://picsum.photos/seed/dress_output/300/400'
|
||||
},
|
||||
createdAt: '2026-01-20T10:00:00Z'
|
||||
},
|
||||
{
|
||||
id: 'task_002',
|
||||
name: 'Écouteurs Bluetooth Pro à réduction de bruit ultra-puissante',
|
||||
status: 'completed',
|
||||
input: {
|
||||
category: 'Électronique',
|
||||
features: ['Réduction de bruit', 'Autonomie prolongée', 'Faible latence'],
|
||||
originalImage: 'https://picsum.photos/seed/tech_input/300/400'
|
||||
},
|
||||
output: {
|
||||
generatedTitle: '🎧 Enfin trouvés ! Ces écouteurs ont une réduction de bruit incroyable ! 🔇',
|
||||
generatedCopy:
|
||||
'Dès qu\'on les met, le monde devient silencieux. La qualité sonore est exceptionnelle, écouter de la musique c\'est comme être en concert. L\'autonomie est aussi très bonne, une seule charge pour une semaine entière ! Indispensable pour les étudiants !',
|
||||
generatedPosterImage: 'https://picsum.photos/seed/tech_output/300/400'
|
||||
},
|
||||
createdAt: '2026-01-21T14:30:00Z'
|
||||
}
|
||||
// ... plus de données
|
||||
]
|
||||
```
|
||||
|
||||
### 2.3 (Avancé) Implémenter de « fausses opérations CRUD » avec LocalStorage
|
||||
|
||||
Si vous souhaitez que les « données simulées » générées précédemment soient non seulement consultables, mais aussi supprimables et modifiables, et que les nouvelles tâches persistent après un rafraîchissement de la page, vous pouvez combiner cela avec `LocalStorage`.
|
||||
|
||||
> **Exemple de prompt :**
|
||||
> « Aide-moi à implémenter une fonctionnalité de stockage de données.
|
||||
>
|
||||
> 1. Lis d'abord les données depuis `localStorage`.
|
||||
> 2. Si `localStorage` est vide, initialise avec les données Mock générées précédemment et stocke-les dans `localStorage`.
|
||||
> 3. Écris également les fonctions `addProductTask` et `deleteProductTask`, en mettant à jour `localStorage` à chaque opération. »
|
||||
|
||||
Avec cette étape, votre prototype acquiert une « mémoire » et l'expérience utilisateur est presque identique à celle d'un vrai produit.
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="2" :items="[
|
||||
{ title: 'Compléter les parcours', description: 'D\'une fonctionnalité isolée à une boucle complète' },
|
||||
{ title: 'Insuffler l\'âme', description: 'Simuler des données métier réalistes' },
|
||||
{ title: 'Feedback et itération', description: 'Améliorer l\'expérience à partir des retours' },
|
||||
{ title: 'Projet final', description: 'Votre projet de fin d\'études' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 3. Collecter les retours et itérer rapidement
|
||||
|
||||
On ne peut pas créer un bon produit en travaillant isolément. Maintenant que votre prototype dispose de « fonctionnalités clés » + « parcours complets » + « données de démonstration », il est temps de le montrer à d'autres personnes.
|
||||
|
||||
### 3.1 Qui tester ? Comment tester ?
|
||||
|
||||
- **Amis / collègues** : pas besoin qu'ils comprennent la technique, il suffit de leur demander d'essayer.
|
||||
- **Observer plutôt que guider** : ne dites pas « clique ici », mais observez où ils cliquent naturellement. S'ils ne trouvent pas un bouton, c'est que le design pose problème.
|
||||
- **Méthode « Wizard of Oz »** : si votre AI n'est pas encore connectée, vous pouvez modifier manuellement les données en arrière-plan (ou dans la base de données) pour simuler le retour de l'AI, afin de valider d'abord si l'utilisateur a réellement besoin de cette fonctionnalité.
|
||||
|
||||
### 3.2 Face aux bugs et aux critiques
|
||||
|
||||
- **Mise en page cassée** : sur certaines tailles d'écran, l'affichage peut être dégradé.
|
||||
- **Action** : faites une capture d'écran et envoyez-la à l'AI IDE -> « La mise en page est cassée à cette largeur d'écran, aide-moi à corriger. »
|
||||
- **Interactions maladroites** : « ce processus est trop compliqué ».
|
||||
- **Action** : transmettez la suggestion à l'AI IDE -> « L'utilisateur trouve le processus upload puis génération trop lent, peut-on passer à une génération en un clic ? »
|
||||
- **Nouvelles demandes** : « si seulement il y avait cette fonctionnalité ».
|
||||
- **Action** : évaluez si c'est essentiel ; si oui, demandez à l'AI d'implémenter rapidement une version simplifiée.
|
||||
|
||||
**Rappelez-vous : à ce stade, l'AI est votre meilleur assistant pour les modifications. Vous êtes uniquement responsable d'identifier les problèmes ; confiez la modification du code à l'AI.**
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="3" :items="[
|
||||
{ title: 'Compléter les parcours', description: 'D\'une fonctionnalité isolée à une boucle complète' },
|
||||
{ title: 'Insuffler l\'âme', description: 'Simuler des données métier réalistes' },
|
||||
{ title: 'Feedback et itération', description: 'Améliorer l\'expérience à partir des retours' },
|
||||
{ title: 'Projet final', description: 'Votre projet de fin d\'études' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 4. 🎓 Projet final : réalisez votre « projet de fin d'études »
|
||||
|
||||
Félicitations ! Vous avez parcouru tout le processus, du « besoin » au « prototype » puis à l'« intégration AI ». Il est maintenant temps de présenter votre résultat final.
|
||||
|
||||
**Ce projet final n'est plus limité à l'« espace de travail e-commerce ». Vous devez combiner vos propres centres d'intérêt ou votre expérience professionnelle pour créer un prototype de produit AI unique.**
|
||||
|
||||
### Choix du sujet et exigences
|
||||
|
||||
Vous devez choisir le scénario le plus pertinent parmi les **[Références de scénarios multi-sectoriels](../appendix-industry-scenarios/index.md)**, ou imaginer un scénario entièrement nouveau à partir de vos propres idées.
|
||||
|
||||
**Le projet doit utiliser de manière intégrée tout ce que vous avez appris dans les chapitres précédents :**
|
||||
|
||||
1. **Construction du prototype** : utilisez des technologies frontend pour créer une interface esthétique et facile à utiliser.
|
||||
2. **Maîtrise des besoins** : ne visez pas l'exhaustivité, mais assurez-vous que les fonctionnalités centrales forment une boucle logique complète.
|
||||
3. **Intégration API** : connectez un véritable modèle AI (LLM/VLM, etc.) pour donner à l'application une véritable intelligence.
|
||||
4. **Une application fonctionnelle** : pas seulement une page statique, mais une application dynamique avec un flux de données et des interactions avec feedback.
|
||||
|
||||
### Livrables du projet
|
||||
|
||||
Vous devez finalement soumettre les deux éléments suivants :
|
||||
|
||||
1. **Un prototype d'application complet** : déployé en ligne ou exécutable localement, avec un parcours d'utilisation complet.
|
||||
2. **Une vidéo de démonstration de 30 secondes** : enregistrez une vidéo présentant brièvement le scénario de votre application et démontrant le fonctionnement réel des fonctionnalités clés.
|
||||
|
||||
<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
|
||||
<template #header>
|
||||
<div style="font-weight: bold; font-size: 16px;">🚀 Liste de vérification finale</div>
|
||||
</template>
|
||||
|
||||
<p>
|
||||
C'est la dernière épreuve du Stage 1. Vérifiez votre travail selon la liste suivante :
|
||||
</p>
|
||||
|
||||
<div style="font-weight: bold; margin-bottom: 10px;">Auto-vérification des fonctionnalités clés</div>
|
||||
<ul style="list-style-type: none; padding-left: 0;">
|
||||
<li><label><input type="checkbox" disabled /> <strong>Scénario clair</strong> : un secteur ou scénario d'application spécifique a été choisi</label></li>
|
||||
<li><label><input type="checkbox" disabled /> <strong>Boucle logique</strong> : le flux principal fonctionne, pas seulement le Happy Path</label></li>
|
||||
<li><label><input type="checkbox" disabled /> <strong>Piloté par l'AI</strong> : l'API du grand modèle est réellement appelée, pas de réponses prédéfinies</label></li>
|
||||
<li><label><input type="checkbox" disabled /> <strong>Expérience complète</strong> : inclut le Loading, la gestion des erreurs et les données simulées</label></li>
|
||||
</ul>
|
||||
|
||||
<div style="font-weight: bold; margin: 20px 0 10px;">Préparation des livrables</div>
|
||||
<ul style="list-style-type: none; padding-left: 0;">
|
||||
<li><label><input type="checkbox" disabled /> <strong>Prototype d'application</strong> : le code est terminé et exécutable</label></li>
|
||||
<li><label><input type="checkbox" disabled /> <strong>Vidéo de démonstration</strong> : environ 30 secondes, montrant clairement les points forts</label></li>
|
||||
</ul>
|
||||
</el-card>
|
||||
|
||||
## Prochaine étape
|
||||
|
||||
Une fois le projet final terminé, vous êtes désormais capable de « développer seul un prototype d'application AI ».
|
||||
Dans le Stage 2 qui suit, nous approfondirons le développement full-stack plus complexe et apprendrons comment transformer ce prototype en une véritable application commerciale, déployable en ligne, avec une base de données et un système utilisateur.
|
||||
|
||||
Rendez-vous à la prochaine étape !
|
||||
|
||||
<RelatedArticlesSection
|
||||
title="Continuer à progresser"
|
||||
description="Félicitations pour avoir terminé le Stage 1, ces chapitres peuvent vous aider à passer au développement professionnel."
|
||||
:items="relatedArticles"
|
||||
/>
|
||||
@@ -0,0 +1 @@
|
||||
../../../../zh-cn/stage-1/finding-great-idea/images
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1 @@
|
||||
../../../../zh-cn/stage-1/integrating-ai-capabilities/images
|
||||
@@ -0,0 +1,808 @@
|
||||
---
|
||||
title: 'Ajouter des capacités IA à votre prototype - Intégrer les API de texte et d''image'
|
||||
description: 'Intégrez de véritables capacités IA dans un prototype Web existant : comprenez les concepts clés des API, apprenez à trouver votre API Key et les exemples officiels ; pratiquez l''intégration du modèle de texte DeepSeek et de plusieurs services de génération d''images (SiliconFlow Qwen-Image, Recraft, Seedream), et maîtrisez les méthodes courantes de sélection de modèles.'
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { relatedArticlesMap } from '@theme/data/relatedArticles'
|
||||
|
||||
const duration = 'environ <strong>1 jour</strong>'
|
||||
const relatedArticles =
|
||||
relatedArticlesMap['fr-fr/stage-1/integrating-ai-capabilities'] ?? []
|
||||
</script>
|
||||
|
||||
# Module 4 : Injecter des capacités IA dans votre prototype
|
||||
|
||||
## Introduction au chapitre
|
||||
|
||||
<ChapterIntroduction :duration="duration" :tags="['API', 'Modèle de texte', 'Texte vers image', 'Intégration de prototype']" coreOutput="Prototype connecté à 1 modèle de texte + 1 modèle d'image (optionnel)" expectedOutput="Prototype IA capable d'appeler de vraies API">
|
||||
|
||||
Dans les chapitres précédents, nous avons terminé le processus complet, de <strong>trouver une bonne idée</strong> à <strong>créer un prototype de produit</strong>. Mais le prototype actuel n'est qu'une « coquille » -- cliquer sur un bouton ne génère pas vraiment de contenu, et les données de la page sont figées.
|
||||
|
||||
Vous rappelez-vous ce que nous avons souligné dans le premier chapitre ? <strong>Nous voulons créer « un produit que les gens paient », pas « un prototype qui a l'air correct ».</strong> La véritable valeur vient de la capacité du produit à <strong>résoudre de vrais problèmes</strong>, et pour cela, le prototype doit <strong>réellement fonctionner</strong>.
|
||||
|
||||
Ce chapitre va <strong>« donner vie » au prototype</strong> : nous allons intégrer de <strong>véritables capacités IA</strong>, de l'obtention d'une API Key à la lecture de la documentation officielle, en passant par la demande à l'AI IDE d'intégrer les API dans votre code. Vous prendrez le <strong>modèle de texte DeepSeek</strong> comme exemple pour apprendre à faire en sorte que votre application <strong>appelle réellement un grand modèle pour générer du contenu</strong> ; si vous êtes intéressé, vous pouvez aussi <strong>intégrer la génération d'images en option</strong>.
|
||||
|
||||
À la fin de ce chapitre, votre prototype ne sera <strong>plus une démonstration statique</strong>, mais <strong>une application capable d'appeler de vraies capacités IA et de résoudre de vrais problèmes</strong>.
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="0" :items="[
|
||||
{ title: 'Bases de l\'API', description: 'Comprendre les concepts clés et les règles de sécurité' },
|
||||
{ title: 'Intégration texte', description: 'Pratique de génération de texte avec DeepSeek' },
|
||||
{ title: 'Intégration image', description: 'Compréhension et génération d\'images VLM' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
# 1. Concepts de base des API
|
||||
|
||||
Comme mentionné précédemment, notre objectif est « d'intégrer les capacités IA », pour que le prototype ne soit plus une démonstration statique, mais un outil capable d'appeler de vrais services IA. Pour réaliser cela, la clé est de comprendre et d'utiliser les API (Application Programming Interface).
|
||||
|
||||
L'API est un concept d'abstraction important en informatique, que l'on peut comprendre simplement comme : **vous envoyez une « question » dans le format requis, et l'autre partie vous renvoie un « résultat » dans le même format**.
|
||||
|
||||
- **Ce que vous envoyez** : généralement inclut la « clé (API Key) » et « ce que vous voulez générer »
|
||||
- **Ce que vous recevez en retour** : en cas de succès, le résultat ; en cas d'échec, la raison (par exemple « clé incorrecte », « solde insuffisant », « paramètre erroné »)
|
||||
|
||||
Concrètement, vous devez maîtriser les éléments clés suivants :
|
||||
|
||||
1. **API Key** : votre « passe », aussi votre « clé de portefeuille ». Si quelqu'un d'autre l'obtient, il peut utiliser l'API en votre nom et engendrer des frais.
|
||||
2. **Endpoint (chemin de l'interface)** : le chemin spécifique de la requête API, indiquant au serveur quelle fonctionnalité vous souhaitez accéder. L'adresse complète se compose généralement du « URL de base + chemin de l'endpoint ». Par exemple :
|
||||
- Génération de texte : URL de base (`https://api.service.com`) + Endpoint (`/v1/chat/completions`) = URL complète `https://api.service.com/v1/chat/completions`
|
||||
- Génération d'images : URL de base (`https://api.service.com`) + Endpoint (`/v1/images/generations`) = URL complète `https://api.service.com/v1/images/generations`
|
||||
3. **Appel/Requête** : le processus d'envoi d'une tâche au service IA et d'obtention du résultat
|
||||
4. **Contenu de la requête** : ce que vous envoyez à l'IA, comme le sujet de l'article que vous voulez générer ou la description de l'image
|
||||
5. **Réponse** : ce que l'IA vous renvoie après traitement, comme l'article généré ou l'image
|
||||
6. **Gestion des erreurs** : savoir comment diagnostiquer et résoudre les problèmes (API Key incorrecte, requêtes trop fréquentes, etc.)
|
||||
|
||||
::: info ℹ️ Qu'est-ce qu'une API
|
||||
Pour une explication plus approfondie des API, consultez l'annexe : [Introduction aux API](/fr-fr/appendix/4-server-and-backend/api-intro).
|
||||
|
||||
::: warning 🔐 **Consignes de sécurité des API**
|
||||
L'API Key est votre « passe » pour accéder aux services IA. C'est une chaîne de caractères de type mot de passe, utilisée pour l'authentification et la facturation.
|
||||
|
||||
Puisque l'API Key est directement liée à votre compte et à vos frais, veillez à :
|
||||
|
||||
- Ne <strong>jamais la partager</strong> dans des chats, des captures d'écran publiées en ligne ou des forums publics
|
||||
- <strong>Ne pas la coder en dur</strong> dans le code et la committer dans un dépôt Git (surtout un dépôt public)
|
||||
- Si vous soupçonnez que la Key a été compromise, <strong>changez-la immédiatement</strong>
|
||||
|
||||
Dans ce qui suit, nous <strong>allons directement coller l'API KEY dans l'AI IDE pour les opérations</strong>. <strong>Ne faites pas ça dans un vrai projet !!</strong> Comme nous sommes en phase d'apprentissage, c'est acceptable. (Quand vous serez plus expérimenté, vous pourrez demander à l'IA de générer un fichier de configuration dans lequel vous placerez simplement l'API KEY)
|
||||
:::
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="1" :items="[
|
||||
{ title: 'Bases de l\'API', description: 'Comprendre les concepts clés et les règles de sécurité' },
|
||||
{ title: 'Intégration texte', description: 'Pratique de génération de texte avec DeepSeek' },
|
||||
{ title: 'Intégration image', description: 'Compréhension et génération d\'images VLM' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
# 2. Intégrer l'API de génération de texte : DeepSeek
|
||||
|
||||
Bien que les API impliquent des concepts techniques, la phase de développement de prototype peut être très simple et efficace. L'idée centrale est :
|
||||
|
||||
> **Trouver l'exemple officiel, obtenir l'API Key, demander à l'AI IDE de l'intégrer à votre bouton.**
|
||||
|
||||
Une fois ces concepts maîtrisés, vous découvrirez que le processus est le même pour l'intégration de modèles de texte ou d'images : quand l'utilisateur clique sur un bouton, le frontend organise l'entrée et envoie la requête ; quand l'interface renvoie le résultat, il l'affiche sur la page. Voyons cela en pratique.
|
||||
|
||||
Dans la section 1.2, vous avez déjà créé un prototype interactif. Ce que nous allons faire maintenant, c'est transformer les « fonctionnalités qui ressemblent à de l'IA » en véritables capacités : <strong>quand l'utilisateur clique sur un bouton, le prototype envoie une requête à un service IA externe et affiche le texte renvoyé.</strong>
|
||||
|
||||
::: info ℹ️ Pour aller plus loin sur les principes
|
||||
Si vous voulez en savoir plus sur les principes, consultez l'annexe : [Introduction aux grands modèles de langage (LLM)](/fr-fr/appendix/8-artificial-intelligence/llm-principles).
|
||||
::: details Pour en savoir plus : Qu'est-ce que DeepSeek ?
|
||||
|
||||
**Hangzhou DeepSeek Artificial Intelligence Basic Technology Research Co., Ltd.**, commercialisée sous le nom de DeepSeek, est une <strong>entreprise chinoise d'intelligence artificielle (IA) qui développe des grands modèles de langage (LLM)</strong>. DeepSeek est basée à Hangzhou, dans la province du Zhejiang, et est détenue et financée par le fonds quantitatif chinois High-Flyer. DeepSeek a été fondée en juillet 2023 par Liang Wenfeng, cofondateur de High-Flyer, qui est également PDG des deux entreprises. L'entreprise a lancé son chatbot éponyme et son modèle DeepSeek-R1 en janvier 2025.
|
||||
|
||||
Regardons les performances de DeepSeek dans le classement GPQA par rapport à d'autres modèles de premier plan. Il est à noter que DeepSeek est un modèle open source (tout le monde peut télécharger le modèle depuis Internet), alors que d'autres modèles courants comme Grok, Google Gemini et ChatGPT sont propriétaires. Comme on peut le voir, DeepSeek s'est considérablement rapproché des modèles de premier rang.
|
||||
|
||||
|
||||
|
||||
GPQA signifie « Graduate-Level Google-Proof Question Answering benchmark », un benchmark de niveau graduate pour les tâches de Q&R scientifiques.
|
||||
|
||||
GPQA contient 448 questions à choix multiples couvrant les sous-domaines de la biologie, de la physique et de la chimie, tels que la mécanique quantique, la chimie organique, la biologie moléculaire, etc. Ces questions ont été rédigées par 61 experts titulaires d'un doctorat ou en cours de doctorat, et ont fait l'objet d'un processus de validation rigoureux.
|
||||
:::
|
||||
|
||||
Suivez ces 3 étapes pour réaliser une intégration rapide de l'API de génération de texte :
|
||||
|
||||
1. **Créer une API Key sur la plateforme DeepSeek**
|
||||
2. **Trouver un exemple de génération de texte dans la documentation DeepSeek** (il y a généralement du code prêt à copier)
|
||||
3. **Ouvrir l'AI IDE, coller l'API Key + l'exemple officiel**, et dire à l'IA ce que vous voulez accomplir :
|
||||
> Aide-moi à intégrer l'API de ce grand modèle de langage pour prendre en charge la fonction de génération de textes publicitaires de cette application
|
||||
|
||||
Ensuite, nous allons faire une démonstration que vous pouvez suivre. Tout d'abord, inscrivez-vous sur [DeepSeek](https://platform.deepseek.com/usage) et créez une API Key, puis rechargez un petit montant pour vérifier.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Cliquez sur « API KEYS » et trouvez « create new API key » en bas de l'écran. Vous obtiendrez finalement une clé API comme sk-8573341c39fc44315aadc071c53rh7d2.
|
||||
|
||||
|
||||
|
||||
Une fois que vous avez la clé, vous avez l'autorisation d'appeler le modèle.
|
||||
|
||||
À ce stade, vous pouvez directement lire la documentation [API](https://api-docs.deepseek.com/), qui fournit généralement des exemples d'appel en curl ou Python.
|
||||
|
||||
|
||||
|
||||
Après avoir trouvé l'exemple, vous pouvez copier tout le contenu de la documentation et votre clé dans la boîte de dialogue de l'AI IDE, et lui demander de vous aider à intégrer le grand modèle de langage dans le prototype déjà développé.
|
||||
|
||||
|
||||
|
||||
Référence de prompt à utiliser :
|
||||
|
||||
```
|
||||
En te référant à cette méthode d'appel, aide-moi à prendre en charge la fonction de génération de textes publicitaires, qui peut générer des textes publicitaires pour le commerce électronique de Douyin en plusieurs styles sur la base des informations produit.
|
||||
|
||||
Matériel de référence :
|
||||
clé API : sk-8573341c39aefa1efe
|
||||
Référence de requête API :
|
||||
curl \
|
||||
-H "Content-Type: application/json" \
|
||||
-H "Authorization: Bearer ${DEEPSEEK_API_KEY}" \
|
||||
-d '{
|
||||
"model": "deepseek-chat",
|
||||
"messages": [
|
||||
{"role": "system", "content": "You are a helpful assistant."},
|
||||
{"role": "user", "content": "Hello!"}
|
||||
],
|
||||
"stream": false
|
||||
}'
|
||||
```
|
||||
|
||||
Après un certain temps de génération de code par l'IA, nous pouvons facilement obtenir le bouton de génération de texte publicitaire correspondant pour le tester. Si vous ne trouvez pas l'entrée, vous pouvez demander à l'AI IDE de vous indiquer depuis quelle page vous pouvez accéder à cette page. Si vous ne trouvez vraiment pas, vous pouvez demander à l'AI IDE de reconstruire et d'améliorer directement votre idée.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Bien sûr, vous pourriez vous demander : comment savoir si le grand modèle a vraiment été appelé et qu'il ne s'agit pas simplement d'une réponse figée intégrée ? Vous pouvez saisir du texte personnalisé et demander au modèle de générer le texte publicitaire correspondant en fonction de votre demande personnalisée.
|
||||
|
||||
Si vous constatez que les résultats sont différents à chaque fois et logiques, vous pouvez être sûr que l'API est appelée normalement. Vous pouvez aussi vérifier sur la [plateforme de gestion d'utilisation de l'API](https://platform.deepseek.com/usage) si l'appel a réussi (bien qu'il puisse falloir attendre quelques minutes pour voir les résultats).
|
||||
|
||||
## Autres modèles de génération de texte
|
||||
|
||||
En plus de DeepSeek, vous pouvez aussi essayer d'autres grands modèles de langage. Comme la plupart des modèles fournissent une **interface compatible OpenAI**, le changement est très simple -- il suffit de modifier l'API Key, l'URL de base et le nom du modèle.
|
||||
|
||||
### Intégration MiniMax
|
||||
|
||||
::: details Pour en savoir plus : Qu'est-ce que MiniMax ?
|
||||
|
||||
**MiniMax** est une entreprise chinoise d'intelligence artificielle dédiée à la recherche et au développement de technologies d'intelligence artificielle générale. MiniMax a lancé sa série de modèles de langage MiniMax-M2.7, qui affiche d'excellentes performances dans de nombreux benchmarks, avec un rapport qualité-prix exceptionnel.
|
||||
|
||||
**Principales caractéristiques de la série MiniMax-M2.7 :**
|
||||
|
||||
- **Contexte ultra-long** : prend en charge une fenêtre de contexte de 204 800 tokens, adaptée au traitement de documents longs et de dialogues multi-tours
|
||||
- **Rapport qualité-prix élevé** : prix très compétitif
|
||||
- **Interface compatible OpenAI** : peut être appelée directement avec le SDK OpenAI, sans apprentissage supplémentaire
|
||||
- **Deux modèles disponibles** :
|
||||
- `MiniMax-M2.7` : modèle phare, adapté aux tâches complexes
|
||||
- `MiniMax-M2.7-highspeed` : version haute vitesse, mêmes performances mais plus rapide
|
||||
:::
|
||||
|
||||
La méthode d'intégration est identique à DeepSeek, en 3 étapes :
|
||||
|
||||
1. Allez sur la [plateforme ouverte MiniMax](https://platform.minimax.io/) et créez un compte et une API Key
|
||||
2. Trouvez un exemple d'appel dans la documentation MiniMax
|
||||
3. Collez l'API Key + l'exemple dans l'AI IDE
|
||||
|
||||
Comme MiniMax fournit une interface compatible OpenAI, vous pouvez directement copier l'exemple curl ci-dessous et votre clé API, et les envoyer à l'AI IDE pour l'intégration :
|
||||
|
||||
```bash
|
||||
curl https://api.minimax.io/v1/chat/completions \
|
||||
-H "Content-Type: application/json" \
|
||||
-H "Authorization: Bearer ${MINIMAX_API_KEY}" \
|
||||
-d '{
|
||||
"model": "MiniMax-M2.7",
|
||||
"messages": [
|
||||
{"role": "system", "content": "You are a helpful assistant."},
|
||||
{"role": "user", "content": "Hello!"}
|
||||
],
|
||||
"stream": false
|
||||
}'
|
||||
```
|
||||
|
||||
::: tip ✅ Conseil
|
||||
Le format d'API de MiniMax est presque identique à celui de DeepSeek (tous deux utilisent le format compatible OpenAI), donc si vous avez déjà réussi à intégrer DeepSeek, passer à MiniMax ne nécessite de modifier que trois choses :
|
||||
1. **URL de base** : changez en `https://api.minimax.io/v1`
|
||||
2. **API Key** : utilisez l'API Key de MiniMax
|
||||
3. **Nom du modèle** : changez en `MiniMax-M2.7` ou `MiniMax-M2.7-highspeed`
|
||||
|
||||
Pour plus d'informations, consultez la [documentation de l'interface compatible OpenAI de MiniMax](https://platform.minimax.io/docs/api-reference/text-openai-api).
|
||||
:::
|
||||
|
||||
# 3. Intégrer l'API de conversion image-texte : Qwen3 VL
|
||||
|
||||
::: info ℹ️ Pour aller plus loin sur les principes
|
||||
Si vous voulez en savoir plus sur les principes, consultez l'annexe : [Introduction aux modèles de langage visuel (VLM)](/fr-fr/appendix/8-artificial-intelligence/multimodal-models).
|
||||
|
||||
::: details Pour en savoir plus : Qu'est-ce que Qwen3 VL ?
|
||||
|
||||
**Qwen3 VL** est la dernière version de la série de modèles de langage visuel multimodal développée par l'équipe Tongyi Qianwen d'Alibaba Cloud. VL signifie « Vision-Language », c'est-à-dire un modèle de langage visuel. Il est capable de comprendre le contenu des images et de générer des descriptions textuelles, de répondre à des questions sur les images et d'extraire des informations des images.
|
||||
|
||||
|
||||
|
||||
|
||||
**Principales capacités de Qwen3 VL :**
|
||||
|
||||
- **Compréhension d'images** : capable d'identifier les objets, scènes, personnages et textes dans les images
|
||||
- **Questions-réponses visuelles** : répondre avec précision aux questions sur les images
|
||||
- **Description d'images** : générer des descriptions textuelles détaillées ou concises
|
||||
- **Compréhension multi-images** : prendre en charge le traitement simultané de plusieurs images pour une analyse comparative
|
||||
- **Extraction de texte** : extraire du contenu textuel des images (capacité OCR)
|
||||
|
||||
**Pourquoi choisir Qwen3 VL ?**
|
||||
|
||||
Par rapport au modèle de génération précédent, Qwen3 VL a significativement amélioré la précision de la compréhension d'images, prenant en charge des tâches d'analyse d'images plus longues et plus complexes. Il excelle dans la compréhension du chinois, avec un coût d'appel API relativement faible et un excellent rapport qualité-prix. De plus, sa fenêtre de contexte est plus grande, ce qui lui permet de gérer des tâches de raisonnement visuel plus complexes.
|
||||
|
||||
**Scénarios d'application typiques :**
|
||||
|
||||
- Commerce électronique : génération automatique de titres, descriptions et points forts à partir de photos de produits
|
||||
- Création de contenu : génération automatique de textes publicitaires ou de suggestions d'images à partir de visuels
|
||||
- Bureau : extraction du contenu d'images, reconnaissance automatique de rapports
|
||||
- Éducation : analyse automatique de questions illustrées, extraction de points de connaissance
|
||||
|
||||
:::
|
||||
|
||||
Dans la partie précédente, nous avons expliqué comment intégrer l'API de génération de texte. Mais pour le scénario de notre application, nous constatons un problème : nous téléchargeons une image, et si nous n'utilisons qu'un modèle de langage, il ne peut pas bien comprendre le contenu de l'image, ce qui peut entraîner des résultats imprécis.
|
||||
|
||||
Nous voulons un modèle capable de transformer une image en description textuelle, ce qui nécessite un modèle de langage visuel (VLM). Dans notre cas, nous utiliserons un modèle VLM pour générer des descriptions de points de vente de produits afin d'améliorer l'expérience utilisateur.
|
||||
|
||||
Pour plus de simplicité, nous utiliserons l'API fournie par la plateforme cloud [SiliconFlow](https://cloud.siliconflow.cn/me) pour l'intégration de l'API de conversion image-texte.
|
||||
|
||||
::: details Pour en savoir plus : Qu'est-ce que SiliconFlow ?
|
||||
**SiliconFlow** est une plateforme chinoise bien connue d'agrégation de modèles IA, offrant des services d'API pour de nombreux modèles de langage et de vision grand public et open source.
|
||||
|
||||
**Caractéristiques de la plateforme :**
|
||||
|
||||
- **Support multi-modèles** : intègre de nombreux modèles IA populaires, notamment DeepSeek, Qwen, Llama et d'autres modèles open source
|
||||
- **Optimisation technique** : optimisation d'inférence pour les modèles open source, offrant des services API à faible latence et haute concurrence
|
||||
- **Compatibilité d'interface** : fournit des API compatibles avec le format OpenAI pour une intégration facile
|
||||
- **Paiement à l'usage** : facturation à l'utilisation
|
||||
|
||||
SiliconFlow est relativement mature dans les services d'inférence de modèles open source et constitue un choix courant pour l'utilisation de modèles IA open source chinois.
|
||||
:::
|
||||
|
||||
Sur la page d'accueil de SiliconFlow, vous pouvez voir qu'il y a beaucoup de modèles disponibles. Trouvez le filtre dans le coin supérieur gauche, cliquez pour l'ouvrir, sélectionnez le tag « vision », et vous verrez plusieurs modèles de conversion image-texte, comme GLM-4.6V de Zhipu ou Qwen3-VL.
|
||||
|
||||
|
||||
|
||||
Vous pouvez choisir n'importe lequel pour tester, ici nous prenons `Qwen/Qwen3-VL-8B-Instruct` comme exemple.
|
||||
|
||||
|
||||
|
||||
Accédez à la [plateforme SiliconFlow](https://cloud.siliconflow.cn/me/account/ak), cliquez sur « Nouvelle clé API » dans la section des clés API, et créez une nouvelle clé API.
|
||||
|
||||
Vous pouvez utiliser directement le code ci-dessous comme référence et l'envoyer à l'AI IDE avec votre clé API générée pour l'intégration fonctionnelle.
|
||||
|
||||
::: details Code de référence pour la conversion image-texte
|
||||
|
||||
```python
|
||||
from openai import OpenAI
|
||||
from typing import Dict, Any, List
|
||||
import base64
|
||||
import os
|
||||
SILICONFLOW_API_KEY: str = ""
|
||||
SILICONFLOW_BASE_URL: str = "https://api.siliconflow.cn/v1/"
|
||||
MODEL_NAME: str = "Qwen/Qwen3-VL-8B-Instruct"
|
||||
|
||||
def encode_image(image_path: str) -> str:
|
||||
with open(image_path, "rb") as image_file:
|
||||
return base64.b64encode(image_file.read()).decode('utf-8')
|
||||
|
||||
def get_vlm_completion(client: OpenAI, messages: List[Dict[str, Any]]) -> str:
|
||||
response = client.chat.completions.create(
|
||||
model=MODEL_NAME,
|
||||
messages=messages,
|
||||
max_tokens=512,
|
||||
temperature=0.7,
|
||||
top_p=0.7,
|
||||
frequency_penalty=0.5,
|
||||
stream=False,
|
||||
n=1
|
||||
)
|
||||
return response.choices[0].message.content
|
||||
|
||||
def caption_image(image_path: str) -> str:
|
||||
base64_image = encode_image(image_path)
|
||||
messages = [
|
||||
{
|
||||
"role": "user",
|
||||
"content": [
|
||||
{
|
||||
"type": "text",
|
||||
"text": "Please describe this image in detail."
|
||||
},
|
||||
{
|
||||
"type": "image_url",
|
||||
"image_url": {
|
||||
"url": f"data:image/jpeg;base64,{base64_image}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
client = OpenAI(
|
||||
api_key=SILICONFLOW_API_KEY,
|
||||
base_url=SILICONFLOW_BASE_URL
|
||||
)
|
||||
|
||||
return get_vlm_completion(client, messages)
|
||||
|
||||
image_path = "images.jpg"
|
||||
caption = caption_image(image_path)
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
Dans ce scénario, nous allons directement demander à l'AI IDE de nous aider à implémenter la fonction de génération automatique de texte de points de vente et de mots-clés à partir des images téléchargées, comme suit :
|
||||
|
||||
```
|
||||
Sur la base de l'API de conversion image-texte ci-dessous, aide-moi à implémenter la fonction de génération automatique de texte de points de vente et de mots-clés à partir des images téléchargées.
|
||||
|
||||
<Collez ici le code de référence et la clé>
|
||||
```
|
||||
|
||||
Résultat final :
|
||||
|
||||
|
||||
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="2" :items="[
|
||||
{ title: 'Bases de l\'API', description: 'Comprendre les concepts clés et les règles de sécurité' },
|
||||
{ title: 'Intégration texte', description: 'Pratique de génération de texte avec DeepSeek' },
|
||||
{ title: 'Intégration image', description: 'Compréhension et génération d\'images VLM' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
# 4. Intégrer l'API de génération d'images : Seedream Jimeng
|
||||
|
||||
Dans les parties précédentes, nous avons principalement traité des tâches liées au texte. Nous allons maintenant essayer d'intégrer la génération d'images, en prenant en charge la génération d'images à partir de descriptions textuelles ou la modification d'images.
|
||||
|
||||
::: info ℹ️ Pour aller plus loin sur les principes
|
||||
Si vous voulez en savoir plus sur les principes, consultez l'annexe : [Introduction à la génération d'images](/fr-fr/appendix/8-artificial-intelligence/image-generation).
|
||||
|
||||
::: details Pour en savoir plus : Qu'est-ce que [Seedream Jimeng](https://seed.bytedance.com/en/seedream4_5) ?
|
||||
|
||||
|
||||
|
||||
> Vous connaissez peut-être déjà Nano Banana (développé par Google), mais vous ne devriez pas manquer Seedream. Seedream 4.5 est le nouveau modèle de création d'images de ByteDance. Il intègre la génération et l'édition d'images dans une architecture unifiée, ce qui lui permet de gérer de manière flexible des tâches multimodales complexes comme la génération basée sur la connaissance, le raisonnement complexe et la cohérence de référence. De plus, sa vitesse d'inférence est bien supérieure à celle de la génération précédente, et il peut générer des images haute définition jusqu'à 4K.
|
||||
>
|
||||
> 
|
||||
> 
|
||||
|
||||
**Principales capacités :**
|
||||
|
||||
- **Texte vers image** : générer des images à partir de descriptions textuelles, prenant en charge plusieurs styles (réaliste, cartoon, encre, cyberpunk, etc.)
|
||||
- **Transfert de style** : convertir une image dans un style artistique spécifié
|
||||
- **Variantes d'images** : générer de nouvelles images de style similaire à partir d'une image de référence
|
||||
- **Amélioration de la résolution** : augmenter la clarté et les détails des images
|
||||
- **Édition d'images** : modifier et retoucher des images existantes via des instructions en langage naturel
|
||||
|
||||
**Pourquoi choisir Seedream ?**
|
||||
|
||||
- **Accès stable depuis la Chine** : vitesse d'accès rapide et latence faible
|
||||
- **Excellents résultats** : performances stables et fiables dans les scénarios de commerce électronique et de création de visuels
|
||||
- **Optimisé pour le chinois** : meilleure compréhension des prompts en chinois, adapté aux utilisateurs chinois
|
||||
- **Rapidité** : efficacité de génération élevée, temps de réponse court
|
||||
- **Qualité stable** : génération d'images haute définition jusqu'à 4K
|
||||
|
||||
**Scénarios d'application typiques :**
|
||||
|
||||
- Commerce électronique : génération d'images principales, de visuels pour les pages de détails, de posters promotionnels
|
||||
- Réseaux sociaux : génération d'avatars, de stickers, d'images d'accompagnement
|
||||
- Design : création rapide de concepts, de visuels, d'images d'arrière-plan
|
||||
- Marketing : création de publicités, de bannières d'événements, de posters de fêtes
|
||||
|
||||
**Complémentarité avec Qwen3 VL :**
|
||||
|
||||
Ces deux API peuvent être utilisées en chaîne : d'abord utilisez Qwen3 VL pour analyser l'image de référence et comprendre le contenu visuel, puis utilisez Seedream pour générer une nouvelle image basée sur le prompt dérivé de l'analyse de l'image de référence.
|
||||
:::
|
||||
|
||||
Beaucoup de « posters IA / images principales IA / images de personnages IA » que vous voyez sur Douyin, Bilibili ou YouTube utilisent essentiellement la technologie présentée ici. Ce que vous devez faire est simple : organiser l'entrée de l'utilisateur en une phrase, envoyer une requête à l'API d'image, puis afficher l'image renvoyée. Le modèle utilisé ici s'appelle un modèle de génération d'images / d'édition d'images.
|
||||
|
||||
Nous allons démontrer progressivement comment intégrer l'API Seedream dans votre projet (avec l'aide de l'AI IDE).
|
||||
|
||||
[Accédez à la page d'accueil](https://www.volcengine.com/experience/ark?launch=seedream) puis cliquez sur connexion.
|
||||
|
||||
|
||||
|
||||
Après connexion, trouvez l'option de recharge dans le coin supérieur droit.
|
||||
|
||||
|
||||
|
||||
La recharge nécessite une vérification d'identité.
|
||||
|
||||
|
||||
|
||||
Une fois la vérification réussie, vous pouvez [recharger 1 yuan pour tester](https://console.volcengine.com/finance/fund/recharge).
|
||||
|
||||
Retournez à la [page initiale](https://www.volcengine.com/experience/ark?launch=seedream) et cliquez sur Accès API.
|
||||
|
||||
|
||||
|
||||
Créez d'abord une clé API, puis cliquez sur les options de sélection.
|
||||
|
||||
|
||||
|
||||
Cela vous amènera à l'étape 2. Ici, vous devez confirmer que le service appelé est Seedream 4.5 et copier l'exemple d'appel fourni. (Les captures d'écran ici datent d'une période antérieure, la version du modèle affichée est donc encore la 4.0)
|
||||
|
||||
|
||||
|
||||
Une fois que vous avez la clé API et l'exemple d'appel, vous pouvez les coller directement dans l'AI IDE pour qu'il génère la démo frontend ou intègre la capacité dans votre prototype existant. Notez que dans l'image, vous pouvez choisir entre le mode texte-vers-image ou la génération d'une image à partir de plusieurs images. Vous devez sélectionner le code de référence en fonction de vos besoins actuels.
|
||||
|
||||
::: warning ⚠️ Remarque importante
|
||||
L'exemple par défaut est relativement complexe. N'oubliez pas de désactiver **« Ajouter un filigrane »** et **« Réponse en flux continu »** pour éviter de générer un filigrane et de provoquer des échecs de requête.
|
||||
:::
|
||||
|
||||
Comme nous utilisons ensuite le mode de génération à partir d'images de référence, nous allons d'abord vers la fonctionnalité de génération d'une image à partir de plusieurs images. Le code de référence est le suivant :
|
||||
|
||||
```
|
||||
curl -X POST https://ark.cn-beijing.volces.com/api/v3/images/generations \
|
||||
-H "Content-Type: application/json" \
|
||||
-H "Authorization: Bearer xxxxxxx" \
|
||||
-d '{
|
||||
"model": "doubao-seedream-4-5-251128",
|
||||
"prompt": "Remplacer la tenue de l'image 1 par celle de l'image 2",
|
||||
"image": ["https://ark-project.tos-cn-beijing.volces.com/doc_image/seedream4_imagesToimage_1.png", "https://ark-project.tos-cn-beijing.volces.com/doc_image/seedream4_imagesToimage_2.png"],
|
||||
"sequential_image_generation": "disabled",
|
||||
"response_format": "url",
|
||||
"size": "2K",
|
||||
"stream": false,
|
||||
"watermark": true
|
||||
}'
|
||||
```
|
||||
|
||||
Avec le code de référence d'image, nous demandons à l'AI IDE de prendre en charge les tâches d'image courantes dans le commerce électronique :
|
||||
|
||||
```
|
||||
Sur la base de l'API ci-dessous, aide-moi à implémenter les fonctionnalités courantes du commerce électronique dans ce projet (par exemple, la génération de posters, la génération d'images principales pour Douyin, etc.)
|
||||
|
||||
<Collez ici la clé API et le code d'édition d'image>
|
||||
```
|
||||
|
||||
Résultat de l'implémentation :
|
||||
|
||||
|
||||
|
||||
Il est à noter que la génération d'images peut rencontrer des problèmes inhabituels. Il est recommandé de demander à l'AI IDE d'afficher les messages d'erreur complets pour faciliter le copier-coller et la modification (sinon, vous risquez de voir s'afficher « échec de la génération » à répétition sans savoir pourquoi). Par exemple, vous pouvez dire :
|
||||
|
||||
```
|
||||
N'affiche pas seulement « échec de la génération d'image », affiche systématiquement la raison complète de l'échec, comme une incompatibilité d'image, une erreur de requête, un délai d'attente, etc. !
|
||||
```
|
||||
|
||||
Parfois, après une modification, la mise à jour n'est pas appliquée à la page web. Si vous constatez que la page continue de générer des erreurs après plusieurs modifications, vous pouvez aussi essayer de dire directement à l'AI IDE : redémarre ce projet.
|
||||
|
||||
Dans le contexte du commerce électronique, nous pourrions vouloir que les vêtements téléchargés par l'utilisateur s'habillent automatiquement sur un personnage, ou que des images de vente attrayantes et des posters soient générés automatiquement pour les produits. Ici, le prompt que nous avons essayé consistait à lui faire générer un poster pour le commerce électronique :
|
||||
|
||||
|
||||
|
||||
Vous pouvez utiliser l'API texte-vers-image ou image-vers-image pour implémenter différentes fonctionnalités en fonction de vos scénarios métier imaginés.
|
||||
|
||||
## Autres services de génération d'images
|
||||
|
||||
Voici d'autres options. Il est recommandé de d'abord réussir l'intégration avec Qwen, puis de remplacer par les services suivants en fonction des résultats et des coûts (choisissez en fonction de votre expérience réelle).
|
||||
|
||||
### Intégration Recraft
|
||||
|
||||
Si votre prototype est plus orienté vers la « production de design » (par exemple, la génération d'illustrations de style de marque, de posters marketing, de ressources vectorielles), Recraft peut être plus adapté. La méthode d'intégration est identique à la section précédente : **obtenir la clé + trouver l'exemple officiel + demander à l'AI IDE d'intégrer l'exemple dans votre bouton/page**.
|
||||
|
||||
::: details Pour en savoir plus : Qu'est-ce que Recraft ?
|
||||
|
||||
> Recraft est un outil IA pour les designers, illustrateurs et professionnels du marketing -- fondé en 2022 aux États-Unis, basé à Londres. Il aide à générer/itérer des visuels (images, art vectoriel, graphiques 3D), avec des avantages comme une sortie de haute qualité (pour toute taille/longueur de texte), un positionnement précis des éléments et un design cohérent de marque. Approuvé par plus de 3 millions d'utilisateurs dans 200 pays (dont Ogilvy et Netflix), avec plus de 350 millions d'images créées, son équipe vise à en faire un outil indispensable pour les designers, en s'assurant que les créateurs gardent le contrôle de leur flux de travail assisté par IA.
|
||||
>
|
||||
> 
|
||||
> 
|
||||
|
||||
Il faut d'abord trouver l'[entrée API](https://www.recraft.ai/profile/api) pour obtenir une clé API.
|
||||
|
||||
Comme il n'y a pas de crédit gratuit ici, nous devons recharger 1 000 crédits nous-mêmes. Ce site accepte Alipay et WeChat Pay, il est donc facile d'obtenir 1 000 crédits (attention : ne rechargez pas plus que nécessaire).
|
||||
|
||||
|
||||
|
||||
Ensuite, nous suivons toujours la même méthode : aller dans la documentation officielle pour trouver l'exemple de requête correspondant :
|
||||
|
||||
- <https://www.recraft.ai/docs/api-reference/getting-started>
|
||||
- <https://www.recraft.ai/docs/api-reference/usage>
|
||||
- <https://www.recraft.ai/docs/api-reference/guides>
|
||||
|
||||
:::
|
||||
|
||||
### Intégration Qwen Image / Qwen Image Edit
|
||||
|
||||
Si vous souhaitez utiliser une approche plus simple pour intégrer un service de génération d'images, vous pouvez envisager Qwen Image (Tongyi Wanxiang). L'approche reste la même : considérez-le comme une « API de génération d'images » et connectez-la à votre bouton de prototype.
|
||||
|
||||
::: details Pour en savoir plus : Qwen Image / Qwen Image Edit ?
|
||||
|
||||
**Qwen Image** (aussi appelé Tongyi Wanxiang) est la série de modèles de génération d'images de l'équipe Tongyi d'Alibaba Cloud, comprenant deux modèles principaux :
|
||||
|
||||
**1. Qwen Image -- modèle texte-vers-image (Text-to-Image)**
|
||||
|
||||
Génère de nouvelles images à partir de descriptions textuelles. Vous entrez un prompt, le modèle comprend votre intention et génère une image correspondante.
|
||||
|
||||
|
||||
|
||||
**Principales capacités :**
|
||||
|
||||
- **Texte vers image** : générer des images à partir de descriptions textuelles, prenant en charge plusieurs styles (réaliste, cartoon, encre, cyberpunk, etc.)
|
||||
- **Transfert de style** : convertir une image dans un style artistique spécifié
|
||||
- **Variantes d'images** : générer de nouvelles images de style similaire à partir d'une image de référence
|
||||
- **Amélioration de la résolution** : augmenter la clarté et les détails des images
|
||||
|
||||
**2. Qwen Image Edit -- modèle image-vers-image (Image-to-Image)**
|
||||
|
||||
Modifie et retouche des images existantes via des instructions en langage naturel. Le modèle comprend votre intention de modification et génère le résultat.
|
||||
|
||||
**Principales capacités :**
|
||||
|
||||
- **Remplacement partiel** : remplacer un objet ou un personnage dans une image (par exemple « changer le fond pour la mer »)
|
||||
- **Suppression d'éléments** : retirer les éléments indésirables d'une image
|
||||
- **Conversion de style** : ajouter des filtres ou des effets artistiques à une image
|
||||
- **Extension d'image** : étendre les bords d'une image et générer du nouveau contenu
|
||||
- **Retouche intelligente** : embellissement automatique, ajustement de la lumière et des ombres, correction de défauts
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
**Pourquoi choisir la série Qwen Image ?**
|
||||
|
||||
- **Optimisé pour le chinois** : meilleure compréhension des prompts en chinois, adapté aux utilisateurs chinois
|
||||
- **Coût réduit** : prix plus abordable par rapport aux concurrents internationaux
|
||||
- **Rapidité** : efficacité de génération élevée, temps de réponse court
|
||||
- **Qualité stable** : performances stables et fiables dans les scénarios de commerce électronique et de création de visuels
|
||||
- **Styles variés** : prise en charge de nombreux styles artistiques et effets créatifs
|
||||
|
||||
**Scénarios d'application typiques :**
|
||||
|
||||
- Commerce électronique : génération d'images principales, de visuels pour les pages de détails, de posters promotionnels
|
||||
- Réseaux sociaux : génération d'avatars, de stickers, d'images d'accompagnement
|
||||
- Design : création rapide de concepts, de visuels, d'images d'arrière-plan
|
||||
- Marketing : création de publicités, de bannières d'événements, de posters de fêtes
|
||||
:::
|
||||
|
||||
Consultez le site [SiliconFlow](https://siliconflow.cn/). Sur le côté gauche, il y a une section « Playground » où vous pouvez tester différents modèles sans appel API. En haut de la page, il y a un bouton « Filters » ; cliquez pour filtrer la liste de modèles.
|
||||
|
||||
Si vous sélectionnez « Image », vous ne verrez que les modèles de génération d'images actuellement supportés. Dans ce cas, nous utiliserons Qwen/Qwen-Image.
|
||||
|
||||
|
||||
|
||||
Une fois tout configuré, vous devez vous référer à la documentation correspondante de l'API de génération d'images. Vous pouvez trouver la section « API Reference » sur la page de documentation officielle. Cliquez dessus, puis naviguez vers la [section API de génération d'images](https://docs.siliconflow.cn/cn/api-reference/images/images-generations) et trouvez l'exemple de requête correspondant.
|
||||
|
||||
Vous pouvez envoyer l'exemple de requête suivant et votre clé API à l'AI IDE pour intégrer la fonctionnalité de génération d'images.
|
||||
|
||||
```bash
|
||||
curl --request POST \
|
||||
--url https://api.siliconflow.cn/v1/images/generations \
|
||||
--header 'Authorization: Bearer <token>' \
|
||||
--header 'Content-Type: application/json' \
|
||||
--data '
|
||||
{
|
||||
"model": "Qwen/Qwen-Image-Edit-2509",
|
||||
"prompt": "an island near sea, with seagulls, moon shining over the sea, light house, boats int he background, fish flying over the sea"
|
||||
}
|
||||
'
|
||||
```
|
||||
|
||||
Ici, le modèle peut être Qwen/Qwen-Image ou Qwen/Qwen-Image-Edit-2509.
|
||||
|
||||
::: details Code de référence pour l'édition d'images
|
||||
|
||||
Copiez le code ci-dessous et la clé, puis envoyez-les ensemble à l'AI IDE :
|
||||
|
||||
```python
|
||||
import requests
|
||||
import os
|
||||
from typing import Dict, Any, Optional
|
||||
|
||||
SILICONFLOW_API_KEY: str = ""
|
||||
SILICONFLOW_BASE_URL: str = "https://api.siliconflow.cn/v1/images/generations"
|
||||
QWEN_IMAGE_EDIT_MODEL: str = "Qwen/Qwen-Image-Edit-2509"
|
||||
|
||||
def generate_image_edit(
|
||||
prompt: str,
|
||||
image: Optional[str] = None,
|
||||
image2: Optional[str] = None,
|
||||
image3: Optional[str] = None,
|
||||
negative_prompt: Optional[str] = None,
|
||||
cfg: Optional[float] = 4.0,
|
||||
seed: Optional[int] = None
|
||||
) -> Optional[Dict[str, Any]]:
|
||||
payload: Dict[str, Any] = {
|
||||
"model": QWEN_IMAGE_EDIT_MODEL,
|
||||
"prompt": prompt,
|
||||
}
|
||||
if image:
|
||||
payload["image"] = image
|
||||
if image2:
|
||||
payload["image2"] = image2
|
||||
if image3:
|
||||
payload["image3"] = image3
|
||||
if negative_prompt:
|
||||
payload["negative_prompt"] = negative_prompt
|
||||
if cfg is not None:
|
||||
payload["cfg"] = cfg
|
||||
if seed is not None:
|
||||
payload["seed"] = seed
|
||||
|
||||
headers: Dict[str, str] = {
|
||||
"Authorization": f"Bearer {SILICONFLOW_API_KEY}",
|
||||
"Content-Type": "application/json"
|
||||
}
|
||||
|
||||
try:
|
||||
response = requests.post(SILICONFLOW_BASE_URL, json=payload, headers=headers)
|
||||
response.raise_for_status()
|
||||
return response.json()
|
||||
except requests.exceptions.RequestException as e:
|
||||
print(f"Error generating image: {e}")
|
||||
return None
|
||||
|
||||
def save_image_from_url(image_url: str, output_path: str = "image.png") -> bool:
|
||||
try:
|
||||
response = requests.get(image_url)
|
||||
response.raise_for_status()
|
||||
os.makedirs(os.path.dirname(output_path) if os.path.dirname(output_path) else ".", exist_ok=True)
|
||||
with open(output_path, "wb") as f:
|
||||
f.write(response.content)
|
||||
print(f"Image saved successfully to: {output_path}")
|
||||
return True
|
||||
except requests.exceptions.RequestException as e:
|
||||
print(f"Error downloading image: {e}")
|
||||
return False
|
||||
except Exception as e:
|
||||
print(f"Error saving image: {e}")
|
||||
return False
|
||||
|
||||
prompt: str = "Transformer le ciel en soirée, avec la lune et les étoiles, dans un style onirique"
|
||||
negative_prompt: str = "flou, basse qualité, déformé"
|
||||
image_url: str = "https://inews.gtimg.com/om_bt/Os3eJ8u3SgB3Kd-zrRRhgfR5hUvdwcVPKUTNO6O7sZfUwAA/641"
|
||||
image2_url: Optional[str] = None
|
||||
image3_url: Optional[str] = None
|
||||
|
||||
cfg: float = 4.0
|
||||
seed: int = 12345
|
||||
output_path: str = "edited_image.png"
|
||||
|
||||
print(f"Generating edited image with prompt: {prompt}")
|
||||
print(f"Input image: {image_url}")
|
||||
print(f"CFG: {cfg}, Seed: {seed}")
|
||||
print("-" * 50)
|
||||
|
||||
result = generate_image_edit(
|
||||
prompt=prompt,
|
||||
image=image_url,
|
||||
image2=image2_url,
|
||||
image3=image3_url,
|
||||
negative_prompt=negative_prompt,
|
||||
cfg=cfg,
|
||||
seed=seed
|
||||
)
|
||||
|
||||
if result and "images" in result:
|
||||
images = result["images"]
|
||||
if images and len(images) > 0:
|
||||
image_url_result = images[0]["url"]
|
||||
print(f"Image edit generated successfully. URL: {image_url_result}")
|
||||
success = save_image_from_url(image_url_result, output_path)
|
||||
if success:
|
||||
print(f"Image saved to: {output_path}")
|
||||
else:
|
||||
print("Failed to save image to local file")
|
||||
else:
|
||||
print("No images found in response")
|
||||
else:
|
||||
print("Image generation failed")
|
||||
if result:
|
||||
print(f"Response: {result}")
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
# Annexe : Comment trouver « le modèle le plus puissant actuellement »
|
||||
|
||||
Le développement des modèles de texte (souvent appelés « grands modèles de langage ») est très rapide, et nous devons toujours nous assurer que nous utilisons l'un des modèles les plus performants. Grâce aux deux sites suivants, vous pouvez facilement voir « quels modèles sont les plus utilisés et les mieux notés actuellement ».
|
||||
|
||||
En général, ces sites peuvent être compris comme des **« arènes de modèles »** : ils mettent côte à côte les résultats de deux modèles, et vous votez pour celui que vous préférez. Plus un modèle reçoit de votes, plus il est probablement considéré comme « meilleur ».
|
||||
|
||||
De plus, vous pouvez occasionnellement voir des modèles anonymes mystérieux (« Unknown Model ») dans ces arènes. Cela signifie généralement que quelqu'un a discrètement introduit un « modèle de test interne » pour un test en aveugle, et vous pourriez avoir l'opportunité d'expérimenter des capacités plus avancées avant les autres.
|
||||
|
||||
## LMArena
|
||||
|
||||
Site : <https://lmarena.ai/>
|
||||
|
||||
LMArena est plus adapté pour déterminer « quel modèle est préféré par la majorité ». Plus il y a de votes et plus le score est élevé, plus le modèle est probablement fiable dans les scénarios d'utilisation réels.
|
||||
|
||||
Une utilisation simple est de :
|
||||
|
||||
1. Consulter directement le classement (Leaderboard)
|
||||
2. Choisir d'abord une direction (par exemple, conversation générale / programmation / vision)
|
||||
3. Choisir parmi les 3 premiers celui que vous pouvez utiliser (accès disponible, prix acceptable, latence acceptable)
|
||||
|
||||
|
||||
|
||||
## Artificial Analysis
|
||||
|
||||
Site : <https://artificialanalysis.ai/>
|
||||
|
||||
Artificial Analysis est plus adapté pour comparer « qualité / prix / vitesse » dans un même tableau. Vous pouvez l'utiliser comme tableau de référence pour la sélection de modèles.
|
||||
|
||||
L'utilisation courante est de :
|
||||
|
||||
1. Trouver la catégorie de modèles qui vous intéresse (texte / génération d'images, etc.)
|
||||
2. Consulter les indicateurs de qualité (Quality) + prix (Price) + latence/débit (Latency/Throughput)
|
||||
3. Choisir celui qui offre le meilleur rapport qualité-prix pour votre produit
|
||||
|
||||
::: tip ✅ Conseil
|
||||
Ne vous disputez pas au feeling sur « lequel est le plus puissant ». Une approche plus fiable est de tester 2 à 3 modèles avec les mêmes entrées, puis de combiner les classements et les prix pour prendre une décision.
|
||||
:::
|
||||
|
||||
## Résumé
|
||||
|
||||
Lors de l'intégration de divers services IA, il n'est pas nécessaire de considérer les API comme trop complexes. Si vous maîtrisez les concepts clés suivants, vous pourrez gérer la plupart des scénarios :
|
||||
|
||||
**L'essence de l'API est un pont de communication.** Ce qu'elle fait est simple : envoyer votre requête et ramener la réponse du modèle. Vous n'avez pas besoin de savoir ce qui se passe en coulisses, il suffit d'organiser correctement le format de la requête.
|
||||
|
||||
**Le SDK est une encapsulation de l'API.** Si l'API est l'interface brute, le SDK est une boîte à outils prête à l'emploi -- il s'occupe des détails fastidieux comme la signature des requêtes, la gestion des erreurs et la validation des paramètres. Dans le développement quotidien, privilégiez le SDK plutôt que l'appel direct à l'API, cela vous évitera bien des tracas.
|
||||
|
||||
**Quand vous lisez la documentation, concentrez-vous sur trois choses :** l'adresse du service (endpoint), les identifiants (clé API) et comment remplir les paramètres d'appel. Une fois ces trois points clarifiés, la mise en marche n'est qu'une question de temps.
|
||||
|
||||
Le reste du travail sera accompli par l'IDE et les outils de développement modernes. Concentrez-vous sur votre logique métier, laissez le travail d'appel de bas niveau aux SDK et aux chaînes d'outils matures.
|
||||
|
||||
# 5. 📚 Devoir : Intégrer votre première capacité IA
|
||||
|
||||
<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
|
||||
<template #header>
|
||||
<div style="font-weight: bold; font-size: 16px;">Défi : Intégrer une capacité IA dans votre espace de travail</div>
|
||||
</template>
|
||||
|
||||
<p>
|
||||
En vous référant aux prompts et au contenu de cette leçon, complétez un cycle complet :
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<strong>Pratique complète en boucle fermée</strong>
|
||||
<ul>
|
||||
<li>Choisissez et intégrez un service IA (LLM / texte-vers-image / image-vers-image) -> Implémentez l'interaction frontend-backend -> Intégrez dans votre prototype</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<strong>Partage des résultats</strong>
|
||||
<ul>
|
||||
<li>Capturez d'écran votre page fonctionnelle et partagez-la avec le groupe</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<strong>Question de réflexion</strong>
|
||||
<ul>
|
||||
<li>Réservez de l'espace pour le prochain chapitre « Projet complet », réfléchissez à l'avance : comment combiner ces capacités IA pour créer une fonctionnalité intéressante ?</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</el-card>
|
||||
|
||||
## Prochaine étape
|
||||
|
||||
Dans le prochain chapitre, nous allons relier ces capacités IA dispersées et créer un produit complet basé sur un scénario métier réel :
|
||||
|
||||
- Connecter les étapes de planification de contenu, de mise en ligne de produits et d'analyse de données en un flux métier complet
|
||||
- Intégrer les capacités IA apprises dans ce chapitre (génération de textes publicitaires LLM, texte-vers-image, édition d'images) dans les étapes métier réelles
|
||||
- Réaliser un « espace de travail IA commerce électronique » véritablement utilisable, et non une démo isolée
|
||||
|
||||
<RelatedArticlesSection
|
||||
title="Articles connexes"
|
||||
description="Parcours d'apprentissage recommandé d'une capacité IA unique à un flux produit complet."
|
||||
:items="relatedArticles"
|
||||
/>
|
||||
@@ -0,0 +1 @@
|
||||
../../../../zh-cn/stage-1/introduction-to-ai-ide/images
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,275 @@
|
||||
---
|
||||
title: "De l'idée au produit AI - Parcours d'apprentissage Easy-Vibe"
|
||||
description: "Parcours d'apprentissage complet de la programmation AI : de zéro au développement full-stack. Maîtrisez le Vibe Coding, Claude Code, Cursor et d'autres outils IDE AI, apprenez la réflexion produit, le développement full-stack et l'intégration de capacités AI."
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { relatedArticlesMap } from '@theme/data/relatedArticles'
|
||||
|
||||
const relatedArticles = relatedArticlesMap['fr-fr/stage-1/learning-map'] ?? []
|
||||
</script>
|
||||
|
||||
# De l'idée au produit AI
|
||||
|
||||
::: info Remerciements spéciaux
|
||||
Un grand merci aux étudiants de l'**Université Tsinghua, Campus international de Shenzhen** pour leurs tests, retours et soutien de ce cours ! Vos avis et contributions ont permis d'améliorer ce cours. [👉 Voir la liste complète des contributeurs](https://github.com/datawhalechina/easy-vibe#-contributing--contributors)
|
||||
:::
|
||||
|
||||
Autrefois, créer un logiciel était un processus très exigeant : il fallait connaître la programmation, comprendre les algorithmes et avoir des années d'expérience en projet.
|
||||
Aujourd'hui, tout a changé. Si vous avez une idée, l'IA peut écrire le code pour vous.
|
||||
|
||||
C'est un changement majeur : **les langages de programmation deviennent des langages naturels**.
|
||||
|
||||
L'apparition des grands modèles de langage (LLM) a fait en sorte que le développement n'est plus « l'apanage des experts techniques », mais un outil que tout le monde peut prendre en main. Ce qui était autrefois le plus difficile — « comment écrire du code » — est devenu ce qui est le plus difficile aujourd'hui : « **que voulez-vous créer** ».
|
||||
|
||||
> **Qu'est-ce que le Vibe Coding ?**
|
||||
> En termes simples, c'est « programmer en parlant ». Le Vibe Coding signifie que vous pouvez réaliser un projet de programmation en vous appuyant uniquement sur des conversations avec l'IA, plutôt que d'écrire du code directement.
|
||||
|
||||
Bien sûr, faire en sorte que l'IA écrive du code n'est que la première étape. Pour créer un produit véritablement utilisable, vous rencontrerez d'autres défis :
|
||||
- Comment faire en sorte que l'IA écrive un code propre et maintenable ?
|
||||
- Comment assembler des fragments de code en une application fonctionnelle ?
|
||||
- Comment mettre une application en ligne et la faire utiliser par de vrais utilisateurs ?
|
||||
- Comment intégrer des capacités AI comme la génération de texte et la reconnaissance d'images dans votre produit ?
|
||||
|
||||
Ce cours vous aidera à trouver des réponses à ces questions.
|
||||
|
||||
Que vous soyez étudiant, enseignant, médecin, ouvrier, ou toute personne sans aucune connaissance technique — sans avoir besoin d'apprendre la programmation pendant des années, vous pourrez en deux semaines créer un prototype fonctionnel et démontrable.
|
||||
|
||||
| Votre profil | Ce que ce cours peut vous apporter |
|
||||
|---------|-------------|
|
||||
| Étudiant | Devoirs, concours, création d'entreprise : réalisez vos projets vous-même, sans dépendre de personne |
|
||||
| Professionnel | Automatisez les tâches répétitives, améliorez votre efficacité, voire développez un projet parallèle |
|
||||
| Chef de produit / Designer | Vos idées ne restent plus sur papier : créez rapidement des démos pour votre patron ou vos clients |
|
||||
| Entrepreneur / PME | Validez vos idées à moindre coût, créez un MVP sans dépenser des milliers en sous-traitance |
|
||||
| Enseignant / Formateur | Créez des outils pédagogiques, des supports de cours, générez automatiquement des exercices |
|
||||
| Médecin / Avocat / Professionnel | Automatisez vos processus métier, créez vos propres outils d'efficacité |
|
||||
| Tout le monde | Utilisez l'IA pour résoudre des problèmes concrets du quotidien ou professionnel, rendez l'impossible possible |
|
||||
|
||||
À l'ère de l'IA, la capacité d'exécution et les idées sont toujours plus importantes que la technique.
|
||||
|
||||
## Parcours de croissance : de « savoir utiliser l'IA » à « savoir créer des produits AI »
|
||||
|
||||
<div class="stage-intro">
|
||||
<div class="stage-card">
|
||||
<div class="stage-icon">🎮</div>
|
||||
<h3>Débutant</h3>
|
||||
<p class="stage-role">Découvrir la programmation AI</p>
|
||||
<div class="stage-tags">
|
||||
<span>Jeu du serpent</span>
|
||||
<span>Prise en main sans prérequis</span>
|
||||
<span>Première expérience Vibe Coding</span>
|
||||
<span>Génération en quelques minutes</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stage-grid">
|
||||
<div class="stage-card">
|
||||
<div class="stage-icon">🛠️</div>
|
||||
<h3>Première étape</h3>
|
||||
<p class="stage-role">Chef de produit / Operations</p>
|
||||
<div class="stage-tags">
|
||||
<span>IDE AI (Cursor/Claude)</span>
|
||||
<span>Décomposition des besoins & Prototype</span>
|
||||
<span>Intégration de capacités AI</span>
|
||||
<span>Développement complet d'une démo</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stage-card">
|
||||
<div class="stage-icon">💻</div>
|
||||
<h3>Deuxième étape</h3>
|
||||
<p class="stage-role">Développeur junior / Développeur indépendant</p>
|
||||
<div class="stage-tags">
|
||||
<span>De Figma au code</span>
|
||||
<span>Base de données Supabase</span>
|
||||
<span>Intégration de paiement Stripe</span>
|
||||
<span>Base de connaissances Dify</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stage-card">
|
||||
<div class="stage-icon">🚀</div>
|
||||
<h3>Troisième étape</h3>
|
||||
<p class="stage-role">Développeur senior / Architecte</p>
|
||||
<div class="stage-tags">
|
||||
<span>Web/Mini-programmes/Multi-plateforme</span>
|
||||
<span>Outils avancés MCP</span>
|
||||
<span>RAG & LangGraph</span>
|
||||
<span>Mentalité d'ingénieur senior</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.stage-intro {
|
||||
margin: 20px auto;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.stage-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||||
gap: 12px;
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.stage-card {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 10px;
|
||||
padding: 12px;
|
||||
background-color: var(--vp-c-bg-soft);
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.stage-card:hover {
|
||||
transform: translateY(-2px);
|
||||
background-color: var(--vp-c-bg-mute);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
|
||||
border-color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.stage-icon {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 8px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.stage-card h3 {
|
||||
margin: 0 0 4px 0 !important;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.stage-role {
|
||||
margin: 0 0 8px 0 !important;
|
||||
font-size: 0.8rem;
|
||||
color: var(--vp-c-text-2);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.stage-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.stage-tags span {
|
||||
font-size: 0.7rem;
|
||||
padding: 1px 6px;
|
||||
border-radius: 3px;
|
||||
background-color: var(--vp-c-bg-alt);
|
||||
color: var(--vp-c-text-2);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.stage-card:hover .stage-tags span {
|
||||
background-color: var(--vp-c-bg);
|
||||
border-color: var(--vp-c-brand-dimm);
|
||||
color: var(--vp-c-brand-dark);
|
||||
}
|
||||
</style>
|
||||
|
||||
À travers ce parcours d'apprentissage complet, vous acquerrez :
|
||||
|
||||
- **Compétences en développement Vibe Coding :** Maîtrisez la mentalité du Vibe Coding et les outils de codage AI pour multiplier votre efficacité de développement. Au lieu de mémoriser la syntaxe, apprenez à guider l'IA pour qu'elle génère du code de haute qualité.
|
||||
- **Compétences en développement full-stack :** De la conception UI à l'implémentation frontend, de la conception de base de données au développement d'API, du développement local au déploiement cloud, maîtrisez la stack technologique complète des applications Web modernes.
|
||||
- **Intégration de capacités AI :** Apprenez à appeler diverses API AI multimodales, intégrez de manière transparente les capacités AI de texte, image et voix dans vos applications, et construisez des produits intelligents grâce à des technologies comme le RAG.
|
||||
- **Réflexion produit et compétences opérationnelles :** De la recherche utilisateur à la décomposition des besoins, de la conception MVP à l'itération produit, de l'intégration des paiements à la gestion des utilisateurs, formez un cycle complet de développement et d'exploitation de produits.
|
||||
|
||||
# Que pourrez-vous faire après avoir appris ?
|
||||
|
||||
## Première étape : Créer votre premier prototype de produit
|
||||
|
||||
Cette étape est destinée à ceux qui n'ont aucune base en programmation, ou qui n'en ont qu'une petite mais manquent de confiance. Vous n'avez pas besoin d'apprendre d'abord beaucoup de théorie — vous apprenez directement en pratiquant, en utilisant des outils AI pour écrire du code.
|
||||
|
||||
**Après avoir appris, vous pourrez :**
|
||||
- Utiliser des outils de programmation AI pour réaliser indépendamment une application web
|
||||
- Transformer une idée produit en un prototype cliquable et interactif
|
||||
- Ajouter des fonctionnalités AI à votre prototype (par exemple, génération d'images à partir de texte, conversation intelligente)
|
||||
- Savoir comment diagnostiquer et résoudre les erreurs
|
||||
|
||||
En bref, vous serez capable de créer quelque chose qui « fonctionne et peut être montré à d'autres ».
|
||||
|
||||
Nous pouvons d'abord découvrir la programmation AI à travers des petits jeux, puis apprendre à utiliser des outils de programmation AI pour vous aider à écrire du code et corriger les erreurs. Ensuite, en commençant par des pages simples, nous réaliserons progressivement des applications multi-pages interactives, puis ajouterons des fonctionnalités AI comme la génération d'images à partir de texte et les conversations intelligentes. Enfin, vous réaliserez indépendamment un projet complet, donnant à vos idées une véritable chance de se concrétiser.
|
||||
|
||||
# Pourquoi utiliser une approche par projets pour s'entraîner ?
|
||||
|
||||
> **Les défis du monde réel**
|
||||
>
|
||||
> La raison est en fait assez simple : dans l'état actuel de la plupart des étudiants, entrer directement dans le monde professionnel signifierait se faire rudement « corriger » par les projets réels et les patrons / clients. Les scénarios les plus courants dans le monde réel sont plutôt :
|
||||
|
||||
> Votre mentor / patron : Nous devons créer un xxx, l'objectif est d'atteindre l'effet yyy.
|
||||
>
|
||||
> Documentation ? Framework existant ? Spécifications détaillées ? Bien souvent, rien de tout cela n'existe.
|
||||
|
||||
De nombreuses tâches dans le travail réel consistent essentiellement à résoudre des problèmes jamais vus auparavant dans un environnement hautement incertain : les besoins sont flous, les périmètres évoluent, personne ne vous donne de réponse standard. Vous devez chercher vous-même des informations, faire des expériences, construire des prototypes, itérer constamment, et finalement proposer une solution « qui fonctionne, qui est utilisable et qui peut être mise en ligne ».
|
||||
|
||||
Ce que ce cours cherche à faire, c'est de vous donner une « simulation de correction du monde réel » dans un environnement relativement sûr :
|
||||
|
||||
- Par des projets qui semblent difficiles, vous forcer à pratiquer la décomposition de problèmes, la conception de solutions et la recherche autonome d'informations
|
||||
- Par des outils et du code qui ne sont pas « simplifiés à l'extrême », vous apprendre à lire, comprendre et modifier une base de code de taille moyenne à grande
|
||||
- Par un cycle complet de l'idée à la mise en ligne, vous faire vivre le processus complet de création d'un produit de 0 à 1
|
||||
|
||||
À court terme, cet entraînement est effectivement exigeant ; mais à long terme, il augmentera considérablement votre compétitivité dans votre recherche d'emploi et votre évolution professionnelle : vous serez plus capable de supporter la pression, de trouver des percées dans des environnements incertains, et plus capable de transformer l'IA en produits réellement déployés, au lieu de rester au stade des « démos ».
|
||||
|
||||
# L'art de poser des questions : une compétence essentielle à l'ère de l'IA
|
||||
|
||||
À l'ère de l'IA, savoir poser des questions est aussi une « compétence fondamentale ». Pour un même code, une même erreur, **la façon dont vous posez la question détermine presque la qualité de la réponse que l'IA peut donner** : une réponse générique ou une correction étape par étape applicable.
|
||||
|
||||
**Prenez une bonne habitude :** intégrez « poser des questions à l'IA » dans votre flux de développement quotidien : dès que vous ne comprenez pas quelque chose ou que vous êtes bloqué, posez la question immédiatement.
|
||||
|
||||
## Pourquoi est-ce une compétence essentielle ?
|
||||
|
||||
- **Rarement il existe une documentation complète dans la réalité** : la plupart du temps, vous êtes confronté à des besoins imprécis, du code à moitié fini, des messages d'erreur épars
|
||||
- **L'IA est votre mentor et collègue de toujours** : une personne qui sait poser des questions peut en faire un « pair programming de haute qualité »
|
||||
- **La limite de vos capacités est déterminée par votre communication** : plus vous fournissez d'informations clés et plus vous contraignez le format de sortie, plus la réponse sera utilisable
|
||||
|
||||
**Malentendu courant :** poser simplement « pourquoi ça plante ? » ne donnera souvent que des suppositions. Complétez le contexte pour obtenir des solutions actionnables.
|
||||
|
||||
## Comment « nourrir » l'IA en informations : capture d'écran vs copier-coller
|
||||
|
||||
Les deux méthodes fonctionnent, mais pour des usages différents :
|
||||
|
||||
| Méthode | Scénarios appropriés | Points clés |
|
||||
| ------------ | --------- | --------- |
|
||||
| **Copier-coller** | Piles d'erreurs, logs, code, configuration, réponses d'API | Copiez le plus complètement possible, ne vous contentez pas d'une seule ligne clé |
|
||||
| **Capture d'écran** | Problèmes de mise en page UI, anomalies d'interaction, interface d'outil où vous ne trouvez pas un bouton | Capture d'écran complète + annotation des zones importantes, idéalement avec une brève description textuelle |
|
||||
|
||||
::: danger ⚠️ Prérequis important
|
||||
**Tous les modèles AI ne prennent pas en charge l'entrée d'images.** La communication par capture d'écran nécessite que l'IA possède des capacités multimodales (c'est-à-dire la capacité de comprendre et d'analyser des images). Les AI prenant actuellement en charge l'entrée d'images incluent : Claude (Anthropic), GPT-4V/GPT-4o (OpenAI), Gemini (Google), ainsi que certains modèles chinois comme Qwen, ERNIE Bot, etc.
|
||||
|
||||
**Si l'IA que vous utilisez ne prend pas en charge l'entrée d'images**, les captures d'écran ne pourront pas être reconnues. Dans ce cas, utilisez plutôt la méthode du copier-coller de texte.
|
||||
:::
|
||||
|
||||
## Techniques de prompt pour que l'IA « explique bien »
|
||||
|
||||
Si vous ne voulez pas seulement la réponse, mais « comprendre » la réponse, utiliser des instructions similaires à celles ci-dessous améliorera significativement la qualité des explications :
|
||||
|
||||
> **Exemple de question d'apprentissage**
|
||||
>
|
||||
> - « Explique-moi d'abord ce concept en 5 phrases, puis pose-moi quelques questions pour vérifier que j'ai bien compris. »
|
||||
> - « Explique-moi en détail ce message d'erreur, je ne comprends pas pourquoi cela plante. »
|
||||
|
||||
# J'ai persévéré longtemps mais je n'y arrive toujours pas, je veux abandonner
|
||||
|
||||
C'est peut-être votre méthode de persévérance qui n'est pas la bonne. Ne vous débattez pas seul dans le noir — venez discuter avec les auteurs et les assistants : exposez honnêtement les méthodes que vous avez déjà essayées, les blocages spécifiques que vous rencontrez, et votre état psychologique actuel. Très souvent, un léger ajustement de direction ou l'ajout d'une connaissance clé vous permettra de continuer à avancer.
|
||||
|
||||
# Je trouve que certains aspects du tutoriel ne sont pas bien conçus
|
||||
|
||||
N'hésitez pas à contacter les auteurs, à soumettre une issue, ou à faire part de vos retours dans le groupe ou en cours. Nous espérons vraiment travailler avec vous pour perfectionner ce tutoriel : ce qui n'est pas clair, ce qui donne une mauvaise expérience, ce qui vous fait perdre du temps inutilement — tout cela peut être signalé franchement. Plus les retours sont authentiques et spécifiques, plus ils aideront les futurs apprenants à éviter les pièges.
|
||||
|
||||
# Références
|
||||
|
||||
- [Université de Nanking, Département d'informatique, Fondamentaux des systèmes informatiques, Travaux pratiques](https://nju-projectn.github.io/ics-pa-gitbook/ics2025/)
|
||||
|
||||
<RelatedArticlesSection
|
||||
title="Que pouvez-vous apprendre ensuite"
|
||||
description="Continuez à progresser selon le parcours « de savoir utiliser l'IA à savoir créer des produits »."
|
||||
:items="relatedArticles"
|
||||
/>
|
||||
Reference in New Issue
Block a user