stitch-design-tastepar Leonxlnx

Stitch Design Taste Skill.

Un skill Claude Code et Codex pour les systèmes de design et l'identité de marque : rédige un DESIGN.md pour Google Stitch en privilégiant la distinction visuelle.

Marque et design systems
DESIGN.md

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

Leonxlnx/taste-skill · skills/stitch-skill/SKILL.mdSKILL.md

--- name: stitch-design-taste description: Semantic Design System Skill for Google Stitch. Generates agent-friendly DESIGN.md files that enforce premium, anti-generic UI standards — strict typography, calibrated color, asymmetric layouts, perpetual micro-motion, and hardware-accelerated performance. --- ## Prerequisites ## The Goal ## Analysis & Synthesis Instructions ## Output Format (DESIGN.md Structure) ## 1. Visual Theme & Atmosphere ## 2. Color Palette & Roles

En-tête et titres de section lus depuis le fichier amont le 14/09/2026 · 11 732 caractères au total

01 Ce qu'il fait

Ce que fait le skill stitch-design-taste 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 génère des fichiers DESIGN.md optimisés pour la génération d'écrans Google Stitch. Il traduit les directives d'ingénierie frontend anti-générique dans le langage de design sémantique natif de Stitch — des règles descriptives en langage naturel associées à des valeurs précises que l'agent IA de Stitch peut interpréter. Le fichier constitue la source de vérité unique pour inciter Stitch à générer des interfaces premium et non génériques.

Il impose des règles typographiques strictes, des palettes de couleurs calibrées, des layouts asymétriques, une micro-motion perpétuelle et des performances accélérées par le matériel. Le skill inclut des listes explicites d'anti-patterns qui interdisent les clichés de design IA comme la police Inter, les lueurs néon, les sections hero centrées et le contenu de remplissage générique.

Ce qu'il produit

Un fichier DESIGN.md avec sept sections structurées : Thème visuel & Atmosphère, Palette de couleurs & Rôles, Règles typographiques, Styles des composants, Principes de layout, Motion & Interaction, et Anti-patterns

Voir l'exemple de prompt ↗

Fonctionnement

01
Définir l'atmosphère
Évaluez l'intention du projet cible à l'aide d'adjectifs évocateurs issus du spectre de goût selon trois dimensions : Densité (1-10, de Aéré à Dense comme un cockpit), Variance (1-10, de Symétrique à Chaotique), et Motion (1-10, de Statique à Cinématique).
02
Cartographier la palette de couleurs
Pour chaque couleur, indiquez un nom descriptif, le code hexadécimal et le rôle fonctionnel. Maximum une couleur d'accentuation avec une saturation inférieure à 80 %.
03
Définir la section hero
Créez des premières impressions marquantes grâce à une typographie avec images intégrées (petites photos insérées entre les mots à hauteur de texte), des structures asymétriques lorsque la variance dépasse 4, et au maximum un CTA principal.
04
Décrire les styles des composants
Spécifiez la forme, la couleur, la profondeur d'ombre et le comportement d'interaction pour les boutons, cartes, champs de saisie, états de chargement et états d'erreur.
05
Encoder la philosophie du motion
Définissez les valeurs par défaut de la physique de ressort (rigidité : 100, amortissement : 20), des micro-interactions perpétuelles pour les composants actifs, une orchestration échelonnée pour les révélations de listes, et des contraintes de performance limitant l'animation à transform et opacity uniquement.

02 Trouvez celui qui vous convient

Quand utiliser le Skill stitch-design-taste

Utilisez le skill stitch-design-taste dans Claude Code ou Codex lorsque le travail concerne la marque et le design système de ce type. L'adéquation et les limites ci-dessous proviennent du propre fichier du skill.

Bon choix

Génération de fichiers DESIGN.md optimisés pour la génération d'écrans Google Stitch qui encodent des standards de design premium et non génériques
Projets nécessitant une application stricte des anti-patterns pour éviter les clichés de design IA comme les lueurs néon, la police Inter et le contenu de remplissage générique
Tableaux de bord à haute densité ou interfaces de type cockpit nécessitant des chiffres monospace et une lisibilité compacte

Connaître les limites

Projets nécessitant la police Inter ou des polices système génériques pour des contextes premium
Interfaces utilisant des mises en page héro centrées lorsque la variance dépasse 4, ou des mises en page à trois colonnes de cartes égales
Designs avec emojis, halos lumineux néon en ombre extérieure, curseurs de souris personnalisés, ou clichés de rédaction IA comme Elevate, Seamless, Unleash

Quoi fournir

Intention du projet cibleCompréhension du fait que le projet soit une galerie d'art, une application quotidienne, une interface de cockpit ou une autre catégorie, afin d'évaluer la densité, la variance et le spectre de mouvement appropriés.

03 Dans le skill

Règles que le skill stitch-design-taste donne à Claude Code et Codex

5 instructions concrètes, valeurs par défaut et limites que SKILL.md fixe pour l'agent — la partie du fichier qui change le résultat.

Référence d'atmosphère par défaut
La référence par défaut pour les nouveaux projets est Variance 8, Motion 6, Density 4. Ces valeurs doivent être adaptées dynamiquement selon la description de vibe de l'utilisateur.
Pas de sections héro centrées au-dessus de Variance 4
Les mises en page Centered Hero sont interdites lorsque la variance dépasse 4. Forcer à la place des mises en page Split Screen, Left-Aligned ou Asymmetric Whitespace.
La fenêtre d'affichage mobile utilise min-h-[100dvh]
Les sections pleine hauteur doivent utiliser min-h-[100dvh], jamais h-screen, pour éviter le comportement catastrophique de saut de la barre d'adresse dans Safari iOS.
Zones tactiles minimales de 44px
Tous les éléments interactifs doivent avoir une zone tactile minimale de 44px pour garantir l'accessibilité et l'utilisabilité sur les appareils mobiles.
Aucun élément superposé
Le texte ne doit jamais se superposer aux images ou à d'autres textes. Chaque élément occupe sa propre zone spatiale nette avec une séparation spatiale claire. L'empilement de contenu en position absolue n'est pas autorisé.

04 Mettez-le en pratique

Installer stitch-design-taste 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.

Ajouter stitch-design-taste à 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/Leonxlnx/taste-skill --skill stitch-design-taste

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

Donnez au Skill une première tâche de brand et de design-system

Rédigé dans les termes propres du skill ; remplacez les parties entre crochets par votre contenu.

Starter prompt

Generate a DESIGN.md for [project name], a high-density financial dashboard targeting professional traders. The atmosphere should feel like a cockpit interface — variance 8, motion 6, density 9. Use a single cool accent (cyan or sky blue) and ban all generic patterns. All numbers must be monospace, and the hero section should use asymmetric layout with inline image typography showing [trading floor photos] between headline words.

Source : rédigé à partir du SKILL.md, dans les termes propres du skill.

Vérifiez le premier résultat

Ce que le SKILL.md lui-même présente comme un résultat correct :

Vérifiez que toutes les entrées de couleur incluent un nom descriptif, un code hexadécimal et un rôle fonctionnel, avec au maximum une couleur d'accent à une saturation inférieure à 80 %
Assurez-vous que la liste des anti-patterns interdit explicitement la police Inter, les polices serif génériques, le noir pur, les halos néon, les emojis et les clichés de rédaction IA
Assurez-vous que les règles de responsive mobile imposent un empilement en une seule colonne sous 768px, des zones tactiles minimales de 44px, et min-h-[100dvh] pour les sections pleine hauteur

Dans OpenDesign, importez stitch-design-taste 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: Leonxlnx
Repository: github.com/Leonxlnx/taste-skill Branche main
Fichier du skill: skills/stitch-skill/SKILL.md Somme de contrôle du contenu enregistrée lors de la vérification ; commit ccbc156
License: MIT D'après LICENSE. Quasi-doublon de taste-design de Google Stitch ; la version Google n'est pas comptée séparément.
Étoiles du dépôt: 86 946 Instantané GitHub pris le 14/09/2026 pour l'ensemble du dépôt Leonxlnx/taste-skill, qui contient 11 skills de ce catalogue. Ce n'est pas une note ni un décompte d'utilisation pour stitch-design-taste.
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

AperçuDéfinit l'objectif du skill : générer des fichiers DESIGN.md pour Stitch en utilisant un langage de design sémantique et des standards anti-génériques.
PrérequisListe les exigences d'accès : Google Stitch via labs.google/stitch et optionnellement Stitch MCP Server pour une intégration programmatique.
L'objectifDécrit sept cibles d'encodage : atmosphère visuelle, calibration des couleurs, architecture typographique, comportements des composants, principes de mise en page, philosophie du mouvement, anti-patterns.
1. Définir l'atmosphèreUtilisez des adjectifs évocateurs sur les spectres de densité, de variance et de mouvement, avec une référence par défaut Variance 8, Motion 6, Density 4.
2. Cartographier la palette de couleursIndiquez un nom descriptif, le code hexadécimal et le rôle fonctionnel, avec au maximum une couleur d'accent en dessous de 80 % de saturation, en bannissant les esthétiques néon.
3. Établir les règles typographiquesBannissez Inter pour les contextes premium et les serifs génériques ; imposez des polices distinctives avec une hiérarchie établie par la graisse et la couleur, non par la taille.
4. Définir la section héroCréez des premières impressions marquantes grâce à une typographie intégrée aux images, des structures asymétriques au-delà d'une variance de 4, et un seul CTA maximum.
5. Décrire les styles des composantsSpécifiez la forme, la couleur, la profondeur d'ombre et le comportement d'interaction, les cartes n'étant utilisées que lorsque l'élévation traduit une hiérarchie.
6. Définir les principes de mise en pageAucun élément superposé, héros centrés bannis au-delà d'une variance de 4, CSS Grid privilégié à Flexbox, conteneurs à largeur maximale, min-h-[100dvh] pour la pleine hauteur.
7. Définir les règles de réactivitéPassage mobile-first à une colonne unique sous 768px, cibles tactiles de 44px, mise à l'échelle typographique avec clamp, images intégrées empilées sur mobile.
8. Encoder la philosophie du mouvementPhysique à ressort par défaut avec une rigidité de 100 et un amortissement de 20, micro-interactions perpétuelles, orchestration en cascade, transformations accélérées par le matériel uniquement.
9. Lister les anti-patterns (indices de l'IA)Règles explicites d'interdiction : pas d'émojis, pas d'Inter, pas de serifs génériques, pas de noir pur, pas de lueurs néon, pas d'éléments superposés, pas de clichés d'IA, pas de texte de remplissage.

Description du skill lui-même

Skill Semantic Design System pour Google Stitch. Génère des fichiers DESIGN.md compréhensibles par les agents qui imposent des standards d'interface premium et anti-génériques : typographie stricte, couleur calibrée, mises en page asymétriques, micro-mouvement perpétuel et performances accélérées matériellement.

Description de l'en-tête depuis SKILL.md. Le fichier complet fait environ 11 732 caractères. Lire le fichier complet sur GitHub.

Goût du design Stitch

Exécutez stitch-design-taste sur une tâche de travail réelle concernant une marque et un design system.

Téléchargez OpenDesign, importez stitch-design-taste depuis son lien SKILL.md, collez l'invite ci-dessus et lisez le plan avant le résultat.

Télécharger OpenDesign Parcourir tous les skills