Les sites web créés avec du code Claude sont faciles à repérer. Ils se ressemblent tous et sont clairement le fruit de l’IA.
Mais que diriez-vous si je vous disais que ce magnifique site web a été entièrement créé avec du code Claude en seulement quelques minutes ? La différence ne réside pas dans l’outil, mais dans la façon dont vous le configurez.
Je vais vous présenter les 3 niveaux de création avec du code Claude, du plus basique jusqu’au framework exact que j’ai utilisé, afin que vous puissiez le reproduire. À la fin de cet article, vous serez également capable de créer exactement le même site web que j’ai construit avec du code Claude.
Niveau 1 : Saisie simple de commandes
Avant de pouvoir commencer à créer des sites web avec Claude Code, nous avons d’abord besoin d’un éditeur de code IA. Le meilleur est Microsoft Visual Studio Code. Il est gratuit et dispose de tout ce dont nous avons besoin. Commencez par le télécharger et l’installer.
Une fois installé, cliquez sur l’icône des extensions, tapez « CL code », sélectionnez le plugin CL code et cliquez sur « Installer ». Rendez-vous ensuite dans le système de fichiers et cliquez sur « Ouvrir le dossier ». Créez un dossier intitulé « demo one » et ouvrez-le. Vous devriez voir l’icône Claude Code en haut.
Mais avant de commencer, vous devez d’abord disposer d’un compte Claude Code Pro, car Claude Code est alors inclus. Une fois que vous serez un utilisateur intensif, vous pourrez facilement passer à un compte Max pour bénéficier de limites de débit plus élevées.
Nous demandons à Claude Code de créer le site web : « Crée-moi une page d’accueil pour Cover Robotics. Nous vendons un robot domestique personnel appelé Kovo qui obéit aux commandes vocales, transporte des objets et apprend vos routines quotidiennes. »
Je recommande vivement d’utiliser également Whisper Flow pour ne pas avoir à tout taper. Cela vous permet de saisir du texte à une vitesse incroyable, car vous parlez plus vite que vous ne tapez.
Le problème des invites simples
Voyons quels résultats nous obtenons avec une simple invite via Claude Code. Au fait, j’ai ajouté « n’utilise aucun skill » car Claude Code utilise des compétences automatiquement. J’expliquerai les compétences en détail au niveau deux.
Si vous souhaitez voir le site web, cliquez sur le fichier, cliquez sur « Afficher dans le Finder », puis glissez-déposez simplement ce fichier dans Chrome. Et voilà ce que nous avons obtenu jusqu’à présent : trop de texte, une mise en page générique et du violet partout.
Il y a une raison à cela. Le framework de site web le plus célèbre, Tailwind, a utilisé exactement cette couleur comme couleur par défaut il y a 5 ans, et c’est pourquoi on la retrouve partout sur Internet. J’ai appris que le violet est la couleur par défaut. Même le fondateur de Tailwind a déclaré :
« Je tiens à présenter mes excuses officielles pour avoir défini tous les boutons de l’interface utilisateur de Tailwind en Indigo 500 il y a 5 ans, ce qui a conduit toutes les interfaces utilisateur générées par IA sur Terre à être également en Indigo. »
Nous avons ici une animation un peu fade. On voit la disposition typique en trois colonnes que l’on voit partout sur les sites web générés par l’IA. Il y a quelques incohérences au niveau des couleurs. Encore une fois, il y a trop de texte. Mais dans l’ensemble, cela rend plutôt bien comparé à ce que ferait quelqu’un à la main.
Mais comparé à ce que nous voulons construire aujourd’hui, ce que le code généré par Claude a produit dès le premier essai n’est pas vraiment bon. Bien sûr, nous pourrions lui demander maintenant de corriger la couleur violette, etc. Mais le problème, c’est que l’IA ne comprend pas ce que vous voulez réellement. Elle n’a pas la touche humaine.
Un autre problème est qu’il est difficile d’expliquer exactement ce que vous voulez si vous n’êtes pas un expert en création de sites web. L’avantage, c’est qu’avec l’approche que je vais vous montrer au niveau trois, vous n’avez pas besoin de l’être. Même un débutant absolu sera capable de créer de beaux sites web comme celui-ci.
Niveau 2 : Utilisation des compétences Claude Code
Pour vous montrer la deuxième approche, nous allons ouvrir un nouveau projet. Cliquez sur « Nouvelle fenêtre », puis sur « Ouvrir », et créez un deuxième dossier appelé « demo 2 », puis ouvrez-le. Lancez ensuite Claude Code.
Cette fois-ci, nous allons utiliser une compétence.
- Pour l’installer, tapez
/pluginset sélectionnez « Gérer les plugins ». - Tapez ensuite « front-end » et sélectionnez le plugin de conception front-end.
- Vous pouvez choisir de l’installer globalement pour le projet ou localement. Dans ce cas, nous choisissons « Installer pour vous » et nous nous assurons également qu’il est activé.
Si vous souhaitez savoir exactement ce que fait le plugin, vous pouvez cliquer sur la source et voir précisément son fonctionnement, comment l’utiliser, et même ce qu’il contient. Par exemple, ce plugin ne contient en fin de compte qu’une seule compétence.
Une compétence est essentiellement un fichier d’instructions qui indique à Claude Code comment effectuer une tâche, un peu comme un guide pratique pour une tâche spécifique. Par exemple, elle indique de ne jamais utiliser d’éléments esthétiques génériques générés par l’IA, comme des familles de polices surutilisées, puis elle donne des exemples, etc.
Une fois notre compétence installée, nous voulons copier-coller l’intégralité de la prompt ici. Mais cette fois-ci, nous n’incluons pas « ne pas utiliser de compétence ». Nous la collons ici et voyons ce que Claude Code génère.
Je mets à jour ou crée vos articles personnellement, assisté par l'IA, avec optimisation SEO incluse.
| 📝 Mise à jour | 14 € |
| ✨ Création | 49 € |
À partir de ce prompt, Claude Code a décidé que la compétence de conception front-end serait utile pour cette tâche. Il a ajouté les instructions contenues dans cette compétence.
Claude Code termine son travail. Ouvrons cela dans le navigateur. Tout d’abord, c’est une bonne chose que nous n’ayons plus les couleurs violettes. Le texte est bien meilleur maintenant. Cela a l’air sympa. Dans l’ensemble, on constate que le site web est déjà bien plus réussi.
Mais il présente à nouveau cette mise en page en trois colonnes que l’on retrouve sur tous les sites web générés par l’IA.
Niveau 3 : Le framework ANF
Nous allons enfin construire exactement ce site web. Le niveau trois correspond à ce que j’appelle le framework ANF. Il signifie Assemble, Normalize, Fill (Assembler, Normaliser, Remplir).
L’idée est simple. Au lieu de décrire ce que vous voulez, vous fournissez à Claude Code des composants réels créés par de vrais designers.
- Chaque ombre,
- chaque animation,
- chaque détail est déjà prêt.
Il vous suffit de choisir ceux qui vous plaisent. A partir de zéro. Et honnêtement, ce n’est pas beaucoup plus difficile que ce que nous venons de faire.
Tout d’abord, ouvrons un nouveau projet Claude Code. Appelons-le « demo 3 ». Ensuite, nous nous rendons sur un site web appelé 21st.dev. Vous y trouverez de nombreux composants parmi lesquels choisir.
Ce qui est génial avec 21st.dev, c’est qu’il existe une fonctionnalité appelée « copy prompt ». Si je clique, vous pouvez sélectionner le type de prompt. Le prompt indique : « crée-moi un site web simple contenant le composant suivant ».
Je colle maintenant ce que nous avons copié depuis 21st.dev et j’envoie la commande. Claude Code a reçu des instructions détaillées pour recréer exactement le même composant.
Claude Code indique ensuite d’exécuter la commande pour voir le site web. Cliquez sur « Terminal », puis sur « Nouveau terminal », collez la commande et appuyez sur Entrée. Nous pouvons maintenant copier cette URL et la coller dans le navigateur. Nous avons exactement le même composant.
L’approche plus rapide
Mais laissez-moi vous montrer une approche encore plus rapide.
- Tout d’abord, nous supprimons tout ce qui se trouve dans ce dossier.
- Ensuite, nous démarrons une nouvelle session Claude Code.
- Mais au lieu de coller les composants un par un, nous créons d’abord ici un dossier appelé « components ».
Ensuite, je crée un fichier texte. Je retourne maintenant sur 21st.dev et je clique sur « Copier le prompt». Puis je colle l’invite. Ensuite, je crée un deuxième fichier et je copie l’invite suivante du composant que je souhaite avoir. Je continue cette approche avec les composants suivants.
⇒ Une fois cela fait, vous demandez à Claude Code de créer un site web avec tous les composants du dossier « components » dans l’ordre et de le publier. Claude Code lit d’abord tous les fichiers, puis crée le site web.
Tapez « npm run dev » et ouvrez ce site web. Nous pouvons ensuite normaliser l’ensemble de la page web. Nous avons récupéré ces composants sur de nombreux sites web différents, mais nous voulons qu’ils aient l’air de ne former qu’un seul et même site web.
C’est pourquoi nous demandons à notre Claude Code de normaliser l’ensemble de la page.
La phase de remplissage
S’il y a des choses à corriger, il suffit de le demander à Claude Code.
Une fois que vous êtes satisfait de la structure du site web et de son apparence, nous pouvons le remplir avec les bons textes. Pour cela, demandez à Claude Code d’effectuer des recherches.
En gros, Claude Code va maintenant parcourir l’ensemble du site web pour déterminer ce qu’il doit remplir. À partir de ces informations, il effectue des recherches sur le thème du site puis nous lui demandons de remplir le site.
Claude Code a terminé ses recherches. Nous lui demandons maintenant de remplir toute la page, le prompt demande essentiellement à Claude Code de remplir l’intégralité du site web en fonction de nos recherches.
⇒ A noter : Vous pouvez adapter ce tutoriel en utilisant opencode à la place de Claude Code mais chut…, faut pas le dire.
Autre article qui pourraient vous intéresser sur mon blog : Mon équipe d’agents IA autonomes sur OpenClaw
