83.3K+Télécharger
Aller au guide d’utilisation
design-mdpar Google Labs

Design MD Skill.

Un skill Claude Code et Codex pour le travail de marque et de système de design : analyse les projets Stitch et rédige un DESIGN.md sémantique.

  • Marque et design systems
  • DESIGN.md
Télécharger OpenDesignVoir le guide d'utilisation
google-labs-code/stitch-skills · plugins/stitch-utilities/skills/design-md/SKILL.mdSKILL.md
--- name: design-md description: Analyze Stitch projects and synthesize a semantic design system into DESIGN.md files --- ## Prerequisites ## The Goal ## Retrieval and Networking ## Analysis & Synthesis Instructions ## Output Guidelines ## Output Format (DESIGN.md Structure)
En-tête et titres de section lus depuis le fichier source le 14/09/2026 · 7 644 caractères au total

01 Ce qu'il fait

Ce que fait le Skill 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 transforme un projet Stitch existant en un DESIGN.md qui fait office de source de vérité pour demander à Stitch de générer de nouveaux écrans dans le même langage de design. Il s'adresse aux designers et développeurs disposant d'un accès Stitch MCP et d'au moins un écran conçu : le skill découvre l'espace de noms MCP, résout les identifiants de projet et d'écran, récupère l'objet écran ainsi que son HTML et sa capture d'écran, et lit le designTheme du projet.

Il documente ensuite le thème visuel et l'atmosphère, les couleurs sous forme de noms descriptifs avec codes hexadécimaux et rôles fonctionnels, la typographie, les styles de composants et les principes de mise en page, dans un langage de design évocateur plutôt que des valeurs techniques brutes.

Ce qu'il produit

  • Un système de design en cinq parties couvrant le thème visuel et l'atmosphère, la palette de couleurs avec ses rôles, les règles typographiques, les styles de composants pour les boutons, les cartes et les champs de saisie, ainsi que les principes de mise en page.
Voir l'exemple de prompt ↗

Fonctionnement

  1. 01
    Découvrir l'espace de noms MCP

    Exécuter list_tools pour trouver le préfixe MCP de Stitch, puis réutiliser ce préfixe pour chaque appel ultérieur au serveur.

  2. 02
    Résoudre le projet et l'écran

    Lister les projets possédés lorsqu'aucun ID de projet n'est fourni, puis lister les écrans pour l'ID de projet numérique et faire correspondre un titre d'écran tel que Home ou Landing Page.

  3. 03
    Récupérer l'objet écran et les ressources

    get_screen renvoie les URL de téléchargement de la capture d'écran et du HTML, les dimensions de l'écran, le type d'appareil et le designTheme ; le HTML est ensuite téléchargé et analysé pour en extraire les classes Tailwind et les motifs de composants.

  4. 04
    Lire le Design Theme au niveau du projet

    Un appel get_project avec le chemin complet projects/{id} renvoie l'objet designTheme comprenant le mode couleur, les polices, l'arrondi et les couleurs personnalisées.

  5. 05
    Synthétiser le système sémantique

    Extraire les design tokens de l'écran, capturer l'ambiance générale avec des adjectifs évocateurs, et traduire les valeurs techniques en langage descriptif.

  6. 06
    Rédiger DESIGN.md

    Créer le fichier DESIGN.md dans le répertoire du projet en suivant exactement le format prescrit en cinq sections.

02 Trouvez celui qui vous convient

Quand utiliser le skill design-md

Utilisez le skill 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éjà d'un projet Stitch contenant au moins un écran conçu et souhaitez en extraire un système de design écrit.
  • Vous voulez une source de vérité pour inciter Stitch à générer de nouveaux écrans correspondant à un langage de design existant.
  • Vous ne connaissez le projet que par son titre ou son URL et souhaitez que le skill trouve l'ID du projet parmi ceux que vous possédez.
  • Vous voulez que l'ambiance soit nommée par des adjectifs évocateurs plutôt que par une simple reformulation du CSS.

Connaître les limites

  • Il ne peut pas fonctionner sans le Stitch MCP Server et un projet Stitch possédant déjà un écran conçu.
  • Il produit un système de design en Markdown, pas de nouveaux écrans ; le DESIGN.md sert d'entrée pour un futur prompting Stitch.
  • L'utilisation de jargon technique non traduit tel que rounded-xl est explicitement citée comme un écueil à éviter.
  • Le fait d'omettre les codes hexadécimaux et de ne conserver que des noms de couleurs descriptifs est signalé comme une erreur.

Quoi fournir

  • ID du projet (optionnel)S'il n'est pas fourni, le skill liste les projets possédés et fait correspondre la cible par titre ou par motif d'URL.
  • ID de l'écran (optionnel)S'il n'est pas fourni, le skill examine les titres des écrans pour identifier l'écran cible.
  • Guide de prompting efficace StitchRéférence pour le langage et les motifs que le document de design doit utiliser.

03 Dans le skill

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

7 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.

  1. Uniquement des ID numériques

    Transmettre projectId et screenId sous forme d'ID numériques, jamais le chemin complet projects/{id}, sauf pour get_project qui prend le nom complet.

  2. Jamais une couleur nue

    Chaque couleur reçoit un nom descriptif en langage naturel, le code hexadécimal exact entre parenthèses, et son rôle fonctionnel, par exemple Deep Muted Teal-Navy (#294056) utilisé pour les actions principales.

  3. Traduire la géométrie, ne pas la citer telle quelle

    Convertir les valeurs de border-radius et de mise en page en descriptions physiques : rounded-full devient En forme de pilule, rounded-lg devient Coins légèrement arrondis, rounded-none devient Anguleux, bords nets.

  4. Bannir le vocabulaire générique

    Évitez des termes comme bleu ou arrondi ; préférez Cerulean profond océan (#0077B6) ou Bords légèrement incurvés.

  5. Respecter la structure prescrite

    Le fichier commence par le titre du projet et le Project ID, puis cinq sections numérotées : Visual Theme & Atmosphere, Color Palette & Roles, Typography Rules, Component Stylings, Layout Principles.

  6. Expliquer le pourquoi, pas seulement le quoi

    Incluez les valeurs exactes entre parenthèses après la formulation descriptive, et indiquez toujours à quoi sert chaque élément de design.

  7. Garder une terminologie cohérente

    Utilisez la même terminologie tout au long du document afin que le système de design se lise comme un système unique.

04 Mettez-le en pratique

Installer 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.

Ajouter 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 design-md

Formulaire CLI générique skills pour plugins/stitch-utilities/skills/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

Adaptez ce prompt avec votre propre contenu et contraintes, puis exécutez-le dans Claude Code ou Codex.

Example prompt
Use the Stitch MCP Server to get the Furniture Collection project

Source : exemple SKILL.md (verbatim).

Vérifiez le premier résultat

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

  • Vérifiez que le format correspond exactement à la structure DESIGN.md prescrite plutôt qu'à une mise en page improvisée.
  • Vérifiez que chaque code couleur est exact et que chaque couleur conserve à la fois un nom descriptif et sa valeur hexadécimale.
  • Vérifiez que le rôle fonctionnel de chaque élément est indiqué, pas seulement son apparence.
  • Vérifiez que la section atmosphère est précise plutôt que vague, et que les ombres et l'espacement n'ont pas été omis.

Dans OpenDesign design-md est intégré : Plugins → Skills, sélectionnez-le dans la barre supérieure.

Télécharger OpenDesignLire 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-utilities/skills/design-md/SKILL.md Somme de contrôle du contenu enregistrée à la vérification ; commit 0337446
License
Apache-2.0 D'après LICENSE.
Étoiles du dépôt
8 304 Instantané GitHub pris le 14 septembre 2026 pour l'ensemble du dépôt google-labs-code/stitch-skills, qui contient 12 skills dans ce catalogue. Il ne s'agit pas d'une note ou d'un compteur d'utilisation pour design-md.
Vérifié par OpenDesign
14/09/2026 Le fichier source, le chemin, le texte de licence et le nombre d'étoiles ont été vérifiés. Inclus dans OpenDesign main (vérifié le 28/08/2026) ; aucune exécution en direct n'a été enregistrée sur cette page.

Dans le SKILL.md

  1. AperçuDéfinit DESIGN.md comme source de vérité pour le prompting de nouveaux écrans Stitch.
  2. PrérequisNécessite un accès Stitch MCP, un écran conçu et le guide de prompting.
  3. L'objectifRappelle que Stitch lit des descriptions visuelles appuyées par des valeurs de couleur précises.
  4. Récupération et réseauSix étapes : namespace, project, screen, metadata, téléchargement d'asset, project designTheme.
  5. Instructions d'analyse et de synthèseExtraire l'identité, l'atmosphère, la palette de couleurs, la géométrie et l'élévation.
  6. Directives de sortieLangage descriptif uniquement, Markdown propre, codes hexadécimaux exacts, expliquer le pourquoi.
  7. Format de sortie (structure DESIGN.md)Squelette Markdown en cinq sections à remplir textuellement.
  8. Exemple d'utilisationParcours utilisant le projet Furniture Collection et sa page Home.
  9. Bonnes pratiquesÊtre descriptif, fonctionnel, cohérent, visuel et précis.
  10. Conseils pour réussirD'abord la vue d'ensemble, repérez les motifs, nommez de manière sémantique, documentez la hiérarchie.
  11. Pièges courants à éviterPas de jargon non traduit, pas de codes manquants, pas de descriptions vagues ou incomplètes.
Description du skill lui-même
« Analyser les projets Stitch et synthétiser un système de design sémantique dans des fichiers DESIGN.md »

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

06 Avant d'installer

Questions sur le skill design-md

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

Quels outils le skill utilise-t-il pour atteindre Stitch ?

Il déclare les outils stitch ainsi que Read, Write et web_fetch. En pratique, il exécute d'abord list_tools pour trouver le préfixe MCP, puis appelle list_projects, list_screens, get_screen et get_project avec ce préfixe.

Qu'obtenez-vous exactement à la fin ?

Un fichier DESIGN.md créé dans le répertoire du projet, structuré en titre et ID du projet suivis de sections sur le thème visuel et l'atmosphère, la palette de couleurs et les rôles, les règles typographiques, les styles de composants et les principes de mise en page. Il est destiné à être réutilisé comme source de vérité lors de la sollicitation de Stitch pour de nouveaux écrans.

Remplace-t-il le fait de le faire à la main ?

Il effectue l'extraction et la rédaction pour vous, mais avec une exigence de vocabulaire précise : les couleurs reçoivent des noms évocateurs ainsi que des codes hexadécimaux exacts et des rôles fonctionnels, et les valeurs de rayon deviennent des expressions comme Forme de pilule ou Bords nets et carrés au lieu de noms de classes bruts. Il vous demande également d'expliquer le pourquoi de chaque décision.

Design MD

Exécutez design-md sur une vraie tâche de marque et de design-system.

Le skill design-md est inclus dans OpenDesign. Téléchargez l'application, sélectionnez le skill dans Plugins → Skills, collez le prompt ci-dessus et lisez le plan avant le résultat.

Télécharger OpenDesignParcourir tous les skills
Terminal
npx skills add https://github.com/google-labs-code/stitch-skills --skill design-md