AI 时代前端设计稿生成实战：三种高效工具流
在开发前，先确定产品文档是基础。但很多时候，我们卡在如何快速产出美观的设计稿上。今天分享我的观点：AI 时代，审美能力变得特别关键。
以前做设计，你需要会 Figma、懂配色、熟悉组件库。现在这些技能门槛确实降低了——AI 可以帮你生成 80% 的基础工作，剩下 20% 才是你真正需要发挥审美判断力的地方。你要做的，是知道'什么是好的'，然后让 AI 帮你实现。
一、设计思路：先画骨架，再填皮肉
不管用什么工具，我做设计稿之前都会先做一件事：用 ASCII 或简单的线框图，把页面布局画出来。
就是那种很丑的框框图。比如这样：
┌─────────────────────────────┐
│ 顶部导航栏 │
├─────────────────────────────┤
│ │
│ ┌─────┐ ┌─────┐ │
│ │ 卡片 │ │ 卡片 │ │
│ └─────┘ └─────┘ │
│ ┌─────┐ ┌─────┐ │
│ │ 卡片 │ │ 卡片 │ │
│ └─────┘ └─────┘ │
│ │
├─────────────────────────────┤
│ 底部 Tab 栏 │
└─────────────────────────────┘
你可能会问：这么丑的图有什么用？
答案是：它帮你确定信息架构和空间分布，而不会被视觉细节干扰。
当你看到一个好看的设计时，你很容易被颜色、图标、字体吸引，反而忽略了'这个页面到底有几个区块，每个区块放什么'。画完这个草图之后，我会把它丢给 AI，让它帮我建议配色方案、补充视觉风格描述，甚至直接生成代码或设计稿。这样基本就有雏形了，后面再去细调。
二、生成初版设计稿的三种方式
下面分享我目前在用的三种方式，各有优缺点，你可以根据自己的情况选一个。
1. Google AI Studio 生成 Next.js 页面
这是我目前觉得效果最好的一种方式。
基本流程是这样的：
- 打开 Google AI Studio
- 用 Gemini 2.5 Pro 模型（目前实测效果比较好）
- 把你的需求描述给它，让它帮你生成一个完整的 Next.js 前端页面
- 生成后，用手机浏览器打开看效果（因为我做的是手机 App，所以要看移动端效果）
- 不满意就继续让它优化，比如'把卡片间距调大一点''换个更柔和的颜色'
- 一直迭代到满意为止
关键的一步来了：
拿到这个 Next.js 项目后，我不是直接用它，而是把它放到我的 iOS 项目目录里，然后让 AI（比如 Claude Code 或 Cursor）直接参考这个页面，帮我生成对应的 SwiftUI 代码和文件结构。
这样做的好处是：
- Next.js 页面生成速度快，迭代成本低
- 你可以在浏览器里快速预览、调整
- 最后再'翻译'成 iOS 代码，效率高很多
注意事项：
- 描述需求时尽量具体，比如'一个相册清理 App 的首页，顶部是存储空间统计，中间是清理分类入口，底部是 Tab 栏'
- 让它生成移动端适配的页面，不然默认是桌面版
- 迭代的时候，每次只调一两个点，不要一口气提一堆需求
