OpenAI：使用 GPT-5.4 设计前端的实用技巧，最后附官方前端 skill

无我生大爱

OpenAI：使用 GPT-5.4 设计前端的实用技巧，最后附官方前端 skill

如果你在用 GPT-5.4 做前端，你可能需要了解一下

先了解 GPT-5.4 的三个主要增强，才能有的放矢：
- 图像理解与工具使用
- 可以生成功能更完善的应用程序和网站
- 计算机使用与验证

---

- 图像理解与工具使用

GPT-5.4 经过训练，能够原生使用图像搜索和图像生成工具，使其能够将视觉推理直接融入设计过程。为获得最佳效果，请指示模型先生成情绪板或多个视觉选项，然后再选择最终素材。

你可以通过明确描述图像应捕捉的属性（例如，风格、调色板、构图或情绪）来引导模型生成具有强烈视觉参考的图像。你还应该在提示中包含指令，引导模型重用先前生成的图像，调用图像生成工具创建新的视觉效果，或在需要时引用特定的外部图像。

- 可以生成功能更完善的应用程序和网站

GPT-5.4 更擅长开发更完整、功能更健全的应用程序。期待该模型在长期任务中表现出更高的可靠性。你以前认为不可能的游戏和复杂用户体验，现在只需一两轮即可实现。

- 计算机使用与验证

GPT-5.4 是 OpenAI 首个专为计算机使用而训练的主线模型。它能原生导航界面，并结合 Playwright 等工具，迭代检查自身工作、验证行为并优化实现——从而支持更长、更自主的开发工作流程。

Playwright 在前端开发中尤为宝贵。它允许模型检查渲染页面、测试多个视口、导航应用程序流程，并检测状态或导航问题。提供 Playwright 工具或 skill 显著提高了 GPT-5.4 生成精美、功能完整界面的可能性。随着图像理解能力的提升，它还为模型提供了一种视觉验证其工作的方式，并检查其是否与提供的参考 UI 匹配。

---

一组 tips：
1. 首先选择较低的推理级别。
2. 预先定义您的设计系统和约束（即，排版、调色板、layout）。
3. 提供视觉参考或情绪板（即附上截图），为模型提供视觉指导。
4. 预先定义叙事或内容策略，以指导模型的内容创作。

一个一个来说

1. OpenAI 称，对于更简单的网站，更多的推理并非总是更好。实践中，低到中等推理水平通常能带来更强的前端效果，帮助模型保持快速、专注，减少过度思考，同时仍为更宏大的设计保留提升推理水平的空间。

2. 从设计原则入手，定义约束条件，例如一个 H1 标题，不超过六个部分，最多两种字体，一种强调色，以及一个首屏可见的主要 CTA（call to action）。

指导设计系统合规性，鼓励模型在构建初期就建立清晰的设计系统。定义核心设计令牌，例如 background 、 surface 、 primary text 、 muted text 和 accent ，以及排版角色，例如 display 、 headline 、 body 和 caption 。这种结构有助于模型在整个应用程序中生成一致、可扩展的 UI 模式。

对于大多数 Web 项目，从熟悉的堆栈（例如 React 和 Tailwind）开始效果很好。GPT-5.4 在这些工具方面表现尤为出色，可以更轻松地快速迭代并获得精美的结果。

动效和分层 UI 元素会增加复杂性，尤其当固定或浮动组件与主要内容交互时。在处理动画、叠加层或装饰层时，提供指导以鼓励安全的布局行为会很有帮助。

3.提供视觉参考，参考截图或情绪板有助于模型推断布局节奏、字体大小、间距系统和图像处理方式。

4.将页面结构化为叙事

例如，典型的营销页面结构：
- 主视觉区——确立身份和承诺
- 辅助图像——展示背景或环境
- 产品详情——解释产品内容
- 社会认同——建立信誉
- 最终CTA——将兴趣转化为行动

将设计根植于真实内容，向模型提供真实的文案、产品背景或明确的项目目标是改善前端结果最简单的方法之一。这种背景有助于它选择正确的站点结构、塑造更清晰的章节级叙述，并编写更可信的消息，而不是退回到通用的占位符模式。

---

最后的最后，OpenAI 还提供了一个前端 skill

在 CodeX 输入以下指令安装：

$skill-installer frontend-skill

如果你不用 CodeX，也可以去下面这个链接复制 skill 文件。

文章链接：developers.openai.com/blog/designing-delightful-frontends-with-gpt-5-4