如何用 Codex 构建惊艳的 UI
GPT-5.4 已经能生成出色的前端界面，但前提是知道怎么提问。本文从设计系统定义、视觉参考、页面叙事结构到动效控制，系统总结了用 AI 构建高质量 UI 的实用方法论，涵盖落地页与应用两种场景。
GPT-5.4 能构建漂亮的前端。但前提是你得知道怎么提问。
更好的输出源于更紧凑的约束、视觉参考和真实内容。以下是如何用 GPT-5.4 构建有意图的前端界面。
为什么 GPT-5.4 默认输出平庸
没有明确指引时，每个模型都会回退到训练数据中出现频率最高的模式——千篇一律的卡片网格、薄弱的视觉层次、安全但毫无记忆点的布局。
GPT-5.4 在前端方面的能力确实强了不少。它能生成更有视觉野心的 UI，原生理解图片，还能用 Playwright 这样的工具来验证和优化自己的输出。但它仍然需要方向。模型的上限，取决于你的提示词有多精准。
从这里开始：4 个基础
将推理等级设为低或中等——听起来反直觉，但效果确实更好。保持模型快速且专注。
先定义你的设计系统——字体、配色、布局规则，在写任何代码之前就定好。
提供视觉参考——一张截图、一个情绪板，什么都行。模型会从图片中推断节奏、间距和比例。
给真实内容——真实的文案、真实的产品上下文。占位文字只会产出占位思维。
真正有效的设计规则
狠狠约束模型。OpenAI 自己的启动提示词就包含了这样的规则：
单一构图——首屏必须作为一个完整的构图来阅读。
Hero 区域禁止使用卡片——永远不要。
品牌优先——在品牌页面上，产品名必须达到 Hero 级别的视觉权重。
落地页默认使用全出血 Hero——图片铺满整个首屏。
最多两种字体。一个强调色。
每个区块只做一件事——一个目的，一个要点。
试金石法则：如果去掉 Hero 图片后页面仍然完整可用，说明这张图片太弱了。
把页面当作叙事来构建
动笔之前，先写三样东西：
视觉主旨——用一句话描述整体氛围和调性。
内容规划——Hero、支撑内容、细节展示、最终 CTA。
交互主旨——2-3 个动效想法。
然后按这个顺序推进：
- Hero——建立身份感和承诺
- 支撑画面——展示上下文
- 产品细节——解释产品方案
- 社会证明——建立可信度
- 最终 CTA——转化
每个区块只做一件事。如果一个区块试图做两件事，砍掉一个。
应用 vs 落地页
对于应用和仪表盘，规则有所不同。默认采用 Linear 风格的克制：
平静的表面层次。
强有力的字体和间距。
少用颜色。
密集但可读的信息。
只有当卡片本身就是交互单元时，才使用卡片。
避免仪表盘卡片的马赛克式堆砌、每个区域都加粗边框、装饰性渐变、多个相互竞争的强调色。
试金石法则：如果操作员只扫一眼标题、标签和数字——他能不能立刻理解这个页面？
动效：交付 2-3 个，不是 10 个
动效创造存在感和层次感，而不是噪音。挑选三个有意图的动效，贯彻到底：
Hero 区域的一个入场动画序列。
一个滚动联动或吸顶效果。
一个悬停、揭示或布局过渡效果。
推荐使用 Framer Motion。如果一个动效只是装饰性的，删掉它。
前端技能
OpenAI 发布了一个开源 skill，把以上所有内容封装成一个可复用的提示词层。安装方式：
$ skill-installer frontend-skill
它会在写代码之前，强制模型先定义视觉主旨、内容规划和交互主旨。值得在下一次构建之前跑一遍。
总结
GPT-5.4 确实能生成真正出色的前端。但前提是：
提前约束布局系统。
提供视觉参考。
把页面当作叙事来组织，而不是文档。
使用真实内容，而不是占位符。
将推理等级保持在低或中等。
模型的能力已经足够。提示词就是你的设计简报。你打算用它构建的第一个东西是什么？
