实战案例:用AI提示词生成App UI高保真原型图,产品经理替代设计师出图
发布时间:2026年08月26日 11:00:00以一款健康管理App的5个核心页面为例,演示产品经理如何用AI提示词生成首页、数据统计、计划制定、社区和个人中心的高保真UI原型图,替代Figma手动设计效率提升5倍。
背景
一位健康管理App「悦动」的产品经理,需要在3天内为投资人路演准备5个核心页面的高保真UI原型图:首页Dashboard、数据统计页、计划制定页、社区互动页、个人中心页。传统路径是产品经理画线框图,再交由UI设计师在Figma里手动搭高保真,5个页面大约需要2-3天设计工时,设计师排期已满无法加塞。
产品经理决定用AI图片生成工具直接产出高保真原型,自己一人完成。本文记录从设计系统定义到5个页面出图再到风格一致性保持的全流程,3小时完成全套高保真原型,替代Figma手动设计效率提升约5倍。核心是「设计系统先行→单页生成→组件复用」的工作流,避免每页从头设计导致风格涣散。
第一步:设计系统定义(色板+字体+间距+圆角+阴影规范)
提示词
你是一位UI设计系统专家。请为以下App定义一套设计系统:
App:悦动,健康管理App,面向25-40岁城市白领
品牌调性:专业可信、清新不沉闷、有温度
平台:iOS为主,适配Android
请输出完整设计系统:
1. 色板:
- 主色(1个,含色值、使用场景、占比)
- 辅助色(2个,含色值、场景)
- 中性色(背景、卡片、文字、边框,4-5档灰度)
- 语义色(成功/警告/错误,各1个)
2. 字体:
- 标题字体(含字号阶梯:H1-H4)
- 正文字体(含字号:body/caption)
3. 间距系统:基础间距单位+常用档位(4/8/12/16/24/32)
4. 圆角规范:卡片/按钮/输入框/头像各自的圆角值
5. 阴影规范:卡片阴影/弹窗阴影的色值、模糊、偏移
6. 组件清单:按钮(3种状态)、卡片、输入框、导航栏、Tab栏的规范
约束:所有色值用十六进制;字体用系统默认或免费可商用;规范需可直接指导生成每个页面。
产出:一套完整设计系统——主色活力青绿#2DBE8C、辅助色天空蓝#3D9BE9、中性灰5档、主标题24/20/18/16pt、间距8pt网格、卡片圆角12pt。
踩坑:初版没定义设计系统直接生成页面,5个页面出来5种风格(圆角不一、字号乱、配色飘)。回头补了设计系统定义这一步,并在后续每页提示词里固化引用,风格才统一。设计系统是AI生图保持一致性的"宪法",不可省略。
第二步:首页Dashboard生成(卡片布局+数据可视化+底部导航栏)
提示词
你是一位UI设计师。请基于以下设计系统生成悦动App首页:
设计系统(必须严格遵循):
- 主色#2DBE8C,辅助色#3D9BE9,背景#F7F8FA,卡片白#FFFFFF,文字主#1A1A1A/次#8C8C8C
- 标题:H1 24pt/H2 20pt/H3 18pt,正文16pt/小字13pt
- 间距:8pt网格,卡片内边距16pt,卡片间距12pt
- 圆角:卡片12pt,按钮8pt,头像圆形
- 阴影:卡片0 2px 8px rgba(0,0,0,0.06)
页面信息:首页Dashboard
内容模块(从上到下):
1. 顶部状态栏(系统)+ 导航栏(左Logo"悦动",右消息铃铛图标)
2. 今日概览卡片:步数8423(大数字+环形进度条),消耗卡路里326,运动时长45min(三指标横排)
3. 快速入口:4个圆形图标按钮(记录运动/饮食打卡/睡眠记录/喝水提醒)
4. 本周趋势卡片:折线图显示7天步数,主色线条,横轴日期
5. 推荐内容卡片:今日健康建议(标题+缩略图+1句话摘要)
6. 底部Tab栏:5个图标(首页/数据/计划/社区/我的),首页激活态主色
布局:竖版375x812(iPhone标准),内容垂直滚动,模块间用卡片分隔。
禁止:不要生成真实图片内容,图标用占位符风格;不要叠加真实文字数据,文字用占位。
产出:一张高保真首页原型,设计系统全遵循,模块层次清晰,可直接用于路演展示。
踩坑:AI初期把"今日步数8423"这种具体数据当文字生成进图里,结果字体丑且无法改。改为"文字用占位"后,AI生成干净的UI框架,数据由产品经理在Figma里后期填入。AI生UI的原则是"出框架不出内容",内容必须可编辑。
第三步:数据统计页生成(图表类型+时间筛选+对比展示)
提示词
你是一位UI设计师。请基于悦动设计系统生成数据统计页:
设计系统:(同首页,略)
页面信息:数据统计页
内容模块:
1. 顶部导航栏(左返回箭头,标题"数据",右分享图标)
2. 时间筛选Tab:周/月/年(当前选中"周",下划线主色)
3. 核心数据卡:本周平均步数7892(大数字+较上周+12%绿色箭头)
4. 主图表区:柱状图显示7天每日步数,主色柱体,横轴周一到周日
5. 数据明细列表:3行(运动/饮食/睡眠),每行:图标+名称+数值+趋势小箭头+右箭头进入
6. 对比模块:本周vs上周对比,环形图显示达标率
布局:375x812,主图表区占比40%屏幕高,列表项高度56pt。
遵循:圆角12pt卡片,8pt间距网格,主色#2DBBE8C。
禁止:图表不要填真实数据,用占位柱体;文字用占位。
产出:数据统计页高保真原型,图表框架清晰,筛选交互明确,数据展示层次合理。
踩坑:AI生成图表时容易"过度设计",加上3D效果、渐变色、阴影。加了"遵循设计系统、主色单色"约束后,图表回归扁平克制,符合数据页应"让数据说话"的设计原则。数据页的视觉要克制,不能比数据还抢眼。
第四步:社区互动页生成(信息流+点赞评论+用户头像)
提示词
你是一位UI设计师。请基于悦动设计系统生成社区互动页:
设计系统:(同首页,略)
页面信息:社区互动页
内容模块:
1. 顶部导航栏(标题"社区",右发布按钮主色胶囊形)
2. 分类Tab:推荐/关注/运动/饮食/心得(横滚,当前选中"推荐")
3. 信息流(3条内容卡片,每条包含):
- 用户区:圆形头像+昵称+发布时间+关注按钮
- 内容区:文字(2-3行占位)+1张配图占位框
- 互动区:点赞图标+数字/评论图标+数字/分享图标
4. 每条卡片间距12pt,卡片圆角12pt,白底
5. 底部Tab栏:社区激活态
布局:375x812,信息流为主,卡片高度自适应。
遵循:8pt间距,主色#2DBBE8C用于关注按钮和激活态,头像圆形。
禁止:不生成真实人物头像,用灰色圆形占位;不生成真实图片,用灰色矩形占位;文字占位。
产出:社区页高保真原型,信息流结构清晰,交互元素齐全,可直接用于演示用户互动场景。
踩坑:AI生成的社区卡片初期"每张都不一样"(有的有图有的没图,有的有视频有的没视频),不像同一组件。加了"每条卡片包含相同结构"约束后,3条卡片成为同一组件的复用,像真实App的列表。列表页的统一性靠"组件结构一致",不是每张自由发挥。
第五步:多页面风格一致性保持与组件复用(seed共享+组件库提示词)
提示词
你是一位UI设计总监。请审核以下5个页面的设计一致性,并输出组件复用建议:
已生成页面:首页Dashboard、数据统计页、计划制定页、社区互动页、个人中心页
设计系统:主色#2DBBE8C、间距8pt、圆角12pt卡片/8pt按钮、思源黑体
请检查并输出:
1. 色板一致性:5个页面是否严格使用设计系统色板,有无"野色"
2. 间距一致性:卡片内边距、模块间距是否统一16pt/12pt
3. 圆角一致性:所有卡片是否12pt,按钮是否8pt
4. 字体一致性:标题层级是否统一(H1-H4使用是否规范)
5. 组件复用:识别5个页面中重复出现的组件(卡片/按钮/Tab栏/列表项),列出可复用清单
6. 风格连贯性:5个页面放一起是否像同一个App的不同页面
输出:一致性评分(1-10)+ 问题清单 + 组件复用清单 + 修复建议。
产出:一致性评分7/10,发现3处问题(计划页用了16pt圆角非标准、社区页关注按钮颜色偏深、个人中心页标题用了20pt应为24pt),给出修复建议和8个可复用组件清单。
踩坑:5个页面分5次生成,即使每个提示词都引用设计系统,仍有3处偏差。根本原因是AI对"8pt网格"“12pt圆角"这种数值约束的执行有随机性。解决方法是在第五步审核后,把偏差页面用"参考首页Dashboard风格,仅修改为XX页内容"的方式重新生成,用已通过的页面作为风格锚点,比从设计系统文字生成更稳。组件复用比每页从零生成一致性更高。
总结与复用建议
| 环节 | 传统Figma流程 | AI流程 | 提效 |
|---|---|---|---|
| 设计系统定义 | 0.5天 | 20min | 12x |
| 首页Dashboard | 0.5天 | 30min | 8x |
| 数据统计页 | 0.5天 | 30min | 8x |
| 社区互动页 | 0.5天 | 30min | 8x |
| 一致性审核 | 0.5天 | 20min | 12x |
| 合计 | 2.5天/设计师 | 3h/产品经理 | 5x |
复用建议:
- 设计系统宪法:把第一步的设计系统提示词存为模板,变量化为
{App名}、{定位}、{品牌调性},新项目先出设计系统,后续每页提示词开头固化引用。这是多页一致性的根基。 - 页面模板库:把首页、数据页、社区页等典型页面结构存为模板,新App只需换设计系统(色板字体)和模块内容,页面结构可复用。
- 组件复用清单:第五步输出的"卡片/按钮/Tab栏/列表项"等可复用组件,沉淀为组件描述模板,新页面生成时引用组件名而非重新描述。
- 风格锚点策略:多页生成时,以第一个通过的页面为风格锚点,后续页面用"参考XX页风格,仅修改内容"的方式生成,比每页从设计系统文字生成一致性更高。
- 内容后填原则:AI生UI只出框架不出内容,所有文字、数据、图片用占位,产品经理在Figma里二次填入真实内容,保证可编辑性。
- 人工介入点:交互细节(手势、动画、状态切换)AI无法表达,需产品经理补充说明;iOS/Android平台规范差异需人工核对;无障碍设计(对比度、字号)需人工验证。
- 不适用场景:需要复杂交互动效演示的页面、需要精确像素级还原设计稿的开发交付场景、含真实图片内容的最终视觉稿——这三类仍需Figma手动设计。AI生UI最适合的是"高保真原型用于沟通和路演"这一中间场景。
下次新App原型直接套用本工作流,预计产品经理1人半天可完成8-10个核心页面的高保真原型,足够支撑投资人演示和早期用户调研,真正实现"产品经理不依赖设计师出图”。