1. GPT-5.4 前端变强，强的不只是代码生成#

OpenAI 在文里把前端相关提升总结成三类：

• 更强的图片理解
• 更完整的功能实现
• 更好的工具使用与自我验证

我觉得这个拆法挺准确。

因为“会写 React 代码”和“能产出好页面”根本不是一回事。

前端好不好，很多时候取决于这些模型以外的能力：

• 能不能理解参考图的构图和气质
• 能不能补出完整交互，而不是只把静态页面搭出来
• 能不能在页面跑起来之后，自己去看一遍有没有崩

如果只盯着代码补全看，容易低估这类能力的价值。

2. prompt 一旦模糊，模型就会回退到“高频网页模板”#

这篇里有个判断我很认同：

当 prompt 不够具体时，模型通常会回退到训练数据里高频出现的模式。

这会导致什么？

结果通常是：

• 页面能跑
• 结构也完整
• 甚至组件挺齐
• 但就是很像“某种熟悉的 AI 生成页面”

常见症状基本都一样：

• hero 没有真正的视觉中心
• 品牌感弱
• 第一屏塞很多碎信息
• 卡片、badge、stats、icon 行一股脑堆上去
• 看起来很努力，但没重点

说白了，这不是代码 bug，而是默认审美策略在接管输出。

所以我现在越来越觉得，做 AI 前端时最先该补的，不是更多组件，而是更强的约束。

3. 第一屏最重要的是“构图”，不是“信息量”#

OpenAI 这篇给了一套相当硬的前端规则，我觉得其中最值钱的是关于第一屏的几条：

• 第一屏应该读起来像一个完整构图
• 品牌应该是 hero 级信号，不能只躲在导航栏里
• landing page 默认应该是全幅视觉主导
• 第一屏内容预算应该克制
• 不要在 hero 上叠一堆 detached label、浮层 badge、信息贴片

这几条其实都在指向同一个问题：

很多 AI 生成页面最差的地方，不是不会排版，而是不会取舍。

它很容易把“页面应该有的元素”全都放出来，但不会先判断：

• 第一眼应该先看什么
• 这个品牌最该被记住的是什么
• 视觉主轴到底是什么
• 哪些信息应该推迟到第二屏

所以这篇里那句 “One composition” 我觉得特别关键。

对于大多数宣传页、活动页、产品页来说，第一屏不是一个信息仓库，而应该是一个被明确设计过的画面。

4. “默认不要卡片”是个很狠但很有用的判断#

文章里有一条规则特别狠：

Cards: Default: no cards.

第一眼看有点极端，但我仔细想了一下，挺有道理。

因为现在很多 AI 生成前端的坏味道，本质上就是：

太喜欢把所有东西都装进卡片里。

然后页面上就会出现这些东西：

• hero 里一堆 stats card
• 栏目里一排 feature card
• CTA 前再来一层 card
• 连一个简单说明块都要 shadow + radius + border

最后不是更高级，而是更拥挤。

我觉得文里那个判断标准特别实用：

如果去掉 border、shadow、background、radius，不影响理解和交互，那它就不该是卡片。

这个标准其实很适合拿来当日常检查项。因为它逼你回到一个更基础的问题：

这个视觉容器，到底是在解决交互问题，还是只是在假装设计感？

5. 对很多前端任务，低 reasoning 可能更好#

这个点有点反直觉，但我很认可。

文里建议做相对普通的前端页面时，先从 low reasoning 开始，而不是默认开很高。

原因也很简单：

更高 reasoning 不一定带来更好页面，反而可能带来：

• 结构过度复杂
• 设计解释过多
• 页面加了很多“看起来合理”的次要内容
• 整体更像工程方案，不像一个被打磨过的视觉产物

这点其实和写作有点像。

不是想得越多越好，而是先把约束和方向定准，再让模型快速收敛。前端尤其如此，因为页面观感不是靠推理深度线性换来的。

我自己的理解是：

• 复杂业务逻辑 值得更高 reasoning
• 页面构图和视觉落地 更需要明确边界和快速迭代

6. 视觉参考不是装饰，是前端 prompt 的核心输入#

这篇一直在强调一件事：

如果想让 GPT-5.4 做出更强的前端，最好给它：

• 截图
• mood board
• 现有设计参考
• 你明确描述过的风格、色盘、构图、情绪

这很重要，因为视觉设计本来就有大量难以用纯文本精确表达的部分。

你可以说：

• 极简
• 编辑感
• 高级
• 有氛围

但这些词本身都很滑。

一旦没有视觉锚点，模型还是会回到自己最熟悉的网页语法里。

所以参考图的作用，不是“让模型抄”，而是帮它确定：

• 字号节奏
• 留白密度
• 图片权重
• 颜色氛围
• 模块切换的节奏

这其实和人类设计师工作很像。很多时候不是不会设计，而是没有统一视觉方向。

7. 好的前端 prompt，应该先交代“页面叙事”#

这篇还有一点我挺认同：

页面不只是模块拼装，它最好有自己的叙事结构。

文里给了一个典型营销页顺序：

• Hero：先建立身份和承诺
• Supporting imagery：补场景或氛围
• Product detail：解释具体内容
• Social proof：建立信任
• Final CTA：做最后转化

这个框架不新，但很实用。

因为很多 AI 页面的问题，根本不在 CSS，而在于它不知道页面“下一段为什么要存在”。

结果就是 section 虽然很多，但都是平的。

我觉得这篇最重要的提醒之一，就是：

别只让模型生成 section，要先让它理解 section 的职责。

也就是文里说的：

one job per section

一段只做一件事，页面气质会立刻稳很多。

8. 设计系统要先定，不要边写边飘#

OpenAI 还建议模型一开始就先建立设计系统，比如：

• background / surface / text / muted / accent 这些 token
• display / headline / body / caption 这些字级角色
• 统一的颜色和布局原则

这个我也觉得很值。

因为 AI 一边写页面一边临场发挥时，最容易出现的问题就是：

• 第一屏一套颜色逻辑
• 第二屏又换了一套强调色
• 按钮风格不统一
• 字级体系漂移
• 明暗关系不稳定

看起来都不算大错，但累积起来就会让页面很散。

所以与其让模型后面修视觉一致性，不如一开始就把 token 定住。

这也是为什么 React + Tailwind 在这类任务里效果通常不错：

• 迭代快
• 容易约束
• 设计 token 好落地
• 模型也更熟悉这套表达方式

9. Playwright 之类的验证工具，对前端太重要了#

这篇最让我点头的一段，是它明确把 Playwright 拉进前端工作流里。

因为前端最怕一种错觉：

代码看起来对，但页面其实不对。

比如：

• 移动端溢出
• 固定层遮住按钮
• CTA 在某个断点被挤掉
• 交互流程断在第二步
• 视觉和参考图差得很远，但代码本身没报错

这些问题只看代码很难发现。

而有了 Playwright 之类工具，模型就能：

• 打开页面
• 切桌面端 / 移动端
• 点流程
• 看渲染结果
• 检查状态变化
• 反过来继续修

这其实是我觉得 GPT-5.4 真正实用的一点：

它不只是“更会写”，而是开始更像一个会自己回头看产物的前端同事。

10. 这篇对我自己的最大提醒#

如果让我把这篇压成一句自己的话，我会这么说：

让 AI 做出不那么模板味的前端，重点不是催它更有创意，而是你要先把创意边界、视觉方向和验证方式搭好。

这句话背后的落地动作其实很具体：

最后总结#

我看完这篇之后，更明确地觉得：

AI 前端的上限，不只是模型能力问题，更是 art direction 问题。

GPT-5.4 当然更强了，但真正重要的是，它把一件事暴露得更明显：

如果你不给模型明确的视觉判断标准，它就会默认走最常见的网页套路； 如果你给了足够清楚的约束、叙事和验证方式，它就更有机会产出真正像样的页面。

所以以后让 AI 做前端，我觉得最该改的习惯不是“多要几个版本”，而是先把这几样东西说清楚：

• 页面要像什么
• 第一屏要传达什么
• 哪些元素不能乱加
• 整体气质往哪边靠
• 怎么验证它真的做对了

前端最终比拼的，很多时候不是“有没有做出来”，而是“有没有做得不那么像模板”。

而这篇里最值得拿走的，刚好就是如何把这件事交代给模型。

参考#

• OpenAI, Designing delightful frontends with GPT-5.4：https://developers.openai.com/blog/designing-delightful-frontends-with-gpt-5-4