Stitch Design Skills : d'une phrase à un écran puis à un composant
Google Stitch dessine des interfaces, mais le relier à la main au code du projet prend du temps. Ces skills passent par le serveur MCP de Stitch et se répartissent en trois plugins : stitch-design pour les écrans, stitch-build pour le code et stitch-utilities pour les prompts et systèmes de design. L'agent génère des écrans, importe un front existant et refait des composants.
Claude Code, Codex, Cursor, Gemini CLI, Antigravity, OpenCode
Ce qu’il fait
generate-design crée des écrans à partir de texte ou d'image, modifie l'existant et propose des variantes, par exemple en mode sombre.
code-to-design et extract-static-html importent un front React ou Vue dans un projet Stitch via du HTML statique autonome.
extract-design-md et design-md écrivent le système de design dans DESIGN.md ; manage-design-system l'envoie et l'applique aux écrans.
react-components, react-native et react-vite-dashboard transforment les écrans Stitch en composants aux tokens cohérents, avec validation.
enhance-prompt précise une idée d'interface floue, et stitch-loop construit un site de plusieurs pages à partir d'une seule demande.
Quand s’en servir
Votre application tourne sans maquettes et vous voulez ses écrans dans Stitch pour qu'un designer les retravaille.
Le design est terminé dans Stitch et vous voulez des composants React sans refaire l'intégration à la main.
Vous devez montrer vite à un client plusieurs versions de l'écran d'accueil dans des styles différents.
Demandez à l’agent
Crée dans Stitch un écran de connexion pour une appli de livraison, plus trois variantes en mode sombre
Analyse /src et extrais notre système de design dans .stitch/DESIGN.md
Convertis tous les écrans du projet Stitch projects/123 en composants React
Questions
Comment installer Stitch Design Skills dans Claude Code ?
Avec npx plugins add google-labs-code/stitch-skills --scope project --target claude-code, qui installe les plugins dans le projet courant. Les skills isolés passent par npx skills add.
Les skills Stitch fonctionnent-ils dans Codex et OpenCode ?
Dans Codex, on enregistre le dépôt comme marketplace puis on installe stitch-design, stitch-build et stitch-utilities. Dans OpenCode, on copie les dossiers à la main et on déclare le MCP Stitch dans opencode.json.
Est-ce un produit officiel de Google ?
Non. Le README précise qu'il ne s'agit pas d'un produit officiellement pris en charge par Google et qu'il n'entre pas dans son programme de récompenses pour failles.
