stitch::code-to-design

Par google-labs-code · stitch-skills

Convertit du code frontend (Vite, React, etc.) en un design Stitch en enchaînant l'extraction HTML statique, l'extraction du design system et l'upload de fichiers. **TOUJOURS** utiliser cette skill lorsque l'intention de l'utilisateur est de déplacer des applications web ou des composants React existants vers Stitch (ex. : requêtes pour « sauvegarder », « migrer » ou « uploader »). Cette skill doit être utilisée 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 assets sont correctement liés.

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

Code to Design

Transformez votre code frontend existant en Stitch Design pour pouvoir l'itérer et l'améliorer en utilisant Stitch.

Cette skill orchestre trois autres skills en séquence :

  1. extract-static-html : Extrait un seul fichier HTML autonome de votre sortie de build.
  2. extract-design-md : Analyse le code source pour créer un système de design (DESIGN.md).
  3. upload-to-stitch : Charge ce fichier HTML et le système de design dans votre projet Stitch.

Workflow

Suivez ces étapes pour convertir votre code existant.

Prérequis

  • Un répertoire d'application web construit contenant index.html et des ressources.
  • projectId Stitch cible (utilisez list_projects si inconnu).

Étapes

1. Extraire le HTML autonome

Déléguez à la skill extract-static-html pour générer un fichier HTML autonome. Consultez skills/extract-static-html/SKILL.md pour les instructions détaillées et l'utilisation du script.

Sortie attendue : Un seul fichier comme /path/to/extracted/standalone.html.

2. Vérifier le HTML (Optionnel — Piloté par l'utilisateur)

Après extraction, informez l'utilisateur du chemin du fichier de sortie afin qu'il puisse vérifier manuellement dans un navigateur s'il le souhaite. Ne bloquez pas sur la vérification — passez directement à l'étape 3.

Si l'utilisateur signale des problèmes après examen, corrigez-les avant de continuer.

3. Extraire le système de design (Fichier)

Déléguez à la skill extract-design-md pour analyser les fichiers source du projet (composants, feuilles de style, configurations de thème) et produire un système de design. Consultez skills/extract-design-md/SKILL.md pour le workflow d'analyse complet.

Écrivez .stitch/DESIGN.md en suivant la structure de sortie de la skill extract-design-md.

4. Charger DESIGN.md et créer le système de design dans Stitch

Déléguez à la skill manage-design-system pour charger le DESIGN.md et créer le système de design dans Stitch. Consultez skills/manage-design-system/SKILL.md pour le workflow complet (utilisation du script de chargement, appel create_design_system_from_design_md et schémas requis).

5. Charger le HTML dans Stitch

Utilisez le script de la même skill upload-to-stitch pour charger le fichier HTML extrait. Consultez skills/upload-to-stitch/SKILL.md pour les instructions détaillées et l'utilisation du script.

Vous aurez besoin de :

  • Le chemin du fichier HTML autonome généré à l'étape 1.
  • Votre API Key Stitch (même clé utilisée à l'étape 4).
  • Le projectId cible.

Skills similaires

shopify-hydrogen
shopify / shopify-ai-toolkit

Implémenter des fonctionnalités Hydrogen Shopify via des recettes de cookbook prêtes à l'emploi.

367
shopify-hydrogen
shopify / agent-skills

Implémenter des fonctionnalités Hydrogen Shopify via des recettes de cookbook prêtes à l'emploi.

39
figma-generate-design
figma / mcp-server-guide

Créer ou mettre à jour des écrans Figma en réutilisant les composants du design system.

1 549
design-lab
elophanto / elophanto

Explorer visuellement des options de design via interview, variations et feedback itératif.

82
figma-use
figma / mcp-server-guide

Exécuter du JavaScript dans Figma via l'API Plugin pour manipuler des fichiers.

1 549