利用 3 个 Claude Fable 提示词构建精美的 iOS 应用

@anshuc
ANGLAISil y a 1 mois · 10 juin 2026
594K
461
31
16
1.9K

TL;DR

一位前 Apple UI 设计师分享了利用 Claude Fable 开发高质量卡路里追踪器的工作流,重点介绍了自动化美学验证和逐帧审计流程。

我在 Apple 的 UI/UX 部门工作了 12 年,所以这些年我一直在跟 UIKit、SwiftUI 和 Xcode 死磕,早就耗掉了不少寿命。我用过市面上所有主流的 AI 模型来做 iOS 开发,但它们都很烂——直到用了 Fable。

作为上线第一天的测试,我让 Fable 帮我做一个个人专属、用起来很愉悦的卡路里记录 App。我对记录卡路里和健身极其执着,所以我会称重并记录每一样食物。这简直就是折磨。市面上的记录 App 全是丑爆了的 React/Flutter 界面。记录食物要反复点击和搜索。我想要一个简单、愉悦的应用,可以把所有东西一股脑丢给一个智能体。

Fable 只用了一句提示词就把它做出来了(完整的原始提示词在文章末尾):

Anshu - inline image

原文出处: https://x.com/anshuc/status/2064573467182412103

这不仅仅是个原型。它把整个东西都做出来了,包括:

  • Nano Banana 用于图片生成,带自定义 Metal 着色器效果
  • 智能体:Fable 通过提示词设计了它的个性,搭建了它的永久记忆,配置了工具调用和 Token 流式传输,甚至还为它设置了 Anthropic 的提示缓存头(之前从没见过哪个模型能正确做到这一点)
  • USDA 数据库用于获取准确的营养信息

不过,它看起来明显不像人类设计出来的、不够精致:到处是 AI 风格的渐变、杂乱的布局、一些丑陋的弹跳和过渡闪烁。但再花几步专门让它注重美学之后,我们得到了这个效果:

Anshu - inline image

下面是我学到的如何让 Fable 构建出令人惊叹的 iOS 应用的方法。

我的工具和环境

  • 我直接在终端里使用了 Claude Code,没有用什么花哨的技能或插件。Claude Fable 5 搭配 xhigh effort。我觉得如果用低 effort,做人在回路中的设计迭代会更舒服,但我想要的是全自动。
  • 我使用的是 20x($200)的 Anthropic 计划。这个项目大约用了 1-1.5 M tokens,经历了 4-5 次迭代,耗时大约 4 小时(不过我自己操作的时间不到 5 分钟)。大概用了我每周配额的 5%。$100 的档次应该也够用。$20 档次可能也行,但会把整个配额用完。
  • 一台安装了 Xcode 和 iOS SDK 的 Mac。如果你想要真正原生的体验,这一点目前还绕不开。不过值得注意的是,Claude 并没有真的去用 Xcode,它只需要 Xcode 的工具(xcodebuild, xcrun)来从命令行驱动所有东西。
  • 我从一个完全空的文件夹开始。
  • 我把一组带独立权限的 API 密钥(用于 OpenAI、Anthropic、Gemini 等常见服务)保存在一个 .env 文件中,由我的 .zshrc 引用,这样终端里的编码智能体就不需要跑来问我这些密钥了。

建立一个让 Claude 自查美学质量的循环

在我最初的提示词里,最高杠杆的一件事就是告诉 Claude 直接操纵模拟器,测试它的成果,并验证每个交互和过渡是否正常工作。

然后在第二轮设计迭代中,我特别告诉它要尽最大努力检查每一帧和每一个像素。

我没有具体说明怎么做,也不需要说。Claude 自己搞定了:

  • 它用 brew 安装了 idb 来在模拟器内模拟鼠标事件
  • 它用 ffmpeg/ffprobe 录制模拟器画面并逐帧检查过渡和动画
  • 它编写了自定义 Python/PIL 脚本来分析帧之间的像素差异、裁剪和放大帧、分析像素级细节以消除视觉跳跃、卡顿等问题

最重要的一点是设定好意图和期望:你想要一个完美、流畅、没有卡顿的界面,并且它必须真正去验证这一点。模型足够聪明,能自己搞定细节,但你得明确告诉它要在帧级别检查动画。

我没有使用 /goal 模式,但如果你发现它过早停止的话可以试试。Fable 似乎天生就被训练成会不停地追逐目标。

提示词

初始一次性提示词:

我要你构建一个 iOS 卡路里记录应用。它的设计应该极其简洁、极简,非常前卫且有美学感。打磨所有微小的细节,让一切感觉超级高级。让每一个交互都极其愉悦——你可以尽情发挥,编写自定义 Metal 着色器、自定义 UI 组件等,让一切流畅、独特、愉悦。

我在这里的想法是把它做成一个统一的对话式体验。我应该能够翻看不同的日期,每一天都是一个与智能体对话的话题。智能体应该拥有所需的任何工具,能够查询营养数据库或我过去的历史记录,并更新已记录的食物。它应该感觉个性且友好。

我希望食物条目美观——它应该理解食物,并为它们生成漂亮、风格一致的视觉呈现,比如工作室摄影风格、风格统一的图片。你可以使用现代的小型/快速图像生成模型,比如 Gemini 或 OpenAI;自己去查查。我希望能够以某种方式从话题视图缩小,看到一个可滚动的时间线,所有餐食用这些图片表示——感觉就像一本高级杂志目录。让每一个过渡流畅而愉悦,手势有趣、有弹性,充满 Apple 风格的液态玻璃质感。用着色器效果让过渡显得特别且令人难忘,让图片生成效果好看,甚至让聊天和 Token 流式传输体验独特有趣。好好思考流程,让它可用,同时不把屏幕弄乱或显得太技术化。

大部分时候你只需要凭你的最佳判断,不要来问我问题,除非你真的卡住了——我希望你按你自己的理解去诠释,让我看看你能做到什么。从零开始完整构建它,如果可以的话,在模拟器中验证所有的交互、过渡和功能。可以随意上网下载任何需要的资源和文档来让它效果出色;不要因为偷懒就什么都用无聊的 iOS 标准组件。深挖细节,打磨每一处。玩得开心!

先初始化 git,边做边提交,用文档来整理思路,这样你就不会丢失方向。编写干净、可维护、模块化的代码。

我认为这部分重要的内容如下:

  • 我对想要的 App 有清晰的想法,并且说明了我真正关心的部分,同时有意地保留了其他部分的开放性
  • 我指示它要极度注重细节、过渡和“愉悦感”
  • 我要求它自己在模拟器中验证所有交互和过渡
  • 我给了它一个大致的工作流程,包括记录工作,这样它就不会丢失进度——我觉得这样做很有用,尤其是在多次压缩的过程中,以及如果我在一个长期项目中最终用了多个智能体线程,记录也能为后续参考。你应该记录意图,而不仅仅是成果。

改善设计的后续提示词(这是我发的一条开玩笑的提示词,但它实际上效果很好):

这是个好的开始,但 X 上的人抱怨它看起来像 AI 垃圾,因为常见的渐变、视觉闪烁和笨拙的布局结构。所以你必须要好好干,证明他们是错的。我要你把设计提升 100 倍——让每一个像素完美,每一个过渡帧与帧之间无懈可击。

想一个办法来仔细检查每一帧/像素,让它看起来绝对惊艳,堪比顶级人类设计师的前 1%,立刻有资格获得 Apple 设计大奖。

什么都可以改。想从零开始写自己的组件?那就做。搞一个游戏引擎我也不在乎。写出世界上最离谱的 Metal 着色器。只要它看起来超级棒。别停手,直到它看起来像 Alan Dye 会用的东西。不能出任何差错。

以及中途的一些引导:

考虑一个能正确支持透明度的模型。让高层次的网格视图也好看一些;交替布局有点土。简化,更以图片为中心。

我希望图块在卡片视图和网格视图之间流畅过渡。构建一些漂亮的自定义视图/过渡,不要只用无聊的 iOS 视图控制器过渡。

我不认为这些是多么好的提示词,但为了透明起见,我原封不动地把它们分享了出来。我认为真正发生的只有这些:

  • 我重新运行了模型,让它把全部注意力放在美学上;这一次它不需要真正去架构功能应用,所以更加专注
  • 关于 Apple 设计质量和发挥到极致的夸张描述可能稍微有点帮助
  • 明确的引导显然非常有帮助,能缩短锁定最糟糕视觉效果所需的时间
  • 告诉它“目标是像素完美,每一个过渡帧与帧之间无懈可击”——这可能是我最重要的指示,因为这促使它真正去录制和导出帧,并一直工作到过渡变得流畅为止。

结论:模型用很少的指令就能做很多事,但不幸的是你仍然需要动脑筋。给它检查自己工作的办法,你会惊讶于它用一句提示词能做到什么。

Enregistrer en un clic

Lire les articles viraux en profondeur avec l’IA de YouMind

Enregistrez la source, posez des questions ciblées, résumez l’argument et transformez un article viral en notes réutilisables dans un seul espace de travail IA.

Découvrir YouMind
Pour les créateurs

Transformez votre Markdown en un article 𝕏 impeccable

Quand vous publiez vos propres textes longs, la mise en forme 𝕏 des images, tableaux et blocs de code est pénible. YouMind transforme un brouillon Markdown complet en un article 𝕏 impeccable, prêt à publier.

Essayer Markdown vers 𝕏

D'autres patterns à décoder

Articles viraux récents

Explorer plus d'articles viraux