Google Stitch + Claude Code : le guide complet et les prompts

Le guide complet pour générer tes écrans avec Google Stitch et les brancher sur Claude Code en MCP, avec les prompts prêts à copier.

Ce que tu obtiens

Des interfaces générées par Google Stitch (tous les écrans + le design system) directement accessibles depuis Claude Code, via MCP. Gratuit.

Étape 1 : générer le design

1. Va sur https://stitch.withgoogle.com
2. Choisis le mode Mobile ou Web
3. Décris ton appli en langage normal
4. Ajoute 2 ou 3 images de référence (Pinterest : https://www.pinterest.com, Dribbble : https://dribbble.com)
5. Laisse tourner quelques minutes

Le prompt montré dans la vidéo

Une app mobile de suivi d'habitudes minimaliste : fond crème, accents rouges, séries de jours et statistiques.

Le gabarit de prompt à réutiliser

Une app [mobile / web] de [sujet], style [minimaliste / éditorial / ludique] : fond [couleur], accents [couleur], [élément clé 1], [élément clé 2] et [élément clé 3].
Écrans à produire : accueil, détail, statistiques, profil, réglages.

Génère le design system complet : palette de couleurs avec codes hex, typographie (famille + graisses), composants (boutons, cartes, champs), rayons d'arrondis.

Étape 2 : connecter Claude Code

Dans Stitch, ouvre ton projet, clique sur Exporter, puis Exporter via MCP.

Dans « Choisis ton IA », sélectionne Claude Code (Cursor, Gemini CLI et VS Code sont aussi proposés).

Stitch te donne une commande avec ta clé d'API déjà dedans. Tu la copies et tu la colles dans ton terminal, à la racine de ton projet.

La commande a cette forme :

claude mcp add stitch --transport http https://stitch.googleapis.com/mcp --header "X-Goog-Api-Key: YOUR-API-KEY" -s user

Remplace YOUR-API-KEY par la clé que Stitch affiche (elle commence par AQ.). Le -s user installe le serveur au niveau de ton compte, donc dispo dans tous tes projets.

Réponse attendue :

Added HTTP MCP server stitch to user config

Étape 3 : vérifier

Lance claude, puis demande-lui :

Liste les projets Stitch auxquels tu as accès, puis résume mon design system : couleurs, typographie, composants.

Il doit te répondre qu'il est connecté et te citer tes écrans.

Étape 4 : faire coder Claude

Récupère l'écran d'accueil depuis Stitch et implémente-le fidèlement : respecte les couleurs hex, la typographie, les espacements et les arrondis du design system. Crée les composants réutilisables.

Fais la même chose pour les autres écrans, en réutilisant les composants déjà créés.

Récap

Une question ? Réponds directement à ce message.