Direction artistique d'images frontend
Créez des compositions de sites web plates qu'un développeur peut lire en un coup d'œil. Donnez à chaque composition une hiérarchie claire, une grille cohérente, des espaces blancs intentionnels et un geste typographique ou photographique distinctif. Traitez l'image comme une référence pour l'implémentation. Utilisez du HTML et CSS réels pour le texte de production, l'interface utilisateur et les mesures exactes lorsque l'implémentation est demandée.
1. Choisissez le workflow
Lisez la demande et les directives disponibles du projet, telles que AGENTS.md, CLAUDE.md, le guide de style, les tokens de design et les actifs visuels pertinents. Suivez d'abord les instructions explicites de l'utilisateur, puis les références approuvées dans leurs rôles assignés, puis les valeurs par défaut du projet. Utilisez la direction artistique pour combler les lacunes.
| Demande | Workflow |
|---|---|
| Nouvelle page, héros ou section | Concevoir à partir du brief. Choisir une direction visuelle cohérente. |
| Une autre section du même site | Réutiliser le système visuel et créer une composition adaptée au nouveau contenu. |
| Mobile à partir d'un desktop approuvé | Recomposer le contenu et les composants approuvés pour la nouvelle fenêtre d'affichage. |
| Supprimer, remplacer, recolorer ou corriger une chose | Modifier l'image approuvée en place et définir ce qui doit être préservé. |
Générez directement lorsque le brief donne suffisamment de direction. Si une cible de modification essentielle ou un actif approuvé ne peut pas être récupéré, demandez cette entrée spécifique.
2. Attribuez un rôle à chaque référence
Numérotez les entrées et identifiez chacune par son nom de fichier ou son contenu visuel. Reportez ces rôles dans le prompt de l'image réelle.
- Base à modifier — L'image approuvée recevant la modification. Placez-la en premier lors de l'utilisation d'une modification API.
- Desktop approuvé — Source du contenu, de l'ordre, des styles de composants et des identités des images et logos pour une version responsive.
- Style uniquement — Hériter des traits nommés tels que la palette, le traitement typographique, le grain et l'étalonnage photo. Gardez la composition et le texte de la nouvelle section indépendants.
- Échelle et espacement uniquement — Hériter uniquement des mesures ou relations nommées telles que les marges latérales, les filets, la taille des étiquettes ou l'échelle des chiffres d'affichage.
- Actif exact — Conserver la photo, le produit, la pièce ou le logo fourni reconnaissable. Préserver les détails distinctifs et spécifier le recadrage ou l'étalonnage autorisé.
Pour les pages multi-tranches, reportez un repère visuel approuvé et un enregistrement compact de la palette, des rôles typographiques, des gouttières, de l'espacement, des règles, du traitement des CTA et de l'imagerie. Indiquez quelles sections apparaissent dans chaque tranche et où elle commence et se termine. Utilisez le même système visuel tout au long. N'introduisez un en-tête ou un pied de page que là où il appartient.
3. Dirigez artistiquement et formulez le prompt
Pour les concepts originaux, choisissez une posture (artisanat, clarté, chaleur, théâtre ou expression audacieuse), une mise en page (éditoriale décalée, divisée, pleine page, grille modulaire disciplinée ou dirigée par la typographie) et une finition (numérique propre, grain de film subtil, demi-teintes ou papier texturé). Ne choisissez que les composants qui servent le contenu. Un menu de restaurant peut être dirigé par la typographie avec des filets et beaucoup d'espace de respiration. Un héros peut utiliser un seul recadrage décisif. Gardez les bords des panneaux rectangulaires ou utilisez de simples séparateurs horizontaux. Évitez les panneaux en forme de losange, de diamant ou de parallélogramme incliné, sauf demande expresse.
Utilisez des blocs courts et étiquetés pour un brief complexe. Pour une demande simple, utilisez uniquement les lignes pertinentes.
- Livrable — Nommez la page ou la section, la fenêtre d'affichage cible, le cadrage et le canevas. Spécifiez une composition de site plate, bord à bord, sauf si un cadre d'appareil est demandé.
- Références — Mappez les entrées à leurs rôles individuels et indiquez quels détails chacun contrôle.
- Mise en page — Donnez l'ordre de lecture, les marges de bord, les ancres de grille, les limites de section, l'alignement et le point focal. Décrivez un geste de conception signature en termes visibles.
- Copie — Citez le texte exact, spécifiez l'emplacement et rendez chaque chaîne une fois, sauf si la répétition est requise. Préservez les titres, prix, noms, dates et espaces réservés fournis. Pour un concept ouvert, utilisez une copie brève et fondée et évitez d'inventer des affirmations pour une organisation réelle.
- Système visuel — Spécifiez la hiérarchie typographique, les sauts de ligne si nécessaire, les rôles de couleur, l'imagerie et le recadrage, la finition et le style des composants. Utilisez des références de studio nommées comme raccourci pour les traits visibles.
- Contraintes — Nommez les quelques exclusions qui comptent. Évitez l'imagerie générique, la lueur non motivée, les grilles de cartes répétitives et le texte de remplissage, sauf si le brief demande ces traitements.
4. Recomposez pour mobile
Utilisez la largeur de fenêtre d'affichage CSS demandée, ou environ 390 px CSS par défaut. Traitez les dimensions de pixels rendues comme un paramètre de canevas séparé. Utilisez une seule colonne le cas échéant, refaites passer le contenu approuvé dans son ordre spécifié et préservez les étiquettes, les actifs exacts, les styles CTA, les règles et les composants d'espace réservé. Laissez le texte s'enrouler, augmentez l'espace de tapotement et ajustez les recadrages d'image uniquement si autorisé. Ajoutez des éléments collants uniquement lorsqu'ils sont demandés ou font partie de la conception approuvée. Divisez les longues compositions aux limites de section logiques avant que le texte ne devienne illisible.
5. Modifiez une zone spécifique
Joignez l'image approuvée comme base de modification. Énoncez l'action, identifiez l'élément par son apparence et son emplacement, puis indiquez ce qu'il faut préserver. Convertissez les coordonnées en pourcentage en un localisateur en langage simple mesuré à partir du coin supérieur gauche et utilisez les deux dans le prompt. Préservez le canevas, la copie, le recadrage, la géométrie, la palette et le contenu environnant, sauf si la modification les affecte explicitement.
Exemple :
Modifier l'image 1 en place. À x=43,4 %, y=29,6 % à partir du coin supérieur gauche, supprimez uniquement le remplissage local derrière l'étiquette et continuez la texture de la section adjacente dans cette zone. Préservez les lettres, le filet, l'échelle typographique, les panneaux environnants et le canevas complet. Gardez l'arrière-plan de la section opaque.
Distinguez la suppression d'un remplissage local de la création d'un découpage alpha. Utilisez un arrière-plan transparent uniquement lorsqu'il est demandé ou nécessaire pour l'actif prévu. Si une préservation stricte des pixels est requise, utilisez un flux de travail de composition approuvé lorsqu'il est disponible, et vérifiez la région non touchée par rapport à l'original. Les instructions du prompt et le balisage génératif seuls ne peuvent pas garantir un résultat identique au pixel près.
6. Utilisez le backend d'image disponible
Préférez l'outil de génération et d'édition d'image hôte lorsqu'il est présent. Fournissez les images de référence via son mécanisme d'entrée pris en charge et exprimez les contrôles non pris en charge comme une intention dans le prompt. Signalez le backend ou les paramètres réels uniquement lorsqu'ils sont connus. Si aucun backend d'image n'est disponible, fournissez un prompt prêt à exécuter et identifiez les entrées requises.
Lorsqu'une intégration de l'API OpenAI Image est disponible, utilisez ces points de départ :
| Utilisation | Modèle | Qualité | Complexité |
|---|---|---|---|
| Concept original rapide | gpt-image-2.6-flare | moyenne | moyenne |
| Mise en page détaillée, copie exacte petite ou correspondance de référence exigeante | gpt-image-2.6-sunburst | élevée | moyenne ou élevée |
| Modification ciblée | gpt-image-2.6-sunburst | moyenne ou élevée | faible |
Ajustez la qualité pour le détail et la lisibilité. Ajustez la complexité pour la planification et la composition. Utilisez les générations pour les nouvelles compositions et les modifications pour les bases d'images existantes. Omettez input_fidelity sur les modifications GPT Image 2.6. Pour les modifications guidées par balisage, utilisez une superposition PNG transparente correspondant aux dimensions en pixels de la première entrée. Fournissez le balisage ou le masque séparément comme pris en charge, jamais les deux dans la même demande guidée par balisage. Gardez les annotations hors de l'art final.
Choisissez des tailles supportées proches du rapport cible. Pour les tailles personnalisées de l'API GPT Image 2.6, utilisez des dimensions divisibles par 16 et vérifiez les limites actuelles du modèle. Les exemples de canevas incluent 1536×960 pour un héros 16:10, 1536×1024 pour une section 3:2, 1088×1920 pour une tranche de page haute et 1088×2352 pour une composition téléphone. Préservez le rapport et les dimensions demandés comme cibles lorsque l'hôte gère le dimensionnement du canevas. Vérifiez les dimensions réelles avant de revendiquer une exportation exacte.
Utilisez le PNG pour les compositions détaillées et les actifs alpha. Lorsque le backend les prend en charge, demandez la génération SVG ou GIF uniquement pour un actif vectoriel ou une étude de mouvement que l'utilisateur souhaite. Inspectez la sortie vectorielle et la continuité de la boucle avant la livraison.
Références API : Génération d'images · Rédaction de prompts d'images
7. Inspectez et corrigez
Inspectez l'image réelle à vue normale et zoomez sur les petits lettres ou la zone de modification. Comparez-la avec le brief et les entrées approuvées :
- Vérifiez toute la copie verrouillée, les dates, les prix, les étiquettes, les logos et les détails d'actifs reconnaissables.
- Vérifiez le nombre de sections demandées et l'ordre de lecture, la hiérarchie visuelle, les gouttières, l'alignement, la typographie, les filets et la continuité des composants. Vérifiez que la mise en page correspond à la fenêtre d'affichage demandée.
- Vérifiez que les rôles de référence sont restés séparés. Signalez les mises en page empruntées, les copies non liées, les substitutions d'actifs ou les panneaux non demandés.
- Pour les modifications, comparez la zone modifiée et ses environs avec la base approuvée. Pour les découpages, inspectez le canal alpha lorsqu'il est disponible.
Traitez toute violation d'une exigence verrouillée comme un échec. Effectuez au plus un passage correctif automatique par demande. Pour une modification d'image approuvée, réessayez à partir de la base approuvée si le candidat a dérivé. Pour une nouvelle composition avec un défaut localisé, modifiez le candidat. Régénérez uniquement lorsque la composition elle-même a besoin d'être reconstruite. Réinspectez après la correction et divulguez toute divergence matérielle restante ou vérification indisponible. Renvoyez le visuel sélectionné avec une courte note lorsqu'il ajoute du contexte.