Code vers Design (Conversion en Design Stitch)

Code vers Design

Transformez votre code frontend existant (React + Vite, Next.js, Angular, Vue, etc.) en un Design Stitch afin de pouvoir l'itérer et l'améliorer en utilisant Stitch.

Cette compétence orchestre trois autres compétences en séquence :

1. extract-static-html : Extrait un fichier HTML autonome à partir du répertoire de build ou du serveur de développement en cours (par exemple, serveur de développement Vite ou ng serve d'Angular CLI).
2. extract-design-md : Analyse le code source (y compris angular.json d'Angular, les modèles .html externes, les fichiers de thème et les composants) pour créer un système de design (DESIGN.md).
3. upload-to-stitch : Télécharge ce fichier HTML et le système de design vers votre projet Stitch.

Workflow

Suivez ces étapes pour convertir votre code existant.

Prérequis

• Un serveur de développement local en cours d'exécution (par ex. npm run dev, ng serve) OU un répertoire d'application web construite contenant index.html et ses ressources.
• Un projectId Stitch cible (utilisez list_projects si inconnu).

Étapes

1. Extraire le HTML autonome

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

Résultat attendu : Un seul fichier comme /path/to/extracted/standalone.html.

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

Après l'extraction, informez l'utilisateur du chemin du fichier de sortie afin qu'il puisse le 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 compétence extract-design-md pour analyser les fichiers sources du projet (composants, feuilles de style, configurations de thème) et produire un système de design. Lisez skills/extract-design-md/SKILL.md pour le workflow d'analyse complet.

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

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

Déléguez à la compétence manage-design-system pour télécharger le DESIGN.md et créer le système de design dans Stitch. Lisez skills/manage-design-system/SKILL.md pour le workflow complet (utilisation du script de téléchargement, appel create_design_system_from_design_md, et schémas requis). Passez --generated-by 'stitch::code-to-design' lors du téléchargement.

5. Télécharger le HTML vers Stitch

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

Vous aurez besoin :

• Du chemin vers le fichier HTML autonome généré à l'Étape 1.
• De votre clé API Stitch (même clé utilisée à l'Étape 4).
• Du projectId cible.
• De l'argument --generated-by défini sur 'stitch::extract-static-html'.
• De l'argument --title défini sur le chemin de route de la page (par exemple, '/dashboard', '/settings/profile', '/inbox') afin que le nom/titre de l'écran dans Stitch identifie clairement sa route dans l'application.