# Extracteur DESIGN.md : analysez le design de n'importe quel site avec Claude > Guide pratique complet pour utiliser la compétence DESIGN.md Extractor dans Claude Code : extraction des tokens visuels, génération du fichier DESIGN.md, aperçu HTML interactif et export vers Tailwind CSS. ## 1. Qu'est-ce que le DESIGN.md Extractor et pourquoi extraire les design systems Dans le développement web moderne, les design systems restent souvent fermés ou fragmentés : ils sont enfouis dans des maquettes Figma privées, dispersés sur des dizaines de fichiers CSS ou n'existent que dans la mémoire du designer principal. Lorsqu'un développeur doit créer une interface inspirée d'une référence ou adopter rapidement le langage visuel d'un site client, il est contraint de passer des heures à copier manuellement les codes hexadécimaux via l'pipette des DevTools et à mesurer au réglet les rayons des boutons. **DESIGN.md Extractor** est une compétence (skill) spécialisée pour Claude Code qui automatise entièrement le processus de rétro-ingénierie du design web. L'agent analyse une page en direct, lit les tokens système directement depuis le DOM et le CSS, puis génère un artefact `DESIGN.md` lisible par machine ainsi qu'une vitrine visuelle autonome `design-preview.html`. ```mermaid flowchart TD A["URL сайту або назва бренду
'stripe.com'"] --> B["Claude Code + design-md-extractor"] B --> C["DOM & CSS Parser
(Зчитування :root змінних, обчислення стилів)"] C --> D["Екстракція 4 категорій токенів
(Кольори, шрифти, відступи, радіуси)"] D --> E["Генерація DESIGN.md
(YAML-специфікація + дизайн-бриф)"] D --> F["Збірка design-preview.html
(Офлайн UI-кіт на чистих токенах)"] E & F --> G["Експорт у Tailwind CSS / Figma / Кодову базу"] ``` ### Comparaison entre analyse manuelle et utilisation de la compétence | Étape de travail | Analyse manuelle via DevTools | Utilisation de DESIGN.md Extractor | | :--- | :--- | :--- | | **Collecte de la palette de couleurs** | Copie manuelle de dizaines de règles `color` et `background` individuelles | Extraction automatique de la hiérarchie complète (~35 tokens) depuis `:root` | | **Analyse typographique** | Mesures sélectives de `font-size` sur différents titres | Échelle standardisée à sept niveaux incluant interlignage et tracking | | **Grille et espacements** | Estimations subjectives des paddings et margins entre les blocs | Pas mathématique précis de la grille modulaire (ex. base 8px) | | **Format du résultat** | Notes éparses dans un carnet ou captures d'écran brutes | `DESIGN.md` standardisé et UI-kit interactif en HTML | | **Temps par projet** | De 3 à 6 heures de travail routinier | Moins de 60 secondes pour le cycle complet de génération | > [!NOTE] > La compétence interagit avec le code web ouvert de la page et extrait les paramètres effectifs utilisés par le navigateur pour le rendu, évitant ainsi toute supposition ou interprétation subjective. --- ## 2. Architecture et principe de fonctionnement : de l'URL au design system Le pipeline de travail de l'extracteur se compose de plusieurs phases interconnectées garantissant la précision de la collecte des données. ### Algorithme d'analyse étape par étape 1. **Chargement et rendu de la page :** Claude accède à l'URL cible, récupérant le document HTML complet et les feuilles de style connectées. 2. **Parsing des variables globales `:root` :** l'agent identifie les propriétés personnalisées CSS déclarées (`--color-primary`, `--font-sans`, `--spacing-unit`, `--radius-lg`). 3. **Calcul des Computed Styles :** pour les éléments sans variables CSS explicites, le script analyse les composants clés (boutons, titres, inputs, navigation), en lisant les valeurs calculées réelles du navigateur. 4. **Normalisation et structuration :** les couleurs brutes sont converties au format canonique HEX/OKLCH, et les polices sont mises en correspondance avec le catalogue Google Fonts ou les stacks système. 5. **Génération des artefacts :** création du fichier de spécification `DESIGN.md` et assemblage de la page HTML autonome de prévisualisation. > [!TIP] > Si le site utilise des frameworks utilitaires (par exemple, Tailwind CSS), la compétence reconnaît les classes `p-4`, `rounded-xl`, `bg-slate-900` et reconstruit la configuration de base du thème. --- ## 3. Les quatre dimensions des tokens visuels : couleurs, typographie, espacement, forme DESIGN.md Extractor extrait et structure les tokens visuels selon quatre catégories principales, créant un système cohérent. ### Palette de couleurs (Colors) L'extracteur construit une palette étendue d'environ 35 tokens fonctionnels selon les standards Material Design 3 et Radix UI : - **Accents de marque :** `primary`, `secondary`, `tertiary` et leurs paires contrastées `on-primary`, `on-secondary`. - **Surfaces et couches :** `background`, `surface`, `surface-variant`, `surface-container` (du niveau d'élévation le plus clair au plus sombre). - **États système :** `error`, `warning`, `success`, `info` accompagnés de leurs contrastes textuels respectifs. - **Teintes neutres :** `outline`, `outline-variant`, `scrim`, `shadow`. ### Hiérarchie typographique (Typography) Le système de polices est décrit via 7 niveaux standardisés : | Niveau de token | Usage | Taille typique | Hauteur de ligne | Graisse | | :--- | :--- | :--- | :--- | :--- | | **`headline-xl`** | Bannières principales, Hero H1 | 48px – 64px | 1.1 – 1.15 | Bold / ExtraBold | | **`headline-lg`** | Titres de section H2 | 32px – 40px | 1.2 | SemiBold | | **`title-md`** | Titres de cartes H3 | 20px – 24px | 1.3 | Medium / SemiBold | | **`body-lg`** | Paragraphes d'introduction, texte lead | 18px | 1.5 – 1.6 | Regular | | **`body-md`** | Texte principal de la page | 15px – 16px | 1.5 – 1.6 | Regular | | **`label-md`** | Boutons, onglets, badges | 13px – 14px | 1.2 – 1.4 | Medium | | **`label-sm`** | Légendes de champs, disclaimers | 11px – 12px | 1.3 | Regular / Medium | ### Grille modulaire et espacements (Spacing) La compétence détermine le module de base de la grille (généralement 4px ou 8px) et construit une échelle harmonieuse : - `xs` (4px), `sm` (8px), `md` (16px), `lg` (24px), `xl` (32px), `2xl` (48px). - Les paramètres globaux de mise en page sont également fixés : largeur maximale du conteneur (`max-width: 1280px`) et marges horizontales de sécurité (`gutter: 24px`). ### Géométrie des formes et profondeur (Shapes & Elevation) - **Rayons :** échelle d'arrondis allant de `none` (0px) à `full` (9999px pour les avatars ronds et les boutons pilule). - **Ombres (Box Shadows) :** ombres multi-niveaux pour créer de la profondeur (`shadow-sm`, `shadow-md`, `shadow-xl`), imitant l'élévation physique des cartes au-dessus du fond. --- ## 4. Anatomie de l'artefact DESIGN.md : spécification YAML et sections Prose Le fichier `DESIGN.md` est conçu comme un document hybride : sa partie supérieure est une structure YAML stricte pour les linters, compilateurs et générateurs de code, tandis que la partie inférieure constitue un brief de design professionnel destiné aux humains et aux assistants IA. ### Exemple de structure YAML-frontmatter ```yaml --- name: "Acme Cloud Platform" extractedFrom: "https://acme.example.com" version: "1.0.0" colors: primary: "#4F46E5" on-primary: "#FFFFFF" primary-container: "#EEF2FF" secondary: "#06B6D4" background: "#0F172A" surface: "#1E293B" surface-variant: "#334155" on-surface: "#F8FAFC" outline: "#475569" typography: fontFamilySans: "'Inter', -apple-system, sans-serif" fontFamilyMono: "'JetBrains Mono', monospace" headline-xl: fontSize: "48px" lineHeight: "1.1" fontWeight: "800" letterSpacing: "-0.02em" body-md: fontSize: "16px" lineHeight: "1.5" fontWeight: "400" letterSpacing: "0em" spacing: base: "8px" sm: "8px" md: "16px" lg: "24px" xl: "32px" shapes: borderRadiusSm: "4px" borderRadiusMd: "8px" borderRadiusLg: "16px" borderRadiusFull: "9999px" --- ``` ### Sept sections descriptives (Prose Sections) Après le bloc YAML, le fichier contient 7 sections techniques détaillées : 1. **Brand & Style Personality :** tonalité de la marque (par exemple, *"Minimalisme ingénierie strict dans le style Linear"* ou *"Fintech grand public chaleureux dans le style Stripe"*). 2. **Color Palette Rationale :** règles de combinaison des couleurs et exigences d'accessibilité de contraste WCAG AA. 3. **Typography Rhythm :** règles de hiérarchie des titres et alignement sur la ligne de base. 4. **Layout & Spacing Philosophy :** principes d'organisation de la grille, points de rupture adaptatifs (breakpoints). 5. **Elevation & Depth :** utilisation du stratifié, des dégradés et du flou d'arrière-plan (backdrop-filter blur). 6. **Shape & Border Language :** philosophie des arrondis, épaisseur des bordures et contours. 7. **Component Blueprints :** modèles prêts à l'emploi pour construire boutons, inputs, cartes et menus de navigation. --- ## 5. Prévisualisation interactive : architecture de design-preview.html En complément du document `DESIGN.md`, la compétence génère un fichier HTML autonome `design-preview.html`. Il s'agit d'une véritable vitrine de design interactive. ```mermaid flowchart LR subgraph design_preview_html["design-preview.html (Офлайн-вітрина)"] P["Колірна палітра
(Клік копіює HEX/RGB)"] T["Шрифтовий стенд
(Google Fonts лінійка)"] C["UI Sandbox
(Кнопки, картки, форми)"] S["Демо-екран
(Синтезований макет)"] end design_preview_html --> B["Відкриття у будь-якому браузері
(Без node_modules, без бекенду)"] ``` ### Avantages de la prévisualisation autonome - **Zero Dependencies :** le fichier ne nécessite ni Node.js, ni serveur web, ni bibliothèques tierces. Un double-clic sur le fichier dans Finder ou l'Explorateur suffit. - **Assets intégrés :** icônes et graphiques sont inclus sous forme Inline SVG ou Base64, garantissant le fonctionnement de la vitrine même sans connexion réseau. - **Copie des tokens en un clic :** cliquer sur n'importe quelle pastille de couleur copie automatiquement la valeur correspondante dans le presse-papiers. - **États interactifs :** tous les composants prennent en charge les pseudo-classes `:hover`, `:focus-visible`, `:active` et `:disabled`. --- ## 6. Installation et lancement de la compétence dans Claude Code La compétence `design-md-extractor` s'active via des commandes naturelles dans le dialogue ou par une invocation slash dédiée. ### Commandes de lancement dans le terminal :::tabs @tab Par URL directe ```text /design-md-extractor https://linear.app ``` @tab Par nom de marque ```text Create a comprehensive DESIGN.md and preview for Stripe dashboard ``` @tab Fichier local ou maquette ```text Analyze the design system from our prototype at http://localhost:3000 and export DESIGN.md ``` ::: ### Ce qui se passe après l'envoi de la commande 1. Claude Code lance les scripts internes de collecte des styles. 2. L'agent affiche la progression du scan : lecture des variables CSS, analyse des polices, mesure des composants. 3. Les fichiers `DESIGN.md` et `design-preview.html` apparaissent à la racine de votre repository. 4. L'agent propose d'ouvrir le fichier HTML dans le navigateur (`open design-preview.html`). --- ## 7. Intégration des tokens dans Tailwind CSS, Figma et React Les tokens obtenus s'intègrent facilement dans le processus de production réel sans réécriture manuelle des configurations. ### Export vers la configuration Tailwind CSS Utilisez les valeurs extraites directement dans `tailwind.config.ts` : ```typescript import type { Config } from 'tailwindcss'; const config: Config = { content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'], theme: { extend: { colors: { brand: { primary: '#4F46E5', 'on-primary': '#FFFFFF', surface: '#1E293B', background: '#0F172A', }, }, borderRadius: { sm: '4px', md: '8px', lg: '16px', }, fontFamily: { sans: ['Inter', 'sans-serif'], }, }, }, plugins: [], }; export default config; ``` ### Connexion via CSS Custom Properties Vous pouvez également importer les variables dans le fichier `globals.css` : ```css :root { --color-primary: #4f46e5; --color-on-primary: #ffffff; --color-surface: #1e293b; --radius-md: 8px; --spacing-base: 8px; } ``` ### Synchronisation avec Figma via Tokens Studio Le bloc YAML du fichier `DESIGN.md` peut être converti au format JSON (`tokens.json`) et importé dans le plugin **Tokens Studio for Figma**, créant instantanément un jeu de Figma Variables. --- ## 8. Scénarios commerciaux pratiques et cas d'utilisation L'extracteur de design systems est un outil indispensable pour le développement produit rapide et l'analyse concurrentielle. ### Quatre principaux scénarios d'application 1. **Rétro-ingénierie et analyse concurrentielle :** Obtenez la ventilation complète du style des leaders de l'industrie (Linear, Vercel, Apple, Stripe) avant même d'écrire la première ligne de votre propre CSS. 2. **Onboarding sur un nouveau projet client :** Au lieu de longs questionnaires clients sur le brandbook, il suffit de lancer l'extracteur sur leur site actuel pour obtenir une base de styles prête en une minute. 3. **Construction de MVP sans designer :** Les fondateurs de startups peuvent prendre l'harmonie visuelle d'un produit réussi comme base, adapter les couleurs d'accentuation et obtenir un aspect professionnel dès le premier jour. 4. **Alimentation des systèmes agentiques :** Le fichier `DESIGN.md` sert de contexte système pour d'autres assistants IA, garantissant que les nouvelles pages générées par les modèles respecteront strictement le design system défini. --- ## 9. Atelier pratique : extraction du design system et assemblage d'un composant Essayons de parcourir le cycle complet : de l'analyse du site à la création d'un nouveau composant React basé sur les tokens obtenus. ### Étape 1. Lancement de l'extraction du site cible Ouvrez le terminal dans votre projet et exécutez : ```text Extract design system from https://news.ycombinator.com or your preferred inspiration website ``` Claude collectera les données et générera `DESIGN.md`. ### Étape 2. Consultation de l'UI-kit généré Ouvrez la prévisualisation obtenue dans le navigateur web : ```bash open design-preview.html ``` Assurez-vous que la palette, la contrainte et les tailles typographiques correspondent à l'esthétique du site. ### Étape 3. Génération d'un composant via le fichier DESIGN.md Donnez une tâche à Claude Code avec un lien direct vers la spécification créée : ```text Using the tokens and component rules defined in DESIGN.md, create a responsive PricingCard component in src/components/PricingCard.tsx with primary and secondary CTA buttons. ``` Claude lira les rayons, ombres et couleurs exacts depuis `DESIGN.md` et créera un composant qui s'intègre organiquement au design system cible : ```typescript import React from 'react'; interface PricingCardProps { title: string; price: string; features: string[]; isPopular?: boolean; } export const PricingCard: React.FC = ({ title, price, features, isPopular }) => { return (

{title}

{price}
); }; ``` --- ## 10. Auto-vérification rapide et checklist finale Consolidez vos connaissances sur le fonctionnement de l'extracteur de design systems. ### Questions de contrôle > **1. D'où DESIGN.md Extractor tire-t-il les valeurs exactes des couleurs et des polices ?** > > > [!TIP] > > **Réponse :** La compétence lit les vraies propriétés personnalisées CSS (`:root`) et les styles calculés (Computed Styles) directement depuis le DOM du site en live, plutôt que de générer des valeurs aléatoirement. > **2. Quels sont les deux fichiers clés créés lors de l'exécution de la compétence ?** > > > [!TIP] > > **Réponse :** Le document lisible par machine `DESIGN.md` (avec en-tête YAML et 7 sections textuelles) et la page de prévisualisation autonome hors-ligne `design-preview.html`. > **3. Comment le fichier DESIGN.md aide-t-il lors du travail d'autres compétences IA de Claude ?** > > > [!TIP] > > **Réponse :** Il sert de contexte de design strict : les générateurs d'interfaces IA lisent les tokens depuis `DESIGN.md` et créent de nouveaux composants parfaitement alignés avec la charte graphique.