【教程】一口气教你用AI做出被数千名用户夸夸的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会一次性生成一张大图，包含所有图标。像这样：

Step 3：让Claude Code切图

这一步很关键。

AI生成的是一张大图，但你需要的是每个独立的小图标。怎么办？

让Claude Code写代码帮你切图。

把Nano Banana Pro生成的那张大图丢给Claude Code，告诉它：

"这张图里有12个图标，按网格排列。帮我把每个图标单独切出来，保存成独立的背景透明的png文件，按照图标的用途命名（比如security.png、favorites.png）"

Claude Code会：

1. 分析图片的布局结构

2. 写一段Python脚本

3. 自动把每个图标切出来

4. 保存成你需要的格式

整个过程可能就几分钟。当然，也可能会遇到切图不准确的情况，你可以让CC审查它切出来的图的完整性和清晰度，持续调整，直到达标位置。

Step 4：应用到app里

最后，告诉Claude Code："把这些图标应用到对应的位置上"。

它会自动把security.png放到设置页的安全选项上，把favorites.png放到收藏夹入口...

完事。

这套工作流的核心逻辑是：

AI生图工具（Nano Banana Pro）负责"创造"，AI Coding工具（Claude Code）负责"执行"。

Nano Banana Pro擅长生成有创意、有美感的视觉元素，但它生成的是一张"死图"——没法直接用到app里。

Claude Code擅长处理代码和文件操作，它能把那张"死图"变成可用的素材，然后集成到你的项目里。

两者配合，才能形成完整的工作流。

为什么这套方法有效？

回到一个更本质的问题：为什么有些人用AI做的设计好看，有些人做的就很丑？

答案可能很残酷：AI只是放大器，它放大的是你本来就有的审美。

有审美 + AI = 高级UI

没审美 + AI = 还是平庸UI

之前我写过一篇《AI时代，设计审美是唯一护城河》，核心观点是：当AI让"会做设计"变成商品化能力，"知道该做什么设计"成为真正稀缺的技能。

你不需要会Figma、Sketch、PS，但你需要知道什么是好看的。

怎么培养这个能力？没有捷径，就是多看。

总结一下这篇文章的核心要点：

第一层（60分→80分）

• 有参考图再开始

• 用具体词汇描述设计

• 图标先用系统图标占位

• 反复迭代

第二层（80分→95分）

• 用Nano Banana Pro生成定制图标

• 让Claude Code切图和集成

• 形成"生成→切图→应用"的完整工作流

底层逻辑

• 审美决定上限

• AI只是执行者

• 多看、多试、多迭代

最后说一句：不要把AI当成魔法棒，它不能帮你从0到1创造审美。但如果你知道自己想要什么，AI能帮你把想法变成现实的速度提升10倍。

注：本文首发于我的「AI编程」知识星球：https://t.zsxq.com/BFTPI 转载请注明出处