Utiliser le design de n’importe quel site dans ChatGPT, Claude ou Gemini
Stylepack transforme n’importe quel site web public en pack de design : DESIGN.md, BEHAVIOR.md, design tokens, un thème Tailwind et des captures d’écran. Voici comment le confier à ChatGPT, Claude ou Gemini pour que le résultat ressemble au site que vous avez choisi et se comporte comme lui.
Étapes
Les chemins ci-dessous utilisent example.com. Sur une page de pack, ils portent le nom du site que vous avez choisi.
- Collez l’adresse du site dans Stylepack et téléchargez son pack. Les packs de la galerie sont prêts immédiatement.
- Décompressez le pack.
- Ouvrez une nouvelle conversation et joignez DESIGN.md, BEHAVIOR.md, tokens.css et les deux captures de la première vue (desktop-1440-fold.png et phone-390-fold.png).
- Collez le prompt ci-dessous et précisez ce que vous voulez construire.
Le prompt
Le prompt reste en anglais : il nomme les fichiers du pack, et votre IA le lit dans n’importe quelle langue.
Use the attached design pack files as the source of truth for how the UI looks and behaves. It was measured from https://example.com/.
1. Read DESIGN.md (colours, type, spacing, radii, shadows, components) and BEHAVIOR.md (hover, focus, tooltips, menus, motion, scrolling, forms, responsive rules, dark mode) before writing any code.
2. Look at every attached screenshot and match the composition, density, whitespace and image treatment. Tokens do not carry those; the screenshots do.
3. Style everything with the variables in tokens.css (or the Tailwind v4 theme in tailwind.css). Do not invent colours, radii, shadows or font sizes that are not in the pack.
4. Load the fonts named in DESIGN.md. Where a font is not freely available, use the stand-in it names at the same sizes and weights.
5. Match the breakpoints and hover, focus and motion rules in BEHAVIOR.md. Build both themes.
Now build: [describe the page or app you want]
When you are done, compare the result with the screenshots at desktop and phone widths, fix the biggest visual difference first, and repeat.