Writing
我的 AI 设计进化之路
从零开始，用 AI 做出一款精致的 iOS App
写在前面
最近的一个月，我从 0 到 1 用 AI 给自己做了一款 iOS App：Melior。
这是一款 「用 30 个问题回顾这一年」 的 App，灵感来自于 Obsidian CEO kepano 的一篇文章：40 questions。
Melior 长这样：
昨天我翻了一下整个制作过程，整理出了我用 AI 做设计的进化之路。
Manus Version
彼时的我还在澳洲旅行，刚开始认识 vibe coding。有一天我用手机让 Manus 做出了第一版，我当时应该只写了几句描述功能的提示词。
这个页面显然太太普通了：
Google Stitch Version
旅行结束后，那时 Google Stitch 非常火。Stitch 主打的是一键生成设计稿，再导入 Google AI Studio 一键生成可访问的 app。类似的，我又用几句话描述了功能和样式。
看起来比 Manus version 好一丢丢，但这也不是我想要的。
Figma Version
接下来我开始重新梳理我想要做的是什么样的产品，并转战 Figma，配合 Figma Make，把脑海中的想法实现出来。
可以看到效果非常一般，原因是我根本不会用这类设计工具… 而现学的话门槛太高了，所以我打算再换个路线。
First Claude Code Version
我首先订阅了 Claude Pro，我让 Claude Code 使用 AskUserQuestion 工具和我一起梳理想法，同时我也和 ChatGPT，Gemini 一起聊了产品设计，整理出了一系列文档。然后让 Claude Code 帮我实现第一个模块。
不过我体验完整个流程后，会觉得这是一款我自己都没有欲望使用下去的产品。我只知道它不好，但我也不知道该怎么优化。
Claude Prototype Version
这之后我做了两件事：
1. 主动学习那些我喜欢的产品，他们好在哪里。学习到我必须可以准确描述出来他们好在哪里。
2. 有时候晚上我躺在床上，想用 Claude 实现一个 idea，就会在手机上打开 Claude App，用 Sonnet 模型实现一个 prototype。然后我发现它配合 frontend-design skill 实现的 web 页面都很好看。
一步步越来越好了。这时我也把 Claude Pro 升级到了 Max。
我用同样的方式写完了第一个模块并且加了深色模式：
Claude Code Version
接下来的两个模块我又换了思路，因为目前产品调性已经确定了。当 AI 了解了产品调性后，我是不是让他自己去创造，而不是依赖我那局限的知识面了？
App Icon
上文提到，我不会用设计工具，所以我在想 Claude Code 可以帮我做 app icon 吗？
所以，我用 Claude 出 HTML prototype，一版一版打磨，定稿之后，再让他输出一张符合规格的图片。这一切都可以在手机上完成。
写在最后
写完 Melior 之后，我又写了很多美丽的前端网页，已经不知道是模型已经理解了我的审美，还是我的技巧越来越熟练，又或者，模型越来越强。所以唯一的方式就是：多多尝试。
对了，如果你也被 kepano 的文章 所打动，不妨尝试一下我做的 iOS App Melior。