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 сайту або назва бренду<br><i>'stripe.com'</i>"] --> B["Claude Code + design-md-extractor"] B --> C["DOM & CSS Parser<br><i>(Зчитування :root змінних, обчислення стилів)</i>"] C --> D["Екстракція 4 категорій токенів<br><i>(Кольори, шрифти, відступи, радіуси)</i>"] D --> E["Генерація DESIGN.md<br><i>(YAML-специфікація + дизайн-бриф)</i>"] D --> F["Збірка design-preview.html<br><i>(Офлайн UI-кіт на чистих токенах)</i>"] 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

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.
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).
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.
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.
Génération des artefacts : création du fichier de spécification DESIGN.md et assemblage de la page HTML autonome de prévisualisation.

Astuce

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 :

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").
Color Palette Rationale : règles de combinaison des couleurs et exigences d'accessibilité de contraste WCAG AA.
Typography Rhythm : règles de hiérarchie des titres et alignement sur la ligne de base.
Layout & Spacing Philosophy : principes d'organisation de la grille, points de rupture adaptatifs (breakpoints).
Elevation & Depth : utilisation du stratifié, des dégradés et du flou d'arrière-plan (backdrop-filter blur).
Shape & Border Language : philosophie des arrondis, épaisseur des bordures et contours.
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["Колірна палітра<br><i>(Клік копіює HEX/RGB)</i>"] T["Шрифтовий стенд<br><i>(Google Fonts лінійка)</i>"] C["UI Sandbox<br><i>(Кнопки, картки, форми)</i>"] S["Демо-екран<br><i>(Синтезований макет)</i>"] end design_preview_html --> B["Відкриття у будь-якому браузері<br><i>(Без node_modules, без бекенду)</i>"]

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

Ce qui se passe après l'envoi de la commande

Claude Code lance les scripts internes de collecte des styles.
L'agent affiche la progression du scan : lecture des variables CSS, analyse des polices, mesure des composants.
Les fichiers DESIGN.md et design-preview.html apparaissent à la racine de votre repository.
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

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.
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.
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.
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<PricingCardProps> = ({ title, price, features, isPopular }) => { return ( <div className={`p-6 rounded-[16px] border ${isPopular ? 'border-[#4F46E5] bg-[#1E293B]' : 'border-[#475569] bg-[#0F172A]'} text-[#F8FAFC]`}> <h3 className="text-xl font-semibold mb-2">{title}</h3> <div className="text-4xl font-extrabold mb-4">{price}</div> <ul className="space-y-3 mb-6"> {features.map((feat, idx) => ( <li key={idx} className="text-sm text-[#94A3B8] flex items-center gap-2"> ✓ {feat} </li> ))} </ul> <button className="w-full py-3 rounded-[8px] bg-[#4F46E5] hover:bg-[#4338CA] text-white font-medium transition-colors"> Почати користування </button> </div> ); };

10. Auto-vérification rapide et checklist finale

Consolidez vos connaissances sur le fonctionnement de l'extracteur de design systems.

Questions de contrôle

Astuce

1. D'où DESIGN.md Extractor tire-t-il les valeurs exactes des couleurs et des polices ?

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.

Astuce

2. Quels sont les deux fichiers clés créés lors de l'exécution de la compétence ?

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.

Astuce

3. Comment le fichier DESIGN.md aide-t-il lors du travail d'autres compétences IA de Claude ?

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.