AI 设计 UI 的两层进阶
独立开发者最头疼的事之一：代码我能写，但 UI 怎么做好看？
AI 时代给了一个答案——让 AI 帮你设计。但用下来你会发现，直接甩一句”帮我做个好看的界面”，出来的东西往往平庸。真正能用 AI 做出高质量 UI，需要分两层走。
第一层：60 → 80 分，让 AI 写出”还可以”的 UI
这一层的核心是给 AI 足够的上下文，而不是让它凭空发挥。
1. 有参考图再开始
不要空手让 AI 设计。先去 Dribbble、App Store 截图、Mobbin 上找到你喜欢的风格，把截图喂给 AI。
AI 擅长”模仿 + 微调”，不擅长”从零创造”。
2. 用具体词汇描述
❌ “帮我做个简洁好看的界面”
✅ “苹果 HIG 风格，间距 24px，低饱和度配色，卡片圆角 16px，字体用 SF Pro”
描述越具体，AI 输出越稳定。把”好看”翻译成可量化的设计参数。
3. 图标先占位
早期不要纠结图标。用 SF Symbols 或 emoji 占位，先把布局和交互跑通。图标是第二层的事。
4. 反复迭代
AI 改代码的成本是零。不满意就继续调，说清楚哪里不对、想要什么效果。一个页面迭代 5-10 轮是正常的。
第二层：80 → 95 分，定制化图标是关键
这一层是大多数人忽略的——真正让用户说”哇”的，不是布局配色，而是统一风格的定制图标系统。
一套风格一致的定制图标，能瞬间让 app 从”像模板”变成”有品牌感”。
完整工作流
工具链：Nano Banana Pro（图标创造）+ Claude Code（代码执行）
步骤 1：先做 1 个图标确定风格
→ 在 Nano Banana Pro 多抽几次，找到满意的风格
步骤 2：让 Claude Code 写批量生图 prompt
→ 描述每个场景的图标需求
步骤 3：Nano Banana Pro 生成一张大图
→ 包含所有图标，一次性出图
步骤 4：让 Claude Code 切图
→ Python 脚本自动分割成单个图标文件
步骤 5：让 Claude Code 集成到 app
→ 替换占位图标，统一管理关键点：先确定一个图标的风格，再批量生产。不要每个图标单独生成，否则风格不统一。
底层认知：AI 只是放大器
这是最重要的一句话：
AI 只是放大器，放大的是你本来就有的审美。
- 有审美 + AI = 高级 UI
- 没审美 + AI = 平庸 UI
所以，与其花时间学 prompt 技巧，不如花时间培养审美：
- 多用好产品，感受细节
- 收藏好设计，建立素材库
- 刻意对比”好”和”差”的区别
AI 降低了执行门槛，但没有降低审美门槛。你的眼光，决定了 AI 的天花板。