Croquis de mise en page Tailwind à partir d'une capture d'écran (espacement, grille et tokens)
Obtenez une recette de mise en page Tailwind-first avec espacement, grille et correspondance de tokens directement depuis votre capture d'écran.
Aperçu du prompt
Conseils pour vous
- Verrouillez une échelle d'espacement et ne la modifiez pas en cours de page. - Extrayez les groupes de classes répétées en composants réutilisables. - Ajoutez des commentaires dans le JSX pour regrouper l'intention des utilitaires.
De l’équipe opérationsNexusAi TechnologyProblème résolu
Élimine les approximations concernant le rythme des espacements et le choix de la grille, évitant ainsi les itérations fastidieuses de recherche pixel par pixel.
Correspondance de tokens
Mappe l'espacement de la capture d'écran à l'échelle Tailwind.
Grille responsive
Définit colonnes et espaces par point de rupture.
Recettes d'utilitaires
Groupes de classes prêts à coller par zone.
Notes de conflits
Met en lumière les conflits d'utilitaires probables dès le départ.
Instructions du prompt IA
Agissez en tant que : Architecte frontend spécialisé en Tailwind CSS et systèmes responsives.
Pourquoi cette tâche est importante : Des règles cohérentes d'espacement et de grille empêchent l'entropie de la mise en page et rendent les composants réutilisables sur plusieurs pages.
Limites importantes :
- Privilégiez les utilitaires Tailwind plutôt que le CSS personnalisé sauf justification claire.
- Utilisez une échelle 4/8px sauf si une échelle de marque est fournie.
- Incluez les décisions mobile-first avant les points de rupture plus larges.
Entrées utilisateur :
- Lien vers la capture d'écran ou description textuelle concise
- Tokens d'espacement/typographie connus (le cas échéant)
- Points de rupture requis (sm/md/lg/xl)
Objectifs :
1) Proposer la largeur du conteneur, les colonnes et les espaces.
2) Définir les tokens d'espacement pour les paddings, marges et gaps.
3) Fournir des exemples d'utilitaires pour les zones clés (en-tête, cartes, tableau, barre latérale).
4) Indiquer les modifications responsives par point de rupture.
Flux d'analyse :
1) Identifier la densité et le rythme à partir de la capture d'écran.
2) Mapper les estimations en pixels aux utilitaires Tailwind les plus proches.
3) Rédiger des exemples de chaînes className pour chaque zone.
4) Signaler tout token manquant dans le système de design.
Format de sortie requis :
- Tokens : hypothèses d'espacement et de typographie
- GridPlan : conteneur, colonnes, espaces, points de rupture
- UtilitiesByRegion : exemples de classNames pour chaque zone majeure
- Notes : où un CSS personnalisé pourrait être justifié
Contrôles qualité :
- Ne pas mélanger des utilitaires conflictuels pour la même propriété.
- Garder l'ordre des classes lisible : mise en page → espacement → couleur → typographie.
Checklist de vérification :
- Chaque zone peut-elle se replier proprement à sm ?
- Les gaps/paddings sont-ils cohérents entre éléments frères ?
Instruction finale : Livrez Tokens, GridPlan, UtilitiesByRegion et Notes dans des sections distinctes, optimisées pour un copier-coller dans une description de PR.
Résultat attendu
Tokens : - Espacement : 4, 6, 8, 10, 12 (Tailwind : 1, 1.5, 2, 2.5, 3) GridPlan : - Conteneur : max-w-7xl mx-auto px-6 sm:px-4 - Colonnes : lg:grid lg:grid-cols-12 lg:gap-6 UtilitiesByRegion : - TopBar : flex items-center justify-between py-3 border-b - Card : rounded-lg p-4 sm:p-5 shadow-sm bg-white Notes : - Le découpage de l'avatar nécessite object-cover et rounded-full.
Parcours de mise en œuvre
Générez un plan Tailwind dans ChatGPT
Fournissez à ChatGPT le lien de la capture d'écran, les points de rupture ciblés et les tokens de marque éventuels. Demandez Tokens, GridPlan, UtilitiesByRegion et Notes. Copiez les utilitaires suggérés pour chaque zone.
8 minPrototypage des zones dans votre éditeur
Dans VS Code, créez la structure JSX pour chaque zone majeure et collez les groupes className issus de UtilitiesByRegion. Ajustez uniquement en cas de conflits ou de tokens manquants, en annotant les modifications.
15 minTestez d'abord sur petits écrans
Ouvrez le prototype dans les outils de développement du navigateur, testez les largeurs sm et md, et notez tout problème de retour à la ligne ou de flex. Intégrez ces retours dans le prompt pour obtenir des corrections ciblées.
10 min