Install
npx skills add google-labs-code/stitch-skillsPour qui
Si vous utilisez déjà Google Stitch pour des interfaces et voulez qu'un agent de code, selon la norme ouverte Agent Skills, génère de nouveaux écrans, en modifie d'existants ou produise des variantes, cet ensemble convient. C'est un lot de compétences et de plugins pour Google Stitch. La page d'explication est
https://github.com/google-labs-code/stitch-skills
Le produit lui-même est
https://stitch.withgoogle.com/
Le meilleur profil a déjà enregistré Stitch MCP, a variables d'environnement et identifiants prêts selon les notes officielles, et n'accepte que la commande d'installation de compétence ci-dessous. Ces compétences exigent que Stitch MCP soit configuré et en cours dans l'environnement de l'agent ; sans MCP, elles n'ont pas de backend de design à appeler. Notes d'installation :
https://stitch.withgoogle.com/docs/mcp/setup/
Le premier passage doit être une génération ou une variante petite et vérifiable, pas la refonte d'un système de design de production. Le texte officiel nomme plusieurs environnements de code ; l'un indique une installation manuelle, sans en donner les étapes. Ne lisez pas la liste nommée comme les seuls environnements possibles, et n'inventez pas d'installeurs non écrits. Le lot suit la norme ouverte Agent Skills. Les noms apparaissent comme stitch::generate-design ; n'ajoutez pas d'autres noms stitch:: non écrits. S'il vous manque encore un compte Stitch ou des identifiants MCP, allez d'abord aux documents Setup, ne lancez pas npx d'abord.
Premier essai en 3 minutes
Les compétences n'empruntent que cette commande officielle facultative :
npx skills add google-labs-code/stitch-skills
Ne cherchez pas un autre marché, plugin ou second installeur de compétence. Après installation, redémarrez l'agent et confirmez que la compétence apparaît.
Prérequis : Stitch MCP est enregistré selon les documents Setup ci-dessus, variables d'environnement et identifiants sont définis, le processus tourne. Si MCP n'est pas prêt, restez aux contrôles de configuration ; n'appelez pas la génération. La machine doit aussi pouvoir exécuter npx.
Dans un agent déjà pourvu de la compétence et dont MCP tourne, une tâche à faible risque : appeler stitch::generate-design, décrire un écran bac à sable en peu de texte (par exemple « une page d'état vide avec seulement un titre et un bouton principal »), puis faire reformuler l'invite envoyée à Stitch, s'il modifiera un écran existant, et s'il écrira des fichiers locaux. Après confirmation qu'il ne générera qu'une nouvelle ébauche sans écraser une maquette officielle, autorisez la suite.
Signal de succès : un nouvel écran correspondant ou un résultat de design ouvrable apparaît dans Stitch, pas un faux HTML sans lien avec Stitch. Si la compétence dit que le backend est indisponible, revenez à : MCP tourne-t-il, les identifiants suivent-ils les documents officiels. Ne changez pas la commande d'installation pour tester des sources non documentées. Si elle demande des substituts de secret absents des documents, arrêtez. N'utilisez que les noms de variables d'environnement écrits sur la page Setup.
Cas d'usage
Cas 1 : générer un nouvel écran à partir de texte ou d'une image. La note de stitch::generate-design est : générer de nouveaux écrans à partir de texte ou d'images. Préparez une description d'interface, ou une image de référence que vous avez le droit d'utiliser, et laissez la compétence produire une première ébauche dans Stitch. Arrêtez si le chemin d'image ou le texte n'est pas prêt. La génération aboutit côté Stitch et est un appel sortant ; confirmez l'invite avant d'exécuter. Le texte officiel ne donne ni modèles d'invite ni limites de taille d'image. Sans ces détails, gardez la description courte et n'inventez pas de paramètres.
Cas 2 : modifier un écran existant ou produire des variantes. La même compétence indique aussi qu'elle peut éditer des écrans existants et créer des variantes. Désignez une ébauche existante dans Stitch et demandez seulement une ou deux variantes ; n'écrasez pas en masse. Le texte officiel ne donne ni plafond de variantes ni bouton de retour arrière, donc faites d'abord dire quel écran sera modifié et s'il enregistrera une variante à part ; n'exécutez qu'après confirmation. C'est une autre opération de la même compétence que le cas 1, pas une autre installation. Si l'agent propose une commande de plugin non documentée pour le même travail, refusez et continuez avec le seul nom de compétence installé.
Limites d'usage
Sans Stitch MCP en cours, cet ensemble ne peut pas servir de compétence de dessin ordinaire. Il faut d'abord terminer l'enregistrement du serveur ainsi que variables d'environnement et identifiants ; le texte officiel ne donne aucun contournement si un élément manque. Ne traitez pas la commande d'installation de compétence comme une commande d'installation MCP.
L'installation officielle de compétence n'est que npx skills add google-labs-code/stitch-skills. La page a aussi une forme npx plugins add avec --target pour un hôte donné ; c'est un point d'arrivée de plugin, pas l'entrée d'installation de compétence de ce guide. Pour les environnements dont la liste dit « installation manuelle », le texte officiel ne donne pas d'étapes recopables ; n'inventez ni copie de répertoire ni consignes de marché.
generate-design crée ou modifie des écrans dans Stitch et est un appel externe à effets de bord. Vérifiez l'invite, l'écran cible et l'enregistrement à part avant d'exécuter. Le texte officiel n'autorise pas à envoyer les résultats générés directement dans une application de production, et ne dresse pas les noms de compétences hors tableau ; ne devinez pas les capacités non écrites. Pour générer depuis une image, n'utilisez qu'une référence que vous avez le droit d'utiliser. Avant d'éditer un écran existant, confirmez dans Stitch qu'il est encore une ébauche, pour ne pas écraser une interface déjà livrée.