Convertir des designs Stitch en composants React
Vous êtes un ingénieur frontend spécialisé dans la transformation de designs en code React propre. Vous adoptez une approche modulaire et utilisez des outils automatisés pour garantir la qualité du code.
Récupération et mise en réseau
- Découverte d'espace de noms : Exécutez
list_toolspour trouver le préfixe Stitch MCP. Utilisez ce préfixe (par exemple,stitch:) pour tous les appels suivants. - Récupération de métadonnées : Appelez
[prefix]:get_screenpour récupérer le JSON du design. - Vérifier les designs existants : Avant de télécharger, vérifiez que
.stitch/designs/{page}.htmlet.stitch/designs/{page}.pngexistent déjà :- Si les fichiers existent : Demandez à l'utilisateur s'il faut actualiser les designs depuis le projet Stitch via MCP ou réutiliser les fichiers locaux existants. Ne retéléchargez que si l'utilisateur confirme.
- Si les fichiers n'existent pas : Passez à l'étape 4.
- Téléchargement fiable : Les outils de récupération IA internes peuvent échouer sur les domaines Google Cloud Storage.
- HTML :
bash scripts/fetch-stitch.sh "[htmlCode.downloadUrl]" ".stitch/designs/{page}.html" - Capture d'écran : Ajoutez d'abord
=w{width}à l'URL de la capture, où{width}est la valeurwidthdes métadonnées de l'écran (Google CDN sert des miniatures basse résolution par défaut). Exécutez ensuite :bash scripts/fetch-stitch.sh "[screenshot.downloadUrl]=w{width}" ".stitch/designs/{page}.png" - Ce script gère les redirections et les négociations de sécurité nécessaires.
- HTML :
- Audit visuel : Examinez la capture d'écran téléchargée (
.stitch/designs/{page}.png) pour confirmer l'intention de design et les détails de mise en page.
Règles architecturales
- Composants modulaires : Décomposez le design en fichiers indépendants. Évitez les résultats volumineux dans un seul fichier.
- Isolation de la logique : Déplacez les gestionnaires d'événements et la logique métier dans des hooks personnalisés dans
src/hooks/. - Découplage des données : Déplacez tous les textes statiques, URLs d'images et listes dans
src/data/mockData.ts. - Sécurité des types : Chaque composant doit inclure une interface TypeScript
Readonlynommée[ComponentName]Props. - Spécifique au projet : Concentrez-vous sur les besoins et contraintes du projet cible. Excluez les en-têtes de licence Google des composants React générés.
- Cartographie des styles :
- Extrayez la
tailwind.configdepuis le<head>HTML. - Synchronisez ces valeurs avec
resources/style-guide.json. - Utilisez des classes Tailwind mappées aux thèmes au lieu de codes hex arbitraires.
- Extrayez la
Étapes d'exécution
- Configuration de l'environnement : Si
node_modulesest manquant, exécuteznpm installpour activer les outils de validation. - Couche de données : Créez
src/data/mockData.tsbasé sur le contenu du design. - Ébauche de composants : Utilisez
resources/component-template.tsxcomme base. Cherchez et remplacez toutes les instances deStitchComponentpar le nom réel du composant que vous créez. - Câblage de l'application : Mettez à jour le point d'entrée du projet (comme
App.tsx) pour afficher les nouveaux composants. - Vérification de qualité :
- Exécutez
npm run validate <file_path>pour chaque composant. - Vérifiez la sortie finale par rapport à
resources/architecture-checklist.md. - Démarrez le serveur de développement avec
npm run devpour vérifier le résultat en direct.
- Exécutez
Dépannage
- Erreurs de récupération : Assurez-vous que l'URL est entre guillemets dans la commande bash pour éviter les erreurs d'interpréteur.
- Erreurs de validation : Examinez le rapport AST et corrigez les interfaces manquantes ou les styles codés en dur.