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 栏'
- 让它生成移动端适配的页面,不然默认是桌面版
- 迭代的时候,每次只调一两个点,不要一口气提一堆需求




