Voici le moment qui décide de tout.
La plupart des gens écrivent « fais-moi un site pour mon activité » et reçoivent un site correct, générique, qui ressemble à dix mille autres. Ce n'est pas la faute de Claude : il a construit ce qu'on lui a décrit, c'est-à-dire pas grand-chose.
Le prompt ci-dessous fait l'inverse. Il ne demande pas un site : il ouvre un entretien. Claude vous interroge en trois courts échanges, vous propose un plan, attend votre validation, et construit seulement ensuite.
Cinq minutes de conversation, et vous passez de « l'IA m'a fait un site » à « j'ai dirigé l'IA ».
Choisir le dépôt et la branche
Sous la zone de saisie, la rangée de pastilles. La première est votre environnement, celui que vous venez de créer. Cliquez la deuxième, celle avec le signe
</>, et choisissezprojetdans la liste. Le champ de recherche vous évite de faire défiler.La troisième pastille indique la branche : elle doit afficher main.
Vérifier le mode
Juste sous la zone de saisie, à gauche, une mention : Accepter les modifications. Laissez-la telle quelle. Elle signifie que Claude travaille d'une traite, sans vous demander la permission à chaque fichier.
Vérifier le modèle
À droite, sur la même ligne, le nom du modèle : Opus 5. C'est le bon choix, ne le changez pas. L'encadré plus bas explique les quatre modèles disponibles.
Coller le prompt
Copiez le bloc ci-dessous en entier, sans rien modifier, collez-le dans la zone de saisie, et validez.
Il est long. C'est normal, et c'est précisément ce qui fait la différence.
Répondre à l'entretien
Claude vous interroge en trois temps, et s'arrête à chaque fois.
D'abord quatre questions à choix : ce que le visiteur doit faire, la direction visuelle, l'énergie, le nombre de pages. Vous cliquez, vous ne tapez rien.
Puis une question ouverte : racontez votre activité avec vos mots. C'est le seul moment du parcours où votre réflexion compte plus que la technique — prenez trois minutes. Si vous avez déjà des textes ou des tarifs, collez-les tels quels.
Enfin une dernière : une couleur imposée ? quelque chose à éviter absolument ? Si vous n'avez pas d'avis, répondez « carte blanche ».
Valider le plan
Claude propose ensuite les pages, le plan de la page d'accueil, les polices, les couleurs. Toujours sans une ligne de code.
Lisez, et dites ce que vous en pensez. « Enlève la page tarifs », « je préfère quelque chose de plus sobre », « ajoute une section témoignages » : il ajuste et représente le plan.
Ne validez que quand ça vous plaît. Corriger un plan coûte trente secondes ; corriger un site déjà construit en coûte dix fois plus.
Laisser construire
Une fois votre feu vert donné, Claude installe, écrit, vérifie que le projet se construit, et dépose son travail.
Comptez cinq à dix minutes. Vous pouvez regarder faire, ou fermer l'onglet et revenir plus tard : la session continue sans vous.
Tu es un designer-développeur web senior. Tu vas construire un site complet pour moi, qui n'écris pas de code. Tu m'expliques tout en français, simplement.
RÈGLE ABSOLUE
Ce travail se fait en trois phases. Tu ne passes jamais à la phase suivante sans mon accord explicite. Tu ne crées AUCUN fichier avant la phase 3. Si tu es tenté de commencer à coder maintenant, ne le fais pas.
═════════════════════════════════
PHASE 1 — L'ENTRETIEN
═════════════════════════════════
L'entretien se déroule en TROIS TOURS. Un tour = un message. Tu poses, tu t'arrêtes, tu attends ma réponse. Jamais deux tours dans le même message, jamais un mur de questions.
Si tu disposes d'un outil pour poser des questions à choix multiples (AskUserQuestion ou équivalent), utilise-le au tour 1 : c'est beaucoup plus agréable pour moi que de taper des réponses. Si tu n'en as pas, pose les quatre questions en texte, dans un seul message court, avec les options numérotées.
── TOUR 1 : LES QUATRE CHOIX ──
Pose ces quatre questions ensemble, en choix multiples. Reprends les libellés et les descriptions tels quels.
QUESTION 1 — « Que doit faire le visiteur ? »
• Me contacter — il m'écrit ou m'appelle après avoir lu
• Réserver — il prend rendez-vous directement
• Acheter — il commande une prestation ou un produit
• Me découvrir — il retient qui je suis et revient plus tard
QUESTION 2 — « Quelle direction visuelle ? »
• Éditorial épuré — beaucoup de blanc, typographie serif forte, presque pas de couleur. Sérieux et intemporel : conseil, droit, thérapie, écriture.
• Atelier chaleureux — tons terreux et crème, serif humaniste, matières douces. Humain et incarné : métiers manuels, bien-être, restauration.
• Studio net — sans-serif géométrique, grille apparente, contrastes francs, un accent vif. Précis et moderne : tech, architecture, design.
• Nuit premium — fond sombre, typographie claire, une lumière d'accent. Élégant et désirable : photo, musique, événementiel, immobilier.
QUESTION 3 — « Quelle énergie ? »
• Calme et spacieux — beaucoup d'air, on prend le temps de lire
• Affirmé et direct — gros titres, contrastes marqués, ça va droit au but
• Dense et généreux — beaucoup d'information visible sans avoir à défiler
QUESTION 4 — « Combien de pages au lancement ? »
• Une seule page — tout sur la page d'accueil, on défile
• Trois pages — accueil, prestations, contact
• Quatre à cinq pages — on ajoute à propos, tarifs ou réalisations
• À toi de voir — tu proposes selon mes réponses
── TOUR 2 : UNE SEULE QUESTION OUVERTE ──
Une fois les choix reçus, pose UNE question, une seule, celle-ci :
« Racontez-moi votre activité, avec vos mots : ce que vous faites, pour qui, ce qui vous distingue, et le nom du site. Si vous avez déjà des textes, des prestations ou des tarifs, collez-les tels quels — je m'occupe de la mise en forme. »
Attends ma réponse. Ne pose aucune autre question dans ce message.
── TOUR 3 : LA DERNIÈRE ──
Puis une dernière question, une seule :
« Dernière chose : y a-t-il une couleur imposée (logo, code hex), et quelque chose que vous ne voulez surtout pas voir sur votre site ? Si vous n'avez ni l'un ni l'autre, dites simplement "carte blanche". »
Après ce tour, tu passes à la phase 2. Ne me demande rien de plus : si une information te manque, tu fais un choix raisonnable et tu le signales dans ta proposition.
═════════════════════════════════
PHASE 2 — LA PROPOSITION
═════════════════════════════════
Une fois mes réponses reçues, propose-moi un plan. En français, court, sans une ligne de code.
a) LES PAGES
Propose 3 à 5 pages maximum pour le lancement, pas plus. Pour chacune : son nom, son adresse, ce qu'elle contient, et à quoi elle sert. Justifie en une phrase pourquoi tu n'en proposes pas davantage.
b) LE PLAN DE LA PAGE D'ACCUEIL
Section par section, dans l'ordre, avec en une ligne ce que chacune raconte et ce qu'elle demande au visiteur.
c) LA DIRECTION ARTISTIQUE, EN CONCRET
- deux polices Google Fonts (une pour les titres, une pour le texte), et pourquoi celles-là
- une palette de 4 couleurs maximum, avec les codes hex : un fond, un texte, un accent, une nuance neutre
- l'échelle des titres, l'épaisseur des traits, le rayon des angles, la densité générale
Décris-moi le résultat en trois phrases, comme si je fermais les yeux.
d) LES TROUS
Ce qui manque comme contenu, et ce que tu mettras en attendant. Sois honnête : je préfère un texte marqué « à compléter » qu'une phrase inventée qui promet ce que je ne fais pas.
Puis arrête-toi et attends ma validation. Si je demande des changements, ajuste et représente le plan.
═════════════════════════════════
PHASE 3 — LA CONSTRUCTION
═════════════════════════════════
Seulement après mon feu vert.
── LA STACK, NON NÉGOCIABLE ──
- Next.js 16.3 ou plus récent, App Router (dossier app/, jamais pages/)
- TypeScript
- Tailwind CSS v4, en configuration CSS-first : « @import "tailwindcss" » dans app/globals.css et les tokens dans un bloc @theme. Pas de fichier tailwind.config.js, il n'existe plus en v4.
- next/font pour les polices, chargées depuis Google Fonts et servies depuis mon site
- next/image pour toutes les images
- AUCUNE autre dépendance sans me demander d'abord. Pas de bibliothèque de composants, pas de bibliothèque d'animation, pas de pack d'icônes.
Le dépôt contient déjà un fichier README : conserve-le, adapte-le, ne le supprime pas.
── LES FONDATIONS ──
Définis toutes les valeurs de design dans le bloc @theme de globals.css : couleurs, polices, échelle typographique, espacements, rayons. Ensuite, n'écris plus jamais une valeur en dur dans un composant. Le jour où je veux changer ma couleur d'accent, je dois avoir un seul endroit à modifier.
Crée un layout racine avec un en-tête et un pied de page partagés. Les composants réutilisables vont dans app/components/.
── LE RESPONSIVE ──
Mobile d'abord, sans exception : tu écris les styles pour un téléphone, puis tu ajoutes les variantes sm: md: lg: pour les écrans plus larges.
- Pour les tailles de titres, utilise clamp() plutôt qu'une cascade de breakpoints : le texte grandit progressivement au lieu de sauter.
- Aucun débordement horizontal, jamais, à aucune largeur. Vérifie à 320px.
- Toute zone cliquable fait au moins 44 pixels de haut.
- Une seule colonne sur téléphone. Les grilles ne se déploient qu'à partir de md.
- La navigation sur téléphone doit fonctionner sans JavaScript compliqué : un menu simple, ou une barre qui reste lisible.
- Les images ont toujours une largeur et une hauteur pour que la page ne saute pas au chargement.
── L'ACCESSIBILITÉ ──
- Un seul <h1> par page, et une hiérarchie de titres qui ne saute pas de niveau
- Contraste d'au moins 4,5:1 entre le texte et son fond. Vérifie-le vraiment, ne le suppose pas.
- Chaque image a un texte alternatif utile
- Le focus au clavier est visible sur tous les éléments interactifs
- Balises sémantiques : header, nav, main, section, footer
- Les liens disent où ils mènent, jamais « cliquez ici »
── LE STANDARD À ATTEINDRE ──
Je veux un site qu'on remarque parce qu'il est juste, pas parce qu'il en fait trop.
- L'ESPACE est ton premier outil. Sois généreux entre les sections. Un site qui respire paraît professionnel ; un site tassé paraît bricolé.
- UNE SEULE COULEUR D'ACCENT, utilisée avec parcimonie : le bouton principal, un mot souligné, un trait. Partout ailleurs, du neutre.
- LA TYPOGRAPHIE porte le style. Un contraste net entre les titres et le texte, une largeur de ligne confortable (65 à 75 caractères), une hauteur de ligne généreuse.
- LES DÉTAILS : transitions de 150 à 200 ms, jamais plus ; états de survol discrets mais présents ; angles cohérents partout.
- LA PREMIÈRE SECTION doit dire en trois secondes qui je suis, pour qui, et quoi faire. Pas de phrase creuse.
── CE QUE JE NE VEUX VOIR NULLE PART ──
- Un dégradé violet vers bleu. Ni aucun dégradé sur un titre.
- Des emoji utilisés comme icônes.
- Une première section centrée avec deux boutons côte à côte, celle qu'on a vue mille fois.
- Trois cartes blanches à ombre portée alignées côte à côte.
- Du texte gris clair sur fond blanc.
- Du Lorem ipsum, ou une phrase inventée qui promet ce que je n'ai pas dit faire.
- Des superlatifs vides : « solutions innovantes », « excellence », « sur mesure », « votre partenaire de confiance ».
- Des animations d'apparition au défilement sur chaque bloc.
- Un pack d'icônes installé pour trois pictogrammes : dessine-les en SVG.
- « Fait avec ❤️ » dans le pied de page.
── LE FICHIER CLAUDE.md ──
Crée à la racine du projet un fichier CLAUDE.md. C'est le briefing que tu reliras au début de chacune de nos prochaines sessions : écris-le en t'adressant à toi-même, à la deuxième personne, comme des consignes.
Garde-le court — 80 lignes maximum. Un fichier long est un fichier que personne ne relit.
Il doit contenir, dans cet ordre :
1. LE PROJET — le nom, mon activité, à qui s'adresse le site, l'action attendue du visiteur. Trois ou quatre lignes, tirées de mes réponses de la phase 1.
2. LA STACK — les versions exactes installées (Next.js, React, Tailwind), l'App Router, TypeScript. Précise que Tailwind v4 se configure en CSS, sans tailwind.config.js.
3. LE DESIGN — la direction artistique choisie en une phrase, les deux polices avec leur rôle, la palette avec les codes hex et l'usage de chaque couleur. Écris noir sur blanc : toute valeur de design se modifie dans le bloc @theme de app/globals.css, jamais dans un composant.
4. LES RÈGLES DE TRAVAIL — mobile d'abord, clamp() pour les titres, aucune dépendance nouvelle sans demander, npm run build doit passer avant de pousser, contraste minimum 4,5:1.
5. LES INTERDITS — recopie la liste de ce que je ne veux voir nulle part. C'est la partie qui empêchera une future session de défaire ton travail.
6. LES PAGES — la liste des pages existantes, une ligne chacune : à quoi elle sert.
7. CE QUI RESTE À FAIRE — les contenus manquants, les emplacements marqués « à compléter », les idées de suite. Tiens cette liste à jour à chaque session.
── AVANT DE TERMINER ──
1. Lance « npm run build » et corrige jusqu'à ce qu'il passe sans erreur ni avertissement.
2. Relis chaque page à 375px de large et à 1440px, et corrige ce qui casse.
3. Vérifie qu'aucune valeur de couleur ou de police n'est écrite en dur hors du bloc @theme.
4. Vérifie que CLAUDE.md est à jour et lisible par quelqu'un qui découvre le projet.
5. Mets à jour le README : ce qu'est ce projet, comment le modifier, ce qui reste à compléter.
6. Pousse ton travail.
── TON MESSAGE FINAL ──
Termine par un message en français, structuré comme ceci :
a) CE QUE J'AI CONSTRUIT — les pages créées, les choix de design, en cinq lignes maximum. Pas de jargon.
b) CE QUE TU DOIS FAIRE MAINTENANT — les gestes exacts pour publier, avec les libellés des boutons :
1. Clique sur l'indicateur de modifications (le « +XXX -X ») en haut de cette session
2. Clique sur « Créer une PR »
3. Sur GitHub, clique sur « Merge pull request », puis « Confirm merge »
4. Si Vercel est déjà branché sur ce dépôt, le site se met à jour tout seul en une minute
Rappelle-moi que tant que la Pull Request n'est pas fusionnée, mon site ne change pas : tu travailles sur une branche, pas sur main.
c) CE QU'IL ME MANQUE — la liste précise de ce que je dois te fournir pour finir le site : textes, photos, tarifs, témoignages, coordonnées. Sois concret, dis-moi exactement quoi préparer.
d) MA PROCHAINE DEMANDE — propose-moi une phrase toute faite, que je pourrai coller telle quelle dans une nouvelle session pour continuer le travail.
Ce temps d'attente, parlons-en
On dit que l'IA travaille mille fois plus vite qu'un humain. C'est vrai. Ce qu'on dit moins, c'est qu'on passe beaucoup de temps à l'attendre.
Une demi-heure ici, dix minutes là, trois minutes le temps d'un déploiement. Mises bout à bout, ces attentes représentent une part réelle d'une journée de travail. Et elles ont une particularité : ce sont des trous. Trop courts pour lancer autre chose de sérieux, trop longs pour ne rien faire.
La tentation, c'est de les remplir avec ce qui traine — les notifications, le fil d'actualité, un onglet ouvert par réflexe. On sort de sa demi-heure plus fatigué qu'en y entrant, et le site n'a pas avancé plus vite pour autant.
Travailler avec l'IA, c'est aussi apprendre ça : décider à l'avance ce qu'on fait de ces trous. Une marche, un chapitre, un appel, une tâche qui n'avait jamais sa place dans l'agenda. Le temps que la machine vous libère ne vous revient que si vous en faites quelque chose.
C'est un apprentissage, et il prend un peu de pratique. Autant commencer maintenant.
Ce que ce prompt impose, et pourquoi
Next.js et Tailwind CSS. Next.js parce que Vercel le reconnaît sans aucun réglage — c'est le même éditeur. Tailwind parce qu'il permet à Claude de produire un design cohérent au lieu d'empiler des styles au fil de l'eau.
Aucune autre dépendance. Livré à lui-même, un assistant a tendance à installer une bibliothèque pour chaque besoin. Le site devient lourd, fragile, difficile à reprendre. Le prompt lui interdit d'en ajouter sans vous demander.
Les valeurs de design à un seul endroit. Couleurs, polices, espacements sont définis dans un unique bloc. Le jour où vous voudrez changer votre couleur d'accent, il y aura une ligne à modifier, pas quarante.
Une liste d'interdits. La partie la plus utile, sans doute. Le dégradé violet, les trois cartes à ombre portée, les emoji en guise d'icônes : ce sont les tics visuels qui font qu'on reconnaît un site fait par IA en une seconde. Les interdire explicitement, c'est ce qui sépare un site quelconque d'un site qui a l'air d'avoir été pensé.
Un fichier CLAUDE.md. Le prompt demande à Claude d'écrire, à la racine de votre projet, son propre briefing : votre palette, vos polices, vos règles, vos interdits, et ce qui reste à faire. Il le relira au début de chacune de vos prochaines sessions.
C'est le détail qui change tout sur la durée. Sans lui, la session que vous ouvrirez dans trois semaines ne saura rien de vos choix et défera la moitié du travail. Avec lui, elle reprend le fil comme si elle n'était jamais partie.
À la fin, Claude vous dit quoi faire
Le prompt lui impose de terminer par un message en quatre parties : ce qu'il a construit, les gestes exacts pour publier (avec les libellés des boutons), ce qu'il vous manque comme contenu, et une phrase toute prête à coller dans votre prochaine session.
Cette deuxième partie vous évitera l'erreur la plus fréquente du parcours : croire que le travail de Claude est en ligne alors qu'il attend sagement d'être fusionné.
Les quatre modèles, et lequel choisir
Claude n'est pas un seul cerveau, mais une famille. Le nom affiché à droite, sous la zone de saisie, indique lequel travaille pour vous. En cliquant dessus, vous en voyez quatre.
Opus 5 — celui qu'il vous faut. Conçu pour le développement complexe : il tient un projet entier en tête, anticipe les conséquences, vérifie son travail. C'est le modèle recommandé par défaut, et celui avec lequel ce guide a été écrit. Ne changez pas.
Fable 5 — le plus puissant. La génération la plus récente, taillée pour les missions très longues où il faut garder énormément de contexte. Impressionnant, mais surdimensionné pour construire un site vitrine : vous consommerez votre abonnement plus vite sans voir la différence.
Sonnet 5 — l'équilibré. Bon compromis entre vitesse et intelligence. Un cran en dessous d'Opus sur le raisonnement, nettement plus rapide. Utile pour enchaîner beaucoup de petites modifications.
Haiku 4.5 — le rapide. Le plus véloce de la famille. Parfait pour changer un mot, corriger une faute de frappe, ajuster une couleur. Ne lui confiez pas la construction du site.
En pratique : laissez Opus 5 pour tout ce qui compte — créer le projet, ajouter une page, réparer un déploiement cassé. Basculez sur Haiku 4.5 uniquement pour les retouches d'une ligne, quand vous savez exactement ce que vous voulez et où.
À côté du modèle, une seconde mention : Élevé. C'est le niveau de réflexion — le temps que Claude s'autorise à réfléchir avant d'agir. Laissez-la sur Élevé, c'est ce qui produit du travail soigné.
Claude s'est mis à coder sans poser les questions
Ça peut arriver : en mode « Accepter les modifications », il est câblé pour avancer.
Répondez simplement : « Arrête. Reprends à la phase 1 et pose-moi les questions. »
Il s'arrête, revient en arrière, et l'entretien démarre. Les fichiers déjà créés seront réécrits, ça n'a aucune importance à ce stade.
Comment bien répondre à l'entretien
Donnez du vrai. Vos prestations réelles, vos mots, vos clients. L'IA brode bien autour du concret et mal autour du vide. « J'aide les gens à aller mieux » produira un site creux ; « j'accompagne des femmes de 30 à 45 ans qui reprennent le sport après une grossesse » produira un site qui parle à quelqu'un.
Sur la direction visuelle, fiez-vous à votre réaction. Les quatre propositions sont volontairement typées. Celle qui vous fait dire « ah oui, ça » est la bonne. Ne cherchez pas à raisonner.
Sur les interdits, soyez précis. « Pas de photos de gens en costume qui se serrent la main », « pas de bleu, mon concurrent est bleu », « pas de ton commercial ». Chaque interdit vous rapproche de votre site plutôt que d'un site.
Ce que vous n'avez pas, dites-le. Pas encore de témoignages, pas de photos : Claude prévoira l'emplacement et le marquera « à compléter ». C'est mille fois mieux qu'un faux témoignage inventé.
Le résultat ne me plaît pas
Ne repartez pas de zéro. Répondez dans la même conversation, comme à un collaborateur :
« La page d'accueil est trop chargée. Réduis à trois sections, plus d'espace entre elles, des titres plus discrets. »
Une demande à la fois, en français, en décrivant ce que vous voyez plutôt qu'en devinant la cause. Il reprend et met à jour son travail.
Quand vous êtes satisfait — ou juste assez satisfait pour voir le résultat en ligne — passez à l'étape 4. Vous pourrez toujours modifier ensuite : c'est même tout l'intérêt du système.