大家好，我是顾北！
不知道，你以前制作一款 APP 的 UI 设计稿流程是怎么样的？
反正我以前做的时候，找灵感、画线框图、用 Figma/Sketch 抠细节、配颜色、找素材……最后还要给开发演示。一套流程下来，没有三五天是搞不定的。
但是今时不同往日了，今天，我想给你看点“魔法”。
只需要 5 分钟，不仅高保真 UI 图设计出来了，而且连可以交互的网页 Demo 都生成了！
不卖关子，先看成品！
这套极简风格的博客 APP，就是我利用Nano Banana Pro配合Gemini 3快速落地的。
想知道怎么做的吗？全套 Prompt（提示词）直接公开，建议收藏！ 👇
步骤1：定义主视觉（首页）
万事开头难，但对 AI 来说，只需一段精准的描述。
我想做一个 Medium 风格的博客 APP ，要求：iOS 17 风格、极简、4K 质感。
【首页】提示词
A high-fidelity 4K screenshot of an iPhone 17 Pro (1290x2796 px, 20px rounded screen corners with Dynamic Island) displaying the "Home" screen of a minimalist, Medium-style blog application. The overall aesthetic is clean vector UI with a light grey background (#F5F5F5), rounded corner cards, and soft, diffused shadows.
Top Status Bar: Standard iOS 17 status bar elements (time, cellular signal, Wi-Fi, battery icon) integrated around the Dynamic Island.
Header: Below the status bar, a rounded search bar (12px radius, light grey fill) with the placeholder text "搜索文章、作者" and a search icon. Below that, a segmented control bar featuring four rounded capsule tabs. The first tab, "关注", is active with blue text (#0A5BFF) on a white background with a soft shadow. The other tabs ("推荐", "热榜", "专栏") are inactive grey text on a transparent or light grey background.
Main Content: A double-column waterfall feed of content cards. Each card has rounded corners and a soft shadow. The cards feature high-quality, 16:10 aspect ratio Unsplash-style lifestyle/nature cover photos at the top. Below the photo is a 2-line truncated article title in dark text. At the bottom of the card, a small author avatar and nickname, followed by a heart icon with a like count (e.g., "1.2k"), and publication time (e.g., "2小时前").
Floating Button: In the bottom right corner, a large (56px diameter) circular floating action button with a smooth blue-to-white gradient fill, containing a white "+" icon, casting a soft shadow.
Bottom Tab Bar: Fixed at the bottom, a clean white tab bar with a thin top border. Three icons with labels: "首页" (Home), "发现" (Discover), "我的" (Profile). The "首页" icon and label are highlighted in the brand blue color (#0A5BFF). The other two are grey. No watermarks
划重点：提示词中对光影、圆角参数、布局结构的详细描述，是生成高质量 UI 的关键。
步骤2：保持一致性（发现页 & 个人中心）
很多同学用 AI 做 UI 最头疼的就是： 第二张图风格变了。
这里有个小技巧：让 Nano Banana Pro 参考第一张图（垫图/参考模式）。
我们将【首页】作为参考图，输入以下简单的指令，AI 就能秒懂你的设计语言。
【发现】页提示词
深度分析这张原型图，参考这张原型图帮我绘制【发现】页面，保持图片主体和原图风格一致
【我的】页提示词
深度分析这张原型图，参考这张原型图帮我绘制【我的】页面，保持图片主体和原图风格一致
看，配色、圆角、图标风格完美统一！这就是 AI 的理解力。
最终效果图如下图所示。可以看到现在AI的理解力已经达到深不可测的能力了。
步骤3：见证奇迹（静态变动态）
只有图片怎么够？我们要的是能给客户、给老板演示的产品！
这时候，轮到Gemini 3上场了。把刚才生成的 UI 图扔给它，说出你的愿望
先看效果
提示词：
参考我的UI原型图，帮我生成一个可以交互方便产品演示的网站
稍等片刻，Gemini 3 就会直接吐出 HTML/CSS/JS 代码。
更多场景实战：不只是“画图”
看到这里，你可能以为这只适合做“漂亮图片”。那你可就大错特错了！
无论是B端后台 、 低保真线框图，还是特定风格 App，它都能通吃。
只有你想不到的，没有它做不到的。
场景一：产品经理最爱的“低保真线框图”
以前用 Axure 画线框图，五个页面至少一下午。现在？
不出五分钟，就结束战斗了！
提示词
输出一套微信小程序「校园二手市场」的黑白线框图，共 5 张连贯流程：①首页商品瀑布流 ②商品详情 ③发布页 ④个人中心 ⑤订单列表；使用中文标注，保持元素对齐与间距一致，整体为低保真风格
场景二：抖音风格沉浸式 UI
客户想要“短视频风格”？安排。
提示词
生成一张 iPhone 15 竖屏高保真原型图，展示「抖音」风格短视频 App 的「发现」页：顶部搜索栏 + 分段标签（热门｜附近｜关注），下方双列卡片流，每张卡片含封面图、标题、点赞数、时长标签；整体采用浅灰背景 + 圆角卡片 + 柔和阴影，输出 4K 矢量质感
场景三：B 端图书管理系统
哪怕是复杂的后台数据看板，也能轻松拿捏。
最后
看着这些图，我不禁想起以前趴在电脑前用 Axure 没日没夜连线的日子。
那时设计一套完整的流程图需要好几个小时，而现在：Prompt 构思 (1分钟) + AI 生成 (3分钟) + 代码转换 (1分钟) =5分钟完工。
工具的进化不是为了替代我们，而是为了让我们 把时间花在更核心的“创意”和“逻辑”上 ，而不是死磕线框和像素。
如果你也想提升效率，不妨试试这套工作流！
另外我为大家准备了10万字 AI 使用手册， 后台回复“领取资料” ，即可免费领取这份 10 万字的 AI 实战宝典。
如果觉得这篇教程对你有启发， 随手点个赞、在看、转发三连吧~
谢谢你耐心看完我的文章~
今日互动：你在设计工作中，最耗时的环节是什么？欢迎在评论区告诉我，下期教你用 AI 解决它！
