Prompts · Créer un site

Le site d'une page pour ton activité

Un brief complet en huit parties : Claude pose ses questions, propose un plan, attend ton accord, puis construit une page en français, lisible au téléphone, et la vérifie.

Le prompt, en français

Tu vas créer le site d'une seule page pour mon activité. Voici le brief complet, en huit parties. 1. Contexte - Activité : [Ton activité, en une phrase] - Public : [Pour qui est le site] - L'action que le visiteur doit faire : [L'action principale du visiteur]. Toute la page mène à cette action. Le bouton qui la déclenche est visible sans faire défiler, au téléphone comme à l'ordinateur. 2. Contenus - Mes textes et mes photos : [Où sont tes textes et tes photos]. Lis-les avant tout. N'invente ni texte de remplissage (lorem ipsum), ni avis de client, ni chiffre, ni prix. S'il manque un texte, écris une proposition courte et marque-la « À VALIDER ». - Tout le texte visible est en français (fr-FR), avec la typographie française : espace insécable avant « : », espace fine insécable avant « ; », « ! » et « ? », guillemets « » avec des espaces insécables à l'intérieur, apostrophe ’. Parle-moi en français. 3. Direction visuelle - Ambiance : [L'ambiance voulue, en quelques mots] - Couleurs : [Tes couleurs (codes ou mots), ou « à proposer »]. Si j'ai écrit « à proposer », propose une palette de 4 à 6 couleurs en codes hexadécimaux, tirée de l'activité elle-même (ses matières, son lieu, ses outils). - Deux polices au plus, au caractère nettement différent (une pour les titres, une pour le texte), hébergées avec le site, sans appel à un service tiers. Évite Inter, Roboto, Arial et les polices système par défaut. - Un seul élément mémorable, qui vient de l'activité (une forme, une matière, une idée de mise en page), plutôt que des effets partout. 4. Structure Propose l'ordre des sections. Par défaut : un en-tête avec la promesse et l'action principale, ce que je propose, comment ça se passe, qui je suis, les informations pratiques (adresse, horaires, contact), un rappel de l'action, et un pied de page avec les mentions légales. 5. Contraintes techniques - Si le dossier contient déjà un projet, utilise sa pile technique. Sinon : HTML, CSS et JavaScript, sans framework et sans étape de construction. - Images en WebP ou AVIF, avec leur largeur et leur hauteur indiquées, et un texte alternatif en français. - Contraste du texte d'au moins 4,5:1 (7:1 visé pour le texte courant), focus clavier visible, zones à toucher d'au moins 44 px. - Mouvement : un seul moment orchestré à l'arrivée, avec `transform` et `opacity` seulement. Avec `prefers-reduced-motion: reduce`, tout s'affiche sans animation. - Aucun traceur, aucun cookie, aucune ressource chargée depuis un autre site. 6. À éviter Le dégradé violet sur fond blanc, les cartes toutes identiques aux coins arrondis, les petites étiquettes en majuscules au-dessus de chaque titre, la grosse statistique dans l'en-tête, la flèche après chaque lien, la même apparition en glissant sur chaque section. 7. Méthode - Avant de coder : reformule le brief en cinq lignes et pose-moi tes questions. Si une réponse te bloque, attends-la. - Présente ensuite ton plan : la palette (codes hexadécimaux), les polices et leur rôle, l'échelle des tailles de texte, un croquis de la page en texte (ASCII). Relis ce plan en cherchant ce qui ressemble à une page par défaut, change-le, puis attends mon accord. - Si le skill frontend-design est installé, utilise-le. - Construis ensuite section par section. 8. C'est fini quand - La page s'affiche sans défilement horizontal à 390 px et à 1440 px de large. Si tu as un outil de navigateur, fais des captures aux deux tailles, regarde-les et corrige ce qui ne va pas. Sinon, dis-moi comment vérifier moi-même. - Tout le texte visible est en français, avec la typographie française. - Les contrastes sont vérifiés : donne-moi le rapport de chaque couple texte et fond. - La page marche au clavier et avec « réduire les animations ». - Tu me donnes la liste des textes marqués « À VALIDER » et la commande pour ouvrir la page sur mon ordinateur.

6 cases sont vides : elles partiront entre crochets, et Claude te posera la question.

Voir la version anglaise, celle qui est copiée

You are going to build a one-page website for my business. Here is the full brief, in eight parts.

1. Context
- Business: [Ton activité, en une phrase]
- Audience: [Pour qui est le site]
- The one action visitors must take: [L'action principale du visiteur]. The whole page leads to this action. The button that triggers it is visible without scrolling, on phones and on desktop.

2. Content
- My texts and photos: [Où sont tes textes et tes photos]. Read them first. Do not invent filler text (lorem ipsum), customer reviews, figures or prices. If a text is missing, write a short proposal and mark it "À VALIDER".
- All visible text is in French (fr-FR), with French typography: a non-breaking space before ":", a narrow non-breaking space before ";", "!" and "?", « » quotes with non-breaking spaces inside, and the ’ apostrophe. Talk to me in French.

3. Visual direction
- Mood: [L'ambiance voulue, en quelques mots]
- Colors: [Tes couleurs (codes ou mots), ou « à proposer »]. If I wrote "à proposer", propose a palette of 4 to 6 hex colors drawn from the business itself (its materials, its place, its tools).
- At most two typefaces with clearly different characters (one for headings, one for body text), self-hosted with the site, with no call to a third-party service. Avoid Inter, Roboto, Arial and default system fonts.
- One memorable element that comes from the business (a shape, a material, a layout idea), rather than effects everywhere.

4. Structure
Propose the section order. Default: a header with the promise and the main action, what I offer, how it works, who I am, practical information (address, opening hours, contact), a reminder of the action, and a footer with the legal notices.

5. Technical constraints
- If the folder already contains a project, use its stack. Otherwise: plain HTML, CSS and JavaScript, no framework and no build step.
- Images in WebP or AVIF, with width and height set, and alt text in French.
- Text contrast of at least 4.5:1 (aim for 7:1 for body text), visible keyboard focus, touch targets of at least 44 px.
- Motion: one orchestrated moment on arrival, using only `transform` and `opacity`. With `prefers-reduced-motion: reduce`, everything appears without animation.
- No trackers, no cookies, no resource loaded from another site.

6. Avoid
Purple gradients on white, identical rounded cards, small all-caps labels above every heading, the big statistic in the header, an arrow after every link, the same slide-in animation on every section.

7. Process
- Before coding: restate the brief in five lines and ask me your questions. If an answer blocks you, wait for it.
- Then present your plan: the palette (hex codes), the typefaces and their roles, the type scale, a text (ASCII) sketch of the page. Review this plan for anything that looks like a default page, change it, then wait for my approval.
- If the frontend-design skill is installed, use it.
- Then build section by section.

8. Done when
- The page shows no horizontal scroll at 390 px and 1440 px wide. If you have a browser tool, take screenshots at both sizes, look at them and fix what is wrong. Otherwise, tell me how to check it myself.
- All visible text is in French, with French typography.
- Contrast is checked: give me the ratio of each text and background pair.
- The page works with the keyboard and with reduced motion.
- You give me the list of texts marked "À VALIDER" and the command to open the page on my computer.

Comment t’en servir

Range d'abord tes textes et tes photos dans le dossier du site : une page sans vrais contenus finit toujours par ressembler à un modèle. Ouvre ce dossier dans ton terminal, lance claude, puis colle le prompt.

Claude reformule ta demande et te pose ses questions. Il propose ensuite un plan (couleurs, polices, croquis de la page) et attend ton accord avant d'écrire le code. Si tu as installé le skill officiel de design (/plugin install frontend-design@claude-plugins-official), il s'en sert pour éviter le look « fait par une IA ».

À la fin, ouvre la page sur ton téléphone, active « réduire les animations » dans les réglages de ton système, et relis chaque texte marqué « À VALIDER ». La formation « Un site sur mesure, pas un site d'IA » explique chacune des huit parties du brief.

Pour comprendre tout ce que fait ce prompt, et l’adapter : la formation Un site sur mesure, pas un site d'IA.