Design : maquettes et prototypage rapide
Mis à jour le 29 juillet 2026
Design : maquettes et prototypage rapide
GPT Image change la phase de conception moins par la qualité de ce qu’il produit que par le coût de ce qu’il permet de jeter. Explorer trois directions visuelles pour une page d’accueil demandait une journée d’outil de design ; cela demande maintenant quelques minutes, ce qui autorise à en explorer six et à en abandonner cinq sans état d’âme. Cette leçon vous montre comment utiliser cette liberté sans confondre exploration et production.
Maquettes d’interfaces utilisateur
Une maquette générée sert à trancher une direction, pas à être découpée en composants. Le prompt doit donc viser la crédibilité visuelle : composants UI réalistes, typographie claire, espacement professionnel, palette cohérente, et une mention du niveau de fidélité attendu — ici « rendu haute fidélité type Figma/Sketch ». Remarquez la façon dont la fonction choisit la résolution : le portrait 1024×1536 pour le mobile, le paysage 1536×1024 pour le desktop. Générer un écran mobile dans un cadre paysage produirait une maquette qui ne ressemble à rien de réel.
from openai import OpenAI
import base64
client = OpenAI()
def maquette_ui(description: str, plateforme: str, output: str):
"""Génère une maquette d'interface utilisateur."""
prompt = (
f"Maquette UI/UX pour {plateforme} : {description}, "
"design moderne et épuré, composants UI réalistes, "
"typographie claire, espacement professionnel, "
"palette de couleurs cohérente, "
"rendu haute fidélité type Figma/Sketch"
)
response = client.images.generate(
model="gpt-image-1",
prompt=prompt,
size="1024x1536" if plateforme == "mobile" else "1536x1024",
quality="high",
response_format="b64_json"
)
data = base64.b64decode(response.data[0].b64_json)
with open(output, "wb") as f:
f.write(data)
print(f"Maquette {plateforme} : {output}")
maquette_ui(
"tableau de bord analytics avec graphiques, KPI cards et sidebar de navigation",
"desktop",
"dashboard_maquette.png"
)
maquette_ui(
"application de suivi fitness avec écran d'accueil, statistiques et historique",
"mobile",
"fitness_app_maquette.png"
)Explorer plusieurs directions visuelles
Au démarrage d’un projet, la question n’est pas « quelle est la bonne maquette » mais « quelles familles esthétiques méritent d’être montrées au client ». La fonction explorer_directions répond exactement à ce besoin en gardant le concept constant — une page d’accueil de plateforme de formation en ligne — et en faisant varier deux axes seulement, la direction artistique et la palette. Les trois pistes proposées ne sont pas des nuances : le minimaliste corporate en blanc et bleu marine, le moderne coloré en violet et orange, le sombre premium en noir et bleu électrique s’adressent à trois positionnements de marque différents. C’est cette amplitude qui rend la présentation utile.
from openai import OpenAI
import base64
client = OpenAI()
def explorer_directions(concept: str, directions: list[dict], prefix: str):
"""Génère plusieurs directions visuelles pour un même concept."""
for i, direction in enumerate(directions):
prompt = (
f"{concept}, "
f"direction artistique : {direction['style']}, "
f"palette : {direction['palette']}, "
"rendu professionnel haute qualité"
)
response = client.images.generate(
model="gpt-image-1",
prompt=prompt,
size="1024x1024",
quality="high",
response_format="b64_json"
)
path = f"{prefix}_direction_{i+1}.png"
data = base64.b64decode(response.data[0].b64_json)
with open(path, "wb") as f:
f.write(data)
print(f"Direction {i+1} ({direction['style'][:30]}) → {path}")
explorer_directions(
"Page d'accueil pour une plateforme de formation en ligne",
[
{
"style": "minimaliste corporate, beaucoup d'espace blanc",
"palette": "blanc, bleu marine, gris clair"
},
{
"style": "moderne et coloré, illustrations flat design",
"palette": "violet, orange, blanc"
},
{
"style": "sombre et premium, gradients subtils",
"palette": "noir, bleu électrique, doré"
},
],
"landing_page"
)Prototypage de packaging
Le packaging est probablement le domaine où le gain est le plus spectaculaire, parce qu’un prototype physique coûte cher et arrive tard. Le prompt distingue ici trois entrées volontairement séparées — le produit, le style, les éléments à faire figurer — puis impose une mise en scène constante : vue 3/4 posée sur une surface, rendu photoréaliste avec ombres douces. Les deux exemples illustrent l’écart de registre que cette structure encaisse sans broncher : un sachet kraft de thé bio à typographie manuscrite et fenêtre transparente d’un côté, un pot de crème blanc et or à lettres dorées de l’autre.
from openai import OpenAI
import base64
client = OpenAI()
def prototype_packaging(produit: str, style: str, elements: str, output: str):
"""Génère un prototype de packaging produit."""
prompt = (
f"Design de packaging pour {produit}, "
f"style {style}, "
f"éléments : {elements}, "
"vue 3/4 du packaging posé sur une surface, "
"rendu photoréaliste avec ombres douces, "
"design professionnel prêt pour présentation client"
)
response = client.images.generate(
model="gpt-image-1",
prompt=prompt,
size="1024x1024",
quality="high",
response_format="b64_json"
)
data = base64.b64decode(response.data[0].b64_json)
with open(output, "wb") as f:
f.write(data)
print(f"Prototype packaging : {output}")
prototype_packaging(
"thé bio premium en sachet kraft",
"naturel et artisanal, typographie manuscrite",
"logo feuille de thé, nom du produit, mention bio, fenêtre transparente",
"packaging_the.png"
)
prototype_packaging(
"crème hydratante haut de gamme en pot",
"luxe minimaliste, blanc et or",
"logo centré, nom de marque en lettres dorées, contenance 50ml",
"packaging_creme.png"
)Moodboards automatisés
Le moodboard sert à faire sentir une intention avant de montrer une solution. Plutôt que de fabriquer une planche à la main en agrégeant des références, vous décrivez le thème et les ingrédients visuels, et vous demandez une composition en grille asymétrique de type Pinterest. L’exemple d’un espace de coworking moderne montre le niveau de détail utile : on ne se contente pas de nommer le lieu, on énumère l’intérieur lumineux avec plantes, le mobilier scandinave, les textures bois et béton, la présence humaine décontractée et la palette terracotta, vert sauge et blanc cassé. Ce sont ces cinq entrées qui donnent au résultat sa cohérence.
from openai import OpenAI
import base64
client = OpenAI()
def generer_moodboard(theme: str, elements: list[str], output: str):
"""Génère un moodboard visuel pour un thème donné."""
elements_str = ", ".join(elements)
prompt = (
f"Moodboard professionnel pour le thème \"{theme}\", "
f"incluant : {elements_str}, "
"composition en grille asymétrique de type Pinterest, "
"photos et textures variées, palette cohérente, "
"style direction artistique pour présentation agence"
)
response = client.images.generate(
model="gpt-image-1",
prompt=prompt,
size="1024x1024",
quality="high",
response_format="b64_json"
)
data = base64.b64decode(response.data[0].b64_json)
with open(output, "wb") as f:
f.write(data)
print(f"Moodboard : {output}")
generer_moodboard(
"Espace de coworking moderne",
[
"intérieur lumineux avec plantes",
"mobilier design scandinave",
"textures bois et béton",
"personnes travaillant de manière décontractée",
"palette terracotta, vert sauge, blanc cassé"
],
"moodboard_coworking.png"
)Sets d’icônes cohérents
Une icône isolée est facile ; un set cohérent est difficile, parce que la cohérence tient à des détails invisibles dans un prompt naïf. La fonction set_icones les rend explicites : elle réinjecte pour chaque icône le thème et le style, exige un fond transparent ou blanc, un cadrage centré, une épaisseur de trait uniforme et des proportions carrées, et rappelle au modèle que l’image appartient à un ensemble. Sur les cinq icônes d’une application SaaS B2B — tableau de bord, utilisateurs, paramètres, notifications, analytics — c’est ce rappel qui évite de récupérer cinq styles graphiques différents. Le passage par un slug garantit au passage des noms de fichiers propres, apostrophes et espaces compris.
from openai import OpenAI
import base64
client = OpenAI()
def set_icones(theme: str, icones: list[str], style: str, output_prefix: str):
"""Génère un set d'icônes cohérent."""
for icone in icones:
prompt = (
f"Icône unique représentant \"{icone}\", "
f"thème : {theme}, "
f"style : {style}, "
"fond transparent ou blanc, centrée, "
"design cohérent avec un set d'icônes, "
"épaisseur de trait uniforme, proportions carrées"
)
response = client.images.generate(
model="gpt-image-1",
prompt=prompt,
size="1024x1024",
quality="high",
response_format="b64_json"
)
slug = icone.lower().replace(" ", "_").replace("'", "")
path = f"{output_prefix}_{slug}.png"
data = base64.b64decode(response.data[0].b64_json)
with open(path, "wb") as f:
f.write(data)
print(f"Icône {icone} → {path}")
set_icones(
theme="application SaaS B2B",
icones=["tableau de bord", "utilisateurs", "paramètres", "notifications", "analytics"],
style="line art, trait 2px, bleu marine, coins arrondis",
output_prefix="icon"
)Affiner une maquette par l’édition
La régénération complète d’une maquette pour corriger une seule zone vous fait perdre tout ce qui était déjà satisfaisant ailleurs. L’enchaînement ci-dessous procède autrement : il génère d’abord une page d’accueil complète pour une application de gestion de projet, puis ouvre une fenêtre dans le masque entre 8 % et 45 % de la hauteur — c’est-à-dire sous le header et au-dessus des blocs de fonctionnalités — pour ne rejouer que le hero. Le header, la navigation et les trois blocs restent strictement identiques entre la v1 et la v2, ce qui rend la comparaison honnête : vous voyez l’effet de votre changement, et rien d’autre.
from openai import OpenAI
from PIL import Image, ImageDraw
import base64
client = OpenAI()
# Étape 1 : générer la maquette initiale
response = client.images.generate(
model="gpt-image-1",
prompt=(
"Maquette de page d'accueil pour une application de gestion de projet, "
"design moderne, header avec navigation, hero section avec illustration, "
"3 blocs de fonctionnalités, fond blanc"
),
size="1024x1536",
quality="high",
response_format="b64_json"
)
data = base64.b64decode(response.data[0].b64_json)
with open("maquette_v1.png", "wb") as f:
f.write(data)
print("Maquette v1 générée")
# Étape 2 : modifier le hero section via édition
source = Image.open("maquette_v1.png")
w, h = source.size
mask = Image.new("RGBA", (w, h), (0, 0, 0, 255))
draw = ImageDraw.Draw(mask)
# Zone du hero : partie supérieure (en dessous du header)
draw.rectangle([0, int(h * 0.08), w, int(h * 0.45)], fill=(0, 0, 0, 0))
mask.save("mask_hero.png")
response = client.images.edit(
model="gpt-image-1",
image=open("maquette_v1.png", "rb"),
mask=open("mask_hero.png", "rb"),
prompt=(
"Hero section avec une illustration 3D isométrique d'un kanban board, "
"titre 'Gérez vos projets simplement', bouton CTA bleu, fond dégradé subtil"
)
)
import urllib.request
urllib.request.urlretrieve(response.data[0].url, "maquette_v2.png")
print("Maquette v2 avec hero modifié")Où s’arrête le prototypage IA
Il faut être clair sur le statut de ce que vous produisez ici. Les maquettes générées sont des explorations visuelles, pas des fichiers de production : le texte est bien rendu mais peut receler des erreurs mineures, les composants ne sont ni interactifs ni exportables vers Figma, et la cohérence entre plusieurs écrans d’un même parcours n’est pas garantie. Un designer qui recevrait ces images comme livrable final aurait raison de protester.
Leur valeur est ailleurs, et elle est considérable : elles servent à valider une direction avant d’investir dans le design final. Trancher entre trois pistes en une heure au lieu de trois jours, arriver en réunion client avec des images plutôt qu’avec des adjectifs, éliminer une fausse bonne idée avant qu’elle n’ait consommé une semaine de production — voilà ce que le prototypage IA vous achète réellement.
Pour vous en convaincre, construisez votre propre outil de démarrage de projet : un script qui, à partir d’un brief, génère trois directions visuelles de page d’accueil, un moodboard associé à chacune, et le catalogue HTML comparatif qui vous permettra de les présenter côte à côte.