Prompts · Créer un site
Le système de design d'un site existant
Claude relève les couleurs, polices, tailles, espacements et composants d'un site, en fait des variables prêtes à l'emploi, une page de référence et un résumé à garder dans CLAUDE.md.
Le prompt, en français
Je veux le système de design de ce site, écrit noir sur blanc : [Le site à analyser : dossier, adresse ou captures].
Ce que je veux en faire : [Ce que tu veux en faire ensuite].
1. Relever
Lis le code (ou regarde les captures) et relève, avec l'endroit où tu l'as trouvé :
- les couleurs (codes hexadécimaux), regroupées par rôle : fond, surface, texte, texte secondaire, accent, bordures, états (survol, focus, erreur) ;
- les polices, leurs graisses, et l'échelle des tailles de texte (titres, texte, petits textes) avec les hauteurs de ligne ;
- les espacements, les largeurs maximales, les rayons des coins, les ombres, les durées et les courbes des animations ;
- ces éléments : [Les éléments à relever], avec leurs différents états.
Si c'est une adresse web, récupère le HTML et les feuilles de style (avec un outil de navigateur ou `curl`) et dis-moi si tu n'y arrives pas.
Si une valeur se répète presque (par exemple #1A1A1A et #1B1B1B), signale-le et propose de les fusionner, sans le faire toi-même.
Si tu travailles depuis des captures, dis clairement quelles valeurs sont mesurées et lesquelles sont estimées.
Si c'est le site de quelqu'un d'autre, c'est pour comprendre et s'inspirer : on ne reprend ni ses textes, ni ses images, ni son logo.
2. Écrire
- Les variables au format : [Le format voulu pour les variables]. Des noms par rôle (`--couleur-texte`, `--espace-m`), pas par valeur (`--gris-clair`). Chaque variable porte en commentaire l'endroit où tu as trouvé sa valeur.
- Une page `guide-de-style.html` qui montre chaque couleur avec son rapport de contraste sur les fonds où elle sert, chaque taille de texte, chaque composant et ses états.
- Un résumé de 15 lignes au plus, à coller dans CLAUDE.md, pour que les prochaines sessions respectent ce système.
3. Contrôler
- Signale chaque couple texte et fond sous 4,5:1, et propose une correction proche de la couleur d'origine.
- Signale ce qui manque pour un système complet (un focus visible, une version sombre, une taille pour les petits textes…) sans l'inventer à ma place.
Commence par me dire combien de pages ou de fichiers tu vas lire, et pose-moi tes questions si la source est ambiguë.
Tu me parles en français. Les textes de la page de référence sont en français, avec la typographie française : espace insécable avant « : », espace fine insécable avant « ; », « ! » et « ? », guillemets « ».
C'est fini quand le fichier de variables, la page de référence et le résumé pour CLAUDE.md existent, et que chaque valeur renvoie à l'endroit où tu l'as trouvée.
4 cases sont vides : elles partiront entre crochets, et Claude te posera la question.
Voir la version anglaise, celle qui est copiée
I want the design system of this site, written down: [Le site à analyser : dossier, adresse ou captures].
What I want to do with it: [Ce que tu veux en faire ensuite].
1. Collect
Read the code (or look at the screenshots) and record, together with where you found it:
- the colors (hex codes), grouped by role: background, surface, text, secondary text, accent, borders, states (hover, focus, error);
- the typefaces, their weights, and the type scale (headings, body, small text) with line heights;
- spacing, maximum widths, corner radii, shadows, animation durations and easing curves;
- these elements: [Les éléments à relever], with their different states.
If it is a web address, fetch the HTML and the stylesheets (with a browser tool or `curl`) and tell me if you can't.
If a value is almost repeated (for example #1A1A1A and #1B1B1B), point it out and suggest merging them, without doing it yourself.
If you work from screenshots, say clearly which values are measured and which are estimated.
If it is someone else's site, the goal is to understand and get inspired: we do not reuse their texts, images or logo.
2. Write
- The variables in this format: [Le format voulu pour les variables]. Names by role (`--couleur-texte`, `--espace-m`), not by value (`--gris-clair`). Each variable carries a comment saying where you found its value.
- A `guide-de-style.html` page that shows each color with its contrast ratio on the backgrounds where it is used, each type size, each component and its states.
- A summary of 15 lines at most, to paste into CLAUDE.md, so that future sessions respect this system.
3. Check
- Flag every text and background pair below 4.5:1, and propose a fix close to the original color.
- Flag what is missing for a complete system (a visible focus state, a dark version, a size for small print…) without inventing it for me.
Start by telling me how many pages or files you are going to read, and ask me your questions if the source is ambiguous.
Talk to me in French. The texts of the reference page are in French, with French typography: a non-breaking space before ":", a narrow non-breaking space before ";", "!" and "?", « » quotes.
Done when the variables file, the reference page and the CLAUDE.md summary exist, and every value points back to where you found it.Comment t’en servir
Le plus fiable : ouvre Claude Code dans le dossier du site lui-même, pour qu'il lise le vrai code. Avec seulement des captures, Claude estime les valeurs à l'œil : il te dira lesquelles sont mesurées et lesquelles sont devinées.
Tu obtiens trois choses : un fichier de variables (couleurs, tailles, espacements) nommées par rôle, une page guide-de-style.html à ouvrir dans ton navigateur, et un résumé de quinze lignes à coller dans le CLAUDE.md du projet. Ce résumé est ce qui fait que la prochaine page construite par Claude ressemble au reste du site.
Si tu analyses le site de quelqu'un d'autre, c'est pour comprendre ses choix, pas pour le copier. La formation « Un site sur mesure, pas un site d'IA » montre comment transformer ces choix en ton propre style.
Pour comprendre tout ce que fait ce prompt, et l’adapter : la formation Un site sur mesure, pas un site d'IA.