記事一覧へ
GPT-5.4は美しいフロントエンドを構築できます。ただし、正しい聞き方を知っている場合に限ります。
より良いアウトプットは、より厳しい制約、ビジュアルリファレンス、本物のコンテンツから始まります。GPT-5.4で意図的なフロントエンドを構築する方法をご紹介します。
## なぜGPT-5.4はデフォルトで汎用的になるのか
具体的な指示なしに、すべてのモデルはトレーニング中に最も多く見たパターンにデフォルトします。
汎用的なカードグリッド、弱いビジュアル階層、無難で印象に残らないレイアウト。
GPT-5.4はフロントエンドの作業において大幅に優れています。より視覚的に野心的なUIを生成し、画像をネイティブに理解し、Playwrightのようなツールを使って自分のアウトプットを確認・改良できます。
しかし、まだ方向性が必要です。モデルはプロンプトと同じくらいの意図性しか持てません。
## まずここから：4つの基礎
→ 推論をローまたはミディアムに設定する
直感に反しますが、より強い結果につながります。モデルを速く、集中した状態に保ちます。
→ デザインシステムを最初に定義する
タイポグラフィ、カラーパレット、レイアウトルール。コードを書く前に。
→ ビジュアルリファレンスを提供する
スクリーンショット、ムードボード、何でも。モデルは画像からリズム、スペーシング、スケールを推測します。
→ 本物のコンテンツを与える
本物のコピー、本物のプロダクトのコンテキスト。プレースホルダーテキストはプレースホルダー思考を生み出します。
## 実際に機能するデザインルール
モデルを厳しく制約してください。OpenAI独自のスタータープロンプトには以下のようなルールが含まれています：
→ 1つのコンポジション — 最初のビューポートは1つのコンポジションとして読まれなければならない
→ ヒーローにカードは使わない。絶対に。
→ ブランドファースト — プロダクト名はブランドページでヒーローレベルでなければならない
→ ランディングページではデフォルトでフルブリードのヒーロー
→ フォントは最大2種類。アクセントカラーは1色。
→ セクションごとに1つの役割。1つの目的。1つのテイクアウェイ。
リトマス確認：ヒーロー画像を取り除いてもページが機能するなら、その画像は弱すぎる。
## ページをナラティブとして構造化する
構築を始める前に、3つのことを書いてください：
→ ビジュアルテーゼ — ムードとエネルギーについての1文
→ コンテンツプラン — ヒーロー、サポート、詳細、最終CTA
→ インタラクションテーゼ — 2〜3つのモーションのアイデア
次にこのシーケンスに従ってください：
1. ヒーロー — アイデンティティと約束を確立
2. サポート画像 — コンテキストを見せる
3. プロダクト詳細 — 提供物を説明
4. ソーシャルプルーフ — 信頼性を構築
5. 最終CTA — コンバージョン
各セクションは1つの役割を担います。セクションが2つのことをしようとしているなら、1つを削除してください。
## アプリ対ランディングページ
アプリとダッシュボードには異なるルールが適用されます。Linearスタイルの抑制をデフォルトにしてください：
→ 落ち着いたサーフェス階層
→ 強いタイポグラフィとスペーシング
→ 少ない色
→ 密集しているが読みやすい情報
→ カードがインタラクションそのものである場合のみカードを使う
避けるべきもの：ダッシュボードカードモザイク、各領域の太いボーダー、装飾的なグラデーション、複数の競合するアクセントカラー。
リトマス確認：オペレーターが見出し、ラベル、数字だけをスキャンしたとき、ページをすぐに理解できるか？
## モーション：2〜3個を出荷、10個ではなく
モーションはプレゼンスと階層を生み出します。ノイズではなく。
3つの意図的なモーションを選んでコミットしてください：
→ ヒーローでの1つのエントランスシーケンス
→ 1つのスクロールリンクまたはスティッキーエフェクト
→ 1つのホバー、リビール、またはレイアウトトランジション
Framer Motionが推奨スタックです。モーションが装飾的なだけなら、削除してください。
## フロントエンドスキル
OpenAIはこのすべてを1つの再利用可能なプロンプトレイヤーにエンコードするオープンソースのスキルをリリースしました。
以下でインストール：
`-installer frontend-skill`
コードに触れる前に、ビジュアルテーゼ、コンテンツプラン、インタラクションテーゼを定義することをモデルに強制します。次のビルドの前に実行する価値があります。
## まとめ
GPT-5.4は本当に良いフロントエンドを生成できます。ただし以下の場合に限ります：
→ レイアウトシステムを最初に制約する
→ 作業するためのビジュアルリファレンスを与える
→ ページをドキュメントではなくナラティブとして構造化する
→ プレースホルダーではなく本物のコンテンツを使う
→ 推論をローまたはミディアムに保つ
モデルは有能です。プロンプトがデザインブリーフです。
最初に何を構築しますか？ 👇
全文記事はこちら：
https://developers.openai.com/blog/designing-delightful-frontends-with-gpt-5-4
claude-workflowharness-designdesignuicodex
Codexで驚くほど美しいUIを作る方法
♥ 2,284↻ 164
原文を表示 / Show original
𝗚𝗣𝗧-𝟱.𝟰 𝗰𝗮𝗻 𝗯𝘂𝗶𝗹𝗱 𝗯𝗲𝗮𝘂𝘁𝗶𝗳𝘂𝗹 𝗳𝗿𝗼𝗻𝘁𝗲𝗻𝗱𝘀. 𝗕𝘂𝘁 𝗼𝗻𝗹𝘆 𝗶𝗳 𝘆𝗼𝘂 𝗸𝗻𝗼𝘄 𝗵𝗼𝘄 𝘁𝗼 𝗮𝘀𝗸.
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