Utiliser le prompt
Ajouter votre cahier des charges
Ajoutez votre contexte ci-dessous. Il sera inclus dans le prompt lorsque vous le copierez ou le téléchargerez.
Créez un site web HTML responsive en utilisant l’environnement technique existant du projet pour [PROJECT] et [AUDIENCE]. La tâche est la suivante : Portfolio de studio créatif.
Contenu et structure requis
Présentez trois projets avec leur discipline, leur rôle, leur année et des liens vers leurs études de cas ; utilisez une typographie expressive et une grille d’images asymétrique.
Utilisez [APPROVED_CONTENT] comme source pour les noms, dates, chiffres, affirmations et destinations. Dressez la liste des éléments manquants avant toute substitution. Si une démonstration est nécessaire, indiquez que son contenu est fictif. N’inventez aucun témoignage client, classement, logo de partenaire ni aucune fonctionnalité de produit.
Direction artistique
Utilisez [BRAND_RULES] et le système de conception déjà sélectionné dans le projet. Si aucun système n’est fourni, partez de cette orientation : ivoire chaud, typographie anthracite et une seule touche discrète de vert acide ; espacement généreux et grille asymétrique. Assurez la cohérence des rôles de la typographie, de l’espacement et des couleurs. Donnez la priorité à la tâche plutôt qu’aux éléments décoratifs et évitez un assemblage générique de cartes sans rapport entre elles.
Contenu du projet
Pour chacun des trois projets, incluez son titre, un brief d’une phrase, sa discipline, son année, le rôle du studio, les crédits des collaborateurs, une image principale et la destination de l’étude de cas. Commencez par le projet le plus convaincant ; utilisez les deux autres pour montrer l’étendue des compétences. Terminez par le moyen de contact fourni. N’inventez pas de récits d’études de cas pour les destinations manquantes.
Mise en page et comportement
Créez une asymétrie par l’échelle et le placement des images, tout en alignant les légendes de manière cohérente. Placez les noms des projets et les crédits hors des images. Conservez les proportions des images fournies, sauf si un recadrage est approuvé. Sur mobile, empilez dans cet ordre l’introduction, le projet principal, les projets complémentaires et le contact.
Vérification d’acceptation propre à la tâche
- Testez un titre long, une image au format portrait et plusieurs collaborateurs.
- Rendez chaque destination de projet accessible au clavier et gardez tous les crédits visibles sans survol.
Implémentation et vérification
Conservez le texte modifiable. Utilisez une structure sémantique, des contrôles explicites, un focus clavier visible et des états vides ou d’erreur appropriés. Vérifiez les mises en page étroites et larges. Respectez les préférences de réduction des animations. Préservez le framework et les dépendances existants du projet ; ne remplacez pas discrètement la pile technique. Livrez les fichiers modifiables et expliquez tout comportement incomplet ou toute donnée d’entrée non prise en charge. Vérifiez cette tâche précise avant de proposer des fonctionnalités supplémentaires.
Pièce jointe de référence et objectif de reconstruction
Joignez le fichier reference.webp du pack de téléchargement de ce prompt à ce dernier dans OpenDesign. Créez un résultat modifiable avec une composition et une hiérarchie similaires ; n’intégrez pas l’image de référence entière comme interface finale. Préservez le contenu approuvé du projet et les règles de marque s’ils entrent en conflit avec des libellés d’exemple fictifs. Si l’image est absente ou illisible, demandez-la au lieu de prétendre à une fidélité visuelle.
Composition et contenu de référence
Utilisez le fichier reference.webp joint comme référence visuelle pour le Portfolio de studio créatif. Avant de commencer, identifiez de haut en bas les principales zones, leurs largeurs et hauteurs relatives, l’alignement, l’espacement, la hiérarchie typographique, les couleurs de surface, les bordures, les images et les composants récurrents. Préservez ces relations au lieu de les remplacer par un modèle générique. Contenu requis : présentez trois projets avec leur discipline, rôle, année et liens vers les études de cas ; utilisez une typographie expressive et une grille d’images asymétrique. Suivez ces consignes de mise en page propres à la tâche pour transposer l’image en éléments modifiables : accordez la place principale à un projet et utilisez les deux autres pour illustrer l’étendue du travail. L’asymétrie doit provenir de l’échelle et du placement des images, tandis que les légendes conservent un alignement et une taille de caractères cohérents. Placez le nom du projet, la discipline et les crédits hors de l’image afin qu’ils restent lisibles sur les photographies claires comme sombres. Sur un écran étroit, revenez à une séquence verticale délibérée : introduction, projet principal, projets complémentaires, puis contact. Conservez les proportions originales des images, sauf si un recadrage a été approuvé.
Direction visuelle issue du projet de référence
fond ivoire chaud, grande typographie suisse sans sérif anthracite, petits accents vert acide, espace négatif généreux, grille de projets asymétrique avec des photographies architecturales et sculpturales et un panneau bleu cobalt sobre. Texte principal exact : « Good ideas. Carefully made. » Navigation : « Work », « About », « Contact ». Légendes des projets : « Objects / 2026 », « Spaces / 2026 », « Identity / 2026 ». Direction artistique éditoriale élégante et professionnelle.
Spécifications des interactions
La référence est un concept statique : le comportement ci-dessous constitue une exigence d’implémentation et ne prouve pas que l’image est déjà fonctionnelle. Copiez le prompt personnalisé dans le projet où vous souhaitez créer le portfolio. Demandez d’abord la page d’accueil ; les pages d’études de cas doivent utiliser le contenu fourni pour chacune d’elles plutôt que des récits de projet inventés. Rendez chaque destination de projet accessible au clavier et gardez tous les crédits visibles sans survol. Pour chaque commande visible, précisez son déclencheur, l’état affecté et le retour fourni ; implémentez les modifications locales avec un état cohérent dans les vues associées. Faites en sorte que la recherche et les filtres produisent de vrais résultats, que les commandes de sélection aient un état actif explicite et que les actions d’enregistrement affichent, le cas échéant, un retour visible pour les états en attente, réussi et échoué. N’ajoutez aucun parcours sans rapport avec la tâche. Utilisez des liens appropriés pour la navigation, des boutons pour les actions et des noms accessibles pour les commandes sous forme d’icônes. Ne laissez pas entendre qu’une opération côté serveur a réussi si seule une démo locale a été modifiée.
Comparaison visuelle et livraison
- Comparez le résultat à l’image jointe avec des proportions identiques. Vérifiez la disposition des principales zones, les dimensions relatives des images, les sauts de ligne, les espacements, la hiérarchie typographique, le contraste, les états actifs et la densité du contenu avant de peaufiner les détails décoratifs.
- Testez ensuite la mise en page étroite sans comprimer le texte de bureau dans des libellés minuscules.
- Conservez les logos, photos et icônes comme ressources distinctes, et tous les libellés porteurs de sens comme éléments modifiables. Répertoriez les polices et ressources indisponibles ainsi que tout écart intentionnel. Livrez les fichiers fonctionnels avec un compte rendu concis des comportements implémentés et des intégrations restantes ; ne promettez pas un résultat identique au pixel près à partir du seul prompt.
Télécharger le prompt + l’image
Inclut le prompt complet et l’image de référence en taille réelle. Joignez les deux dans OpenDesign pour guider la mise en page.
Comment rédiger un prompt de design pour un portfolio de studio créatif
Utilisez ce prompt de design pour un portfolio de studio créatif afin de présenter trois projets avec leur discipline, rôle, année et liens vers les études de cas ; utilisez une typographie expressive et une grille d’images asymétrique.
Détails recadrés issus du même concept généré par IA ; il ne s’agit pas de captures d’écran d’un site web fonctionnel.
Décrivez la hiérarchie avant le style
« Good ideas. Carefully made. » occupe la majeure partie du côté gauche de l’introduction. La description du studio figure dans un bloc beaucoup plus petit à droite ; « Work », « About » et « Contact » restent en haut. Le fond ivoire et la typographie anthracite renforcent cette hiérarchie, tandis que le petit accent vert crée un point d’attention.
Le seul terme « Editorial » laisse la composition ouverte à l’interprétation. Nommez l’élément dominant, indiquez où placer le texte secondaire et précisez quels détails doivent rester discrets. Indiquez séparément votre titre réel : les mots de l’exemple sont fictifs et un titre plus long nécessitera d’autres retours à la ligne. Accordez la place principale à un projet et utilisez les deux autres pour illustrer l’étendue du travail. L’asymétrie doit provenir de l’échelle et du placement des images, tandis que les légendes conservent un alignement et une taille de caractères cohérents. Placez le nom du projet, la discipline et les crédits hors de l’image afin qu’ils restent lisibles sur les photographies claires comme sombres. Sur un écran étroit, revenez à une séquence verticale délibérée : introduction, projet principal, projets complémentaires, puis contact. Conservez les proportions originales des images, sauf si un recadrage a été approuvé.
À partir du prompt
fond ivoire chaud, grande typographie suisse sans sérif anthracite, petits accents vert acide, espace négatif généreux
Personnalisez-le
Utilisez [STUDIO_NAME] et [APPROVED_HEADLINE]. Faites du titre l’élément dominant à gauche ; placez une courte présentation du studio à droite. Gardez « Work », « About » et « Contact » compacts au-dessus. Utilisez un ivoire chaud et un anthracite avec un seul accent discret issu de [BRAND_RULES]. Laissez le titre revenir naturellement à la ligne au lieu de le réduire pour le faire tenir.
Transformez la grille des travaux en contrat de contenu
Les trois images créent un contraste par leurs sujets et leurs couleurs : un objet sculptural clair, un intérieur baigné de soleil et un panneau d’identité cobalt. Leurs légendes partagent une même ligne de base sous les images. La rangée visible se rapproche de trois colonnes égales ; elle ne présente pas de projet principal nettement agrandi, même si le prompt demande une hiérarchie asymétrique.
Cette phrase définit ce que le résultat doit contenir, au lieu d’espérer qu’une galerie visuellement convaincante l’inclue. La petite image conceptuelle ne montre pas clairement tous les rôles ni tous les crédits de collaborateurs requis. Conservez ces champs dans l’implémentation et vérifiez-les à l’aide de vos véritables fiches de projet. Résolvez également l’écart entre la référence et le brief écrit : choisissez une rangée de trois colonnes égales pour vous rapprocher visuellement de la référence, ou agrandissez délibérément un projet.
À partir du prompt
Pour chacun des trois projets, incluez son titre, un brief en une phrase, la discipline, l’année, le rôle du studio, les crédits des collaborateurs, l’image principale et la destination de l’étude de cas.
Personnalisez-le
Utilisez exactement ces trois fiches de projet approuvées : [PROJECT_RECORDS]. Sur ordinateur, présentez leurs images principales dans trois colonnes égales pour correspondre à la référence. Conservez le titre, la discipline, l’année, le rôle du studio et les crédits des collaborateurs sous forme de texte modifiable sous chaque image. Attribuez à chaque projet l’URL d’étude de cas fournie. Préservez les proportions de chaque image ; n’inventez pas les crédits ou destinations manquants.
Décrivez le comportement que l’image ne peut pas montrer
Le libellé « View case study » suggère une navigation, mais une image statique ne permet pas de déterminer où il mène, si le focus clavier est visible ou ce qui se passe sur un téléphone. Ces points doivent faire l’objet d’exigences écrites. N’ajoutez pas de recherche, de filtres ou de commandes d’enregistrement au seul motif qu’un prompt générique les mentionne ; ils ne font pas partie de la tâche visible de ce portfolio.
Décrivez le déclencheur et le résultat : cliquer sur le titre du projet ou sur son lien vers l’étude de cas ouvre la même destination approuvée. Définissez ensuite l’ordre de lecture sur écran étroit. Ne demandez pas au modèle de déduire une mise en page mobile à partir de cette image pour ordinateur et ne masquez pas les informations essentielles du projet derrière un survol. Parcourez la page comme un client potentiel : pouvez-vous identifier la spécialité du studio, savoir qui a réalisé le travail et ouvrir une étude de cas sans survol ? Testez un titre de projet long, une image au format portrait et un projet réunissant plusieurs collaborateurs. Naviguez ensuite au clavier et sur un écran étroit. Si le premier résultat ressemble à une page d’agence générique, revoyez la hiérarchie des projets et les légendes avant d’ajouter des effets ou d’autres sections.
À partir du prompt
Rendez chaque destination de projet accessible au clavier et gardez tous les crédits visibles sans survol.
Personnalisez-le
Faites pointer chaque titre de projet et chaque lien « View case study » vers la même URL approuvée. Prévoyez un état de focus clavier visible et gardez les crédits visibles en permanence. Sur les écrans étroits, empilez dans cet ordre l’introduction, les trois projets et le contact. Autorisez les noms longs à revenir à la ligne. Si l’URL d’une étude de cas manque, affichez les informations du projet sans lien inactif et signalez la donnée manquante.
Assemblez le brief, puis révisez une décision à la fois
Commencez par la tâche et le public, ajoutez les données réelles des projets, décrivez la hiérarchie visuelle, puis précisez la navigation et le comportement sur mobile. Joignez l’image de référence au texte. Les trois passages « Personnalisez-le » ci-dessus remplacent les parties correspondantes du prompt complet : ce ne sont pas des instructions supplémentaires à ajouter aveuglément. En particulier, remplacez l’instruction concernant la grille asymétrique si vous choisissez une interprétation à colonnes égales.
- Comparez le premier résultat à la référence : la mise en valeur du titre, l’ordre des images, l’alignement des légendes et la couleur d’arrière-plan doivent être intentionnels.
- Remplacez le contenu d’exemple par le titre le plus long de vos projets réels et les crédits complets. Vérifiez qu’aucun élément ne disparaît ni ne se chevauche sur un écran étroit.
- Ouvrez chaque page de projet et naviguez au clavier. Une capture d’écran d’apparence similaire ne prouve pas que ces interactions fonctionnent.
Prompt de suivi
Utilisez ceci après le premier résultat. Cela recentre la révision sur l’aspect le plus important de cette tâche.
Affinez uniquement la grille des projets du portfolio. Accordez clairement la première place au projet principal, puis présentez les deux projets complémentaires. Gardez visibles sans survol le titre, la discipline, l’année et les crédits des contributeurs de chaque projet. Préservez les proportions des images et rendez chaque lien vers une étude de cas accessible au clavier. Sur mobile, conservez le même ordre de lecture dans une seule colonne. Ne modifiez pas l’en-tête, la typographie ni la section de contact approuvés.
