我用 GPT Image 2 花5分钟完成 6 张 UI 设计图：GPT Image 2 小程序 UI 设计实战
公众号名称：AIGC新赛道
作者名称：AIGC 新赛道
发布时间：2026-04-27 09:54
G P T I M A G E 2
用 AI 画小程序 UI
6 个页面 · 1 套设计规范 · 即用提示词
玻璃拟态 · 深灰底色 · 霓虹蓝点缀
上周写了 GPT Image 2 的教程，有个读者问我：「能提供一些示例吗？」
能。而且效果比我想象的好，应广大读者要求，我决定用 AI 生成一个小程序来分享这些提示词。
这篇用一个这个真实案例——「创意工坊」提示词平台小程序——完整演示 6 个核心页面的提示词怎么写，这 6 张图都是一次生成没有抽卡，附设计规范拆解和可直接复制的模板。
Part 1
统一设计规范（6 个页面共用）
多页面出图的第一步：定义一套规则，每张图都带上
🎨 视觉设计规范
设计风格
玻璃拟态（Glassmorphism）
半透明毛玻璃卡片 + 模糊背景
主色调
背景：深灰色系
点缀：霓虹蓝色系
文字：浅灰白色
玻璃拟态参数
背景：低透明度白色
边框：微弱白色细边框
模糊：背景虚化模糊效果
圆角/间距
卡片大圆角
按钮中等圆角
内边距适中宽松
📝 提示词前缀模板（每次都带上）
微信小程序页面 UI 设计，「创意工坊」提示词平台，玻璃拟态设计风格，深灰底色，霓虹蓝点缀色，半透明毛玻璃卡片，面向 AI 创作者用户，强调效率和灵感，iOS 人机交互规范，竖版 390×844px
**关键技巧：**前缀固定不变，每次只需要换「页面名称 + 功能描述 + 内容细节」。这样 6 张图风格完全统一。
Part 2
6 个页面，逐个拆解
每页 = 前缀 + 页面描述 + 布局细节
① 详情页
提示词详情 · 浏览量最高
核心页面
用户浏览提示词的完整页面，顶部展示效果图、标题、提示词内容，底部操作按钮。
完整提示词 ↓
微信小程序页面 UI 设计，「创意工坊」提示词平台，玻璃拟态设计风格，深灰底色，霓虹蓝点缀色，半透明毛玻璃卡片，面向 AI 创作者用户，强调效率和灵感，iOS 人机交互规范，竖版 390×844px。详情页面：顶部横向滚动大图展示 AI 生成效果（3-4 张缩略图可滑动），下方标题区域显示提示词标题和作者信息，中间提示词内容区域带复制按钮和编辑图标，底部固定三个按钮「推荐」「分享」「立刻尝试」，按钮采用霓虹蓝渐变填充和微光发光效果
布局结构
▸ 顶部：横向滑动图片轮播（3-4张效果图）
▸ 中部：标题 + 作者头像昵称 + 浏览/点赞数据
▸ 核心区：提示词文本卡片（毛玻璃背景）+ 右上角复制/编辑图标
▸ 底部：固定栏 3 个按钮（推荐/分享/立刻尝试），霓虹蓝渐变
② 首页
四大核心模块 · 第一屏
核心页面
用户进入小程序的第一屏。包含搜索、推荐、分类、工具四大模块，信息密度最高。
完整提示词 ↓
微信小程序页面 UI 设计，「创意工坊」提示词平台，玻璃拟态设计风格，深灰底色，霓虹蓝点缀色，半透明毛玻璃卡片，面向 AI 创作者用户，强调效率和灵感，iOS 人机交互规范，竖版 390×844px。首页：顶部智能搜索栏带搜索图标和麦克风语音输入图标，下方热门推荐区域用横向滚动卡片展示精选提示词（卡片包含缩略图+标题+使用次数），中间分类导航区用图标加文字的网格布局（如文生图/文生视频/角色设计/场景设计等分类），底部个人工具区用毛玻璃卡片样式展示最近使用/我的收藏/创作入口，整体布局紧凑信息密度高但不杂乱，动态数据可视化元素点缀
**💡 首页要点：**信息密度要高但不杂乱。搜索栏放在最顶部，推荐区用横向滑动节省空间，分类导航用图标网格一目了然。加「动态数据可视化元素」能让 AI 画出带数据动效的感觉。
③ 个人中心
用户数据 + 功能入口
核心页面
用户的个人空间，展示数据概览和功能入口。
完整提示词 ↓
微信小程序页面 UI 设计，「创意工坊」提示词平台，玻璃拟态设计风格，深灰底色，霓虹蓝点缀色，半透明毛玻璃卡片，面向 AI 创作者用户，强调效率和灵感，iOS 人机交互规范，竖版 390×844px。个人中心页面：顶部个人信息卡片展示用户头像（圆形带霓虹蓝光环）、昵称和简介，中间三个数据统计卡片横向排列显示「我的创作笔数」「累计收入」「累计支出」，下方功能列表用毛玻璃卡片样式包含「我的创作」「我的收藏」「退出登录」三个入口，每个入口右侧有箭头图标，整体个性化温暖的用户空间设计
布局结构
▸ 顶部卡片：头像（圆形+霓虹光环）+ 昵称 + 简介文字
▸ 数据三宫格：创作笔数 / 累计收入 / 累计支出，横向等分
▸ 功能列表：我的创作、我的收藏、退出登录，箭头图标引导
▸ 视觉重点：「退出登录」用低饱和度红色，弱化危险操作
④ 编辑个人资料
头像 + 昵称 + 简介
表单页，简洁但要有品牌感。
完整提示词 ↓
微信小程序页面 UI 设计，「创意工坊」提示词平台，玻璃拟态设计风格，深灰底色，霓虹蓝点缀色，半透明毛玻璃卡片，面向 AI 创作者用户，强调效率和灵感，iOS 人机交互规范，竖版 390×844px。编辑个人资料页面：顶部导航栏显示「编辑资料」标题和返回箭头，中间区域包含头像编辑（圆形头像预览带霓虹蓝边框，右侧相机图标提示可更换），昵称输入框、个人简介多行输入框，输入框采用毛玻璃卡片样式低透明度背景和细边框，placeholder 文字「输入你的昵称」「用一句话介绍自己」，底部固定保存按钮霓虹蓝渐变填充全宽圆角，整体简洁个性化的表单设计
⑤ 创作列表
我的作品管理
用户管理已发布提示词的列表页。
完整提示词 ↓
微信小程序页面 UI 设计，「创意工坊」提示词平台，玻璃拟态设计风格，深灰底色，霓虹蓝点缀色，半透明毛玻璃卡片，面向 AI 创作者用户，强调效率和灵感，iOS 人机交互规范，竖版 390×844px。创作列表页面：顶部标题「我的创作」和筛选图标，列表采用卡片式布局，每个卡片包含左侧缩略图（圆角方形预览图）、右侧标题、创建日期、状态标签（已发布/草稿用不同颜色区分），卡片右上角有三个点菜单图标可展开删除选项，卡片间距适中，底部无固定栏，整体简洁高效的列表管理界面
⑥ 快速登录页
冷启动第一印象
核心页面
用户第一次打开小程序看到的页面，要同时传达品牌调性和安全感。
完整提示词 ↓
微信小程序页面 UI 设计，「创意工坊」提示词平台，玻璃拟态设计风格，深灰底色，霓虹蓝点缀色，半透明毛玻璃卡片，面向 AI 创作者用户，强调效率和灵感，iOS 人机交互规范，竖版 390×844px。快速登录页面：顶部居中显示「创意工坊」品牌 Logo 和 Slogan，中间大面积留白营造高级感，底部两个按钮「微信一键登录」霓虹蓝渐变填充圆角和「暂不登录」文字按钮，最底部小字链接「登录即表示同意《隐私政策》和《用户协议》」，按钮间距合理防止误触，整体简洁克制传递品牌调性和信任感
**💡 登录页要点：**留白要大、按钮要少、协议链接不能漏。加「微信一键登录」四个字比只写「登录」转化率高很多，因为用户知道点下去会发生什么。
Part 3
UI 设计提示词公式
掌握结构，换项目也能用
📐 四层结构
1
设计规范层（固定）
平台 + 风格 + 色调 + 目标用户 + 尺寸
2
页面类型层（每次换）
首页 / 详情页 / 列表页 / 表单页 / 登录页 / …
3
布局结构层（从上到下）
顶部做什么 → 中间放什么 → 底部固定什么
4
细节参数层（加分项）
按钮文案 / 颜色描述 / 间距 / 交互说明
通用模板（替换括号内容即可）
微信小程序页面 UI 设计，「[项目名称]」，[设计风格]，[主色调描述]，面向**[目标用户]，iOS 人机交互规范，竖版 390×844px。[页面类型]：顶部[顶部布局]，中间[核心内容区]，底部[固定操作区]，[其他细节]**
风格关键词速查
风格
关键词
适合场景
玻璃拟态
半透明毛玻璃 + 模糊背景
工具/创作类
新拟态
柔和投影 + 凸起凹陷
设置/控制类
极简白
大量留白 + 黑色文字
内容/阅读类
暗黑赛博
深黑底 + 霓虹发光
游戏/AI类
Tips
5 条实战经验
用 GPT Image 2 画 UI 时的踩坑总结
① 多页面的关键是「前缀一致」 — 把设计规范写成固定前缀，每次只改页面描述，风格自动统一
② 写具体尺寸比不写好 — 加「竖版 390×844px」比只写「竖版」准确率高很多，GPT 会按真实比例构图
③ 按钮文案直接写出来 — 「推荐」「分享」「立刻尝试」比「三个按钮」效果好，它知道该渲染什么文字
④ 复杂页面开 Thinking 模式 — 首页、列表页这类元素多的页面，Thinking 模式会先推理布局逻辑再画，质量明显更高
⑤ 提示词里写按钮文案和图标 — 直接写「搜索图标」「麦克风图标」「推荐/分享/立刻尝试」比笼统说「三个按钮」效果好，AI 知道该渲染什么内容
写在最后
GPT Image 2 画 UI 的核心不是「画得多像」，而是帮你快速验证想法。
6 个页面，每个提示词写一次，30 分钟就能拿到一套风格统一的视觉方案。比用 Figma 从零搭快 10 倍。
当然它不能替代设计师的最终稿。但它能替代「要不要做一个 MVP 看看效果」这个阶段。
原创 AIGC 新赛道 AIGC新赛道