Prompts · Créer un site
Quatre directions visuelles avant de coder
Claude propose quatre styles vraiment différents pour ton projet (fond, accent, polices, raison), tu choisis, et il ne construit que celui-là. Le meilleur moyen d'éviter le site « par défaut ».
Le prompt, en français
Avant d'écrire la moindre ligne de code, je veux choisir une direction visuelle.
Le projet : [Ton projet, en une ou deux phrases]
Pour qui : [Pour qui]
Ce qui est imposé : [Ce qui est imposé (logo, couleur, police), ou « rien »]
Ce que j'aime, et pourquoi : [Des sites ou des univers que tu aimes, et pourquoi]
Ce que tu fais :
1. Si le dossier contient déjà un site, regarde-le d'abord (pages, styles, contenus) pour comprendre ce qui existe.
2. Propose quatre directions visuelles vraiment différentes, adaptées à ce projet. Pas quatre variantes du même style : change à chaque fois au moins le fond (clair ou sombre), la famille de police et la façon de composer la page.
3. Pour chaque direction, donne :
- un nom court ;
- la couleur de fond et la couleur d'accent (codes hexadécimaux), puis la palette complète de 4 à 6 couleurs ;
- la police des titres et celle du texte, avec leur caractère en une phrase ;
- l'idée de mise en page en une phrase, et un croquis de l'en-tête en texte (ASCII) ;
- le mouvement prévu, en une phrase ;
- pourquoi elle convient à ce public, en une phrase ;
- le rapport de contraste entre le texte principal et son fond.
4. Respecte ce qui est imposé dans chacune des quatre directions.
5. Écarte les choix par défaut : le dégradé violet sur fond blanc, le fond crème avec des titres à empattements et un accent terre cuite, le fond presque noir avec un seul accent vert acide, le kit de cartes arrondies toutes identiques. Si une direction s'en approche, explique pourquoi c'est un vrai choix pour ce projet.
6. Arrête-toi là et demande-moi laquelle je choisis. Je peux aussi en mélanger deux.
Après mon choix :
- Écris la direction retenue dans un fichier `DESIGN.md` à la racine (palette, polices, tailles de texte, espacements, rayons des coins, mouvement, ce qu'il faut éviter), pour que les prochaines sessions la gardent.
- N'implémente que cette direction. Si le skill frontend-design est installé, utilise-le.
- Tout le texte visible est en français, avec la typographie française : espace insécable avant « : », espace fine insécable avant « ; », « ! » et « ? », guillemets « ». Tu me parles en français.
C'est fini quand je vois les quatre directions côte à côte dans ta réponse, puis, après mon choix, le fichier `DESIGN.md` et une première page qui l'applique, vérifiée à 390 px et à 1440 px de large, et qui respecte `prefers-reduced-motion`.
4 cases sont vides : elles partiront entre crochets, et Claude te posera la question.
Voir la version anglaise, celle qui est copiée
Before writing a single line of code, I want to choose a visual direction.
The project: [Ton projet, en une ou deux phrases]
Audience: [Pour qui]
What is imposed: [Ce qui est imposé (logo, couleur, police), ou « rien »]
What I like, and why: [Des sites ou des univers que tu aimes, et pourquoi]
What you do:
1. If the folder already contains a site, look at it first (pages, styles, content) to understand what exists.
2. Propose four truly different visual directions tailored to this project. Not four variations of the same style: each time, change at least the background (light or dark), the typeface family and the way the page is composed.
3. For each direction, give:
- a short name;
- the background color and the accent color (hex codes), then the full palette of 4 to 6 colors;
- the heading typeface and the body typeface, with their character in one sentence;
- the layout idea in one sentence, and a text (ASCII) sketch of the header;
- the planned motion, in one sentence;
- why it suits this audience, in one sentence;
- the contrast ratio between the main text and its background.
4. Respect what is imposed in each of the four directions.
5. Rule out the default choices: purple gradient on white, cream background with serif headings and a terracotta accent, near-black background with a single acid-green accent, the kit of identical rounded cards. If a direction comes close to one of them, explain why it is a real choice for this project.
6. Stop there and ask me which one I choose. I may also mix two of them.
After my choice:
- Write the chosen direction in a `DESIGN.md` file at the root (palette, typefaces, type sizes, spacing, corner radii, motion, what to avoid), so that future sessions keep it.
- Implement only that direction. If the frontend-design skill is installed, use it.
- All visible text is in French, with French typography: a non-breaking space before ":", a narrow non-breaking space before ";", "!" and "?", « » quotes. Talk to me in French.
Done when I see the four directions side by side in your answer, then, after my choice, the `DESIGN.md` file and a first page that applies it, checked at 390 px and 1440 px wide, and that respects `prefers-reduced-motion`.Comment t’en servir
Colle ce prompt au tout début, dans le dossier de ton site (même vide), avant de demander quoi que ce soit d'autre à Claude. Il ne code rien : il te montre quatre propositions et attend ton choix.
Prends le temps de lire les quatre. Tu peux en garder une telle quelle, ou en mélanger deux (« le fond de la 2, les polices de la 4 »). Après ton choix, Claude écrit un fichier DESIGN.md : garde-le, c'est lui qui empêche les prochaines sessions de revenir au style par défaut.
La formation « Un site sur mesure, pas un site d'IA » montre pourquoi les sites faits par une IA se ressemblent, et comment lire ces quatre directions.
Pour comprendre tout ce que fait ce prompt, et l’adapter : la formation Un site sur mesure, pas un site d'IA.