有用的 UI 提示读起来就像产品规格。它命名画布、层次结构、实际内容、组件、状态、响应规则和验收检查。视觉风格是在这些决定之后产生的。该顺序为 GPT Image 2.5 提供了足够的结构来生成设计人员可以查看且开发人员可以解释的模型。
从 图3首页 开始，打开 GPT 图像 2.5 Flare 工作区，并在测试下面的提示时将 GPT Image 2.5 模型页面 放在附近。 Flare 是快速迭代的实用第一步。 Sunburst 是后期更高保真度审阅框架的一个选项。在您自己的屏幕上测试两者，而不是将这种区别视为通用基准。
上面的图像和短视频是该工作流程的编辑插图。它们不是已发货产品的基准输出或屏幕截图。
快速解答：屏幕后面提示系统
不要从“制作现代财务仪表板”开始。这一要求让模型去发明产品、数据、导航和现代的定义。给它一个屏幕合同：
产品：一家小型软件公司的订阅分析。
用户工作：在 30 秒内找到每月收入下降的原因。
CANVAS：桌面 Web 应用程序，1440 x 1024，内容宽度 1200。
层次结构：页面标题、日期范围、四个汇总指标、趋势图、变化表。
导航：选择“概览”的左栏；下面是计费、客户和设置。
精确复制：仅使用数据块中提供的标签和值。
组件：度量卡、分段数据控件、折线图、可排序表、状态芯片。
状态：在小状态表上包括可见的加载模式和空表变体。
风格：冷静的 B2B 产品 UI、中性背景、蓝色调、紧凑的间距。
避免：发明徽标、虚假推荐、装饰性玻璃效果、难以阅读的微小文字。
输出：一个主屏幕加上一个狭窄的组件状态条。
这个提示使得重要的决定变得可以检查。如果图表占据页面主导地位，您可以更改层次结构。如果缺少空状态，可以直接请求。仅针对心情的提示会减少修复的难度。
为什么有吸引力的 UI 模型在切换时会失败
生成的屏幕可能看起来已完成，但其行为未定义。导航在桌面上可能包含五个目的地，在移动设备上可能包含七个目的地。卡可能会显示成功状态，但不会显示加载或错误情况。数据表可能使用无人提供的可信数字。这些差距在实施过程中成为产品决策，解决这些差距的速度更慢且成本更高。
该图像也是一个扁平化的工件。它不携带组件名称、标记、断点、语义结构、键盘顺序或数据契约。将其视为视觉提案。切换数据包必须说明像素中不可见的规则。
使用模型回答视觉问题：信息顺序有意义吗？主要动作是否明显？密集区域能呼吸吗？使用行为的书面要求：数据加载时会发生什么？哪些列在 768 像素以下消失？验证文本出现在哪里？没有颜色还有什么可以访问的？
屏幕合约中的七个字段
每个面向生产的 UI 提示都应涵盖七个字段。它们可以适合一页文本。
| 领域 | 决定记录 | 它可以防止失败 |
|---|---|---|
| 用户工作 | 屏幕必须支持的一项任务 | 看似忙碌但没有优先级的页面 |
| 帆布 | 设备、宽度、高度和内容区域 | 没有现实限制的布局 |
| 层次结构 | 有序区域和主导作用 | 所有事物的视觉重量均等 |
| 内容 | 精确的标签、值和限制 | 发明数据和不稳定副本 |
| 组件 | 命名重复的接口部件 | 卡片、控件和间距不一致 |
| 州 | 正在加载、为空、错误、已禁用、成功 | 仅限快乐路径的设计 |
| 响应式规则 | 不变量和允许的变换 | 不相关的移动和桌面屏幕 |
将内容编写为单独的块。如果模特可能发明填充物，请说出在哪里。如果每个标签都受到控制，请引用每个标签。除非您提供经过验证的数字，否则请保持图表的质量。看起来很现实的图表仍然可以提出事实主张。
内容政策
准确使用这些导航标签：主页、行程、已保存、个人资料。
准确使用此页面标题：计划您的下一次旅行。
使用这些示例卡：沿海逃生、城市探险家、山间小径。
请勿添加价格、评级、评论计数、徽章、目的地或促销文案。
如果未指定文本区域，请将其留空而不是发明文本。
下一步选择 Flare 或 Sunburst
模型选择应遵循您需要做出的决定。在布局仍在移动时使用 Flare：屏幕顺序、组件比例、密度、导航和响应式结构。更快的迭代很重要，因为大多数早期草稿都应该被丢弃。
在屏幕合同确定后尝试Sunburst，详细的审查框架会有所帮助。这可能包括精美的演示图像、细致入微的视觉方向或需要仔细检查的困难编辑。更高的视觉保真度并不能修复不完整的产品要求。模糊的旭日提示仍然会产生模糊的屏幕。
AI图像生成器 提供了更广泛的入口点，而当您想要比较 UI 工作之外的提示结构时，GPT Image 2提示库 非常有用。将所选模型和质量设置保留在您的交接笔记中，以便其他队友可以重现生成上下文。
移动端登录提示
入职需要一份有限的工作。此示例帮助新用户连接日历并选择通知时间，而无需将屏幕变成营销轮播。
为日历助理创建三屏移动设备入门流程。
画布
- 三个类似 iPhone 的画板，尺寸为 390 x 844，并排显示。
- 尊重安全区域。使用一种一致的 8 点间距系统。
屏幕 1：连接
- 标题：“连接您的日历”
- 支持台词：“在不改变现有活动的情况下查看开放时间。”
- 主按钮：“连接日历”
- 辅助文本链接：“现在不行”
屏幕 2：选择
- 标题：“我们什么时候应该提醒您？”
- 三种广播选项：前 10 分钟、前 30 分钟、前 1 小时。
- 选择 30 分钟前。
屏幕 3：准备就绪
- 标题：“你准备好了”
- 显示包含两个事件的紧凑示例议程。
- 主按钮：“打开我的一天”
系统规则
- 在所有三个屏幕上保持按钮位置稳定。
- 使用一种插图风格和一种图标系列。
- 将进度显示为 1 of 3、2 of 3、3 of 3。
- 没有推荐、定价、渐变、徽标或额外的设置步骤。
以序列形式查看输出。后退导航应该可以在第二个和第三个屏幕上实现。选定的通知值需要可见的选定状态。最终屏幕不应引入提示从未定义的新权限请求。
SaaS 仪表板提示
仪表板提示需要一个问题，而不仅仅是一个小部件列表。下面的用户作业决定了页面层次结构。
为支持运营主管设计桌面 SaaS 仪表板。
用户必须确定哪个工单类别导致了今天的积压。
布局
- 1440 x 1024 画布，带有 240 像素的左侧导航栏。
- 标题：“支持概述”、本地日期、团队选择器。
- 第一行：打开、等待、今天已解决、第一响应中位数。
- 主要区域：左侧为按小时排列的待办事项图表，右侧为类别表。
- 底部区域：五张最旧的开放门票，附有所有者和年龄。
数据
打开184；等待36；今天解决92；首次响应时间中位数为 18 分钟。
类别：计费 71、登录 48、生成 39、导出 26。
不要添加百分比或趋势声明。
互动提示
- 选择计费行并过滤每小时图表。
- 图表上方出现一个可见的“清除过滤器”控件。
- 排序指示器仅出现在待办事项列上。
风格
紧凑的操作用户界面，灰白色画布，深色墨水文本，蓝色选择强调。
避免装饰性插图、超大卡片、玻璃效果和虚假警报。
根据数据块检查每个数字。然后询问所选的计费行和过滤后的图表是否可以在不单独依赖颜色的情况下被理解。如果关系不明确，请添加图标、标签或边框处理。
定价页面提示
当视觉强调默默地改变报价时，定价页面就会失败。控制计划名称、价格、包含的项目、排除项和 CTA 标签。
为团队笔记应用程序创建响应式定价页面。
计划
免费：0 美元、3 个项目、1 GB 存储、社区支持。 CTA：“免费开始”。
团队：每位成员每月 12 美元，无限项目，50 GB 存储空间，电子邮件支持。
CTA：“开始团队试用”。将此计划标记为“最多选择”。
商业：每位会员每月 28 美元、SSO、审核日志、优先支持。
CTA：“联系销售人员”。
桌面版
- 1440 像素画布，三个相等的平面列，以团队为中心。
- 将每月帐单放在价格旁边，而不是放在远处的页脚中。
移动
- 390 像素画布，堆叠计划免费、团队、商业。
- 无需水平轮播即可保持每个价格和 CTA 可见。
规则
- 不要发明折扣、年价、保证、客户数量或功能。
- 仅对包含的项目使用复选标记。将排除项写为纯文本。
- 在不提高价格的情况下，为团队提供更强的边框对比度。
生成后，逐行比较计划。即使页面看起来可信，缺少排除或发明的折扣也是产品错误。在代码中重建精确的定价文本，而不是将生成的排版视为生产艺术品。
清空、加载、错误状态提示
参考屏幕具有稳定的组件系统后生成状态。重复使用相同的容器尺寸，以便布局不会在状态之间跳转。
使用批准的项目列表屏幕作为视觉参考，创建状态表。
显示同一 720 x 420 内容面板的四个版本：
1. 默认：三个项目行，包含名称、所有者、状态和更新日期。
2. 加载：三个中性骨架行，没有假文字或数字。
3. 空：标题“尚无项目”，一句话，按钮“创建项目”。
4. 错误：标题“项目无法加载”，消息“检查您的连接并重试。”，
主要按钮“重试”，辅助文本链接“查看状态”。
保存
面板大小、标题位置、列对齐方式、背景、边框、半径、
文字比例、间距和动作位置。
无障碍提示
不要仅通过颜色来传达错误或加载状态。
保持焦点轮廓在重试和创建项目上可见。
不要将唯一的解释放在图标内。
上图是为本指南制作的 QA 参考。它显示要检查的类别，而不是生产组件库。
响应式移动端和桌面端提示
两个不相关的画板不定义响应行为。首先陈述不变量，然后列出允许的变换。
为同一个旅行规划产品创建配对的移动和桌面屏幕。
不变量
- 内容顺序相同：搜索、类别过滤、特色行程、剩余行程。
- 两张画布上的卡片标题和目的地相同。
- 相同的蓝色强调、图像处理、类型系列和卡片半径。
- 搜索是两种宽度的主要操作。
390 像素的移动设备
- 底部导航，包括主页、搜索、已保存、个人资料。
- 具有 16 像素页面填充的一栏旅行卡。
- 类别条在一行上水平滚动。
1440 像素桌面
- 顶部导航，包括“旅行”、“探索”、“已保存”、“个人资料”。
- 1200 像素内容区域内的三列旅行网格。
- 搜索字段位于标题中；类别筹码位于网格上方。
不要
更改卡片副本、添加目的地、隐藏搜索操作或创建单独的视觉主题。
这种配对的提示使得差异是有意的。切换过程中，把每一个转变变成一个规则：在桌面断点处底部导航变成顶部导航；卡牌列表由一栏变为三栏；搜索控件移动但保持相同的作业和标签。
设置和权限提示
设置页面显示模型是否理解系统行为。按结果对控制进行分组，使破坏性行为难以意外触发。
为共享工作区设计桌面设置页面。
部分
个人资料：姓名、角色、个人资料图像操作。
通知：电子邮件摘要选择、产品更新切换、提及警报切换。
安全性：活动会话链接、更改密码按钮、双因素状态。
工作区危险区域：离开工作区按钮。
行为线索
- 编辑后在配置文件旁边显示保存的状态。
- 当没有字段更改时显示禁用的“保存”按钮。
- 使用文本标签为开关提供不同的打开和关闭状态。
- 将“离开工作区”置于单独的危险区域并附有解释性副本。
- 不要在同一主屏幕中显示破坏性确认模式。
布局
1440 x 1024，240 像素左栏，720 像素设置列，宽大的部分间隙。
使用普通的产品用户界面，而不是营销登陆页面。
请审阅者描述每个控件的作用，而无需猜测。如果开关没有标签，保存的状态没有持续时间，或者危险操作看起来像正常的导航链接，则视觉效果需要修复，并且需求需要更多细节。
修复一个区域而不丢失屏幕
有用的编辑提示会命名一个缺陷、一个区域、替换项和不变量。不要将版式修复与颜色重新设计和布局更改混合在一起。
仅编辑桌面仪表板的标题。
将页面标题“支持概述”替换为“支持概述”。
将标题保留在一行并保留其当前位置、字体大小、粗细和颜色。
保留日期、团队选择器、导航栏、指标、图表、表格、间距、
背景、边框和所有其他可见的单词。
不要添加任何新标签或图标。
每次编辑后检查完整的输出。如果模型还更改了两个指标，则更正的标题没有帮助。如果出现附带更改，请返回到最干净的先前版本并进一步缩小编辑请求范围。为了在以后的屏幕上保持视觉一致性，品牌风格参考工作流程 解释了如何保持身份、调色板、照明和构图规则固定。对于密集的视觉层次结构，请使用 信息图提示工作流程。
构建开发人员移交数据包
最终的模型是切换数据包中的一项，而不是整个数据包。附上已接受的屏幕并记录像素无法承载的决定。
- 命名每个屏幕及其用户作业。
- 列出准确的批准副本和样本数据。标记每个占位符。
- 将重复的视觉部分映射到建议的组件。
- 将间距、类型、颜色、半径和高程标记记录为实现值。
- 定义加载、空、错误、禁用、成功和权限状态。
- 将断点规则表述为不变量和变换。
- 添加键盘、焦点、标签、对比度、目标大小、简化运动和错误恢复检查。
- 向所有者列出未解决的产品问题，而不是让代码默默地回答它们。
开发人员应该可以自由地纠正不可能的几何形状、无法访问的交互和平台约定。模型确定了意图。它不会覆盖工作软件。
实施前审核屏幕
使用四次审核。首先，将每个可见的单词和数字与批准的内容块进行比较。其次，跟踪主要用户作业并确认层次结构和操作支持它。第三，检查状态和响应行为。第四，检查切换数据包是否有图像无法表达的细节。
在全分辨率下，查找拼写、不一致的间距、扭曲的图标、意外重叠和虚构的数据。在 390 像素处，确认标题、主要操作和状态消息仍然可读。仅适用于演示尺寸的设计尚未准备好实施。
请勿使用模型作为界面可访问、可用或技术上可行的证据。这些声明需要原型、代码以及用户或自动化测试。生成的 UI 作为快速提案是最强大的，它使产品决策足够可见以进行辩论。
可重复使用的最终提示
下面的模板将产品需求置于视觉装饰之前。删除不适用的字段，但不要用形容词替换它们。
为[产品]创建[移动/桌面/响应式对] UI。
用户工作
[用户必须完成的一项任务。]
画布
[精确尺寸、内容宽度、安全区域、网格和外部填充。]
信息订购
1.【第一区域及其用途】
2.【第二区域及其目的】
3.【第三区域及其目的】
确切的内容
[批准的导航、标题、标签、值、消息和 CTA 副本。]
不要在此块之外发明文本或数据。
组件
[命名控件、卡片、表格、导航、图表、表单和重复模式。]
国家
[默认、悬停、焦点、加载、空、错误、禁用、成功、权限。]
响应规则
保留：[内容、顺序、动作和视觉系统不变量]。
变换：[每个宽度允许的导航、列、换行、隐藏或重新排序]。
视觉方向
[特定产品风格、类型角色、调色板角色、密度、边框和图像。]
质量检查
没有发明的标志、数据、特征、推荐、徽章、水印、难以辨认的微缩文本、
组件样式不一致，或仅颜色状态信号。
运行 GPT 图像 2.5 Flare 工作区 中的模板。当您想要比较其他图像工作流程时，请返回图3首页，并使用GPT Image 2.5 模型页面选择下一代路线。将获胜提示、接受的图像、维修历史记录和书面交接规则放在一起。该数据包将生成的屏幕转变为可审查的产品决策。
常见问题
我应该使用哪种 GPT Image 2.5 模型来制作 UI 模型？
当布局和内容仍在变化时，从 Flare 开始。当更高保真度的审查框架可以改变决定时，测试 Sunburst。记录模型和设置，因为结果取决于实际工作负载。
GPT Image 2.5 可以生成可用于生产的 UI 代码吗？
不。输出是视觉参考，而不是组件树或行为规范。用代码构建接口并根据书面验收标准对其进行测试。
如何在 UI 模型中保持文本准确？
提供精确的副本，减少每个屏幕的文本量，并检查每个标签和编号。一次修复一个文本区域，同时保留图像的其余部分。
手机版和桌面版应该如何提示？
给出两个画布的宽度。将不变的内容和操作与可能在断点之间发生变化的导航、网格和换行规则分开。
我应该在一张图像中生成每个应用程序状态吗？
首先稳定一个参考屏幕。然后请求一个紧凑的状态表，以重用其尺寸、类型、间距、颜色和控件。
精美的模型能否证明可访问性？
否。检查所实现的界面中的语义、键盘顺序、焦点、标签、对比度、目标大小、运动偏好和错误恢复。
操作步骤
- 编写屏幕合同
在要求视觉风格之前定义用户作业、画布、信息层次结构、精确副本、组件和交互状态。
- 生成一个参考屏幕
使用 GPT Image 2.5 Flare 快速测试层次结构，然后以全尺寸和移动宽度检查结果。
- 添加状态和断点
请求加载、空、错误和成功状态以及具有显式不变量的配对移动和桌面布局。
- 一次修复一个缺陷
确定一个区域，引用所需的更改，并说明哪些周围元素必须保持固定。
- 构建切换数据包
将接受的副本、间距、组件、状态、响应行为和未解决的问题转移到书面实施清单中。
常见问题
我应该使用哪种 GPT Image 2.5 模型来制作 UI 模型？
当您需要快速布局迭代时，请从 Flare 开始。当您的工作负载证明额外的生成时间合理时，测试 Sunburst 以获得更高保真度的审阅框架。
GPT Image 2.5 可以生成可用于生产的 UI 代码吗？
不会。生成的模型是扁平化的视觉参考。开发人员仍然需要组件定义、响应规则、可访问语义、数据行为和验收标准。
如何在 UI 模型中保持文本准确？
提供准确的副本库存、限制每个屏幕的副本、检查每个标签，并针对一次一个文本缺陷使用有针对性的编辑提示。
手机版和桌面版应该如何提示？
命名两个画布宽度，定义必须保持一致的内容，并指定可以移动、折叠、换行或成为不同导航模式的内容。
我应该在一张图像中生成每个应用程序状态吗？
首先使用一个参考屏幕。其组件系统稳定后，请求一个紧凑的状态表，用于加载、清空、错误、禁用和成功变体。
精美的模型是否证明可访问性？
不。视觉对比只是一项检查。键盘顺序、语义结构、屏幕阅读器标签、动作偏好、目标大小和错误恢复需要单独的实现测试。