# 如何为 UI 样机编写 GPT Image 提示词

如何用提示词让 GPT Image 2 生成布局可控、标签清晰可读的仪表盘、App 界面和设备样机。

URL: https://www.gptimagehub.com/zh-CN/guides/gpt-image-ui-mockup-prompts
Category: UI / UX 设计
Updated: 2026-10-20
Reading time: 3 minutes

## Direct answer

好的 UI 样机 GPT Image 提示词，会写明产品、界面及其主要组件、所在的设备或画框、视觉风格，以及必须清晰可读的确切文字。按阅读顺序列出组件，并保持界面文案简短，因为模型渲染少量大号标签远比渲染成段的界面文字可靠。

## 像画线框图一样描述界面

先说明这个界面的用途和包含的内容，并按用户阅读的顺序展开：导航、页头、主体内容、次级面板和操作按钮。逐项列出组件时，模型的布局会比仅用“现代仪表盘”这类风格词暗示时更可预测。

- 写明产品和界面：“SaaS 计费工具的数据分析仪表盘”或“冥想 App 的新手引导页”。
- 按顺序列出区域：侧边栏导航、带搜索框的顶栏、三张 KPI 卡片、一张折线图，以及一个最近交易表格。
- 说明疏密程度：宽松的间距、统一的卡片尺寸、清晰的对齐。

## 选择呈现方式：平面界面、设备或场景

先确定你需要的是用于案例展示的平面界面截图、用于落地页的设备样机，还是用于营销的实景照片。每种情况需要不同的措辞。

- 平面：“扁平 UI 截图，无设备边框，16:9”。
- 设备：“显示在一台轻薄笔记本电脑上，略微倾斜，屏幕朝向镜头，带柔和反光”。
- 场景：“自然日光下木质书桌上的笔记本电脑，浅景深”；界面会更小，文字也更难辨认。

## 界面文字要简短、精确

文字无法辨认是生成 UI 时最常见的问题。只给少数关键标签加引号，其余部分用占位文字行带过即可。

- 精确引用标题和按钮文字：“营收”“升级套餐”。
- 正文文案改用占位文字行。
- 避免使用包含真实数据的长表格；改为要求五行示例交易数据。

## 定义视觉系统

玻璃拟态之类的风格词有一定帮助，但一套简短的视觉系统能让多个界面的效果更加一致。

- 颜色：背景色、表面色、主强调色和状态色。
- 字体：一种无衬线字体家族、清晰的字重层级，以及标题与标签之间的字号对比。
- 组件：圆角、阴影、描边和图标风格。

## Checklist

- 已写明产品、界面用途和目标用户。
- 组件按阅读顺序列出。
- 已选定呈现方式：平面截图、设备或场景。
- 只有简短且加了引号的文字需要清晰可读。
- 已定义颜色、字体和组件风格。
- 画面比例与目标相匹配：桌面端用 16:9，手机端用 9:16。

## FAQ

### GPT Image 2 能生成可用的 UI 设计吗？

它能生成逼真的视觉概念和样机，适用于演示、落地页和情绪板。请把输出当作视觉参考而非生产级设计，因为间距、图标和小字都不够精确，无法作为设计规范直接交付。

### 如何让 UI 样机中的文字清晰可读？

把需要清晰可读的文字限制在少数几个加引号的标签上，字号放大，其他内容都描述为占位文字行。用简洁无衬线字体呈现的短词，渲染效果最稳定。

### 如何让多个界面保持一致？

在每条提示词中复用同一段视觉系统描述，只修改界面描述部分。用同一个模板生成的界面，比每次从零描述的界面更加统一。