stitch::generate-designpar Google Labs

Stitch Generate Design Skill.

Un skill Claude Code et Codex pour le design UI : génère, édite et fait varier des écrans dans Stitch à partir de texte ou d'images de référence.

Web et UI
Fichier de design

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

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

--- name: stitch::generate-design description: - Generate new screens from text prompts or images, edit existing screens with prompts and design system tokens, and generate design variants using Stitch MCP. Includes prompt enhancement pipeline, design mappings, professional UI/UX terminology, design tokens and theme system capabilities. --- ## 🎨 Prompt Enhancement Pipeline ## Steps ## 💡 Tips

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

01 Ce qu'il fait

Ce que fait le skill stitch::generate-design 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 pilote Stitch MCP à travers quatre flux : générer un nouvel écran à partir d'un texte, recréer une image ou une maquette, modifier un écran existant, et générer des variantes. Avant tout appel de génération ou de modification, il exécute un pipeline d'amélioration de prompt qui résout le projet et le design system, remplace les formulations vagues par la terminologie UI/UX issue de ses correspondances de design, et met en forme le prompt autour de la mise en page, du contenu et de la structure, à l'aide d'un modèle avec des sections PLATFORM et PAGE STRUCTURE.

Le style visuel reste au niveau du projet, donc les prompts de génération ne doivent porter aucun code hexadécimal, police ou valeur d'arrondi. Le retour de l'IA est affiché après chaque appel et les assets sont téléchargés vers .stitch/designs.

Ce qu'il produit

Le HTML et la capture d'écran de l'écran généré, téléchargés dans le répertoire .stitch/designs.
La description textuelle et les suggestions de l'IA renvoyées dans outputComponents, présentées à l'utilisateur.
Les écrans de variantes pour la direction choisie, par lots d'un à cinq.

Voir l'exemple de prompt ↗

Fonctionnement

01
Améliorer le Prompt Avant Tout
Le pipeline est obligatoire, pas optionnel : l'agent réécrit la demande de l'utilisateur avant d'être autorisé à appeler un outil de génération ou de modification Stitch.
02
Vérifier ce que le Projet Stylise Déjà
Si le projet dispose déjà d'un design system, les couleurs, polices et arrondis sont appliqués au niveau du projet, donc le prompt amélioré doit exclure entièrement le style visuel.
03
Mettre en Forme le Prompt en Plateforme Plus Sections de Page
Les nouveaux écrans suivent un modèle qui indique d'abord l'objectif global, puis PLATFORM, puis une PAGE STRUCTURE numérotée allant du Header au Footer.
04
Choisir un des Quatre Flux
La demande est orientée vers Generate from Text, Generate from Image, Edit, ou Generate Variants avant tout appel d'outil.

02 Trouvez celui qui vous convient

Quand utiliser le skill stitch::generate-design

Utilisez le skill stitch::generate-design dans Claude Code ou Codex lorsque la tâche concerne ce type de design d'interface. Le périmètre et les limites ci-dessous sont tirés du fichier du skill lui-même.

Bon choix

Démarrer un tout nouvel écran à partir d'une description écrite de la page.
Recréer quelque chose que vous avez déjà sous forme d'image, de capture d'écran ou de maquette.
Apporter une modification ciblée à un écran qui existe déjà dans le projet.
Explorer d'autres mises en page, palettes de couleurs ou textes pour un écran que vous avez.

Connaître les limites

Il ne générera pas d'écrans avant qu'un design system existe : si le projet n'en a aucun, le travail est d'abord confié au skill manage-design-system.
Le téléchargement d'une image ne se fait pas ici ; l'image devient d'abord un contenu d'écran via le skill upload, puis elle est affinée par des modifications.

Quoi fournir

EntréeC'est ce que le pipeline d'amélioration réécrit sous forme de prompt Stitch structuré.
Le projet cibleL'agent recherche le projet par son id, et n'en crée un que si aucun projet approprié n'existe.
L'écran pour les modifications ou variantesLes modifications et variantes nécessitent à la fois le projectId et le screenId, obtenus en listant ou en récupérant les écrans.

03 Dans le skill

Règles que le skill stitch::generate-design 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.

Aucune fuite de thème dans les prompts de génération
Ne jamais mettre de codes hexadécimaux, de noms de polices ou de rôles de couleur dans un prompt de génération ; le design system gère tout le style visuel et les conflits de duplication.
Codes hexadécimaux uniquement lors de l'édition
Des valeurs hexadécimales exactes sont autorisées pour une correspondance précise des couleurs dans les prompts d'édition, seul cas où l'interdiction sur les prompts de génération ne s'applique pas.
Toujours afficher outputComponents
Après tout appel à l'outil Stitch, l'agent doit montrer à l'utilisateur la Text Description et les Suggestions renvoyées, pas seulement l'écran résultant.
Modifier plutôt que régénérer
La régénération complète est réservée à une mise en page fondamentale erronée ; tout le reste doit passer par des modifications ciblées.
Écraser les copies locales après une modification
Les URLs mises à jour du HTML et de la capture d'écran sont téléchargées à nouveau par-dessus les fichiers précédents afin que les fichiers locaux reflètent les dernières modifications.
Garder .stitch/metadata.json synchronisé
Après le téléchargement des ressources, les métadonnées sont mises à jour avec les titres d'écran modifiés ou les nouveaux ID d'écran ; le fichier suit tous les écrans, types d'appareils et informations de design system.

04 Mettez-le en pratique

Installez stitch::generate-design 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::generate-design à 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::generate-design

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

Donnez au skill une première tâche de design UI

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

Example prompt

This is a dashboard mockup — recreate it with a proper data table, sidebar navigation, and chart widgets.

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 :

Regardez l'écran obtenu et confirmez que les changements demandés ont bien été appliqués.
Si le résultat ne correspond pas exactement à ce qui est attendu, continuez dans le flux d'édition plutôt que de régénérer ; répétez avec un nouveau prompt précis lorsque plus de finitions sont nécessaires.
Avant de générer, vérifiez si un design system existe pour le projet.

Dans OpenDesign, importez stitch::generate-design 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/generate-design/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. Ce n'est pas une note ni un compteur d'utilisation pour stitch::generate-design.
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

🎨 Pipeline d'amélioration du promptAnalyser le contexte, remplacer les termes vagues, structurer le prompt, faire ressortir les insights de l'IA
ÉtapesSélection du mode ainsi que les flux texte, image, édition et variantes avec leurs appels d'outils
💡 ConseilsÊtre structurel, privilégier le contenu, peaufiner de façon itérative, éviter les fuites de thème, faire des modifications ciblées
📚 RéférencesMappages de design, mots-clés de prompting et un exemple de prompt amélioré avant/après

Description du skill lui-même

« Génère de nouveaux écrans à partir de prompts texte ou d'images, modifie des écrans existants avec des prompts et des tokens de design system, et génère des variantes de design en utilisant Stitch MCP. Inclut un pipeline d'amélioration de prompt, des mappages de design, une terminologie UI/UX professionnelle, des capacités de tokens de design et de système de thème. »

Description du front-matter tirée de SKILL.md. Le fichier complet contient environ 10 959 caractères. Lire le fichier complet sur GitHub.

06 Avant d'installer

Questions sur le skill stitch::generate-design

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

Dois-je configurer les noms d'outils avant que cela fonctionne ?

Le skill appelle les outils MCP de Stitch tels que list_projects, generate_screen_from_text et edit_screens, et sa propre note indique de suivre votre system prompt pour la gestion des préfixes d'outils MCP. La convention de préfixe vient donc de votre configuration, pas du skill.

En quoi les variantes diffèrent-elles des éditions ?

Les éditions modifient l'écran que vous avez ; les variantes explorent des alternatives autour de celui-ci via l'outil generate_variants. Vous pouvez orienter la direction avec creativeRange — REFINE pour subtil, EXPLORE pour équilibré, REIMAGINE pour radical — et restreindre les aspects, ou les laisser vides pour tout couvrir.

Puis-je partir d'une capture d'écran ou d'une maquette plutôt que d'une description ?

Oui. L'image est transmise au skill upload-to-stitch pour l'intégrer au projet, après quoi l'agent retrouve le nouvel screenId et affine le design avec un prompt d'édition décrivant ce qu'il faut ajuster ou recréer.

Stitch Generate Design

Exécutez stitch::generate-design sur une tâche de design UI réelle.

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