Comment apprendre à un agent IA à créer des sites web et à écrire des composants React

Je me suis récemment surpris à penser : nous nous sommes habitués aux réseaux de neurones qui écrivent du code, mais le processus ressemble toujours à s'échanger des blocs de texte dans un chat. Vous copiez un prompt, obtenez un mur de code, le collez dans votre projet, réalisez que vous avez oublié des imports ou que les styles ont cassé... Routine familière ?

Il semble que les équipes de Google Labs se soient lassées de la même chose et aient lancé stitch-skills. Ce n'est pas un autre « tueur de programmeurs », mais plutôt un ensemble de compétences concrètes pour les agents IA qui fonctionnent via le protocole MCP (Model Context Protocol). Pour simplifier : ce sont des instructions et des outils qui permettent à votre Claude, Cursor ou Gemini non seulement de générer du texte, mais aussi de manipuler consciemment la structure du projet, de suivre les systèmes de design et même d'assembler des sites web complets à partir d'une seule phrase.

Qu'est-ce que c'est exactement

Le projet est une bibliothèque de compétences adaptées au travail avec Stitch — un serveur de conception visuelle et de génération d'interfaces. La principale caractéristique ici est la standardisation. Chaque compétence dans le dépôt est packagée selon un modèle unifié : il y a un manifeste pour l'agent (SKILL.md), des scripts de validation et des exemples de « référence ».

C'est nécessaire pour que l'agent n'ait pas à deviner quoi faire, mais suive un algorithme clair. Par exemple, si vous demandez de transformer un croquis en composants React, l'agent utilise la compétence react-components, qui connaît les règles du jeu : comment vérifier la syntaxe et ne pas perdre les design tokens.

À quoi ça sert concrètement

Le dépôt contient actuellement une douzaine de compétences prêtes à l'emploi. J'ai mis en évidence celles qui font réellement gagner du temps, plutôt que de simplement paraître impressionnantes dans les démos.

Génération de sites complets via stitch-loop

Au lieu de demander « construis-moi une landing page » et d'obtenir un seul fichier index.html, cette compétence fait en sorte que l'agent déploie une structure complète. Il crée les pages nécessaires de lui-même, organise les fichiers et vérifie que tout s'ouvre réellement. En substance, c'est l'automatisation de la construction de prototypes.

Affiner les idées avec enhance-prompt

Souvent, un réseau de neurones donne un mauvais résultat parce que le prompt était quelque chose comme « rends-le beau ». La compétence enhance-prompt prend vos idées fragmentées et les transforme en spec avec des termes UI/UX et du contexte de système de design. C'est comme avoir un lead expérimenté qui relit la tâche avant de l'envoyer à un développeur.

Documentation via design-md

Ma partie « favorite » du travail — décrire pourquoi le bouton est exactement de cette couleur et comment l'espacement fonctionne. La compétence design-md analyse le projet et génère elle-même le fichier DESIGN.md. Ce n'est pas juste une liste de styles, mais une description du système de design en langage humain qui aide ensuite le même agent IA à générer de nouveaux écrans plus précisément.

Conversion vers React et shadcn/ui

Pour ceux qui ont déjà joué avec des prototypes et veulent passer cela en production, il y a les compétences react-components et shadcn-ui. Elles font en sorte que lors du transfert du design vers le code, la logique des composants ne soit pas perdue et que les bonnes bibliothèques soient utilisées.

Comment ça fonctionne en interne

Si vous regardez à l'intérieur de n'importe quel dossier de compétence, vous verrez une structure stricte. Les équipes de Google Labs sont clairement des partisans de la prévisibilité :

• SKILL.md : essentiellement un prompt système qui explique la tâche de l'agent.
• scripts/ : fichiers exécutables pour valider le résultat. Si l'agent a mal fait le code, le script le lui dira.
• examples/ : exemples de référence. Le modèle apprend d'eux (apprentissage few-shot) pour comprendre quel résultat est attendu.

L'installation des compétences est rendue aussi simple que possible via CLI :

npx skills add google-labs-code/stitch-skills --skill react:components --global

La commande elle-même trouvera les outils que vous avez installés (comme Cursor ou Claude Code) et leur ajoutera de nouvelles capacités.

Est-ce que ça vaut le coup d'essayer

Le projet est spécifique. Si vous écrivez du code à l'ancienne en Vim sans assistance IA, cela ne vous sera probablement pas utile. Mais si vous avez déjà déplacé une partie de votre routine vers Cursor ou utilisez des serveurs MCP, alors stitch-skills est un excellent exemple de comment vous pouvez structurer le travail avec les réseaux de neurones.

Cela plaira particulièrement aux développeurs frontend et à ceux qui construisent rapidement des MVPs. La capacité de transformer un croquis abstrait en projet structuré avec documentation et composants React en quelques minutes est quelque chose auquel nous finirons par arriver de toute façon.

Points négatifs : la documentation est parfois un peu clairsemée, et le projet n'est pas officiellement supporté par Google comme produit commercial (c'est une expérience de Google Labs). Mais comme base pour créer vos propres compétences ou pour accélérer votre travail de mise en page actuel, c'est une option très digne d'intérêt.

Vous pouvez consulter toutes les compétences disponibles et lire la spécification dans le dépôt du projet.