stitch::generate-design

Par google-labs-code · stitch-skills

Générez de nouveaux écrans à partir de prompts textuels ou d'images, modifiez des écrans existants avec des prompts et des tokens de système de design, et générez des variantes de design avec Stitch MCP. Inclut un pipeline d'amélioration de prompts, des mappings de design, la terminologie professionnelle UI/UX, ainsi que les capacités liées aux tokens de design et au système de thèmes.

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

Générer un Design

Créez de nouveaux écrans de conception à partir de descriptions textuelles, d'images ou de maquettes, modifiez les écrans existants avec des prompts et des tokens de système de design, et générez des variantes de design en utilisant Stitch MCP.

[!NOTE] Consultez votre prompt système pour obtenir des instructions sur la gestion des préfixes des outils MCP pour tous les outils mentionnés dans cette compétence (par exemple, list_projects, generate_screen_from_text, edit_screens).

🎨 Pipeline d'amélioration des prompts

Avant d'appeler un outil de génération ou de modification de Stitch, vous DEVEZ améliorer le prompt de l'utilisateur.

1. Analyser le contexte

  • Projet : utilisez list_projects pour trouver le projectId correct. Si aucun projet approprié n'existe, créez-en un avec create_project.
  • Système de design : vérifiez si un système de design existe pour le projet via list_design_systems. S'il existe, les tokens de design (couleurs, polices, arrondis) sont déjà appliqués au niveau du projet — n'incluez AUCUNE instruction de couleur, police ou thème dans le prompt de génération. S'il n'en existe pas, déléguez d'abord à la compétence manage-design-system avant de générer les écrans.

2. Affiner la terminologie UI/UX

Consultez Design Mappings pour remplacer les termes vagues.

  • Vague : « Make a nice header »
  • Professionnel : « Sticky navigation bar with glassmorphism effect and centered logo »

Utilisez Prompting Keywords pour les noms de composants, les palettes d'adjectifs, les rôles de couleur et les descriptions de formes.

3. Structurer le prompt final

Formatez le prompt amélioré pour Stitch. Concentrez-vous exclusivement sur la mise en page, le contenu et la structure — n'incluez jamais les couleurs, les polices ou les instructions de thème (celles-ci sont gérées par la compétence manage-design-system au niveau du projet).

Pour les nouveaux écrans, utilisez ce modèle :

[Objectif global et intention utilisateur de la page]

**PLATFORM:** [Web/Mobile], [Desktop/Mobile]-first

**PAGE STRUCTURE:**
1. **Header:** [Description de la navigation et de la marque]
2. **Hero Section:** [Titre, sous-texte et CTA principal]
3. **Primary Content Area:** [Détail des composants]
4. **Footer:** [Liens et informations de copyright]

Pour les modifications, soyez précis sur ce qui doit changer :

  • Localisation : « Changez le [bouton principal] dans la [section hero]... »
  • Éléments visuels : « ...en bleu plus foncé (#004080) et ajoutez une ombre subtile. »
  • Structure : « Ajoutez un bouton secondaire à côté du bouton principal avec le texte 'En savoir plus'. »

[!CAUTION] N'incluez PAS de codes hexadécimaux, de noms de polices, de palettes de couleurs, de valeurs d'arrondis ou d'autres tokens du système de design dans un prompt de génération. Ceux-ci sont appliqués au niveau du projet par la compétence manage-design-system et entreraient en conflit s'ils étaient en double. (Pour les prompts d'édition, les codes hexadécimaux sont acceptables pour les ajustements de couleur précis.)

4. Présenter les insights IA

Après tout appel d'outil, présentez toujours les outputComponents (description textuelle et suggestions) à l'utilisateur.

Consultez examples/enhanced-prompt.md pour un exemple complet avant/après d'amélioration de prompt.

Étapes

Déterminer le mode

Décidez du flux à utiliser en fonction de la demande de l'utilisateur :

  • L'utilisateur souhaite créer à partir d'une description textuelle → flux Générer à partir du texte
  • L'utilisateur fournit une image, une capture d'écran ou une maquette → flux Générer à partir d'une image
  • L'utilisateur souhaite modifier un écran existant → flux Édition
  • L'utilisateur souhaite des variations de mise en page/couleur/contenu → flux Générer des variantes

Flux Générer à partir du texte (Nouvel écran)

1. Améliorer le prompt utilisateur

Appliquez le Pipeline d'amélioration des prompts ci-dessus.

2. Identifier le projet

Utilisez list_projects pour trouver le projectId correct si celui-ci n'est pas déjà connu.

3. Générer l'écran

Appelez l'outil generate_screen_from_text avec le prompt amélioré et l'ID du designSystem (s'il a été trouvé à l'étape 1).

{
  "projectId": "...",
  "prompt": "[Votre prompt amélioré]",
  "designSystem": "assets/...", // Optionnel : à passer s'il a été trouvé à l'étape 1
  "deviceType": "DESKTOP"  // Options : MOBILE, DESKTOP, TABLET
}

4. Présenter les retours IA

Affichez toujours la description textuelle et les suggestions de outputComponents à l'utilisateur.

5. Télécharger les ressources de design

Après la génération, téléchargez les URLs HTML et screenshot de outputComponents vers le répertoire .stitch/designs.

  • Nommage : utilisez l'ID d'écran ou un slug descriptif pour le nom de fichier.
  • Outils : utilisez curl -o via run_command ou similaire.
  • Répertoire : assurez-vous que .stitch/designs existe.

6. Examiner et affiner

  • Si le résultat ne correspond pas exactement à ce qui est attendu, passez au flux d'Édition pour faire des ajustements ciblés.
  • Ne régénérez PAS à partir de zéro sauf si la mise en page fondamentale est incorrecte.

Flux Générer à partir d'une image (Image/Maquette → Design)

Utilisez ce flux quand l'utilisateur fournit une image, une capture d'écran ou une maquette de design à recréer dans Stitch.

1. Identifier le projet

Utilisez list_projects pour trouver le projectId correct. Si aucun projet approprié n'existe, créez-en un avec create_project.

2. Charger l'image

Déléguez à la compétence upload-to-stitch pour charger l'image vers le projet. Cela crée un nouvel écran avec l'image comme contenu.

3. Affiner avec l'édition

Une fois chargée, utilisez list_screens pour trouver le screenId nouvellement créé, puis appelez edit_screens avec un prompt descriptif pour affiner le design :

{
  "projectId": "...",
  "selectedScreenIds": ["<id-ecran-charge>"],
  "prompt": "[Décrivez ce qu'il faut ajuster, améliorer ou recréer à partir de cette maquette]"
}

[!TIP] Pour de meilleurs résultats, décrivez l'intention derrière l'image plutôt que simplement de dire « make it look like this ». Par exemple : « This is a dashboard mockup — recreate it with a proper data table, sidebar navigation, and chart widgets. »

4. Présenter les retours IA

Affichez toujours la description textuelle et les suggestions de outputComponents à l'utilisateur.

5. Télécharger les ressources de design

Téléchargez les URLs HTML et screenshot de outputComponents vers le répertoire .stitch/designs.

  • Nommage : utilisez l'ID d'écran ou un slug descriptif pour le nom de fichier.
  • Outils : utilisez curl -o via run_command ou similaire.
  • Répertoire : assurez-vous que .stitch/designs existe.

Flux Édition (Modifier un écran existant)

1. Identifier l'écran

Utilisez list_screens ou get_screen pour trouver le projectId et le screenId corrects.

2. Formuler le prompt d'édition

Appliquez le Pipeline d'amélioration des prompts, en mettant l'accent sur la précision :

  • Localisation : « Changez la couleur du [bouton principal] dans la [section hero]... »
  • Éléments visuels : « ...en bleu plus foncé (#004080) et ajoutez une ombre subtile. »
  • Structure : « Ajoutez un bouton secondaire à côté du bouton principal avec le texte 'En savoir plus'. »

3. Appliquer l'édition

Appelez l'outil edit_screens.

{
  "projectId": "...",
  "selectedScreenIds": ["..."],
  "prompt": "[Votre prompt d'édition ciblé]"
}

4. Présenter les retours IA

Affichez toujours la description textuelle et les suggestions de outputComponents à l'utilisateur.

5. Télécharger les ressources de design

Après l'édition, téléchargez les URLs HTML et screenshot mises à jour de outputComponents vers le répertoire .stitch/designs, en écrasant les versions précédentes pour assurer que les fichiers locaux reflètent les dernières modifications.

  • Nommage : utilisez l'ID d'écran ou un slug descriptif pour le nom de fichier.
  • Outils : utilisez curl -o via run_command ou similaire.
  • Répertoire : assurez-vous que .stitch/designs existe.

6. Mettre à jour les métadonnées du projet

Après le téléchargement des ressources, mettez à jour .stitch/metadata.json pour refléter les changements (par exemple, titres d'écran mis à jour ou nouveaux IDs d'écran issus de l'édition). Le fichier de métadonnées suit tous les écrans, leurs types d'appareils et les informations du système de design. Consultez le fichier examples/metadata.json de la compétence manage-design-system pour le format.

7. Vérifier et répéter

  • Vérifiez l'écran de sortie pour voir si les changements ont été appliqués correctement.
  • Si plus de polissage est nécessaire, répétez le flux d'édition avec un nouveau prompt spécifique.

Flux Générer des variantes (Explorer les variations)

Utilisez ce flux quand l'utilisateur souhaite explorer des variantes alternatives de mise en page, de schéma de couleurs ou de contenu d'un écran existant.

1. Identifier l'écran

Utilisez list_screens ou get_screen pour trouver le projectId et le screenId corrects.

2. Configurer les options de variante

Appelez l'outil generate_variants avec les options appropriées :

{
  "projectId": "...",
  "selectedScreenIds": ["..."],
  "prompt": "[Décrivez la direction pour les variantes]",
  "variantOptions": {
    "variantCount": 3,
    "creativeRange": "EXPLORE",
    "aspects": ["LAYOUT", "COLOR_SCHEME"]
  }
}

Options de variante :

  • variantCount : 1–5 variantes (par défaut : 3)
  • creativeRange : REFINE (subtil), EXPLORE (équilibré), ou REIMAGINE (radical)
  • aspects : concentrez-vous sur des dimensions spécifiques — LAYOUT, COLOR_SCHEME, IMAGES, TEXT_FONT, TEXT_CONTENT, ou laissez vide pour tous

3. Présenter les retours IA

Affichez toujours la description textuelle et les suggestions de outputComponents à l'utilisateur.

4. Télécharger les ressources de design

Téléchargez les URLs HTML et screenshot des variantes de outputComponents vers le répertoire .stitch/designs.

  • Nommage : utilisez l'ID d'écran ou un slug descriptif pour le nom de fichier.
  • Outils : utilisez curl -o via run_command ou similaire.
  • Répertoire : assurez-vous que .stitch/designs existe.

💡 Conseils

  • Soyez structural : décomposez la page en en-tête, héros, fonctionnalités et pied de page dans votre prompt.
  • Contenu d'abord : décrivez ce que chaque section contient (texte, images, CTAs) plutôt que comment elle ressemble.
  • Polissage itératif : préférez l'édition pour les ajustements ciblés à la régénération complète.
  • Pas de fuite de thème : ne mettez jamais de codes hexadécimaux, de noms de polices ou de rôles de couleur dans un prompt de génération — le système de design gère tout le style visuel.
  • Spécifiez les interactions : mentionnez les états au survol, les animations et les comportements de clic plutôt que le style visuel.
  • Gardez les éditions ciblées : une édition à la fois est souvent mieux qu'une longue liste de changements.
  • Référencez les composants : utilisez des termes professionnels comme « navigation bar », « hero section », « footer », « card grid ».
  • Couleurs précises dans les éditions : utilisez des codes hexadécimaux pour l'appariement de couleurs exact lors de la modification d'écrans existants.

📚 Références

Skills similaires

shopify-hydrogen
shopify / shopify-ai-toolkit

Implémenter des fonctionnalités Hydrogen Shopify via des recettes de cookbook prêtes à l'emploi.

367
shopify-hydrogen
shopify / agent-skills

Implémenter des fonctionnalités Hydrogen Shopify via des recettes de cookbook prêtes à l'emploi.

39
brand-landingpage
wshobson / agents

Concevoir une landing page branded clé en main via interview, génération et itération visuelle.

36 406
stitch-loop
google-labs-code / stitch-skills

Construire et intégrer des pages web en boucle autonome via Stitch MCP.

5 908
figma-generate-design
figma / mcp-server-guide

Créer ou mettre à jour des écrans Figma en réutilisant les composants du design system.

1 549