Design-System

Créez une « source de vérité » pour le langage de conception de votre projet afin d'assurer la cohérence sur tous les écrans futurs.

[!NOTE] Consultez votre system prompt pour les instructions sur la gestion des préfixes des outils MCP pour tous les outils mentionnés dans cette skill (par exemple, get_screen, create_design_system_from_design_md, apply_design_system).

📥 Retrieval

Pour analyser un projet Stitch, vous devez récupérer les métadonnées et les ressources à l'aide des outils Stitch MCP :

Recherche de projet : Utilisez list_projects pour trouver le projectId cible.
Recherche d'écran : Utilisez list_screens pour ce projectId afin de trouver des écrans représentatifs (par exemple, « Home », « Main Dashboard »).
Récupération de métadonnées : Appelez get_screen pour l'écran cible afin d'obtenir screenshot.downloadUrl et htmlCode.downloadUrl.
Téléchargement d'actifs : Utilisez read_url_content pour récupérer le code HTML.

🧠 Synthesis from Description

Si vous avez besoin d'extraire un design system à partir d'écrans existants, utilisez la skill design-md (dans le plugin stitch-utilities).

S'il n'y a pas d'écrans existants (nouveau projet), ou si l'utilisateur fournit une description directe (par exemple, « dark theme, blue and purple, rounded, Inter font ») :

Mappez les termes vagues de l'utilisateur à des valeurs précises en utilisant les mappages de conception (voir la skill design-md dans stitch-utilities ou la skill generate-design).
Sélectionnez des codes hex concrets, des familles de polices et des valeurs d'arrondi.
Générez le fichier DESIGN.md (consultez la skill design-md dans stitch-utilities pour la structure).
Passez à l'étape « Create or Update Design System in Stitch » ci-dessous.

📝 Output Structure

Le fichier DESIGN.md doit suivre la structure définie dans la skill design-md (dans le plugin stitch-utilities).

🚀 Create or Update Design System in Stitch

Après avoir généré .stitch/DESIGN.md, assurez-vous également de créer ou de mettre à jour le design system dans Stitch.

Création du design system en deux étapes :

[!WARNING] Checkpoint — Confirmation de l'utilisateur requise. Avant de charger, vous DEVEZ faire une pause et demander à l'utilisateur une confirmation. Présentez un résumé du design system que vous êtes sur le point de créer (nom d'affichage, couleurs clés, polices et arrondi) et attendez une approbation explicite avant de continuer. Ne CHARGEZ PAS tant que l'utilisateur n'a pas confirmé.

Chargez DESIGN.md :
- Option A (Recommandée - Script Uploader) : Utilisez le script Python upload-to-stitch modifié qui gère nativement les fichiers .md. Il encode le fichier markdown en base64 en cours de traitement et l'envoie à l'endpoint /v1/projects/{projectId}/screens:batchCreate, contournant les limites de tokens de sortie.
```
python3 stitch-skills/plugins/stitch-design/skills/upload-to-stitch/scripts/upload_to_stitch.py \
  --project-id <PROJECT_ID> \
  --file-path /path/to/DESIGN.md \
  --api-key <API_KEY>
```
  Cela retourne l'ID sourceScreen et l'ID screenInstance.
- Option B (Outil MCP Direct) : Si le DESIGN.md est petit (moins de ~5 KB), vous pouvez appeler directement l'outil MCP upload_design_md, en passant le contenu du markdown de conception encodé en base64 en tant que designMdBase64.
Créez le Design System : Appelez l'outil create_design_system_from_design_md immédiatement après le chargement, en passant le projectId et le selectedScreenInstance (contenant l'id et le sourceScreen retournés à partir de l'étape de chargement).

Une fois que le script de chargement et create_design_system_from_design_md ont tous deux été complétés, Stitch conserve les design tokens au niveau du projet — vous n'avez PAS besoin de les répéter dans les prompts de génération.

🎨 Apply Design System to Screens

Utilisez apply_design_system pour appliquer un design system à des écrans existants.

[!IMPORTANT] selectedScreenInstances doit contenir uniquement id et sourceScreen — n'incluez PAS de champs de position/dimension (x, y, width, height) ou la requête échouera avec « invalid argument ». Récupérez les ID des instances d'écran à partir de get_project.

{
  "projectId": "...",
  "assetId": "...",
  "selectedScreenInstances": [
    {
      "id": "...",
      "sourceScreen": "projects/.../screens/..."
    }
  ]
}

Comment obtenir les ID requis :

Appelez get_project pour récupérer screenInstances — chacun a un id et un sourceScreen.
Appelez list_design_systems pour récupérer le name du design system (format : assets/{assetId}) — utilisez la partie après assets/ comme assetId.
Filtrez les instances avec type: "DESIGN_SYSTEM_INSTANCE" — ne passez que les écrans réels.

📋 Update Project Metadata

Après avoir écrit .stitch/DESIGN.md, créez également ou mettez à jour .stitch/metadata.json pour tracker le projectId, le title, tous les écrans connus et le résumé du design system. Consultez examples/metadata.json pour le format.

Schema Reference

Consultez reference/tool-schema.md pour le schéma complet de l'objet designSystem avec toutes les options disponibles.

💡 Best Practices

Consultez la skill design-md (dans le plugin stitch-utilities) pour les best practices sur la description des éléments de conception.

stitch::manage-design-system