GPT-5.4 Delightful Frontends

Base the work on the OpenAI guide "Designing delightful frontends with GPT-5.4". Use it to push the model away from generic SaaS layouts and toward deliberate, polished interfaces.

Start With a Brief

Write these six items before building:

1. Visual thesis — one sentence for mood, material, palette, and energy.
2. Design system — typography, accent color, surfaces, spacing tone, border radius, shadow policy.
3. Content plan — hero, support, detail, proof, final CTA.
4. Imagery plan — what the main visual must show and whether uploaded images already exist.
5. Interaction thesis — 2-3 motions that improve hierarchy or presence.
6. Verification targets — desktop width, mobile width, key flows, and what must be true in the first viewport.

If the prompt is underspecified, fill the missing pieces explicitly before coding. Do not start from components. Start from composition.

For a reusable scaffold, read references/brief-template.md.

Build in This Order

1. Define the first viewport as one composition.
2. Lock the brand/product signal so it is unmistakable without relying on the nav.
3. Establish the dominant visual anchor.
4. Write short, believable copy that supports the visual.
5. Add supporting sections with one job each.
6. Add 2-3 intentional motions.
7. Verify on desktop and mobile, then refine.

Default to low or medium reasoning first for straightforward frontend work. Increase reasoning only when the task is structurally complex.

Enforce These Design Rules

First viewport

• Treat the first viewport like a poster, not a dashboard.
• Keep one headline, one short supporting sentence, one CTA group, and one dominant image or visual plane.
• Do not pack stats, logos, schedules, promos, metadata strips, or floating callouts into the hero by default.
• Make branded pages feel branded even if the navigation is hidden.

Visual hierarchy

• Make the brand or product name a hero-level signal.
• Prefer full-bleed or dominant imagery on landing pages.
• Use real-looking imagery that carries narrative weight.
• Use gradients, texture, photography, or subtle patterns to create atmosphere instead of a flat default background.

Layout discipline

• Give each section one purpose, one headline, and usually one short supporting sentence.
• Default to cardless layouts.
• Allow cards only when the card itself is the interaction container.
• Remove chrome that does not improve understanding or interaction.
• Avoid pill clusters, busy stat strips, icon soup, and repeated mood sections.

Typography and color

• Pick expressive fonts with intent.
• Avoid default-looking stacks unless the repo or design system already requires them.
• Limit the system: usually two typefaces max and one accent color.
• Define design tokens early with CSS variables or theme tokens.
• Avoid generic purple-on-white defaults unless the brand truly calls for that direction.

Copy

• Write product copy, not design commentary.
• Keep copy short enough to scan quickly.
• Ground the page in real context, not placeholder promises.
• Cut repetition aggressively.

Motion

• Ship at least 2-3 intentional motions for visually led work.
• Use motion to create hierarchy, depth, reveal, or affordance.
• Keep motion smooth, fast, and visible in a quick recording.
• Remove motion that exists only as decoration.

Handle Imagery Correctly

• Use uploaded or user-provided images first.
• If no imagery exists, generate a moodboard or several candidate directions before locking the final visual style.
• Prefer original/generated imagery over random web-image linking unless the user explicitly asks for external references.
• Choose imagery with a calm tonal area for text when overlaying copy.
• Reject images with embedded signage, cluttered typography, or fake UI frames fighting the interface.

Adapt by Surface

Landing pages

Default sequence:

1. Hero
2. One support section
3. One detail/story section
4. One credibility/proof section when needed
5. Final CTA

Prefer a dominant hero image or full-canvas visual plane. Avoid inset hero cards and dashboard-like mosaics.

Product/app UI

Default to restrained product surfaces:

• strong typography
• calm hierarchy
• few colors
• dense but readable information
• minimal chrome

Organize around workspace, navigation, secondary context, and one clear action accent. Do not force a marketing hero into product UI unless the user asks for it.

Verify, Then Refine

Use browser inspection or screenshot-based review when available. Prefer Playwright or an equivalent browser tool for visual QA.

Check:

• desktop and mobile both load cleanly
• fixed or floating layers do not overlap critical content
• the first viewport has one strong visual idea
• the brand is unmistakable
• cards are truly necessary
• motion improves the page
• text remains legible over imagery

For the detailed pass, read references/verification-checklist.md.

Quick Failure Tests

Reject the result and iterate if any of these are true:

• The first screen looks like a generic SaaS card grid.
• The image is pretty but the brand disappears.
• The headline is strong but there is no clear action.
• Multiple sections repeat the same mood statement.
• Decorative layers interfere with readability.
• The page feels premium only because of shadows and glass effects.

Output Style

When delivering implementation work, include:

• the chosen visual thesis
• the section narrative
• the imagery direction
• the motion plan
• what was verified on desktop and mobile

Keep the explanation short. Let the work carry the weight.