Claude Code 开发 iOS 应用简直强到离谱!这才是真正高效的工作流。

@PrajwalTomar_
英语2周前 · 2026年7月02日
146K
110
5
5
501

TL;DR

本指南揭示了一套强大的工作流:利用 FireVibe 进行统一的 UI/UX 设计,并结合 Claude Code 处理后端逻辑,从而快速交付高质量的原生 iOS 应用。

Claude Code 加上这个秘密新工具,就是我们机构一直在用的设计工作流…… 产出的效果和我之前交付的任何东西完全不在一个量级。

我已经说了好几个月了。如果你的应用看起来像 AI 垃圾,那不是 Claude Code 的问题。那是工作流的问题。

大多数开发者都困在同一个循环里。他们用 AI 交付功能。后端能跑通。逻辑很扎实。但界面看起来和其他所有“氛围感编码”的应用一模一样。而用户大概在两秒钟内就能决定,这个应用是否真实到值得信任,更别说付费了。

以前的解决办法是雇一个设计师。等上几周拿到 Figma 文件。然后看着开发人员试图用代码重建那些设计。等它上线的时候,你已经失去了动力,还烧掉了本不该烧的钱。

现在,整个过程都变成可选项了。

为了这次演示,我构建了 TripGlide,一个旅行预订应用的概念。几分钟内就完成了完整的设计系统和所有界面。通过 Claude Code 交付原生代码,无需手动重写一行代码。

这周,我也带几位一对一咨询的客户走了一遍这个确切的流程,结果非常强劲,以至于我想把整个过程完整地写下来。

这就是我现在正在运行的工作流。每个用 AI 交付产品的开发者都需要理解它是如何运作的。

以下是完整的分解。

Prajwal Tomar - inline image

一个提示词输入,一个完整的多屏应用,然后一键导出原生代码。

这个技术栈到底是什么

两个工具,两个任务。

FireVibe 是设计引擎。 这是没人关注的那一半,但正是这一半决定了你的应用能否经受住真实用户的考验。从一个简单的提示词开始,它就能给你:

→ 一个完整的多屏应用,而不是一个孤立的界面

→ 一个统一的设计系统,让每个界面都感觉是同一个产品

→ AI 生成的图像,没有任何占位符的感觉

→ 原生代码:SwiftUI、Jetpack Compose、Flutter、React Native、React

→ 可以直接放入 Xcode,或者放入 Claude Code 或 Cursor 继续构建的代码

→ 聊天式编辑,且修改能一致地应用到每一个界面

→ 如果你的团队还在用 Figma,还支持 Figma 导出

输出是可直接上架 App Store 的。不是一个概念。不是一个你还需要重建的模型。是实际的界面和实际的原生代码,大约三分钟内,在免费计划上就能完成,无需信用卡。

Claude Code 是构建引擎。 一旦你有了一个可直接上架 App Store 的前端,你就把原生代码交给 Claude Code,在上面构建真正的产品。逻辑、数据、认证、功能——那些让它不仅仅是一个漂亮外壳的东西。Claude Code 就是那个漂亮外壳变成真正产品的地方。

这就是解锁的关键。从设计开始,在构建中完成,交付你设计的同一个成品。

Prajwal Tomar - inline image

右边终端里打开的是 Claude Code,左边浏览器里打开的是 FireVibe。

为什么你的 AI 应用卖不出去

让我直截了当地说大多数开发者不想听的话。

你的应用失败不是因为代码有问题。它失败是因为它看起来像是 AI 做的,而人们不会为看起来那样的东西付费。

想想当一个人第一次打开一个应用时会发生什么。他们不会读你的代码。他们不会欣赏你的数据库架构。他们会在不到一秒内做出一个直觉判断。这看起来像一个由在乎的人制作的真正产品,还是像一个周末的 AI 实验?

大多数 AI 构建的应用都通不过那半秒的测试。字体是默认的。颜色是和其他人一样的紫色渐变。间距有点不对。图标不匹配。每个界面感觉都像是拼凑起来的略有不同的应用。

这些都不是代码问题。这是设计问题。在过去的一年里,这是 AI 无法做好的部分,所以它也是区分哪些应用能获得付费、哪些应用会被忽视的关键。

这个工作流要弥合的正是这个差距。

工作流

大多数人先构建应用,最后再添加设计。现在,这反过来了。

设计是护城河,所以从设计开始。我将用一个名为 TripGlide 的旅行应用作为贯穿示例,因为旅行应用是完美的测试。它是那种设计本身就是产品的应用。没有人会通过看起来廉价的东西预订旅行。

第一步 - 在 FireVibe 中设计完整应用

FireVibe 开始。将应用描述为一个完整的产品,而不是一系列功能。

对于 TripGlide,我使用了类似这样的描述。

设计一个名为 TripGlide 的旅行预订应用:一本恰好可以让你预订的高端数字旅行杂志。每个界面都应该感觉经过精心策划且令人向往,就像翻阅一本高级旅行杂志,同时又能轻松完成预订。

这是一个完整的产品。首先设计这些核心界面,并包含真实版本所需的辅助界面(引导页、搜索和筛选结果、保存的行程、个人资料和预订)。

首页 / 发现。按区域分组的目的地(地中海、东南亚、巴塔哥尼亚)。顶部有一个大型主打推荐,然后在区域标题下以水平滚动条形式呈现编辑精选卡片。每张卡片:全出血摄影图片、目的地名称、一行引人入胜的标语、一个低调的元数据行("7 个旅行团 · 起价 $1,200")。低调的搜索入口和一个微妙的愿望清单图标。

目的地详情。顶部是一个可滑动的照片画廊,带有清晰的页码指示器。下方:一段简短的编辑介绍、一个关键信息行(最佳季节、语言、货币、行程长度)、一个照片网格,以及带有星级评分摘要、评分分布条和单个评论卡片(头像、姓名、日期、评分、文字)的评论部分。以一个优雅的"探索旅行团"按钮结束。

旅行团行程与预订。一个按天排列的垂直时间线行程,每天显示标题、活动、包含的餐食和住宿。清晰显示价格、时长、团队规模和包含项目。然后是一个平静的多步骤预订流程(日期、旅客、附加项目、查看、确认),带有一个显示累计总价的固定摘要栏。

返回的不是一个界面。而是作为一个连贯产品的整个应用,拥有真正的设计系统和真实的图像,而不是灰色方块。首页信息流、目的地页面、行程——所有这些看起来都像是同一个团队制作的同一个应用。

这就是 TripGlide 不再看起来像 AI 实验,而开始看起来像你在 App Store 排行榜上能找到的东西的地方。

Prajwal Tomar - inline image

在 FireVibe 中生成的完整 TripGlide 应用。统一、符合品牌调性、多屏。

第二步 - 聊天式编辑,并让修改在所有地方保持一致

这是通常在其他工具中会出问题的部分,也是大多数 AI 应用最终看起来不一致的原因。

通常你修复了一个界面,其他的就偏离了。你更改了主页上的按钮,现在它和预订流程不匹配了。你最终不得不手动照看每一个界面。

在这里,你只需要对它说话。

将强调色改为更深一点的赤陶色。收紧目的地卡片上的间距。在每个界面上使用相同的预订按钮样式。

编辑会同时应用到整个应用。修改一次,它在所有地方都是一致的。这能让一个独立开发者交付一个看起来像是由真正团队制作的东西,因为无论你如何调整,设计都保持完整。

Prajwal Tomar - inline image
Prajwal Tomar - inline image

正在进行聊天式编辑,并且更改同时传播到多个界面。

第三步 - 将原生代码交给 Claude Code,然后交付

现在,你拿到可直接上架 App Store 的前端,并在其上构建真正的产品。

FireVibe 导出原生代码。对于 iOS 应用,就是干净的 SwiftUI。你把这些代码直接放入 Claude Code,然后构建设计工具本不该处理的部分。预订逻辑、数据库、用户账户、支付。那些漂亮界面背后的实际功能。

这是行之有效的分工。FireVibe 负责外观和感觉。Claude Code 负责功能。你不需要要求一个工具两者都擅长。

当构建完成时,你就像其他任何 iOS 应用一样通过 Xcode 交付它。无需重建,无需从头开始在代码中重新创建设计。你设计的东西就是你提交的东西。这就是“可直接上架 App Store”的真正含义。

Prajwal Tomar - inline image

导出的 SwiftUI 在 Claude Code 中打开,后端逻辑正在其上构建。

何时使用这个工作流

这不适用于每个项目。以下是适合使用的情况。

→ 你是一个独立创始人,正在向 App Store 交付一个真正的应用,并且你没有设计师

→ 你是一个机构或自由职业者,正在为客户应用构思概念,并且你需要一个高保真、符合品牌调性的版本,而且要快

→ 你的构建已经可以工作,但设计是阻碍你发布的因素

→ 你是一个非技术创始人,可以描述产品,但无法设计或编码

如果你的应用纯粹是内部使用的,团队之外没人会看到,你可以跳过设计打磨。

需要注意什么

在你运行这个工作流之前,有几个诚实的提醒。

品味仍然是你的。 这个工具能快速给你一个强大、统一的设计。为你的品牌选择合适的感觉,以及知道什么时候不对劲,仍然是你的工作。AI 处理生产。你负责判断。

在真实设备上测试。 “可直接上架 App Store”意味着代码是真实且可交付的,但你仍然需要在真机上打开它,并在提交前走一遍每个流程。把输出当作一个强大的初版构建,而不是最终的 QA 检查。

了解免费计划的限制。 你得到一个真正的免费计划,无需信用卡,这足以运行整个工作流并交付第一个应用。高强度的持续生产最终可能需要付费层级。从免费开始,找到你的界限在哪里。

那 20% 仍然重要。 这能让你在几分钟内达到一个漂亮、一致的应用的 80%。最后的 20%,那些让它感觉高级的微小细节,才是你发挥眼光的地方。不要跳过它。那 20% 正是让人们付费的原因。

这实际上意味着什么

这是我在真实项目上运行这个工作流后的诚实看法。

我们刚刚目睹了这一切。地球上最好的构建模型在发布几天后被政府撤下,沉寂了数周,然后又悄悄重新上线。如果你唯一的优势是你用哪个模型构建,那么那个优势距离消失只差一次政策变动。

构建应用不再是护城河了。它已经被商品化了,现在甚至变得不稳定。当困难的部分变得免费且可替代时,它就不再是让你赚钱的东西了。

设计现在是护城河。这是唯一剩下的、决定一个陌生人是否信任你的应用、愿意下载、保留并为之付费的因素。一年来,这是 AI 无法做好的部分。现在它可以了。

理解这一点的开发者将能够交付那些看起来像是由资金充足的初创公司制作的应用,在一个下午,使用免费计划。其他人将继续疑惑为什么他们能工作的应用零付费用户。

2026 年对于及早行动的应用来说将是不公平的。

太长不看版

→ 构建现在已经被商品化了,即使是最好的模型也不稳定。它不是护城河。

→ 设计现在是护城河。大多数 AI 应用卖不出去,因为它们看起来像是 AI 构建的。

→ 第一步:在 FireVibe 中设计完整应用。一个提示词,统一的设计系统,真实的图像,原生代码。

→ 第二步:聊天式编辑一次,更改在所有界面保持一致。

→ 第三步:将原生代码交给 Claude Code,在上面构建真正的产品,然后通过 Xcode 交付。

→ 输出是可直接上架 App Store 的。你设计的东西就是你交付的东西。

→ 免费计划,无需信用卡,从提示词到应用大约三分钟。在此尝试。

应用不再是困难的部分了。让人们为之付费才是。那是一个设计问题,而它刚刚被解决了。

冲吧。

二次创作

使用 YouMind 创作爆款文章

收集素材、拆解爆点、生成视觉资产、撰写内容,并在一个 AI 工作空间里完成分发。

了解 YouMind
写给创作者

把你的 Markdown 变成干净的 𝕏 文章

图片上传、表格、代码块,往 𝕏 上手动重排太痛苦。YouMind 把整篇 Markdown 一键转成干净、可直接发布的 𝕏 文章草稿。

试试 Markdown 转 𝕏

更多可拆解样本

近期爆款文章

探索更多爆款文章