> ## Documentation Index
> Fetch the complete documentation index at: https://docs.replit.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Vibe coding 101
> Apprenez l'état d'esprit du vibe coding : commencer avec un objectif, construire par petites étapes, gérer le contexte, réviser les résultats et améliorer avec des retours.
export const YouTubeEmbed = ({videoId, title = "YouTube video", startAt}) => {
if (!videoId) {
return null;
}
let url = "https://www.youtube.com/embed/" + videoId;
if (startAt) {
url = url + "?start=" + startAt;
}
return
;
};
export const AiPrompt = ({children}) => {
return
{children}
;
};
Le vibe coding est une façon plus rapide de passer d'une idée à un logiciel. Au lieu de commencer par le code, vous commencez par décrire ce qui devrait exister, puis vous utilisez l'IA pour aider à transformer cette direction en une application fonctionnelle que vous pouvez voir, tester et améliorer.
Replit est conçu pour cette boucle. Vous pouvez décrire une idée, prévisualiser le résultat, donner des retours, effectuer des modifications et publier depuis le même endroit.
Cette page traite de l'état d'esprit derrière le vibe coding. La page suivante, [Construire avec Agent](/learn/build-with-agent), montre comment utiliser les outils d'Agent. [Prompting efficace](/learn/effective-prompting) montre comment rédiger des instructions plus claires.
## Le logiciel était autrefois un travail d'équipe
Les logiciels ont généralement été construits par des équipes.
Un chef de produit ou un fondateur définit ce qui doit être construit et pourquoi. Un designer façonne l'expérience. Les développeurs transforment l'idée en logiciel fonctionnel. Les coéquipiers le testent, donnent des retours, trouvent des bugs et décident ce qui est prêt à être livré.
Cette collaboration est puissante car chaque rôle apporte un type de jugement différent. Le produit décide ce qui est important. Le design décide de ce que cela devrait ressentir. L'ingénierie décide comment cela devrait fonctionner. Les tests décident si c'est réellement le cas.
Mais la boucle peut être lente. Chaque changement doit passer par des transferts : expliquer l'idée, concevoir le flux, écrire le code, examiner le résultat, le tester, puis le réviser.
Le vibe coding compresse cette boucle.
Avec Replit, vous pouvez vous déplacer à travers plus du processus de création de produit vous-même. Vous pouvez définir l'objectif, générer une première version, la tester, donner des retours et l'améliorer sans attendre que chaque étape passe entre différentes personnes et outils.
## Votre rôle change
Vous n'avez pas besoin d'être développeur pour commencer à construire.
Dans le vibe coding, votre rôle est plus proche de celui du responsable produit. Vous décidez ce qui doit exister, pour qui c'est, ce qui compte le plus et si le résultat est suffisamment bon.
L'Agent aide avec l'implémentation, mais vous dirigez toujours le travail.
Vous apportez :
* L'objectif
* L'audience
* Le goût
* Les contraintes
* Les retours
* La décision sur ce qui est publié
L'Agent aide avec :
* La transformation des idées en logiciel fonctionnel
* L'apport de modifications
* L'explication des comportements
* Le débogage des problèmes
* L'amélioration de l'application au fil du temps
Mieux vous dirigez, mieux l'Agent peut construire.
## Les cinq principes
Le vibe coding fonctionne mieux lorsque vous suivez cinq principes simples :
1. Commencer avec l'objectif.
2. Construire par petites étapes.
3. Gérer le contexte.
4. Réviser et tester.
5. Améliorer avec des retours.
Le premier principe établit la direction. Les quatre suivants se répètent en boucle : construire une étape, donner le bon contexte, la réviser, l'améliorer, puis construire la prochaine étape.
Ces principes sont plus importants que d'écrire un premier prompt parfait. Vous obtiendrez rarement l'application finale en une seule étape. L'objectif est de garder la boucle claire et en mouvement.
## Commencer avec l'objectif
Une bonne session de vibe coding commence comme une bonne conversation produit :
Pour qui est-ce ? Que doivent-ils être capables de faire ? Qu'est-ce qui rendrait cela utile ?
Avant de demander à Replit de construire, décrivez le résultat que vous souhaitez.
Construis un site web simple pour une boulangerie locale. Les clients doivent pouvoir voir les spéciaux du jour, en apprendre davantage sur le service traiteur et soumettre une demande de traiteur. Fais-le chaleureux, soigné et facile à utiliser sur mobile.
Cela fonctionne parce que cela donne à Replit un objectif produit, pas seulement une tâche. Cela explique l'audience, les actions principales et l'ambiance de la première version.
Vous n'avez pas encore besoin de connaître l'implémentation technique. Commencez par ce qui devrait être vrai lorsque l'application fonctionne.
## Construire par petites étapes
Une étape est une petite partie du produit suffisamment complète pour être essayée.
Pour le site de la boulangerie, la première étape pourrait être :
* Une page d'accueil avec les spéciaux du jour
* Un formulaire de demande de traiteur
* Une mise en page adaptée aux mobiles
C'est suffisant pour tester l'idée. Vous pouvez l'ouvrir, le parcourir et décider ce qui devrait s'améliorer ensuite.
Évitez de demander l'ensemble du produit en une fois. Les grandes demandes sont plus difficiles à réviser et plus faciles à mal comprendre. Les petites étapes vous aident à progresser sans perdre le contrôle.
Après que la première étape fonctionne, ajoutez la suivante.
Ajoute un message de confirmation après que quelqu'un soumet le formulaire de demande de traiteur. Garde le reste de la page inchangé.
L'instruction est petite, claire et testable.
## Gérer le contexte
Le contexte est l'information que Replit utilise pour comprendre ce que vous voulez.
Un bon contexte peut inclure :
* Pour qui est l'application
* Quel problème elle résout
* Ce qui doit être inclus maintenant
* Ce qui doit attendre plus tard
* Ce qui ne doit pas changer
* Des exemples, captures d'écran, croquis, fichiers ou données
* Des notes sur le ton, le style ou la marque
Gérer le contexte signifie fournir les bonnes informations au bon moment.
Si vous continuez la même fonctionnalité, restez dans la même conversation pour que Replit puisse utiliser les décisions précédentes. Si vous démarrez une fonctionnalité différente ou si la conversation est devenue bruyante, il peut être préférable de recommencer avec un bref résumé de ce qui compte.
Par exemple :
Contexte : ce site de boulangerie est pour des parents occupés qui commandent des gâteaux d'anniversaire. Garde le formulaire court, rends les détails de retrait évidents et évite tout ce qui semble corporatif. Pour cette modification, améliore uniquement la section de demande de traiteur.
Vous n'ajoutez pas seulement plus de mots. Vous aidez Replit à se concentrer.
## Réviser et tester
L'Agent peut construire, mais vous décidez si le résultat fonctionne.
Après chaque modification significative, ouvrez l'application et utilisez-la comme la personne pour qui elle est destinée. Ne lisez pas seulement ce que l'Agent dit qu'il a modifié. Essayez le flux.
Demandez-vous :
* Quelqu'un peut-il accomplir l'action principale ?
* La page a-t-elle du sens ?
* Fonctionne-t-elle sur mobile ?
* Quelque chose d'important a-t-il été cassé ?
* Replit a-t-il modifié quelque chose qui aurait dû rester inchangé ?
* Est-ce suffisamment bon pour continuer à construire dessus ?
Réviser et tester est l'endroit où votre jugement produit compte le plus. Vous vérifiez si le logiciel correspond à l'intention.
## Améliorer avec des retours
La première version d'une étape est un brouillon. C'est normal.
Le vibe coding s'améliore grâce aux retours. Dites à Replit ce qu'il faut garder, ce qu'il faut changer, ce qu'il faut supprimer et ce qu'il faut essayer ensuite.
Au lieu de :
Améliore-le.
Essayez :
Rends le formulaire de demande de traiteur plus facile à parcourir. Garde les mêmes champs, mais améliore l'espacement, les étiquettes et le bouton d'envoi. Ne modifie pas la section des spéciaux.
Un bon retour est spécifique. Il protège ce qui fonctionne déjà tout en améliorant une partie de l'application.
Lorsque l'étape fonctionne, recommencez et construisez la prochaine petite étape.
Si un changement va dans la mauvaise direction, réduisez le périmètre.
C'est allé trop loin. Garde le nouveau style de bouton, mais restaure la mise en page originale et ne mets à jour que le formulaire de traiteur.
Améliorer avec des retours est la façon dont vous gardez le produit en mouvement sans perdre le contrôle.
## À quoi ressemble un bon vibe coding
Vous êtes sur la bonne voie lorsque :
* Vous pouvez expliquer l'objectif en langage simple
* Chaque changement est suffisamment petit pour être révisé
* Vous savez quoi tester après que l'Agent construit
* Vous donnez du contexte au lieu de deviner ce que l'Agent sait
* Vous dites à l'Agent ce qu'il faut préserver, pas seulement ce qu'il faut changer
* L'application devient plus utile après chaque cycle
Le vibe coding ne signifie pas confier une idée et disparaître. Cela signifie raccourcir la distance entre l'idée, le logiciel, les retours et l'amélioration.
## Prochaine étape
Apprenez comment appliquer cet état d'esprit avec les outils d'Agent, notamment les plans, les annotations Canvas, les captures d'écran et les points de contrôle.
Apprenez à rédiger des instructions plus claires sur lesquelles Agent peut agir avec confiance.