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

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

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

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

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

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

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

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

下面是我学到的如何让 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 设计质量和发挥到极致的夸张描述可能稍微有点帮助
• 明确的引导显然非常有帮助，能缩短锁定最糟糕视觉效果所需的时间
• 告诉它“目标是像素完美，每一个过渡帧与帧之间无懈可击”——这可能是我最重要的指示，因为这促使它真正去录制和导出帧，并一直工作到过渡变得流畅为止。

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