使用 GPT-5.4 设计令人愉悦的前端

原文

原文：Designing delightful frontends with GPT-5.4 — OpenAI Developers Blog, 2026-03-20

作者：Brian Fioca, Alistair Gillespie, Kevin Leneway, Robert Tinn

GPT-5.4 是目前最强的 AI 前端开发者。OpenAI 在训练中专门强化了 UI 能力 和 图像运用，使其能生成包含精致细节、流畅交互和优美视觉的生产级前端。

但「能力强」不等于「开箱即用」。当 Prompt 过于模糊时，模型会回落到训练数据中高频但平庸的模式——功能可用，但视觉层次薄弱、结构泛化、与你脑海中的画面相去甚远。

本文系统拆解 OpenAI 官方博客中的核心技术与实操方法，帮助你精准引导 GPT-5.4 输出你真正想要的设计。

一、模型层面的三大进化

GPT-5.4 在前端维度聚焦于三项实质性提升：

1. 原生图像理解与工具调用

GPT-5.4 被训练为可以 原生使用图像搜索和图像生成工具，将视觉推理直接融入设计流程。

最佳实践：

先让模型生成 Mood Board（情绪板）或多个视觉方案，再选择最终素材
明确描述图像应捕捉的属性：风格、色板、构图、氛围
在 Prompt 中引导模型复用已生成的图像、调用图像生成工具、或引用特定外部图片

💡 下方视频展示了 GPT-5.4 在 Codex 中自动生成的 Mood Board 示例，灵感来自纽约咖啡文化与 Y2K 美学：

（Mood Board — NYC coffee culture × Y2K aesthetics，由 GPT-5.4 在 Codex 中生成）

2. 功能完整性大幅提升

模型在 长周期任务 上更加可靠。过去需要多轮反复修补的复杂用户体验——游戏、多状态工作流——现在一到两轮即可完成。

3. Computer Use + 自我验证

GPT-5.4 是 OpenAI 首个主线模型训练了 Computer Use 能力。它能原生操控界面，配合 Playwright 等工具：

检查渲染页面
测试多种视口
遍历应用流程
检测状态与导航问题
视觉验证 输出是否匹配参考 UI

OpenAI — Computer Use & Frontend UI with GPT-5.4 Thinking

观看 GPT-5.4 发布视频了解这些能力的实际演示。

二、快速起步：4 条核心原则

如果你只采纳本文的少数几条建议，从这里开始：

选择低推理等级（Low reasoning）起步
预先定义设计系统和约束：排版、色板、布局
提供视觉参考或 Mood Board：附截图，为模型提供视觉护栏
预先定义叙事或内容策略：引导模型的内容生成方向

三、Starter Prompt — 前端硬规则

以下是 OpenAI 推荐的起步 Prompt，直接约束模型避开常见陷阱：

Text

## 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.
- Brand first: Brand or product name must be a hero-level signal, not just nav text.
- Brand test: If the first viewport could belong to another brand after removing the nav, branding is too weak.
- Typography: Use expressive, purposeful fonts. Avoid default stacks (Inter, Roboto, Arial, system).
- Background: Don't rely on flat, single-color backgrounds; use gradients, images, or subtle patterns.
- Full-bleed hero only: Hero image should be a dominant edge-to-edge visual plane by default.
- Hero budget: First viewport = brand + one headline + one short sentence + one CTA group + one dominant image. Nothing else.
- No hero overlays: No detached labels, floating badges, promo stickers, info chips.
- Cards: Default = no cards. Never use cards in the hero. Cards only when they ARE the interaction.
- One job per section: Each section = one purpose, one headline, one short sentence.
- Real visual anchor: Imagery must show product, place, atmosphere, or context.
- Reduce clutter: No pill clusters, stat strips, icon rows, boxed promos.
- Motion: Create presence and hierarchy, not noise. Ship 2-3 intentional motions.
- Color & Look: Clear visual direction; define CSS variables; no purple-on-white defaults.
- Responsive: Ensure proper desktop and mobile rendering.
- React: Prefer modern patterns (useEffectEvent, startTransition, useDeferredValue).

Exception: If working within an existing design system, preserve established patterns.

核心思想：每条规则都在对抗模型的「默认平庸」——卡片堆砌、视觉层次不清、品牌存在感弱、首屏信息过载。

对应的中文版本 Prompt 如下：

Text

## 前端任务（Frontend tasks）

在进行前端设计任务时，避免通用化、过度堆砌的布局。

**请遵循以下硬性规则：**
- 单一构图：首屏必须作为一个整体被感知，而不是类似仪表盘的拼接。
- 品牌优先：品牌或产品名称必须是“英雄级”视觉信号，而不仅仅是导航中的文字。
- 品牌测试：如果移除导航后首屏看起来仍可属于其他品牌，则说明品牌表达过弱。
- 排版：使用有表现力、有目的性的字体。避免默认字体栈（Inter、Roboto、Arial、system）。
- 背景：不要依赖纯色背景；应使用渐变、图片或细微纹理。
- 全幅首屏：默认使用铺满边界（edge-to-edge）的主视觉（Hero Image）。
- 首屏预算：首屏仅包含 = 品牌 + 一个主标题 + 一句简短说明 + 一个 CTA 组 + 一个主视觉。不要添加其他元素。
- 禁止首屏叠加层：不要使用悬浮标签、徽章、促销贴纸或信息小块。
- 卡片：默认不使用卡片。首屏绝不能用卡片。只有在“卡片本身就是交互”的情况下才可使用。
- 单区块单职责：每个区块只承载一个目标、一个标题、一句简述。
- 真实视觉锚点：图像必须体现产品、场景、氛围或上下文。
- 减少杂乱：避免 pill 标签组、数据条、图标行、盒式促销块。
- 动效：用于建立存在感和层级，而不是制造噪音。控制在 2–3 个有意图的动效。
- 色彩与视觉：明确视觉方向；定义 CSS 变量；避免默认的“白底紫色”风格。
- 响应式：确保桌面端与移动端均有良好呈现。
- React：优先使用现代模式（useEffectEvent、startTransition、useDeferredValue）。

例外：如果是在既有设计系统中开发，应优先遵循其既定规范。

四、进阶设计技术

4.1 从设计原则出发

在动手之前，先定义约束：

一个 H1 标题
不超过 6 个 Section
最多 2 种字体
1 个强调色
1 个主 CTA 在首屏之上

4.2 提供视觉参考

截图或 Mood Board 帮助模型推断：

布局节奏
排版比例
间距系统
图像处理手法

4.3 将页面结构化为叙事

典型营销页面的叙事结构：

序号	Section	职责
1	Hero	建立身份与承诺
2	Supporting imagery	展示上下文或环境
3	Product detail	解释产品/服务
4	Social proof	建立可信度
5	Final CTA	将兴趣转化为行动

4.4 指导设计系统遵从

鼓励模型在构建早期建立清晰的设计系统：

设计 Token：

background / surface / primary text / muted text / accent

排版角色：

display / headline / body / caption

推荐技术栈：React + Tailwind — GPT-5.4 在这个组合上表现尤为突出。

处理动画与浮层的安全指导：

Text

Keep fixed or floating UI elements from overlapping text, buttons, or other key content
across screen sizes. Place them in safe areas, behind primary content where appropriate,
and maintain sufficient spacing.

4.5 降低推理等级

推理等级建议

对于简单网站，更多推理 ≠ 更好结果。实践中，Low 和 Medium 推理等级 往往产出更强的前端效果——模型更快、更专注、不易过度设计。为更复杂的设计留出升档空间即可。

4.6 用真实内容锚定设计

提供真实文案、产品上下文或明确项目目标，是提升前端质量最简单的方式。真实上下文帮助模型：

选择正确的站点结构
塑造更清晰的段落叙事
生成可信的文案，而非泛化的占位符

五、Frontend Skill — 一键激活设计品味

OpenAI 发布了专用的 frontend-skill，为模型注入更强的结构、品味和交互指导。

安装方式

在 Codex App 中运行：

Bash

$skill-installer frontend-skill

Skill 核心框架

Working Model — 动手前先写三件事
- Visual thesis：一句话描述情绪、材质和能量
- Content plan：Hero → Support → Detail → Final CTA
- Interaction thesis：2-3 个改变页面感受的动效创意
每个 Section 一个职责、一个主视觉、一个核心要点或行动。
Beautiful Defaults — 优美的默认值
- 从构图开始，而非组件
- 首选全出血 Hero 或全画布视觉锚点
- 品牌/产品名 = 最响亮的文字
- 文案短到可以秒扫
- 先用留白、对齐、缩放、裁切、对比度，再考虑装饰
- 系统限制：最多 2 种字体，默认 1 个强调色
- 默认无卡片布局
- 把首屏当海报，不是文档
Landing Page 规则

默认序列：
1. Hero：品牌/产品 + 承诺 + CTA + 一个主视觉
2. Support：一个具体特性、优惠或证明点
3. Detail：氛围、工作流、产品深度或故事
4. Final CTA：转化、开始、访问或联系
Hero 硬规则：
- 仅一个构图
- 全出血图像或主视觉平面
- 品牌第一 → 标题第二 → 正文第三 → CTA 第四
- 无 Hero 卡片、数据条、Logo 云、标签丛
- 标题桌面端 ≈ 2-3 行，移动端一眼可读
- 图像上方文字必须保持强对比度和清晰点击目标
检验标准：
- 删掉图像后首屏仍然成立 → 图像太弱
- 隐藏导航后品牌消失 → 层次太弱
App UI 规则 — Linear 风格的克制
- 平静的表面层次
- 强排版和间距
- 少量颜色
- 信息密集但可读
- 最小化装饰
- 卡片仅当它就是交互本身
避免：
- 仪表盘卡片马赛克
- 每个区域的粗边框
- 常规产品 UI 背后的装饰性渐变
- 多个竞争的强调色
- 不改善扫描效率的装饰图标
Imagery — 图像必须承担叙事
- 品牌/场所/编辑/生活方式产品 → 至少一张强真实感图像
- 优先实景摄影 > 抽象渐变 / 伪 3D
- 选择或裁切有稳定色调区域的图像以放置文字
- 不生成内嵌 UI 框架、分割、卡片或面板的图像
- 需要多个场景时用多张图，不用拼贴
Copy — 文案精简法则
- 用产品语言写作，非设计评论
- 让标题承载意义
- 辅助文案通常一句话
- 削减 Section 间的重复
- 不将 Prompt 语言或设计评论写入 UI
- 每个 Section 一个职责：解释、证明、深化或转化
如果删掉 30% 文案页面变好了，就继续删。
Motion — 动效创造存在感，而非噪音

至少交付 2-3 个有意图的动效：
- Hero 入场序列
- 滚动联动 / 粘性 / 深度效果
- 悬停 / 揭示 / 布局过渡
优先使用 Framer Motion：Section 揭示、共享布局过渡、滚动联动透明度/位移/缩放、粘性叙事、菜单/抽屉/模态出现效果。

动效规则：在快速录屏中可见 → 移动端流畅 → 快速克制 → 全页一致 → 仅装饰则移除。
Hard Rules — 不可违反
- 默认无卡片
- 默认无 Hero 卡片
- 需要全出血时不用盒式/居中列 Hero
- 每 Section 不超过一个主导想法
- 无填充文案
- 非统一安静侧不用分屏 Hero
- 无理由不超过两种字体
- 无理由不超过一个强调色
Litmus Checks — 质量检验清单
- 首屏品牌/产品是否不可误认？
- 是否有一个强视觉锚点？
- 仅扫描标题能否理解整页？
- 每个 Section 是否只有一个职责？
- 卡片是否真正必要？
- 动效是否改善了层次或氛围？
- 移除所有装饰阴影后设计是否仍感觉高级？

六、示例展示

以下是使用 Frontend Skill 生成的网站示例（来自原文）：

七、核心收获

核心收获

GPT-5.4 能生成高质量前端界面，前提是 Prompt 提供了：

✅ 清晰的设计约束
✅ 视觉参考
✅ 结构化叙事
✅ 定义好的设计系统

关键认知转变：

约束 > 自由 — 越精确的约束产出越好的设计
图像 = 推理的一部分 — 不再只是装饰，而是设计推理链的核心环节
低推理 ≈ 更好的简单页面 — 减少过度设计的倾向
工具辅助验证 — Playwright 使生产级 UI 输出成为可能
真实内容锚定 — 真实文案和上下文是最简单的质量提升器

延伸资源

https://developers.openai.com/blog/designing-delightful-frontends-with-gpt-5-4

原文

原文：Designing delightful frontends with GPT-5.4 — OpenAI Developers Blog, 2026-03-20

作者：Brian Fioca, Alistair Gillespie, Kevin Leneway, Robert Tinn

本文系统拆解 OpenAI 官方博客中的核心技术与实操方法，帮助你精准引导 GPT-5.4 输出你真正想要的设计。

一、模型层面的三大进化

GPT-5.4 在前端维度聚焦于三项实质性提升：

1. 原生图像理解与工具调用

GPT-5.4 被训练为可以 原生使用图像搜索和图像生成工具，将视觉推理直接融入设计流程。

最佳实践：

先让模型生成 Mood Board（情绪板）或多个视觉方案，再选择最终素材
明确描述图像应捕捉的属性：风格、色板、构图、氛围
在 Prompt 中引导模型复用已生成的图像、调用图像生成工具、或引用特定外部图片

💡 下方视频展示了 GPT-5.4 在 Codex 中自动生成的 Mood Board 示例，灵感来自纽约咖啡文化与 Y2K 美学：

（Mood Board — NYC coffee culture × Y2K aesthetics，由 GPT-5.4 在 Codex 中生成）

2. 功能完整性大幅提升

模型在 长周期任务 上更加可靠。过去需要多轮反复修补的复杂用户体验——游戏、多状态工作流——现在一到两轮即可完成。

3. Computer Use + 自我验证

GPT-5.4 是 OpenAI 首个主线模型训练了 Computer Use 能力。它能原生操控界面，配合 Playwright 等工具：

检查渲染页面
测试多种视口
遍历应用流程
检测状态与导航问题
视觉验证 输出是否匹配参考 UI

OpenAI — Computer Use & Frontend UI with GPT-5.4 Thinking

观看 GPT-5.4 发布视频了解这些能力的实际演示。

二、快速起步：4 条核心原则

如果你只采纳本文的少数几条建议，从这里开始：

选择低推理等级（Low reasoning）起步
预先定义设计系统和约束：排版、色板、布局
提供视觉参考或 Mood Board：附截图，为模型提供视觉护栏
预先定义叙事或内容策略：引导模型的内容生成方向

三、Starter Prompt — 前端硬规则

以下是 OpenAI 推荐的起步 Prompt，直接约束模型避开常见陷阱：

Text

## 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.
- Brand first: Brand or product name must be a hero-level signal, not just nav text.
- Brand test: If the first viewport could belong to another brand after removing the nav, branding is too weak.
- Typography: Use expressive, purposeful fonts. Avoid default stacks (Inter, Roboto, Arial, system).
- Background: Don't rely on flat, single-color backgrounds; use gradients, images, or subtle patterns.
- Full-bleed hero only: Hero image should be a dominant edge-to-edge visual plane by default.
- Hero budget: First viewport = brand + one headline + one short sentence + one CTA group + one dominant image. Nothing else.
- No hero overlays: No detached labels, floating badges, promo stickers, info chips.
- Cards: Default = no cards. Never use cards in the hero. Cards only when they ARE the interaction.
- One job per section: Each section = one purpose, one headline, one short sentence.
- Real visual anchor: Imagery must show product, place, atmosphere, or context.
- Reduce clutter: No pill clusters, stat strips, icon rows, boxed promos.
- Motion: Create presence and hierarchy, not noise. Ship 2-3 intentional motions.
- Color & Look: Clear visual direction; define CSS variables; no purple-on-white defaults.
- Responsive: Ensure proper desktop and mobile rendering.
- React: Prefer modern patterns (useEffectEvent, startTransition, useDeferredValue).

Exception: If working within an existing design system, preserve established patterns.

核心思想：每条规则都在对抗模型的「默认平庸」——卡片堆砌、视觉层次不清、品牌存在感弱、首屏信息过载。

对应的中文版本 Prompt 如下：

Text

## 前端任务（Frontend tasks）

在进行前端设计任务时，避免通用化、过度堆砌的布局。

**请遵循以下硬性规则：**
- 单一构图：首屏必须作为一个整体被感知，而不是类似仪表盘的拼接。
- 品牌优先：品牌或产品名称必须是“英雄级”视觉信号，而不仅仅是导航中的文字。
- 品牌测试：如果移除导航后首屏看起来仍可属于其他品牌，则说明品牌表达过弱。
- 排版：使用有表现力、有目的性的字体。避免默认字体栈（Inter、Roboto、Arial、system）。
- 背景：不要依赖纯色背景；应使用渐变、图片或细微纹理。
- 全幅首屏：默认使用铺满边界（edge-to-edge）的主视觉（Hero Image）。
- 首屏预算：首屏仅包含 = 品牌 + 一个主标题 + 一句简短说明 + 一个 CTA 组 + 一个主视觉。不要添加其他元素。
- 禁止首屏叠加层：不要使用悬浮标签、徽章、促销贴纸或信息小块。
- 卡片：默认不使用卡片。首屏绝不能用卡片。只有在“卡片本身就是交互”的情况下才可使用。
- 单区块单职责：每个区块只承载一个目标、一个标题、一句简述。
- 真实视觉锚点：图像必须体现产品、场景、氛围或上下文。
- 减少杂乱：避免 pill 标签组、数据条、图标行、盒式促销块。
- 动效：用于建立存在感和层级，而不是制造噪音。控制在 2–3 个有意图的动效。
- 色彩与视觉：明确视觉方向；定义 CSS 变量；避免默认的“白底紫色”风格。
- 响应式：确保桌面端与移动端均有良好呈现。
- React：优先使用现代模式（useEffectEvent、startTransition、useDeferredValue）。

例外：如果是在既有设计系统中开发，应优先遵循其既定规范。

四、进阶设计技术

4.1 从设计原则出发

在动手之前，先定义约束：

一个 H1 标题
不超过 6 个 Section
最多 2 种字体
1 个强调色
1 个主 CTA 在首屏之上

4.2 提供视觉参考

截图或 Mood Board 帮助模型推断：

布局节奏
排版比例
间距系统
图像处理手法

4.3 将页面结构化为叙事

典型营销页面的叙事结构：

序号	Section	职责
1	Hero	建立身份与承诺
2	Supporting imagery	展示上下文或环境
3	Product detail	解释产品/服务
4	Social proof	建立可信度
5	Final CTA	将兴趣转化为行动

4.4 指导设计系统遵从

鼓励模型在构建早期建立清晰的设计系统：

设计 Token：

background / surface / primary text / muted text / accent

排版角色：

display / headline / body / caption

推荐技术栈：React + Tailwind — GPT-5.4 在这个组合上表现尤为突出。

处理动画与浮层的安全指导：

Text

Keep fixed or floating UI elements from overlapping text, buttons, or other key content
across screen sizes. Place them in safe areas, behind primary content where appropriate,
and maintain sufficient spacing.

4.5 降低推理等级

推理等级建议

4.6 用真实内容锚定设计

提供真实文案、产品上下文或明确项目目标，是提升前端质量最简单的方式。真实上下文帮助模型：

选择正确的站点结构
塑造更清晰的段落叙事
生成可信的文案，而非泛化的占位符

五、Frontend Skill — 一键激活设计品味

OpenAI 发布了专用的 frontend-skill，为模型注入更强的结构、品味和交互指导。

安装方式

在 Codex App 中运行：

Bash

$skill-installer frontend-skill

Skill 核心框架

Working Model — 动手前先写三件事
- Visual thesis：一句话描述情绪、材质和能量
- Content plan：Hero → Support → Detail → Final CTA
- Interaction thesis：2-3 个改变页面感受的动效创意
每个 Section 一个职责、一个主视觉、一个核心要点或行动。
Beautiful Defaults — 优美的默认值
- 从构图开始，而非组件
- 首选全出血 Hero 或全画布视觉锚点
- 品牌/产品名 = 最响亮的文字
- 文案短到可以秒扫
- 先用留白、对齐、缩放、裁切、对比度，再考虑装饰
- 系统限制：最多 2 种字体，默认 1 个强调色
- 默认无卡片布局
- 把首屏当海报，不是文档
Landing Page 规则

默认序列：
1. Hero：品牌/产品 + 承诺 + CTA + 一个主视觉
2. Support：一个具体特性、优惠或证明点
3. Detail：氛围、工作流、产品深度或故事
4. Final CTA：转化、开始、访问或联系
Hero 硬规则：
- 仅一个构图
- 全出血图像或主视觉平面
- 品牌第一 → 标题第二 → 正文第三 → CTA 第四
- 无 Hero 卡片、数据条、Logo 云、标签丛
- 标题桌面端 ≈ 2-3 行，移动端一眼可读
- 图像上方文字必须保持强对比度和清晰点击目标
检验标准：
- 删掉图像后首屏仍然成立 → 图像太弱
- 隐藏导航后品牌消失 → 层次太弱
App UI 规则 — Linear 风格的克制
- 平静的表面层次
- 强排版和间距
- 少量颜色
- 信息密集但可读
- 最小化装饰
- 卡片仅当它就是交互本身
避免：
- 仪表盘卡片马赛克
- 每个区域的粗边框
- 常规产品 UI 背后的装饰性渐变
- 多个竞争的强调色
- 不改善扫描效率的装饰图标
Imagery — 图像必须承担叙事
- 品牌/场所/编辑/生活方式产品 → 至少一张强真实感图像
- 优先实景摄影 > 抽象渐变 / 伪 3D
- 选择或裁切有稳定色调区域的图像以放置文字
- 不生成内嵌 UI 框架、分割、卡片或面板的图像
- 需要多个场景时用多张图，不用拼贴
Copy — 文案精简法则
- 用产品语言写作，非设计评论
- 让标题承载意义
- 辅助文案通常一句话
- 削减 Section 间的重复
- 不将 Prompt 语言或设计评论写入 UI
- 每个 Section 一个职责：解释、证明、深化或转化
如果删掉 30% 文案页面变好了，就继续删。
Motion — 动效创造存在感，而非噪音

至少交付 2-3 个有意图的动效：
- Hero 入场序列
- 滚动联动 / 粘性 / 深度效果
- 悬停 / 揭示 / 布局过渡
优先使用 Framer Motion：Section 揭示、共享布局过渡、滚动联动透明度/位移/缩放、粘性叙事、菜单/抽屉/模态出现效果。

动效规则：在快速录屏中可见 → 移动端流畅 → 快速克制 → 全页一致 → 仅装饰则移除。
Hard Rules — 不可违反
- 默认无卡片
- 默认无 Hero 卡片
- 需要全出血时不用盒式/居中列 Hero
- 每 Section 不超过一个主导想法
- 无填充文案
- 非统一安静侧不用分屏 Hero
- 无理由不超过两种字体
- 无理由不超过一个强调色
Litmus Checks — 质量检验清单
- 首屏品牌/产品是否不可误认？
- 是否有一个强视觉锚点？
- 仅扫描标题能否理解整页？
- 每个 Section 是否只有一个职责？
- 卡片是否真正必要？
- 动效是否改善了层次或氛围？
- 移除所有装饰阴影后设计是否仍感觉高级？