Skip to content
Writings

我的 AI 设计进化之路

Kexin Li

TL;DR

我的 AI 设计进化之路：

  1. 尝试了 Manus / Google Stitch，发现一键生成 design draft/app/landing page，本质上是在考验精准描述产品的能力。如果没有提前思考过期望的产品形态，甚至都不知道如何做删减。
  2. 尝试了 Figma / Figma Make，很可惜我不擅长用设计工具。
  3. 使用 Claude 的 AskUserQuestion 工具，和 AI 深度聊产品理念和设计。
  4. 学习我喜欢的产品，直到我可以精准描述出来他们好在哪里。
  5. 使用 Claude Prototype 功能实现 HTML 版本，再让 Claude Code 负责实现 Swift 版本。
  6. 当 AI 了解了产品调性后，让 AI 去当 creator，人要当 curator。
  7. 我负责描述意象，Claude Code 负责脑暴什么样的 UI 可以准确表达意象。各种 design skills 对于我来说只是锦上添花的作用。
  8. 用 SVG 画 app icon。

写在前面

最近的一个月，我从 0 到 1 用 AI 给自己做了一款 iOS App：Melior。

这是一款 「用 30 个问题回顾这一年」 的 App，灵感来自于 Obsidian CEO kepano 的一篇文章：https://stephango.com/40-questions。

Melior 长这样：

昨天我翻了一下整个制作过程，整理出了我用 AI 做设计的进化之路。

⚠️

提前说明：虽然我用了 Manus, Google Stitch, Figma Make, Codex, Claude 等等，但这篇文章不是工具评测，而是更想强调我的 AI 使用方法迭代路线。

#1 Manus Version

彼时的我还在澳洲旅行，刚开始认识 vibe coding。有一天我用手机让 Manus 做出了第一版，我当时应该只写了几句描述功能的提示词。

这个页面显然太太普通了：

#2 Google Stitch Version

旅行结束后，那时 Google Stitch 非常火。Stitch 主打的是一键生成设计稿，再导入 Google AI Studio 一键生成可访问的 app。类似的，我又用几句话描述了功能和样式。

看起来比 Manus verison 好一丢丢，但这也不是我想要的。

🤔

此时，我意识到了问题。

一键生成 design draft/app/landing page，本质上是在考验精准描述产品的能力。如果没有提前思考过期望的产品形态，甚至都不知道如何做删减。

#3 Figma Version

接下来我开始重新梳理我想要做的是什么样的产品，并转战 Figma，配合 Figma Make，把脑海中的想法实现出来。

可以看到效果非常一般，原因是我根本不会用这类设计工具… 而现学的话门槛太高了，所以我打算再换个路线。

#4 First Claude Code Version

我首先订阅了 Claude Pro，我让 Claude Code 使用 AskUserQuestion 工具和我一起梳理想法，同时我也和 ChatGPT，Gemini 一起聊了产品设计，整理出了一系列文档。然后让 Claude Code 帮我实现第一个模块。

不过我体验完整个流程后，会觉得这是一款我自己都没有欲望使用下去的产品。我只知道它不好，但我也不知道该怎么优化。

#5 Claude Prototype Version

这之后我做了两件事：

  1. 主动学习那些我喜欢的产品，他们好在哪里。学习到我必须可以准确描述出来他们好在哪里。
  2. 有时候晚上我躺在床上，想用 Claude 实现一个 idea，就会在手机上打开 Claude App，用 Sonnet 模型实现一个 prototype。然后我发现它配合 frontend-design skill 实现的 web 页面都很好看。
🤔

那时候我认为 Sonnet 模型比 Opus 模型更有创造力，所以我会先让 Sonnet 实现 HTML，我再让 Opus 用 Swift 复刻出来，再打磨细节。

一步步越来越好了。这时我也把 Claude Pro 升级到了 Max。

  • 左边：HTML
  • 中间：复刻 + 微调的样子
  • 右边：打磨细节后的样子

我用同样的方式写完了第一个模块并且加了深色模式：

#6 Claude Code Version

接下来的两个模块我又换了思路，因为目前产品调性已经确定了。当 AI 了解了产品调性后，我是不是让他自己去创造，而不是依赖我那局限的知识面了？

🤔

在这个阶段，我负责描述意象，Claude Code 负责脑暴什么样的 UI 可以准备表达意象。当他提出有好几个方案时，我会说你都实现出来，我看效果再做决定。

用 「书」 的意象做出来的 Summary 模块：

用 「拍立得」 的意象做出来的 Recaps 模块：

#7 App icon

上文提到，我不会用设计工具，所以我在想 Claude Code 可以帮我做 app icon 吗？

🤔

如果是做 icon，最合适的代码形式就是 SVG，它不失真且可缩放，可以用 CSS 调整样式。

复杂的 icon 可能做不到，但简单和克制类型的 icon 我认为可以试一试。

所以，我用 Claude 出 HTML prototype，一版一版打磨，定稿之后，再让他输出一张符合规格的图片。这一切都可以在手机上完成。

🤔

在公司里，设计师出设计稿，程序员用代码实现设计稿。我们其实是在用不同的工具输出同一个东西。

现在 AI 的出现打破了这层分工，很多时候可以省略设计稿，直接让代码实现就好了。

写在最后

写完 Melior 之后，我又写了很多美丽的前端网页，已经不知道是模型已经理解了我的审美，还是我的技巧越来越熟练，又或者，模型越来越强。所以唯一的方式就是：多多尝试。

对了，如果你也被 kepano 的文章所打动，不妨尝试一下我做的 iOS App Melior。