大家好，我是顾北！

不知道，你以前制作一款 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 解决它！