告别AI模板感：OpenAI发布前端设计新指南

OpenAI 最近在开发者社区发了一篇前端实践指南：《Designing delightful frontends with GPT-5.4》。

他们还把整套前端设计方法论打包成了一个 Skill，装进 Codex 里就能用，让 GPT-5.4 生成页面时少走弯路。

指南想回答的问题就一个：怎样把 GPT-5.4 从"会写前端"，用到"会做出让人愿意停留的前端"？

OpenAI 开篇给了四条建议：先用低推理级别起步；一开始就定义好设计系统和约束；给视觉参考；先把叙事和内容策略讲清楚。

第一条有点儿出乎意料。对于简单页面，更多推理并不总会带来更好的前端结果。低和中等推理反而更适合前端任务，更快、更聚焦，不容易在无关的地方过度设计。

前端效果的关键，不是让模型想得更久，而是让它从一开始就站在对的位置上。

什么叫"站在对的位置上"？比如把设计原则先写死：只允许一个 H1；整页不超过六个 section；最多两套字体；只有一个强调色；首屏只有一个主 CTA。把画布边界画出来，模型反而更容易在边界里做出好东西。

很多人给模型的输入只有一句话，比如"做个科技感的官网""做个高级一点的页面"。这当然不算错，但它太宽了。OpenAI 的建议是，先把排版、色板、布局、首屏规则这类硬约束写清楚。

比如：首屏必须像一个完整构图，而不是像仪表盘；品牌名必须是主信号，而不是导航上的小字。

换句话说，你要告诉模型，哪些设计是应该优先追求的，哪些设计是这次绝对不能碰的。

原文非常强调视觉参考。截图、mood board、参考网站，它们的价值不只是"给个灵感"，而是能让模型直接感知版式节奏、字体比例、间距系统和图片处理方式。

比如你想做一个咖啡品牌页面，如果只是说"要有纽约街头感、要有 Y2K 味道、要有一点复古"，模型未必能稳定抓到同一个方向。但如果你先让它生成 mood board，再从里面选方向，它后面做出来的页面，一致性就会高很多。

GPT-5.4 被专门训练过如何结合图像搜索和图像生成工具工作，所以它不是只会根据文字"猜一个界面"，而是能把视觉推理真正纳入设计过程里。

这一点特别像产品写作。OpenAI 提醒大家，页面最好按叙事去组织。典型顺序是：

简单说，每一屏最好只有一个职责。第一屏负责建立"我是谁"；第二屏负责解释"为什么信我"；第三屏负责说明"你得到什么"；最后一屏负责推动动作。

原文建议，尽量在一开始就定义 design tokens，比如背景色、表层色、主文字色、弱文字色、强调色，以及字体等。

这样做的价值很直接：它能让模型在后面生成不同区块、不同组件、不同状态时，保持同一种语言。你会发现，很多 AI 生成页面之所以看起来"拼"，不是因为单个模块差，而是因为它们之间不像同一个系统里长出来的。

设计系统的作用，就是先把"长相规则"定住。

这一条看着普通，实际特别管用。OpenAI 的意思很明确：给模型真实文案、真实产品语境和清楚的项目目标，往往是把前端结果拉上去最省力的一步。

内容一旦是真的，模型才更容易分清这页是拿来做营销、做说明，还是让用户完成操作，也更知道 section 该怎么排、每一段文案该承担什么作用。反过来，如果你塞给它的还是某个占位符，它大概率又会滑回那种放哪都行的通用模板。

把这些建议合在一起看，你会发现 GPT-5.4 更适合的前端工作流，其实不是"我给一句需求，你给我一个页面"，而更像下面这五步：

说到底，这套方法是把大模型当成一个能和你来回配合的协作对象。你来定方向、边界和标准，它负责生成、补齐，再一轮轮自己检查。

OpenAI 的这套方法已经封装成了一个可以复用的skill，在codex中输入以下命令即可：

以前大家常把前端品味当成一种只可意会的感觉，很难教，也很难复盘。但从官方指南里能看出来，这件事正在变得更具体。你可以先把审美边界定清楚，再给真实的内容和参考，然后要求模型自己检查、反复修。重点不是让它随便发挥，而是让它在约束里把细节做好。

当然 GPT-5.4 不可能替你包办所有设计问题，但这次它确实把"能把页面写出来"和"能把页面做得像样"之间的距离，又往前拉近了一些。

参考资料：https://developers.openai.com/blog/designing-delightful-frontends-with-gpt-5-4