Design: Mockups und schnelles Prototyping

Aktualisiert am 2. November 2026 — Bildmodelle. Das Modell gpt-image-1, für das dieser Kurs ursprünglich geschrieben wurde, wurde am 23. Oktober 2026 eingestellt. gpt-image-1.5, gpt-image-1-mini und chatgpt-image-latest werden am 1. Dezember 2026 eingestellt. Die Beispiele verwenden nun gpt-image-2.5-sunburst, das die höchste Präzision für Bearbeitungen bietet; gpt-image-2.5-flare ist für die Standardgenerierung schneller. Beide Modelle unterstützen zudem die Qualitätsstufen xhigh und max. GPT-Bildmodelle geben Bilder stets im Base64-Format zurück: Der Parameter response_format von älteren DALL·E-Modellen wird nicht mehr akzeptiert und aus dem Code entfernt. Quelle: Bildgenerierung (OpenAI).

GPT Image verändert die Designphase weniger durch die Qualität der Ausgabe als vielmehr durch die geringen Kosten für das Wegwerfen von Ergebnissen. Die Exploration von drei visuellen Richtungen für eine Startseite, die früher einen Tag in einem Design-Tool in Anspruch nahm, dauert nun nur wenige Minuten. Dies ermöglicht es Ihnen, sechs Richtungen zu erkunden und fünf davon ohne Zögern abzulehnen. Diese Lektion zeigt Ihnen, wie Sie diese Freiheit nutzen, ohne Exploration mit der Produktion zu verwechseln.

Benutzeroberflächen-Mockups

Ein generierter Mockup dient dazu, eine Richtung zu wählen, nicht dazu, in Komponenten zerlegt zu werden. Ihr Prompt muss daher auf visuelle Glaubwürdigkeit abzielen: realistische UI-Komponenten, klare Typografie, professionelle Ausrichtung, ein konsistentes Farbpalett und eine Angabe des erwarteten Fidelity-Niveaus – in diesem Fall „high-fidelity render in the style of Figma/Sketch”. Beachten Sie, wie die Funktion die Auflösung auswählt: 1024×1536 Portrait für Mobilgeräte, 1536×1024 Landscape für Desktops. Die Generierung eines Mobilbildschirms in einem Landschaftsrahmen würde ein Mockup erzeugen, das nichts mit einem echten Gerät zu tun hat.

from openai import OpenAI
import base64

client = OpenAI()

def ui_mockup(description: str, platform: str, output: str):
    """Generate a user interface mockup."""
    prompt = (
        f"UI/UX mockup for {platform}: {description}, "
        "modern and clean design, realistic UI components, "
        "clear typography, professional spacing, "
        "consistent color palette, "
        "high-fidelity render in the style of Figma/Sketch"
    )

    response = client.images.generate(
        model="gpt-image-2.5-sunburst",
        prompt=prompt,
        size="1024x1536" if platform == "mobile" else "1536x1024",
        quality="high",
    )

    data = base64.b64decode(response.data[0].b64_json)
    with open(output, "wb") as f:
        f.write(data)
    print(f"{platform} mockup: {output}")


ui_mockup(
    "analytics dashboard with charts, KPI cards, and navigation sidebar",
    "desktop",
    "dashboard_mockup.png"
)

ui_mockup(
    "fitness tracking app with home screen, statistics, and history",
    "mobile",
    "fitness_app_mockup.png"
)

Erkundung mehrerer visueller Richtungen

Zu Beginn eines Projekts lautet die Frage nicht „welches ist das richtige Mockup?”, sondern „welche ästhetischen Familien verdienen es, dem Kunden gezeigt zu werden?”. Die Funktion explore_directions erfüllt genau diesen Bedarf, indem sie das Konzept konstant hält – eine Startseite für eine Online-Lernplattform – und lediglich zwei Achsen variiert: die künstlerische Ausrichtung und das Farbpalett. Die drei vorgeschlagenen Pfade sind keine subtilen Variationen: Corporate Minimal in Weiß und Dunkelblau, Modern Colorful in Lila und Orange sowie Premium Dark in Schwarz und elektrischem Blau zielen auf drei unterschiedliche Markenpositionierungen ab. Es ist dieser Bereich, der die Präsentation nützlich macht.

from openai import OpenAI
import base64

client = OpenAI()

def explore_directions(concept: str, directions: list[dict], prefix: str):
    """Generate multiple visual directions for the same concept."""
    for i, direction in enumerate(directions):
        prompt = (
            f"{concept}, "
            f"art direction: {direction['style']}, "
            f"palette: {direction['palette']}, "
            "professional high-quality render"
        )

        response = client.images.generate(
            model="gpt-image-2.5-sunburst",
            prompt=prompt,
            size="1024x1024",
            quality="high",
        )

        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}")


explore_directions(
    "Homepage for an online learning platform",
    [
        {
            "style": "corporate minimal, lots of white space",
            "palette": "white, navy blue, light gray"
        },
        {
            "style": "modern and colorful, flat design illustrations",
            "palette": "purple, orange, white"
        },
        {
            "style": "dark and premium, subtle gradients",
            "palette": "black, electric blue, gold"
        },
    ],
    "landing_page"
)

Verpackungsprototyping

Verpackung ist wahrscheinlich der Bereich, in dem der Gewinn am dramatischsten ist, da ein physischer Prototyp teuer ist und spät ankommt. Der Prompt trennt hier drei Eingaben bewusst voneinander – das Produkt, der Stil und die erforderlichen Elemente – und setzt eine konstante Inszenierung auf: eine 3/4-Ansicht, die auf einer Oberfläche ruht, fotorealistischer Render mit weichen Schatten. Die beiden Beispiele illustrieren den Bereich, den diese Struktur ohne Zögern bewältigt: eine Kraftpapier-Tasche für biologischen Tee mit handschriftlicher Typografie und einem transparenten Fenster auf einer Seite, eine weiße und goldene Cremedose mit goldener Beschriftung auf der anderen.

from openai import OpenAI
import base64

client = OpenAI()

def packaging_prototype(product: str, style: str, elements: str, output: str):
    """Generate a product packaging prototype."""
    prompt = (
        f"Packaging design for {product}, "
        f"style: {style}, "
        f"elements: {elements}, "
        "3/4 view of packaging resting on a surface, "
        "photorealistic render with soft shadows, "
        "professional design ready for client presentation"
    )

    response = client.images.generate(
        model="gpt-image-2.5-sunburst",
        prompt=prompt,
        size="1024x1024",
        quality="high",
    )

    data = base64.b64decode(response.data[0].b64_json)
    with open(output, "wb") as f:
        f.write(data)
    print(f"Packaging prototype: {output}")


packaging_prototype(
    "premium organic tea in a kraft bag",
    "natural and artisanal, handwritten typography",
    "tea leaf logo, product name, organic label, transparent window",
    "packaging_tea.png"
)

packaging_prototype(
    "high-end moisturizing cream in a jar",
    "minimalist luxury, white and gold",
    "centered logo, brand name in gold lettering, 50ml capacity",
    "packaging_cream.png"
)

Automatisierte Moodboards

Ein Moodboard vermittelt eine Absicht, bevor eine Lösung gezeigt wird. Anstatt eine Tafel manuell zu erstellen, indem Referenzen aggregiert werden, beschreiben Sie das Thema und die visuellen Zutaten und bitten um eine asymmetrische Rasterkomposition im Stil von Pinterest. Das Beispiel eines modernen Coworking-Raums zeigt das nützliche Detailniveau: Sie nennen den Ort nicht nur, sondern listen das helle Interieur mit Pflanzen, skandinavisches Möbel, Holz- und Betonstrukturen, entspannte menschliche Präsenz und eine Terrakotta-, Salbeigrün- und Off-White-Palette auf. Diese fünf Eingaben verleihen dem Ergebnis seine Kohärenz.

from openai import OpenAI
import base64

client = OpenAI()

def generate_moodboard(theme: str, elements: list[str], output: str):
    """Generate a visual moodboard for a given theme."""
    elements_str = ", ".join(elements)
    prompt = (
        f"Professional moodboard for the theme \"{theme}\", "
        f"including: {elements_str}, "
        "asymmetric grid composition in the style of Pinterest, "
        "varied photos and textures, consistent palette, "
        "art direction style for agency presentation"
    )

    response = client.images.generate(
        model="gpt-image-2.5-sunburst",
        prompt=prompt,
        size="1024x1024",
        quality="high",
    )

    data = base64.b64decode(response.data[0].b64_json)
    with open(output, "wb") as f:
        f.write(data)
    print(f"Moodboard: {output}")


generate_moodboard(
    "Modern coworking space",
    [
        "bright interior with plants",
        "Scandinavian design furniture",
        "wood and concrete textures",
        "people working in a relaxed manner",
        "terracotta, sage green, off-white palette"
    ],
    "moodboard_coworking.png"
)

Konsistente Iconsätze

Ein einzelnes Icon ist einfach; ein konsistentes Set ist schwierig, da Konsistenz auf Details beruht, die einem naiven Prompt unsichtbar bleiben. Die Funktion icon_set macht sie explizit: Sie injiziert das Thema und den Stil für jedes Icon neu, fordert einen transparenten oder weißen Hintergrund, zentrierte Rahmung, einheitliche Strichstärke und quadratische Proportionen und erinnert das Modell daran, dass das Bild zu einem Set gehört. Für die fünf Icons einer B2B-SaaS-Anwendung – Dashboard, Benutzer, Einstellungen, Benachrichtigungen, Analysen – verhindert genau diese Erinnerung, dass Sie fünf unterschiedliche Grafikstile erhalten. Die Verwendung eines Slug sorgt für saubere Dateinamen und behandelt Apostrophe und Leerzeichen.

from openai import OpenAI
import base64

client = OpenAI()

def icon_set(theme: str, icons: list[str], style: str, output_prefix: str):
    """Generate a consistent set of icons."""
    for icon in icons:
        prompt = (
            f"Single icon representing \"{icon}\", "
            f"theme: {theme}, "
            f"style: {style}, "
            "transparent or white background, centered, "
            "consistent design within an icon set, "
            "uniform stroke weight, square proportions"
        )

        response = client.images.generate(
            model="gpt-image-2.5-sunburst",
            prompt=prompt,
            size="1024x1024",
            quality="high",
        )

        slug = icon.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"Icon {icon} → {path}")


icon_set(
    theme="B2B SaaS application",
    icons=["dashboard", "users", "settings", "notifications", "analytics"],
    style="line art, 2px stroke, navy blue, rounded corners",
    output_prefix="icon"
)

Verfeinerung eines Mockups durch Bearbeitung

Die Regenerierung eines gesamten Mockups, um einen einzelnen Bereich zu korrigieren, führt dazu, dass Sie alles verlieren, was an anderer Stelle bereits zufriedenstellend war. Der folgende Arbeitsablauf verläuft anders: Er generiert zunächst eine vollständige Startseite für eine Projektmanagement-App, öffnet dann ein Fenster in der Maske zwischen 8 % und 45 % der Höhe – also unter dem Header und über den Funktionsblöcken –, um nur den Hero-Bereich erneut abzuspielen. Der Header, die Navigation und die drei Blöcke bleiben zwischen v1 und v2 strikt identisch, was den Vergleich ehrlich macht: Sie sehen die Wirkung Ihrer Änderung und nichts anderes.

from openai import OpenAI
from PIL import Image, ImageDraw
import base64

client = OpenAI()

# Schritt 1: Generierung des initialen Mockups
response = client.images.generate(
    model="gpt-image-2.5-sunburst",
    prompt=(
        "Homepage mockup for a project management application, "
        "modern design, header with navigation, hero section with illustration, "
        "3 feature blocks, white background"
    ),
    size="1024x1536",
    quality="high",
)

data = base64.b64decode(response.data[0].b64_json)
with open("mockup_v1.png", "wb") as f:
    f.write(data)
print("Mockup v1 generiert")

# Schritt 2: Bearbeitung des Hero-Bereichs
source = Image.open("mockup_v1.png")
w, h = source.size
mask = Image.new("RGBA", (w, h), (0, 0, 0, 255))
draw = ImageDraw.Draw(mask)
# Hero-Bereich: oberer Teil (unter dem 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-2.5-sunburst",
    image=open("mockup_v1.png", "rb"),
    mask=open("mask_hero.png", "rb"),
    prompt=(
        "Hero section with a 3D isometric illustration of a kanban board, "
        "title 'Manage Your Projects Simply', blue CTA button, subtle gradient background"
    )
)

with open("mockup_v2.png", "wb") as f:
    f.write(base64.b64decode(response.data[0].b64_json))
print("Mockup v2 mit modifiziertem Hero")

Wo das AI-Prototyping aufhört

Sie müssen sich über den Status dessen klar sein, was Sie hier produzieren. Generierte Mockups sind visuelle Erkundungen, keine Produktionsdateien: Der Text ist gut gerendert, kann aber kleinere Fehler aufweisen, Komponenten sind weder interaktiv noch exportierbar nach Figma, und die Konsistenz über mehrere Bildschirme im selben Benutzerfluss ist nicht garantiert. Ein Designer, der diese Bilder als finale Auslieferung erhält, hätte recht, zu widersprechen.

Ihr Wert liegt anderswo und ist beträchtlich: Sie dienen dazu, eine Richtung zu validieren, bevor in das finale Design investiert wird. Die Wahl zwischen drei Pfaden in einer Stunde statt in drei Tagen, das Ankommen bei einem Kundentermin mit Bildern statt Adjektiven, das Eliminieren einer falschen guten Idee, bevor sie eine Woche Produktion verschlingt – das ist, was AI-Prototyping Ihnen tatsächlich kauft.

Um sich davon zu überzeugen, erstellen Sie Ihr eigenes Projektstart-Tool: ein Skript, das aus einem Brief drei visuelle Richtungen für eine Startseite, ein zugehöriges Moodboard für jede davon und einen vergleichbaren HTML-Katalog generiert, der es Ihnen ermöglicht, sie nebeneinander zu präsentieren.