Site webClaudeGratuit
Le prompt maître pour un site premium avec Claude
Le prompt complet que j'utilise pour obtenir un site haut de gamme avec Claude, même sans savoir coder.
Le problème n'est presque jamais Claude : c'est une demande trop vague. Ce prompt lui donne un rôle, ton contexte, une direction artistique stricte et une méthode de travail section par section.
01
Le prompt à copier
Tu es directeur artistique et développeur front-end senior, spécialisé dans les sites vitrines haut de gamme. CONTEXTE - Projet : site vitrine pour [nom de l'entreprise], [activité en une phrase]. - Public visé : [qui sont les visiteurs : âge, attentes, niveau de gamme]. - Objectif principal du site : [ex. réserver une table / demander un devis / acheter]. - Ce qui rend l'entreprise unique : [2 ou 3 points forts]. DIRECTION ARTISTIQUE (à respecter strictement) - Couleurs : [couleur principale #XXXXXX], [couleur secondaire #XXXXXX], [couleur d'accent #XXXXXX]. N'utilise aucune autre couleur. - Police des titres : [ex. Playfair Display]. Police du texte : [ex. Inter]. - Ambiance : [ex. luxe, minimal, chaleureux]. Sites que j'aime : [1 ou 2 liens]. - Animations : discrètes et fluides (apparitions au défilement, survols soignés). Aucun effet gadget. CONTRAINTES TECHNIQUES - Un seul fichier HTML, avec le CSS et le JavaScript intégrés. - Pensé d'abord pour le mobile, puis pour la tablette et l'ordinateur. - Vrais textes en français (pas de « lorem ipsum »). Images libres de droits, ou emplacements clairement indiqués. - Accessibilité : contrastes lisibles, textes alternatifs sur les images, navigation au clavier. MÉTHODE DE TRAVAIL 1. Avant d'écrire le moindre code, propose-moi la liste des sections du site et ta direction visuelle en 5 lignes. Attends ma validation. 2. Ensuite, construis UNIQUEMENT la section d'accueil. Arrête-toi et attends mes retours. 3. On avancera section par section. À chaque étape, garde exactement le même style que les sections déjà validées. 4. À la fin de chaque section, relis ton travail et corrige toi-même tout ce qui n'est pas au niveau d'un site premium.
02
Les relances qui font la différence
Pour avancer sans perdre la cohérence.
Parfait. Passe à la section [nom], dans exactement le même style.Le titre d'accueil fait la première impression.
Rends le titre plus impactant : plus grand, plus d'espace autour, et une apparition animée.
Comparer vaut mieux qu'accepter le premier jet.
Cette section fait trop "modèle". Propose-moi 2 variantes plus haut de gamme.
La majorité des visiteurs arrivent sur mobile.
Vérifie l'affichage sur un téléphone de 375 px de large et corrige tout ce qui déborde.
À faire avant la mise en ligne.
Fais une relecture complète : couleurs, espacements, fautes, contrastes. Liste les problèmes, puis corrige-les.
03
Les 3 erreurs à éviter
Tout demander d'un coupClaude improvise et le style dérive.
Aucune couleur imposéeTu obtiens le même site générique que tout le monde.
Garder le premier jetDemande toujours une relecture.
Négliger le mobileVérifie l'affichage à 375 px de large.