๐๐ฃ๐ง-๐ฑ.๐ฐ ๐ฐ๐ฎ๐ป ๐ฏ๐๐ถ๐น๐ฑ ๐ฏ๐ฒ๐ฎ๐๐๐ถ๐ณ๐๐น ๐ณ๐ฟ๐ผ๐ป๐๐ฒ๐ป๐ฑ๐. ๐๐๐ ๐ผ๐ป๐น๐ ๐ถ๐ณ ๐๐ผ๐ ๐ธ๐ป๐ผ๐ ๐ต๐ผ๐ ๐๐ผ ๐ฎ๐๐ธ.
Better output starts with tighter constraints, visual references, and real content.
Here's how to build intentional frontends with GPT-5.4.
๐ช๐ต๐ ๐๐ฃ๐ง-๐ฑ.๐ฐ ๐ฑ๐ฒ๐ณ๐ฎ๐๐น๐๐ ๐๐ผ ๐ด๐ฒ๐ป๐ฒ๐ฟ๐ถ๐ฐ
Without specific guidance, every model defaults to the most common patterns it saw during training.
Generic card grids. Weak visual hierarchies. Safe, forgettable layouts.
GPT-5.4 is significantly better at frontend work.
It generates more visually ambitious UIs, understands images natively, and can use tools like Playwright to verify and refine its own output.
But it still needs direction. The model is only as intentional as your prompt.
๐ฆ๐๐ฎ๐ฟ๐ ๐ต๐ฒ๐ฟ๐ฒ: ๐ฐ ๐ณ๐ผ๐๐ป๐ฑ๐ฎ๐๐ถ๐ผ๐ป๐
โ Set reasoning to low or medium Counterintuitive, but it leads to stronger results. Keeps the model fast and focused.
โ Define your design system upfront Typography, color palette, layout rules. Before any code.
โ Provide visual references A screenshot, a mood board, anything. The model infers rhythm, spacing, and scale from images.
โ Give it real content Real copy, real product context. Placeholder text produces placeholder thinking.
๐๐ฒ๐๐ถ๐ด๐ป ๐ฟ๐๐น๐ฒ๐ ๐๐ต๐ฎ๐ ๐ฎ๐ฐ๐๐๐ฎ๐น๐น๐ ๐๐ผ๐ฟ๐ธ
Constrain the model hard. OpenAI's own starter prompt includes rules like:
โ One composition โ the first viewport must read as a single composition
โ No cards in the hero. Ever.
โ Brand first โ the product name must be hero-level on branded pages
โ Full-bleed hero by default on landing pages
โ Two typefaces max. One accent color.
โ One job per section. One purpose. One takeaway.
Litmus check: if you remove the hero image and the page still works, the image was too weak.
๐ฆ๐๐ฟ๐๐ฐ๐๐๐ฟ๐ฒ ๐๐ต๐ฒ ๐ฝ๐ฎ๐ด๐ฒ ๐ฎ๐ ๐ฎ ๐ป๐ฎ๐ฟ๐ฟ๐ฎ๐๐ถ๐๐ฒ
Before you build, write three things:
โ Visual thesis โ one sentence on the mood and energy
โ Content plan โ hero, support, detail, final CTA
โ Interaction thesis โ 2-3 motion ideas
Then follow this sequence:
1. Hero โ establish identity and promise
2. Supporting imagery โ show context
3. Product detail โ explain the offering
4. Social proof โ build credibility
5. Final CTA โ convert
Each section gets one job. If a section is trying to do two things, cut one.
๐๐ฝ๐ฝ๐ ๐๐ ๐น๐ฎ๐ป๐ฑ๐ถ๐ป๐ด ๐ฝ๐ฎ๐ด๐ฒ๐
For apps and dashboards, different rules apply. Default to Linear-style restraint:
โ Calm surface hierarchy
โ Strong typography and spacing
โ Few colors
โ Dense but readable information
โ Cards only when the card IS the interaction
Avoid dashboard-card mosaics, thick borders on every region, decorative gradients, multiple competing accent colors.
Litmus check: if an operator scans only headings, labels, and numbers โ can they understand the page immediately?
๐ ๐ผ๐๐ถ๐ผ๐ป: ๐๐ต๐ถ๐ฝ ๐ฎ-๐ฏ, ๐ป๐ผ๐ ๐ญ๐ฌ
Motion creates presence and hierarchy. Not noise.
Pick three intentional motions and commit to them:
โ One entrance sequence in the hero
โ One scroll-linked or sticky effect
โ One hover, reveal, or layout transition
Framer Motion is the recommended stack. If a motion is only decorative, remove it.
๐ง๐ต๐ฒ ๐ณ๐ฟ๐ผ๐ป๐๐ฒ๐ป๐ฑ ๐๐ธ๐ถ๐น๐น
OpenAI released an open-source skill that encodes all of this into one reusable prompt layer.
Install it with:
$skill-installer frontend-skill
It forces the model to define a visual thesis, content plan, and interaction thesis before touching any code. Worth running before your next build.
๐ง๐น๐ฑ๐ฟ
GPT-5.4 can generate genuinely good frontends. But only when you:
โ Constrain the layout system upfront
โ Give it visual references to work from
โ Structure the page as a narrative, not a document
โ Use real content, not placeholders
โ Keep reasoning low or medium
The model is capable. The prompt is the design brief.
What's the first thing you're building with it? ๐
Full article here: https://developers.openai.com/blog/designing-delightful-frontends-with-gpt-5-4