Google Stitch : du redesign d’une landing page au site fonctionnel

Le point de départ : une landing page qui ne me satisfaisait pas

Je travaillais depuis plusieurs semaines sur des pages destinées à présenter de nouveaux services. La première version commençait à prendre forme, mais la hiérarchie, le formulaire et plusieurs choix visuels pouvaient encore être améliorés. C’est précisément le type de situation où Stitch devient intéressant : partir d’un travail réel, et non d’un écran vide.

J’ai fourni une capture de la page avec une demande très simple : « Voici une landing page. J’aimerais avoir votre avis. » J’ai ensuite choisi le mode redesign. Stitch a étudié l’interface, formulé ses remarques et proposé une nouvelle direction.

Ce que Stitch apporte avant même de produire du code

La première proposition est une maquette visuelle. Elle sert à vérifier la direction générale avant d’aller plus loin. Une fois le projet ouvert dans l’espace de travail, les textes, les couleurs et les éléments de l’interface deviennent modifiables.

• un brief qui décrit le projet et ses objectifs ;
• un système visuel avec les couleurs, les polices et les composants ;
• un fichier DESIGN.md lisible par une personne comme par un agent ;
• des exports vers Figma, du code ou des outils connectés par MCP.

Du redesign au site fonctionnel en une vingtaine de minutes

J’ai transmis le brief et le fichier DESIGN.md à Claude Code dans le dossier de mon projet. Je lui ai demandé une version en PHP avec un formulaire simplifié, une protection antispam et une petite base de données pour enregistrer les demandes.

En une vingtaine de minutes, je suis passé d’une maquette qui ne me satisfaisait pas à une version plus claire, responsive et fonctionnelle. Le résultat comprenait le PHP, le CSS, le JavaScript, le formulaire et son système antispam. Les premiers contrôles de performance, d’accessibilité, de bonnes pratiques et de SEO étaient déjà solides, même s’il restait quelques ajustements avant la mise en ligne.

Stitch a continué d’évoluer

La vidéo a été publiée le 22 mars 2026, quatre jours après la présentation officielle de la nouvelle version de Stitch par Google Labs. Google décrit désormais Stitch comme un canevas de conception piloté par l’IA, capable de travailler à partir de texte, d’images ou de code.

• un canevas de travail pour explorer plusieurs directions ;
• un agent de design capable de suivre le contexte du projet ;
• des échanges vocaux pour demander des critiques et des variantes ;
• des prototypes interactifs qui relient plusieurs écrans ;
• un fichier DESIGN.md pour conserver les règles visuelles ;
• un serveur MCP et un SDK pour transmettre le projet à des agents de développement.

Ce que je retiens de ce test

Stitch ne remplace pas automatiquement un web designer ou un développeur. Il réduit surtout le temps passé à traduire une intention en maquette, puis une maquette en contexte exploitable par un agent de développement. Le jugement humain reste nécessaire pour choisir la bonne direction, vérifier l’accessibilité, tester le formulaire, contrôler le code et décider si le résultat répond réellement au besoin.

Le gain le plus intéressant vient de la continuité entre le design et le développement. Au lieu de décrire plusieurs fois les mêmes couleurs, composants et intentions, on transmet un brief et un fichier DESIGN.md que l’agent peut lire directement.

Les vérifications à faire avant de publier

• tester chaque lien, formulaire et message d’erreur ;
• contrôler le rendu sur mobile, tablette et ordinateur ;
• mesurer les performances avec les outils du navigateur ;
• vérifier les contrastes, la navigation au clavier et les textes alternatifs ;
• relire le code et supprimer ce qui n’est pas utile ;
• conserver une sauvegarde avant la mise en ligne.

Sources et ressources