leonxlnx/taste-skill

Stitch Design Taste — Compétence de Système de Design Sémantique

Présentation

Cette compétence génère des fichiers DESIGN.md optimisés pour la génération d'écrans Google Stitch. Elle traduit des directives d'ingénierie frontend anti-slop éprouvées en langage de design sémantique natif pour Stitch — des règles descriptives en langage naturel associées à des valeurs précises que l'agent IA de Stitch peut interpréter pour produire des interfaces premium non génériques.

Le fichier DESIGN.md généré sert de source de vérité unique pour inciter Stitch à générer de nouveaux écrans alignés sur un langage de design curaté et à haute valeur ajoutée. Stitch interprète le design à travers des "Descriptions Visuelles" étayées par des valeurs de couleur spécifiques, des spécifications typographiques et des comportements de composants.

Prérequis

• Accès à Google Stitch via labs.google/stitch
• Optionnel : Serveur MCP Stitch pour l'intégration programmatique avec Cursor, Antigravity ou Gemini CLI

Objectif

Générer un fichier DESIGN.md qui encode :

1. L'atmosphère visuelle — l'ambiance, la densité et la philosophie de design
2. Le calibrage des couleurs — neutres, accents et motifs interdits avec codes hexadécimaux
3. L'architecture typographique — choix de polices, hiérarchie d'échelle et anti-patrons
4. Les comportements des composants — boutons, cartes, champs de saisie avec états d'interaction
5. Les principes de mise en page — systèmes de grille, philosophie d'espacement, stratégie responsive
6. La philosophie du mouvement — spécifications du moteur d'animation, ressorts physiques, micro-interactions perpétuelles
7. Les anti-patrons — liste explicite des clichés de design IA interdits

Instructions d'Analyse et de Synthèse

1. Définir l'Atmosphère

Évaluer l'intention du projet cible. Utiliser des adjectifs évocateurs du spectre des goûts :

• Densité : "Aéré comme une galerie d'art" (1–3) → "Équilibré pour une app quotidienne" (4–7) → "Dense comme un cockpit" (8–10)
• Variation : "Symétrique prévisible" (1–3) → "Asymétrique décalé" (4–7) → "Chaotique artistique" (8–10)
• Mouvement : "Statique retenu" (1–3) → "Fluide CSS" (4–7) → "Chorégraphie cinématographique" (8–10)

Ligne de base par défaut : Variation 8, Mouvement 6, Densité 4. S'adapter dynamiquement en fonction de la description de l'ambiance de l'utilisateur.

2. Cartographier la Palette de Couleurs

Pour chaque couleur, fournir : Nom Descriptif + Code Hexadécimal + Rôle Fonctionnel.

Contraintes obligatoires :

• Maximum 1 couleur d'accent. Saturation inférieure à 80%
• L'esthétique "Violet/Bleu Néon IA" est strictement INTERDITE — pas de lueurs violettes sur les boutons, pas de dégradés néon
• Utiliser des bases neutres absolues (Zinc/Ardoise) avec des accents singuliers à contraste élevé
• S'en tenir à une seule palette pour l'ensemble de la sortie — pas de fluctuation entre gris chauds et froids
• Ne jamais utiliser le noir pur (#000000) — utiliser Noir cassé, Zinc-950 ou Charbon

3. Établir les Règles Typographiques

• Affichage/Titres : Approche serrée, échelle contrôlée. Pas criard. Hiérarchie par le poids et la couleur, pas seulement par la taille
• Corps de texte : Interlignage relâché, maximum 65 caractères par ligne
• Sélection de police : Inter est INTERDITE pour les contextes premium/créatifs. Forcer un caractère unique : Geist, Outfit, Cabinet Grotesk ou Satoshi
• Interdiction des polices avec empattements : Les polices génériques avec empattements (Times New Roman, Georgia, Garamond, Palatino) sont INTERDITES. Si une police avec empattements est nécessaire pour des contextes éditoriaux/créatifs, utiliser uniquement des empattements modernes distinctifs : Fraunces, Gambarino, Editorial New ou Instrument Serif. Les empattements sont toujours INTERDITS dans les tableaux de bord ou les IHM logicielles
• Contrainte pour les tableaux de bord : Utiliser exclusivement des associations sans empattement (Geist + Geist Mono ou Satoshi + JetBrains Mono)
• Surcharge haute densité : Lorsque la densité dépasse 7, tous les nombres doivent être en Monospace

4. Définir la Section Hero

Le Hero est la première impression et doit être créatif, frappant et jamais générique :

• Typographie avec image intégrée : Intégrer de petites photos ou visuels contextuels directement entre les mots ou les lettres du titre. Les images sont placées en ligne à la hauteur du texte, arrondies, servant de ponctuation visuelle. C'est la technique créative signature
• Pas de chevauchement : Le texte ne doit jamais chevaucher les images ou d'autres textes. Chaque élément occupe sa propre zone spatiale propre
• Pas de texte de remplissage : "Faites défiler pour explorer", "Balayez vers le bas", icônes de flèche de défilement, chevrons rebondissants sont INTERDITS. Le contenu doit attirer les utilisateurs naturellement
• Structure asymétrique : Les mises en page Hero centrées sont INTERDITES lorsque la variation dépasse 4
• Retenue de l'appel à l'action : Maximum un appel à l'action (CTA) principal. Pas de lien secondaire "En savoir plus"

5. Décrire les Styles des Composants

Pour chaque type de composant, décrire la forme, la couleur, la profondeur d'ombre et le comportement d'interaction :

• Boutons : Retour tactile de pression à l'état actif. Pas de lueur extérieure néon. Pas de curseurs de souris personnalisés
• Cartes : Utiliser UNIQUEMENT lorsque l'élévation sert la hiérarchie. Teinter les ombres avec la teinte de fond. Pour les mises en page haute densité, remplacer les cartes par des séparateurs de bord supérieur ou des espaces négatifs
• Champs de saisie/Formulaires : Étiquette au-dessus du champ, texte d'aide optionnel, texte d'erreur en dessous. Espacement standard entre les éléments
• États de chargement : Chargements squelettiques correspondant aux dimensions de la mise en page — pas de spinners circulaires génériques
• États vides : Compositions structurées indiquant comment remplir les données
• États d'erreur : Rapport d'erreur clair, intégré au niveau du champ

6. Définir les Principes de Mise en Page

• Aucun élément ne se chevauche — chaque élément occupe sa propre zone spatiale claire. Pas d'empilement de contenu en position absolue
• Les sections Hero centrées sont INTERDITES lorsque la variation dépasse 4 — forcer un écran partagé, un alignement à gauche ou un espace blanc asymétrique
• La ligne de fonctionnalités générique "3 cartes égales horizontalement" est INTERDITE — utiliser une disposition en zigzag sur 2 colonnes, une grille asymétrique ou un défilement horizontal
• CSS Grid plutôt que la mathématique Flexbox — ne jamais utiliser de hacks de pourcentage calc()
• Contenir les mises en page avec des contraintes de largeur maximale (ex. 1400px centré)
• Les sections pleine hauteur doivent utiliser min-h-[100dvh] — jamais h-screen (saut catastrophique sur iOS Safari)

7. Définir les Règles Responsives

Chaque design doit fonctionner sur toutes les tailles d'écran :

• Repli Mobile-First (< 768px) : Toutes les mises en page multi-colonnes se réduisent à une seule colonne. Aucune exception
• Pas de défilement horizontal : Le débordement horizontal sur mobile est un échec critique
• Échelle typographique : Les titres s'adaptent via clamp(). Texte du corps minimum 1rem/14px
• Cibles tactiles : Tous les éléments interactifs avec une cible tactile minimale de 44px
• Comportement des images : Les images typographiques intégrées (photos entre les mots) se placent sous le titre sur mobile
• Navigation : La barre de navigation horizontale du bureau se replie en un menu mobile propre
• Espacement : Les écarts entre les sections se réduisent proportionnellement (clamp(3rem, 8vw, 6rem))

8. Coder la Philosophie du Mouvement

• Valeurs par défaut du ressort physique : stiffness: 100, damping: 20 — sensation premium et pondérée. Pas d'assouplissement linéaire
• Micro-interactions perpétuelles : Chaque composant actif doit avoir un état de boucle infinie (Pulsation, Machine à écrire, Flottement, Scintillement)
• Orchestration décalée : Ne jamais monter les listes instantanément — utiliser des délais en cascade pour des révélations en cascade
• Performances : Animer exclusivement via transform et opacity. Ne jamais animer top, left, width, height. Filtres de grain/bruit uniquement sur des pseudo-éléments fixes

9. Lister les Anti-patrons (Indices IA)

Encoder ces règles comme des règles "NE JAMAIS FAIRE" explicites dans le DESIGN.md :

• Pas d'emojis nulle part
• Pas de police Inter
• Pas de polices génériques avec empattements (Times New Roman, Georgia, Garamond) — uniquement des empattements modernes distinctifs si nécessaire
• Pas de noir pur (#000000)
• Pas d'ombres néon/lueur extérieure
• Pas d'accents sursaturés
• Pas de texte dégradé excessif sur les gros titres
• Pas de curseurs de souris personnalisés
• Pas d'éléments qui se chevauchent — séparation spatiale propre toujours
• Pas de mises en page de cartes égales sur 3 colonnes
• Pas de noms génériques ("John Doe", "Acme", "Nexus")
• Pas de faux nombres ronds (99.99%, 50%)
• Pas de clichés de copywriting IA ("Élevez", "Fluide", "Libérez", "Nouvelle Génération")
• Pas de texte d'interface utilisateur de remplissage : "Faites défiler pour explorer", "Balayez vers le bas", flèches de défilement, chevrons rebondissants
• Pas de liens Unsplash cassés — utiliser picsum.photos ou des avatars SVG
• Pas de sections Hero centrées (pour les projets à forte variation)

Format de Sortie (Structure DESIGN.md)

# Système de Design : [Titre du Projet]

## 1. Thème Visuel & Atmosphère
(Description évocatrice de l'ambiance, de la densité, de la variation et de l'intensité du mouvement.
Exemple : "Une interface retenue, aérée comme une galerie d'art, avec des mises en page asymétriques
confiantes et un mouvement fluide basé sur des ressorts physiques. L'atmosphère est clinique mais
chaleureuse — comme un studio d'architecture bien éclairé.")

## 2. Palette de Couleurs & Rôles
- **Blanc Toile** (#F9FAFB) — Surface de fond principale
- **Surface Pure** (#FFFFFF) — Remplissage des cartes et conteneurs
- **Encre Charbon** (#18181B) — Texte principal, profondeur Zinc-950
- **Acier Adouci** (#71717A) — Texte secondaire, descriptions, métadonnées
- **Bordure Murmurée** (rgba(226,232,240,0.5)) — Bordures de cartes, lignes structurelles 1px
- **[Nom Accent]** (#XXXXXX) — Accent unique pour les CTA, états actifs, anneaux de focus
(Maximum 1 accent. Saturation < 80%. Pas de violet/néon.)

## 3. Règles Typographiques
- **Affichage :** [Nom de la police] — Approche serrée, échelle contrôlée, hiérarchie par le poids
- **Corps :** [Nom de la police] — Interlignage relâché, largeur max 65 caractères, couleur secondaire neutre
- **Mono :** [Nom de la police] — Pour le code, les métadonnées, les horodatages, les nombres en haute densité
- **Interdits :** Inter, polices système génériques pour les contextes premium. Polices avec empattements interdites dans les tableaux de bord.

## 4. Styles des Composants
* **Boutons :** Plats, pas de lueur extérieure. Translation tactile de -1px à l'état actif. Remplissage d'accent pour le primaire, contour fantôme pour le secondaire.
* **Cartes :** Coins généreusement arrondis (2.5rem). Ombre diffusée et murmurée. Utilisées uniquement lorsque l'élévation sert la hiérarchie. Haute densité : remplacer par des séparateurs de bord supérieur.
* **Champs de saisie :** Étiquette au-dessus, erreur en dessous. Anneau de focus de la couleur d'accent. Pas d'étiquettes flottantes.
* **Chargements :** Scintillement squelettique correspondant aux dimensions exactes de la mise en page. Pas de spinners circulaires.
* **États vides :** Compositions structurées et illustrées — pas seulement du texte "Aucune donnée".

## 5. Principes de Mise en Page
(Architecture responsive basée sur la grille. Scissions asymétriques pour les sections Hero.
Repli strict à une seule colonne en dessous de 768px. Contrainte de largeur maximale.
Pas de mathématique de pourcentage Flexbox. Padding intérieur généreux.)

## 6. Mouvement & Interaction
(Ressorts physiques pour tous les éléments interactifs. Révélations en cascade décalées.
Micro-boucles perpétuelles sur les composants actifs du tableau de bord. Transformations
uniquement accélérées par le matériel. Composants Client isolés pour les animations
intensives en CPU.)

## 7. Anti-patrons (Interdits)
(Liste explicite des motifs interdits : pas d'emojis, pas d'Inter, pas de noir pur,
pas de lueurs néon, pas de grilles égales à 3 colonnes, pas de clichés de copywriting IA,
pas de noms de lieux communs génériques, pas de liens d'images cassés.)

Bonnes Pratiques

• Soyez Descriptif : "Encre Charbon Profonde (#18181B)" — pas seulement "texte foncé"
• Soyez Fonctionnel : Expliquez à quoi sert chaque élément
• Soyez Cohérent : Même terminologie tout au long du document
• Soyez Précis : Incluez les codes hexadécimaux exacts, les valeurs rem, les valeurs pixel entre parenthèses
• Soyez Impliqué : Ce n'est pas un modèle neutre — il impose une esthétique premium spécifique

Conseils pour Réussir

1. Commencez par l'atmosphère — comprenez l'ambiance avant de détailler les tokens
2. Recherchez les motifs — identifiez un espacement, un dimensionnement et un style cohérents
3. Pensez sémantiquement — nommez les couleurs par leur fonction, pas seulement par leur apparence
4. Considérez la hiérarchie — documentez comment le poids visuel communique l'importance
5. Codez les interdictions — les anti-patrons sont aussi importants que les règles elles-mêmes

Pièges Courants à Éviter

• Utiliser du jargon technique sans traduction ("rounded-xl" au lieu de "coins généreusement arrondis")
• Omettre les codes hexadécimaux ou n'utiliser que des noms descriptifs
• Oublier les rôles fonctionnels des éléments de design
• Être trop vague dans les descriptions de l'atmosphère
• Ignorer la liste des anti-patrons — ce sont eux qui rendent la sortie premium
• Par défaut, recourir à des designs "sûrs" génériques au lieu d'imposer l'esthétique curatée