Build in Public｜AI时代做前端页面，我用这三种方式快速出设计稿

上一篇说了怎么在开发前写产品文档，最后提了一嘴"下一章分享怎么做一个美观的设计稿"。

这篇就来兑现。

先说一下我的观点：AI 时代，审美能力变得特别关键。

以前做设计，你需要会 Figma、会配色、懂排版、熟悉各种组件库。现在这些技能不是不重要，但门槛确实降低了——AI 可以帮你生成 80% 的基础工作，剩下 20% 才是你真正需要发挥审美判断力的地方。

你要做的，是知道"什么是好的"，然后让 AI 帮你实现。

一、我的设计思路：先画骨架，再填皮肉

不管用什么工具，我做设计稿之前都会先做一件事：

用 ASCII 或简单的线框图，把页面布局画出来。

就是那种很丑的框框图。比如这样：

┌─────────────────────────────┐ │ 顶部导航栏 │ ├─────────────────────────────┤ │ │ │ ┌─────┐ ┌─────┐ │ │ │ 卡片 │ │ 卡片 │ │ │ └─────┘ └─────┘ │ │ ┌─────┐ ┌─────┐ │ │ │ 卡片 │ │ 卡片 │ │ │ └─────┘ └─────┘ │ │ │ ├─────────────────────────────┤ │ 底部 Tab 栏 │ └─────────────────────────────┘ 

你可能会问：这么丑的图有什么用？

答案是：它帮你确定信息架构和空间分布，而不会被视觉细节干扰。

当你看到一个好看的设计时，你很容易被颜色、图标、字体吸引，反而忽略了"这个页面到底有几个区块，每个区块放什么"。

画完这个草图之后，我会把它丢给 AI，让它帮我：

• 建议配色方案
• 补充视觉风格描述
• 甚至直接生成代码或设计稿

这样基本就有雏形了，后面再去细调。

二、生成初版设计稿的三种方式

下面分享我目前在用的三种方式，各有优缺点，你可以根据自己的情况选一个。

方式一：Google AI Studio 生成 Next.js 页面

这是我目前觉得效果最好的一种方式。

基本流程是这样的：

1. 打开 Google AI Studio
2. 用 Gemini 2.5 Pro 模型（目前实测效果比较好）
3. 把你的需求描述给它，让它帮你生成一个完整的 Next.js 前端页面
4. 生成后，用手机浏览器打开看效果（因为我做的是手机 App，所以要看移动端效果）
5. 不满意就继续让它优化，比如"把卡片间距调大一点"“换个更柔和的颜色”
6. 一直迭代到满意为止

下载整个项目代码

关键的一步来了：

拿到这个 Next.js 项目后，我不是直接用它，而是把它放到我的 iOS 项目目录里，然后让 AI（比如 Claude Code 或 Cursor）直接参考这个页面，帮我生成对应的 SwiftUI 代码和文件结构。

这样做的好处是：

• Next.js 页面生成速度快，迭代成本低
• 你可以在浏览器里快速预览、调整
• 最后再"翻译"成 iOS 代码，效率高很多

注意事项：

• 描述需求时尽量具体，比如"一个相册清理 App 的首页，顶部是存储空间统计，中间是清理分类入口，底部是 Tab 栏"
• 让它生成移动端适配的页面，不然默认是桌面版
• 迭代的时候，每次只调一两个点，不要一口气提一堆需求

方式二：MasterGo 的 AI 生图功能

MasterGo 是国内的一个设计工具，类似 Figma。它有一个 AI 生成界面的功能，生成的图是可以二次编辑的，这点比较关键。

使用步骤：

1. 打开 MasterGo，在顶部工具栏找到 AI 图标
2. 选择"AI 生成界面"
3. 选择你要生成的是网页版还是移动端
4. 输入你的需求描述，比如"一个简洁的相册清理工具首页，主色调是浅蓝色，卡片式布局"
5. 可以调整主题颜色、圆角样式、亮/暗色模式等参数
6. 按回车，等大概 10 秒，AI 会先帮你生成详细的页面描述
7. 确认后点"开始生成"，就能看到设计稿了

不满意可以继续调整，比如"把整体文字放大 1.5 倍"“优化间距”

MasterGo 的优势：

• 生成的设计稿是真正的设计文件，图层结构清晰
• 你可以直接在上面改颜色、调间距、换图标
• 支持导出 HTML/CSS 代码
• 还可以根据你已有的界面风格，生成配套的新页面

注意： MasterGo AI 现在是商业化的，有"大匠"和"小匠"两种模型，需要消耗积分。不过对于做原型来说，免费额度应该够用。

方式三：Google Stitch 生成原型

这是 Google 在 2025 年 I/O 大会上发布的一个新工具，定位是"设计师的 AI 副驾驶"。

地址是：https://stitch.withgoogle.com/

Stitch 的特点：

• 用自然语言描述需求，就能生成设计稿
• 支持直接导出到 Figma，图层结构可编辑
• 也可以导出 HTML/CSS 代码
• 有两种模式：Standard 模式（快速）和 Experimental 模式（高保真但慢一些）

使用方法：

1. 用 Google 账号登录 Stitch
2. 输入你的需求描述
3. 等待生成（通常几十秒）
4. 可以调整配色方案、字体、边框圆角等
5. 满意后导出到 Figma 或导出代码

一些提示词技巧：

如果你还没想清楚具体要什么，描述可以简单点：

“我想设计一个相册清理类的 App”

如果你很清楚要什么功能和页面，就可以具体一点：

“一款相册清理 App，首页包含存储空间环形图、相似照片清理入口、截图清理入口、视频清理入口，风格简洁现代，主色浅灰蓝”

免费额度：

• Standard 模式每月 350 次
• Experimental 模式每月 50 次

对于做原型来说完全够用了。

三、我的实际工作流

分享一下我现在做设计的实际流程：

1. 先画 ASCII 布局图
   确定页面有几个区块，每个区块放什么
2. 把布局图和需求描述丢给 AI
   让它帮我补充视觉风格描述和配色建议
3. 选一个工具生成初版
   我个人比较常用 Google AI Studio + Next.js 的方式，因为迭代快
4. 在工具里反复调整
   每次只调一两个点，比如"间距再大一点"“颜色再柔和一点”
5. 满意后导出
   如果是 Next.js 代码，就放到项目里让 AI 参考生成 iOS 代码
   如果是 Figma/MasterGo，就作为设计参考
6. 进入开发阶段
   让 AI 参考设计稿，生成代码框架和基础页面

四、一些心得

做了这几次之后，有几个感受：

1. 审美能力真的很重要

AI 可以帮你生成很多东西，但它生成的第一版往往只是"能用"，不是"好看"。你需要有判断力，知道哪里不对、怎么改会更好。

2. 迭代比一次到位更重要

不要想着一次描述就生成完美的设计，这不现实。正确的方式是：先生成一个大概的，然后一点一点调。

3. 多看好设计

推荐几个找设计参考的地方：

• Dribbble
• Mobbin（专门收集移动端 UI）
• 各种 App 的官网截图

看多了，你自然知道什么是好的。

4. 工具只是工具

不管是 Google AI Studio、MasterGo 还是 Stitch，它们都只是帮你提高效率的工具。核心还是你对产品的理解和审美判断。

五、下一篇预告

这篇主要讲了怎么快速出设计稿，下一篇我会分享：

怎么把设计稿变成真正能跑的 iOS 代码，以及我在 Vibecoding 开发过程中踩的那个卡了一周的坑。

如果你也在做自己的产品，欢迎分享：

• 你平时是怎么做设计的？
• 有没有什么好用的工具推荐？

我会认真看每一条。下一篇见。