Mit GPT-5.4 anspruchsvolles Frontend-Design erstellen

• OpenAI hat praxisnahe Prompting-Techniken und Design-Guides veröffentlicht, um die Frontend-Entwicklungsfähigkeiten von GPT-5.4 zu steigern
• Bildverständnis, funktionale Vollständigkeit und Computer Use sind die zentralen Verbesserungsachsen, wodurch im Vergleich zu früheren Modellen visuell anspruchsvollere und ambitioniertere Ergebnisse möglich werden
• Es wird auf das Problem hingewiesen, dass das Modell bei unklaren Prompts zu hochfrequenten Mustern aus den Trainingsdaten zurückfällt und bei generischem Design stehen bleibt; dazu werden konkrete Techniken zur Überwindung vorgestellt
• Hervorgehoben werden vier zentrale Praxistipps: Definition eines Designsystems, Bereitstellung visueller Referenzen, narrative Strukturierung und das Setzen eines niedrigen Reasoning-Levels
• Ein separates Open-Source-frontend-skill-Prompt-Paket wurde veröffentlicht und kann sofort in Coding-Agenten wie Codex genutzt werden

---

Modellverbesserungen

• GPT-5.4 konzentriert sich bei Frontend-Arbeiten auf drei konkrete Verbesserungen:
  • verbessertes Bildverständnis
  • Erstellung vollständigerer Apps/Websites
  • bessere Nutzung von Tools zur Inspektion, zum Testen und zur Verifikation der eigenen Arbeit

• Bildverständnis und Tool-Nutzung

  • Das Modell wurde darauf trainiert, Bildsuche und Bildgenerierungstools nativ zu verwenden, und kann dadurch im Designprozess direkt visuell schlussfolgern
  • Für bestmögliche Ergebnisse wird empfohlen, das Modell zunächst ein Moodboard oder mehrere visuelle Optionen erzeugen zu lassen, bevor finale Assets ausgewählt werden
  • Durch explizite Beschreibung der Eigenschaften, die ein Bild einfangen soll (Stil, Farbpalette, Komposition, Stimmung), lässt sich das Modell auf starke visuelle Referenzen ausrichten
  • Es wird ein Prompt-Muster vorgestellt, bei dem standardmäßig hochgeladene oder vorab erzeugte Bilder bevorzugt werden und nur dann neue Visuals per Bildgenerierung erstellt werden, wenn keine vorhanden sind

• Verbesserte funktionale Vollständigkeit

  • Das Modell wurde darauf trainiert, vollständigere und funktional belastbare Apps zu entwickeln
  • Es ist bei langfristigen Tasks stabiler und kann Spiele oder komplexe User Experiences, die zuvor nicht möglich waren, in 1–2 Turns umsetzen

• Computer Use und Verifikation

  • GPT-5.4 ist das erste Mainline-Modell, das für Computer Use trainiert wurde, und kann Interfaces nativ erkunden
  • In Kombination mit Playwright kann es gerenderte Seiten prüfen, mehrere Viewports testen, App-Flows durchlaufen und Zustands- sowie Navigationsprobleme erkennen
  • Wenn Playwright-Tools/-Skills bereitgestellt werden, steigt die Wahrscheinlichkeit deutlich, dass GPT-5.4 anspruchsvolle und funktional ausgereifte Interfaces erzeugt
  • Dank des verbesserten Bildverständnisses kann es Ergebnisse visuell verifizieren und prüfen, ob sie mit bereitgestellten Referenz-UIs übereinstimmen

Praxistipps zum Schnellstart

• Wenn nur wenige Maßnahmen übernommen werden sollen, sollte man mit diesen vier beginnen:
  • mit niedrigem Reasoning-Level (low reasoning level) starten
  • Designsystem und Constraints wie Typografie, Farbpalette und Layout vorab definieren
  • visuelle Referenzen oder Moodboards wie Screenshots bereitstellen, um visuelle Leitplanken zu setzen
  • Narrativ oder Content-Strategie vorab definieren, um die Richtung der Content-Erzeugung vorzugeben
• Start-Prompt
  • When doing frontend design tasks, avoid generic, overbuilt layouts.
  • Bei Frontend-Design-Aufgaben generische und überladene Layouts vermeiden
  • Use these hard rules:
  • Die folgenden Hard Rules anwenden:
    • One composition: The first viewport must read as one composition, not a dashboard (unless it's a dashboard).
    • Der erste Viewport muss als eine Komposition lesbar sein, nicht als Dashboard, außer wenn es tatsächlich ein Dashboard ist
    • Brand first: On branded pages, the brand or product name must be a hero-level signal, not just nav text or an eyebrow. No headline should overpower the brand.
    • Auf Brand-Seiten muss der Marken- oder Produktname ein Signal auf Hero-Niveau sein und darf nicht bloß Navigationstext oder Eyebrow sein. Keine Headline darf die Marke überstrahlen
    • Brand test: If the first viewport could belong to another brand after removing the nav, the branding is too weak.
    • Wenn der erste Viewport nach Entfernen der Navigation auch zu einer anderen Marke gehören könnte, ist das Branding zu schwach
    • Typography: Use expressive, purposeful fonts and avoid default stacks (Inter, Roboto, Arial, system).
    • Ausdrucksstarke, gezielt gewählte Fonts verwenden und Default-Stacks (Inter, Roboto, Arial, system) vermeiden
    • Background: Don't rely on flat, single-color backgrounds; use gradients, images, or subtle patterns to build atmosphere.
    • Nicht auf flache einfarbige Hintergründe setzen, sondern mit Verläufen, Bildern oder subtilen Mustern Atmosphäre schaffen
    • Full-bleed hero only: On landing pages and promotional surfaces, the hero image should be a dominant edge-to-edge visual plane or background by default. Do not use inset hero images, side-panel hero images, rounded media cards, tiled collages, or floating image blocks unless the existing design system clearly requires it.
    • Auf Landingpages und Promotion-Flächen sollte das Hero-Bild standardmäßig eine dominante Full-Bleed-(edge-to-edge-)Bildebene oder ein Hintergrund sein. Keine inset Hero-Bilder, Side-Panel-Hero-Bilder, abgerundeten Media-Cards, gekachelten Collagen oder schwebenden Bildblöcke verwenden, sofern das bestehende Designsystem dies nicht ausdrücklich verlangt
    • Hero budget: The first viewport should usually contain only the brand, one headline, one short supporting sentence, one CTA group, and one dominant image. Do not place stats, schedules, event listings, address blocks, promos, "this week" callouts, metadata rows, or secondary marketing content in the first viewport.
    • Der erste Viewport sollte üblicherweise nur die Marke, eine Headline, einen kurzen unterstützenden Satz, eine CTA-Gruppe und ein dominantes Bild enthalten. Statistiken, Zeitpläne, Event-Listen, Adressblöcke, Promos, „this week“-Hinweise, Metadaten-Zeilen oder sekundäre Marketing-Inhalte gehören nicht in den ersten Viewport
    • No hero overlays: Do not place detached labels, floating badges, promo stickers, info chips, or callout boxes on top of hero media.
    • Auf Hero-Medien keine losgelösten Labels, schwebenden Badges, Promo-Sticker, Info-Chips oder Callout-Boxen platzieren
    • Cards: Default: no cards. Never use cards in the hero. Cards are allowed only when they are the container for a user interaction. If removing a border, shadow, background, or radius does not hurt interaction or understanding, it should not be a card.
    • Standardmäßig keine Cards. Im Hero niemals Cards verwenden. Cards sind nur erlaubt, wenn sie der Container für eine User Interaction sind. Wenn das Entfernen von Border, Shadow, Background oder Radius der Interaktion oder dem Verständnis nicht schadet, sollte es keine Card sein
    • One job per section: Each section should have one purpose, one headline, and usually one short supporting sentence.
    • Pro Sektion eine Aufgabe, eine Headline und in der Regel einen kurzen unterstützenden Satz
    • Real visual anchor: Imagery should show the product, place, atmosphere, or context. Decorative gradients and abstract backgrounds do not count as the main visual idea.
    • Bilder sollten Produkt, Ort, Atmosphäre oder Kontext zeigen. Dekorative Verläufe und abstrakte Hintergründe zählen nicht als zentrale visuelle Idee
    • Reduce clutter: Avoid pill clusters, stat strips, icon rows, boxed promos, schedule snippets, and multiple competing text blocks.
    • Pill-Cluster, Statistikleisten, Icon-Reihen, eingerahmte Promos, Termin-Snippets und mehrere miteinander konkurrierende Textblöcke vermeiden
    • Use motion to create presence and hierarchy, not noise. Ship at least 2-3 intentional motions for visually led work.
    • Motion einsetzen, um Präsenz und Hierarchie zu schaffen, nicht als Rauschen. Bei visuell geprägten Arbeiten mindestens 2–3 bewusst eingesetzte Motion-Elemente umsetzen
    • Color & Look: Choose a clear visual direction; define CSS variables; avoid purple-on-white defaults. No purple bias or dark mode bias.
    • Eine klare visuelle Richtung wählen, CSS-Variablen definieren, Purple-on-White-Defaults vermeiden. Kein Purple-Bias und kein Dark-Mode-Bias
    • Ensure the page loads properly on both desktop and mobile.
    • Sicherstellen, dass die Seite sowohl auf Desktop als auch mobil korrekt lädt
    • For React code, prefer modern patterns including useEffectEvent, startTransition, and useDeferredValue when appropriate if used by the team. Do not add useMemo/useCallback by default unless already used; follow the repo's React Compiler guidance.
    • In React-Code moderne Patterns wie useEffectEvent, startTransition und useDeferredValue bevorzugen, wenn das Team sie nutzt und sie passend sind. useMemo/useCallback nicht standardmäßig hinzufügen, sofern sie nicht bereits verwendet werden; den React-Compiler-Guidelines des Repos folgen
    • Exception: If working within an existing website or design system, preserve the established patterns, structure, and visual language.
    • Ausnahme: Wenn innerhalb einer bestehenden Website oder eines Designsystems gearbeitet wird, etablierte Patterns, Struktur und visuelle Sprache beibehalten

Techniken für besseres Design

• Mit Designprinzipien beginnen

  • Constraints definieren wie eine H1-Headline, maximal 6 Sektionen, maximal 2 Schriftarten, eine Akzentfarbe oder eine primäre CTA oberhalb des Folds

• Visuelle Referenzen bereitstellen

  • Referenz-Screenshots oder Moodboards helfen dabei, Layoutrhythmus, Typografie-Skalierung, Spacing-System und Bildbehandlung abzuleiten
  • Enthalten ist auch ein Beispiel, in dem GPT-5.4 selbst ein Moodboard erzeugt (inspiriert von New Yorker Kaffeekultur und Y2K-Ästhetik)

• Die Seite als Narrativ strukturieren

  • Typische Struktur einer Marketing-Seite:
    • Hero — setzt Identität und Versprechen
    • Supporting imagery — zeigt Kontext oder Umgebung
    • Product detail — erklärt das Angebot
    • Social proof — schafft Glaubwürdigkeit
    • Final CTA — wandelt Interesse in Handlung um

• Einhaltung des Designsystems anweisen

  • Früh im Build-Prozess die Etablierung eines klaren Designsystems fördern
  • Zentrale Design-Tokens definieren: background, surface, primary text, muted text, accent
  • Typografie-Rollen definieren: display, headline, body, caption
  • Für die meisten Webprojekte ist es effektiv, mit einem React- und Tailwind-Stack zu starten, wobei GPT-5.4 mit diesen Tools besonders stark performt
  • Bei Animationen, Overlays und dekorativen Layern wird empfohlen, Guidelines für ein sicheres Layoutverhalten mitzugeben, damit fixierte oder schwebende UI-Elemente nicht mit zentralen Inhalten wie Text oder Buttons kollidieren

• Reasoning-Level senken

  • Bei einfachen Websites ist mehr Reasoning nicht immer besser
  • Niedrige (low) und mittlere (medium) Reasoning-Levels liefern oft stärkere Frontend-Ergebnisse
  • Das Modell bleibt schnell und fokussiert, denkt weniger über und behält gleichzeitig Spielraum für ambitionierteres Design

• Designbasis mit realen Inhalten schaffen

  • Echte Copy, Produktkontext und klare Projektziele bereitzustellen ist eine der einfachsten Methoden, um Frontend-Ergebnisse zu verbessern
  • Dieser Kontext hilft bei der Wahl der richtigen Sitestruktur, beim Aufbau klarerer narrativer Sektionen und beim Schreiben überzeugenderer Botschaften statt generischer Platzhalter

Frontend-Skill-Prompt-Paket

• Um die Nutzung von GPT-5.4 für allgemeine Frontend-Tasks zu unterstützen, wurde das dedizierte [frontend-skill](https://github.com/openai/skills/…) auf GitHub veröffentlicht
• Es liefert starke Guidelines zu Struktur, Geschmack und Interaktionsmustern, sodass standardmäßig anspruchsvollere, bewusstere und angenehmere Designs entstehen
• In der Codex-App kann es mit dem Befehl $skill-installer frontend-skill installiert werden

• Kernstruktur von Frontend Skill

  • Working Model: Vor dem Build zuerst drei Dinge ausarbeiten — visuelle These (Stimmung, Materialität, Energie), Content-Plan (Hero, Support, Detail, Final CTA) und Interaktions-These (2–3 Motion-Ideen)
  • Beautiful Defaults: Mit Komposition beginnen, nicht mit Komponenten. Full-Bleed-Hero bevorzugen, Marken-/Produktnamen als größten Text setzen, Copy so schreiben, dass sie in wenigen Sekunden scanbar ist, card-lose Layouts als Standard
  • Standardsquenz für Landingpages: Hero → Support → Detail → Final CTA
    • Hero-Regeln: eine Komposition, Full-Bleed-Bild, Marke zuerst, keine Cards, Statistikleisten oder Logo-Clouds im Hero
    • Viewport-Budget: Wenn es einen fixierten Header gibt, müssen Hero und Header zusammen in den initialen Viewport passen
  • Apps: Standardmäßig Linear-artige Zurückhaltung — ruhige Surface-Hierarchie, starke Typografie und Spacing, wenig Farbe, Cards nur für Interaktionen
  • Imagery: Bilder sollen eine narrative Funktion haben; gegenüber abstrakten Verläufen oder künstlichen 3D-Objekten werden realitätsnahe Fotos bevorzugt. Im ersten Viewport ist ein echter visueller Anker Pflicht
  • Copy: In Produktsprache schreiben, nicht als Design-Kommentar. Die Headline soll Bedeutung transportieren; wenn die Seite besser wird, nachdem 30 % der Copy gelöscht wurden, weiter kürzen
  • Utility Copy: In Dashboards, Apps und Admin-Tools standardmäßig Utility Copy statt Marketing-Copy — Richtung, Status und Aktion zuerst
  • Motion: Motion für Präsenz und Hierarchie, nicht als Rauschen. Mindestens 2–3 bewusste Motion-Elemente umsetzen, etwa Hero-Entrance-Sequenzen, scrollgebundene Effekte oder Hover-/Reveal-Transitions. Framer Motion wird bevorzugt
  • Hard Rules: Standardmäßig keine Cards, pro Sektion eine dominante Idee, nicht mehr als 2 Schriftarten, nicht mehr als 1 Akzentfarbe, keine Fülltext-Copy
  • Litmus Checks: Prüfen, ob die Marke auf dem ersten Screen klar ist, ob es einen starken visuellen Anker gibt, ob die Seite allein über die Headline verständlich ist, ob jede Sektion nur eine Rolle erfüllt, ob Cards wirklich nötig sind und ob Motion die Hierarchie verbessert

Beispielergebnisse

• Mit Frontend Skill erzeugte Beispiele werden in drei Kategorien gezeigt: Landingpages, Spiele und Dashboards (jeweils mit mehreren Video-Demos)

Kernaussagen

• GPT-5.4 kann hochwertige Frontend-Interfaces erzeugen, wenn der Prompt klare Design-Constraints, visuelle Referenzen, ein strukturiertes Narrativ und ein definiertes Designsystem enthält
• Vollständig nur mit GPT-5.4 in Coding-Agenten wie Codex erzeugte Projekte können zur Präsentation in der OpenAI-Galerie eingereicht werden