内容摘要

本期是《用 Claude Code 构建真实手机 App》完整课程的第一集（55 分钟）。作者（月入 30 万美元、业务几乎全部建立在 Claude Code 之上）先展示成品：一个五分钟做出的习惯追踪器，并给出课程进阶路线——本地存储 → 加 API → 加数据库 → 全云端（对标以 5000 万至 1 亿美元成交的 Cal AI）。随后从零配置：注册 Claude（重点安利 20 美元/月 Pro 的投资回报）、在 Google Antigravity 中安装 Claude Code for VS Code 扩展、并用一个极简单页网站验证环境；横向对比三种移动开发路线（Expo + React Native、Flutter + Firebase、Capacitor）后选定 Expo。实操部分：一句提示词搭好工作区、开启 dangerously skip permissions、生成习惯追踪器演示 App、手机装 Expo Go 扫码真机运行，并强调“让 AI 替你执行终端命令”的高杠杆习惯。下半场是全片方法论核心——五步 App 设计框架：核心功能 → 核心循环（30 秒内动作→奖励，配视觉/触觉/音效反馈，举 Opal 宝石养成案例）→ 附属功能（历史图表、多级习惯、社交）→ 表面积检查（五到七屏以内）→ 留存钩子（三天挑战、每日打卡提醒）。作者用语音转录工具把整套框架一次性喂给 Claude，配合 /init 生成 claude.md 省 token，让 Claude 分四阶段完整重构 App：引导页、三天挑战、Today 打卡（提示音+彩色纸屑）、History 图表、Manage 管理、每习惯独立提醒、自定义挑战与开发者测试工具；期间演示了字体颜色不可见、统计口径不一致等 bug 的排查与修复，最终在 Chrome 中全流程验收，准备转入真机测试。

中英对照全文

[00:00]

Hey, this is a full course on how to build a real mobile app with cloud code. So from nothing to a working app on your phone, whether it's Android or iOS. I run a business that does around 300k a month, and it's almost entirely built on cloud code now. I've also shipped several web apps and SaaS products. And the number one most requested video I get is how do I take all this awesome knowledge and use it to build mobile apps? That's exactly what I'm gonna show you guys how to do today. By the end of this video, you'll have a working app running on your actual phone. It's not going to be a mock-up. It's not going to be some sort of emulator. It's going to be a real app that you could show people as well as the App Store and Play Store links. And you don't need any prior mobile development experience. If you guys can type an English sentence into a terminal, he'll be able to follow along just fine. In terms of what to expect, first, I'll show you guys a finished app that's running on my iOS phone in under two minutes. Then we'll set up everything from scratch. So, cloud code, the mobile development environment, and then your phone as a testing device. Then I'll walk you through how mobile apps actually work. And there are a few different... frameworks you can use to build these things, but I'll focus on a couple in particular. I'll talk about React Native, I'll talk about Expo, and so on and so forth. Then we'll actually build an entire app together. I'll show you how to test it on your phone in real time as we build, then we'll just repeat that exercise another three or four times. So you guys get really used to building apps with different levels of functionality. And at the end, I'll show you how to take these apps and submit them to the App Store and then the Google Play Store. Okay, so hopefully you guys are as excited as I am. Use the bookmarks and chapter headings down below to save your spot and jump around as needed, and I'll catch all y'all in the video. So I have an app right over here that I want to show you guys. It's just a simple habit tracker app. Obviously doing it in this form is kind of annoying. So what I've instead done is I've loaded this up locally on my computer and I want you guys to know from an interface perspective, it's the exact same thing. It's just you are going to need to run these on your computer in order to do the design and so on and so forth. That's the whole idea. And as you guys can see here, it's got a simple onboarding page. I've set the resolution here to mobile.

大家好，这是一套完整课程：如何用 Claude Code 构建一个真正的手机 App——从零开始，到能在你手机上跑起来的成品，安卓、iOS 都行。我运营着一家月收入约 30 万美元的公司，现在几乎全部业务都建立在 Claude Code 之上。我还上线过多个 Web 应用和 SaaS 产品。大家问得最多的就是：怎么把这些知识用来做手机 App？这正是今天要教你们的。看完这期视频，你会有一个真正跑在自己手机上的 App——不是模型，不是模拟器，而是能拿给别人看、也能提交 App Store 和 Play Store 的真应用。你不需要任何移动开发经验，只要能在终端里打一句英文，就能跟上。流程安排：先花不到两分钟给你们看一个跑在我 iPhone 上的成品 App；然后从零配置一切——Claude Code、移动开发环境、把手机变成测试设备；接着讲手机 App 的原理。能做 App 的框架有好几种，我会重点讲 React Native 和 Expo。然后我们一起完整构建一个 App，边建边在手机上实时测试，这样重复三四次，让你真正习惯用不同功能复杂度做 App。最后教你怎么把这些 App 提交到 App Store 和 Google Play。好了，希望大家和我一样兴奋。用下方的书签和章节标题随跳随看，视频里见。我这儿有个 App 给大家看，就是一个简单的习惯追踪器。直接看代码形态很烦，所以我把它加载在电脑本地——界面和手机上完全一样，只是设计阶段需要先在电脑上跑。大家可以看到，它有一个简单的引导页，我把分辨率设成了手机尺寸。

[01:44]

You know, you can create your first habit. I don't know, maybe I want to do like a training habit of three times a day with a specific color. And then as you guys can see, you now sort of have that laid out. You know, if I tap this, I can sort of fill that up logically. This is more or less the exact same thing as any, you know, mobile app that you might see in the app store that does the same thing. And I did this in legitimately less than five minutes using Cloud Code and then a couple of cute little prompt templates that... allow you to build these sorts of things and scaffold them really quickly. Now, the development system I'm going to show you guys in today's video is going to involve developing it as a web application first. So that is something that is accessible in a web browser. The benefit there is obviously you can design something and then push it out for the web. So you can have it on a website and then you can also port it over to your phone. Then we can optimize it for phones as well as things like tablets and so on and so forth. And it's probably the simplest and most straightforward one. But I also want to be clear that it's not the only way to build an app. I'm also starting off with a cute little habit tracker example here, just because this usually involves most of the functionality that people want in an app. Usually you want some sort of database of some sort. You want a way to read the database. You want a way to, you know, send information to the database, modify it. Then you want some sort of front end feature that, you know, interacts with the database in a particular way. You want, you know, some sort of authentication setting, which I'll show you guys how to build. And then, you know, you want some sort of like cute little functionality. But by no means is this the only sort of app you can build. You can build literally anything as we progress through the course. I'm going to show you guys how to build apps that use AI to do really cool things. For instance, this app Cal AI is a good example of, you know, weaving AI into traditional app functionality. You can take a photo of something and then, you know, send it off to an API. They just sold for 50 to 100 million dollars, I think, to MyFitnessPal. So you'll get to the point where you can build apps just like this. We'll use similar sorts of designs and stuff like that by the by the end of this course. And so the progression.

你可以创建第一个习惯，比如一个每天三次的训练习惯，选个颜色，然后它就排好了。点一下就能打卡填充。这跟 App Store 里任何同类习惯追踪 App 基本是一回事。而我做这个真的只花了不到五分钟，用的是 Claude Code 加几个小巧的提示词模板，能让你快速搭建这类东西。今天要展示的开发体系是：先把 App 作为 Web 应用来开发——就是能在浏览器里访问的那种。好处是显然的：设计好就能发布到网页，也能移植到手机上，还能针对手机、平板等优化。这可能是最简单直接的路线，但我要说明它不是做 App 的唯一方式。我从一个习惯追踪器小例子开始，因为它通常涵盖了大家做 App 想要的绝大部分功能：某种数据库、读取数据库的方式、写入和修改数据的方式、某种与数据库交互的前端功能，以及某种登录验证——我会教你们怎么做。再加上一些可爱的小功能。但这绝不是你唯一能做的 App 类型，随着课程推进，我会教你们做用 AI 实现很酷功能的 App。比如这个 Cal AI 就是把 AI 织进传统 App 功能的好例子：拍张照片发给 API 识别。它好像刚以 5000 万到 1 亿美元卖给了 MyFitnessPal。到课程结束时，你们也能做出这样的 App，用上类似的设计。

[03:29]

To want you guys to think about is we're going to start over on the left by building a local habit tracker app that's going to include no API. So we're not going to send or receive requests to any third party services, we're just going to store it all locally. We're not going to have any sort of database, we're just going to do it sort of directly on our phone or in the local storage. From there, we're going to add an API on and so you know, we're going to be using functionality that somebody else has created, but we're going to wrap that in our app, then we're going to add a database on Then we're going to push this over to a cloud solution. And then finally, we're going to have cloud, we're going to have an API, we're going to have authentication. So we're gonna have some sort of login screen, and then a database more similar to that app that sold for, you know, between 50 to $100 million. So whatever your goals are, you'll be able to meet them in this course. I just want to make sure that everybody's on the same page here so you don't see me developing a habit tracker app and be like, oh my god, this is such a crappy thing. Why the hell would anybody design the 100th habit tracker app? The habit tracker app is the means to an end. It's not the actual end itself. Okay, without further ado, let's actually talk about how we're going to build this, including cloud code, setting up our development environment, and then also setting up our phone as a testing device before doing some real basic dev just to show you guys what this looks like in practice. So step one of building mobile apps with Claude code is having Claude code. And so in order to do that, just go to claude.ai slash login. You'll see a page that looks something like this. Obviously, their design may have changed by the time that you guys are taking a look at it.

希望大家记住的进阶路线是：从左边开始，先做一个本地习惯追踪器——不接任何 API，不跟第三方服务收发请求，数据全部存在本地，没有数据库，直接存手机或本地存储。然后我们加上 API——用别人做好的功能，包进我们的 App；再加上数据库，然后把它推到云端方案。最终形态是：云端、API、登录验证俱全——有登录页，有数据库，跟那个卖了 5000 万到 1 亿美元的 App 更接近了。无论你的目标是什么，这门课都能带你达到。我先统一一下认知，免得看到我做习惯追踪器就嘀咕：天哪，这也太烂了，谁会去做第 100 个习惯追踪 App？习惯追踪器只是手段，不是目的。好，闲话少说，来聊聊具体怎么建：Claude Code、开发环境配置、把手机设成测试设备，再来一点真实的开发，让大家看看实操长什么样。用 Claude Code 做手机 App，第一步当然是拥有 Claude Code。去 claude.ai/login，你会看到类似这样的页面。等你们看到时设计可能已经变了。

[04:50]

And then you can either continue with Google or enter your email. So I'm just going to enter my email address. After that, you'll get an email sent that allows you to sign in. And then once you're signed in, you'll have a variety of different plans shown to you. Now, I'm actually already on the highest plan over here called the Max. But you guys are fine signing up with the Pro, at least for this demo. Anybody skulking at the price, 20 bucks a month is probably the highest return on investment you will ever get. I use cloud for more or less everything now. As mentioned, this several hundred dollar a month plan legitimately runs a $300,000 a month business. So talk about ROI. Personally, I would just get at least one month, learn as much as you can. And then if you want to experiment with local models and other approaches and stuff like that to save on costs, feel free to do that. It's just. best to learn at least initially from the source. So I'm not going to click downgrade because I already have my account, but assuming that you do, it'll take you to a quick payment page and then you can customize your cloud. And then once you're done, you'll have a page that looks something like this. So I'm just going to say, hey, what's going on? And cloud will get back to me, essentially giving me a response. What's on the docket? People even say that anymore. I don't know. Now, the thing to know about cloud, if it's the first time you're using it, is this right here is your cloud chat. But in order to do things like develop and design mobile apps, we've got to move away from the vanilla Claude Chat. We've got to move towards a little more complex of a feature called Claude Code. Now, Claude Code has a bunch of different ways to visualize and use. And this little space invader down here is going to be omnipresent if you're doing coding, so get used to it.

可以用 Google 继续，或输入邮箱。我就直接输邮箱，然后会收到一封登录邮件。登录后会展示各种订阅方案。我已经在最高档的 Max 方案上，你们用 Pro 就够这个演示用了。嫌贵的朋友听我说：每月 20 美元可能是你这辈子回报率最高的一笔投资。我现在凡事都用 Claude。这个每月几百美元的套餐，实打实撑起了一家月入 30 万美元的公司——这 ROI 还用说吗。我建议至少买一个月，能学多少学多少，之后想省钱去玩本地模型或别的路线，随意。但至少入门阶段，最好从源头学。我就不点降级了，因为已经有账号。假设你注册完、付完款、做好初始设置，会看到类似这样的页面。打个招呼，Claude 会回复我。很多人第一次用 Claude 要知道：这是 Claude 聊天，但要做开发、设计手机 App，得跳出原味 Claude 聊天，转向一个更复杂点的功能：Claude Code。Claude Code 有好几种界面和使用方式，而且只要写代码，这个小太空入侵者图标就会无处不在，习惯它吧。

[06:18]

You can do so directly in the Claude Code web app here. You can also download the desktop app, which little button at the bottom left hand corner. So you can download from Mac OS or Windows. Or you can use a third party service like anti-gravity or Visual Studio Code to manage all of your files and then also communicate with Clod. And in my case, I much prefer that last option. And that's what this looks like here. You basically have a little Clod code window open. You have all your files on the left hand side. And then what's really cool is because you have this much granularity and access to all of the files, you can usually build much more sophisticated sorts of apps. So that's what I'm going to be using throughout this course. But I do want you guys to know you can use whatever interface you want. The reality is these are all just wrappers around like the brain of the model, the actual intelligence. Whether you communicate with, you know, an integrated development environment style app like me, or whether you communicate with Claude Code, you're just using the claude.ai slash code website. All of this is the same thing at the end of the day. Now if you want to follow along with my tutorial how to set it up in this sort of interface, well you've already signed up to QOD so you only need one more thing and that's the actual app itself. So in my case I'm using this app developed by Google called AntiGravity. AntiGravity is pretty great, it's just really simple, it shows all your files and stuff like that. It's technically a Google product so they're going to try and use their own models or at least get you to.

可以直接在 Claude Code 网页版里用；也可以下载桌面应用（左下角小按钮），macOS 和 Windows 都有；或者用第三方工具如 Antigravity 或 VS Code 来管理所有文件并与 Claude 通信。我个人最喜欢最后这种。看，这就是它的样子：一个 Claude Code 窗口，左边是全部文件。妙处在于，有了这种细粒度的文件访问能力，通常能构建更复杂的 App。整门课我都会用这种方式。但你们要清楚，用什么界面都行。说到底这些只是包在模型大脑外面的壳。不管你是用我这种 IDE 风格的应用，还是直接用 Claude Code，底层都是 claude.ai/code 那套东西，本质是同一个。想按我的教程配置这种界面的话，注册好 Claude Code 后只差一样东西：那个应用本身。我用的是 Google 出的 Antigravity。它很好用，非常简洁，能看所有文件。它毕竟是 Google 的产品，会试图让你用它自家的模型，

[07:43]

But I'll show you guys how to avoid that. Just head over to that download page, check your whatever operating system you're in, and then download the correct executable for you. So in my case, that's Apple Silicon. Then all I have to do is click on this little antigravity1.dmg. Obviously, this will be a little different if you guys are in, you know, Windows or something else. And then in my case, all I have to do is just drag this little anti-gravity thing over to the applications folder. Now after I do that, I'm going to page it looks something like this. So there'll be a little anti-gravity logo. There'll be a little agent panel on the right-hand side. May seem really intimidating. Don't worry too much about this. Just going to close the agent view and then head over here to where it says extensions. And the extension that I'm looking for is called the Cloud Code for VS Code extension. So I'm just going to type Cloud Code for VS. And then you can see that we have the Cloud Code for VS Code extension right over here. Now in my case, I've already installed it, but all you have to do is just give it a quick install. I'm just going to click Auto Update here and then maybe go Install Specific Version and then Update to the Most Recent just so you guys can kind of see what it would look like when it's installing. So boom, I just installed mine. What's really cool is after you're done, okay, you'll see this little Claude icon pop up everywhere. So I'm just going to exit out of this. And then I'm just going to double click anywhere on the page to open a new file. And then you'll see that little Claude icons anywhere. So now if we just click this, and then exit out of all this other confusing stuff, you'll see that we basically now have a chat with Claude and we have that little space invader. So now I can say, hey, what's going on? And then I can get back to me saying, hey, how can I help you today?

我会教你怎么绕开。去下载页，选对你的操作系统，下载对应的安装包。我是 Apple Silicon，就点 antigravity1.dmg。Windows 用户流程会略有不同。然后把 Antigravity 拖进应用程序文件夹。装好后界面长这样：有个 Antigravity 的 logo，右侧有个代理面板。看起来可能挺唬人，别慌，关掉代理视图，找到 Extensions（扩展），我要找的扩展叫 Claude Code for VS Code。输入搜一下。Claude Code for VS Code 扩展就在这里。我已经装过了，你们点个安装即可。我点一下 Auto Update，再 Install Specific Version、更新到最新版，给你们看看安装过程长什么样。装好了。妙的是装完后到处会冒出这个小 Claude 图标。关掉这个，双击页面任意处新建文件，也会看到 Claude 图标。点它，关掉其他眼花缭乱的东西，现在就有了一个 Claude 对话框和那个小太空入侵者。打个招呼，它回我：今天有什么能帮你的？

[09:11]

If that doesn't happen, you may need to log in, in which case you can slash log in, type clod account with subscription. That's then going to open up a page, which will basically do the same thing that you did a moment ago where you logged into your Anthropic account. In any case, the whole idea is to get a screen that looks something like this. As long as you have a cute little clod code guy somewhere on the page, you're good to go. From here on out, I'm just going to send a couple of brief prompts over to Cloud Code and have it build us something really quick just so you can convince yourself that it is indeed working. So on the left-hand side, there's a little open folder button. I'm just going to click open folder and then I'm going to go new folder and I'll say, I don't know, example project. The reason why I'm doing this is because, you know, we want to be able to see the files that Cloud outputs. Every time I do this, just because of the fact that Google's trying to push their own products, it's going to change the interface and so on and so forth, right? So I'm just going to have to reopen up a little Cloud Code Terminal and exit out of the native Google one. Once we do that, we'll have Claude saying welcome back, and I'll say, hey, make me a really simple one-page site in the current directory, then open it. This really simple one-page site is in a lot of context, might ask you some questions, might not. The whole idea is I'm just going to show you guys how easy it is to build a web property. Okay, so now we have a web property set up here. Claude actually just built this. I could say adjust this so it greets me, Nick. And now if I go back to that page here, you know, after it makes the edit, you can see that it just swapped the name from world to Nick. Okay, so hopefully you guys see it's not very complicated or difficult to build things. Usually the more difficult part is just building the right things and then getting those things onto the internet somehow.

如果没弹出来，可能需要登录：输入 /login，选 Claude account with subscription，会打开一个页面，跟你刚才登录 Anthropic 账号的流程一样。总之目标是得到这样一个界面：页面某处有个可爱的 Claude Code 小人，就说明成了。接下来我发几个简短的提示词给 Claude Code，让它快速做点东西，好让你确信它真的能用。左边有个 Open Folder 按钮，点它、新建文件夹，就叫 example project 吧。这样做是因为我们想看到 Claude 输出的文件。每次做这步，因为 Google 想推自家产品，界面会被改来改去，所以我得重开一个 Claude Code 终端，退出 Google 原生的那个。然后 Claude 说欢迎回来，我说：嘿，在当前目录给我做个极简单页网站，然后打开它。它可能会问你几个问题，也可能不问。核心就是让你们看到，建个网页产品有多容易。好，网站建好了，是 Claude 刚做的。我说：改成向我 Nick 打招呼。回到页面，改完之后可以看到它把 world 换成了 Nick。希望大家明白，做东西并不复杂，真正难的是做对的东西，并把它弄上互联网。

[10:49]

But don't worry about it. I'm going to show you guys how to do all of that as well. So now that we've figured out how Cloud Code works and done a quick little demo, let's move into our mobile app development environment. It's clearly one thing to build a website like I just did here, right? And this is currently existing on my computer. But if I want to get this over to my phone, and then not only do I want to get it over to my phone, but if I want to share it with, you know, potentially hundreds of thousands of people and make something viral, we got to go one step further. The way to build an app nowadays tends to revolve in one of these three methods. Now, don't worry too much about the terminology or the platform names. You don't need any experience or any familiarity with this stuff. I'm going to walk you guys through it all regardless. But basically, there are three current methods. The first is using something called Expo and React Native. And this is actually the preferred approach that I'm going to show you guys how to do. Essentially, what we're doing is we're making use of a particular set of programming languages, so JavaScript and TypeScript. We then have one code base, and this code base allows us to push out to our iOS apps. It also allows us to push to Android. And then, as mentioned, you can even open up like a web app as well. So you can have it like, you know, on a website somewhere. You do cloud builds via the Expo, I think, like app building system. That's more technical terminology, but essentially that just offloads a lot of the work onto a standardized tool that just knows how to do the sorts of builds that we're talking about and get things ready for deployment. It's got a really huge ecosystem of supported apps and other files. Then it also allows you to do hot reload on device, and that's valuable, especially for testing purposes, because you typically have to reload the app over and over and over again.

别担心，这些我也会教。搞定了 Claude Code 和快速演示，现在进入移动 App 开发环境。显然，像我刚才那样在本机建个网站是一回事；但要把它弄到手机上——不但要上手机，还要分享给可能几十万人、做出爆款——就得再进一步。如今做 App 基本围绕三种方法。术语和平台名不用慌，不需要任何经验，我会全部带你走一遍。第一种叫 Expo 和 React Native，这正是我推荐你们用的方案。本质上，我们用一组特定的编程语言：JavaScript 和 TypeScript。一套代码库，可以发布 iOS App，也能发安卓，甚至还能作为网页 App 挂在网站上。云构建由 Expo 的构建系统完成——术语听着玄，其实就是把大量工作交给一个标准化工具，它知道怎么完成我们说的这类构建、怎么准备部署。它有庞大的生态支持，还支持真机热重载，这对测试特别有价值，因为你通常要反复刷新 App。

[12:27]

And so this is what we're going to be doing for our app. We're going to be using Expo and React Native. And I'm going to walk you guys through, you know, how all of that works in a moment. But I also wanted to run through a couple of the other common ways because, hey, if you clicked on a course that's multiple hours and then you decided to learn all about app development, you might as well learn some of the lingo so that when you're talking to your app dev friends and they say they're using Capacitor or Flutter and Firebase, you know, you can actually reason with them reasonably well. Okay, so everybody else basically uses tools like Flutter and Firebase. And so this takes advantage of a different language called Dart, okay, which is, I think, custom developed by Google specifically for the purposes of designing apps for their Android ecosystem. It also involves their own UI toolkit. The value there is basically Google has their own really opinionated design system. If you've ever been on an Android app, for instance, you'll know the buttons tend to look pretty similar. The modals tend to look pretty similar. All that stuff is very opinionated. It's very set. And the benefit there is when you have an opinionated design system, it's pretty easy to put something together. You just kind of... borrow their design. You don't have to build that stuff from scratch. But obviously the downside is you get limited in what you can do with the design. You know, if you think back to my little habit tracker at the streaks, which I'll walk you guys through in a moment, you know, this design is a really particular style that you probably wouldn't see on an Android app right out of the box. We're using slightly different fonts, like serif fonts, the little containers and stuff like that have different sort of like border.

这就是我们做 App 的方式：Expo 加 React Native，稍后我带你们走一遍。但我也想快速过一遍其他常见路线——毕竟你点开了一门几个小时长的课程决定学 App 开发，学点行话也好，免得做 App 开发的朋友说他们在用 Capacitor 或 Flutter 加 Firebase 时，你接不上话。其他人基本都在用 Flutter 和 Firebase 这类工具。它用的是一门叫 Dart 的语言——我记得是 Google 专门为安卓生态做 App 而定制的。它还有自己的 UI 工具包。价值在于 Google 有一套非常强势的设计体系：你用过安卓 App 就知道，按钮长得都差不多，弹窗也差不多，一切都是定死的。好处是设计体系强势时，拼东西很容易——直接借用他们的设计，不用从零造。但坏处是设计自由度受限。回想我那个 streaks 习惯追踪器（马上带你们看），它的设计风格很独特——衬线字体、容器有特别的边框、

[13:53]

And, you know, corner radius, that's like the curve. You know, you have different types of capitalization and stuff like that. And some of the interactivity, the little bounces and stuff like that just look different. So that's that opinionated design. This is me making one up myself. And ultimately, I think that's what most people want. They want the ability to design their own app the way that they want to. What's cool is they also allow you to use their own backend. So Firebase and all of the apps are very, like, well-optimized to use Firebase, okay? Which typically means, you know, for enterprise-level stuff, you get faster reads, faster... rights and so on and so forth. These are those material design widgets that I was talking about. It's part of their UI toolkit. Then it's also compiled to native ARM processors, which again is like a highly optimized thing. It allows the app to run better on their devices. So there's nothing wrong with using this approach. I just am choosing not to in this course because I don't really want anybody to have to worry about languages that aren't really well understood. I don't really want you to feel locked into Google's, in my opinion, not as nice UI. and then I don't want you to have to worry about choosing the Firebase database or high level performance optimization. I want you guys just to worry about getting an app out. Finally, there's Capacitor, which I believe some might think is even easier to use than Expo and React Native. It is really easy to use. You basically just build a website. So literally this website right over here, and then you just wrap it with features that allow you to export that to the app store and whatnot. It uses languages that most people are really familiar with, like HTML, CSS, JavaScript, and stuff like that.

特别的圆角，大小写风格也不同，交互的小弹跳感也不一样。这就是'强势设计'之外我自己杜撰的风格。而我觉得大多数人要的就是这个：按自己想要的样子设计 App。另外 Flutter 系也让你用自家的后端 Firebase，整个体系对 Firebase 优化极好——企业级场景下读取更快、写入更快，还有我说的那些 Material Design 组件，属于它的 UI 工具包。它还会编译成原生 ARM 指令，高度优化，App 在设备上跑得更好。这条路没什么不好，只是这门课我选了别的：我不想让你们操心一门并不好懂的语言，不想把你们锁进我认为不够好看的 Google UI，也不想逼你们纠结选 Firebase 还是什么高性能优化。你们只要专注把 App 做出来。最后还有 Capacitor，有人觉得它比 Expo 加 React Native 还容易。确实非常容易：本质上就是做个网站——就是眼前这个网站——然后包一层功能，导出上架。它用大家都熟的语言：HTML、CSS、JavaScript。

[15:20]

You can access your device APIs via plugins. So it adds like an additional layer between the device and then, you know, the functionality that you want your app to have and then your website. And then it's also really, really easy to migrate. But, you know, you're here to learn how to build apps first, not necessarily websites. I have a lot of great tutorials that show you guys how to build the best websites ever. I find if you are optimizing for everything right off the get go, you're probably not as good at anything in particular. And so this, to me, strikes a really good balance between like hyper optimized, you know, app dev in a specific. language and a specific database type, and then really general sort of website stuff. I know the app developers in the comments are probably already about to scour me, but that's okay. Let's just get you up and running with Expo and React Native. So how do you actually get set up here in Expo and React Native? Well, the first thing I'm going to do is I'm just going to use a built-in slash command called slash clear. And that's just going to get rid of all of the conversation history that I had with, you know, Claude previously. The benefit there is it's also going to keep my token count a little bit lower and ensure that whatever I'm working on is just as efficient as humanly possible. Now inside of my little folder example project with this index.html that I put together here, what I'm going to do is just right click this. I'm just going to delete it because I don't really want, you know, anything in my folder from what I'm about to say next. And then all you have to do is say, I want to build a mobile app with Expo and React Native. Set up my workspace for me.

通过插件访问设备 API——它在设备和网站之间加了额外一层，迁移也特别方便。但你们是来学做 App 的，不是学网站的。我有很多教你们做顶级网站的教程。我的看法是：一开始就什么都想优化的人，往往什么都不精。而这（Expo 方案）在高度专业化的 App 开发和泛泛的网站开发之间取得了很好的平衡。评论区做 App 开发的朋友大概要开喷了，没关系，先带你们把 Expo 和 React Native 跑起来。那具体怎么配置？第一件事我用一个内置命令 /clear，清空之前和 Claude 的全部对话历史。好处是 token 数更低，保证手头工作的效率最大化。现在在我这个小文件夹里有个 index.html，右键删掉——接下来的内容不需要它。然后只需说：我想用 Expo 和 React Native 做手机 App，帮我搭好工作区。

[16:42]

Now, if it's the first time you're using Claude, let me just zoom out of this and then click on this button right down here, then click settings. And there's actually a little toggle that allows you to allow dangerously skip permissions. So that's personally what I click by doing that. Claude just, you know, can do whatever the heck it wants. I don't really have to wait for it to work and so on and so forth. Okay, great. So if we head back over here to folders, which I actually see everything that's laid out, you'll see that Claude now has like created a whole workspace. And it really is as easy as that rather than try and, you know, download a template from somewhere or whatever. What it's doing is it just it already knows about Expo setup. It already understands the different files and stuff like that that you need in order to create like a working app. And, you know, now we basically have something. So what I'm going to say is I create a simple demo application, some habit tracker for demo purposes, and then let me launch it on my phone. Okay, so what it's going to do now is it's going to plan out a habit tracker demo app, probably pretty similar to the one that I showed you guys, although I'd imagine with much simpler features. And then it's going to go ahead and do the building. And this is not rocket science. As you guys could see, I've just made a couple of simple requests. You know, it's not as easy as it seems necessarily. There are a couple of technical things and issues that you'll run into if you don't know what you're doing. So I'll walk you through that when it comes up. All right, now it's taken about a minute. and a half to two minutes here to plan out the habit tracker demo app you may be you know really chomping at the bits to just skip to the end and so on and so forth but i encourage you to watch alongside me i'm trying to strike a good balance between submitting a message and then immediately jumping to the finished output i don't want to do that because i think it's important for you guys to realistically see how the tokens are generated and what the model is saying in every step

第一次用 Claude 的话，缩小视图，点下面这个按钮进设置，有个开关叫 dangerously skip permissions（危险地跳过权限），我个人会打开它——这样 Claude 就能随心所欲地干活，我不用一步步等它确认。好，回到文件夹视图，可以看到 Claude 已经建好了一整个工作区。就这么简单，不用去哪下模板。它本来就知道 Expo 怎么配、建一个能跑的 App 需要哪些文件。现在我们已经有基础了。那我说：创建一个简单的演示应用——一个用于演示的习惯追踪器，然后让我在手机上启动它。它现在会规划一个习惯追踪器演示 App，估计跟我给你们看的那个很像，只是功能更简单，然后开始构建。这真不是什么高精尖，如你们所见我只提了几个简单请求。当然也没那么容易，不懂的话会碰到一些技术问题和坑，遇到了我再讲。现在它花了一分半到两分钟规划习惯追踪器演示 App。你们可能迫不及待想直接跳到结尾，但我建议跟着我一起看。我刻意在'提交消息'和'直接跳成品'之间找平衡，不想跳，因为让你们真实看到 token 如何生成、模型每一步在说什么，很重要。

[18:31]

But understand that any sort of development with agents involves offloading your own brain a little, right? Your own intelligence. And so you do have to wait a fair amount of time for it to work. Now, it'll give you a bunch of fancy pants code, and this code might be kind of intimidating. What this is doing is it's just it is currently performing the writing action of like putting this in a file somewhere so that it can work with it. If you guys see errors pop up and stuff like that, don't worry too much about this. What's really cool about Clod is it's capable now of solving its own problems, which I like quite a bit. And as we progress through the course and I show you guys better ways of doing things, you'll also find that you can instruct Clod very high level using what's called a system prompt to get even more autonomy where you want it to and then less autonomy in places that you don't. Okay, so what is it telling us? It's saying the app is now ready to run. Here is what I built, the Today tab, the Manage tab, and some data persistence. So this is currently storing locally. I just asked it to build demo, which it usually does in a local way. There's no database. There's no nothing. Now it's actually giving us some instructions here. It's saying, hey, could you install Expo Go from the App Store or the Play Store, then run this function, and then scan the QR code with your phone's camera or the Expo Go app. you're probably like, what the hell does this mean? Well, we actually want to get this thing live on our phones, right? So that's what I'm going to show you guys how to do. This demo app that they just built, in order to see it, what we have to do is we have to go down to the App Store, okay? And in order to show you guys that, I'm just going to use this iPhone mirroring app so you guys can see everything that I'm doing on my phone. I don't think there's any way to make this any bigger, unfortunately, so just zoom in as much as you guys can and take a look at what I'm doing. First things first, we're going to have to go App Store right over here.

要知道，用智能体做开发本质上就是把自己的一部分脑子外包出去。所以你确实得等它干一会儿。它会吐出一堆花里胡哨的代码，看着吓人。它现在做的只是'写'这个动作——把东西写进某个文件，方便它后续操作。看到报错也别慌。Claude 很棒的一点是它能自己解决自己的问题，我非常喜欢。随着课程推进，我教你们更好的做法后，你们还能用所谓的 system prompt 在高层级指挥 Claude——想让它自主的地方给它自主，不想的地方收回来。好，它说什么了？App 已经可以运行。构建内容如下：Today 标签页、Manage 标签页、数据持久化。目前是本地存储，我只让它做了个演示，通常就是本地方案，没数据库，什么都没有。现在它给出操作指引：从 App Store 或 Play Store 安装 Expo Go，然后运行这个命令，再用手机相机或 Expo Go 扫二维码。你大概一头雾水：这都是啥？我们就是想把这东西跑到手机上嘛，我来教。要看刚建好的演示 App，得去 App Store。为了让你们看清我手机上的操作，我用 iPhone 镜像应用。没法再放大了，大家凑合看。第一步，打开 App Store。

[20:18]

Then once I'm in the App Store, I'll go search. Then what I want to do here is I want to just type expogo. So now I'm on my phone literally doing this, and I've already downloaded and installed expogo. So in my case, it'll say open, but this is the one that you want. So you're going to install it, and then that'll move us over to a page that looks something like this. If you have any recently opened apps, then they'll pop up down there. That's my little Streaks app that I was showing you. Okay, great. Once we have this, you do need to log in or sign up. And so I've actually already created an account here, just Nikki Gervais. I'm going to give that button a quick click. And now you'll see it's actually giving you some instructions. It'll say, start a local development server with this command, npx expo start. Now, one thing that you'll find is AI from time to time will give you instructions suggesting you have to do stuff yourself. Well, one of the highest ROI things you can start doing right now is just asking it to do it for you. It's trying to hand this off to you because of the way that it was trained. And basically the way that it was trained is sort of like following instructions. It's read a bunch of guides on how to do this sort of thing, and it's sort of compiled all that. And so it thinks that it needs you to launch this sort of thing. It needs you to submit this command and stuff like that. But you don't actually have to. Do this for me in a new terminal window, to me, does like 80 to 90% of the work. So what it's going to do now is it's basically going to open up a new terminal window. It's right over here. If I zoom way in, this new terminal window here now is being managed by AI. Okay, and one thing that you're going to see immediately is it's going to pop up with this big, sexy QR code. And all we have to do in order to actually run our app now is I'm just going to open it up on my phone. I'm going to scan the QR code, open up the EXP link. In my case, I have to enter my passcode. And now it'll jump directly over to the app. I'm just going to run this locally here for a sec before showing you guys on the iPhone mirroring app.

进 App Store，点搜索，输入 Expo Go。我现在就在手机上操作，已经下载安装好了，所以显示'打开'，你们要装的就是这个。装完会进入类似这样的页面。最近打开的 App 会列在下面——那个就是我给你们看过的 Streaks 小应用。好，这里需要登录或注册，我已经建好账号（Nick Gervais）。点一下，它会给出指引：用命令 npx expo start 启动本地开发服务器。你会发现 AI 时不时给你指引，让你自己动手做某些事。而你现在就能开始做的回报率最高的事情之一，就是让它替你做。它因为训练方式的原因想把这些交给你——它读过大量教程，总结下来就是'需要人来执行这个命令'。但你其实不用。一句'帮我在新终端窗口里执行'能省 80% 到 90% 的力气。它现在就会去开一个新终端窗口。就在这儿。放大看，这个新终端窗口现在由 AI 托管。马上会弹出一张漂亮的大二维码。要让 App 跑起来，只需在手机上打开它、扫二维码、打开 exp 链接。我得输个锁屏密码，然后就直接跳进 App 了。我先用本机跑一会儿，再切到 iPhone 镜像展示。

[22:10]

And then we actually have a habit tracker app that is running on our phone. Okay, so let me just show you guys what this actually looks like by running the iPhone mirroring app again. Moving that over and then connecting. There are equivalents for Android, of course. I'm just using iPhone here for simplicity. And you see we now have our app, right? Now, this isn't perfect. There are a couple of issues already. You can see down at the bottom it says uncaught for promise ID1, whatever. Don't worry too much about that. Just focus on the core functionality. We actually have something that's working. And we have a couple of basic apps here. And, you know, it looks like when it's done, it says all done for today. And so what's really cool is this is just running on my phone. And it's running basically using an emulator to show you what this would look like if it were actually like fully built and live and stuff like that. Okay, so that is the mobile development environment that we're going to be using. We're going to be using this Expo Go sort of like QR code scan thing. And then we're just going to be showcasing it locally right over here. I don't just do it. using a mirroring method like this, I'd highly recommend if you guys are actually testing this to like do it on the phone itself. Just understand that I have to do this in order for you guys to see what this would look like for tutorial purposes. But what's really cool is when you do it on your phone, you know, you get to see if there are any like navigation or UX issues. Sometimes there are issues with like you, you know, I don't know, this sort of like pull and drag functionality. Sometimes there's hidden functionality that you won't know where you drag to the left and the right and so on and so forth. And yeah, anyway, I guess what I'm saying is I'd recommend just doing it on your phone. And so one thing that I'm realizing with my phone is it actually created an entirely new page called create a new habit. And so here I'm capable of sort of creating my new habits and closing them out and stuff like that. I wouldn't have known that if I didn't go on my phone. Okay, so now what we've done is we've set up both cloud code, then a mobile development environment. And we've also shown you guys how to build the testing loop onto a mobile device.

现在我们的习惯追踪器 App 真的跑在手机上了。再用 iPhone 镜像展示一下具体样子。安卓有对应方案，为了简单我用 iPhone。看，App 出来了。当然还不完美，底部有报错（uncaught promise 之类），先别管，专注核心功能——它确实跑起来了。有几个基础页面。做完之后它说'今日全部完成'。妙的是它就跑在我手机上，基本是用模拟方式展示如果完全构建并上线会是什么样。这就是我们要用的移动开发环境：Expo Go 加扫码，然后在本地展示。我不只用镜像，强烈建议你们真机测试。我这么做只是为了教程里你们能看清。真机上你能发现导航或 UX 问题：比如下拉拖动的手感、左右滑动藏着的隐藏功能等等。总之我的建议是真机测。我发现它在手机上其实新建了一个'创建新习惯'页面，我可以在里面建习惯、完成打卡——不去真机我根本发现不了。好，现在 Claude Code 和移动开发环境都配好了，也展示了如何建立手机测试闭环。

[24:02]

From here on out, we can actually get started with the best and most exciting and enjoyable parts, the actual app development itself. Let's do it. All right, so we've clearly seen that it's possible to build an app. Now that we know that you can do more or less anything under the sun with technology, how do you actually design like a good app? And what you'll find is in our current lovely society, we can more or less do whatever the heck we want. It's actually just about taking all of that power and potential and then orienting in the right direction. In our case, for mobile app design, what good apps look like are apps that satisfy and sort of go through all five of these steps so in general any good app and i'm just going to use our habit tracker as an example needs what's called a core function and that is the one thing essentially that if you removed everything else from this app the app would still be the app okay like for instance in our habit tracker app if you removed all of the accessory additional features away from our, you know, habit tracker app, all the cute little colors in that prior example, all the different types and so on and so forth, maybe the settings page, if you stripped all of that away, the one thing that would remain is probably going to be a way to like create a habit and then tap on it. And every time you tap on it, it logs it to some database. That's sort of like the core functionality, the fact that it tracks a habit, right? Now, after we're done defining that one thing, okay, what we're doing next is we're turning that one thing into a feedback loop. And so at any sort of like user experience design, any sort of a game design or anything like that, what you need is you need a cycle that maps an action to a reward. And ideally that action and reward loop is under about 30 seconds or so.

接下来就能开始最好玩的部分：真正的 App 开发。来吧。我们已经看到 App 是能做出来的。既然现在科技几乎无所不能，那怎么设计一个好 App？你会发现，在我们这个美好的时代，几乎什么都能做，关键在于把这种能力对准正确的方向。对手机 App 设计来说，好 App 是走完这五步的 App。任何好 App——我用习惯追踪器举例——都需要所谓的核心功能（core function）： essentially 把其他全删掉、App 依然是它自己的那一样东西。拿我们的习惯追踪器说，把所有附加功能删掉——之前例子里那些可爱的小颜色、各种类型、设置页——剩下的一件事大概是：能创建一个习惯、能点击它，每点一次就记录到某个数据库。这就是核心功能：它追踪习惯。定义完这一件事，下一步是把它变成一个反馈循环。任何用户体验设计、游戏设计，你都需要一个把'动作'映射到'奖励'的循环，理想情况下这个动作-奖励循环要在 30 秒以内。

[25:44]

Now, obviously, this whole idea of a loop is sort of, you know, it depends on whether you're working with a game, let's say, you know, if you're doing like a mobile game, for instance, the loop is usually gonna be a lot tighter, there's going to be a lot more rewards, and it's going to be like a lot more dopamine, dopaminergically stimulating than something like a habit tracker app or something like a calorie tracker app. But what's cool is you can still take all of those same ideas and features, right, the fact that you perform an action and then receive some sort of reward, whatever it is that you are building. And so for instance, in our case, right, what we want to do is every time somebody, you know, does a habit, okay, aka creates one and or fulfills one, we need some way of rewarding them. And usually the way that we're going to reward them is we're going to reward them using some sort of visual stimulus, okay? So just because I want to keep track of everything here, I'm just going to move this down a bit, and then I'm going to just sort of annotate here. And I'll say the whole idea with our core function is we want to track a habit. And then the whole idea with our core loop is we just need some sort of like stimulating reward, okay? and a variety of different ways to do this. We want like a nice sound to occur every time I tap the button, for instance. We want some sort of like nice animation to occur every time I tap the button. If we do our habit goal for a certain amount of time, maybe we want a cute little confetti to rain down from the top of the screen. We just need some sort of like visual reward stimulus. Some apps go really far with this. I'm using one mobile app right now called Opal, which is like a... It's like an app blocker, which basically eliminates my ability to use YouTube and, you know, X and all these different social media platforms between certain hours of the day. And what I really like that they do is they will like create a little gem for you. And the more days that you block an app, the cooler and more exciting the gem gets. And at the very beginning of the day, there's like, hey, you just unlocked this normal basic gem. And you're like, all right, cool, whatever. It's a normal basic gem.

循环的具体形态取决于产品类型：如果是手游，循环会紧得多，奖励更多、多巴胺刺激更强，跟习惯追踪器、卡路里追踪器这类完全不同。但那些相同的理念你可以照搬：做出动作、得到某种奖励，无论你在做什么。以我们为例，用户每次创建或完成一个习惯，我们需要某种方式奖励他，通常是用视觉刺激。我把笔记下移一点，标注一下：核心功能是追踪习惯；核心循环就是需要某种令人愉悦的奖励。做法有很多：每次点按钮来个好听的音效；每次打卡来个舒服的动画；坚持达成目标时，也许来一场从屏幕顶端落下的彩色纸屑。总之需要某种视觉奖励刺激。有些 App 在这点上走得很远。我现在在用一个叫 Opal 的应用，是个屏蔽类 App，在每天特定时段禁止我用 YouTube、X 这些社交平台。我很喜欢它的一点是它会给你生成一颗小宝石，屏蔽 App 的天数越多，宝石越炫。每天开始时会提示：你解锁了这颗普通基础宝石。你心想：行吧，普通宝石。

[27:30]

But a week or two in, you know, after you've been blocking it consistently for a long period of time, the gem is now super shiny. It's amethyst. It's, you know, kind of in the name Opal. And I'm not sponsored by them or anything. I just really like their app. You know, it just gets cooler and cooler and cooler. So human beings were very like tactile creatures, right? In general, anytime you're designing an app, you need to take advantage of that tactile nature. You know, your phone has the ability to perform haptics, right? Like vibrate, for instance, when you fulfill one of these things, like there are multiple ways to stack that on. But basically, what we want is, you know, user taps habit, and then we want the habit to reward, okay, the user. And this mechanism right over here, this can get about as complex as you want. You could add on like financial monetary rewards, their apps and have it sort of accountability partners. Now we're like you give a certain amount of money to a friend if you miss whatever that is. That core loop in our case is going to be really simple, but you can make that as complex as you want. OK, after that, we need accessory features. So, you know, we started with the core function. Then we define the core loop of actions that the user is going to take with the core function. Now we need some form of like accessory. So what wraps around that core loop and core function? And I don't know, just adds to it. So for instance, every one of the things I'm about to say support that main loop of, you know, creating a habit, you know, tapping a habit essentially to fulfill it, and then sort of receiving some sort of immediate reward.

但坚持一两周后，宝石变得超级闪，变成紫水晶——毕竟它叫 Opal（蛋白石）。没人给我广告费，我就是真喜欢这个 App。它就是越来越酷。人类是高度触觉型的生物。设计 App 时要利用这种触觉本性。手机能做触觉反馈（haptics），比如完成打卡时震动——可以叠加的手法很多。总之我们要的是：用户点习惯，习惯就奖励用户。这套机制想多复杂都行：可以加金钱奖励、问责伙伴（比如没做到就给朋友转钱）之类的 App 功能。我们的核心循环会很简单，但你想做复杂完全由你。之后是附属功能：从核心功能出发，定义了用户围绕核心功能执行的核心循环之后，需要一些附属层——包在核心循环和核心功能外面、为其增色的东西。下面每一条都是支持主循环的：创建习惯、点击打卡、获得即时奖励。

[29:00]

Well, you're probably going to want a list of all the habits and times that you've tracked all these individual habits in the past. So for instance, when we set up our database, you're going to need some way that, you know, a user can log the fulfillment of a habit. And then, I don't know, a week later, it can still go back and see, oh, you know, on May the 4th, I actually logged X habit. On May the 3rd, I actually logged Y habit. Y, I don't know. I mean, that's valuable in and of itself. Maybe you could tie that to some sort of like visualization chart or something like that, right? So I'm going to say chart. plus logging. That's a really cool accessory feature. You know, you should be able to customize your habits. If you think about it, not all habits are the same. Habits that occur, you know, on a daily basis just once might be sort of like a zero or one sort of habit. It's like you either do it or you don't. But habits that, I don't know, you need to do multiple times a day. Let's say the habit of like, I want to drink water. Maybe, you know, you count the number of cups that you drink or something like that. So we need like multi-tier habits, for instance. And then maybe you also want, and I don't think I'm going to add this to our specific app, at least initially, but maybe you also want like a social feature, right? What good is tracking a habit if you can't show it off a little bit? And so I'm seeing a lot of these sort of like habit tracker apps implement social functionality where you can like add your friends, you can get little notifications when the other person submits a habit or something like that. So these are all just ideas and examples of accessory features that don't actually fundamentally change the core function or the core loop. But, you know, they allow you to do slightly different things. They allow you to cover a little bit more ground. And it's important that your app has, you know, all three of these. OK, after that, I'd recommend a surface area check. So typically when new people start developing mobile apps and really just any apps in general, they get really, really excited. And so they'll they'll instead of just do one core function, they'll do 10. And then instead of.

你可能想要一个列表，展示所有习惯和历史上的打卡记录。比如设置数据库时，要让用户能记录某次习惯完成，一周后还能回来查：5 月 4 日我打了 X 习惯，5 月 3 日打了 Y 习惯。这本身就很有价值，也许还能接个可视化图表。所以我记下：图表加记录，这是很棒的附属功能。还应该能自定义习惯。习惯并不都一样：每天一次的习惯是 0 或 1 型——做没做；而一天要多次的习惯，比如喝水，可能要数杯数。所以需要多层级习惯。也许还想要社交功能——当然至少初期我不打算加进我们这个 App——追踪习惯不能炫耀还有什么意思？我看到很多习惯追踪 App 加了社交：加好友、对方打卡时收到小通知，等等。这些都是附属功能的点子和例子，不改变核心功能和核心循环，但让你能做稍不同的事、覆盖更多面。App 里这三样都得有。之后我建议做一次'表面积检查'。新手做 App 时通常特别兴奋，核心功能不做 1 个做 10 个，

[30:42]

One core loop, they'll do 100. And then instead of just a couple of accessory features, they'll do 1000. And then before you know it, your app has like 5 million pages. And it's just very, very complicated. Well, in a world where you can do everything, typically, it's not about doing everything. It's about doing one specific thing fairly, really well. And the best way to facilitate that is by just making sure that your app isn't super complex. And so, you know, as part of implementing these features, we're probably going to need a couple of different screens, right? We're going to need like, I don't know, a habit creation screen, a habit tracking screen, and so on and so forth. That can be thought of as digital surface area. If that digital surface area gets too large, if there are too many paths and whatnot, the user is going to get very confused. And so we don't want to do any of that. We want to make sure that there's just a very simple core loop facilitated by a handful of screens. And, you know, it's simple enough that the user just uses the app once. We don't need to explain it to them. We don't need to, like, basically get them a PhD in our habit tracking app in order to learn to use it. One run through is basically everything they need in order to onboard and know how to use our app properly. Okay, and then finally, we need some sort of retention hook. And so what I mean by retention hook is we need some form of way to create an unfinished state that the user has to come back to after a certain period of time in order to finish it. So in our case, you know, if we're doing a habit tracker app or something like that, there are a variety of different ways to do this, but essentially...

核心循环不做 1 个做 100 个，附属功能做 1000 个，不知不觉 App 有了 500 万个页面，复杂得要命。在一个'什么都能做'的世界里，关键往往不是什么都做，而是把一件事做到相当好。最好的保障就是别让 App 太复杂。实现这些功能时我们大概需要几个页面：习惯创建页、习惯追踪页等等。这可以称为'数字表面积'。表面积太大、路径太多，用户就会晕。我们不要那样，我们要一个由少数几个页面支撑的极简核心循环，简单到用户用一次就懂——不需要解释，不需要让用户先拿个'习惯追踪 App 博士'学位。跑一遍就完成上手，会用了。最后，我们需要某种留存钩子（retention hook）。我说的留存钩子是：制造某种'未完成状态'，让用户过一段时间必须回来完成它。以习惯追踪器为例，做法很多：

[32:00]

You know, you could have some form of challenge or something where it's like, oh, hey, you know, you join the app and then you have a three day challenge where you log a habit three days in a row. And it's sort of inherently retentive, right? Because in order to achieve the three days, you need to go on the app three separate times over the course of a 72 hour period. Likewise, you could maybe have it so that, you know, you start the app, you click a button and then it actually checks in with you, let's say a few hours later to see how your progress towards the habit is, whether or not you've done the habit. So maybe the very first thing we do in an onboarding in our onboarding for a habit tracker app is it's like, hey, create the habit and then we'll check in with you before you go to bed at the end of the day to make sure that you've done the habit. Then all you have to do is just tap one button and then, you know, you can you can log it. Obviously, a variety of different ways to take it there. But the whole idea is like, you know, just build an app so that people use it once and then uninstall it. Right. Any app that's ever trying to tell you that that's their goal is lying to you. The whole job in app development is you want people coming back to the app. And so you have to take advantage of some sort of dark patterns. user behavior, like retention in order to do it. But retention hooks are very, very important. And so what I'm going to do, at least to start is I'll just do like a three day challenge. And this is going to be, hey, can you log whatever the habit is that you want to do, you know, drink water? I don't know, do 20 push ups? I don't know, read for an hour or whatever. Can you log that every day for three days? And assuming you can, you have your app. Okay, so what we just did is at a very high level, we just designed the app, you know, it's one thing to build it in code and whatnot, but it's another thing entirely to understand like why you're doing what you're doing. And so I just wanted to take a couple of minutes that we were all on the same page that like that is how you design an app. You go through the core function, then you ID the core loop, then you figure out some accessory features, you do a surface area check, make sure your surface area isn't super bloated. Then finally, you make sure you have some form of retention hook. And if you have all five of these things, you now basically have an MVP. Well, at least you have the MVP that you can give to Claude to have it turn into the actual thing. You have like a scope.

比如某种挑战——'你加入了 App，来个三天挑战，连续三天打卡'——这天然带留存：为了完成三天，你得在 72 小时内打开 App 三次。或者：启动 App 点个按钮，几小时后它主动来问你习惯做得怎么样、打卡了没有。也许我们引导页的第一件事就是：'创建习惯，睡前我们会来提醒你确认是否完成'，然后用户只需点一下按钮打卡。具体形式多样，但核心思想是：别把 App 做成用一次就卸载的东西。任何宣称'目标就是让你用一次'的 App 都在撒谎。App 开发的全部要义就是让用户回来。为此你得利用一些用户行为上的'暗模式'（留存设计），但留存钩子非常重要。我打算起步先做个三天挑战：你能连续三天每天打卡你想养成的习惯吗——喝水、20 个俯卧撑、阅读一小时，随便什么。能做到，你的 App 就立住了。好，我们刚才在很高层面完成了 App 设计。用代码把它建出来是一回事，理解'为什么这么做'是另一回事。我想花几分钟让大家对齐：这就是设计 App 的方法——核心功能、核心循环、附属功能、表面积检查（确保表面积不臃肿）、最后确保有留存钩子。五样齐了，你就有了 MVP——至少有了能丢给 Claude 变成真实产品的 MVP。你有了范围（scope）。

[33:54]

Okay, so what I'm going to do now is I'm going to take everything that I just talked about, and I'm just going to plug it into Cloud Code, obviously in text. And then we're going to take the little fledgling app that I developed and then turn it into something that actually abides by all five of these core features. The very first thing I'm going to do is I'm going to head back to our little Cloud Code window inside of Anti-Gravity. And then I'm just going to go slash and then I-N-I-T. Now, the reason why you go slash init after you build out like a brief little demo of the app is basically this is a set of instructions that teaches Claude every time it's initialized what the app is without it having to go through every single file on its own. And so, for instance, what this just wrote, if I actually go down to the Claude.md, which is the system file, this is where it's actually storing all that information, is it's saying this file provides guidance to Claude code when working with code in this repository. Here is the architecture of our app. Here's the theme. Here's the state. Here's the path. Here's everything that you need in order to basically run it. And so the value there is you basically just eliminate a couple of tokens. So you're not actually spending as much money because most of the time you're billed by token or your token usage consumes your plan. And then it also just knows where all the files are. Okay. So after you create your cloud.md, then you can just go backslash clear. You'll see this little token meter on the right hand side will go back to basically nothing. And then we can continue with, you know, actually having a design of this app and make it better. And so what I'm going to do is I'm going to build the app according to the specifications that I'm talking about. And then just to make my life way easier, instead of me writing all this stuff out just in the chat with my fingers, I'm just going to use my voice. And I'm using a voice transcription tool called Aqua right at the moment, which is where I can basically just talk into my mic and then it'll, you know, record a bunch of text. So that's what just happened. And you can see that it just pumped.

现在我要把刚才讲的全部内容以文字形式喂给 Claude Code，然后把这个雏形 App 改造成真正符合这五项核心要求的东西。第一步，回到 Antigravity 里的 Claude Code 窗口，输入 /init。在搭好 App 的简要演示之后跑 /init 的原因是：这是一组指令，教会 Claude 每次初始化时了解这个 App 是什么，不用自己去翻每一个文件。比如它写的内容——我点开 Claude.md，就是那个系统文件，信息都存在里面——写着：本文件为 Claude Code 在此代码库中工作时提供指导。这是 App 的架构、主题、状态、路径……运行它所需的一切。价值在于省 token——不用每次重新读全部文件，省钱（毕竟按 token 计费或消耗套餐），而且它知道所有文件在哪。建好 claude.md 后，再 /clear。右侧的小 token 表基本归零，然后继续给这个 App 做设计、把它变好。我会按我讲的规格来构建它。为了省事，不用手指在聊天框里打字，我直接用语音。我在用一个叫 Aqua 的语音转录工具，对着麦克风说话就能转成文字。刚才那段就是这么输进去的。

[35:38]

Pumped it right in there. What I'm gonna do is I'm gonna go back here and then I'm just gonna discuss my app with Claude. Hey, so I really like the app as it stands, but I'd like to level this up with an app design framework that, you know, high quality app devs and designers use, where essentially every app that I build requires a core function, then a core loop, some accessory features, surface area check to minimize the number of screens, and then some sort of retention hook. So the core function for this app is it needs to be able to create and then track habits. The core loop for this app is basically every time a person creates a habit and then tracks it, they need to be rewarded in some way. It needs to be visually stimulating. There needs to be some form of haptic feedback. And then ideally, there's some sort of sound like a like a chime or something. Also, we need some form of challenge. So, you know, if they're embarking on a three-day habit challenge, let's say, which might occur immediately after onboarding, at the end of that three-day challenge, we also need to reward them for the fulfillment of their efforts. The accessory features for this app are going to be something like logging. So the user should be able to see all of their prior habits tracked, some sort of, you know, accountability things so that they can look back and then maybe see a graph or a chart of just how consistent they've been. And then ideally, we need a way to create multiple types of habits, not just one. Being aware that a habit where you log it once per day is different from a volume-based habit where you need to maybe do it three or four times a day. For surface area check, just make sure that we don't have more than somewhere between five to seven screens in our app. We want it to be as simple as possible. And then in terms of retention hook, the thing that brings people back to the app.

现在回去跟 Claude 讨论我的 App：嘿，我很喜欢现在的 App，但我想用一个高质量 App 开发者和设计师都会用的设计框架升级它——每个 App 都需要：核心功能、核心循环、若干附属功能、表面积检查（最少化页面数）、以及某种留存钩子。这个 App 的核心功能：能创建并追踪习惯。核心循环：用户每次创建并打卡一个习惯，都要以某种方式获得奖励——要有视觉刺激、触觉反馈，最好还有声音，比如清脆的提示音。还需要某种挑战：如果用户参加三天习惯挑战（可能在引导后立刻开始），挑战结束时也要奖励他的努力。附属功能包括记录：用户能看到所有过往打卡，某种问责视角，能回看一致性图表；理想情况下还要能创建多种类型的习惯，而不只一种——每天打一次卡的习惯和一天要完成三四次的计数型习惯是不同的。表面积检查：确保 App 不超过五到七个页面，越简单越好。留存钩子——把人拉回 App 的东西：

[37:23]

We want to create challenges for the user and basically have some sort of ongoing thing that checks in with them via push notifications, probably once a day or maybe a couple times a day, just consistently knocking on their door, seeing whether or not they've done the habit, whether they're ready to start the habit or, hey, you know, don't forget about XYZ habit, whose intention you said earlier today. Stuff like this just gets people coming back to our app and is ultimately responsible for a fair amount of our usage. a giant wall of text. And because I did, it's not actually going to paste all of that text directly in like verbatim. You're not going to be able to see it. Instead, it's just going to say pasted text number one plus eight lines. So what I'm going to do is I have this whole thing here. If I press enter, it'll now populate. And now that I've given it both the framework and also every little step in that graph, I'm going to have it actually implement and add things to the app that we built earlier. Just that simple little tracker. One more thing I'm going to do is instead of doing all of the testing and demoing on my phone, like I was doing earlier, because the iPhone mirroring app just can't get any bigger, we're going to be doing this inside of Chrome directly. The functionality is going to be the same, but this will just allow me to zoom way more in and then have you guys actually be able to see the thing. But as a final check, I'm going to be going back through my phone using the Expo setup that we talked about earlier. And that's important just because if you can't actually physically play with the haptics, we can't hear the chime come out of the phone and stuff like that. You're not really getting the whole. experience. Okay, and this just thought for a minute and 29 seconds here, and then it got back to me saying, here's how I'd map your framework onto the current app. So six screens in total, there'll be an onboarding, there'll be a first launch flow, which will pick three habits for you and then start a three-day challenge. Today, which is a daily checklist, that's that core loop that we talked about. History, which will be a calendar slash graph view of all of our past completions, and then some sort of consistency chart.

为用户创建挑战，并建立某种持续机制，通过推送通知大概每天一次、或一天几次地敲门：习惯做了没？准备好开始了吗？别忘了你今天早上说要做的某某习惯。这类东西让用户不断回来，是相当大一部分使用量的来源。一大段文字。因为我贴了一大段，它不会逐字展示——你只会看到'粘贴的文本1 + 8行'。我按回车，内容填充进去。框架和图上每一步都给了它之后，我让它把这些真正实现、加到之前那个简陋的小追踪器里。还有一件事：不再像刚才那样全在手机上测试演示（iPhone 镜像实在放不大），我们改在 Chrome 里直接进行。功能一样，只是能放大到让你们看清。但最后我还会回到手机上用之前说的 Expo 方案验证——这很重要，因为摸不到触感反馈、听不到手机的提示音，就不算完整体验。好，它思考了一分二十九秒，回复说：以下是我把你的框架映射到当前 App 的方案。共六个页面：引导页；首次启动流程——为你挑三个习惯并开启三天挑战；Today——每日清单，就是我们说的核心循环；History——过往完成的日历/图表视图，加一致性图表；

[39:16]

A manage button, which is where you can do all of the stuff like adding, removing a habit, configuring the type, and so on and so forth. A challenge, which is where you can see the challenges that you're currently enrolled in. And finally, some little settings, which is where you can set your notification preferences, your theme, and so on and so forth. We'll do push notice on that. Okay, and then as things get better and better, you'll actually enhance the core loop. So you'll go haptics. Then you'll do sound, and then you'll also go visual as well with a little confetti particle burst on completion using this library called reanimated. You know, if I was a crazy cracked out app dev and I was looking at this stuff, maybe I'd say, no, I don't want you to use the Expo AV library. I want you to use this other library. Or I don't like reanimated. I like this other thing. Or, you know, confetti particle bursts are very CPU heavy. They're not like ideal. So let's not use them. But we're just getting up and running at this point. So I'm not going to be very opinionated in all the things that I wanted to do. I just want to show you guys proof of concept. You can get pretty far without, you know, without actually having to worry too much about every individual step. And so what it's done here is it said, hey, Nick, this is a substantial build. I want to tackle it in a bunch of phases. But just like I talked to you about earlier, you know, Claude is going to try and conserve both tokens and then also just like it's not going to try really hard or at least as hard as it realistically can in every scenario. So what I'll always do when it presents me a situation like this is I say, no, I just want you to do the whole thing. So that's what I'm going to do here. I'd like us to do all of it, including phase one through four. Once done.

Manage——管理习惯：增删、配置类型等；Challenges——查看当前参加的挑战；最后是 Settings——通知偏好、主题等。推送通知也安排上。随着完善，核心循环会增强：先是触感，然后是声音，再加视觉——完成时用 reanimated 这个库做彩色纸屑粒子迸发。如果我是较真的 App 开发者，可能会说：别用 Expo AV 库，换这个；我不喜欢 reanimated，用别的；纸屑粒子很吃 CPU，不理想，别用。但现阶段只是跑起来，我不打算事事较真，先给你们看概念验证。不用纠结每一步也能走得挺远。它回复说：Nick，这是一次大改动，我想分几个阶段来。但就像之前说的，Claude 会尽量省 token，也不会在每种场景都拼尽全力。所以遇到它这么提，我总是说：不，我要你全部做完。这里我就说：全做，一到四阶段全上。做完后

[40:41]

Open in Chrome, not Expo, so I can test locally. Okay, so I'm just going to send that in, and then we'll see where it goes. All right, and it spent something like five minutes thinking, and then opened a couple of Google Chrome tabs. You'll find that it'll do stuff like this just as part of its own internal testing loop from time to time. We can expedite that as well by installing a specific library, which I'll run you guys through later as we get a little bit more complex with our app. But if I go to Google Chrome here, you'll see that we now have this tab open, localhost 8081. And so anytime you're designing or developing any sort of app, you will always usually open up a local server of some sort. Don't worry too much about it on like a technical POV. What we're doing is we're just like starting up a server to host our app on the backend. And so you could see, if I just zoom in here to make it really easy, that we were actually already getting started with the app. It hasn't actually gone through and built the functionality yet. I think it's just like scaffolded a couple of pages. And obviously there are a couple of issues like the text here is invisible. But, you know, if I give this a click, you can see that we actually have like the apps right here. So initially it's saying, hey, choose your habits, exercise, meditate and then drink water eight times a day. And then it's going to invite us into a three day challenge with that little button. It's still screwed up. And then I'm just going to make this a little smaller. And then let me just. make it look like an actual mobile app would realistically. You can see that we now have sort of these three bottom tabs as well. Okay, so here's sort of the three-day kickstart. Okay, we're zero out of three days right now. In order to drink water, every time I click this button, I don't think you guys can hear this yet, so let me move this. Let me just uncheck the audio. You guys can now hear this little like chime slash beeping noise.

在 Chrome 里打开，不用 Expo，我要本地测试。发出去，看它怎么走。它想了大约五分钟，开了几个 Chrome 标签页。你会发现它时不时会自己干这种事——这是它内部测试循环的一部分。之后装个特定库还能加速这一步，等 App 更复杂时我再讲。在 Chrome 里看，现在开了 localhost:8081 这个标签。任何时候设计开发 App，通常都会开一个本地服务器。技术上不用深究，本质就是起个服务器在后台托管我们的 App。放大看，App 已经开始起步了。它还没把功能全部建完，估计刚搭了几页脚手架。显然有些问题，比如文字看不见。点一下，App 页面都在：先是'选择你的习惯'——锻炼、冥想，还有每天八杯水；然后那个小按钮会邀请我们进入三天挑战。按钮还是坏的。我把窗口调小一点，让它看起来像真实的手机 App。现在能看到底部三个标签页了。这是三天启航（three-day kickstart）页面：现在是零比三天。喝水的话，每点一次按钮——你们现在应该听不到声音，我把音频打开——就能听到这种清脆的叮声。

[42:22]

Ideally, I don't know, like hopefully you can. And then once you're done, once you make it to all eight, we now have one of three complete. Same thing with this meditate. Same thing with this exercise. But then you obviously have like that cute little chime with something saying all done for today. Okay, and then we can also uncheck, which is an important part of the core loop as well. I'm sure you guys could see, but there are probably some situations in which like you can't, you know, you don't actually want to remain a habit or maybe you logged it by mistake, you fat thumbed it or something, whatever. So that's the today page. It looks pretty good. The history page over here is where you can see the long running streaks, which is nice. So here's an activity graph. I don't actually have any activity because, you know, I just started with this stuff. I'm kind of curious if I go back here and I log my habits. OK, and you can see the activity graph is actually popped up there, which is quite nice. It looks like there's also a consistency chart, which logs the consistency on a seven day basis of how far you've gone with exercising, meditating. And let me just tap through all of this. So it gets to 8 and then also drinking water and it looks like it's at 3% and there's also a manage a habit button And I'm just highlighting this so I could see the text underneath This is obviously a bug that we're gonna have to fix but you can see you can select a daily habit or a count style habit I don't know. I want Sleep habit, let's say okay, and this is going to be a daily habit sleep before I don't know Let's say 9 p.m. And then we'll do a daily reminder Reminder at 9 a.m. It looks like And then I'll press enter. And then now it looks like we have a sleep before 9 p.m. habit. And if I go back here, we can also tap that, which is kind of cool. Awesome. So, I mean, like this is more or less everything that I'm going for. In order to test the full three-day kickstart, we're probably going to have to like accelerate that somewhat and build in our little like testing feature loop. So we could see, you know, like this is one day, this is another day, this is another day. When all those three days hit, like what sort of animation is going to appear? How are we going to track that long term?

但愿你们能听到。攒满八次，就是三分之一天完成。冥想同理，锻炼同理。全部完成后有可爱的提示音，还有'今日全部完成'。另外也可以取消打卡——这也是核心循环的重要部分。肯定有场景是你误触了、手滑多点了，想撤销的。这就是 Today 页面，看着不错。History 页面能看到长期连续记录，很好。这是活动图表——我刚建号当然没数据。回去把习惯打了卡，回来一看，活动图表真的出来了，挺漂亮。还有一致性图表，按七天统计锻炼、冥想的坚持度。我挨个点一遍：攒到 8，喝水也打卡，显示 3%。还有 Manage habit 按钮。我高亮一下好看到下面的文字——这显然是个待修的 bug。可以看到可以选'每日习惯'或'计数型习惯'。来个睡眠习惯吧：每日习惯，晚 9 点前睡觉，然后每日提醒设在早 9 点。回车。现在我们有了一个'晚 9 点前睡觉'的习惯，回到主页也能点它，挺酷。总之我想要的基本都有了。要完整测试三天挑战，得加速时间、加个测试功能循环，才能看到三天全满时出什么动画、长期怎么追踪。

[44:14]

But I would say this probably has most of the functionality gap that I want. Obviously, there are just a couple of issues, like the fact that the text is the same color and the fact that this reminder here is like I can't change this just as daily at 9 a.m. So what I'm going to do is I'm going to do the same thing I just did a moment ago, where I just use a voice transcription tool to talk Claude through my app. It's just this time I'm going to make minor changes wherever appropriate. We're not actually building the whole thing now. Excellent job. This looks fantastic. The first thing I want to change is I need some sort of testing view for a developer so that I can modify the day of the challenge or at least trigger the event that occurs when we hit, let's say, three days out of the three-day kickstart. Right now, I just sort of have to trust that it's working, but I'd like to ideally really have it work. The second major issue is right now the font color that you're using. is the same as the background color for a lot of these icons. The checkmark icon, for instance, is invisible because of that. A lot of the text in the history and then manage pages is also invisible. There's also no way right now to create your own challenge, which is unfortunate. We just sort of have to go based off of the pre-existing challenges. I'd like us to be able to do that. Also double check the stats. Right now I'm seeing exercise is 3% checked, for instance, after one day of doing it. Mathematically, it doesn't look like a seven day challenge. It looks like a 30 day challenge, but on the consistency end, it's saying seven days. Some of the text kind of rolls or wraps over on the history page. For instance, the current streak, the best streak, just because the text itself is a little bit longer.

但我觉得功能主干已经齐了。明显还有几个问题：文字同色看不清；提醒只能固定每日早 9 点不能改。我现在用刚才那招——语音转录跟 Claude 讲 App——这次只做适当的小修改，不是整个重建。干得漂亮，看起来很棒。第一个要改的：我需要一个开发者测试视图，能修改挑战的天数，或至少能触发'三天挑战完成'的事件。现在我只能盲信它在工作，我想让它真的工作。第二个大问题：现在很多图标的字体颜色和背景色一样。比如对勾图标完全看不见。History 和 Manage 页的很多文字也不可见。另外现在没法创建自定义挑战，只能用预设的，这不行，我要能自建。还要核对统计数字：我现在看到锻炼打卡一天后显示 3%——数学上这像 30 天挑战的算法，但一致性那边写的是七天。History 页一些文字会折行，比如'当前连续''最佳连续'，文字长了

[45:55]

You know, on mobile, it's most likely going to wrap. And then when it wraps, it's also left aligned, which I think just looks kind of weird. It doesn't look as good as it probably could. And then on the manage page, I like all the icons, everything there's really cute. But the habit type selectors have the same font color problem. Same thing with the habit name. So I think that's just a widespread issue. Finally, at the very bottom, you have the ability to set a daily reminder, which I think is valuable, but we would want to be able to customize the date and time of the reminder. And also, ideally, we want to be able to specify different reminder times for different apps, habits rather. Right now, we only have one reminder time, 9 a.m. across all of our apps. That'll help with, you know, having the user have more control over when they want to be notified. Aside from that, I liked our onboarding. I think we could do with one more screen that just very clearly explains how the app works. The core functionality is you can create an app and then you can track it. You know, hit milestones and kickstarts and then track your progress and then use push notifications so that, you know, if you want to be reminded in a particular point in time to assist you, you can. I'd say that's probably the 80-20. Okay, with all that in mind, go through everything top to bottom, implement those changes, and then just open it up in another Chrome tab. I'll test it. I'm now just going to dump that in and then cut to whenever it's done with all of its changes. Okay, after a couple of modifications, just making this more visible for you guys, you can see that it's opened a new tab. It's done those font color fixes, the stat card fixes, the per habit reminders, custom challenge creation, and then it's also done some developer tool stuff for us, which is going to enable us to test the app like I was talking about.

在手机上多半会换行，换行后又左对齐，看着别扭。Manage 页我挺喜欢，图标都可爱，但习惯类型选择器有同样的字色问题，习惯名也是——看来是普遍问题。最后，底部能设每日提醒，这有价值，但我们要能自定义提醒的日期时间，最好还能给不同习惯设不同的提醒时间。现在所有习惯共用一个早 9 点提醒。这能让用户更好掌控何时被通知。除此之外引导页我喜欢，可以再加一屏，清楚解释 App 怎么用：核心就是创建习惯、追踪习惯，达成里程碑和挑战、追踪进度，再用推送通知在需要的时刻提醒你。我觉得这就是二八法则的那 80%。带着这些，从上到下全部实现，然后在新的 Chrome 标签打开，我来测。我把这段灌进去，剪到它全部改完。几处调整（为了你们看得清）之后，可以看到它开了新标签：字体颜色修了、统计卡片修了、每习惯独立提醒加了、自定义挑战创建加了，还加了开发者工具，方便我之前说的测试。

[47:34]

So just opening this back up in this window here so we could see, we now have a better onboarding screen. So here's how it works. We create habits, add daily check-ins or counted goals like drink eight glasses of water, take challenges, push yourself with three, seven, or 30-day streaks, track progress, see your streaks, consistency charts, and activity history, stay on track, set personalized reminders for each habit at the time that works for you. I see it's implemented a skip button. I think it did this as a developer just for me. So what I'll do here is I'll say read. walk, and then, I don't know, exercise, let's say. Actually, why don't we do healthy meal? That way we test two different types. Now we're going to start this three-day challenge. Complete all your habits for three days to earn your first achievement. Ready? Start the challenge. And now we actually have this three-day kickstart, just as we did before. I'm realizing that I don't think you guys could actually hear my chime before, but rest assured, this thing is chiming. It's actually very delightful. And then when it goes all done for today, we still have that confetti, which is nice. I can trigger it over and over and over again because I'm addicted to that paper, baby. All right, so go into history here. It looks like we minimized the streak, the best 30-day average. Now it sort of exists all in one line, which is quite nice. We also have obviously eliminated the font issues, and then we've implemented some brief tracking for per habit consistency. You can see here we have 14% of the seven-day, which makes sense because we're done one-seventh, and there's 3% of 30-day as well. And this updates too, which is nice. under managed we still have those icons i think we should probably add some functionality not just to use these basic icons but as you guys see it's already better than like a you know over the the counter basically habit tracker app despite the fact that visually it may not be as interesting and then i'm actually just going to write morning run okay and then you could see there's also the ability to create a counted habit with i don't know five let's say cool

在这个窗口重新打开看，引导页更好了：'这就是用法'——创建习惯，添加每日打卡或计数目标（比如每天八杯水）；参加挑战，用三天、七天或 30 天连续记录逼自己一把；追踪进度，查看连续记录、一致性图表和活动历史；保持在线，为每个习惯设置个性化的提醒时间。我看到它加了个跳过按钮——应该是开发者视角给我开的。那我选：阅读、走路，再练锻炼吧。或者来个健康饮食，顺便测两种类型。然后开始三天挑战：'三天完成所有习惯，赢得第一个成就。准备好了吗？开始挑战。'现在我们有了三天启航页面。我猜你们刚才听不到叮声，但它真的在响，非常悦耳。'今日全部完成'时依然有彩色纸屑，很好。我可以一遍遍触发，因为我迷上这纸屑了。进 History：连续记录、最佳、30 天均值收进了一行，清爽多了。字体问题也没了，还加了每习惯一致性的简要追踪：七天 14%——七分之一嘛，合理；30 天 3% 也有，还会实时更新，很好。Manage 页图标还在。我觉得除了这些基础图标还该加点功能。虽然视觉上未必多惊艳，已经比货架上的普通习惯追踪器强了。我手写一个'晨跑'，还能建计数型习惯，比如五次，很酷。

[49:20]

Both of these are pills for some reason. We have the challenges that they're connected to. But now on the right hand side, we have this little chime, which is cool. So I'm going to go chime and I'll say, hey, I want you to remind me every day at, I don't know, let's just do 12 p.m., let's say. Now, ideally, we'd have a little bit more like feedback here to set that morning run. I'm noticing that we don't have that. So I'm going to probably want to change that. Then down over here, we have simulate full challenge completion, force complete challenge, reset onboarding, clear all data. So this is basically like how we reset it from scratch. So I'm just going to pretend that we're now done our three-day kickstart challenge. Okay, cool. And you can see we have the beautiful crown, a little trophy, and then three-day kickstart. One day is completed. Three habits track continue. And now it jumps us over to the create a new challenge section. So I don't know, new challenge. And then we want these habits. We're going to start the challenge. We're now basically doing another one. If I go back to today, you can see the new challenge is sort of up at the top. All right, that looks pretty reasonable. I like this. I think there are just some weird issues with the editing of that, like some of the buttons and check marks are kind of odd. And then I want this to be a little bit clearer. So what I think I'm going to do is I'm just going to do our last major change. You know, once we're done with this last major change. Sorry, I think that's the way the app's supposed to look. I'm actually just going to try running it live then on my phone. I'll show you guys that. And then after we're done with that, we'll actually push it out so that, you know, I can use it a little bit broader. And then we'll consistently add functionality to it, like databases and so on and so forth to turn it into something that you can actually get on the app store. So taking a look at the app a third time, the new challenge section at the top of the today page looks to be indented a little weirdly. There may be a div behind it. There may be an element or something like a box, but I can't see it. The background color might be the same. So just fix that.

不知道为什么这俩成了胶囊形。它们关联着挑战。右侧有个小铃铛，很酷。点开设置：每天中午 12 点提醒我。理想情况下这里应该有更多反馈（比如设置成功的确认），现在没有，回头得改。下面是开发者区：模拟挑战完成、强制完成挑战、重置引导、清除全部数据——相当于从零重置。我假装三天启航挑战完成了。好，出现了漂亮的皇冠、小奖杯、'三天启航'：一天完成、三个习惯已追踪、继续。然后跳到'创建新挑战'：新挑战，选好习惯，开始挑战——又在跑一个了。回 Today 看，新挑战排在顶部。看起来挺合理。我喜欢。不过编辑那块有些怪问题，某些按钮和对勾有点奇怪，这里我想再清晰一点。所以我打算做最后一轮大改。等这轮做完——抱歉，那才是这个 App 该有的样子——我直接在手机上实跑一遍给你们看。之后我们再把它推出去，让我能更广泛地用，并持续加功能——数据库等等——把它变成能真正上架的应用。第三次过这个 App：Today 页顶部的新挑战区域缩进有点怪，背后可能有个 div 或盒子，我看不见，可能背景色一样，修一下。

[51:08]

Everything else on this page looks pretty good. I don't see any major issues. Oh, some of the counted habits look strange. For instance, healthy meal, which is one of the defaults, has a 3 out of 3 under it. But because it's underneath it and the icon to the left is centered, it looks strange compared to the rest of the habits. So I'd like you to fix that. Just have a layout where everything's just on one line. History looks pretty good. I think the cards at the top of the page, the three for streak best and seven day average, they're just a little tight vertically. So just add a little bit more vertical spacing between the emojis, the numbers, and then the descriptor. And then on the manage page, add five more icons. So we should have one more row. And then for The placeholder text morning run, capitalize the R. And then for the reminders, right now there's no way to confirm the reminder. I think the user won't know whether or not the reminders are set for specific times unless we have a confirmation button. It also looks like the reminder div or section cuts off strangely, I think because the borders aren't rounded. just find a way to combine all of that so that it's seamless and fluid and then I think the way that the new challenge edit section is right now is it's using some weird check boxes it almost looks like it's an unfinished product or maybe the styles haven't applied so just double

这页其他都挺好，没大问题。哦，有些计数型习惯看着怪：比如'健康饮食'下面有'3/3'，但因为它在图标下方、而图标居中，跟其他习惯放一起就显得怪。修一下，全部排到一行。History 不错。页面顶部那三张卡（连续、最佳、七天均值）纵向有点挤，emoji、数字、描述文字之间再加点垂直间距。Manage 页再加五个图标，应该多一行。占位文字'晨跑'的 R 大写。提醒这边：现在没法确认提醒是否已设置，用户不会知道，需要一个确认按钮。另外提醒区块截止得很突兀，估计是边框没圆角，想办法整合得顺滑一体。还有'新挑战'编辑区用的复选框怪怪的，像半成品或样式没加载，双击检查一下。

[52:50]

Double click on that when you have a chance. And I'd say that's probably the 8020. So I'm going to give it another couple minutes and then circle back and then we can work on the next step. I made a couple of additional minor adjustments. It generated 17 icons, for instance, instead of 15. And I just wanted five per row spilled kind of weirdly. And then made another one up here where the set button didn't do anything. But with all of that done now, I'm going to go back to the app and we can do a full run through basically by resetting the onboarding. Okay, so build better habits, get started. You can see we have the how it works section here, the continue. I'm going to go exercise, drink water, and then walk. And then I'm going to start that challenge. Just going to tap all of these so that they hit the numbers. So this is going to be eight and that other two are going to be done. We also have a nice little border around this new challenge now, which looks a lot sexier. This is now a little more vertically spaced out, which is nice. And then we have those habits, which are correct. Under manage here. we can see we have a bunch of new icons like coffee and stuff like that so i don't know maybe we want coffee and then let me just test this out looks like we have the reminder feature okay although the remind at is spilling over into two lines just kind of annoying so i may fix that but anyway we could set whatever time we want the reminder and then when we set it we can see that it's now been permanently fixed it's now 5 a.m basically and it looks like the ux is if i tap it again the reminder turns off And then if I tap it again, it turns on. So this one's reminder, this one here, I don't know, maybe you want like a 9 a.m. reminder. For this one here, maybe you want like a 12. Okay, so all of that is working functionally, which is quite nice. And then I'm just going to clear all data. We're going to start from scratch and see if there's any change whatsoever. That looks pretty good to me. And then I'm just going to go down here, simulating the full challenge completion, and then forcing the complete challenge. Cool.

我觉得这就是二八的那部分了。再等几分钟，回来做下一步。我又做了几处微调：图标生成了 17 个而不是 15 个（每行五个会溢出，怪），还修了上面那个 Set 按钮没反应的问题。现在全部搞定，回到 App，重置引导做一次完整跑通。好：'养成更好的习惯，开始'。有'用法说明'页、继续。选锻炼、喝水、走路，开始挑战。挨个点到目标数：这个 8，那两个也完成。新挑战现在有了漂亮的描边，性感多了。垂直间距也舒服了。习惯都对。Manage 页能看到一堆新图标，咖啡什么的。那我加个咖啡，测一下：提醒功能在。'提醒时间'折成两行有点烦，回头可修。总之时间随便设，设置后永久生效——现在设成凌晨 5 点了。UX 上再点一下提醒就关再点一下就开。这个习惯设早 9 点，那个设中午 12 点。功能都正常，很好。然后我清除全部数据，从零开始看看有没有变化。看着不错。然后模拟完整挑战完成、强制完成挑战。好。

[54:38]

Awesome. And as you can see here, they fleshed this out a little more. This looked a little poor before, but now we have a three day, seven day, 14 day, 30 day sleep, eight hours, healthy meal and journal. And we can name it something and then go ASDF is our current challenge. So that looks great, but it's still on the computer. And in order to really know whether or not this app works the way that I want it to work, what I'm going to do next, I'm going to run this on my phone. How do you do it on your phone? Well, we need to start one of those Expo servers and then actually going to do it on my phone. And then I'm going to like pay attention to haptic feedback and stuff like that. So

如你们所见，这块充实了：之前有点寒酸，现在有三、七、十四、30 天挑战，睡觉 8 小时、健康饮食、日记等模板，可以命名——当前挑战叫 ASDF。很棒，但它还在电脑上。要真正确认 App 按我的设想工作，下一步是在手机上跑。怎么跑？起一个 Expo 服务器，真机操作，重点感受触觉反馈这些东西。所以，