Stitch est un outil autonome de Google Labs pour concevoir des interfaces. Sur la toile commune, vous pouvez développer plusieurs écrans, vérifier les transitions et transmettre la conception plus loin à travers le code et les outils du développeur.

Service officiel Google Stitch pour la conception d’interfaces. Capture de la page du produit, pas le résultat de nos tests. Ouvrir la source

De l’idée de produit à des écrans reliés

Stitch est conçu pour les interfaces, pas seulement pour les illustrations artistiques. Le texte, les images, le code existant et les matériaux de conception peuvent être utilisés comme contexte. L'agent aide à créer et à affiner les écrans sur une toile commune. De ce fait, la discussion passe progressivement du désir général de «faire une application» à des états et des actions spécifiques de l'utilisateur.

Canevas, prototype et règles de mise en forme

Les documents officiels actuels décrivent un canevas infini, l’interaction vocale, les précisions apportées en cours de travail et la création de prototypes interactifs. Plusieurs écrans peuvent être reliés et parcourus comme un scénario utilisateur. Toutefois, cliquer sur un bouton dans un prototype ne confirme pas l’existence d’une véritable opération côté serveur.

DESIGN.md permet de conserver une mise en forme cohérente : ce fichier contenant les règles du système visuel peut être transféré entre projets et outils compatibles. Il aide à préserver les choix de couleurs et de composants, sans remplacer la vérification du contraste, des états d’erreur et du contenu réel de chaque écran.

Exemple : l'interface d'un petit catalogue

Formulez la tâche: le visiteur choisit le type de produit, ouvre la carte et conserve les options appropriées. Décrivez trois écrans et énumérez les champs obligatoires. Par exemple, utilisez des noms de démonstration; n'envoyez pas de données clients internes uniquement pour compléter la mise en page.

Après une première version, parcourez le chemin complet. Le filtre sélectionné est-il visible ? Peut-on revenir à la liste sans perdre ses repères ? Comment s'affichent un titre long et une recherche sans résultat ? Ces questions sont plus utiles qu'une simple demande de moderniser le design.

Comparez ensuite les versions mobile et grand écran. Vérifiez que le produit choisi et l’état du filtre sont aussi clairs sur les deux écrans. Transmettez seulement ensuite la maquette validée au développement.

Transmission du code et accès par programmation

Google décrit l’export et les échanges avec AI Studio, Antigravity et d’autres outils de développement. MCP et un SDK sont proposés pour les usages techniques ; le dépôt Google Labs Code permet de récupérer du HTML et des captures d’écran par programmation. Le SDK est expérimental et ne garantit pas une assistance contractuelle du produit.

Ouvrez et vérifiez le code de l’écran dans votre environnement : dépendances, adaptation aux tailles d’écran, accessibilité, contenu et gestionnaires d’événements. Un écran de connexion généré automatiquement n’est pas un système d’authentification prêt à l’emploi, pas plus qu’une belle liste de produits n’est une base de données sécurisée.

Disponibilité et limites de l'expérience

Le travail commence dans le service officiel de Stitch. Les fonctionnalités, les quotas et les modes d'accès peuvent changer, ils sont donc vérifiés dans le compte actuel; les prix exacts et les promesses régionales universelles ne sont pas répertoriés ici. Le statut expérimental est particulièrement important pour le processus dont dépend la sortie du produit client.

Conservez les règles de mise en forme approuvées et les contenus exportés au-delà d'une seule session. Avant la publication, vérifiez séparément le texte, les liens, l'affichage mobile et la sécurité des véritables composants serveur. L'interface préparée est un point de départ pour cette validation, pas un remplacement.

Pour quelles tâches convient-il

Préparer plusieurs écrans d'interface liés
Vérifier les options de parcours utilisateur
Transférer les règles visuelles via DESIGN.md
Obtenir le code des écrans pour poursuivre le développement

Fonctionnalités

Les points forts

Canevas d’interface avec un agent d’IA
Contexte du texte, des images et du code
Prototypes interactifs et DESIGN.md
MCP et SDK expérimental présentés

Il faut prendre en compte

Limites

Les fonctions expérimentales et les quotas peuvent changer
Le prototype ne garantit pas une logique serveur prête à l'emploi
Le code et l’accessibilité nécessitent une vérification distincte

Choix et conditions

Mode gratuit: Non confirmé
Période d'essai: Non confirmé
Sans inscription: Non confirmé
Interface en russe: Non confirmé
Installation locale: Non confirmé
API: Non confirmé

« Non confirmé » signifie que les informations disponibles ne suffisent pas. La fonctionnalité peut exister ; vérifiez les conditions du développeur.

Formats d’entrée: Texte, Image, Code
Résultat: Prototype, Code, Image

Conditions

Service expérimental : les fonctions, les quotas et l'accès se vérifient dans le compte. L'accès par programmation repose sur MCP et un SDK expérimental.

De la tâche au premier résultat

Exemple pratique

Tâche: Préparer plusieurs écrans d'interface liés
Que préparer: Description de trois écrans de prise de rendez-vous dans un atelier : choix du service, choix de l’horaire et confirmation. Vous pouvez joindre votre propre croquis.

Consigne ou requête

Proposez un prototype modifiable de ces écrans avec une navigation claire. Montrez l'état d'une liste de créneaux vide et l'erreur signalée lorsqu'un champ obligatoire est vide. Ne connectez pas encore la réservation réelle ni le paiement.

Résultat attendu

Des ébauches de maquettes ou un prototype d'interface. Une logique serveur fonctionnelle et l'aptitude à un lancement en production ne sont pas présumées.

Comment vérifier le résultat

Vérifiez les transitions, les libellés, les états vides et le retour à l'écran précédent.
Vérifiez que les éléments restent lisibles et tiennent sur un écran étroit.
Vérifiez séparément l’accessibilité, le contenu réel de l’exportation et les droits nécessaires sur les composants.

Cet exemple pédagogique préparé par la rédaction décrit une tâche ; il ne présente pas le résultat d’un test personnel du service. Vérifiez la disponibilité du mode requis, les droits sur les fichiers d’origine et les conditions d’utilisation du résultat.

Vérifier les détails

Sources officielles

La description est faite à partir des matériaux du développeur. Les fonctionnalités, les prix et la disponibilité peuvent varier; vérifiez la source avant de l'utiliser.

Google Stitch.