如果你经常让 AI 写前端，应该很熟悉那种失望：它做出来的东西通常不算错，甚至第一眼还挺像那么回事，但看久了就会发现问题——结构太像模板站，层级模糊，品牌感很弱，首屏塞满信息，按钮、卡片、渐变、图标像是从训练数据里按概率抽样拼出来的。

OpenAI 那篇 《Designing delightful frontends with GPT-5.4》 有价值的地方，不在于它说“GPT-5.4 更强了”——这点大家早就知道。真正值得记下来的，是它给出了一套更接近实战的方法论：不是指望模型凭空长出审美，而是通过约束、参照、叙事、验证和设计系统，把它引导到更高质量的输出上。

我读完后的结论是：想让 AI 做出更好的前端，关键不是把 prompt 写得更像咒语，而是把任务变成一个有边界、有视觉护栏、能自我校验的设计执行过程。

先接受一个现实：默认输出几乎一定会滑向“高频网页”

文章一开头就点得很准。前端设计的可能性太多了，而模型在缺少约束时，会天然回到训练数据里出现频率最高的模式。这里面确实有一些经典设计约定，但也有很多只是“很常见”，并不等于“很好”。

所以只说“帮我做一个现代、漂亮、专业的网站”，通常拿到的是一种非常眼熟的结果：

  • 首屏像 SaaS 模板
  • Hero 里塞满副信息
  • 卡片比内容还多
  • 品牌存在感不强
  • 视觉有元素，但没有主导构图
  • 每一段都像在重复同一种语气

这不是模型故意偷懒，而是因为你没有给它明确的“不要滑向默认值”的约束。

方法一：先给约束，不要先给自由

这篇文章最值得抄作业的第一点，是 constraints first。也就是在一开始就定义设计规则，而不是先让模型随便发挥，再回来救火。

OpenAI 给出的建议很实用，比如：

  • 第一屏必须像一个完整构图，而不是一堆功能块
  • 品牌名必须是首屏里的主信号，而不是导航里的一个小词
  • Hero 默认应是 full-bleed 的主视觉平面，而不是一个内嵌的小图卡
  • 首屏信息预算要严格控制，通常只放品牌、标题、短说明、CTA 和一个主视觉
  • 默认不要用卡片；如果去掉边框、阴影、圆角也不影响理解，那它就不该是卡片
  • 一个 section 只做一件事，一个标题只承担一个任务

这些规则看起来像设计洁癖，但其实非常有用。因为模型最容易犯的错，不是做不出组件，而是做出过多“看起来合理”的组件，最后把页面做成一个信息噪声场。

我自己的理解是：约束不是在限制模型，而是在限制它最容易走偏的那部分统计直觉。

如果让我把这一部分压缩成一个可复用模板，我会这样写：

  • 首屏只允许一个视觉主意
  • 品牌必须在首屏一眼可见
  • 不要在 Hero 里放统计条、标签云、次级营销信息
  • 默认无卡片，除非卡片本身就是交互容器
  • 每个 section 只负责 explain / prove / deepen / convert 其中之一
  • 不要使用训练数据里最常见的紫白 SaaS 风格

很多时候，光是先写下这些规则，结果就会明显改善。

方法二：给视觉参照，不要让模型自己脑补“高级感”

第二个关键点是 visual references。OpenAI 很明确地说，想要更好的前端结果，最好给模型参考图、截图、情绪板，甚至先让它自己生成 mood board，再从里面挑方向。

这是因为视觉设计里很多关键东西，其实很难靠纯文字准确传达，比如：

  • 布局节奏
  • 字号比例
  • 留白密度
  • 图像裁切方式
  • 气质是冷静、华丽、轻盈还是粗粝
  • 色彩是克制的还是情绪化的

只靠一句“做得高级一点”，模型大概率会回到它见过最多的“高级感”模板，那通常不等于你脑子里的那个版本。

所以更靠谱的做法是：

  1. 先给参考图，或者让模型先出 2-3 个视觉方向
  2. 明确你要它学习的不是“长得像”，而是这些图里的节奏、氛围、构图和色彩组织
  3. 如果有可复用图片，优先使用已有图片；不要默认去抓网页上的陌生图
  4. 如果要用生成图，也要明确风格、色调、构图、情绪，而不是只说“生成一个 hero 图”

我很认同这一点：视觉参照的意义，不是给模型答案，而是给它边界。

方法三：把页面当成叙事，而不是区块列表

文章里一个很好的提醒是：页面结构最好先按 narrative 来组织。典型营销页可以按下面这个顺序展开：

  • Hero：先告诉我你是谁、你承诺什么
  • Supporting imagery / context：补足场景和氛围
  • Product detail：开始讲清楚产品或服务本身
  • Social proof：建立信任
  • Final CTA：收束并转化

这件事看起来很基本，但实际上是很多 AI 生成网页最容易缺失的部分。模型特别擅长“列区块”，但不一定擅长“安排节奏”。于是你会看到它做出来的页面像这样：

  • 一段 hero
  • 三个 feature card
  • 一个 testimonial 区
  • 一个 FAQ
  • 一个 CTA

结构没错，但没有推进关系。读者往下滚时，感受到的是组件顺序，不是叙事推进。

所以让 AI 做页面时，我觉得应该直接把 narrative 写出来，例如：

  • 第一屏只建立品牌与主张
  • 第二部分提供一个具体、可感知的使用场景
  • 第三部分解释为什么这个产品真的不同
  • 第四部分用证据建立信任
  • 最后一部分只做转化，不再引入新信息

一旦你这样定义，模型就不太容易把每个 section 都写成“换个标题继续营销”。

方法四：让它先定义 design system，而不是边做边凑

这篇文章另一个很实用的建议是：尽早建立一套清晰的设计系统。OpenAI 特别提到要先定义 token，比如：

  • background
  • surface
  • primary text
  • muted text
  • accent
  • display / headline / body / caption 等字体角色

这个建议看起来像老生常谈，但对 AI 特别重要。因为如果没有设计系统，模型很容易一边写页面一边临时决策：这里换一个颜色，那里换一个字号，再下一段来一个不同的间距和圆角半径。单看每一处都说得过去，合在一起就开始散。

所以我会把这一步理解成：设计系统不是后期整理，而是模型的运行时护栏。

如果你一开始就明确：

  • 只允许两套字体
  • 只允许一个强调色
  • 所有 section 共用 spacing scale
  • 标题层级必须稳定
  • body 文本的长度和密度要统一

那模型后面做出来的 UI 一致性会高很多。

文章里还提到，React + Tailwind 这类熟悉栈对 GPT-5.4 很友好。我觉得原因不神秘：不是这些工具天然更优，而是训练样本和工具生态更成熟，模型在这套组合上更容易稳定发挥。

方法五：前端任务里，低/中 reasoning 往往比高 reasoning 更好

这是我觉得很有意思的一点。OpenAI 明说：对很多前端任务来说，更高的 reasoning 不一定更好。实际使用里，低到中等推理层级常常效果更强。

这背后的逻辑我很认同。前端设计任务里，很多问题不是“推理不够深”，而是“过度思考会让页面变复杂”。高 reasoning 有时会让模型更想解释、扩展、兜底、补功能，结果就是多出很多本不该存在的块。

而低 / 中 reasoning 的好处是：

  • 更快进入产出
  • 不容易把简单设计搞复杂
  • 更容易保持整体感
  • 更少出现“我替你想了很多其实你没要的东西”

所以我的建议会是：

  • 做 landing page、活动页、展示页，先从低 reasoning 开始
  • 做复杂应用流程、复杂状态管理、多步交互时，再把 reasoning 往上调
  • 不要默认把“更认真思考”当成“更高质量设计”的同义词

前端很多时候不是求解，而是取舍。

方法六：一定要给真实内容，别让它靠通用文案撑场面

文章里还有一个特别实际的建议：ground the design in real content。也就是尽量给模型真实的产品内容、目标、背景、语气，而不是让它用空泛文案撑起整个页面。

这点非常重要。因为一旦内容是假的，结构也会跟着变假。模型会自动补齐那些最常见的营销腔：

  • next generation
  • seamless workflow
  • reimagine your productivity
  • built for modern teams

这些词并不是语法上有错，而是它们一出现，页面就开始失去真实产品感。

更好的方式是直接给：

  • 产品究竟是什么
  • 用户是谁
  • 使用场景是什么
  • 真正想强调的一个差异点是什么
  • 这页的目标是注册、购买、理解，还是建立印象

当内容足够真实，模型更容易做出可信的 section 分工，也更不容易写出那种“每段都像首页 hero”一样的空话。

方法七：让它验证自己，Playwright 很重要

OpenAI 这次对 computer use / verification 的强调也很关键。文章里专门提到，GPT-5.4 配合 Playwright 之类的工具，可以实际检查页面渲染结果、跑多视口、点击流程、验证状态，甚至根据视觉结果继续调整。

这是一个很大的变化。因为过去很多 AI 前端任务的问题，不在“写不出代码”，而在“它并没有真正看到自己写出来的页面”。

如果它不能看结果，很多问题很难暴露，比如：

  • 固定元素压住正文
  • 移动端首屏超高
  • CTA 可见但不可点
  • 动画存在但节奏很糟
  • 图片比例对桌面端成立，对移动端却崩掉

所以我会把这条方法概括成：前端生成不是写完代码就结束，而是写完后必须进入 inspect → test → refine 的闭环。

尤其是涉及下面这些情况时，验证几乎是必需的：

  • sticky / fixed 元素
  • overlay / modal / drawer
  • Hero 上叠字
  • 多断点适配
  • 动效、滚动联动、hover transitions

如果要把 AI 变成真正可用的前端帮手，这一步比“提示词润色”重要得多。

方法八：品牌优先、图像优先，而不是组件优先

文章里反复在讲一件事：首屏应该像一张海报，而不是一份文档。

这句话我觉得特别值得记下来。

很多 AI 做出来的首屏之所以普通，不是因为没有内容，而是因为它先想到的是组件，再想到构图。于是你会得到：

  • 左边文字右边插图
  • 下方三张功能卡
  • 上面一行小标签
  • 中间再来几个 stat pill

这类布局的问题不是错，而是太熟。它本质上是“组件合理”，不是“视觉成立”。

OpenAI 给出的替代思路是：

  • 先有一个真正的主视觉锚点
  • Hero 默认 full-bleed
  • 品牌名必须足够响亮
  • 文本栏保持窄且稳定，压在视觉里的安静区域
  • 首屏只放最少量的信息，不要让次级信息挤掉主叙事

文章还提到一个很好的检验标准：

  • 如果把图片拿掉，这个首屏仍然成立，说明图像太弱
  • 如果把导航拿掉，品牌就消失了，说明品牌层级太弱

我觉得这是非常实用的 litmus test。很多时候你不需要复杂评价体系，问自己这两句就够了。

方法九：默认不要卡片化，不要把页面做成 SaaS 样板间

OpenAI 在这篇文章里对“卡片默认值”明显是带着警惕的。它直接说：default: no cards。

这点我非常赞同。卡片当然不是原罪，但它太容易成为模型偷懒的组织方式：

  • 信息不好分层？做卡片
  • section 没有视觉重点？做卡片
  • 想显得丰富一点？再加三张卡片

最后页面就会变成由卡片组成的页面，而不是由信息与构图组成的页面。

更好的思路是先问：

  • 这里需要的是结构，还是需要容器？
  • 去掉边框/阴影/圆角后，可读性是否还在？
  • 它是不是只是因为“这样看起来像 UI”，才被做成卡片？

如果答案是后者，那大概率应该拿掉。

文章里还有很多我很认同的反模板规则，比如：

  • 不要让 hero 里出现 detached badge、promo sticker、info chip 这类浮层装饰
  • 不要首屏就铺 stats、schedule、metadata rows
  • 不要一个 section 同时承担多个任务
  • 不要用抽象渐变假装自己已经有了视觉主意

这些都指向同一个判断：页面不是 UI 元件仓库，而是信息与视觉的秩序。

方法十：把 Frontend Skill 当成审美护栏，而不是 prompt 模板

文章最后给出了一个 frontend-skill。我觉得它最有价值的地方，不在于具体措辞，而在于它试图把“什么叫更有品味的前端”写成一组可执行规则。

里面有几个核心点很值得长期复用：

1. 先写三个 thesis

在开始之前先明确：

  • visual thesis：这页的情绪、材料感、能量感是什么
  • content plan：Hero / support / detail / final CTA 怎么分
  • interaction thesis：用哪 2-3 个动作改变页面气质

这个做法很好，因为它让模型先决定“做什么感受”，而不是直接进入“堆什么模块”。

2. 每个 section 只能有一个主意

这一条几乎可以防住一半常见问题。一个 section 只负责一个任务，只传递一个主要 takeaway。否则模型很容易在同一区块里同时想讲故事、做转化、塞证据、加视觉补充，最后没有重点。

3. Motion 要制造 presence，不要制造噪音

文章建议至少放 2-3 个有意图的 motion：

  • 一个 hero entrance
  • 一个 scroll-linked / sticky / depth effect
  • 一个 hover / reveal / layout transition

这比“给页面加点动画”好得多。前者是在设计节奏，后者往往只是给每个元素套一层 fade-up。

4. 用 litmus checks 反问结果

这套 skill 里最值得保留的，是一组结果检查问题：

  • 首屏能不能一眼看出品牌是谁？
  • 有没有一个强主视觉？
  • 只看标题，能不能理解整页结构？
  • 每个 section 是否真的只有一个职责？
  • 卡片是不是非用不可？
  • 去掉装饰性阴影之后，页面还高级吗？

这组问题比“你觉得好看吗”强太多了，因为它可复用、可对照、可让模型自己回头检查。

我会怎么把这篇文章变成工作流

如果要把 OpenAI 这套方法论压缩成一个自己能长期复用的前端协作流程，我会这样做：

开始前

先写清楚：

  • 页面目标是什么
  • 用户是谁
  • 品牌要传递什么气质
  • 首屏只允许哪些元素
  • 设计系统限制是什么（颜色、字体、spacing、accent）
  • 哪些常见坏习惯是禁止的（默认卡片、默认 stats、默认 SaaS hero）

进入设计时

给模型：

  • 真实内容和真实语气
  • 参考图或 mood board
  • narrative structure
  • visual thesis / content thesis / interaction thesis

出稿后

让它：

  • 用 Playwright 或等价方式检查桌面端和移动端
  • 验证 CTA、首屏高度、fixed 元素、层叠关系、动效节奏
  • 根据结果做一轮 refinement

最后自检

问它：

  • 品牌是否足够强？
  • 图像是否真的承担了叙事？
  • section 是否职责清晰？
  • 是否有任何“为了像设计而设计”的装饰性卡片和标签？
  • 如果删掉 30% 的文案，页面会不会更好？

我的评价

我觉得这篇文章最重要的，不是教你怎么把 GPT-5.4 用得更“像设计师”，而是教你承认一件事：好的 AI 前端结果，本质上依然来自好的 art direction。

模型当然更强了，但更关键的是，你要不要为它提供明确的设计边界、视觉样本、真实内容和验证机制。没有这些，它再强也很容易滑向“会动的默认网页”。

所以如果一定要把这篇文章压缩成一句话，我会说：

别再把 AI 当前端组件生成器来使；要把它当成一个需要 brief、需要参照、需要设计系统、也需要验收的协作对象。

一旦你这么用，它确实更接近一个能帮你做出好前端的搭档；否则，它仍然很容易只是一个高效率制造普通页面的机器。