If you build interfaces, make pet projects, or just love vibecoding in the browser — this is awesome. Speaking from personal experience and pain from the janky layouts that models sometimes produce without proper context.
Bookmark this:
https://developers.openai.com/blog/designing-delightful-frontends-with-gpt-5-4
Below is my summary of the key rules. So you can skip the full read and start applying right away.
---
What is New in GPT-5.4 for Frontend
Three specific improvements that change the workflow:
- **Image understanding.** The model works with images at every stage: from mood board to final result. You can ask it to generate visual options, pick the best one, and use it.
- **Completeness.** Previously the model often gave up halfway. Now it delivers more complete apps in 1-2 iterations.
- **Self-verification.** GPT-5.4 is the first model trained on computer use. It can run Playwright, look at the result, and fix bugs on its own.
---
4 Key Rules (Quick Start)
If you take just four things from the guide:
1. Start with low reasoning. For simple sites, less thinking means better results. The model does not overcomplicate.
2. Define your design system upfront. Typography, palette, layout — all before the first prompt.
3. Provide a visual reference. Screenshot, mood board, sketch — anything. The model reads rhythm, scale, and style.
4. Set the narrative. Not "make a landing page" but "tell a story: hero, proof, CTA."
---
Hard Rules: Strict Constraints
OpenAI recommends putting these in your system prompt:
- **One screen = one composition.** The first viewport should read as a poster, not a dashboard.
- **Brand is the main element.** If you remove the nav and the first screen could belong to another brand — the hierarchy is too weak.
- **Typography — not Inter.** Use expressive fonts. Avoid default stacks (Inter, Roboto, Arial, system).
- **Background — not a flat color.** Gradients, patterns, images — anything is better than a solid fill.
- **Full-bleed hero.** Edge-to-edge image by default. Not inset, not side-panel, not a rounded card.
- **Hero budget:** brand + one headline + one sentence + one CTA + one image. That is it. No stats, schedules, or promo blocks.
- **No cards by default.** Cards only if they are the container for interaction. If removing border, shadow, and radius changes nothing — it is not a card.
- **One job per section.** One headline, one supporting sentence, one purpose.
- **No more than two typefaces.** No more than one accent color.
- **No purple by default.** No purple-on-white and no dark mode bias.
---
Landing Page Structure
OpenAI suggests thinking about a page as a narrative:
1. Hero — identity and promise
2. Support — one concrete feature, offer, or proof point
3. Detail — atmosphere, workflow, product depth
4. Final CTA — conversion
Validation rule: if you remove the image from the hero and the page still works — the image is too weak.
---
Motion: 2-3 Intentional Movements
Not noise — hierarchy:
- **One entrance animation** in the hero
- **One scroll effect** (sticky, parallax, fade)
- **One hover/reveal** to sharpen affordance
Rules: noticeable in a quick screen recording, smooth on mobile, fast, restrained, consistent. If the animation is decorative — remove it.
---
UI Copywriting
- Write in product language, not design commentary.
- The headline carries the meaning. Subheading — one short sentence.
- If deleting 30% of the copy makes the page better — keep deleting.
- For dashboards and apps: no hero sections or marketing slogans. Only status, action, orientation.
---
Pre-Ship Checklist
- Is the brand unmistakable in the first screen?
- Is there a strong visual anchor?
- Can the page be understood by scanning headlines only?
- Does each section have one job?
- Are cards actually necessary?
- Does motion improve hierarchy?
- Would the design still feel premium if all decorative shadows were removed?
---
🛠 Open-Source Skill: Design Brief Generator
Based on this guide, I built an open-source skill that generates a design brief following OpenAI rules — with tokens, typography, anti-patterns, and structure. It asks 4 questions and outputs a ready-to-use 100+ line prompt (design.md).
Copy-paste it into Lovable (Stitch, v0, etc.) and you get design, not a template.
Still tweaking it. But already usable.