Stylepack
Gratuit : 3 packs par jour, 10 avec un compte gratuit

Transformez tout site web en pack de design pour votre IA

Collez une URL. Stylepack mesure la page telle qu’elle s’affiche (couleurs, typographie, espacements, arrondis, ombres, composants) et son comportement : survol et focus, menus et infobulles, l’autre thème et quatre largeurs d’écran. Vous obtenez DESIGN.md, BEHAVIOR.md, des tokens, un thème Tailwind, un SKILL.md et des captures d’écran dans un seul zip.

Mesuré, pas deviné

Chaque valeur vient de la page en ligne, pondérée par ce qui est réellement à l’écran. Pas de déduction à partir d’une capture, pas de modèle qui invente un code hexadécimal.

Le comportement, pas seulement les couleurs

États de survol et de focus, placement et durée de fondu des infobulles, menus, apparition au défilement, éléments sticky, tableaux, formulaires, retours à la ligne du texte, mode sombre et chaque point de rupture.

Des formats prêts pour les agents

Le DESIGN.md de Google, un SKILL.md, des tokens W3C, des variables CSS et un thème Tailwind v4. Déposez le dossier dans votre projet et pointez votre agent dessus.

Extraire le design system de n’importe quel site

  1. Collez une URL

    N’importe quel site public, comme stripe.com. Les sous-domaines comme docs.stripe.com comptent comme des sites à part entière.

  2. Faites-le mesurer

    La page s’ouvre dans un vrai navigateur, à quatre largeurs d’écran et dans les deux thèmes. Moins d’une minute plus tard, le pack est prêt.

  3. Confiez-le à votre IA

    Téléchargez le zip, placez le dossier dans votre projet et demandez à votre agent de lire DESIGN.md et BEHAVIOR.md avant d’écrire du code.

Ce que contient le pack

Un seul dossier, prêt pour n’importe quel agent de code IA ou application de chat.

DESIGN.md
Le design system au format DESIGN.md de Google : couleurs, typographie, espacements, arrondis, ombres et composants.
BEHAVIOR.md
Survol, focus, infobulles, menus, animations, défilement, tableaux, formulaires, retours à la ligne du texte, règles responsive et mode sombre.
SKILL.md
Un skill pour Claude Code et Cursor qui guide l’agent dans le pack, dans le bon ordre.
tokens.json
Design tokens W3C (DTCG) pour Style Dictionary et les plugins de tokens Figma.
tokens.css
Chaque valeur en propriété personnalisée CSS.
tailwind.css
Les mêmes valeurs sous forme de bloc @theme Tailwind v4.
screenshots/
Le site en 1440, 1024, 768 et 390 pixels de large, plus l’autre thème quand il existe.
README.md, PROMPT.md
Comment confier le pack à chaque outil d’IA, et le prompt à coller.

Compatible avec les outils d’IA que vous utilisez déjà

Un guide pas à pas pour chacun :

Exemples de packs de design

Voir toute la galerie
Page d’accueil de linear.app
linear.app
Inter Variable + Berkeley Mono
SaaS et productivitéSombre + clair
Page d’accueil de resend.com
resend.com
domaine + aBCFavorit
Outils de développementSombre + clair
Page d’accueil de supabase.com
supabase.com
Manrope + Inter
Outils de développementClair + sombre
Page d’accueil de figma.com
figma.com
figmaSans + figmaMono
Outils de designClair
Page d’accueil de framer.com
framer.com
GT Walsheim Medium + Inter Variable
Outils de designSombre
Page d’accueil de apple.com
apple.com
SF Pro Text + SF Pro Display
Tech grand publicSombre + clair
Page d’accueil de arc.net
arc.net
Marlin Soft SQ + -apple-system
Tech grand publicClair

Questions fréquentes

Qu’est-ce que Stylepack ?

Stylepack (stylepack.ai) est un outil web gratuit qui transforme n’importe quel site web public en pack de design pour les agents de code IA : DESIGN.md, BEHAVIOR.md, SKILL.md, design tokens, un thème Tailwind et des captures d’écran, dans un seul zip.

Comment copier le design d’un site dans Cursor ou Claude Code ?

Collez l’adresse du site dans Stylepack et téléchargez le pack. Placez le dossier dans votre projet, puis demandez à l’agent de lire DESIGN.md et BEHAVIOR.md et de regarder les captures d’écran avant de construire quoi que ce soit. Chaque page de pack donne les étapes exactes et un prompt à copier.

Qu’est-ce que DESIGN.md ?

DESIGN.md est le format ouvert de Google pour décrire une identité visuelle aux agents de code dans un seul fichier Markdown : couleurs, typographie, espacements, arrondis, ombres et composants. Stylepack en écrit un pour n’importe quel site web public.

Comment extraire les design tokens d’un site web ?

Collez son adresse dans Stylepack. Le pack inclut tokens.json au format des design tokens du W3C (DTCG), les mêmes valeurs en propriétés personnalisées CSS dans tokens.css, et un thème Tailwind v4 dans tailwind.css.

Que couvre BEHAVIOR.md ?

Le comportement du site, pas seulement son apparence : états de survol et de focus, infobulles, menus, animations, défilement, tableaux, formulaires, retours à la ligne du texte, la mise en page en 1440, 1024, 768 et 390 pixels de large, et le mode sombre.

Est-ce gratuit ?

Oui. Vous avez droit à 3 packs par jour sans compte et à 10 par jour avec un compte gratuit. Les packs déjà présents dans la galerie ne comptent pas.

Avec quels outils d’IA cela fonctionne-t-il ?

Claude Code, Cursor, Codex, GitHub Copilot, Windsurf, Gemini CLI, ChatGPT, Claude, Gemini, v0, Lovable et Bolt, ou tout autre outil qui lit du Markdown et du CSS.

Stylepack est-il affilié aux sites de la galerie ?

Non. Un pack décrit le design public d’un site à titre de référence. Les logos, polices, images et textes appartiennent à leurs propriétaires, et vérifier les licences des polices vous incombe.