La passe de finition à faire avant de mettre n'importe quel site en ligne, quel que soit l'outil qui l'a construit. Le prompt complet à coller dans Claude, chaque point expliqué avec son avant/après, la version à garder dans ton projet, et le contrôle en 2 minutes.
Les outils d'IA ont tous appris sur les mêmes sites. Sans consigne, ils ressortent les mêmes réflexes : le dégradé violet, le bouton en pilule, une fusée en émoji, « +10 000 clients satisfaits » et un titre du type « Révolutionnez votre productivité ». Tes visiteurs ont vu ces sites cent fois. Ils les reconnaissent avant même de lire, et un site qui a l'air générique inspire moins confiance.
La bonne nouvelle : tout se corrige en une passe, avec le même outil qui l'a construit.
Ouvre ton projet dans Claude Code (dans le dossier du site), ou dans un projet claude.ai avec tes fichiers, puis colle :
Tu vas faire la passe de
finition de mon site avant sa
mise en ligne. Je ne veux pas
qu'il ait l'air fait par une
IA. Vérifie et corrige chacun
de ces 16 points, dans l'ordre,
et montre-moi chaque
changement.
CONTENU
1. Aucun faux avis, aucun faux
témoignage, aucun faux logo de
client. Si je ne t'en ai pas
donné de vrais, supprime la
section entière.
2. Aucun chiffre inventé
(nombre de clients, % de
satisfaction, années
d'expérience). Un chiffre reste
seulement si je te l'ai donné.
3. Supprime tous les tirets
cadratins et demi-cadratins des
textes. Remplace-les par une
virgule, deux-points ou un
point.
4. Titres courts, huit mots
maximum, sans formules creuses
du type « Révolutionnez
votre… » ou « Libérez le
potentiel de… ».
5. Aucune trace d'IA : pas de
badge « Made with… », pas de
filigrane, pas de phrase
oubliée du type « Bien sûr !
Voici… », pas de texte de
remplissage, et pas de balise
meta generator dans le code.
6. Pas d'images générées par
IA pour les personnes, les
produits ou l'équipe. Sans
vraie photo, mets un
emplacement vide marqué
[À FOURNIR].
DESIGN
7. Pas de dégradé violet, ni
violet vers bleu. Ne le
remplace pas par un autre
dégradé, et ne garde pas le
violet comme couleur
d'accent : prends [ma couleur
de marque], en couleur unie.
8. Un seul style de bouton pour
tout le site, avec un arrondi
cohérent avec les cartes et les
champs. Pas de boutons en
pilule partout.
9. Pas d'émojis dans
l'interface. De vraies icônes
SVG, toutes de la même famille.
10. Une animation au maximum
par section, et aucune si le
visiteur a demandé à les
réduire (prefers-reduced-motion).
11. Une police pour les titres
et une pour le texte, pas plus.
12. Contrastes lisibles : au
moins 4,5:1 pour le texte
normal et 3:1 pour le grand
texte. Jamais de texte gris sur
un fond coloré.
13. Une seule échelle
d'espacement pour tout le site,
pas de valeurs au hasard d'une
section à l'autre.
AVANT LA MISE EN LIGNE
14. Un favicon, et une image de
partage (Open Graph) avec un
titre et une description.
15. Une page 404 propre, aucun
lien mort, aucun bouton qui ne
mène nulle part.
16. Une page de
confidentialité, et des CGV si
je vends, reliées dans le pied
de page. Rappelle-moi de ne
rien mettre en ligne tant que
le site n'est pas sur mon
propre nom de domaine.
Règles : n'invente jamais de
contenu pour combler un vide,
mets [À FOURNIR]. Termine par
un tableau : point, statut, ce
que tu as changé, ce qu'il me
reste à fournir.Retire-lui le dégradé violet, il garde le violet en couleur unie (c'est ce qu'il a fait quand j'ai testé ce prompt), ou il passe à un dégradé bleu. Retire-lui les émojis, il mélange trois familles d'icônes. C'est pour ça que le prompt ne fait pas qu'interdire : il donne aussi la règle à suivre à la place (ta couleur de marque, une seule famille d'icônes, une police de titre, une échelle d'espacement). Remplace bien [ma couleur de marque] avant de coller.
J'ai passé ce prompt à Claude Code sur un petit site plein de tics (dégradé violet, pilules, émojis, faux avis, tirets longs, badge « Made with »). Il a traité les 16 points dans l'ordre, sans rien inventer : le titre, les fonctionnalités et la photo d'équipe sont revenus en [À FOURNIR], et il a créé la page 404, le favicon, et des squelettes de confidentialité et de CGV, à remplir toi-même. Il a aussi signalé ce qui n'était pas dans la liste : la page de mentions légales, et Google Fonts à déclarer dans ta politique de confidentialité.
<meta name="generator"> dans le code de la page, et le filigrane ou les métadonnées des images.mon-site.vercel.app crie « projet du week-end ». Un domaine en .fr ou .com coûte une dizaine d'euros par an : achète-le chez un registrar, puis branche-le dans les réglages de ton hébergeur (Vercel, Netlify, Lovable…). Claude ne peut pas l'acheter à ta place, d'où le rappel du point 16.#.Une consigne ponctuelle ne tient pas : au prochain texte ou à la prochaine page, les tirets longs et les émojis reviennent. Pour que Claude les applique à chaque fois, mets les règles dans le fichier CLAUDE.md à la racine de ton projet (Claude Code le lit à chaque session). Dans claude.ai, colle-les dans les instructions du projet.
## Style du site (à respecter
## à chaque modification)
- Jamais de tiret cadratin ni
demi-cadratin dans les
textes.
- Jamais d'émoji dans
l'interface. Icônes SVG,
une seule famille.
- Pas de dégradé violet ni
violet vers bleu. Couleur
d'accent : [ta couleur].
- Un seul style de bouton,
arrondi [ton arrondi].
- Titres de huit mots maximum.
- Une animation maximum par
section, et respecter
prefers-reduced-motion.
- Polices : [titre] et [texte].
- Espacements : 8, 16, 24, 32,
48 px uniquement.
- Jamais d'avis, de chiffre ou
d'image inventés : mettre
[À FOURNIR].À la fin, Claude te rend la liste des [À FOURNIR]. C'est ta liste de courses avant la mise en ligne :
Une fois la passe faite, vérifie toi-même, sur ton téléphone :
Ouvre la page d'accueil et regarde-la 3 secondes, comme un visiteur. Plus de violet, plus d'émoji, plus de pilule partout.
Sur ordinateur, Cmd+F (ou Ctrl+F) dans la page : cherche le tiret long (sur Mac : Alt+Maj+tiret) et les émojis que tu avais. Aucun résultat.
Envoie l'adresse du site dans une conversation WhatsApp avec toi-même : l'aperçu doit montrer une image et un titre.
Ton favicon apparaît à la place du globe gris.
Tape une adresse qui n'existe pas (ton-site.fr/test) : tu dois tomber sur une vraie page, avec un lien de retour.
Il n'en reste aucun sur le site en ligne.