Claude Code实战指南：如何30分钟开发一个估值千万的“X了么”APP

朋友们

最近大家刷没刷到那个很火的“X了么”APP？

以前找外包做这种带后台、能发邮件的APP

对方张口就是几千块

还把代码当传家宝藏着掖着

现在3个95后成本1000块钱就估值1000万了

指北团队最近正在Vibe Coding做AI项目

这次借这个热点

记录一下如何用Claude Code + Skill
花个1-2块钱30分钟复刻一个“X了么”APP

以下的教程

全程不需要你自己写一行代码

最终做出来的效果是这样的——

温暖一点，我们叫它“好着呢”。

Claude Code（简称CC）运行需要一个环境

去 Node.js 官网: https://nodejs.org/en/download/

下载安装最新版本

（这一步能劝退50%的懒人，但你坚持一下）

然后打开电脑的终端

（Windows叫CMD，Mac叫终端）

不用怕，打开复制下面这行命令，回车就行：

npm install -g @anthropic-ai/claude-code

claude --version 

既然是中国人的APP

必须用国内最稳的 163邮箱

这里有个99%的人都会踩的坑：

程序发邮件，不能用登录密码！

要用“授权码”！

登录你的163邮箱网页版

点 设置 -> POP3/SMTP/IMAP

把服务开启

这时候会让你扫码

然后给你一串只显示一次的乱码

把这串码复制下来！保存好！

这是通往新世界的钥匙

Claude Code 最牛的地方来了

Skill（技能）

你不需要自己写代码

你只需要写一份“需求说明书”

扔给它，它自己学，自己写

我在桌面上建了个文件夹叫 Haozhene_IOS

里面新建一个文件 SKILL.md

把下面这段话原封不动复制进去：

（我已经帮大家调试了十几遍，直接抄作业）

---name: haozhene-ios-native-ultimatedescription: 构建一个原生的 iOS SwiftUI 应用，复刻“好着呢”视觉风格，内置原生 SMTP 客户端实现直接发信。---# Skill: 好着呢 (Haozhene) iOS Native Ultimate## 1. 项目目标构建一个**无需后端、无需第三方服务**的 iOS 原生应用。应用直接在客户端通过 Socket 连接 163 邮箱服务器发送邮件。## 2. 视觉规范 (UI/UX) - 完美复刻 Web 版- **全局背景**：  - 使用 `ZStack` 堆叠背景。  - 底层：深紫色渐变 (`LinearGradient(colors: [Color(hex: "0f172a"), Color(hex: "581c87"), Color(hex: "0f172a")])`)。  - 装饰：添加旋转的光晕效果（Blur Circle）和闪烁的星星。- **设计语言**：玻璃态 (Glassmorphism)。  - 卡片背景使用 `.material(.ultraThin)` 或自定义半透明白色背景 (`Color.white.opacity(0.1)`) 加上 `.blur`。- **配色方案**：  - 进度条/文字渐变：粉色 (`#ec4899`) -> 紫色 (`#a855f7`) -> 蓝色 (`#3b82f6`)。  - 已过岁月格子：粉色渐变 (`#f472b6` -> `#f43f5e`)。  - 未过岁月格子：半透明白 (`Color.white.opacity(0.15)`).## 3. 核心组件架构请生成以下 Swift 文件：1.  **`HaozheneApp.swift`**: 入口文件。2.  **`ContentView.swift`**: 主界面，包含所有视图逻辑。3.  **`LifeLogic.swift`**: 处理时间计算、生之格子数据。4.  **`DirectSMTP.swift`**: **(核心)** 一个基于 `Network.framework` 的原生 SMTP 客户端类。## 4. 详细业务逻辑### A. 界面布局 (`ContentView`)- **顶部**：  - 标题 "好着呢" (大号字体，带星光动画)。- **主卡片 (玻璃态)**：  - **生命之旅区域**：    - 标题栏 + 设置按钮 (Gear Icon)。    - **设置折叠区** (使用 `if showSettings` 控制)：      - 出生年份输入 (TextField, 数字键盘)。      - 预计寿命输入 (TextField, 数字键盘)。      - 使用 `AppStorage` 保存这两个值。    - **进度条**：      - 自定义 `ProgressViewStyle`，使用三色线性渐变。      - 下方显示大号百分比文字 (如 "32.5%")。    - **生之格子 (Life Grid)**：      - 使用 `LazyVGrid`，每行 52 格 (代表52周)。      - 这是一个横向滚动的 `ScrollView` (因为 120 年太长，垂直放不下，建议横向滑动或者限制高度内部滚动)。      - *优化方案*：为了视觉美观，只显示最近 10 年和未来 10 年，或者做成精简版格子（每格代表一月或一季）。**本次请实现：每格代表一年，共120格，一行10格，简洁直观。**  - **报平安区域**：    - 输入框：您的名字。    - 输入框：接收人邮箱 (带信封图标)。    - **发送按钮**：      - 宽大圆角按钮。      - 背景：三色渐变。      - 状态：点击后显示 `ProgressView` (转圈)，成功后弹出全屏/模态成功提示。### B. 原生 SMTP 发送逻辑 (`DirectSMTP.swift`)**这是本 Skill 最关键的部分。请严格按照以下逻辑生成代码，不要使用第三方库。**创建一个类 `SMTPSender`：- **配置**：  - Host: `smtp.163.com`  - Port: `465`  - Uses SSL/TLS: Yes- **硬编码凭证** (仅供 Demo):  - User: `REPLACE_YOUR_EMAIL`  - Pass: `REPLACE_YOUR_AUTH_CODE`- **发送流程 (Socket 通信)**:  1. 建立与 163 服务器的安全连接 (`NWConnection`).  2. 接收服务器欢迎语 (220).  3. 发送 `EHLO client`.  4. 发送 `AUTH LOGIN`.  5. 发送 Base64 编码的 User.  6. 发送 Base64 编码的 Pass.  7. 发送 `MAIL FROM: <User>`.  8. 发送 `RCPT TO: <TargetEmail>`.  9. 发送 `DATA`.  10. 发送邮件头和正文 (Subject, From, To, MIME-Version, Content-Type).  11. 发送 `\r\n.\r\n` 结束符.  12. 发送 `QUIT`.- **回调**：提供一个闭包 `completion: (Bool, String) -> Void` 来返回成功或失败。## 5. 执行计划1. 生成 `DirectSMTP.swift`，实现底层的 Socket 通信。2. 生成 `LifeLogic.swift`，包含 `LifeProgress` 结构体和计算方法。3. 生成 `ContentView.swift`，实现所有 UI 和动画。4. 确保 UI 中使用了 `LinearGradient`, `Material`, `shadow` 等修饰符来还原视觉设计。5. 在 `sendEmail` 动作中，调用 `SMTPSender.send(...)`。

注意！替换里面你自己的邮箱和授权码：

`REPLACE_YOUR_EMAIL` -> 换成你的账号

`REPLACE_YOUR_AUTH_CODE` -> 换成刚才那串乱码

注意这里的SKILLS通常是我们事先写好的技能，

类似于一个更通用的大Prompt。

如果你想写其它的，也可以。

如果你不会写，可以让AI帮你写。

或者可以去网上搜一搜相关的SKILLS拿来用。

https://skillsmp.com/zh 是一个SKILLS市场，应该能满足你的很多需求。

现在，打开终端

输入cd  (注意这里有空格)，

然后把你的 Haozhene_iOS 文件夹拖进终端，回车。

然后复制并修改下面的命令 (这是最关键的一步，请务必替换你的信息)

claude "读取 SKILL.md。请生成纯 SwiftUI 代码。【关键替换】：请在生成 DirectSMTP.swift 时：1. 将 REPLACE_YOUR_EMAIL 替换为 '你的163邮箱地址'2. 将 REPLACE_YOUR_AUTH_CODE 替换为 '你的163授权码'请直接在当前目录下生成 ContentView.swift, HaozheneApp.swift, LifeLogic.swift, DirectSMTP.swift 四个文件。不要生成 Xcode 工程文件，只生成代码文件。"

回车！

这时候你可以去倒杯水了

你会看到屏幕上代码疯狂滚动

像黑客帝国一样

Claude Code 正在帮你：

写框架... 写样式... 配置邮箱... 做测试...

这种看着AI给自己打工的感觉

真的

爽！翻！了！

等屏幕停下来

打开你的文件夹，里面应该有 4 个 .swift 结尾的文件。

Claude 帮我们造好了零件，我们现在要组装。

如果已经安装Xcode请略过，如果你没有这个软件，需要花额外的时间下载一个！

打开 Mac 上的 App Store，搜索 Xcode，点击“获取/安装”。

它非常大（十几 GB），这个的下载安装可能需要 1-2 小时。

去喝杯咖啡，等它装好。

装好后打开 Xcode，首次运行，它会弹窗让你安装组件（Install components），输入电脑密码，等待它全部配置完成。

3.1.1 新建项目

打开 Xcode。

点击 "Create New Project"。

选择 iOS -> App -> Next。

Product Name: 填 Haozhene。

Interface: 选 SwiftUI。

Language: 选 Swift。

Organization Identifier: 填 com.yourname (比如 com.zhangsan，这个很重要，后面要用)。

点击 Next，保存在 Haozhene_iOS 文件夹旁边。

3.1.2 搬运代码

打开刚刚生成的代码文件夹，将4个.swift 文件，直接拖进 Xcode 左侧的文件列表中，覆盖已有的文件。

3.1.3 本地运行测试

选择一个模拟器，如 iPhone 17 Pro Max

点击左上角三角形的播放按钮。

模拟器启动，APP 运行！

输入你的信息、名字和接收邮箱，点击发送。

如果看到成功提示，且收到了邮件，恭喜你，APP 开发完成了！

虽然步骤看起来多，但真正的难点（写代码）已经被 AI 解决了。

你所做的，只是扮演一个产品经理和测试员的角色。

如果你还想上架 App Store，你需要进行以下额外操作（这部分指北没有实操，如果有bug记得评论区反馈给我！）

需要通过 Apple Developer App 注册一个开发者账号。

要Money 688一年。

登录 appstoreconnect.apple.com。

点击 "我的 App" -> 左上角 "+" -> "新建 App"。

填写信息：

名称：好着呢 - 生命倒计时 (名字不能重复，如果重复了就改改)。

语言：简体中文。

套装 ID：选你刚才 Xcode 里设置的那个 (com.zhangsan.Haozhene)。

SKU：填一个唯一标识符，如 Haozhene_2026_01

隐私政策网址 (Privacy Policy URL)：必须提供（可以百度搜“APP隐私政策生成器”，生成一个链接填进去）。

技术支持网址 (Support URL)：用户反馈问题的网页，可以和隐私政策用同一个。

描述与关键词：描述 App 功能；关键词（100字符内）决定了搜索曝光。

点击创建。

准备素材（需要你自己做一下）：

APP 图标：找个 AI 作图，生成一个深蓝色的时钟图标。

去 appicon.co 网站，生成 iPhone 格式图标包，拖入 Xcode 的 Assets 里。

截图：在模拟器里运行 APP，截图。

你需要上传 6.5 英寸（iPhone Max）和 5.5 英寸（iPhone 8 Plus）的截图

（模拟器里可以切换机型截图）

这是最后一步！

配置签名：

在 Xcode 左侧点击最顶部的蓝色 Haozhene 图标。

点击右侧 Signing & Capabilities。

Team：选择你刚刚买了会员的账号。

打包 (Archive)：

Xcode 顶部设备选择 "Any iOS Device (arm64)" (这一步必须选这个，不能选模拟器)。

点击菜单栏 Product -> Archive。

等待编译，完成后会弹出一个窗口。

上传 (Distribute)：

点击右侧 "Distribute App"。

选择 App Store Connect -> Upload -> Next。

一路默认 Next，直到点击 Upload。

等待上传成功。

提交审核：

回到网页版的 App Store Connect。

在你的 APP 页面下方，找到 "构建版本"，点击添加（刚上传的可能要等 10 分钟才会显示）。

分级：全选“无”。

点击右上角的 "添加以供审核"。

随后状态会变为“正在等待审核”。

通常在 24-48 小时内会有审核结果！

以上，这就OK啦~