AI UI 设计图
AI 画 UI 设计图：App、网页、看板和图标
先说清楚边界：AI 生成的 UI 图是一张位图，不是带图层、组件和间距标注的设计文件。它不能直接导入 Figma 继续编辑，也不能交给前端按像素切图，按钮上的文字、图表里的数字、图标的细节都可能是「看起来像」而不是准确的。把它当作最终交付物，会在开发阶段付出更多返工。
它真正有价值的地方在前期：快速试几种视觉方向给老板或客户选、给产品提案配一张像样的界面示意、给官网或应用商店做氛围图、为一套图标定风格基调。这些场景要的是「方向对不对」，而不是「每个像素对不对」，恰好是生成图擅长的。
下面六个子场景都按这个定位来写：每一类给出判断一张 UI 概念图好坏的标准、提示词结构，以及生成之后该在哪一步交回设计工具。
开始生成本页内容
App 界面：用概念图定视觉方向
AI App 界面图
判断一张 App 界面概念图，先看信息层级：第一眼看到的是不是这个页面最重要的东西（首页的主入口、详情页的商品和价格、个人页的头像和关键数据）。然后看留白和对齐：卡片之间的间距是否一致，文字是否左对齐在同一条线上。AI 出的界面常常元素很满、间距忽大忽小，看着热闹但没有层级。
提示词要按界面结构来写：顶部导航栏有什么、主体区是卡片流还是列表、底部标签栏几个图标、主色和强调色是什么、圆角大小偏圆还是偏方。写得越像一份简短的界面说明，结果越接近你要的。设备外框（手机壳）可以要也可以不要，做提案展示时加上会更直观，做风格参考时去掉更干净。
拿到满意的概念图后，正确的下一步是在设计工具里按它重建：用真实的组件库、真实的文案、真实的数据。概念图里的文字多半是乱码或假内容，不要直接截图用在上架物料里。
可以直接抄的提示词
记账 App 首页
移动端记账 App 首页界面设计图，竖屏 9:19.5 比例的手机屏幕；顶部显示本月结余的大号数字卡片，下方是按日期分组的收支列表，每条左侧圆形分类图标、右侧金额；底部四个标签栏图标；浅色背景，主色为深青色，强调色为珊瑚橙，大圆角卡片，留白充足，界面文字模糊示意即可，不要手机外框。
电商商品详情页
电商 App 商品详情页界面，竖屏；上半部是占屏幕约五分之二的商品大图轮播，下方依次为价格与优惠标签、商品标题、规格选择按钮组、评价摘要卡片；底部固定栏有加入购物车和立即购买两个按钮，后者为主色实心；白底，主色为暖红，信息层级清楚，文字模糊示意，放在一台无品牌手机外框中展示。
容易翻车的地方
- · 按钮和标签上的文字是乱码：写「界面文字模糊示意」，真实文案在设计工具里重建时再填。
- · 元素堆太满、没有层级：提示词里写清页面只放哪几个模块、哪个最重要，并加「留白充足」。
- · 直接拿概念图给开发：它没有图层和标注，必须在设计工具里重建成可交付的设计稿。
网页首屏与落地页：一屏内讲清楚卖什么
网页设计 AI
落地页首屏只有一个任务：让访客在几秒内知道这是什么、对我有什么用、下一步点哪里。所以好的首屏结构很固定——一句主标题、一句副标题、一个主按钮，外加一张主视觉（产品截图、插画或场景图）。判断 AI 出的首屏，就看这四样是否一眼可辨，主按钮是否是画面里对比最强的元素。
AI 在这里最有用的是生成主视觉本身，而不是整张网页截图。比如 SaaS 产品需要一张抽象的数据流插画，教育产品需要一张学习场景插画，硬件产品需要一张产品悬浮在渐变背景上的渲染图。这些图生成后放进真实的网页代码或设计稿里，标题和按钮用真实文字排版，效果远比生成一整张「网页图」可控。
如果确实需要整页的视觉示意（例如给客户提案），宽屏 16:9 最接近桌面浏览器视口。注意标题文字多半不准，示意图里只需要表达排版位置。
可以直接抄的提示词
SaaS 首屏主视觉插画
SaaS 官网首屏右侧主视觉插画，等距视角的几块悬浮界面卡片，卡片之间有发光的数据连线流动，卡片内是抽象的图表和列表示意；深蓝到紫色的背景渐变，卡片为半透明磨砂玻璃质感；画面左侧留出大面积干净空白给标题和按钮，横版 16:9，不要任何文字和 logo。
落地页整页示意
营销落地页桌面端首屏示意图，横版 16:9；左侧是大号标题占位、一行副标题占位和一个醒目的橙色主按钮，右侧是一只智能手表产品悬浮在柔和渐变背景上的渲染图；顶部细导航栏；整体浅色、留白多，标题文字用灰色块示意即可，不要生成可读文字。
容易翻车的地方
- · 整页图里的标题是乱码：只生成主视觉，标题和按钮在网页或设计稿里用真实文字排。
- · 主视觉和标题抢位置：提示词里指定主视觉在左或右，另一侧留空白。
- · 主按钮不显眼：在示意图阶段就确认按钮是全画面对比度最高的元素。
数据仪表盘：图表是装饰，结构才是重点
AI 仪表盘设计
仪表盘概念图里的数字和曲线都是假的，这一点要放在心上：它能帮你决定布局和视觉风格，但不能验证数据可视化选得对不对。真正的判断标准是结构——最重要的几个指标是否放在左上方的大卡片里，趋势图、分布图、明细表是否从上到下、从概览到细节排列，告警信息是否有独立且醒目的位置。
深色主题适合监控大屏和长时间盯看的运维场景，浅色主题适合日常办公的分析后台。颜色要克制：一个主色、一到两个辅助色，再加红黄绿这类状态色专门表达告警，别让每张图表都用不同的颜色系统。信息密度高的看板，卡片间距可以紧一些，但每张卡片内部要有清楚的标题和留白。
拿到方向后，图表部分建议交给真实的图表库按真实数据渲染，概念图只作为视觉参照。给汇报或提案用时，最好在图片上注明「界面示意」，避免被误读成真实数据截图。
可以直接抄的提示词
运维监控大屏
运维监控仪表盘界面设计图，横版 16:9，深色主题；顶部一排四个关键指标卡片（大号数字加小趋势线），中部左侧是服务调用量折线图，右侧是服务器状态网格，异常格子为红色；底部是告警事件列表；主色为青蓝，状态色仅用红黄绿，文字和数字模糊示意，不要真实品牌 logo。
销售分析后台
浅色主题的销售数据分析后台，横版 16:9；左侧窄边栏导航，主区域顶部为日期筛选条，下面是两张并排大卡片（营收趋势面积图、渠道占比环形图），再往下是按地区的明细表格；主色为靛蓝，辅助色为浅橙，卡片白底带细微阴影，信息层级清楚，数字和文字模糊示意。
容易翻车的地方
- · 把概念图当真实数据截图用：图里的数字是装饰，汇报时注明示意，或换成真实图表截图。
- · 颜色太多太花：限定一个主色加一到两个辅助色，状态色只留给告警。
- · 卡片布局没有主次：写明哪几个指标最重要、放在哪里、尺寸最大。
图标：一套风格统一的图标怎么出
AI 图标生成
一套图标统一与否，看五个参数：线宽是否一致、圆角是否一致、视觉大小是否一致（圆形图标通常要比方形略大才显得等大）、端点样式是否一致、填充与线性是否混用。AI 一次生成一整套时，这几个参数很容易每个图标都不一样。更稳的做法是先生成一个满意的图标作为风格样本，然后每次引用它做参考图，逐个生成其他图标。
图标的最终显示尺寸往往很小，界面里的功能图标、浏览器标签图标都只有很小几个像素。判断标准是缩到实际尺寸时是否还能认出含义：细节要少，形状要简洁，线宽不能太细。App 启动图标则相反，它有更多空间表达品牌，渐变、立体质感都可以用，但在主屏幕的小尺寸下仍要一眼认出主体形状。
生成的图标是位图。要用在界面里，通常需要在矢量工具里重新描摹或矢量化，才能无损缩放、改颜色、导出多尺寸。把 AI 图标当作「风格定稿」，而不是最终的切图资源。
可以直接抄的提示词
线性功能图标样本
单个 UI 线性图标：日历，线宽统一中等粗细，圆角端点，二十四格网格内居中绘制，留出均匀内边距；纯黑线条在纯白背景上，无填充、无渐变、无阴影；极简，缩小后依然可辨认，1:1 正方形，不要文字，不要多个图标。
App 启动图标
手机 App 启动图标，圆角方形底板，主体是一片简化的叶子与水滴组合形状，居中；底板为薄荷绿到青色的柔和渐变，主体为白色带轻微立体高光；形状简洁，缩小到主屏幕尺寸仍可辨认；1:1，图标四周不要额外边框，不要文字。
容易翻车的地方
- · 一套图标线宽粗细不一：先定一个样本图标，后续每个都引用它做参考，并在提示词里重复线宽和圆角描述。
- · 缩小后认不出：生成后缩到实际显示尺寸检查，删掉细节、加粗线条。
- · 直接把位图当切图用：在矢量工具里描摹重建，再导出多尺寸资源。
原型图：线框图和高保真示意各有用途
UI 原型图 AI
低保真线框图的目的，是在还没投入视觉设计前讨论信息结构和流程：页面有哪些区块、按什么顺序、用户从哪里进到哪里去。它应该是灰阶的、粗略的，刻意不带颜色和细节，这样讨论才会聚焦在结构而不是好不好看。AI 可以快速出几种布局方案的线框示意，帮你在会上对比。
高保真示意则是给不懂线框图的人看的：客户、老板、投资人需要看到「做出来大概长什么样」。这时可以在线框确定之后，用它做参考图，让 AI 在保持布局的前提下加上配色、图片和质感。先线框、再高保真的顺序很重要，反过来会让讨论被视觉细节带偏。
但两者都不是可交互的原型。点击跳转、状态变化、真实的表单行为，仍然要在原型工具里搭建。AI 图的作用是缩短从想法到第一版可讨论图的时间。
可以直接抄的提示词
注册流程线框图
移动端注册流程低保真线框图，三个手机屏幕横向并排：第一屏输入手机号，第二屏输入验证码，第三屏设置昵称和头像；纯灰阶，方框表示图片，横线表示文字，按钮用深灰矩形；屏幕之间用箭头表示流程方向；白色背景，横版 16:9，不要颜色，不要真实文字。
按线框出高保真示意
按参考线框图的布局生成高保真移动端界面示意，保持所有区块的位置和尺寸不变；上方为头像和昵称区，中部为三个统计数字卡片，下方为设置列表；配色为白底加雾蓝主色，圆角卡片，轻微投影；文字模糊示意，竖屏，不要改变布局结构。
容易翻车的地方
- · 线框图被画得太精致：写明「纯灰阶、低保真、不要颜色」，讨论焦点才会在结构上。
- · 高保真示意改动了布局：用线框图做参考图，提示词里写「保持区块位置和尺寸不变」。
- · 把示意图当可交互原型：点击和跳转要在原型工具里搭，AI 图只用于讨论。
在 Eimu 里怎么做
- 1先想清楚这张图的用途：选视觉方向、做提案示意，还是生成一张主视觉插画。用途决定了要不要设备外框、要不要真实文字。
- 2按界面结构写提示词：有哪些模块、从上到下的顺序、主色和强调色、圆角和留白，文字一律写「模糊示意」。
- 3在 Eimu 里一次说清要几个方向（例如「同一个首页，给三种配色方向」），先看计划卡的拆分和预估花费再开跑。
- 4图标、模板这类要成套的东西，先出一个样本并定稿，后续每一张都引用它做参考图。
- 5需要多尺寸时用扩图延展同一张主视觉，局部不满意用参考图编辑单独改，不要整张重来。
- 6方向定下来后，回到设计工具用真实组件、真实文案和真实数据重建；AI 图作为视觉参照附在需求文档里。
深度指南
常见问题
AI 生成的 UI 图能直接导入 Figma 编辑吗？
不能。生成结果是一张位图，没有图层、组件和约束。它可以作为参考图放进设计文件里，但需要设计师按它重建界面。有些工具声称能把图片转成可编辑图层，转换后的结构通常也需要大量整理。
界面里的中文按钮和标题为什么经常出错？
界面上的小字号文字密集、数量多，是生成模型最容易出错的地方。建议概念图阶段直接写「文字模糊示意」，把注意力放在布局和配色上，真实文案在设计稿里填写。
AI 能帮我生成一整套风格统一的图标吗？
能帮你定风格，但一次生成的整套图标往往线宽、圆角和视觉大小不统一。更可控的方法是先定一个样本图标，再逐个引用它生成其他图标，最后在矢量工具里统一描摹，校正线宽和对齐网格。
仪表盘概念图可以放进汇报 PPT 里吗？
可以作为「界面示意」放，但要标注清楚。图里的数字和曲线是随机生成的装饰，如果被当成真实业务数据截图，会造成误解。涉及数据结论的页面，请用真实数据渲染的图表。
AI 做的原型图能拿来做用户测试吗？
只能测第一印象类的问题，比如「你觉得这个页面是做什么的」「你会先点哪里」。涉及操作流程、点击反馈、表单填写的测试，需要可交互的原型，得在原型工具里搭建。
社媒模板：先定版式系统，再批量换内容
社媒设计模板 AI
品牌社媒模板的核心是版式系统：标题区在哪里、配图区占多大、品牌 logo 放在哪个角、底部是否有固定的信息条。一套模板的价值在于换了内容还认得出是同一个品牌。所以先确定版式，再让 AI 负责每一期的配图和背景，而不是每一期都生成一张全新的整图。
多平台尺寸要分别考虑：小红书这类图文平台常用 3:4 竖图，朋友圈和很多信息流用 1:1，短视频封面和故事类内容用 9:16。同一个活动在不同尺寸下不是简单裁切，主体和文字区的位置需要重新安排。用扩图把同一张主视觉延展到不同比例，比重新生成更能保持一致。
标题文字和日期、价格这类关键信息，建议在设计工具里后加。即使生成模型能写出较准确的中文字，促销价格、日期写错一个字就是事故，排版工具里的真实文字更可控。
可以直接抄的提示词
品牌图文模板背景
品牌社媒图文模板背景，竖版 3:4；上方三分之一为纯色标题留白区，颜色为品牌深绿，中部为一张柔和的室内绿植与自然光场景配图，底部一条浅米色细信息条；整体简洁克制，莫兰迪色调，不要生成任何文字，给标题和 logo 留出完整空白区域。
促销活动主视觉
夏季促销活动主视觉，方形 1:1；画面中央是冰块与柑橘切片飞溅的动态组合，背景为明亮的黄到橙渐变，四周点缀水珠；中央上方留出大面积空白给活动标题，下方留空给价格信息；色彩饱和明快，不要任何文字和数字。
容易翻车的地方