OpenAI veröffentlicht Prompting-Tipps für Frontend-Designer mit GPT-5.4

OpenAI hat ein paar GPT-Prompting-Tipps für Frontend-Designer, die mit GPT-5.4 UX/UI-Designs generieren möchten.

In einem neuen Leitfaden erklärt das Unternehmen, wie sich das Modell GPT-5.4 gezielt für die Erstellung von Websites und Apps nutzen lässt. Ohne klare Anweisungen erzeuge das Modell jedoch oft generische Designs. OpenAI empfiehlt daher, vorab ein Designsystem mit Farben, Typografie und Layout festzulegen, visuelle Referenzen oder Moodboards mitzugeben und die Seite als Erzählstruktur aufzubauen.

OpenAIs Beispiel-Prompt:

## Frontend tasks

When doing frontend design tasks, avoid generic, overbuilt layouts.

**Use these hard rules:**
- One composition: The first viewport must read as one composition, not a dashboard (unless it's a dashboard).
- 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.
- Brand test: If the first viewport could belong to another brand after removing the nav, the branding is too weak.
- Typography: Use expressive, purposeful fonts and avoid default stacks (Inter, Roboto, Arial, system).
- Background: Don't rely on flat, single-color backgrounds; use gradients, images, or subtle patterns to build atmosphere.
- 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.
- 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.
- No hero overlays: Do not place detached labels, floating badges, promo stickers, info chips, or callout boxes on top of hero media.
- 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.
- One job per section: Each section should have one purpose, one headline, and usually one short supporting sentence.
- 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.
- Reduce clutter: Avoid pill clusters, stat strips, icon rows, boxed promos, schedule snippets, and multiple competing text blocks.
- Use motion to create presence and hierarchy, not noise. Ship at least 2-3 intentional motions for visually led work.
- Color & Look: Choose a clear visual direction; define CSS variables; avoid purple-on-white defaults. No purple bias or dark mode bias.
- Ensure the page loads properly on both desktop and mobile.
- 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.

Exception: If working within an existing website or design system, preserve the established patterns, structure, and visual language.

Zudem solle man mit niedrigem Reasoning-Level starten, da mehr Rechenaufwand nicht immer bessere Ergebnisse liefere. Wichtig sei auch, echte Inhalte statt Platzhaltertexte zu liefern, damit das Modell passendere Strukturen und glaubwürdigere Texte erzeuge. Als Tech-Stack empfiehlt OpenAI React und Tailwind. GPT-5.4 könne zudem über das Tool Playwright seine eigene Arbeit visuell prüfen und Fehler korrigieren.

Ergänzend stellt das Unternehmen einen "Frontend Skill" für seinen Coding-Agenten Codex bereit. Fertige Projekte können in einer Galerie eingereicht werden.

Auch Google hat UX/UI-Designer als Zielgruppe entdeckt: Das neue "Vibe-Design"-Tool Stitch wandelt natürlichsprachliche Beschreibungen in Benutzeroberflächen um. Ein Design-Agent analysiert den gesamten Projektverlauf, kann mehrere Ideen parallel verfolgen, und per Sprachsteuerung lassen sich Echtzeit-Änderungen direkt auf der Leinwand vornehmen. Darüber hinaus hat Google mit A2UI (Agent-to-User Interface) einen offenen Standard unter Apache-2.0-Lizenz vorgestellt, der KI-Agenten das Erstellen grafischer Oberflächen ermöglicht.