stitch::manage-design-systempar Google Labs

Stitch Manage Design System Skill.

Un skill Claude Code et Codex pour le travail de marque et de design system : crée, met à jour et applique des design systems dans Stitch via les outils MCP.

Marque et design systems
Design system

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

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

--- name: stitch::manage-design-system description: - Manage design systems in Stitch using MCP tools. Includes retrieval of assets, creating/updating design systems in Stitch, and applying them to screens. --- ## 📥 Retrieval ## 🧠 Synthesis from Description ## 📝 Output Structure ## 🚀 Create or Update Design System in Stitch ## 🎨 Apply Design System to Screens ## 📋 Update Project Metadata

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

01 Ce qu'il fait

Ce que fait le Skill stitch::manage-design-system 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

Gère le design system qui fait office de source de vérité d'un projet dans Stitch, en utilisant des outils MCP. Il récupère les métadonnées du projet et les assets d'écran (list_projects, list_screens, get_screen, read_url_content), synthétise les tokens soit à partir d'écrans existants via le skill design-md, soit à partir d'une simple description, écrit .stitch/DESIGN.md, puis charge le markdown et appelle create_design_system_from_design_md.

Un point de contrôle strict exige l'approbation par l'utilisateur du nom d'affichage, des couleurs, des polices et de l'arrondi avant tout chargement. Après la création, apply_design_system pousse les tokens sur les écrans existants en utilisant uniquement les identifiants d'instance d'écran, et .stitch/metadata.json enregistre le projet, les écrans et un résumé du design system.

Ce qu'il produit

Un fichier de design DESIGN.md généré pour le projet.
Un fichier .stitch/metadata.json qui suit l'id du projet, le titre, tous les écrans connus et un résumé du design system.
Des tokens de design au niveau projet conservés dans Stitch, que les prompts de génération ultérieurs n'ont pas besoin de répéter.

Voir l'exemple de prompt ↗

Fonctionnement

01
Récupérer les Assets du Projet et des Écrans
list_projects trouve le projectId cible, list_screens fait apparaître des écrans représentatifs tels que Home ou Main Dashboard, et get_screen renvoie la capture d'écran et les URL de téléchargement du htmlCode avant que le HTML ne soit récupéré.
02
Synthétiser le Design System
Les écrans existants sont interprétés avec le skill design-md ; un projet tout nouveau ou une description directe est traité en associant d'abord les termes approximatifs de l'utilisateur à des valeurs précises.
03
Charger DESIGN.md et Créer le Design System
Le script d'upload recommandé encode le markdown en base64 en interne et le poste vers l'endpoint batchCreate du projet, contournant les limites de tokens de sortie ; create_design_system_from_design_md s'exécute ensuite avec le projectId et l'instance d'écran renvoyée.
04
Appliquer le Système aux Écrans Existants
apply_design_system prend le projectId, l'assetId, et une liste d'instances d'écran afin que les écrans déjà construits adoptent les tokens enregistrés.

02 Trouvez celui qui vous convient

Quand utiliser le skill stitch::manage-design-system

Utilisez le skill stitch::manage-design-system 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

Un projet qui a besoin d'un seul langage de design faisant autorité pour lier ensemble les futurs écrans.
Un nouveau projet Stitch sans écrans encore, où l'utilisateur fournit uniquement une description écrite du style.
Rétro-ingénierie d'un design system à partir d'écrans déjà existants dans le projet.

Connaître les limites

Tout DESIGN.md dépassant environ 5 Ko ne peut pas passer par l'outil d'upload MCP direct et nécessite plutôt le chemin via script.
Les indications sur la façon de décrire les éléments de design ne figurent pas dans ce fichier ; elles sont déléguées à un autre skill.
Le schéma complet de l'objet designSystem n'est pas détaillé ici ; il se trouve dans un fichier de référence distinct.

Quoi fournir

L'identifiant du projet StitchIl indique à quel projet appartient le système de design, et il est requis par le script d'upload ainsi que par chaque appel MCP qui suit.
Écrans représentatifsDes écrans tels que Accueil ou Tableau de bord principal servent de source visuelle lors de l'extraction des tokens à partir d'un projet existant.
Une description de style en langage simpleUtilisée lorsqu'aucun écran n'existe, par exemple une courte phrase nommant la palette, l'arrondi et la police.
Arguments du script pour l'uploadLe script d'upload a besoin de l'identifiant du projet, du chemin du fichier, de la clé API et d'une valeur generated-by passés en ligne de commande.

03 Dans le skill

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

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

Suspendre l'action et attendre l'approbation de l'utilisateur avant l'upload
Le skill doit s'arrêter et demander confirmation avant d'envoyer quoi que ce soit vers Stitch, en présentant le nom d'affichage, les couleurs clés, les polices et l'arrondi, puis attendre une approbation explicite.
N'envoyer que l'id et sourceScreen lors de l'application
selectedScreenInstances ne transporte aucune donnée de position ni de dimension, seulement les deux champs d'identification.
Exclure les instances design-system de la liste des cibles
Les instances de type DESIGN_SYSTEM_INSTANCE sont filtrées ; seuls les écrans réels sont transmis à apply_design_system.
Indiquer qui a généré le Markdown
L'argument generated-by nomme le skill ou l'outil ayant produit le DESIGN.md ; son omission entraîne l'utilisation d'un libellé par défaut fixe.
Créer le système immédiatement après l'upload
create_design_system_from_design_md est appelé immédiatement après l'étape d'upload, avec le projectId et le selectedScreenInstance.
Lire l'id de l'asset dans le nom du système de design
list_design_systems renvoie un nom de la forme assets/{assetId} ; la partie après assets/ correspond à l'assetId utilisé lors de l'application.

04 Mettez-le en pratique

Installer stitch::manage-design-system 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 stitch::manage-design-system à 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::manage-design-system

Forme générique de la CLI skills pour plugins/stitch-design/skills/manage-design-system/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

Here is the brand direction for [product name]: dark theme, blue and purple, rounded, Inter font. The Stitch project [projectId] has no screens yet, so please turn that into the DESIGN.md and create the design system in Stitch for me to approve.

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 :

Vérifiez que l'upload a bien renvoyé les deux identifiants avant de poursuivre.
Vérifiez que le script d'upload et l'appel de création se sont tous deux terminés, car ce n'est qu'à ce moment que les tokens sont stockés au niveau du projet.
Récupérez les identifiants d'instances d'écran depuis get_project plutôt que de les deviner, afin que apply_design_system dispose de cibles valides.
Vérifiez le DESIGN.md généré par rapport à la structure définie ailleurs avant de l'envoyer.

Dans OpenDesign, importez stitch::manage-design-system 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/manage-design-system/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 Instantané GitHub pris le 14/09/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 stitch::manage-design-system.
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

📥 RécupérationQuatre étapes ordonnées pour extraire les ressources de projet, d'écran et HTML via les outils Stitch MCP.
🧠 Synthèse à partir d'une descriptionQuand réutiliser le skill design-md et comment transformer une formulation vague en valeurs concrètes.
📝 Structure de sortieIndique que DESIGN.md suit la structure définie dans le skill design-md.
🚀 Créer ou mettre à jour le design system dans StitchFlux de téléversement et de création en deux étapes, derrière un point de contrôle obligatoire de confirmation utilisateur.
🎨 Appliquer le design system aux écransForme JSON exacte, plus les trois étapes pour rassembler les ids requis.
📋 Mettre à jour les métadonnées du projetÉcrit .stitch/metadata.json avec l'id du projet, le titre, les écrans et le résumé du système.
Référence de schémaRenvoie vers reference/tool-schema.md pour le schéma complet de l'objet designSystem.
💡 Bonnes pratiquesRenvoie les conseils de description des éléments de design au skill design-md.

Description du skill lui-même

« - Gérer les design systems dans Stitch à l'aide des outils MCP. Inclut la récupération des ressources, la création/mise à jour de design systems dans Stitch et leur application aux écrans. »

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

06 Avant d'installer

Questions sur le skill stitch::manage-design-system

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

Quelque chose est-il téléversé sur Stitch sans mon accord ?

Non. Il existe un point de contrôle explicite : le skill doit présenter un résumé du design system qu'il va créer, couvrant le nom d'affichage, les couleurs clés, les polices et l'arrondi, et attendre l'approbation avant de téléverser.

Que se passe-t-il si mon DESIGN.md dépasse quelques Ko ?

Utilisez le script d'upload recommandé plutôt que l'outil MCP direct. Il encode le markdown en base64 en interne et l'envoie vers le point de terminaison batchCreate, ce qui contourne les limites de tokens de sortie.

D'où viennent les ids nécessaires pour appliquer un design system ?

get_project renvoie les screenInstances avec leur id et sourceScreen, à nouveau filtrés pour ne garder que les écrans réels.

Peut-il fonctionner sur un projet tout neuf sans aucun écran ?

Oui. Lorsqu'il n'y a aucun écran ou que l'utilisateur fournit une description directe, le skill fait correspondre les termes vagues à des valeurs précises, en choisissant des codes hexadécimaux concrets, des familles de polices et un arrondi, puis génère DESIGN.md.

Stitch Manage Design System

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

Téléchargez OpenDesign, importez stitch::manage-design-system 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