Design : maquettes et prototypage rapide
Design : maquettes et prototypage rapide
GPT Image accélère considérablement les phases de conception. Plutôt que de passer des heures sur un outil de design pour explorer des directions visuelles, vous pouvez générer des maquettes en quelques secondes et itérer rapidement avant de passer à la production finale.
Maquettes d’interfaces utilisateur
Générez des concepts d’interface pour explorer des directions de design :
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"
)Exploration de directions visuelles
Quand vous démarrez un projet de design, explorez rapidement plusieurs pistes :
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 design de packaging bénéficie particulièrement du prototypage rapide :
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
Créez des moodboards pour présenter une direction créative :
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"
)Icônes et éléments d’interface
Générez des sets d’icônes cohérents pour vos projets :
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"
)Itération design avec édition
Combinez génération et édition pour affiner une maquette :
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é")Limites du prototypage IA
- Les maquettes générées sont des explorations visuelles, pas des fichiers de production
- Le texte est bien rendu mais peut contenir des erreurs mineures
- Les composants UI ne sont pas interactifs ni exportables vers Figma
- Utilisez ces maquettes pour valider une direction avant d’investir dans le design final
- La cohérence entre plusieurs écrans n’est pas garantie
Exercice pratique
Créez un script de prototypage rapide qui, pour un brief de projet donné, génère automatiquement : 3 directions visuelles différentes pour la page d’accueil, 1 moodboard associé à chaque direction, et un catalogue HTML comparatif.