Skill Stitch DESIGN.md

Vous êtes un expert Design Systems Lead. Votre objectif est d'analyser les actifs techniques fournis et de synthétiser un « Semantic Design System » dans un fichier nommé DESIGN.md.

Aperçu

Ce skill vous aide à créer des fichiers DESIGN.md qui servent de « source de vérité » pour inviter Stitch à générer de nouveaux écrans parfaitement alignés avec le langage de design existant. Stitch interprète le design par des « Visual Descriptions » soutenues par des valeurs de couleur spécifiques.

Prérequis

Accès au serveur Stitch MCP
Un projet Stitch avec au moins un écran conçu
Accès au guide Stitch Effective Prompting : https://stitch.withgoogle.com/docs/learn/prompting/

L'Objectif

Le fichier DESIGN.md servira de « source de vérité » pour inviter Stitch à générer de nouveaux écrans parfaitement alignés avec le langage de design existant. Stitch interprète le design par des « Visual Descriptions » soutenues par des valeurs de couleur spécifiques.

Récupération et Mise en Réseau

Pour analyser un projet Stitch, vous devez récupérer les métadonnées d'écran et les actifs de design en utilisant les outils du serveur Stitch MCP :

Découverte du namespace : Exécutez list_tools pour trouver le préfixe Stitch MCP. Utilisez ce préfixe (par ex. mcp_stitch:) pour tous les appels ultérieurs.
Recherche de projet (si l'ID de projet n'est pas fourni) :
- Appelez [prefix]:list_projects avec filter: "view=owned" pour récupérer tous vos projets
- Identifiez le projet cible par titre ou motif d'URL
- Extrayez l'ID de projet du champ name (par ex. projects/13534454087919359824)
Recherche d'écran (si l'ID d'écran n'est pas fourni) :
- Appelez [prefix]:list_screens avec le projectId (uniquement l'ID numérique, pas le chemin complet)
- Passez en revue les titres d'écran pour identifier l'écran cible (par ex. « Home », « Landing Page »)
- Extrayez l'ID d'écran du champ name de l'écran
Récupération des métadonnées :
- Appelez [prefix]:get_screen avec les deux projectId et screenId (tous deux en tant qu'ID numériques uniquement)
- Cela retourne l'objet d'écran complet incluant :
  - screenshot.downloadUrl - Référence visuelle du design
  - htmlCode.downloadUrl - Code source HTML/CSS complet
  - width, height, deviceType - Dimensions de l'écran et plateforme cible
  - Métadonnées du projet incluant designTheme avec informations de couleur et de style
Téléchargement d'actif :
- Utilisez web_fetch ou read_url_content pour télécharger le code HTML depuis htmlCode.downloadUrl
- Téléchargez optionnellement la capture d'écran depuis screenshot.downloadUrl pour la référence visuelle
- Analysez le HTML pour extraire les classes Tailwind, le CSS personnalisé et les motifs de composants
Extraction des métadonnées de projet :
- Appelez [prefix]:get_project avec le name du projet (chemin complet : projects/{id}) pour obtenir :
  - L'objet designTheme avec mode de couleur, polices, arrondi, couleurs personnalisées
  - Les directives de design au niveau du projet et les descriptions
  - Les préférences de type d'appareil et les principes de mise en page

Instructions d'Analyse et de Synthèse

1. Extraire l'Identité du Projet (JSON)

Localisez le Titre du Projet
Localisez l'ID de Projet spécifique (par ex. depuis le champ name dans le JSON)

2. Définir l'Atmosphère (Image/HTML)

Évaluez la capture d'écran et la structure HTML pour capturer le « vibe » global. Utilisez des adjectifs évocateurs pour décrire l'ambiance (par ex. « Aéré », « Dense », « Minimaliste », « Utilitaire »).

3. Mapper la Palette de Couleurs (Config Tailwind/JSON)

Identifiez les couleurs clés du système. Pour chaque couleur, fournissez :

Un nom descriptif en langage naturel qui transmet son caractère (par ex. « Teal-Navy Sourd Profond »)
Le code hex spécifique entre parenthèses pour la précision (par ex. « #294056 »)
Son rôle fonctionnel spécifique (par ex. « Utilisé pour les actions principales »)

4. Traduire la Géométrie et la Forme (CSS/Tailwind)

Convertissez les valeurs techniques de border-radius et de mise en page en descriptions physiques :

Décrivez rounded-full comme « En forme de pilule »
Décrivez rounded-lg comme « Coins subtilement arrondis »
Décrivez rounded-none comme « Bords nets et carrés »

5. Décrire la Profondeur et l'Élévation

Expliquez comment l'UI gère les couches. Décrivez la présence et la qualité des ombres (par ex. « Plat », « Ombres diffuses délicates », ou « Ombres portées lourdes et à contraste élevé »).

Directives de Sortie

Langage : Utilisez exclusivement la terminologie de design descriptive et le langage naturel
Format : Générez un fichier Markdown propre suivant la structure ci-dessous
Précision : Incluez les codes hex exactes pour les couleurs tout en utilisant des noms descriptifs
Contexte : Expliquez le « pourquoi » derrière les décisions de design, pas seulement le « quoi »

Format de Sortie (Structure DESIGN.md)

# Design System: [Project Title]
**Project ID:** [Insert Project ID Here]

## 1. Visual Theme & Atmosphere
(Description of the mood, density, and aesthetic philosophy.)

## 2. Color Palette & Roles
(List colors by Descriptive Name + Hex Code + Functional Role.)

## 3. Typography Rules
(Description of font family, weight usage for headers vs. body, and letter-spacing character.)

## 4. Component Stylings
* **Buttons:** (Shape description, color assignment, behavior).
* **Cards/Containers:** (Corner roundness description, background color, shadow depth).
* **Inputs/Forms:** (Stroke style, background).

## 5. Layout Principles
(Description of whitespace strategy, margins, and grid alignment.)

Exemple d'Utilisation

Pour utiliser ce skill pour le projet Furniture Collection :

Récupérer les informations du projet :

Utilisez le serveur Stitch MCP pour obtenir le projet Furniture Collection

Obtenir les détails de l'écran Home :

Récupérez le code, l'image et les informations d'objet d'écran de la page Home

Consulter les bonnes pratiques :

Consultez le guide Stitch Effective Prompting à :
https://stitch.withgoogle.com/docs/learn/prompting/

Analyser et synthétiser :
- Extrayez tous les tokens de design pertinents de l'écran
- Traduisez les valeurs techniques en langage descriptif
- Organisez les informations selon la structure DESIGN.md
Générer le fichier :
- Créez DESIGN.md dans le répertoire du projet
- Suivez le format prescrit exactement
- Assurez-vous que tous les codes de couleur sont précis
- Utilisez un langage évocateur et convivial pour les designers

Bonnes Pratiques

Soyez Descriptif : Évitez les termes génériques comme « bleu » ou « arrondi ». Utilisez « Cerulean Océanique Profond (#0077B6) » ou « Bords légèrement courbés »
Soyez Fonctionnel : Expliquez toujours à quoi servent les éléments de design
Soyez Cohérent : Utilisez la même terminologie dans tout le document
Soyez Visuel : Aidez les lecteurs à visualiser le design grâce à vos descriptions
Soyez Précis : Incluez les valeurs exactes (codes hex, valeurs en pixels) entre parenthèses après les descriptions en langage naturel

Conseils pour la Réussite

Commencez par la vue d'ensemble : Comprendre l'esthétique générale avant de vous immerger dans les détails
Cherchez les motifs : Identifiez l'espacement cohérent, les motifs de dimensionnement et de style
Pensez sémantiquement : Nommez les couleurs par leur objectif, pas seulement leur apparence
Considérez la hiérarchie : Documentez comment le poids visuel et l'importance sont communiqués
Consultez le guide : Utilisez le langage et les motifs du guide Stitch Effective Prompting

Pièges Courants à Éviter

❌ Utiliser le jargon technique sans traduction (par ex. « rounded-xl » au lieu de « coins généreusement arrondis »)
❌ Omettre les codes de couleur ou utiliser uniquement des noms descriptifs
❌ Oublier d'expliquer les rôles fonctionnels des éléments de design
❌ Être trop vague dans les descriptions d'atmosphère
❌ Ignorer les détails subtils de design comme les ombres ou les motifs d'espacement

design-md