Vibe coding avec Claude : Claude chat, Claude Code et créer une application depuis Claude

Le vibe coding avec Claude fonctionne de trois façons. Claude chat crée de petites applications d'une seule page directement dans la conversation. Claude Code est un agent qui modifie un vrai projet sur votre ordinateur ou dans l'infonuagique, pour les personnes à l'aise avec une base de code. Et Claude plus un créateur d'applications via MCP vous permet de créer, prévisualiser et publier une application complète avec base de données sans quitter la conversation Claude. Ce qui convient dépend de ce que vous construisez et de la part de la configuration que vous voulez gérer vous-même.

Ce guide couvre les trois, avec des invites et les limites de chacune. Pour l'idée derrière le tout, voir ce qu'est le vibe coding.

Option 1 : Claude chat pour les petits outils

Dans l'application Claude habituelle, vous pouvez demander quelque chose d'interactif, et Claude l'écrit sous forme de code qui fonctionne à côté de la conversation : une calculatrice, un exercice de cartes-éclair, un petit jeu, un graphique à partir de données que vous collez. Vous le modifiez en répondant.

Une bonne invite ici est autonome :

Créez un outil interactif où je colle une liste de dépenses (une par ligne, « montant, catégorie ») et qui affiche un diagramme circulaire par catégorie ainsi qu'un total. Incluez une liste d'exemple pour que cela fonctionne immédiatement.

Ce pour quoi c'est idéal : les outils rapides d'une seule page que vous utilisez vous-même ou partagez par un lien, et l'apprentissage, parce que vous pouvez demander à Claude d'expliquer chaque partie.

Où cela s'arrête : ces outils fonctionnent dans l'environnement de Claude. Il n'y a pas de base de données persistante à vous, pas de comptes utilisateurs, pas de domaine personnalisé et aucun endroit où exécuter un serveur. Lorsqu'une idée dépasse une seule page, il vous faut l'une des deux options suivantes.

Option 2 : Claude Code pour une vraie base de code

Claude Code est l'agent de codage d'Anthropic. Il fonctionne dans votre terminal, dans des éditeurs comme VS Code et JetBrains, dans une application de bureau et sur le web. Vous lui donnez une tâche en langage courant; il lit votre projet, modifie des fichiers, exécute des commandes et des tests et vous montre ce qui a changé. Au moment de la rédaction, il est inclus avec les forfaits payants de Claude et disponible par l'API; consultez le site d'Anthropic pour les forfaits actuels.

Une séance typique de vibe coding ressemble à ceci :

Ajoutez une page /bookings qui liste les réservations de l'utilisateur courant, les plus récentes en premier, avec un bouton d'annulation désactivé moins de deux heures avant le cours. Utilisez l'aide d'authentification existante. Exécutez les tests quand vous avez terminé.

Ce pour quoi c'est idéal : les développeurs et les fondateurs techniques qui ont déjà un projet, veulent contrôler toute la pile et sont prêts à l'exécuter et à le déployer eux-mêmes. Il excelle dans les changements touchant plusieurs fichiers et dans le respect des conventions déjà présentes dans une base de code.

Ce qui demande plus de travail : il faut une configuration de développement, et Claude Code n'héberge rien. Les bases de données, les secrets, le déploiement et les domaines sont à votre charge. Pour une comparaison avec d'autres outils de développeur, voir Cursor vs Windsurf vs Claude Code.

Bonnes habitudes avec Claude Code

• Demandez un plan avant les grands changements. « Décris les étapes et les fichiers que tu toucheras, puis attends. »
• Tenez un fichier de notes de projet. Claude Code lit un fichier de mémoire de projet (CLAUDE.md) pour les conventions, de sorte que vous n'avez pas à les répéter.
• Vérifiez le différentiel. Même en faisant du vibe coding, parcourez ce qui a changé dans les zones sensibles : l'authentification, les paiements, tout ce qui touche les données des utilisateurs.
• Validez souvent. De petits commits facilitent l'annulation d'une mauvaise étape.

Option 3 : Créer et publier depuis Claude avec Mythex

Si vous aimez travailler dans Claude mais voulez une vraie application à la fin (base de données, connexions, stockage de fichiers, adresse publique), vous pouvez connecter Claude à un créateur d'applications IA par MCP, le protocole qui permet à Claude d'utiliser des outils hébergés ailleurs. (Ce qu'est MCP l'explique simplement.)

Mythex exploite un serveur MCP. Une fois connecté, Claude peut créer un projet Mythex, écrire le code dans un bac à sable infonuagique privé, démarrer un aperçu en direct, attacher une base de données et du stockage de fichiers, puis publier l'application. Chaque résultat comprend un lien pour suivre le projet en direct dans Mythex.

Comment se connecter

1. Dans Mythex, ouvrez les Paramètres du compte et copiez l'adresse MCP : https://mcp.mythex.ai/mcp.
2. Dans Claude, allez à Paramètres → Connecteurs → Ajouter un connecteur personnalisé, collez l'adresse et cliquez sur Connecter.
3. Une page Mythex s'ouvre. Connectez-vous au besoin et choisissez Autoriser l'accès. Il n'y a aucune clé d'API à copier.
4. De retour dans Claude, demandez ce que vous voulez.

Tout le monde peut se connecter, sur n'importe quel forfait; les outils du bac à sable exigent Mythex Pro (25 $ par mois). L'utilisation de Claude reste sur votre forfait Claude, et le temps de bac à sable, les aperçus et l'hébergement proviennent de vos crédits Mythex. Le parcours complet est dans construire des applications Mythex depuis Claude, Cursor ou Codex.

Une première invite à essayer

En utilisant Mythex, créez un nouveau projet : un CRM simple pour mon petit studio de design. Des contacts avec nom, entreprise, courriel, téléphone, étape (prospect, actif, ancien) et notes. Une vue en tableau par étape où je peux glisser des contacts entre les colonnes, et une zone de recherche. Ajoutez une base de données pour que les données persistent, et une connexion pour que seul moi puisse voir. Démarrez l'aperçu et envoyez-moi le lien lorsqu'il fonctionne.

Puis itérez dans la même conversation, un changement à la fois :

Dans le projet Mythex, ajoutez une date de « prochain suivi » aux contacts et une liste sur l'écran d'accueil des suivis prévus cette semaine. Vérifiez-le dans l'aperçu.

Publiez le CRM et donnez-moi l'adresse en direct.

Ce pour quoi c'est idéal : les personnes qui pensent mieux dans Claude et veulent que le résultat soit hébergé, avec une base de données, sans configurer de serveurs. Vous pouvez aussi alterner : commencer dans Claude et poursuivre dans le clavardage Mythex, ou l'inverse, puisqu'il s'agit du même projet.

Lequel utiliser?

Conseils d'invite qui comptent davantage avec Claude

Claude suit de près les instructions détaillées, ce qui joue dans les deux sens.

• Dites ce qu'il ne faut pas changer. « Gardez la mise en page et les couleurs; modifiez seulement la validation du formulaire. »
• Donnez une définition de terminé. « Terminé signifie qu'un nouveau contact s'enregistre, apparaît dans le tableau et survit à un rechargement. »
• Demandez-lui de vérifier son travail. Dans Claude Code, cela signifie exécuter les tests; avec Mythex, cela signifie vérifier l'aperçu en direct ou lancer un test de navigateur.
• Demandez des explications en termes simples lorsque vous ne comprenez pas un changement. C'est le moyen le plus rapide de savoir ce que fait votre application.

Notre aide-mémoire d'invites de vibe coding propose 30 invites qui fonctionnent avec chacune des trois configurations.

Consignes de sécurité pour les trois

• Ne collez pas de vraies clés d'API ni de mots de passe dans une conversation Claude. Avec Mythex, les secrets vont dans les paramètres de secrets du projet, et Claude peut voir leurs noms, mais pas leurs valeurs.
• Vérifiez qui peut voir quoi avant de publier. « Un utilisateur connecté peut-il ouvrir les dossiers d'un autre utilisateur? » est la première question à poser.
• Examinez le code sensible. Claude est un codeur capable, mais le vibe coding signifie que vous ne lisez pas chaque ligne; choisissez donc les lignes qui comptent. Voir le vibe coding est-il sécuritaire?.

Si vous utilisez aussi ChatGPT, le guide complémentaire couvre le vibe coding avec ChatGPT et Codex. Et si vous préférez éviter toute configuration, ouvrez le créateur d'applications IA et décrivez votre application là-bas.

Questions