Build in Public｜AI时代做前端页面，我用这三种方式快速出设计稿
上一篇说了怎么在开发前写产品文档，最后提了一嘴"下一章分享怎么做一个美观的设计稿"。
这篇就来兑现。
先说一下我的观点：AI 时代，审美能力变得特别关键。
以前做设计，你需要会 Figma、会配色、懂排版、熟悉各种组件库。现在这些技能不是不重要，但门槛确实降低了——AI 可以帮你生成 80% 的基础工作，剩下 20% 才是你真正需要发挥审美判断力的地方。
你要做的，是知道"什么是好的"，然后让 AI 帮你实现。
一、我的设计思路：先画骨架，再填皮肉
不管用什么工具，我做设计稿之前都会先做一件事：
用 ASCII 或简单的线框图，把页面布局画出来。
就是那种很丑的框框图。比如这样：
┌─────────────────────────────┐ │ 顶部导航栏 │ ├─────────────────────────────┤ │ │ │ ┌─────┐ ┌─────┐ │ │ │ 卡片 │ │ 卡片 │ │ │ └─────┘ └─────┘ │ │ ┌─────┐ ┌─────┐ │ │ │ 卡片 │ │ 卡片 │ │ │ └─────┘ └─────┘ │ │ │ ├─────────────────────────────┤ │ 底部 Tab 栏 │ └─────────────────────────────┘ 你可能会问：这么丑的图有什么用？
答案是：它帮你确定信息架构和空间分布，而不会被视觉细节干扰。
当你看到一个好看的设计时，你很容易被颜色、图标、字体吸引，反而忽略了"这个页面到底有几个区块，每个区块放什么"。
画完这个草图之后，我会把它丢给 AI，让它帮我：
- 建议配色方案
- 补充视觉风格描述
- 甚至直接生成代码或设计稿
这样基本就有雏形了，后面再去细调。
二、生成初版设计稿的三种方式
下面分享我目前在用的三种方式，各有优缺点，你可以根据自己的情况选一个。
方式一：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 栏"
- 让它生成移动端适配的页面，不然默认是桌面版
- 迭代的时候，每次只调一两个点，不要一口气提一堆需求
方式二：MasterGo 的 AI 生图功能
MasterGo 是国内的一个设计工具，类似 Figma。它有一个 AI 生成界面的功能，生成的图是可以二次编辑的，这点比较关键。
使用步骤：
- 打开 MasterGo，在顶部工具栏找到 AI 图标
- 选择"AI 生成界面"
- 选择你要生成的是网页版还是移动端
- 输入你的需求描述，比如"一个简洁的相册清理工具首页，主色调是浅蓝色，卡片式布局"
- 可以调整主题颜色、圆角样式、亮/暗色模式等参数
- 按回车，等大概 10 秒，AI 会先帮你生成详细的页面描述
- 确认后点"开始生成"，就能看到设计稿了
不满意可以继续调整，比如"把整体文字放大 1.5 倍"“优化间距”
MasterGo 的优势：
- 生成的设计稿是真正的设计文件，图层结构清晰
- 你可以直接在上面改颜色、调间距、换图标
- 支持导出 HTML/CSS 代码
- 还可以根据你已有的界面风格，生成配套的新页面
注意： MasterGo AI 现在是商业化的，有"大匠"和"小匠"两种模型，需要消耗积分。不过对于做原型来说，免费额度应该够用。
方式三：Google Stitch 生成原型
这是 Google 在 2025 年 I/O 大会上发布的一个新工具，定位是"设计师的 AI 副驾驶"。
地址是：https://stitch.withgoogle.com/
Stitch 的特点：
- 用自然语言描述需求，就能生成设计稿
- 支持直接导出到 Figma，图层结构可编辑
- 也可以导出 HTML/CSS 代码
- 有两种模式：Standard 模式（快速）和 Experimental 模式（高保真但慢一些）
使用方法：
- 用 Google 账号登录 Stitch
- 输入你的需求描述
- 等待生成（通常几十秒）
- 可以调整配色方案、字体、边框圆角等
- 满意后导出到 Figma 或导出代码
一些提示词技巧：
如果你还没想清楚具体要什么，描述可以简单点：
“我想设计一个相册清理类的 App”
如果你很清楚要什么功能和页面，就可以具体一点：
“一款相册清理 App，首页包含存储空间环形图、相似照片清理入口、截图清理入口、视频清理入口，风格简洁现代，主色浅灰蓝”
免费额度：
- Standard 模式每月 350 次
- Experimental 模式每月 50 次
对于做原型来说完全够用了。
三、我的实际工作流
分享一下我现在做设计的实际流程：
- 先画 ASCII 布局图
确定页面有几个区块，每个区块放什么 - 把布局图和需求描述丢给 AI
让它帮我补充视觉风格描述和配色建议 - 选一个工具生成初版
我个人比较常用 Google AI Studio + Next.js 的方式，因为迭代快 - 在工具里反复调整
每次只调一两个点，比如"间距再大一点"“颜色再柔和一点” - 满意后导出
如果是 Next.js 代码，就放到项目里让 AI 参考生成 iOS 代码
如果是 Figma/MasterGo，就作为设计参考 - 进入开发阶段
让 AI 参考设计稿，生成代码框架和基础页面
四、一些心得
做了这几次之后，有几个感受：
1. 审美能力真的很重要
AI 可以帮你生成很多东西，但它生成的第一版往往只是"能用"，不是"好看"。你需要有判断力，知道哪里不对、怎么改会更好。
2. 迭代比一次到位更重要
不要想着一次描述就生成完美的设计，这不现实。正确的方式是：先生成一个大概的，然后一点一点调。
3. 多看好设计
推荐几个找设计参考的地方：
- Dribbble
- Mobbin（专门收集移动端 UI）
- 各种 App 的官网截图
看多了，你自然知道什么是好的。
4. 工具只是工具
不管是 Google AI Studio、MasterGo 还是 Stitch，它们都只是帮你提高效率的工具。核心还是你对产品的理解和审美判断。
五、下一篇预告
这篇主要讲了怎么快速出设计稿，下一篇我会分享：
怎么把设计稿变成真正能跑的 iOS 代码，以及我在 Vibecoding 开发过程中踩的那个卡了一周的坑。
如果你也在做自己的产品，欢迎分享：
- 你平时是怎么做设计的？
- 有没有什么好用的工具推荐？
我会认真看每一条。下一篇见。
