stitch-design-taste
Générer des systèmes de design UI premium pour Google Stitch
Les agents Claude produisent souvent des interfaces génériques qui resemble à de l'IA. Cette skill impose des normes de design strictes pour générer des spécifications UI premium, anti-génériques, qui évitent les écueils courants comme la police Inter, les effets néon lumineux et les sections hero centrées.
Télécharger le ZIP du skill
Importer dans Claude
Allez dans Paramètres → Capacités → Skills → Importer un skill
Activez et commencez à utiliser
Tester
Utilisation de "stitch-design-taste". Générer une spécification de design pour un dashboard fintech
Résultat attendu:
Un fichier DESIGN.md avec : fond Canvas White (#F9FAFB), texte Charcoal Ink (#18181B), accent Emerald Signal (#10B981) pour les métriques de croissance, police Geist en poids 700-900 pour les titres, monospace pour tous les chiffres, spécifications d'animation physique à ressort (raideur : 100, amortissement : 20), et interdictions explicites de la police Inter, des effets néon lumineux et des données génériques placeholder.
Utilisation de "stitch-design-taste". Créer une spécification de design pour un site magazine éditorial
Résultat attendu:
Un fichier DESIGN.md avec : créativité élevée (9), variance élevée (8), mises en page hero asymétriques avec typographie intégrée aux images, serif modernes distinctifs (Fraunces, Instrument Serif) pour l'affichage, largeur max de corps de texte stricte à 65ch, et orchestration du mouvement avec révélations échelonnées.
Audit de sécurité
SûrStatic analysis flagged 205 potential issues, all evaluated as false positives. The skill contains only markdown documentation files describing design system specifications. No executable code, shell commands, or cryptographic operations exist. All detected patterns are design terminology being misinterpreted by the scanner (e.g., CSS hash notation, font weight values, design system references). Safe for publication.
Score de qualité
Ce que vous pouvez construire
Créer des landing pages premium
Générer des spécifications de design pour des landing pages haut de gamme qui évitent l'esthétique IA générique. Parfait pour les startups souhaitant une présence web professionnelle et distinctive.
Construire des systèmes de design cohérents
Établir un langage visuel cohérent à travers une suite de produits en documentant la typographie, les couleurs, l'espacement et les comportements des composants dans une seule source de vérité.
Prototyper avec des contraintes de design
Utiliser la liste des anti-modèles comme garde-fous lors du prototypage rapide. Les interdictions explicites préviennent les erreurs de design courantes avant qu'elles ne se produisent.
Essayez ces prompts
Utiliser la compétence stitch-design-taste pour générer un DESIGN.md pour un [décrivez votre type de projet, ex. 'dashboard SaaS'] avec un niveau de créativité [1-10] et un niveau de densité [1-10].
Utiliser la compétence stitch-design-taste pour créer un DESIGN.md pour [décrivez votre projet]. L'ambiance est [décrivez l'ambiance, ex. 'magazine éditorial avec typographie audacieuse']. Définissez la variance à 8 et le mouvement à 6.
Utiliser la compétence stitch-design-taste pour générer un DESIGN.md pour un dashboard riche en données. Définissez la densité à 9, la variance à 7 et activez la police monospace pour toutes les valeurs numériques. Incluez des animations perpétuelles pour les indicateurs de statut.
Utiliser la compétence stitch-design-taste pour créer un DESIGN.md pour un portfolio minimaliste. Définissez la créativité à 3, la densité à 2, la variance à 2. Utilisez le bleu électrique comme seul accent. Pas de polices serif.
Bonnes pratiques
- Commencez par la description de l'atmosphère — comprenez l'ambiance avant de détailler les tokens pour assurer un langage de design cohérent
- Choisissez exactement une couleur d'accent et respectez-la tout au long de la spécification — plusieurs accents diluent l'aspect premium
- Incluez des anti-modèles explicites — la liste des interdits est ce qui rend la sortie non générique et distinctive
Éviter
- Utiliser la police Inter — cela crée des interfaces génériques qui resemble à de l'IA ; utilisez plutôt Geist, Satoshi, Cabinet Grotesk ou Outfit
- Ajouter des effets de dégradés violets ou néon — cela crie « généré par IA » et est strictement interdit dans les contextes premium
- Mises en page hero centrées — elles sont génériques et interdites ; utilisez plutôt des structures asymétriques en écran partagé ou alignées à gauche