跳到正文
Codex DesignBETA

GPT Image 2.6 UI 设计提示词。

42 条复制即用的提示词,教你在 ChatGPT、Codex 或 API 里用 GPT Image 2.6(ChatGPT Images 2.6)设计界面。它们遵循 OpenAI 对「界面预览」的建议:把产品当作已经上线来描述,重点写布局和层级,图上要出现的每一段文字都用引号写清楚。

更新于 2026年11月6日

怎么用这些提示词

  • 在 ChatGPT 或 Codex 里: 粘贴提示词,把方括号里的内容换成你自己的。在 Codex 里加上 $imagegen,就能调用生图 skill。
  • 通过 API: 用 gpt-image-2.6-flare 快速探索,用 gpt-image-2.6-sunburst 出最终图和做精准修改。生成 SVG 图标时设置 output_format="svg";生成动画时设置 output_format="gif"。
  • 要出现在图上的文字用引号写清楚。 GPT Image 2.6 对加了引号的文字渲染得更可靠。用图之前记得检查一下小字。

第一次用这个模型?建议先读 GPT Image 2.6 做 UI 设计。

手机 App 界面

健身 App 首页
为 [一个跑步 App] 生成一张真实感的手机 App 界面。展示老用户打开 App 时的首页:问候语 "Morning, Sam",一个显示 "18.4 / 25 km" 的每周跑量圆环,一个写着 "Start run" 的主按钮,上一次跑步的卡片(带路线地图缩略图、配速和用时),以及底部标签栏:Home、Plans、Activity、Profile。干净的白色界面,一个充满活力的橙色强调色,字体清晰。iPhone 屏幕,不要设备外框。
银行 App
生成一个真实感的手机银行 App 界面。余额卡片显示 "$4,280.55",快捷操作有 Send、Request、Pay bills、Top up,下面是最近交易列表,带商户 logo、日期和金额。沉稳的海军蓝配白色,圆角卡片,间距宽松。要像一个真的上线了的 App。iPhone 屏幕,不要外框。
外卖 App
生成一个真实感的外卖 App 首页:地址栏 "Deliver to 24 Hill St",搜索框,分类标签(Pizza、Sushi、Salads、Desserts),一张推荐餐厅卡片,带评分和送达时间,以及一个 "Popular near you" 列表。温暖诱人的美食摄影,白色背景,一个红色强调色。iPhone 屏幕,不要外框。
新手引导流程
为 [一个冥想 App] 生成三张并排的手机新手引导页:1)欢迎页,配一张宁静的插画和 "Breathe better in 5 minutes a day";2)选择目标,用可多选的标签;3)用时间选择器设置提醒时间。三页统一用柔和的薰衣草紫配色,圆角按钮,进度圆点。不要设备外框。
聊天 App
生成一个真实感的聊天 App 对话界面:联系人名字 "Maya" 和在线状态,左右交替的消息气泡,内容是真实感的简短消息,一张分享的照片,一条带波形的语音消息气泡,以及带附件和发送图标的输入框。浅色主题,蓝色强调色。iPhone 屏幕,不要外框。
设置页
为 [一个笔记 App] 生成一个真实感的 iOS 风格设置页:分组列表包括 Account、Sync、Appearance、Notifications、Privacy 和 Help,右侧显示当前设置值,iCloud 同步和提醒用开关控制,底部有一行红色的 "Sign out"。原生 iOS 外观,浅色模式。iPhone 屏幕,不要外框。
空状态
为 [一个任务管理 App] 生成用户还没有任务时的手机空状态页:一张简单友好的插画,标题 "Nothing on your list",一行辅助说明文字,以及一个主按钮 "Add your first task"。极简,大量留白。iPhone 屏幕,不要外框。
深色模式 App
为 [一个音乐播放器] 生成深色模式的手机界面:专辑封面,歌曲名 "Night Drive",歌手名,带时间的进度条,播放控制按钮,以及歌词预览。深炭灰背景(不要纯黑),一个霓虹青色强调色,文字高对比。iPhone 屏幕,不要外框。

网站和落地页

SaaS 落地页首屏
为 [一款项目管理 SaaS] 生成桌面端落地页首屏:顶部是 logo 和导航,主标题 "Ship projects without the status meetings",副标题,两个按钮 "Start free" 和 "Book a demo",下方是一张大的看板产品截图。干净的白色布局,一个紫色强调色,16:9,不要浏览器外框。
作品集网站
为一位名叫 "Lena Ortiz" 的产品设计师生成桌面端作品集首页:大号的杂志风标题,简短的自我介绍,由六张项目卡片组成的网格(带封面图和标题),以及一个联系方式链接。米白色背景,黑色衬线标题,极简,像画廊一样。16:9。
电商商品页
为 [一个陶瓷咖啡杯] 生成真实感的电商商品页:左侧是商品图集,右侧是标题、价格 "$32"、颜色选项、数量选择器、"Add to cart" 按钮、配送信息,以及评价概览 "4.8 (212 reviews)"。温暖的中性色调。桌面端,16:9。
价格区块
生成一个包含三个方案的价格区块:Free "$0"、Pro "$12/month"(作为 "Most popular" 突出显示)、Team "$29/month"。每个方案列出五项带对勾的功能,并配一个按钮。加一个按月/按年切换开关,上面写着 "Save 20%"。干净的白色界面,一个绿色强调色。16:9。
博客文章页
生成桌面端博客文章页:标题 "How we cut our build time by 70%",作者头像和日期,一张宽幅头图,正文放在居中的一栏里、方便阅读,一个代码块,右侧是目录。杂志风,行高宽松。16:9。
餐厅网站
为一家街区餐厅 "Olive & Ember" 生成首页:全宽的美食照片首屏,上面写着店名,营业时间,一个 "Book a table" 按钮,带价格的简短菜单预览,以及地址和地图。温暖、质朴,字体优雅。桌面端,16:9。
注册页
生成一个左右分栏的注册页:左侧是表单,包含邮箱、密码、"Create account" 按钮和 "Continue with Google";右侧是一张产品插画和一段简短的用户评价。干净、值得信赖,蓝色强调色。桌面端,16:9。
手机端落地页
为 [一款 AI 写作 App] 生成手机端落地页:主标题,副标题,"Try it free" 按钮,三个功能区块(各配一个小的界面预览),一条用户评价,以及页脚。宽 390 px,把整个长滚动页面完整展示出来,不要外框。
404 页面
为 [一个旅行预订网站] 生成一个友好的 404 页面:一张俏皮的插画,画的是一个迷路的行李箱,标题 "This page took a different flight",一个搜索框,以及指向 Home、Destinations 和 Help 的链接。符合品牌的青绿色强调色,大量留白。桌面端,16:9。

仪表盘和 Web 应用

数据分析仪表盘
生成一个真实感的数据分析仪表盘:左侧导航栏,日期范围选择器,四张 KPI 卡片(Visitors 48,210;Signups 1,284;Conversion 2.7%;Revenue $38.4k),一个每日访客折线图,一个按渠道划分的柱状图,以及热门页面表格。浅色主题,沉稳的蓝色调,用真实的界面元素。16:9。
CRM 销售看板
生成一个 CRM 销售管道看板,分为 Lead、Qualified、Proposal、Won 四列:每张交易卡片显示公司名、金额、负责人头像和在当前阶段停留的天数。顶部栏有搜索框和 "New deal" 按钮。干净,信息密集但易读。桌面端,16:9。
后台用户表格
生成一个后台用户管理表格:搜索框,按角色和状态筛选,列为 Name、Email、Role、Status、Last active,带状态标签(Active、Invited、Suspended)、行内操作和分页。中性灰界面,一个靛蓝色强调色。桌面端,16:9。
日历应用
生成一个周视图的日历 Web 应用:左侧是迷你月历和日历列表,主区域是周一到周日的网格,日程按颜色区分,一个 "Create" 按钮,其中一个日程上打开了详情弹窗。浅色主题。16:9。
邮件客户端
生成一个三栏式邮件客户端:左侧是文件夹,中间是邮件列表,显示发件人、主题、预览和时间,右侧是打开的邮件和回复按钮。干净、熟悉,蓝色强调色。桌面端,16:9。
AI 聊天应用
生成一个桌面端 AI 助手应用:左侧边栏是聊天记录,主区域是一段对话,包含用户的一个问题和一段带格式的长回答(有项目符号列表和代码块),以及带附件按钮和模型选择器的消息输入框。极简的中性色界面。16:9。

图标和 SVG 素材

标签栏图标
一组给 App 标签栏用的六个简洁线性图标:首页、搜索、书库、统计、个人、设置。统一 2px 线宽,线头和拐角都是圆角,单色,不要文字,在一行里均匀排开。
功能图标
一组给 SaaS 网站用的八个双色调功能图标:速度、安全、集成、数据分析、协作、自动化、客服支持、移动端。统一的网格和圆角,蓝色双色调,不要文字。
App 图标
为 [一个习惯打卡 App] 设计一个现代的 App 图标:一个简洁的对勾和火焰形状融合在一起,居中放在圆角方形上,背景是从珊瑚色到橙色的柔和渐变。扁平、干净,小尺寸下也能一眼认出,不要文字。
空状态插画
一组四张风格统一的简洁空状态插画:没有消息、没有搜索结果、没有文件、任务全部完成。扁平图形,两种颜色,柔和阴影,友好、极简,透明背景。
Logo 标志
为一家名叫 "North Canvas" 的设计工作室设计一个极简 logo:几何风格的指北箭头和方形边框组合在一起,旁边是用简洁无衬线字体写的文字标志 "North Canvas"。单色,在浅色和深色背景上都能用。

App Store 和营销配图

App Store 截图
为 [一个预算管理 App] 生成三张并排的 App Store 截图。每张都是一个显示 App 界面的手机屏幕,上方配一行大号文案:"See where your money goes"、"Set goals you'll actually hit"、"Get alerts before you overspend"。明亮、统一的品牌色,1290×2796 比例。
产品发布横幅
为 [一款设计工具] 生成一张产品发布横幅,宣布 "Introducing Canvas 2.0":一张倾斜的 App 界面截图,一句简短的副标题,以及 "Try it now" 按钮。干净的渐变背景,现代科技风,16:9。
新功能发布帖
为 [一个笔记 App] 生成一张方形社交媒体帖子,宣布新功能 "Dark mode is here":用一条对角线把画面分成两半,并排展示浅色和深色模式下的 App 界面。醒目的标题,品牌色,1:1。
网站 OG 图
为一篇标题为 "How to design UI with AI" 的博客文章生成 Open Graph 图片:左侧是大号标题,右侧是由几张 App 界面拼成的小拼贴。干净的背景,品牌强调色,1200×630。
Product Hunt 展示图
为 [一个 UI 设计插件] 生成一张 Product Hunt 展示图:标题 "Design inside your coding agent",一张大截图,展示一块画布上并排放着几个 App 界面,再加三个简短的卖点标签。干净、高对比,1270×760。
设备样机图
生成一张干净的设备样机场景图:浅色桌面上放着一台笔记本电脑和一部手机,分别显示 [我们 App 的仪表盘和手机端首页],柔和的自然光,道具尽量少,产品营销照片风格,16:9。

GIF 动图和微交互

按钮点击
一段循环的短动画:手机上的 "Add to cart" 按钮被点击,轻微缩小,变成绿色并出现对勾,然后恢复原样。扁平 UI 风格,白色背景,不要多余文字。
骨架屏加载
一段循环动画:卡片列表正在加载,灰色的骨架占位块从左到右闪过一道微光,然后带头像和文字的真实卡片淡入。干净的浅色界面。
开关切换
一段循环动画:设置里的一个开关从关切换到开,圆钮滑到右边,轨道填充为绿色,一个小标签从 "Off" 变成 "On"。极简界面,白色背景。
下拉刷新
一段循环动画:在手机信息流里下拉刷新,列表被往下拉,出现一个转动的加载圈,然后新内容从顶部滑入。干净的浅色界面。

用参考图和圈图修改

按参考图换风格
图 1 是我们现在的 App 界面,图 2 是风格参考。用图 2 的配色、字体和圆角重新设计图 1 的风格。图 1 的布局、内容和文字保持完全不变。
圈图:修改一个按钮
只修改圈出来的按钮:改成主按钮样式,深绿色实心背景,白色文字 "Continue"。界面里其他所有内容保持完全不变。
圈图:替换一个区块
只把圈出来的区域换成一张客户评价卡片:一张客户照片,引语 "We shipped our redesign in a week",姓名 "Priya N." 和职位 "Head of Product"。沿用现有的样式,其他所有内容保持不变。

从图片到真实界面

图片很适合用来探索方向。选定喜欢的方向后,把它重新做成代码,这样就能点击、缩放,也能直接上线:

图片转 HTML
把附上的设计稿图片重新实现为一个独立的 HTML 文件,尺寸 [390×844],CSS 内联,使用系统字体。布局、间距、颜色和文字都要完全一致。图标用内联 SVG 画出来。

在 Codex Design 画布上,生成的图片和它的 HTML 版本会并排放在一起,方便你检查是否一致,再可视化地调整。

常见问题

这些 GPT Image 2.6 提示词免费吗?

免费。直接复制,把方括号里的细节换成你自己的,就能在 ChatGPT、Codex 或 API 里使用。

Flare 和 Sunburst,该用哪个模型?

用 Flare 快速探索大量想法,用 Sunburst 出最终图、处理小字和做精准修改。详见 GPT Image 2.6 做 UI 设计。

这些提示词能用在其他生图模型上吗?

大部分可以。它们描述的是布局、层级和要出现的确切文字,这对任何生图模型都有帮助。output_format="svg" 这类参数和圈图修改是 GPT Image 2.6 特有的。

更多提示词和指南

这个合集的全部提示词(42 条)

Codex Design 是独立开发的 Codex 插件,与 OpenAI 无关联,也未获 OpenAI 认可。