stitch-ui-design
Créer des conceptions UI avec Google Stitch
Cette compétence aide les utilisateurs à rédiger des invites efficaces pour l'outil de conception UI par IA Google Stitch. Elle fournit les meilleures pratiques, des exemples d'invites et des techniques avancées pour générer des interfaces web et mobiles professionnelles.
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-ui-design". Comment créer un tableau de bord avec Stitch ?
Résultat attendu:
Pour cr��er un tableau de bord avec Google Stitch, suivez ces principes :
1. Soyez spécifique : Au lieu de 'Créer un tableau de bord', utilisez 'Tableau de bord membre avec une grille de modules de cours, une barre de progression et un fil d'activité communautaire en utilisant un thème violet et une mise en page basée sur des cartes'
2. Définissez le style visuel : Incluez les palettes de couleurs, l'esthétique de design
3. Listez les composants : Spécifiez chaque élément UI nécessaire
Exemple d'invite : 'Tableau de bord analytique avec cartes KPI, graphique linéaire pour les tendances, sélecteur de plage de dates et bouton d'export. Utiliser un thème sombre moderne avec des couleurs d'accentuation pour la visualisation des données.'
Utilisation de "stitch-ui-design". Que dois-je inclure pour les invites d'application mobile ?
Résultat attendu:
Pour les applications mobiles, spécifiez :
- Plateforme : iOS, Android ou multiplateforme
- Dimensions d'écran et comportement responsive
- Modèle de navigation (barre d'onglets, tiroir, pile)
- Composants natifs pour la plateforme
- Dimensions et espacements tactiles
Exemple : 'Écran de connexion d'application mobile (style iOS) avec champs email/mot de passe, boutons d'auth sociale (Google, Apple) et lien mot de passe oublié. Utiliser les lignes directrices de l'interface humaine iOS avec la police SF Pro.'
Audit de sécurité
SûrThis is a documentation-only skill containing markdown files with guidance for Google Stitch AI UI design tool. All static analyzer findings are false positives: backticks are markdown code formatting, not shell execution; cryptographic algorithm flags are documentation text misinterpreted by scanner. No executable code, network requests, or dangerous patterns present.
Problèmes à risque élevé (3)
Score de qualité
Ce que vous pouvez construire
Apprendre les bases des invites Stitch
Nouveaux utilisateurs souhaitant comprendre comment rédiger des invites efficaces pour Google Stitch afin de générer leurs premières conceptions UI
Améliorer la qualité des conceptions générées
Utilisateurs ayant essayé Stitch mais obtenant des résultats génériques et souhaitant apprendre des techniques spécifiques pour obtenir des conceptions meilleures et plus adaptées
Créer des flux d'application multi-écrans
Utilisateurs créant des applications complètes ayant besoin de conseils pour rédiger des invites pour plusieurs écrans connectés et des mises en page responsives
Essayez ces prompts
Créer un [type de composant] avec [fonctionnalités spécifiques], en utilisant le thème [palette de couleurs] et le design [style de mise en page].
Concevoir une page de produit e-commerce avec une galerie d'images héro, un bouton d'ajout au panier, une section avis et un carrousel de produits associés. Utiliser un design épuré minimaliste avec des accents [couleur d'accentuation] et un espacement blanc généreux.
Concevoir un écran [nom de l'écran] pour une application mobile [type d'application]. Inclure [liste des fonctionnalités et composants]. Utiliser [style de design] avec [palette de couleurs]. Ajouter [états interactifs] et [éléments de navigation].
Créer une application [type d'application] avec : - [écran 1] avec [fonctionnalités] - [écran 2] avec [fonctionnalités] - [écran 3] avec [fonctionnalités] Utiliser le style [système de design] et assurer un comportement responsive sur mobile et bureau.
Bonnes pratiques
- Spécifiez toujours les détails visuels : couleurs, typographie, espacement et style de design pour éviter des résultats IA génériques
- Listez explicitement chaque écran pour les applications multi-écrans - Stitch confirmera avant de générer plusieurs conceptions
- Incluez les exigences fonctionnelles : actions des boutons, validation des formulaires, modèles de navigation et flux utilisateur
Éviter
- Utiliser des invites vagues comme 'Créer une belle page de connexion' - résulte en des conceptions génériques et inutilisables
- Oublier de spécifier la plateforme (mobile vs bureau) conduisant à de fausses attentes de mise en page
- Ne pas définir le style visuel, provoquant une sortie aléatoire ou incohérente de l'esthétique par l'IA