GPT-5.4 的网页开发能力优于前代模型，能够生成更具视觉吸引力、更有挑战性的前端设计。我们在训练 GPT-5.4 时，尤其注重提升 UI 能力和图像运用能力。通过恰当的引导，模型可以打造可用于生产环境的前端，融入细腻的设计巧思、精心打磨的交互和精美的图像。
网页设计可以呈现出丰富多样的效果。优秀的设计在克制与创新之间取得平衡，既借鉴经得起时间考验的模式，也引入新意。GPT-5.4 学习了多种多样的设计方法，了解构建网站的多种方式。
当提示不够具体时，模型往往会沿用训练数据中频繁出现的模式。其中一些是经过验证的惯例，但许多只是我们希望避免、却在数据中过于常见的习惯。生成的结果通常看起来合理，也能正常使用，但可能趋向千篇一律的结构、不够鲜明的视觉层次，以及达不到我们心中预期的设计。
本指南介绍了一些实用技巧，帮助您引导 GPT-5.4 实现您构想中的设计。
模型改进
GPT-5.4 在多个方面都有提升，而在前端开发方面，我们重点改进了三项实用能力：
- 在整个设计过程中提供更强的图像理解能力
- 构建功能更完整的应用和网站
- 更好地使用工具检查、测试和验证自身的工作成果
图像理解与工具使用
GPT-5.4 经过训练，能够原生使用图像搜索和图像生成工具，从而将视觉推理直接融入设计过程。为获得最佳效果，请指示模型先生成情绪板或多个视觉方案，再选择最终素材。
您可以明确描述图像应体现的特征，例如风格、配色、构图或氛围，引导模型找到优质的视觉参考。您还应在提示中加入指令，引导模型根据需要复用先前生成的图像、调用图像生成工具创建新的视觉素材，或参考指定的外部图像。
Default to using any uploaded/pre-generated images. Otherwise use the image generation tool to create visually stunning image artifacts. Do not reference or link to web images unless the user explicitly asks for them.功能改进
模型经过训练，能够开发更完整、功能更健全的应用。您可以期待它在持续时间较长的任务中表现得更可靠。过去您认为无法实现的游戏和复杂用户体验，如今只需一两轮交互就能成为现实。
计算机使用与验证
GPT-5.4 是我们首个经过计算机使用训练的主线模型。它能够原生操作界面，并结合 Playwright 等工具，反复检查工作成果、验证行为并完善实现，从而支持持续时间更长、自主程度更高的开发工作流。
观看我们的发布视频，了解这些能力的实际表现。
Playwright 对前端开发尤其有价值。它让模型能够检查渲染后的页面、测试多种视口、逐步操作应用流程，以及发现状态或导航问题。提供 Playwright 工具或技能，可以显著提高 GPT-5.4 生成精致、功能完整的界面的可能性。结合增强的图像理解能力，模型还可以通过它从视觉上验证自己的工作成果，并在提供了参考 UI 时检查结果是否与之相符。
实用技巧快速入门
如果您只打算采用本文中的少数几项做法，请从以下几点开始：
- 先选择低推理级别。
- 预先明确设计系统和约束条件，包括字体排版、配色和布局。
- 提供视觉参考或情绪板，例如附上一张截图，为模型设定视觉设计的边界。
- 预先明确叙事思路或内容策略，引导模型创作内容。
您可以从以下提示开始。
## Frontend tasks
When doing frontend design tasks, avoid generic, overbuilt layouts.
**Use these hard rules:**
- One composition: The first viewport must read as one composition, not a dashboard (unless it's a dashboard).
- Brand first: On branded pages, the brand or product name must be a hero-level signal, not just nav text or an eyebrow. No headline should overpower the brand.
- Brand test: If the first viewport could belong to another brand after removing the nav, the branding is too weak.
- Typography: Use expressive, purposeful fonts and avoid default stacks (Inter, Roboto, Arial, system).
- Background: Don't rely on flat, single-color backgrounds; use gradients, images, or subtle patterns to build atmosphere.
- Full-bleed hero only: On landing pages and promotional surfaces, the hero image should be a dominant edge-to-edge visual plane or background by default. Do not use inset hero images, side-panel hero images, rounded media cards, tiled collages, or floating image blocks unless the existing design system clearly requires it.
- Hero budget: The first viewport should usually contain only the brand, one headline, one short supporting sentence, one CTA group, and one dominant image. Do not place stats, schedules, event listings, address blocks, promos, "this week" callouts, metadata rows, or secondary marketing content in the first viewport.
- No hero overlays: Do not place detached labels, floating badges, promo stickers, info chips, or callout boxes on top of hero media.
- Cards: Default: no cards. Never use cards in the hero. Cards are allowed only when they are the container for a user interaction. If removing a border, shadow, background, or radius does not hurt interaction or understanding, it should not be a card.
- One job per section: Each section should have one purpose, one headline, and usually one short supporting sentence.
- Real visual anchor: Imagery should show the product, place, atmosphere, or context. Decorative gradients and abstract backgrounds do not count as the main visual idea.
- Reduce clutter: Avoid pill clusters, stat strips, icon rows, boxed promos, schedule snippets, and multiple competing text blocks.
- Use motion to create presence and hierarchy, not noise. Ship at least 2-3 intentional motions for visually led work.
- Color & Look: Choose a clear visual direction; define CSS variables; avoid purple-on-white defaults. No purple bias or dark mode bias.
- Ensure the page loads properly on both desktop and mobile.
- For React code, prefer modern patterns including useEffectEvent, startTransition, and useDeferredValue when appropriate if used by the team. Do not add useMemo/useCallback by default unless already used; follow the repo's React Compiler guidance.
Exception: If working within an existing website or design system, preserve the established patterns, structure, and visual language.提升设计效果的技巧
从设计原则入手
明确约束条件，例如只使用一个 H1 标题、不超过六个区块、最多两种字体、一种强调色，并在首屏放置一个主要行动号召（CTA）。
提供视觉参考
参考截图或情绪板有助于模型理解布局节奏、字号层级、间距体系和图像处理方式。下面的示例展示了 GPT-5.4 自行生成情绪板，供用户审查。
在 Codex 中使用 GPT-5.4 创建的情绪板，灵感来自纽约市咖啡文化
与 Y2K 美学
按叙事脉络组织页面
典型的营销页面结构：
- 首屏主视觉：明确品牌身份与价值承诺
- 辅助图像：展示背景或环境
- 产品详情：介绍所提供的产品或服务
- 社会认同：建立可信度
- 最后的行动号召：将兴趣转化为行动
要求遵循设计系统
鼓励模型在构建初期建立清晰的设计系统。定义核心设计 Token，例如 background、surface、primary text、muted text 和 accent，以及 display、headline、body 和 caption 等字体排版角色。这种结构有助于模型在整个应用中生成一致、可扩展的 UI 模式。
对于大多数网页项目，采用熟悉的技术栈（例如 React 和 Tailwind ）作为起点效果很好。GPT-5.4 在使用这些工具时表现尤其出色，更容易快速迭代并产出精致的成果。
动效和分层 UI 元素可能增加复杂性，尤其是在固定或悬浮组件与主要内容相互影响时。使用动画、覆盖层或装饰层时，加入引导模型避免布局问题的说明会很有帮助。例如：
Keep fixed or floating UI elements from overlapping text, buttons, or other key content across screen sizes. Place them in safe areas, behind primary content where appropriate, and maintain sufficient spacing.适当降低推理级别
对于较简单的网站，推理并非越多越好。在实践中， 低、中推理级别往往能带来更好的前端效果，让模型保持快速、专注，减少过度思考，同时也为更有挑战性的设计保留了提高推理级别的空间。
以真实内容为设计基础
向模型提供真实文案、产品背景或明确的项目目标，是改善前端效果最简单的方法之一。这些上下文有助于模型选择合适的网站结构，为各个区块组织更清晰的叙事，并写出更可信的文案，而不是套用通用的占位内容模式。
使用前端技能整合这些方法
为了帮助大家在通用前端任务中充分发挥 GPT-5.4 的能力，我们还准备了一项专用的 frontend-skill，您可以在下方找到。它在结构、审美和交互模式方面为模型提供更有力的指导，帮助模型一开始就产出更精致、设计意图更明确、更令人愉悦的作品。
前端技能
---
name: frontend-skill
description: Use when the task asks for a visually strong landing page, website, app, prototype, demo, or game UI. This skill enforces restrained composition, image-led hierarchy, cohesive content structure, and tasteful motion while avoiding generic cards, weak branding, and UI clutter.
---
# Frontend skill
Use this skill when the quality of the work depends on art direction, hierarchy, restraint, imagery, and motion rather than component count.
Goal: ship interfaces that feel deliberate, premium, and current. Default toward award-level composition: one big idea, strong imagery, sparse copy, rigorous spacing, and a small number of memorable motions.
## Working Model
Before building, write three things:
- visual thesis: one sentence describing mood, material, and energy
- content plan: hero, support, detail, final CTA
- interaction thesis: 2-3 motion ideas that change the feel of the page
Each section gets one job, one dominant visual idea, and one primary takeaway or action.
## Beautiful Defaults
- Start with composition, not components.
- Prefer a full-bleed hero or full-canvas visual anchor.
- Make the brand or product name the loudest text.
- Keep copy short enough to scan in seconds.
- Use whitespace, alignment, scale, cropping, and contrast before adding chrome.
- Limit the system: two typefaces max, one accent color by default.
- Default to cardless layouts. Use sections, columns, dividers, lists, and media blocks instead.
- Treat the first viewport as a poster, not a document.
## Landing Pages
Default sequence:
1. Hero: brand or product, promise, CTA, and one dominant visual
2. Support: one concrete feature, offer, or proof point
3. Detail: atmosphere, workflow, product depth, or story
4. Final CTA: convert, start, visit, or contact
Hero rules:
- One composition only.
- Full-bleed image or dominant visual plane.
- Canonical full-bleed rule: on branded landing pages, the hero itself must run edge-to-edge with no inherited page gutters, framed container, or shared max-width; constrain only the inner text/action column.
- Brand first, headline second, body third, CTA fourth.
- No hero cards, stat strips, logo clouds, pill soup, or floating dashboards by default.
- Keep headlines to roughly 2-3 lines on desktop and readable in one glance on mobile.
- Keep the text column narrow and anchored to a calm area of the image.
- All text over imagery must maintain strong contrast and clear tap targets.
If the first viewport still works after removing the image, the image is too weak. If the brand disappears after hiding the nav, the hierarchy is too weak.
Viewport budget:
- If the first screen includes a sticky/fixed header, that header counts against the hero. The combined header + hero content must fit within the initial viewport at common desktop and mobile sizes.
- When using `100vh`/`100svh` heroes, subtract persistent UI chrome (`calc(100svh - header-height)`) or overlay the header instead of stacking it in normal flow.
## Apps
Default to Linear-style restraint:
- calm surface hierarchy
- strong typography and spacing
- few colors
- dense but readable information
- minimal chrome
- cards only when the card is the interaction
For app UI, organize around:
- primary workspace
- navigation
- secondary context or inspector
- one clear accent for action or state
Avoid:
- dashboard-card mosaics
- thick borders on every region
- decorative gradients behind routine product UI
- multiple competing accent colors
- ornamental icons that do not improve scanning
If a panel can become plain layout without losing meaning, remove the card treatment.
## Imagery
Imagery must do narrative work.
- Use at least one strong, real-looking image for brands, venues, editorial pages, and lifestyle products.
- Prefer in-situ photography over abstract gradients or fake 3D objects.
- Choose or crop images with a stable tonal area for text.
- Do not use images with embedded signage, logos, or typographic clutter fighting the UI.
- Do not generate images with built-in UI frames, splits, cards, or panels.
- If multiple moments are needed, use multiple images, not one collage.
The first viewport needs a real visual anchor. Decorative texture is not enough.
## Copy
- Write in product language, not design commentary.
- Let the headline carry the meaning.
- Supporting copy should usually be one short sentence.
- Cut repetition between sections.
- do not include prompt language or design commentary into the UI
- Give every section one responsibility: explain, prove, deepen, or convert.
If deleting 30 percent of the copy improves the page, keep deleting.
## Utility Copy For Product UI
When the work is a dashboard, app surface, admin tool, or operational workspace, default to utility copy over marketing copy.
- Prioritize orientation, status, and action over promise, mood, or brand voice.
- Start with the working surface itself: KPIs, charts, filters, tables, status, or task context. Do not introduce a hero section unless the user explicitly asks for one.
- Section headings should say what the area is or what the user can do there.
- Good: "Selected KPIs", "Plan status", "Search metrics", "Top segments", "Last sync".
- Avoid aspirational hero lines, metaphors, campaign-style language, and executive-summary banners on product surfaces unless specifically requested.
- Supporting text should explain scope, behavior, freshness, or decision value in one sentence.
- If a sentence could appear in a homepage hero or ad, rewrite it until it sounds like product UI.
- If a section does not help someone operate, monitor, or decide, remove it.
- Litmus check: if an operator scans only headings, labels, and numbers, can they understand the page immediately?
## Motion
Use motion to create presence and hierarchy, not noise.
Ship at least 2-3 intentional motions for visually led work:
- one entrance sequence in the hero
- one scroll-linked, sticky, or depth effect
- one hover, reveal, or layout transition that sharpens affordance
Prefer Framer Motion when available for:
- section reveals
- shared layout transitions
- scroll-linked opacity, translate, or scale shifts
- sticky storytelling
- carousels that advance narrative, not just fill space
- menus, drawers, and modal presence effects
Motion rules:
- noticeable in a quick recording
- smooth on mobile
- fast and restrained
- consistent across the page
- removed if ornamental only
## Hard Rules
- No cards by default.
- No hero cards by default.
- No boxed or center-column hero when the brief calls for full bleed.
- No more than one dominant idea per section.
- No section should need many tiny UI devices to explain itself.
- No headline should overpower the brand on branded pages.
- No filler copy.
- No split-screen hero unless text sits on a calm, unified side.
- No more than two typefaces without a clear reason.
- No more than one accent color unless the product already has a strong system.
## Reject These Failures
- Generic SaaS card grid as the first impression
- Beautiful image with weak brand presence
- Strong headline with no clear action
- Busy imagery behind text
- Sections that repeat the same mood statement
- Carousel with no narrative purpose
- App UI made of stacked cards instead of layout
## Litmus Checks
- Is the brand or product unmistakable in the first screen?
- Is there one strong visual anchor?
- Can the page be understood by scanning headlines only?
- Does each section have one job?
- Are cards actually necessary?
- Does motion improve hierarchy or atmosphere?
- Would the design still feel premium if all decorative shadows were removed?
在 Codex App 中运行以下命令，安装 frontend-skill：
$skill-installer frontend-skill以下是几个在前端设计技能帮助下生成的网站示例。
落地页
游戏
仪表板
核心要点
当提示提供清晰的设计约束、视觉参考、有条理的叙事结构和明确的设计系统时，GPT-5.4 就能生成高质量的前端界面。
我们希望这些技巧能帮助您构建更具特色、设计精良的应用。
如果您想分享完全使用 GPT-5.4 和 Codex 等编程智能体生成的项目，欢迎提交您的应用，在我们的作品展示区中展示。