stitch::code-to-designpar Google Labs

Stitch Code to Design Skill.

Un skill Claude Code et Codex pour le design UI : convertit le code frontend en design Stitch via HTML statique et extraction du design system.

Web et UI
Fichier de design

Télécharger OpenDesign Voir le guide d'utilisation

google-labs-code/stitch-skills · plugins/stitch-design/skills/code-to-design/SKILL.mdSKILL.md

--- name: stitch::code-to-design description: - Convert frontend code (Vite, React, Angular, Vue, etc.) to a Stitch Design by chaining static HTML extraction, design system extraction, and file upload. **ALWAYS** use this skill when the user's intent is to move existing web apps or React/Angular/Vue components into Stitch (e.g., requests to "save", "migrate", or "upload"). You must use this skill even for simple "save" operations, as it is the only way to … --- ## Workflow

Front matter et titres de section lus depuis le fichier source le 14/09/2026 · 3 645 caractères au total

01 Ce qu'il fait

Ce que fait le Skill stitch::code-to-design dans Claude Code et Codex

Résumé, workflow et sorties, tous lus dans le SKILL.md du skill.

D'après le SKILL.mdLu le 14-09-2026 · pas une exécution enregistrée

Dans les termes du Skill

Convertit une base de code frontend existante (React + Vite, Next.js, Angular, Vue) en un Stitch Design en enchaînant trois skills : extract-static-html, extract-design-md et upload-to-stitch. Il cible les designers et développeurs qui souhaitent transférer une application en cours d'exécution ou un répertoire web déjà construit vers Stitch afin d'itérer dessus.

Le workflow extrait un fichier HTML autonome, écrit un design system dans .stitch/DESIGN.md, crée le design system dans Stitch, puis charge le HTML comme un écran nommé d'après le chemin de route de la page. C'est le chemin requis pour les demandes de sauvegarde, de migration ou de chargement, et la vérification HTML est optionnelle et ne bloque jamais l'exécution.

Ce qu'il produit

Un fichier HTML autonome, par exemple /path/to/extracted/standalone.html.
Une description de design system écrite sous forme de DESIGN.md.
Un écran chargé sur Stitch dont le nom et le titre identifient la route dont il provient dans l'application.

Voir l'exemple de prompt ↗

Fonctionnement

01
Extraire un fichier HTML autonome
Passe la main au skill extract-static-html, qui travaille à partir du build de sortie ou d'un serveur de développement actif tel que Vite ou Angular CLI ng serve, et produit un fichier HTML autonome unique.
02
Proposer une vérification sans interrompre l'exécution
Après l'extraction, vous indiquez à l'utilisateur où se trouve le fichier afin qu'il puisse le vérifier lui-même dans un navigateur, et l'exécution se poursuit vers l'étape suivante dans tous les cas.
03
Analyser la source pour en extraire un système de design
Le skill extract-design-md lit les composants, feuilles de style et configurations de thème du projet, et son résultat est écrit dans un fichier de système de design.
04
Créer le système de design dans Stitch
Le skill manage-design-system charge DESIGN.md et appelle create_design_system_from_design_md avec les schémas requis.
05
Charger le HTML en tant qu'écran
Le même script de chargement envoie le HTML autonome à l'aide de la clé API Stitch et du projectId, l'argument title étant défini sur la route de la page afin que l'écran soit identifiable dans Stitch.

02 Trouvez celui qui vous convient

Quand utiliser le skill stitch::code-to-design

Utilisez le skill stitch::code-to-design dans Claude Code ou Codex lorsque le travail concerne ce type de design UI. La portée et les limites ci-dessous sont tirées du fichier propre au skill.

Bon choix

Une application existante écrite en React + Vite, Next.js, Angular ou Vue que l'utilisateur souhaite migrer vers Stitch et continuer à faire évoluer là-bas.
Une demande formulée de façon informelle comme enregistrer, migrer ou charger plutôt que comme une tâche de conversion explicite.
Un projet déjà exécuté sur un serveur de développement Vite ou servi via Angular CLI ng serve.
Un espace de travail Angular organisé avec angular.json, des modèles .html externes, des fichiers de thème et des composants, qui alimentent tous l'extraction du système de design.

Connaître les limites

Il n'y a rien d'exécutable à cibler : le workflow nécessite soit un serveur de développement local en cours d'exécution, soit un répertoire d'application web compilé contenant index.html et les assets.

Quoi fournir

Le projectId Stitch cibleLes chargements nécessitent un projet de destination ; s'il est inconnu, recherchez-le d'abord avec list_projects.
Le chemin vers le HTML extraitLe fichier autonome produit à l'étape 1 doit être transmis à l'étape de chargement, avec la clé API et le projectId.
Les fichiers source du projetLes composants, feuilles de style et configurations de thème sont ce que l'analyse du système de design lit pour dériver DESIGN.md.

03 Dans le skill

Règles que le skill stitch::code-to-design donne à Claude Code et Codex

6 instructions concrètes, valeurs par défaut et limites que SKILL.md définit pour l'agent — la partie du fichier qui change le résultat.

Toujours l'utiliser pour une intention d'enregistrer, migrer ou charger
Tout déplacement d'applications web existantes ou de composants React/Angular/Vue vers Stitch doit passer par ce skill, même pour un simple enregistrement, car c'est la seule voie qui extrait aussi le système de design et relie les assets.
Écrire le système de design dans .stitch/DESIGN.md
Le fichier de système de design doit se trouver à .stitch/DESIGN.md et suivre la structure définie par le skill extract-design-md.
Ne jamais bloquer sur la vérification
La vérification du HTML extrait est pilotée par l'utilisateur et optionnelle ; l'agent doit passer directement à l'étape du système de design plutôt que d'attendre.
Tagger le chargement du système de design
Passez l'argument --generated-by 'stitch::code-to-design' lors du chargement de DESIGN.md, afin que l'origine du produit généré soit enregistrée.
Tagger le chargement du HTML différemment
L'upload HTML utilise l'autre marqueur, --generated-by 'stitch::extract-static-html', pas celui du code-to-design.
Réutiliser Une Clé API Pour Les Deux Uploads
La clé API Stitch fournie à l'étape 4 est la même clé requise pour l'upload HTML ; il n'y a pas de second identifiant.

04 Mettez-le en pratique

Installer stitch::code-to-design dans Claude Code ou Codex

Une commande npx skills add, puis une première tâche dans votre agent et une checklist pour le résultat.

Ajouter stitch::code-to-design à Claude Code, Codex ou votre agent

Exécutez-la dans votre projet ; l'installateur demande à quel agent l'ajouter.

Terminal

npx skills add https://github.com/google-labs-code/stitch-skills --skill stitch::code-to-design

Formulaire CLI générique skills pour plugins/stitch-design/skills/code-to-design/SKILL.md ; le dépôt peut documenter son propre chemin.

Donnez au skill une première tâche de design UI

Rédigé dans les termes propres du skill ; remplacez les parties entre crochets par votre contenu.

Starter prompt

Take the frontend in [path to repo] and move it into my Stitch project [projectId]. The Vite dev server is already running at [http://localhost:5173]. Extract the standalone HTML, write the design system to .stitch/DESIGN.md, upload both, and title the screen '/[route]'.

Source : rédigé à partir du SKILL.md, dans les termes propres du skill.

Vérifiez le premier résultat

Ce que le SKILL.md lui-même présente comme un résultat correct :

Ouvrez le fichier extrait dans un navigateur pour confirmer que la page s'affiche comme prévu.
Si l'utilisateur revient avec des problèmes après avoir vérifié l'extraction, corrigez-les avant de poursuivre le workflow.

Dans OpenDesign importez stitch::code-to-design depuis son lien SKILL.md : Plugins → Add → Skill → Import from link, puis sélectionnez-le dans la barre supérieure.

Télécharger OpenDesign Lire le démarrage rapide

05 Open source, traçable

Source, licence et vérification

D'où proviennent les faits de cette page et quand ils ont été vérifiés pour la dernière fois.

Author: Google Labs
Repository: github.com/google-labs-code/stitch-skills Branche main
Fichier du skill: plugins/stitch-design/skills/code-to-design/SKILL.md Somme de contrôle du contenu enregistrée lors de la vérification ; commit 0337446
License: Apache-2.0 D'après LICENSE.
Étoiles du dépôt: 8 304 Instantané GitHub pris le 14/09/2026 pour l'ensemble du dépôt google-labs-code/stitch-skills, qui contient 12 skills dans ce catalogue. Il ne s'agit pas d'une note ou d'un compteur d'utilisation pour stitch::code-to-design.
Vérifié par OpenDesign: 2026-09-14 Le fichier source, le chemin, le texte de licence et le nombre d'étoiles ont été vérifiés. Non intégré dans OpenDesign main (vérifié le 2026-08-28) ; aucune exécution en conditions réelles n'a été enregistrée sur cette page.

Dans le SKILL.md

WorkflowIndique à l'agent de suivre les étapes listées pour convertir le code existant.
PrérequisNécessite un serveur de développement en cours d'exécution ou un répertoire d'application compilée, ainsi qu'un projectId Stitch.
ÉtapesCinq étapes ordonnées, chacune déléguant à une autre skill ou un autre script.

Description du skill lui-même

"- Convertissez du code frontend (Vite, React, Angular, Vue, etc.) en un design Stitch en enchaînant l'extraction HTML statique, l'extraction du design system et le téléversement de fichier. Utilisez **TOUJOURS** ce skill lorsque l'intention de l'utilisateur est de déplacer des applications web existantes ou des composants React/Angular/Vue dans Stitch (par ex., demandes de "sauvegarder", "migrer" ou "téléverser"). Vous devez utiliser ce skill même pour de simples opérations de "sauvegarde", car c'est le seul moyen de garantir que le design system est extrait et que les ressources sont correctement liées."

Description en en-tête du fichier SKILL.md. Le fichier complet fait environ 3 645 caractères. Lire le fichier complet sur GitHub.

06 Avant d'installer

Questions Sur La Skill stitch::code-to-design

Les réponses proviennent du SKILL.md tel que lu le 2026-09-14, et non d'une exécution enregistrée.

Se limite-t-elle à uploader un écran, ou construit-elle aussi le design system ?

Les deux. Le fichier DESIGN.md est uploadé et le design system est créé dans Stitch via le workflow manage-design-system, qui utilise le script d'upload et l'appel create_design_system_from_design_md avec les schémas requis.

Quelle skill extrait réellement le HTML de mon application ?

extract-static-html effectue l'extraction, produisant un seul fichier HTML autonome à partir de la sortie de build ou d'un serveur de développement en cours d'exécution comme celui de Vite.

Stitch Code to Design

Exécuter stitch::code-to-design sur une tâche réelle de conception UI.

Téléchargez OpenDesign, importez stitch::code-to-design depuis son lien SKILL.md, collez le prompt ci-dessus, et lisez le plan avant le résultat.

Télécharger OpenDesign Parcourir tous les skills