Image2Studio

指南

GPT Image 2 UI 样机提示词:让界面像真实产品

一篇面向 App 界面、SaaS 仪表盘、产品 demo、落地页视觉和软件预览图的 UI 样机提示词指南。

最后更新:2026-05-17

GPT Image 2 UI 样机提示词AI UI mockup promptSaaS 仪表盘提示词

可复制示例

先看真实提示词图片

生成视频流媒体网站主页的详细模型,包含侧边栏、分类标签以及带有标题和元数据的视频缩略图网格。
UI Mockups

视频流媒体平台主页 UI

{ "type": "网页浏览器 UI 模型", "platform": "{argument name=\"platform name\" default=\"YouTube\"}", "browser_window": { "style": "macOS 浅色模式", "tab": "YouTube", "url_bar": "youtube.com" }, "layout": { "header": { "components": ["汉堡菜单", "平台 Logo", "搜索栏", "创建视频图标", "通知铃铛", "用户头像"] }, "sidebar": { "position": "左侧", "item_count": 11, "sections": [ { "name": "主要", "items": ["首页", "Shorts", "订阅", "原创内容", "YouTube Music"] }, { "name": "探索", "items": ["热门", "购物", "音乐", "电影", "直播", "游戏"] } ] }, "main_content": { "category_tags": { "count": 10, "labels": ["全部", "游戏", "音乐", "直播", "播客", "AI", "汽车", "合辑", "新闻", "最近上传"] }, "video_grid": { "card_count": 5, "cards": [ { "position": "左上", "size": "大", "thumbnail_description": "Sam Altman 和 Greg Brockman 坐在舞台上,旁边是一个站立的人形机器人,文字覆盖 'OpenAI Introducing Our Humanoid Robot',带有 LIVE 徽章", "video_title": "{argument name=\"featured live stream title\" default=\"Introducing Our Humanoid Robot\"}", "channel_name": "{argument name=\"featured live stream channel\" default=\"OpenAI\"}", "metadata": "48.2 万人正在观看" }, { "position": "右上", "size": "大", "thumbnail_description": "左侧是惊讶的男人脸,右侧是隐藏在森林中的巨大豪宅并伴有爆炸效果,粗体黄色文字覆盖 '{argument name=\"top right thumbnail text\" default=\"TOTAL SECRECY\"}'", "video_title": "{argument name=\"top right video title\" default=\"I Bought 100 Million Dollar Secret House!\"}", "channel_name": "MrBeast", "metadata": "410 万次观看,19 小时前,时长 20:49" }, { "position": "左下", "size": "小", "thumbnail_description": "Steve Carell 手持一台显示《办公室》场景的笔记本电脑", "video_title": "Steve Carell 深度解析他最标志性的角色 | GQ", "channel_name": "GQ", "metadata": "98.7 万次观看,2 天前,时长 17:46" }, { "position": "中下", "size": "小", "thumbnail_description": "男人在日落时分透过望远镜观察海面上的帆船", "video_title": "Black Sails Is Beautiful!", "channel_name": "Savage Books", "metadata": "60.6 万次观看,2 天前,时长 17:46" }, { "position": "右下", "size": "小", "thumbnail_description": "来自电子游戏的恐怖面具杀手角色,文字覆盖 'DEAD OF DAYLIGHT'", "video_title": "Playing As The Seekers In Dead By Daylight", "channel_name": "Unknown", "metadata": "80.6 万次观看,1 天前,时长 28:39" } ] } } } }

生成一个逼真的电视新闻广播场景,包含主播、演示显示器和新闻滚动字幕。
摄影

日本新闻广播模拟

{ "type": "电视新闻广播布局", "anchor": { "appearance": "{argument name=\"anchor appearance\" default=\"年轻的日本女性新闻主播,留着齐肩深色短发\"}", "attire": "浅米色衬衫,佩戴小型翻领麦克风", "pose": "坐在桌前,双手交叠,面向前方" }, "studio_environment": "现代新闻演播室,配有蓝色发光面板,背景为夜间城市天际线", "graphics": { "top_left_bug": { "style": "深蓝色矩形", "text": "{argument name=\"channel logo\" default=\"NEWS TODAY\"}" }, "presentation_monitor": { "location": "主播后方左侧", "badge": "最新情報", "subtitle": "{argument name=\"subheadline\" default=\"OpenAIの新しい画像生成モデル\"}", "title": "{argument name=\"main headline\" default=\"「GPT-image-2」\"}", "suffix": "がリリース", "icon": "OpenAI logo", "bottom_bar": "より高精細に より正確に 画像生成の可能性がさらに広がる" }, "lower_thirds_ticker": { "badge": "速報", "headline": "{argument name=\"ticker text\" default=\"OpenAI 画期的な新画像生成モデル「GPT-image-2」をリリース\"}" } } }

为一款 AI 编程工具生成现代感十足的磨砂玻璃风格宣传海报,包含一个 2x2 的功能卡片网格(展示代码片段)以及一个优势说明板块。
海报

AI 编程助手宣传信息图

{ "type": "应用宣传信息图海报", "style": "简洁、现代、磨砂玻璃风格、柔和阴影、3D 图标", "theme": "{argument name=\"primary color theme\" default=\"蓝白配色\"}", "header": { "title": "{argument name=\"app name\" default=\"CodePilot\"}", "subtitle": "{argument name=\"subtitle\" default=\"你的 AI 编程副驾驶\"}", "features_list": "智能补全 · 代码生成 · 问答调试 · 代码解析", "main_icon": "光泽感 3D 圆角正方形,蓝色渐变,白色 {argument name=\"main icon symbol\" default=\"</>\"} 及闪光效果" }, "layout": { "sections": [ { "title": "feature_cards", "position": "中间网格", "count": 4, "items": [ { "label": "智能代码补全", "icon": "蓝色闪电", "description": "上下文感知,精准补全,让编码快人一步", "ui_element": "macOS 风格代码窗口,展示 Python calculate_total 函数" }, { "label": "AI 代码生成", "icon": "紫色魔法棒", "description": "根据自然语言描述,一键生成函数与脚本", "ui_element": "聊天提示气泡和展示 Python quick_sort 函数的代码窗口" }, { "label": "对话 & 调试助手", "icon": "绿色聊天气泡", "description": "通过自然语言提问定位 Bug,边聊边改,高效解决问题", "ui_element": "包含用户提问和绿色 AI 解决方案气泡的聊天界面" }, { "label": "代码解析 & 注释", "icon": "带有放大镜的橙色文档", "description": "快速理解复杂代码,自动生成注释与说明", "ui_element": "展示 JS fetchData 函数的代码窗口,带有 3 个浮动操作标签:自动注释、逻辑解析、一键复制" } ] }, { "title": "为什么选择 CodePilot?", "position": "左下角", "count": 4, "labels": ["提升效率", "精准可靠", "隐私安全", "易于集成"], "icons": ["时钟", "对勾", "盾牌", "拼图块"] }, { "title": "立即体验", "position": "右下角", "count": 1, "elements": ["GitHub 开源项目", "{argument name=\"github link\" default=\"github.com/op7418/CodePilot\"}", "二维码"] } ] } }

为 AI 模型的定价页面生成一个时尚的深色主题网页 UI 模型,包含首屏区域和详细的 Token 定价卡片。
UI Mockups

深色模式 AI API 定价页面模型

{ "type": "深色模式网页 UI 模型", "theme": "时尚、现代的深色主题,配有白色和浅灰色文字", "header": { "logo": "{argument name=\"company name\" default=\"OpenAI\"}", "navigation": ["研究", "产品", "安全", "公司"], "actions": ["搜索图标", "登录", "试用 ChatGPT 按钮"] }, "layout": { "left_column": { "label": "定价", "headline": "{argument name=\"model name\" default=\"GPT-8\"}", "subheading": "{argument name=\"main tagline\" default=\"Our most powerful model yet.\"}", "description": "GPT-8 专为智能、可靠性和实际应用而设计。具备多模态推理、长上下文理解和高级工具使用能力。", "button": "开始使用", "features": { "count": 3, "items": [ {"icon": "brain", "title": "前沿智能", "desc": "最先进的推理、编码和问题解决能力。"}, {"icon": "shield", "title": "值得信赖的设计", "desc": "更强的安全性、更高的可控性以及企业级的可靠性。"}, {"icon": "lightning bolt", "title": "为开发者而生", "desc": "原生工具使用、结构化输出和长上下文工作流。"} ] } }, "right_column": { "type": "定价卡片", "header": "定价 - 简单、基于 Token 的定价。无隐藏费用。", "toggle": ["输入", "缓存读取"], "token_pricing": { "count": 5, "rows": [ {"name": "文本 Token", "unit": "每 100 万 Token", "price": "{argument name=\"text token price\" default=\"$3.00\"}"}, {"name": "图像 Token", "unit": "每 100 万 Token", "price": "$10.00"}, {"name": "音频 Token", "unit": "每 100 万 Token", "price": "$6.00"}, {"name": "视频 Token", "unit": "每 100 万 Token", "price": "$15.00"}, {"name": "输出 Token", "unit": "每 100 万 Token", "price": "{argument name=\"output token price\" default=\"$12.00\"}"} ] }, "additional_features": { "count": 2, "rows": [ {"name": "缓存", "desc": "通过缓存节省重复输入费用。", "price": "$0.30 / 100 万 Token"}, {"name": "批量 API (5 折优惠)", "desc": "降低异步工作负载的成本。", "price": "-50%"} ] }, "footer_links": ["了解更多", "模型文档", "定价详情"] } }, "footer": "价格以美元计算。请在我们的文档中查看完整定价表。" }

生成一个逼真的全屏移动端 App 界面,类似于短视频平台,包含可自定义的主图和 UI 叠加层。
摄影

社交媒体视频 App UI 模型

{ "type": "社交媒体短视频 App 界面模型", "main_image": { "subject": "{argument name=\"subject description\" default=\"一位留着深色长发、身穿白色露肩上衣的年轻亚裔女性\"}", "pose": "回头看向镜头,面带温柔微笑,头发在微风中轻轻飘动", "setting": "{argument name=\"background location\" default=\"日落时分的滨江步道,背景有高大的现代塔楼和城市天际线\"}", "lighting": "黄金时刻,温暖的阳光映照在河面上" }, "ui_layout": { "top_bar": { "status_icons": ["时间 9:41", "蜂窝信号", "Wi-Fi", "电池 100"], "navigation": { "left": "菜单图标", "center_tabs": ["经验", "团购", "关注", "{argument name=\"active top tab\" default=\"推荐\"}"], "right": "搜索图标" } }, "right_sidebar": { "count": 6, "elements": [ "带有粉色加号按钮的头像", "带有“23.6万”文本的心形图标", "带有“1.6万”文本的聊天气泡图标", "带有“2.8万”文本的星形图标", "带有“3.7万”文本的分享箭头图标", "旋转的音乐唱片图标" ] }, "bottom_left_overlay": { "username": "{argument name=\"username\" default=\"@小鹿的日常\"}", "caption": "{argument name=\"caption text\" default=\"吹着晚风,看着日落,这一刻好治愈~ 🌅\"}", "audio_track": "🎵 原声 @小鹿的日常创作的原声" }, "bottom_navigation_bar": { "count": 5, "tabs": [ "首页", "朋友 (带红色角标 '2')", "圆角方形中央加号按钮", "消息 (带红色角标 '5')", "我" ] } } }

很多人搜索「GPT Image 2 UI 样机提示词」时,其实不是缺几个漂亮形容词,而是卡在了空白输入框前:知道要一张图,却不知道怎么把用途、主体、构图、光线和画幅写成可检查的指令。这篇文章写给需要给 Deck、落地页或产品演示准备可信软件界面的创业者、营销人员或设计师。判断一条 prompt 有没有用,不看它听起来多厉害,而看它能不能让下一步生产更容易。

在 Image2Studio 里,提示词应该像一份压缩过的 brief。它要说清图片用来做什么,什么元素必须可识别,画面要保护什么区域,光线为什么能解释材质,最后图片会出现在哪个页面或平台。这样读者不是收藏一堆示例,而是可以从学习直接走到生成、评审和复用。

这篇指南先帮你决定什么

  • 明确图片任务:把软件界面写成视觉场景,同时保护版式密度和模块可读性。
  • 明确渠道和页面位置:SaaS 落地页、融资 Deck、功能发布、App 预览和产品文档。
  • 写清生成后必须保留的主体细节。
  • 在风格词之前确定裁切、安全区和输出比例。
  • 生成第一版之后,用什么标准评审。

可复制提示词模板

创建一张用于[产品/场景]的 UI 样机,展示[屏幕类型],放在[设备/浏览器框]中,包含[版式密度]、[核心模块]、[背景]、[光线]和[画幅]。

提示词示例

示例 1: 收入仪表盘

创建一张用于SaaS 落地页首屏的图片,主体是订阅收入仪表盘,浏览器框,MRR 图表,留存表,干净侧边栏,16:9 画幅,屏幕类型、设备或浏览器框、信息层级、真实模块密度,以及不抢界面的背景。

它写出了真实产品模块。 它把用途、主体、画面限制和输出位置都写进去了,后续只需要替换变量。

提示词示例

示例 2: 移动端 Onboarding

创建一张用于App 预览图的图片,主体是习惯 App onboarding 流程,三张手机屏,简单进度卡片,暖纸色背景,屏幕类型、设备或浏览器框、信息层级、真实模块密度,以及不抢界面的背景。

它展示流程,而不是随机屏幕。 它把用途、主体、画面限制和输出位置都写进去了,后续只需要替换变量。

提示词示例

示例 3: 编辑器界面

创建一张用于功能发布图的图片,主体是浏览器里的图片提示词编辑器,大提示词区,变量标签,生成成本面板,黑色主按钮,屏幕类型、设备或浏览器框、信息层级、真实模块密度,以及不抢界面的背景。

它贴合产品工作流。 它把用途、主体、画面限制和输出位置都写进去了,后续只需要替换变量。

提示词示例

示例 4: 平板分析页

创建一张用于销售 Deck 页面的图片,主体是餐厅点餐分析平板 App,平板斜放桌面,订单卡片可读,柔和餐厅背景,屏幕类型、设备或浏览器框、信息层级、真实模块密度,以及不抢界面的背景。

它有场景,但不遮住界面。 它把用途、主体、画面限制和输出位置都写进去了,后续只需要替换变量。

提示词示例

示例 5: Checkout 界面

创建一张用于产品文档图的图片,主体是定价 checkout 弹窗,桌面弹窗,套餐对比,安全支付字段,中性背景,屏幕类型、设备或浏览器框、信息层级、真实模块密度,以及不抢界面的背景。

它说明具体交互。 它把用途、主体、画面限制和输出位置都写进去了,后续只需要替换变量。

提示词示例

示例 6: AI 工作台

创建一张用于Image2Studio 首屏样机的图片,主体是场景化图片生成工作台,左侧场景选择,中间变量,右侧结果面板,额度成本可见,屏幕类型、设备或浏览器框、信息层级、真实模块密度,以及不抢界面的背景。

它把成本和任务状态也放进样机。 它把用途、主体、画面限制和输出位置都写进去了,后续只需要替换变量。

像写工作 brief 一样写 prompt

1. 先写任务,再写风格

写清屏幕类型:仪表盘、onboarding、设置页、编辑器、checkout、移动端 feed 或分析视图。泛泛写 UI 只会生成装饰卡片。 很多提示词文章的问题就在这里:先写一堆好看的视觉方向,最后才提用途。顺序要反过来。如果图片要用于SaaS 落地页、融资 Deck、功能发布、App 预览和产品文档,第一句话就应该让这个使用位置可见。

2. 让主体可以被检查

主体不是一个名词就够了。你要写出评审时会看的部分:外形、材质、表情、屏幕模块、标签表面、产品边缘或标题空间。对于UI 样机提示词来说,主体太模糊,模型就会替你编关键细节;主体具体,后续才可以只改一个变量,而不是整条重写。

3. 把构图当成约束

构图决定结果能不能用。你要写清主体在哪、留白在哪、什么东西不能抢焦点。这篇文章里的基础视觉方向是:屏幕类型、设备或浏览器框、信息层级、真实模块密度,以及不抢界面的背景。这句话不是装饰,而是一份检查清单。

4. 用光线解释画面

环境光要轻。界面才是主体,反射和阴影只能支持设备,不能遮住版式。 生成结果看起来假,很多时候不是风格不够,而是光线没有解释材质。继续加形容词之前,先判断它需要柔和日光、硬轮廓光、亮面反射、克制棚光,还是平面图形对比。

5. 按最终位置评审

缩小看一眼,访客能否在三秒内知道这是什么产品。 一张图单独看好看,但放进最终容器里不能用,就还没完成。把它和标题、价格、按钮、Deck 页、商品卡片或社媒文案放在一起看,问题会暴露得更快。

在 Image2Studio 里的工作流

  • 从上面最接近的示例开始,替换主体、用途和比例。
  • 打开 Image2Studio,生成前先检查额度成本和分辨率。
  • 第一版先保守生成,不要在主体和画幅还不稳时追风格。
  • 保存最强结果和对应 prompt,再每次只改一个变量做变体。

常见错误和修正

修改前

漂亮的 SaaS 仪表盘样机,现代 UI,玻璃卡片,很多图表,专业。

修改后

创建一张用于SaaS 落地页首屏的图片,主体是订阅收入仪表盘,浏览器框,MRR 图表,留存表,干净侧边栏,16:9 画幅,屏幕类型、设备或浏览器框、信息层级、真实模块密度,以及不抢界面的背景。

改写后补上了图片任务、主体、构图、光线、输出约束和评审标准。

  • 错误:写一条声称适合所有平台的万能 prompt。修正:只指定一个最终位置。
  • 错误:先追风格,再补结构。修正:先决定画幅、主体大小和安全区。
  • 错误:第一版太空,就继续加道具。修正:先调整光线、角度或背景对比。
  • 错误:看到一张漂亮图就接受。修正:检查它放进SaaS 落地页、融资 Deck、功能发布、App 预览和产品文档之后还是否成立。

生成后的评审清单

样机失败通常是因为它像抽象卡片,而不像真实产品屏幕。 评审没有写 prompt 那么有趣,但它最省时间。先问主体在真实展示尺寸下是否清楚,再看背景是否服务任务,然后检查标题、价格、标签、UI 卡片或 CTA 区域是否有足够空间。如果图片是为了销售,产品必须赢;如果图片是为了教学,阅读顺序必须赢;如果图片是为了停住信息流,钩子必须强,但不能强到让版式失控。

实际修改时怎么迭代

第一版生成后,不要一上来整条重写,除非图片任务本身错了。一次只改一个变量。主体弱,就补角度、尺寸、材质或背景对比;版式弱,就移动安全区,或者把画幅写得更明确;画面太普通,就从真实渠道里补一个上下文,比如货架、checkout 卡片、手机信息流、浏览器框、海报墙、包装表面或桌面场景;风格太吵,就先删风格词,不要继续往上堆。目标不是让提示词听起来更聪明,而是让下一张图更容易判断。对于「GPT Image 2 UI 样机提示词」来说,通常要少一点装饰性形容词,多一点关于「SaaS 落地页、融资 Deck、功能发布、App 预览和产品文档」的具体决定。

测试时保留一个很小的 prompt 记录:原始版本、这次改了哪个变量、结果哪里变好或变坏。跑三四轮之后,有用的结构会变得很明显。Image2Studio 的价值也在这里:prompt、生成图和保存的作品可以放在同一个工作流里,不会散落在聊天记录里。

下一步怎么走

把这篇指南当成方法层。相关 topic 页面负责按搜索意图收集示例,tools 页面负责在生成前清理或转换 prompt。更实际的路径是:读完指南,打开相关 topic,复制一个示例,替换变量,再进入 Image2Studio 生成。这样文章才是指南,而不是静态提示词展柜。

这些GPT Image 2 UI 样机提示词示例可以直接复制吗?

可以。复制任意示例,替换主体和最终位置,然后在 Image2Studio 里生成。第一版应该当草稿评审,不要当最终图。

提示词是不是越长越好?

不是。只有能控制可见结果的词才值得保留:主体、构图、光线、画幅、安全区。不能改变评审结果的形容词应该删掉。

这些页面是否表示 Image2Studio 和 OpenAI 有官方合作?

不是。Image2Studio 使用 GPT Image 2-oriented 的提示词语言来描述工作流,但不声称官方合作关系,也不承诺额外模型权利。