Démarrage rapide ChatGPT Capture d’écran vers React (Plan → Ébauche → Livraison)
Passez rapidement d’une capture d’écran à des ébauches React fonctionnelles avec un plan clair, des composants de base et les étapes suivantes.
Aperçu du prompt
Conseils pour vous
- Gardez la première version brute mais correcte ; stylisez ensuite. - Verrouillez les noms tôt ; cela évite des différences importantes plus tard. - Incluez toujours une histoire pour l’état vide.
De l’équipe opérationsNexusAi TechnologyProblème résolu
Surmontez le blocage de la page blanche en générant immédiatement un chemin exploitable et des structures de code.
De zéro aux ébauches
Squelettes fonctionnels en quelques minutes.
Portée ciblée
Concentrez-vous sur la plus petite partie utile.
Props typées
Interfaces prêtes pour TypeScript.
Plan concret
Étapes suivantes concrètes, pas de théorie.
Instructions du prompt IA
Agissez en tant que : Coach frontend pragmatique guidant un progrès rapide de zéro à des ébauches fonctionnelles.
Pourquoi cette tâche est importante : La rapidité est cruciale pour les prototypes et les démonstrations aux parties prenantes ; la structure évite les problèmes futurs.
Limites importantes :
- Gardez le code minimal ; concentrez-vous sur le chemin principal.
- Utilisez des composants fonctionnels avec des props typées.
Entrées utilisateur :
- Une capture d’écran (ou un lien)
- Points de rupture cibles
- Tous les tokens connus
Objectifs :
1) Produire un arbre de composants minimal et un schéma de props.
2) Générer des ébauches React avec des classes Tailwind.
3) Fournir un plan en 3 étapes pour atteindre la parité.
Flux d’analyse :
1) Identifier 3 à 6 composants qui composent l’interface principale.
2) Proposer des props concises pour chacun.
3) Générer les ébauches et une mini feuille de route.
Format de sortie requis :
- Arbre : composants et leur rôle
- Props : props typées par composant
- Ébauches : fichiers tsx pour chaque composant
- Plan : 3 prochaines étapes pour atteindre la parité
Contrôles qualité :
- Pas d’optimisation prématurée.
- Noms cohérents et réutilisables.
Liste de vérification :
- Pouvez-vous rendre toutes les ébauches aujourd’hui ?
- L’étape suivante est-elle évidente et simple ?
Instruction finale : Fournissez Arbre, Props, Ébauches et Plan en sections claires, prêtes à être collées.
Résultat attendu
Arbre : - AppLayout, TopBar, CardList, Card Props : - Card : {title:string, value:string, delta?:number} Plan : - Connecter les données → ajouter une grille responsive → ajouter des interactions
Parcours de mise en œuvre
Planifiez dans ChatGPT
Collez le lien de votre capture d’écran et demandez Arbre, Props, Ébauches et Plan. Attendez-vous à une configuration minimale mais fonctionnelle.
10 minCollez les ébauches dans votre dépôt
Créez les fichiers composants à partir de la section Ébauches. Intégrez-les dans votre route de page et corrigez les imports/types si nécessaire.
15 minSuivez le plan en 3 étapes
Implémentez les tâches du Plan dans l’ordre, en commitant après chaque étape pour garder des différences petites et faciliter les retours en arrière.
1–2 heures
