【教程】一口气教你用AI做出被数千名用户夸夸的UI设计|ui设计|切图|命令提示符|工作流|编程

我的「小猫相册」app前两周做了波UI的升级，在小红书发出后，得到的评价是下面这样的

我之前在知识星球和公众号里也都说过，虽然看起来不像，但现在这套设计其实100%是由AI完成的，主要设计师是Claude Code + Nano Banana Pro，在这个设计过程中没有任何人类设计师收到伤害...当然，也没有人类设计师的认知努力体现在这套UI里。

其实，关于怎么用AI Coding工具做出更出色设计的网站，怎么做出出色的app原型设计我都写过不少教程了，你可以翻翻之前的内容去做一些了解，但这次做「小猫相册」app的UI迭代，还是让我多了不少新鲜的经验，而且确实在工作流上使用了不同的逻辑。

为了帮助你更本质的原理，我需要带你看一下「小猫相册」app更早版本的设计，我需要先谈谈怎么用AI做出这套「还可以」的设计。

大言不惭地说，上面这个版本的设计我估计也已经超过90%的人用AI Coding工具做出的设计了。你从中可以看出在界面布局，配色上是有一些细节的处理的，至少不是一眼AI，或者毫无设计的感觉。要达成这一步的设计其实直接使用Claude Code、Cursor、Trae，或者Google的AI Studio等AI Coding工具即可。

界面上所有的元素本质上都是代码，或者说都可以用代码来描述。颜色是代码，间距是代码，圆角是代码，阴影也是代码。你用自然语言表达需求，它就能给你生成对应的界面。

那为什么大多数人用AI Coding工具做出来的设计还是很丑呢？

问题不在AI，在于你给AI的指令太模糊了。以及，你的工作流组合可能完全搞错了。

第一层：让AI写出"还可以"的UI

之前我在星球群回复过一位同学关于UI设计的问题，我把核心逻辑分享一下：

第一步：不要从零开始，先有参考

很多人上来就跟AI说"帮我设计一个相册App的UI"，这等于让厨师做一道菜但不告诉他你想吃什么口味。

正确的做法是：先去App Store、小红书、Dribbble上找几个你喜欢的设计，截图保存下来。然后告诉AI："参考这几张截图的风格，帮我设计一个相册App的主界面"。

Claude 4.5和Gemini 3的图像理解能力都很强，它们能"看懂"你喜欢的设计风格，然后复刻出类似的感觉。

第二步：减少开放性，明确你要的风格

"好看"、"高级"、"简洁"这些词不是不能用，问题是它们开放性太强，把太多不确定性留给了AI。AI不知道你说的"简洁"是苹果那种简洁，还是MUJI那种简洁，还是北欧那种简洁。

更好的做法是直接指定设计风格：

"苹果Human Interface Guidelines风格"
"MUJI无印良品风格"
"Dieter Rams极简主义风格"
"Dribbble上流行的Glassmorphism风格"

这些"xx风格"本质上是大语言模型对某类设计特征的浓缩。当你说"苹果风格"，AI脑子里会自动关联到大圆角、SF Pro字体、浅色背景、微妙阴影这些元素。一个词能传递的信息量比"简洁好看"大得多。

更进一步，你可以了解一些设计元素的专业表达：

不说"留白多"，说"间距24px以上，信息密度低"
不说"有质感"，说"低饱和度配色、无边框卡片、0.1透明度阴影"
不说"温暖"，说"主色调暖黄色，强调色浅棕"

当然，如果你实在不知道怎么描述，最简单的方式还是截图。把你喜欢的设计截图丢给AI，让它学习复刻。Claude 4.5和Gemini 3的图像理解能力都很强，能"看懂"你要什么。

这个就是我之前在即刻说的那句话：你贫瘠的词汇量限制了AI编程的设计审美。

总之，不要让自己的语言能力和设计认知成为AI做出出色设计的障碍。

第三步：图标先用系统图标或emoji占位

早期版本不要纠结图标设计。SF Symbols（苹果的系统图标库）有4000多个图标，基本够用；或者直接用emoji占位，比如用代表相册、️代表删除。

后面再统一换成定制图标也不迟。

第四步：反复迭代，不要期望一步到位

我做小猫相册早期版本的UI，大概改了十几次。

"这个按钮再大一点"、"卡片圆角改成20px"、"列表间距改成16px"...每次改动都很小，但累积起来差距就大了。

AI Coding工具最大的优势就是迭代成本几乎为零。以前改一个按钮大小要打开Figma调半天，现在一句话的事。

靠这套方法，你已经能做出比大多数人更好的UI了。但说实话，这还只是"能用"的水平。

真正让用户"哇"出来的设计，需要再往前走一步。

第二层：从"还可以"到"被用户夸"

回到开头那个让用户惊艳的版本。

区别在哪？

你仔细对比一下这两个版本：

老版本：

新版本：

发现了吗？最大的区别不是布局，不是配色，而是图标。

老版本的底部tab栏用的是标准的SF Symbols——爱心、对话框、星星、人形图标。这些图标很"iOS"，很"规范"，但也很"通用"。用户一看就知道这是一个标准的iOS app，没有个性。

新版本呢？底部tab栏换成了四只可爱的小猫，每只小猫都在做不同的事情：看书、写字、拿画笔、看身份证。不只是底部导航，整个app里的功能图标都换成了小猫系列——

"月度回顾"旁边是一只抱着日历的小猫
"我的动态"顶部是一只趴在书上的小猫
"智能整理"页面里，每个功能都有对应的小猫图标：App保存是小猫抱着相框，截图是小猫举着手机，安全保障区域里的"完全掌控"是小猫拿着控制杆，"隐私优先"是小猫举着盾牌
"时光书架"里的相册封面也从普通卡片变成了3D风格的精美书本，每本书上还站着一只戴皇冠的小猫

这就是为什么用户会觉得"好可爱"、"设计好精致"。

不是布局多复杂，不是动效多炫酷，就是这一套统一风格的定制图标，让整个app的气质完全不一样了。

具体工作流：怎么让AI帮你做出这种效果

我来分享一下具体的操作流程。

Step 1：先做一个图标，确定风格

这一步很关键，不要一上来就想着批量生成。

先用Nano Banana Pro做一个单独的图标，目的是确定风格方向。

怎么做呢？多尝试：

同一个提示词多抽几次，看看不同的结果
换不同的提示词，看看能得到什么不同的效果
试试不同的风格关键词：3D卡通、扁平化、手绘、像素风...

这个阶段就是在"抽奖"，多试几次，直到你看到一个让你眼前一亮的风格。

一旦你得到一个满意的图标，保存下来作为后续的垫图。

后面再生成其他图标时，把这张图上传给Nano Banana Pro，让它"参考这个风格"来生成。这样才能保证整套图标的风格统一。

Step 2：让Claude Code帮你写生图提示词

接下来要生成一整套图标了。

但这里有个问题：每个图标需要描述"小猫在做什么"，一个一个写prompt太累了。

我的做法是让Claude Code帮我写。

先让它梳理app需要哪些图标：

"帮我梳理一下这个app需要哪些图标，列一个清单出来"

然后让它根据清单，帮我写Nano Banana Pro的提示词：

"根据这个图标清单，帮我写一段Nano Banana Pro的生图提示词。主角是一只奶油色的小猫，每个图标是小猫在做不同的事情。风格参考我上传的这张图。"

Claude Code会帮你写出类似这样的prompt：

生成一组app图标，主角是一只可爱的奶油色小猫。
需要以下场景：
1. Security - 小猫举着盾牌，表情认真
2. Full Control - 小猫站在控制台前操作按钮
3. Favorites - 小猫抱着一颗闪闪发光的爱心
4. Recoverable - 小猫站在回收站旁边，把文件捡回来
...


 风格要求：3D卡通风格，柔和的莫兰迪色调，背景透明。
所有图标的画面比例、小猫大小、配色风格保持一致。

让AI帮你写AI的提示词，这本身就是一种效率技巧。

Nano Banana Pro会一次性生成一张大图，包含所有图标。像这样：