stitch::extract-design-mdpar Google Labs

Stitch Extract Design MD Skill.

Un skill Claude Code et Codex pour le travail de marque et de design system : extrait un DESIGN.md complet depuis le code source frontend dans n'importe quel framework.

Marque et design systems
DESIGN.md

Télécharger OpenDesign Voir le guide d'utilisation

google-labs-code/stitch-skills · plugins/stitch-design/skills/extract-design-md/SKILL.mdSKILL.md

--- name: stitch::extract-design-md description: - Extract a comprehensive design system (DESIGN.md) directly from frontend source code — React, Vue, Svelte, Angular, plain HTML/CSS, or any web framework. Analyzes component files, stylesheets, Tailwind configs, theme definitions, and design tokens to produce a rich, Stitch-compatible design system document. Use this skill whenever the user wants to reverse-engineer a design system from an existing codebase, audit … --- ## Why This Exists ## When to Use ## Prerequisites ## Workflow ## 1. Visual Theme & Atmosphere ## 2. Color Palette & Roles

Front matter et titres de section lus depuis le fichier source le 14/09/2026 · 13 970 caractères au total

01 Ce qu'il fait

Ce que fait le Skill stitch::extract-design-md dans Claude Code et Codex

Résumé, workflow et sorties, tous lus dans le SKILL.md du skill.

D'après le SKILL.mdLu le 14-09-2026 · pas une exécution enregistrée

Dans les termes du Skill

Ce skill lit une base de code frontend et rédige un DESIGN.md qui capture son langage visuel, sans construire ni faire le rendu de l'application. Il détecte le framework à partir de package.json et des fichiers de configuration (React, Vue, Svelte, Angular, Tailwind, CSS-in-JS, CSS pur), puis traite l'atmosphère, la palette de couleurs et ses rôles, la typographie, les styles de composants, les principes de mise en page, et les notes pour la génération Stitch.

Le résultat est écrit dans .stitch/DESIGN.md et doit s'ouvrir avec un bloc de frontmatter YAML contenant name et un mapping colors, car d'autres skills le parsent. Destiné aux designers et développeurs qui font de la rétro-ingénierie, un audit ou une migration du design system d'un projet existant.

Ce qu'il produit

Un document DESIGN.md assemblé selon le format standard du design system.
Un bloc de frontmatter YAML avec name et un mapping colors en haut de ce fichier, suivi des sections markdown.
Une dernière section de notes sur le design system pour la génération Stitch, couvrant le langage, les références de couleurs et les prompts de composants.

Voir l'exemple de prompt ↗

Fonctionnement

01
Détecter le Framework et la Stack
Scanner la racine du projet à la recherche de fichiers révélateurs tels que package.json, tailwind.config.js, postcss.config.js, theme.js ou tokens.js, puis lire package.json pour connaître le framework, l'outillage CSS et les bibliothèques de design token éventuelles.
02
Lire la Référence du Framework Correspondant
React/Next/Tailwind, Vue/Nuxt, Svelte, Angular et CSS pur disposent chacun d'un fichier de référence avec des motifs spécifiques au framework pour localiser les couleurs, la typographie et l'espacement.
03
Extraire la Palette de Couleurs et Attribuer les Rôles
Les couleurs proviennent des propriétés personnalisées CSS, de la configuration Tailwind, des fichiers de thème, des styles de composants, des classes scopées et des objets CSS-in-JS, puis sont regroupées par fonction plutôt que par teinte.
04
Analyser les Composants et la Mise en Page
Le skill examine les boutons, cartes, la navigation, les champs de saisie et les composants spécifiques au domaine, ainsi que la grille, l'espace blanc, l'alignement et le comportement responsive.
05
Rédiger le DESIGN.md
Tout est assemblé selon le format standard de DESIGN.md et écrit dans un répertoire .stitch créé si nécessaire.
06
Transmettre Optionnellement à Stitch
Si l'utilisateur souhaite que le design system soit poussé vers Stitch, le fichier DESIGN.md rédigé devient l'entrée du skill manage-design-system.

02 Trouvez celui qui vous convient

Quand utiliser le skill stitch::extract-design-md

Utilisez le skill stitch::extract-design-md dans Claude Code ou Codex lorsque le travail concerne la marque et le design system de ce type. L'adéquation et les limites ci-dessous sont tirées du fichier du skill.

Bon choix

Vous disposez d'une base de code frontend et souhaitez en extraire ou documenter le design system à partir de la source.
L'application ne peut pas être compilée ni rendue, mais les fichiers source sont disponibles.
Vous souhaitez migrer l'identité visuelle existante d'un projet vers Stitch.
Le style dans une base de code est incohérent et doit être unifié ou réconcilié.

Connaître les limites

Ce n'est pas la voie du HTML rendu ; c'est ce que fait le skill design-md séparé à partir du HTML rendu.
Il ne peut pas fonctionner sans accès au répertoire source du projet frontend.

Quoi fournir

Fichiers de thème ou de tokens, s'ils existentPointer vers des fichiers theme. ou tokens. fournit la source la plus fiable des valeurs de design.
Nom du projet, et ID si connuLe titre du document utilise le nom du projet ; l'ID du projet est inclus lorsqu'il est disponible, et omis sinon.
Une décision concernant le push vers StitchSi l'utilisateur souhaite que le design system soit poussé vers Stitch, le workflow se poursuit après la Phase 3 jusqu'à la remise d'intégration.

03 Dans le skill

Règles que le skill stitch::extract-design-md donne à Claude Code et Codex

8 instructions concrètes, valeurs par défaut et limites que le SKILL.md fixe pour l'agent — la partie du fichier qui change le résultat.

Le frontmatter YAML est obligatoire
Le fichier doit commencer par un bloc YAML contenant name et un mapping colors, conforme à examples/DESIGN.md.
Nommer les couleurs par caractère, pas par teinte
Chaque couleur reçoit un nom descriptif qui évoque son apparence, ainsi #294056 devient « Deep Muted Teal-Navy » plutôt que « Blue ».
Consolider les couleurs quasi-identiques
Les quasi-doublons tels que #333 et #2C2C2C sont fusionnés sous le nom unique qui représente le mieux la couleur voulue.
Partir de la configuration Tailwind
Un tailwind.config.js personnalisé est traité comme le design system lui-même, dont on extrait en premier, les composants étant ensuite vérifiés ponctuellement pour d'éventuelles surcharges.
Les fichiers de thème l'emportent sur les styles de composants
Un fichier de thème définissant une palette révèle le design system voulu, tandis que des styles inline dispersés ne montrent que ce qui a réellement été livré.
Traiter les propriétés personnalisées CSS comme une intention
Une variable comme --brand-primary est un token de design délibéré, et non une valeur accidentelle, et doit être respectée comme telle.
Rédiger les notes Stitch en langage naturel
Les notes de génération décrivent les composants en prose plutôt qu'en collant de la syntaxe CSS ou des propriétés brutes.
Conserver l'atmosphère éditoriale
La section atmosphère est rédigée comme un texte éditorial sur l'ambiance et la philosophie, pas comme une documentation technique.

04 Mettez-le en pratique

Installez stitch::extract-design-md dans Claude Code ou Codex

Une commande npx skills add, puis une première tâche dans votre agent et une checklist pour le résultat.

Ajoutez stitch::extract-design-md à Claude Code, Codex ou votre agent

Exécutez-la dans votre projet ; l'installateur demande à quel agent l'ajouter.

Terminal

npx skills add https://github.com/google-labs-code/stitch-skills --skill stitch::extract-design-md

Forme générique de la CLI skills pour plugins/stitch-design/skills/extract-design-md/SKILL.md ; le dépôt peut documenter son propre chemin.

Donnez au Skill une première tâche de brand et de design-system

Rédigé dans les termes propres du skill ; remplacez les parties entre crochets par votre contenu.

Starter prompt

Pull the design system out of [./src] for me — it's a Vue app with a theme.ts and some SCSS, and the dev server won't start right now. Group the colors by role, not by hue, give near-duplicates one descriptive name, and cover typography, buttons, cards, navigation and inputs. Write it to .stitch/DESIGN.md with the YAML frontmatter, and finish with a few Stitch generation prompts.

Source : rédigé à partir du SKILL.md, dans les termes propres du skill.

Vérifiez le premier résultat

Ce que le SKILL.md lui-même présente comme un résultat correct :

Chaque couleur a un nom descriptif, un code hexadécimal et un rôle fonctionnel.
La typographie couvre la famille de police, une description des caractères et la hiérarchie complète.
Les styles de composants indiquent la forme, la couleur, les états et les transitions.
La mise en page précise la largeur maximale, la grille, les points de rupture et la stratégie d'espacement.
Le document capture l'intention derrière le style plutôt que de simples valeurs brutes.

Dans OpenDesign importez stitch::extract-design-md depuis son lien SKILL.md : Plugins → Add → Skill → Import from link, puis sélectionnez-le dans la barre supérieure.

Télécharger OpenDesign Lire le démarrage rapide

05 Open source, traçable

Source, licence et vérification

D'où proviennent les faits de cette page et quand ils ont été vérifiés pour la dernière fois.

Author: Google Labs
Repository: github.com/google-labs-code/stitch-skills Branche main
Fichier du skill: plugins/stitch-design/skills/extract-design-md/SKILL.md Somme de contrôle du contenu enregistrée lors de la vérification ; commit 0337446
License: Apache-2.0 D'après LICENSE.
Étoiles du dépôt: 8 304 GitHub snapshot taken 2026-09-14 for the whole google-labs-code/stitch-skills repository, which contains 12 skills in this catalog. Not a rating or usage count for stitch::extract-design-md.
Vérifié par OpenDesign: 2026-09-14 Le fichier source, le chemin, le texte de licence et le nombre d'étoiles ont été vérifiés. Non intégré dans OpenDesign main (vérifié le 2026-08-28) ; aucune exécution en conditions réelles n'a été enregistrée sur cette page.

Dans le SKILL.md

Pourquoi cela existeLire la source est plus rapide que le HTML rendu et fonctionne même quand la build est cassée.
Quand l'utiliserDéclencheurs : extraire, documenter, auditer, migrer un design system, unifier des styles incohérents.
PrérequisAccès au répertoire source uniquement ; aucune dépendance de build ou d'exécution requise.
WorkflowQuatre phases : découverte du projet, extraction approfondie, rédaction du DESIGN.md, intégration Stitch optionnelle.
Liste de vérification qualitéPoints de contrôle pour les couleurs, la typographie, les composants, la mise en page, le langage, la déduplication et l'intention.
Conseils pour une meilleure extractionExploitez les commentaires du code, privilégiez les bibliothèques de tokens et les fichiers de thème, traitez la config Tailwind comme le système.

Description du skill lui-même

« Extrait un design system complet (DESIGN.md) directement du code source frontend — React, Vue, Svelte, Angular, HTML/CSS pur, ou n'importe quel framework web. Analyse les fichiers de composants, les feuilles de style, les configs Tailwind, les définitions de thème et les design tokens pour produire un document de design system riche et compatible Stitch. Utilisez ce skill chaque fois que l'utilisateur veut faire de la rétro-ingénierie d'un design system à partir d'une base de code existante, auditer le langage visuel d'un projet, extraire les design tokens de fichiers source ou comprendre les patterns de style dans un dépôt frontend — même s'il demande simplement « à quoi ressemble cette app ? » ou « extrais le design de ce code ».

Description front-matter du SKILL.md. Le fichier complet fait environ 13 970 caractères. Lire le fichier complet sur GitHub.

06 Avant d'installer

Questions sur le skill stitch::extract-design-md

Les réponses proviennent du SKILL.md tel que lu le 2026-09-14, et non d'une exécution enregistrée.

Dois-je installer des dépendances ou faire fonctionner l'application au préalable ?

Non. Le skill lit uniquement les fichiers source et ne nécessite aucune dépendance de build ou d'exécution, il fonctionne donc même si des dépendances manquent ou si la build est cassée.

Quels frameworks et configurations de style peut-il gérer ?

React, Vue, Svelte, Angular, HTML/CSS simple et tout framework web, y compris les configs Tailwind, le CSS-in-JS et les fichiers de thème ou de tokens. Les modèles d'extraction spécifiques aux frameworks se trouvent dans des fichiers de référence qu'il consulte pour React/Tailwind, Vue, Svelte, Angular et le CSS simple.

Pourquoi le DESIGN.md a-t-il besoin d'un frontmatter YAML ?

Ce bloc porte le nom et le mapping des couleurs sous forme de données structurées que d'autres skills analysent. L'omettre, ou omettre les tokens de couleur principaux, constitue une mauvaise utilisation du skill.

Peut-il envoyer le design system finalisé vers Stitch ?

Cette étape est optionnelle et gérée par un autre skill : la phase 4 transmet la main à manage-design-system, qui effectue les appels de création/mise à jour MCP en utilisant le DESIGN.md comme entrée. Si vous souhaitez uniquement le document, le travail s'arrête après la phase 3.

Stitch Extract Design MD

Exécutez stitch::extract-design-md sur une véritable tâche de travail de marque et de design system.

Téléchargez OpenDesign, importez stitch::extract-design-md depuis son lien SKILL.md, collez le prompt ci-dessus, et lisez le plan avant le résultat.

Télécharger OpenDesign Parcourir tous les skills