19:10Pat Simmons · Tutorial
Clone a $1.2B App in 19 Minutes
An 8-step agentic pipeline that takes you from naive AI slop to a pixel-near Linear replica, deployed to Vercel with an MCP server, in under 20 minutes.
June 8thThe argument in one line.
Locking a pixel-perfect HTML/CSS design mockup before writing any application code, then having an AI orchestrator delegate the real implementation to separate sub-agents, produces a better and cheaper build than asking one model to design and code simultaneously.
Read if. Skip if.
READ IF YOU ARE…
- You use Claude (or a similar coding assistant) to build personal software and want a repeatable workflow for going from idea to a working app on your own phone.
- You've hit usage/rate limits on a premium model and want a concrete pattern for delegating implementation work to cheaper or separate agents.
- You're comfortable with basic terminal use and want to understand what's involved in getting a hand-built app onto an iPhone without going through the App Store.
SKIP IF…
- You're looking for a production-app tutorial with authentication, a backend, or a database — this is a single-user personal-software build, not a shippable product.
- You want a deep technical explanation of React Native or Expo internals — the video treats both as black boxes the AI operates.
The full version, fast.
The creator builds a personal voice-note app by first getting Claude's top-tier model to design an HTML/CSS glassmorphism mockup, deliberately reversing the usual architecture-first order because for this app the design IS the product. To conserve usage limits, he constrains the top model to an orchestrator role only — high effort, never escalate, delegate all implementation to separate sub-agents — and compares its design output against a cheaper model head-to-head. Once the mockup is locked, he has the AI extract design tokens from the CSS into a shared theme and reimplement every screen natively in React Native/Expo, matching the mockup pixel-for-pixel. The final app includes an AI-generated summary and next-steps for each voice note, plus a chat feature scoped to that note's transcript. He deploys it to his own device only (skipping the App Store and TestFlight) via Expo Application Services, which still requires a paid Apple Developer account.
Free for members
Chat with this breakdown — free.
Sign in and you get 23 free chat messages on us — ask for the hook, quote a framework, find the exact transcript moment, generate a markdown action plan. Bring your own key when you want unlimited.
Create a free account →Where the time goes.
00:00 – 00:32
01 · Intro
Framing: build a mobile app from scratch with Fable 5 to test its UI/UX design ability, not just its coding.
00:32 – 01:11
02 · The app: a voice-note app for creative thinking
States the personal need — a separate space from Claude/ChatGPT to capture and transcribe out-of-the-box ideas on the go.
01:11 – 01:43
03 · The design that inspired it (glassmorphism)
A designer's glassmorphism GitHub-card concept becomes the visual reference for the whole app.
01:43 – 03:17
04 · The prompt: a PRD, design-first, Fable as orchestrator
Explains the PRD approach, the deliberate design-before-architecture order, and constraining Fable to orchestrator-only (high effort, no escalation, delegate to Opus sub-agents) to conserve usage limits — credited to a tip from creator Theo.
03:17 – 04:16
05 · First design — Fable nails the glassmorphism
First-pass HTML/CSS mockup reviewed live: loading screen, record button, folders/inbox concept, all matching the glassmorphism reference closely.
04:16 – 04:56
06 · Fable vs. Opus 4.8
Head-to-head comparison: same brief given to a second, cheaper model; its glassmorphism execution is weaker but the overall app-screen mockup is surprisingly competitive.
04:56 – 06:31
07 · New backgrounds + why we port to React Native
Plans a rotating public-domain art background (Wikimedia Commons API, pointillist/impressionist), then explains HTML/CSS can't run in React Native and must be re-derived as extracted design tokens.
06:31 – 07:34
08 · The React Native build in iOS Simulator
After roughly 30 minutes of agent work, the ported app runs in the iOS Simulator with folders, recording, and settings functioning; minor visual nitpicks remain (record button styling, icon centering).
07:34 – 08:41
09 · The killer features: AI analysis, add-to-note & chat
Each note gets an AI-generated analysis and next-steps summary, an add-to-note append feature, and a chat interface scoped to that note's transcript.
08:41 – 10:34
10 · Deploying: Expo + the Apple Developer Program
Covers the two accounts needed to ship to a real device — Expo (free) and the Apple Developer Program ($99/yr) — and defers a full App Store deployment tutorial to a future video.
10:34 – 11:34
11 · Installing it onto my phone
Runs EAS device registration and build through Claude, downloads the provisioning profile, and installs the build directly onto his iPhone.
11:34 – 13:41
12 · Testing the app on my phone
Live test on-device: speech-recognition permission prompt, recording a real voice note ("the 1,000 AI tools that everyone needs"), and the AI analysis/next-steps response.
13:41 – 15:06
13 · Final thoughts
Recaps the pipeline (idea → HTML/CSS mockup → React Native port → on-device install), notes Fable required far fewer revision rounds than Opus alone, and asks viewers for build ideas before usage credits run out.
Lines worth screenshotting.
- Locking the visual design in plain HTML/CSS before any app code exists lets you iterate on look and feel far faster than iterating inside a native framework.
- Telling an AI orchestrator to run at a fixed effort level and delegate all implementation to sub-agents is a direct way to control usage-limit burn on metered coding models.
- A head-to-head test between two models on the same design brief showed the cheaper model produced an acceptable app-screen mockup even though the flagship model's glassmorphism execution was clearly better.
- HTML/CSS mockups are not portable to React Native — the framework doesn't render HTML or CSS at all, so the design has to be re-derived as extracted tokens (color, radius, blur, spacing) rather than copy-pasted.
- Installing a hand-built iOS app on your own device without the App Store or TestFlight still requires a paid Apple Developer Program membership and a device-registration step through Expo's build service.
- Attaching a scoped AI chat to a single note's transcript (rather than the whole app's data) turns a plain transcription tool into something closer to a searchable second brain for one idea at a time.
- A rotating background sourced from public-domain art (via a museum/commons API) is a low-cost way to make an AI-generated UI feel considered rather than generic, without hand-designing new art.
Design-first, orchestrator-routed AI app building
WHAT TO LEARN
Locking the visual design before writing any code, and forcing a metered AI model to delegate implementation rather than do it all itself, produces a working app with fewer revision rounds and less wasted usage.
- Mocking up every app screen in plain HTML/CSS first lets you iterate on design decisions far faster than iterating inside a native app framework.
- Writing an explicit orchestrator-only constraint (fixed effort level, no escalation, delegate implementation) into an AI coding assistant's config directly controls how fast it burns metered usage.
- HTML/CSS designs don't transfer directly into frameworks like React Native — plan for a token-extraction step that pulls colors, spacing, and blur values into a shared theme file instead of copying markup.
- Running the same design brief through two different models before committing gives you a cheap way to sanity-check whether the more expensive model's output is actually worth the cost difference.
- Getting a personally-built app onto your own phone without an App Store release still requires a paid developer account and a device-registration step — budget for that even on a 'just for me' project.
- Scoping an AI chat feature to a single record's own data (one note's transcript, not the whole app) is a small design choice that makes an AI feature feel purposeful rather than bolted on.
Terms worth knowing.
- Glassmorphism
- A UI style using translucent, frosted-glass-like panels with blur and soft borders, popular for giving flat interfaces a sense of depth.
- PRD
- Product Requirements Document — a written brief describing what a piece of software should do, used here as the working spec handed to the AI.
- Orchestrator model
- An AI model given the role of planning, delegating, and reviewing work rather than writing all the code itself, to conserve its own usage budget.
- Design tokens
- Named, reusable values (colors, spacing, corner radius, blur amount) extracted from a design so they can be applied consistently across a different codebase or framework.
- React Native / Expo
- A framework and toolchain for building native mobile apps using JavaScript instead of platform-specific code, which Expo simplifies further for building and deploying.
- EAS (Expo Application Services)
- Expo's cloud build and device-registration service that compiles a React Native project into an installable iOS or Android app without needing a local Mac Xcode build.
- Internal distribution build
- An iOS app build installed directly on a specific registered device, bypassing both the App Store and TestFlight review processes.
Things they pointed at.
01:11linkAnn Nguyen's glassmorphism GitHub-card design (bubblywith3bs.com)
03:17channelTheo (usage-limit routing tip creator)
04:56toolWikimedia Commons API
09:03productApple Developer Program
Lines you could clip.
00:00
“Well, the content has officially begun before we lose Fable five to usage credits, so we're back and building.”
03:17
“Your role, you are the orchestrator only. Run yourself on high effort. Do not escalate to x high or max. Delegate all implementation to Opus sub agents.”
13:41
“Every time I gave Fable five a piece of feedback, it would execute on it, and it wouldn't require rounds and rounds and rounds of revisions like it would with Opus four eight.”
Word for word.
Read-along
Don't just watch it. Burn it in.
See every word as it's spoken — crank it to 2× and still catch all of it. The same dual-channel trick behind Amazon's Kindle + Audible.
analogystory
00:00Well, the content has officially begun before we lose Fable five to usage credits, so we're back and building. This time we're building a mobile app from scratch. Now it's not that Opus couldn't do this, but I really wanna see what Fable can do with actually designing the UI and the user experience of a mobile app.
00:14So in this video, we'll cover how to get Fable to output genuinely beautiful mobile app mock ups, how I save on token cost by having Fable do only the heavy lifting, and how to get the app fully deployed and running on your phone to have as your own piece of personal software. So without wasting any more time, let's dive right into the build and get started building a mobile app with Fable five.
00:32And the app we are building today is, drum roll, a voice note transcription app because the world desperately needs one more voice note transcription app. No. I mean, this is just a piece of personal software that I've been wanting to build for a while now.
00:44The problem is Claude is where my work brain lives, and I wanted an app to store my creative thinking. Somewhere for these kind of crazy, more out of the box ideas or video ideas or blog posts, and Claude and ChatuchiBT were just not designed for that. So I want an app where I can store these ideas when I'm on the go, just transcribe my voice, and just be able to think freely and have this separate environment for creative thinking.
01:06And I really wanted the user experience to reflect that, but I never really could lock in the UX and the design, so I just kept putting it off. And was just waiting for a design to kind of come to me, and when Fable five launched, I came across this tweet from Ann Nguyen, who is an amazing designer, by the way. Go check out her work.
01:21Uh, it's bubbly with 3b's.com. But she just got amazing taste, what she did was she built this kind of, like, glassmorphism UI for GitHub cards.
01:30And this was exactly the design that I had in mind. So that's what we're gonna be building, what we're gonna be designing today. This will be our inspiration, and we're gonna see how well Fable can do in mocking up these designs and building out an entire mobile app.
01:41So with that, let's go over to cursor. Just gonna open Clawd in a terminal here, and we'll just go model Fable five. So we're all set.
01:49Now I have a couple things I've already put into this folder. The first is this prompt dot m d, which is really functioning as a PRD. This is something that I put together with a separate Claude Opus agent just in brainstorming this, and we're taking this in different steps.
02:02But my biggest callouts here are two things. First is this build approach. I'm asking Fable to output the design and the UI first and all of the app screens, which is backwards from, you know, what they typically say in software development.
02:15Normally, it's architecture first and then UI goes on top. But for a simple app like this, because the design is the product, I want to react to designs first, lock that in, and only then we can start building out the architecture. And then second thing, because we are at the mercy of usage limits on Fable, I wanna be very careful how I use Fable.
02:34So I tell it here, your role, you are the orchestrator only. Run yourself on high effort. Do not escalate to x high or max.
02:39Delegate all implementation to Opus sub agents. Write a model routing section into ClaudeMD, and then Fable owns the design taste, the orchestration, decomposition, final QA on everything before it comes back to me.
02:51So Fable is the true orchestrator agent. And by the way, I got this idea from Theo who has been sharing some good tips on avoiding rate limits with Fable five. And this is essentially the same thing.
03:01He is routing it to Codex. I'm just routing this to Opus agents. So with that, let's start building.
03:06So we'll go back here. I will open up my chat with Fable here and I'll say, look in the prompt m d, follow all steps. And we'll just go plan mode so we know how to really take this in and start building.
03:18Alright. So round one, our initial design is apparently done. Let's check it out here on the local host.
03:25This is purely the design. Oh, open this in a new tab. Interesting.
03:29Okay. Friggin nailed the glass morphism. I like how I can move this around too.
03:33It looks really good behind the behind the butterflies. And just in general, it really got the exact feel I was going for. Like, this is Anne's site and this is ours.
03:43We're gonna change quite a few designs to not totally copy Anne. But for now, I would say this is a good first pass. And so we have this, just very simple loading, tap to record here, then we have these folders.
03:54These are just placeholder right now, but this is the idea. As you record, it'll go into an inbox. Actually, let's see.
04:00Testing this record, is this actually working? Saved inbox? Oh, no.
04:04It doesn't work yet. That's the idea. Goes in inbox, then you can sort it that way, and then of course create new folders.
04:09But, yeah, I mean, this is pretty slick. Fable, no surprise, did a great job. Next, we'll get into the actual app screen build out.
04:16But first, because you're probably thinking to yourself, Simmons, did you really need Fable to do that? So I ran a quick AB test with Opus four eight and just got done generating this here. So let's actually see how Opus four eight did.
04:29I haven't seen this yet either, and we can compare the two. But I'd be willing to guess that Fable did a much better job. Here's Opus four eight's version.
04:37Damn. Okay. This actually isn't bad.
04:39This is pretty good. I was hoping my point would land a little harder. This actually looks great.
04:43And it mocked it up like a proper app screen, which I didn't tell it to do, but it did. Uh, so here's the difference. I mean, Fable definitely nailed the, like, whole glassmorphism much better.
04:53But in terms of the actual app itself, Opus did a pretty good job. Testing?
04:57Okay. It doesn't sit. That's a nice little animation.
04:59We might actually steal some ideas from Opus, but it does feel a little messy, not exactly anything different than when you typically tell AI to do any sort of glassmorphism design, but it's better than I thought. Anyway, I next wanna do two things. The first is to go back to Fable and say, I want us to have a rotating carousel of background image options.
05:21And what I'm thinking rather than these butterflies is doing some sort of art history tie in where we pull from public domain. I think you can use the Wikimedia Commons API to pull different paintings, and I wanna test a few of these.
05:35Ideally, it's pointillism or impressionist painters.
05:39I just wanna test a few of these and see if those look any better as a background image, and maybe the user just has an ability to, in the settings, choose from a few of these. And the second thing we're gonna do, because we've introduced a problem here with this HTML that Fable just created, it won't actually carry over into the actual app because the code we're building this in is React Native.
05:56React Native doesn't use HTML or CSS at all. So we need to have Fable just extract the design tokens here from this mock up CSS and put it in some sort of shared theme file and then build every screen against that theme in React Native. So it should carry over pretty well.
06:11I realize this is going a little bit backwards, but I wanted to first just lock this in and I knew that HTML and CSS, it would be easier for Fable to mock this up and for me to react to it than having Fable build in React Native from the start. So all that being said, here's the prompt I am giving Fable. I'm saying target stack is React Native and Expo.
06:29The HTML CSS glassmorphism screens are the visual spec. For each screen, reimplement this as native Expo components that match the mock up pixel for pixel.
06:38We'll just hit enter and have Fable start making these revisions. Alright. Here's our art history mock up here.
06:44We'll go to Serat. Looking pretty nice. Of course, this is just gonna be cropped to this mobile layout here, but I'm liking what I'm seeing.
06:52I had a couple revisions that I just made off camera. There's a couple annoying things like I didn't like how the folders were stacked. I didn't like this record button.
06:59So this record button previously here, I just didn't like the hard line the way it was designed, so I just said make it a bit more translucent and we have this nice little like throbbing record button.
07:10We've got these folders here. You can actually click in. I also added this add folder here.
07:15This little pop up test. Does this work? Yeah.
07:17Look at that. It's working. And then record.
07:19Let's see if this records. Hello. Testing.
07:21Is this actually recording? K. Not recording yet.
07:24Unless it nope. Not recording yet. But I mean, have pretty good start here.
07:28So now we just need to get this over ported into React Native. And in about thirty more minutes, Fable and its team of Opus agents have completed the React Native port over.
07:39So here it is open in iOS simulator. Looking pretty good. There's a little bit, if I'm gonna be nitpicky, of difference in the record button.
07:47I like that record button styling of the HTML and CSS mock up that we did, but this is pretty darn good. We have these folders here. Can we actually create these test?
07:57Nice. That's working. Go over to folders.
07:59Cool. We got the folder showing up. Settings, we can change the background.
08:03Very cool. Oh, there we go. Looks like it's recording.
08:06Testing. Look at that. Testing the record.
08:09Pretty, pretty good. Wow. Look at that.
08:11Okay. I like these little sparkle artifacts that it added too. I mean, like, the stop button's, like, not centered.
08:18So there's a few little nitpicky things I still need to do. I'm just gonna do that off camera, finish this up, and get this thing deployed. Okay.
08:24So here is the latest update. I'm still seeing some things. Whatever.
08:29Not a big deal. I don't know why I can't center this. This icon is just not centered.
08:32Everything else is looking good. Testing. Testing this.
08:36And then it should save to inbox. It should go into the inbox now. Yep.
08:40Look at this. Everything else is good. Testing this.
08:42And then I added this AI analysis too. This is something that I actually didn't mention but was in the PRD. This is a cool feature where it will go through the transcription, and then an AI will analyze what the voice note is about.
08:54Because when I'm recording voice notes, I'm just rambling, and I don't know. I'm not gonna go back into my transcript and look at my all my rambles. I wanna see kind of top line overview of everything that I discussed.
09:04So that's the idea here, and then we have next steps as well. So it's analysis, next steps, and then if I wanted to, I could click in the transcript and actually look at it. And then a bonus feature too, I should have described this at the beginning, but this is kind of the whole idea, is having an ability to actually add to this note.
09:19So let's see if this works. Testing adding to this note, uh, just saying something random to add to this note to see if it works. Ah, boom.
09:27Look at that. A nice little animation that Fable added too. So you can see we've got the original one and then the just now, and then we can collapse this if we'd like.
09:36Kinda ridiculous little extra animation there, but looking pretty good. And then I can also chat with the notes.
09:42So I can actually have a chat bot in here that has all the background of this transcript. Can say, kind of ridiculous, again, animation that could be fixed. But I can say, what is this?
09:52And then it should respond. Boom. We got a response.
09:55So it says, the user was testing whether their mic was working properly, and then it could ask follow-up questions if I'd like. It's a nice little interactive feature within these notes. That's kind of a killer feature.
10:05That is something that you don't see in other at least that I haven't seen in other transcription apps. This is going to be useful. So I'm gonna go back and then have inbox here.
10:14And then if we go into folders now, we should have an ability to click into these folders, then click other ones, see the AI analysis of all these. These are nice and organized. We can, of course, create the folder here.
10:26Already tested that. That was working. Settings here.
10:30So this thing's about ready to go. So the app is now built, and you can see how easy that was. Right?
10:34We started with an idea, moved it into an HTML and CSS mock up with the app screens, made a few more revisions, ported it over to React Native, a few more revisions, and boom, this thing is looking great. Now how do we actually get this on our phone to use? There are actually a couple accounts that you're gonna need to sign up for if you haven't done this already.
10:52The first is Expo. So if you just go to expo.dev, and Expo's gonna actually build the iPhone app for us.
10:58You can sign up. It's free, and then you'll run what's called EAS login. We will get there shortly.
11:03And the second thing we need is the Apple developer program. So you need to go in here, sign in, and cough up $99 to Apple for the yearly subscription.
11:13Unfortunately, there's no way around this. And I'm not gonna get too in the weeds here on signing up for both of these. I've already done this myself, and there are a bunch of great tutorials on how to set it all up for yourself.
11:22I will say though, however, I have plans for a full in-depth mobile app tutorial where I get into all of this and show how to properly deploy to the App Store, including building out a proper app with authentication, databases, all of that. So be on the lookout for that.
11:34But for the sake of getting this live quickly, what we're gonna do is install this straight onto my device. And to do that, we're just gonna head back to Fable and say, I need to run EAS device create.
11:47Please run the terminal command for me. Goal is to have this app be usable just for me and not on test flight or being sent to the App Store. And we'll just hit enter, let it run that command.
12:02We'll probably have to go through the registration process to get this thing connected, but then in a few more steps, we'll have this thing deployed. Okay. And it looks like the build is ready to fire the moment the device is registered.
12:13How do I register? And just a last step was registering this. So I had a CD into the repo, n p x e a s c l I create.
12:22I went through, just quickly logged in with my app ID and password, and then asked it for a QR code. And now I can just download this via my phone.
12:32And just to screen mirror my phone to show you exactly how to do this, we go here, download the provisioning profile, hit continue, it should be complete. And then I just need to go to settings, and under settings, after I downloaded that provisioning profile in the last step, this profile downloader will just show up.
12:48Click this, install, and I get this notice. Your device is ready to run internal distribution builds.
12:54And I just went back to Claude. I said, I just got the notice. Your device is ready to run internal distribution builds, and then Claude is running the build itself.
13:02Alright. And build is apparently done. I just need to open this in a mobile browser.
13:07So I'm gonna do that now. And just screen sharing again. Here is the build artifact.
13:11Just need to click install. Install. The app is creatively named Ideas.
13:16Nice one, Claude. And just go to our Ideas app here, and look at that. It's there on my phone.
13:23Listen, I'm screen mirroring my my phone right now, so this will work. Yeah. That off centered icon strap.
13:29I mean, that's but oh, look at this. Ideas would like to access speech recognition. Wow.
13:33I don't know how it's gonna work with this mirroring, okay. Wow. Okay.
13:36I've iPhone microphone is not available. Okay. I need to actually do this on my phone.
13:39I promise to you this is working. Okay. Hey.
13:41Testing this, uh, this transcription here. Video idea. The 1,000 AI tools that everyone needs.
13:51Hit stop. And then let's see. Reconnect.
13:53Should be in the inbox. Oh, look at that. Let AI analyze it for a second.
13:58Great AI analysis buried in a quick transcription test as a real content spark. A video roundup of AI tools people actually need. Yes.
14:05All 1,000 of them. Next steps, write down a working title and angle for the 1,000 AI tools video concept. And then here's the transcript.
14:11I can actually record. Testing the record. Still not working.
14:14Yes. I'm not going to add, uh, but it works on my phone. Look at that.
14:17Boom. So we have a piece of personal software that we built completely from scratch or rather Fable built that I am most definitely going to use.
14:26I might even have future videos of building this out further into a proper app for people to download because, uh, I I kinda like this. This could be useful for people. So that is a demo of building a mobile app with Fable five.
14:36You saw the comparison to Opus. At least in that one test, Opus wasn't that bad. But I think what stood out to me the most was it just gets it.
14:43Every time I gave Fable five a piece of feedback, it would execute on it, and it wouldn't require rounds and rounds and rounds of revisions like it would with Opus four eight. So, anyway, I hope this inspires you to get out there and build your own piece of personal software, and I'm curious if anyone has any other suggestions on what I should be building with Fable five.
15:00We've only got a few more days before we hit our usage credits. So let me know in the comments below, and I'll see you in the next one.
The Hook
The bait, then the rug-pull.
Before his usage credits run out, the creator races to prove what Claude's newest model can do when it's treated as a design-first orchestrator rather than a code generator — locking a glassmorphism mockup, delegating the real implementation to sub-agents, and walking away with a working iPhone app for his own voice notes.
Named ideas worth stealing.
01:43concept
Design-first build order
- Lock the visual design in HTML/CSS first
- Only then build the underlying architecture
- Reverses typical architecture-first software practice
Because the design IS the product for a small personal app, the creator has the AI mock up every screen visually before any real app code is written, so design decisions get made cheaply and fast.
Steal forany small personal-software or MVP build where look-and-feel is the differentiator
03:17concept
Orchestrator-only model routing
- Run the top model at high effort, never escalate to x-high/max
- Delegate all implementation to separate sub-agents (Opus)
- Top model owns design taste, orchestration, decomposition, and final QA
A written role constraint in the project's Claude config keeps the metered flagship model from burning usage limits on grunt implementation work, reserving it for judgment calls.
Steal forconserving usage limits on any metered AI coding assistant
How they asked for the click.
VERBAL ASK
14:40next-video
“Let me know in the comments below, and I'll see you in the next one.”
Soft, low-pressure sign-off asking for build-idea suggestions rather than a hard subscribe/product pitch.
MENTIONED ON CAMERA
FROM THE DESCRIPTION
PRIMARY CTAWhere the creator wants you to go next.
Visual structure at a glance.
