Google Stitch + Claude Code : concevoir des sites Web sans l’« apparence IA »

Des instructions supplémentaires pour travailler avec Ailoot figurent dans la documentation.

Pourquoi les sites créés avec Claude Code ont-ils l’air d’être du « AI slop » ?#

Dans le cas pratique décrit ici, le travail sur la page d’accueil d’une application d’appel a commencé par un projet vide et une demande à Claude Code de créer une landing page. Le résultat était le grand classique : slate-950 pour l’arrière-plan, indigo-500 pour l’accent, Inter en gras dans le titre, puis trois cartes identiques avec des ombres. La même mise en page que la première génération de v0, de Lovable ou de ChatGPT. J’ai réécrit le prompt cinq fois et ajouté « premium », « pas comme les autres », « moderne » ; la page ressemblait toujours à un thème WordPress de 2015.

Le dégradé violet n’est pas une coïncidence.

La logique est simple : sans contraintes, le modèle prend la moyenne statistique de ce qu’il a vu. Et il a vu un million de landing pages identiques créées avec Bootstrap et Tailwind. Pour obtenir un résultat qui ne soit pas quelconque, il faut donner des indications précises à l’agent : les couleurs, les polices, les espacements et les composants à considérer comme canoniques. Pour un modèle, le mot « beau » signifie « la médiane de 2020 ». Les adjectifs ne changeront rien ; il faut des paramètres exacts.

J’ai étudié ce même écart dans un guide sur les systèmes de design prêts à l’emploi avec Refero : on y reprend le style de quelqu’un d’autre (Apple, Linear, Stripe) pour le transmettre à l’agent. Google Stitch aborde le sujet par l’autre côté : au lieu d’emprunter le style de quelqu’un d’autre, on crée le sien à partir de sa propre description.

Qu’est-ce que Google Stitch et en quoi est-il utile ?#

Stitch est une expérimentation de Google Labs, présentée lors de Google I/O en mai 2025. Dans le champ de prompt, on décrit l’apparence souhaitée pour l’application (ou l’on téléverse une capture d’écran, une esquisse de tableau blanc ou la page d’un concurrent), et Stitch génère des écrans d’interface sur un canevas infini. En coulisses, il utilise Gemini 2.5 Pro et Flash ; Gemini 3 a été ajouté en décembre 2025 pour produire des mises en page plus abouties.

Voici ce qui nous est utile :

• Vibe Design — Décrivez l’ambiance avec des mots (« minimaliste et haut de gamme, comme Stripe ») et obtenez plusieurs directions visuelles parmi lesquelles choisir.
• Références — Téléversez une image depuis Dribbble ou Pinterest ; Stitch en conserve la mise en page et applique vos exigences.
• Exportation en trois formats : vers Figma avec des calques modifiables, en HTML/CSS propre et via MCP, directement dans l’agent.

La différence avec les styles prêts à l’emploi comme ceux de Refero est importante. Refero est une bibliothèque de systèmes de design déjà extraits de vrais sites Web ; on reprend une marque existante. Stitch génère un système pour son produit à partir de zéro. Vous n’avez pas de design de référence et vous voulez votre propre apparence ? C’est Stitch. Vous voulez appliquer rapidement le style d’un produit connu ? C’est Refero. Ils interviennent à des étapes différentes et se complètent bien.

Claude dispose aussi de son propre mode de conception intégré ; je l’ai présenté dans un guide sur Claude Design. Stitch est différent parce qu’il fournit un système prêt à l’emploi dans un fichier externe que l’agent lit chaque fois qu’il construit quelque chose.

Conditions d’accès à Google Stitch#

Stitch n’est pas disponible dans tous les pays : un représentant de Google a écrit sur le forum officiel que le service est disponible pour les personnes âgées de 18 ans et plus dans 212 pays, et que la liste s’allonge. Dans les régions soumises à des restrictions, un seul message s’affiche lors de la visite : « Sorry, Stitch is unavailable. »

Il faut un compte Google ; c’est le seul moyen de se connecter.

Quand l’autorisation MCP Stitch bloque le parcours Claude Code#

Il y a beaucoup d’informations erronées en ligne sur la connexion de MCP, et la moitié des instructions ne fonctionnent tout simplement pas. Par exemple, de nombreux guides, y compris des guides anglophones populaires, recommandent d’installer le paquet @google/stitch-mcp avec la commande npx -y @google/stitch-mcp@latest. Ce paquet n’existe pas : npm renvoie 404. Ne copiez pas cette commande ; vous perdrez votre temps. Pour la même raison, choisissez des intégrations dont l’installation et la vérification sur une tâche réelle ont été confirmées.

La tentative MCP distante décrite a atteint Incompatible auth server dans Claude Code. Cette erreur observée ne constitue ni recette fonctionnelle ni preuve que toutes les configurations actuelles échouent. Ne poursuivez pas une vague étape « connecter MCP » : utilisez l’export HTML/CSS ci-dessous jusqu’à vérification d’une configuration compatible exacte.

Les étapes de clé et de proxy de ce brouillon n’établissent pas une connexion compatible vérifiée. Définir STITCH_API_KEY ou afficher claude mcp list ne suffit pas à prouver le parcours de design. Le chemin manuel ci-dessous se base sur les fichiers exportés sans clé Stitch ni authentification MCP.

Le workflow Stitch et DESIGN.md est du context engineering à l’état pur : on place à l’avance des jetons exacts dans le contexte de Claude, et il s’y conforme strictement, sans « deviner ce que je voulais dire ». La méthodologie complète réunit les trois piliers : le clone IA, le Second Brain et le Context Engineering. C’est cette combinaison qui fait de Claude un outil produisant des résultats prévisibles plutôt qu’un « assistant qui devine ».

Qu’est-ce que DESIGN.md et pourquoi est-ce mieux qu’une capture d’écran ?#

Voici un détail essentiel que la plupart des instructions présentent mal : il n’y a pas de bouton « Export DESIGN.md » dans Stitch. C’est l’agent qui assemble le fichier. D’après le codelab officiel de Google, le prompt ressemble à peu près à ceci : « passe par Stitch MCP pour accéder au projet, extrais la palette et la typographie, puis assemble un DESIGN.md à partir de ces éléments ». Ce codelab suppose MCP fonctionnel. Dans le chemin manuel, Claude Code lit l’export HTML/CSS local et écrit le fichier structuré à la racine ; il doit signaler les tokens manquants plutôt que les deviner depuis une image.

DESIGN.md contient des éléments précis au lieu d’adjectifs :

# DESIGN.md
## Colors
- Primary:   #0F172A
- Accent:    #F97316
- Success / Error / Warning: ...
- Background / surfaces: ...
## Typography
- Font (body): "Instrument Sans"; (headings): "Instrument Serif"
- Scale: H1 48/1.1, H2 36/1.15, Body 16/1.6, Caption 13/1.4
- Weights: 400 / 500 / 700
## Spacing (base 8px)
- xs 4, sm 8, md 16, lg 24, xl 40, 2xl 64
## Layout
- Container max-width: 1200px; breakpoints: 640 / 768 / 1024 / 1280
## Components
- Button: radius 10px; variants primary / secondary / ghost; states hover / active / disabled
- Card: radius 16px; shadow 0 4px 24px rgba(0,0,0,.08)

Pour que Claude Code l’utilise, faites référence au fichier dans CLAUDE.md, par exemple avec la ligne « Utilise le design de tous les composants défini dans DESIGN.md » ; l’agent reprend alors les mêmes jetons à chaque session. Un bouton créé lundi et une carte créée vendredi ont le même style, car il n’y a qu’une seule source de vérité.

Deux références locales se complètent : DESIGN.md contient couleurs, typographie, espacements et composants ; HTML/CSS et ressources exportés donnent la mise en page précise. MCP est optionnel, sans être un préalable à ce chemin.

Comment créer un site Web : le parcours complet, du texte au design#

Voici le processus complet, dans l’ordre :

1. Ouvrir Stitch. Vérifiez disponibilité et connectez votre compte Google à stitch.withgoogle.com.
2. Décrire le produit. Précisez écrans et parcours puis confirmez ou corrigez la liste proposée.
3. Ajouter une référence. Importez la capture voulue et précisez couleurs, typographie et disposition à conserver.
4. Générer et affiner. Choisissez un écran et améliorez-le avant d’élargir le design.
5. Exporter cet écran en HTML/CSS. Gardez fichiers et ressources dans un dossier de référence du projet. Ouvrez le HTML local pour vérifier la sélection ; une capture seule ne contient pas les valeurs CSS exactes.
6. Assembler DESIGN.md depuis l’export. Demandez les vraies valeurs de couleurs, polices, espacements, disposition et composants et la liste des manques à décider. Ni clé API Stitch ni authentification MCP ne sont nécessaires ici.
7. Construire et vérifier une page. Utilisez ces prompts en remplaçant le dossier par le vrai chemin :

Lis l’export HTML/CSS Stitch dans refs/stitch-export/. Crée DESIGN.md à la racine
avec les valeurs présentes dans ces fichiers. Signale les valeurs manquantes sans les inventer.

Construis une page depuis DESIGN.md et l’export Stitch local, avec des composants modulaires.
Compare le rendu à l’export aux largeurs ordinateur et mobile ; vérifie séparément
navigation et états interactifs.

Ensuite, tout se passe dans Claude Code : navigation entre les écrans, adaptation aux tailles d’écran définies par les points de rupture de DESIGN.md, animations et interactivité. Stitch fournit des écrans statiques et un prototype cliquable, mais ne crée pas de logique fonctionnelle et ne publie pas le site sur un hébergement ; c’est le rôle de l’agent.

Comment supprimer l’« apparence IA » : que faut-il changer précisément ?#

Voici les points précis où un site cesse de se trahir :

• Couleur. Le violet indigo-500 est le premier signe révélateur. Définissez les couleurs principales et d’accent avec des valeurs hexadécimales exactes directement dans DESIGN.md. Chaque agent interprétera « bleu de marque » à sa façon.
• Police. Inter est le choix le plus sûr et donc la « police IA » la plus reconnaissable. Choisissez une association expressive : par exemple, une police sans empattement pour le corps du texte et une police plus caractérisée pour les titres. Définissez-la dans le design de Stitch et consignez-la dans DESIGN.md.
• Une référence plutôt qu’un adjectif. Le modèle interprète « rends-le moderne » comme « la médiane de 2020 ». Il comprend littéralement « utilise la mise en page de cette page » lorsqu’on lui fournit une vraie capture d’écran. Téléversez une image de référence dans Stitch ; le goût ne se transmet pas avec des mots.
• Espacement et respiration. On reconnaît une mise en page standard à ses blocs serrés et identiques. Définissez une échelle d’espacement généreuse dans DESIGN.md ; l’agent disposera ainsi les éléments plus librement.

La précision l’emporte sur les adjectifs subjectifs. Stitch est essentiellement une machine qui traduit votre « je veux quelque chose comme ça » en jetons précis, sans rien laisser à deviner à l’agent.

Google Stitch ou ses alternatives : lequel choisir ?#

J’ai comparé ces outils selon les critères qui comptent vraiment quand on fait du vibe coding avec un budget limité :

Mon propre workflow : Stitch pour explorer le design → Claude Code pour la création et la logique. Pour le vibe coding avec un budget limité, Stitch l’emporte parce qu’il est gratuit et crée une apparence unique pour votre produit à partir de zéro. Si vous souhaitez connaître l’ensemble des outils disponibles sur le marché, je les ai présentés dans l’article de référence avec quoi coder en 2026.

Quelles sont les limites de Google Stitch ?#

Voici une liste honnête pour vous éviter une déception dès le troisième écran :

• Interface uniquement. Pas de backend, de base de données ni de publication sur un hébergement. Pour cela, il faut Claude Code (ou Lovable si vous voulez tout au même endroit).
• Édition limitée dans l’outil. Il est impossible de déplacer un élément individuellement avec la souris ; on ne peut que le modifier avec un prompt et le régénérer. Ce n’est pas Figma.
• Non-déterminisme. Un même prompt produit des résultats différents. C’est utile pour explorer des idées, mais peu pratique lorsqu’on a besoin de résultats reproductibles.
• Quota. Vous atteindrez la limite de générations gratuites (actuellement quotidienne) ; vous ne pouvez pas en acheter davantage, vous devez donc attendre la réinitialisation du quota. Le nombre exact varie, vérifiez l’interface.
• Statut expérimental. Google Labs ne garantit pas un support à long terme. Le service peut changer ou fermer.
• Restrictions géographiques et problème d’autorisation MCP dans Claude Code, évoqués dans les sections sur la disponibilité et la configuration.

Stitch ne convient pas si vous avez un guide de marque strict pour de nombreux projets, si le design existe déjà dans Figma ou si vous avez besoin d’une application avec backend déjà publiée.

Et maintenant ?#

Construisez le workflow le plus réduit possible avec un seul écran : décrivez le produit dans Stitch, générez la page d’accueil, exportez son HTML/CSS puis demandez à Claude Code de créer DESIGN.md et la page depuis ces fichiers locaux. Quand vous verrez le dégradé violet disparaître de lui-même, la suite sera plus facile.

Concevoir avec Stitch est une technique de context engineering. Le système complet combine un clone IA, le Second Brain et le context engineering pour que Claude puisse s’appuyer sur des règles et un contexte préparés.

Le clone IA, le Second Brain et le context engineering comptent pour le produit. Concevoir avec Stitch est la première brique de cette combinaison.

Pour continuer à travailler avec des modèles, vous pouvez aller sur Ailoot.