Extraire le Système de Design du Code Frontend
Analysez le code source frontend pour extraire un document de système de design complet (DESIGN.md) qui capture le langage visuel du projet — couleurs, typographie, espacement, motifs de composants et principes de mise en page — directement à partir des fichiers source, sans avoir besoin de construire ou d'afficher l'application.
Pourquoi Cette Compétence Existe
La compétence design-md fonctionne à partir du HTML rendu. Mais vous avez souvent une base de code
et vous souhaitez comprendre son système de design avant même de pouvoir exécuter l'application —
peut-être que les dépendances sont manquantes, la construction est cassée, ou vous voulez simplement
un audit rapide. Cette compétence lit les fichiers source eux-mêmes : feuilles de style, fichiers de
composants, configurations de thème et configurations Tailwind. C'est plus rapide et fonctionne
partout.
Quand l'Utiliser
- L'utilisateur a une base de code frontend et souhaite extraire ou documenter son système de design
- L'utilisateur souhaite migrer l'identité visuelle d'un projet dans Stitch
- L'utilisateur demande d'« auditer le style » ou de « comprendre le langage de design » d'un dépôt
- L'utilisateur souhaite créer un DESIGN.md à partir du code source existant
- L'application ne peut pas être construite/rendue mais le code source est disponible
- L'utilisateur souhaite unifier ou réconcilier des styles incohérents dans une base de code
Prérequis
- Accès au répertoire source du projet frontend
- Aucune dépendance de construction ou d'exécution nécessaire — cette compétence lit uniquement les fichiers source
Flux de Travail
Phase 1 : Découverte du Projet
Commencez par comprendre sur quoi vous travaillez. Cela détermine les motifs d'extraction à utiliser.
1. Détecter le Framework et la Stack
Scannez la racine du projet pour les fichiers révélateurs :
| Fichier Indice | Framework / Outil |
|---|---|
package.json avec react | React / Next.js |
package.json avec vue | Vue / Nuxt |
package.json avec svelte | Svelte / SvelteKit |
package.json avec @angular/core | Angular |
tailwind.config.js/ts | Tailwind CSS |
postcss.config.js | Pipeline PostCSS |
styled-components ou @emotion dans les dépendances | CSS-in-JS |
Fichiers .css / .scss / .less uniquement | CSS / SASS simple |
theme.js / theme.ts / tokens.js | Fichiers de jetons de design |
Lisez package.json en premier — il révèle le framework, les outils CSS et les
bibliothèques de jetons de design (p. ex., style-dictionary, @chakra-ui/react,
@mui/material, ant-design). Ce contexte vous indique où chercher les
informations de style.
2. Cartographier l'Arborescence Source
Identifiez les répertoires et fichiers clés que vous allez analyser :
src/
├── components/ ← Styles au niveau des composants
├── styles/ ← Feuilles de style globales
├── theme/ ← Définitions de thème, jetons
├── assets/ ← Polices, images
├── app.css ← Styles racine
└── index.css ← CSS d'entrée
Vérifiez également :
tailwind.config.js/tailwind.config.ts— Couleurs, polices, espacement personnalisésglobals.css/global.css— Propriétés personnalisées CSS (variables)- Tout fichier
theme.*outokens.* - Configuration de bibliothèque de composants (p. ex.,
chakra-theme.ts,vuetify.config.ts)
3. Lire les Directives Spécifiques au Framework
Consultez la référence appropriée pour les motifs d'extraction :
- React / Next.js / Tailwind → references/react-tailwind.md
- Vue / Nuxt → references/vue.md
- Svelte / SvelteKit → references/svelte.md
- Angular → references/angular.md
- CSS / SASS / Less simple → references/plain-css.md
Ces références contiennent des motifs spécifiques au framework pour localiser les couleurs, la typographie, l'espacement et les styles de composants. Lisez celle qui correspond avant de continuer.
Phase 2 : Extraction Approfondie
Parcourez chaque dimension de design systématiquement. Pour chacune, collectez les données brutes à partir des fichiers source, puis synthétisez-les en langage descriptif.
L'objectif n'est pas de vider chaque propriété CSS — c'est de comprendre l'intention derrière les choix de style et de les décrire dans un langage humain et éditorial qu'un autre designer (ou Stitch) peut utiliser pour recréer la même sensation visuelle.
1. Thème Visuel & Atmosphère
Lisez les styles les plus larges en premier pour comprendre l'ambiance générale :
- Arrière-plan racine : Quel est l'arrière-plan du
bodyou de l'élément racine ? Crème clair (#f-range) signale aérien/propre ; foncé (#0-#2 range) signale mélancolique/dramatique. - Philosophie des espaces blancs : Les valeurs d'espacement sont-elles généreuses (32px+) ou serrées ? Vérifiez les valeurs de padding/margin sur les conteneurs racine, les wrappers de section et les composants de carte.
- Densité : Comptez les composants par page/section. Peu avec espace = minimal ; beaucoup serrés = dense en information.
- Température de couleur : Les neutres sont-ils chauds (crèmes, cuirs) ou froids (gris-bleus, ardoises) ?
- Sensation générale : Synthétisez en 1-2 phrases riches qui capturent l'ambiance.
Recherchez ces signaux dans le code source :
| Emplacement Source | Ce qu'il vous Indique |
|---|---|
background-color racine ou classes Tailwind bg-* sur les mises en page | Luminosité générale |
| Échelle d'espacement dans la config Tailwind ou les variables CSS | Philosophie des espaces blancs |
| Nombre de composants vs. padding des wrappers | Densité |
Nommage des propriétés personnalisées (--warm-* vs --cool-*) | Intention de température de couleur |
| Commentaires dans les fichiers de thème | Intention de design dans les mots du développeur |
2. Palette de Couleurs & Rôles
Extrayez chaque couleur unique de la base de code et attribuez des rôles fonctionnels. Recherchez à travers toutes les couches :
Où trouver les couleurs :
| Couche | Que Chercher |
|---|---|
| Propriétés personnalisées CSS | --color-*, --primary, --bg-* |
| Configuration Tailwind | theme.extend.colors |
| Fichiers de thème/jetons | Objets de couleur, palettes |
| Styles de composants | background-color, color, border-color |
| Styles en ligne/limités | Classes bg-*, text-* dans les templates |
| Objets de thème CSS-in-JS | Clés colors, palette |
Comment organiser : Regroupez les couleurs par fonction, pas par teinte :
- Fondation Primaire — Couleurs d'arrière-plan et de surface
- Accent & Interactif — Boutons d'appel à l'action, états actifs, liens
- Typographie & Hiérarchie de Texte — Texte primaire, secondaire, tertiaire
- États Fonctionnels — Succès, erreur, avertissement, info
Pour chaque couleur, créez un nom descriptif qui évoque le caractère de la couleur plutôt que sa valeur hexadécimale brute :
- ❌
#294056→ "Bleu" - ✅
#294056→ "Bleu-Navy Mat Foncé" — CTA principal, navigation active
La déduplication est importante. Les bases de code ont souvent des couleurs quasi identiques (p. ex.,
#333 et #2C2C2C). Consolidez-les sous un seul nom qui représente le mieux la
couleur intentionnelle.
3. Règles de Typographie
Extrayez le système typographique complet :
Familles de polices :
- Vérifiez
font-familyCSS,fontFamilyTailwind, liens Google Fonts, ou déclarations@font-facelocales. - Notez le caractère de chaque police : géométrique vs humaniste, sérif vs sans, la sensation qu'elle évoque.
Échelle typographique (hiérarchie) :
- Trouvez chaque niveau de titre (H1-H6) et le corps de texte, en notant :
font-size(en rem ou px)font-weight(valeur numérique + nom descriptif)letter-spacing(et pourquoi — élégance ? compacité ?)line-height(généreux pour la lisibilité ? serré pour l'affichage ?)
- Mappez l'utilisation des composants : Quel niveau de titre les fiches produits utilisent-elles ? Qu'en est-il des sections hero ?
Principes d'espacement :
- Comment l'espacement du texte se rapporte-t-il à l'échelle d'espacement globale ?
- Motifs d'interlettrage sur les titres vs le corps
- Philosophie de la hauteur de ligne (généreuse/détendue pour le corps, plus serrée pour l'affichage)
4. Styles de Composants
Analysez les 4-5 primitives UI les plus importantes :
Boutons :
- Rayon de bordure (et ce qu'il communique — ludique ? professionnel ? minimal ?)
- Schéma de couleurs pour les variantes primaire, secondaire et fantôme
- États survol/focus/actif et temporisation de transition
- Ratios de padding (horizontal vs vertical)
Cartes / Conteneurs :
- Rayon de bordure (souvent différent des boutons — légèrement plus arrondi)
- Stratégie d'ombre : plate, ombres subtiles au survol, ou toujours en hauteur ?
- Traitement de bordure : bordures fines, accents colorés, ou aucune ?
- Padding interne (généreux ou compact ?)
- Traitement des images dans les cartes (pleine largeur, avec marge, arrondies ?)
Navigation :
- Motif de mise en page (barre horizontale, barre latérale verticale, tiroir)
- Traitement typographique (majuscules, interlettrage, poids)
- Indicateurs d'état actif/survol (soulignement, couleur, arrière-plan)
- Comportement mobile (hamburger, navigation inférieure, tiroir)
Entrées & Formulaires :
- Style de bordure et comportement de l'état de focus
- Cohérence du style des coins avec les boutons
- Taille de padding et des cibles tactiles
Composants Spécifiques au Domaine :
- Identifiez 1-2 composants uniques à ce projet (p. ex., fiches produits, widgets de tableau de bord, bulles de chat) et décrivez leurs motifs de style.
5. Principes de Mise en Page
Extrayez le système structurel :
Grille & Structure :
- Largeur max du contenu (à partir du
max-widthsur les conteneurs) - Système de colonnes (CSS Grid, motifs Flexbox, points de rupture définis)
- Points de rupture responsifs (à partir des media queries ou de la config Tailwind)
Stratégie d'Espacement Blanc :
- Unité d'espacement de base (grille 8px ? 4px ? personnalisée ?)
- Marges de section (combien d'espace entre les sections principales)
- Padding de bordure (marges de page à différents points de rupture)
Alignement & Équilibre Visuel :
- Motifs d'alignement du texte (heros centrés, corps aligné à gauche)
- Ratios image/texte
- Distribution du poids visuel
Comportement Responsive :
- Mobile-first ou desktop-first ?
- Comment les grilles se replient-elles ? Échelle de padding ?
- Taille des cibles tactiles
6. Notes de Génération Stitch
Synthétisez l'extraction en prompts exploitables pour Stitch :
- Langage d'atmosphère : Traduisez l'ambiance en descripteurs naturels
- Références de couleurs : Listez les couleurs par nom descriptif + hexadécimal
- Prompts de composants : Écrivez 2-3 exemples de prompts qui recréeraient les composants clés dans Stitch
- Guide d'itération : Conseils pour affiner les écrans dans ce système de design
Phase 3 : Rédiger le DESIGN.md
Assemblez tout dans le format standard DESIGN.md. Placez-le dans
.stitch/DESIGN.md dans le répertoire du projet (créez le répertoire .stitch/
s'il n'existe pas).
[!IMPORTANT] Vous DEVEZ inclure le frontmatter YAML en haut du fichier avec les mappages
nameetcolors, exactement comme montré dans l'exemple à examples/DESIGN.md. Ces données structurées sont nécessaires pour que d'autres compétences puissent analyser le système de design.Ne pas inclure ce bloc YAML avec au moins les jetons de couleur de base est un échec dans l'utilisation correcte de cette compétence.
Utilisez le format de l'exemple à examples/DESIGN.md comme modèle. Le fichier doit commencer par le bloc YAML, suivi des sections markdown :
# Système de Design : [Nom du Projet]
**ID du Projet :** [Si connu, sinon omettre]
## 1. Thème Visuel & Atmosphère
[Description riche en 2 paragraphes de l'ambiance, de la philosophie et des caractéristiques clés]
## 2. Palette de Couleurs & Rôles
### Fondation Primaire
### Accent & Interactif
### Typographie & Hiérarchie de Texte
### États Fonctionnels
## 3. Règles de Typographie
### Hiérarchie & Poids
### Principes d'Espacement
## 4. Styles de Composants
### Boutons
### Cartes & [Conteneurs Spécifiques au Domaine]
### Navigation
### Entrées & Formulaires
### [Composants Spécifiques au Domaine]
## 5. Principes de Mise en Page
### Grille & Structure
### Stratégie d'Espacement Blanc
### Alignement & Équilibre Visuel
### Comportement Responsive & Tactile
## 6. Notes du Système de Design pour la Génération Stitch
### Langage à Utiliser
### Références de Couleurs
### Prompts de Composants
### Itération Incrémentale
Phase 4 : Intégration (Optionnelle)
Si l'utilisateur souhaite pousser le système de design dans Stitch :
- Transférez à la compétence
manage-design-systempour les appels MCP de création/mise à jour - Le DESIGN.md que vous avez écrit est l'entrée — la compétence manage-design-system gère l'intégration de l'API Stitch
Si l'utilisateur souhaite simplement le document, vous avez terminé après la Phase 3.
Liste de Contrôle Qualité
Avant de livrer le DESIGN.md, vérifiez :
- Chaque couleur a un nom descriptif, un code hexadécimal et un rôle fonctionnel
- La typographie inclut la famille de polices, la description du caractère et la hiérarchie complète
- Les styles de composants décrivent la forme, la couleur, les états et les transitions
- La mise en page inclut la largeur max, la grille, les points de rupture et la stratégie d'espacement
- Les notes de génération Stitch utilisent un langage naturel, pas de syntaxe CSS
- La section d'ambiance se lit comme une copie éditoriale, pas comme de la documentation technique
- Les couleurs quasi identiques sont consolidées
- Le document capture l'intention derrière le style, pas seulement les valeurs brutes
Conseils pour une Meilleure Extraction
- Lisez les commentaires et les messages de commit. Les développeurs documentent souvent l'intention
de design dans les commentaires de code (
/* section hero — aérée */) et les messages de commit. C'est de l'or pour comprendre le pourquoi. - Vérifiez les bibliothèques de jetons de design. Si le projet utilise
style-dictionary,@tokens-studio, ou similaire, ces fichiers sont la source la plus autorisée des valeurs de design. - Les fichiers de thème sont un signal plus fort que les styles de composants. Un
theme.tsqui définit une palette vous indique le système de design intentionnel ; des styles en ligne éparpillés dans les composants vous indiquent ce qui a réellement été livré. Les deux comptent, mais commencez par le thème. - La configuration Tailwind est un système de design. Si un projet a un
tailwind.config.jspersonnalisé, cela est le système de design — extrayez-en d'abord, puis vérifiez ponctuellement les composants pour les surcharges. - Les propriétés personnalisées CSS sont intentionnelles. Si un développeur a défini
--brand-primary, il vous dit que c'est un jeton de design. Respectez cela.