Prompts · Créer un site
Est-ce que mon site « fait IA » ? L'audit et les corrections
Claude passe ta page au crible des défauts typiques des sites générés (polices, couleurs, cartes, animations, textes creux), classe ce qu'il trouve, puis corrige ce que tu valides.
Le prompt, en français
Audite cette page : [La page à auditer : fichier ou adresse locale]. Je veux savoir si elle ressemble à un site généré « par défaut », puis la corriger.
Ma marque en trois mots : [Trois mots qui décrivent ta marque].
À ne pas toucher : [Ce qu'il ne faut surtout pas changer].
1. Regarder
Lis le code de la page et de ses styles. Si tu as un outil de navigateur, fais des captures à 390 px et à 1440 px de large, et regarde-les vraiment.
2. Chercher les signes d'un design par défaut, entre autres :
- polices : Inter, Roboto, Arial ou la police système partout ; une seule police pour tout, sans raison ;
- couleurs : dégradé violet ou bleu sur fond blanc ; fond crème avec titres à empattements et accent terre cuite ; fond presque noir avec un seul accent vif ; couleurs sans lien avec l'activité ;
- composition : cartes identiques aux coins arrondis et à l'ombre légère ; grille de trois blocs « icône, titre, phrase » ; grosse statistique dans l'en-tête ; numéros 01, 02, 03 sur des éléments sans ordre ;
- détails : petites étiquettes en majuscules espacées au-dessus des titres, flèche après chaque lien, un mot du titre mis en couleur, icônes décoratives partout ;
- mouvement : la même apparition en glissant sur chaque section, un effet de survol sur chaque carte ;
- textes : formules creuses (« Libérez votre potentiel », « Une solution innovante »), promesses sans preuve, texte de remplissage ;
- qualité : contraste insuffisant, focus clavier invisible, « réduire les animations » ignoré, défilement horizontal au téléphone, typographie anglaise dans un texte français.
3. Rendre le diagnostic
Un tableau : ce que tu as vu, où (fichier et ligne), pourquoi ça fait « par défaut », la gravité (forte, moyenne, légère), et la correction proposée, reliée à mes trois mots. Termine par les trois corrections qui changeraient le plus la page.
Arrête-toi là et attends que je choisisse ce que tu corriges.
4. Corriger
- Seulement ce que j'ai validé, sans toucher à ce que j'ai demandé de garder.
- Remplace chaque choix par défaut par un choix précis (code hexadécimal, nom de police, valeur exacte), pas par « plus sobre » ou « plus moderne ».
- Si le skill frontend-design est installé, utilise-le.
- Garde le texte visible en français, avec la typographie française : espace insécable avant « : », espace fine insécable avant « ; », « ! » et « ? », guillemets « ». Ne réécris aucun de mes textes sans me montrer l'avant et l'après.
C'est fini quand tu me montres des captures avant et après aux deux tailles (si tu as un outil de navigateur), la liste de ce qui a changé fichier par fichier, et que les contrastes, le clavier et « réduire les animations » sont vérifiés. Tu me parles en français.
3 cases sont vides : elles partiront entre crochets, et Claude te posera la question.
Voir la version anglaise, celle qui est copiée
Audit this page: [La page à auditer : fichier ou adresse locale]. I want to know whether it looks like a "default" generated site, then fix it.
My brand in three words: [Trois mots qui décrivent ta marque].
Do not touch: [Ce qu'il ne faut surtout pas changer].
1. Look
Read the code of the page and its styles. If you have a browser tool, take screenshots at 390 px and 1440 px wide, and really look at them.
2. Look for signs of a default design, including:
- typefaces: Inter, Roboto, Arial or the system font everywhere; a single typeface for everything, for no reason;
- colors: purple or blue gradient on white; cream background with serif headings and a terracotta accent; near-black background with a single bright accent; colors with no link to the business;
- composition: identical cards with rounded corners and a light shadow; a grid of three "icon, title, sentence" blocks; a big statistic in the header; numbers 01, 02, 03 on items that have no order;
- details: small spaced-out all-caps labels above headings, an arrow after every link, one word of the heading in color, decorative icons everywhere;
- motion: the same slide-in animation on every section, a hover effect on every card;
- copy: empty phrases ("Libérez votre potentiel", "Une solution innovante"), promises without proof, filler text;
- quality: insufficient contrast, invisible keyboard focus, reduced motion ignored, horizontal scroll on phones, English typography in French text.
3. Give the diagnosis
A table: what you saw, where (file and line), why it looks "default", severity (high, medium, low), and the proposed fix, tied to my three words. End with the three fixes that would change the page the most.
Stop there and wait for me to choose what you fix.
4. Fix
- Only what I approved, without touching what I asked you to keep.
- Replace each default choice with a precise choice (hex code, typeface name, exact value), not with "more sober" or "more modern".
- If the frontend-design skill is installed, use it.
- Keep the visible text in French, with French typography: a non-breaking space before ":", a narrow non-breaking space before ";", "!" and "?", « » quotes. Do not rewrite any of my texts without showing me the before and after.
Done when you show me before and after screenshots at both sizes (if you have a browser tool), the list of what changed file by file, and contrast, keyboard use and reduced motion are checked. Talk to me in French.Comment t’en servir
Lance d'abord ton site sur ton ordinateur (la commande habituelle de ton projet), puis ouvre Claude Code dans son dossier et colle le prompt. Si Claude a un outil de navigateur, il regarde la page comme un visiteur ; sinon, il se contente du code.
Il te rend un tableau : ce qu'il a vu, où, pourquoi ça fait « par défaut », et la correction proposée. Il s'arrête là. C'est toi qui choisis ce qu'il corrige : commence par les trois corrections qu'il met en tête, ce sont celles qui changent le plus la page.
Compare ensuite les captures avant et après. La formation « Un site sur mesure, pas un site d'IA » explique d'où viennent ces défauts et comment le skill officiel de design aide Claude à les éviter.
Pour comprendre tout ce que fait ce prompt, et l’adapter : la formation Un site sur mesure, pas un site d'IA.