AI 做 App 不想一眼假?这套流程 + 工具箱拿走

用 AI 做 App 的人越来越多了。

但说实话，大部分一眼就能看出来是 AI 做的。

就像 2000 年代的 MySpace 页面，花里胡哨但没法用。谁想用一个野兽派风格的卡路里追踪 App？听起来挺酷，用 5 分钟就想卸载。

AI 能做出漂亮的设计，但它需要引导。

给设计师一个空白 Figma 文件说「做点牛逼的」，他也会做出平庸的东西。AI 也一样。

最近看到一个设计师分享了他的流程，专门解决这个问题。挺实用，整理出来分享给大家。

7 步流程，让 AI 做的 App 不像 AI 做的

Step 1：想法 → PRD

别急着动手。

先把想法告诉 Claude，让它帮你挑毛病。

哪些功能是必须的？哪些是「以后再说」的？砍砍砍，砍到能真正发布为止。

输出一个简单的 PRD，不用花哨，够用就行。这一步的目的是聚焦。

Step 2：第一版原型

把 PRD 喂给 Claude Code、Vibecodeapp 或者 Rork。

生成之后，只检查一件事：这东西能用吗？

导航合理吗？流程顺吗？功能跑得通吗？

这时候不看设计。先确保骨架是对的。

Step 3：屏幕清单

MVP 能跑之后，让 App 生成一份清单：所有屏幕、所有功能。

这个清单是接下来设计阶段的 checklist。

Step 4：设计探索

这一步最有意思。

把屏幕清单喂给设计工具，试各种风格。可以用 Variant AI、Aura.build、v0、Superdesign。

有时候灵感来自 Dribbble 上的一张图，「这个风格挺有意思，试试看」。

作者说他默认风格是简洁、极简、注重排版。但也会尝试吉祥物风格、大胆实验风格。

实验失败很正常。失败了就退回默认风格，继续推进。重点是要试。

Step 5：进入 Figma

用 html.to.design 插件把设计导出到 Figma。

然后手动调整：间距、不一致的地方、让它更像「你的」。

这比反复让 AI「换个字体」「调整间距」更快更便宜。

Step 6：回到代码

把调整好的设计喂回 App builder。

或者下载代码用 Cursor 打开。Cursor 更便宜，适合不确定方向时的实验。

Step 7：下载前的准备

在把代码拉出来之前，让 App builder 先集成这些东西：RevenueCat（支付）、Onboarding 流程、Paywall、后端。

这些东西自己后面搞很麻烦。让 AI 先搞定。

核心观点

作者说了一句话，我觉得很到位：

AI 做得快，这是简单的部分。难的是让它看起来「有人在乎」。

这需要品味、迭代、以及知道什么时候停止实验直接发布。

太长不看版：用 Claude Code，能搞定 90%。剩下 10% 靠你自己的审美。

工具箱

代码 & 原型

• Claude Code：代码生成，能搞定 90%
• Vibecodeapp：App 原型
• Rork：App 原型
• Cursor：代码编辑，便宜适合实验

设计探索

• Variant AI
• Aura.build
• v0
• Superdesign
• Magicpatterns

设计调整

• Figma：手动调整设计
• html.to.design：导出到 Figma

集成

• RevenueCat：支付集成

设计灵感资源

另外分享一波设计灵感网站，找参考的时候很有用：

• godly.website：Hero 区块灵感
• footer.design：Footer 灵感
• navbar.gallery：导航栏灵感
• cta.design：CTA 区块灵感
• widgetbox.app：网站小组件
• mobbin.com：App 设计库
• 3dicons.co：3D 图标素材

最后说一句

AI 做 App 的门槛越来越低了。

但「能做」和「做得好看」是两回事。

流程对了，工具选对了，再加上一点审美，你做的东西就不会一眼假。

别只是 Vibecode 一下就发布。多花点时间在设计探索和调整上。

这 10% 的差距，决定了用户愿不愿意多用 5 分钟。

本文整理自 @froessell 和 @soltwagner 的 Twitter 分享