Agents de programació Claude Fable 5 Claude Code iPhone Expo React Native Desenvolupament mòbil

Claude Fable 5 crea una app d’iPhone sense escriure codi: què funciona i què encara falla

Code with Beto posa Claude Fable 5 a construir un gestor d’hàbits amb Expo, notificacions i un giny d’iOS. El prototip és sorprenentment complet, però necessita eines prèvies, una segona ronda de correccions i molta validació abans de poder-se considerar llest per publicar.

Claude Fable 5 pot convertir una descripció extensa en una aplicació d’iPhone funcional sense que l’usuari escrigui manualment el codi? Code with Beto ho prova des d’un projecte buit d’Expo i acaba amb Ember, un gestor d’hàbits que permet crear rutines, marcar-les, reordenar-les, rebre notificacions i consultar un giny a la pantalla d’inici.

El resultat és molt més que una maqueta. També deixa clar, però, què vol dir realment «fer una app sense codi» amb un agent: el model escriu els fitxers, però una persona experimentada defineix el producte, prepara l’entorn, hi connecta coneixement especialitzat, instal·la la compilació i dirigeix les correccions.

De projecte buit a especificació detallada

La prova comença a l’aplicació d’escriptori de Claude Code amb Fable 5 seleccionat. El creador prepara un projecte Expo amb Bun pel seu compte, perquè no vol gastar tokens cars en una ordre mecànica, i comprova que l’aplicació inicial s’obre al telèfon.

Abans d’implementar res, dona a l’agent una especificació extensa. Demana una marca curta, una estètica nativa d’iOS, mode clar i fosc, dades d’exemple, alta i edició d’hàbits, notificacions locals, persistència al dispositiu, animacions, menús contextuals i un giny. També vol una incorporació inicial que expliqui el producte i sol·liciti els permisos en el moment adequat.

Aquest nivell de detall és part essencial del resultat. No és una ordre vaga del tipus «fes-me una app», sinó una definició de producte amb pantalles, comportaments i criteris visuals.

Les skills i l’MCP també construeixen l’aplicació

El creador afegeix una skill pròpia per generar la icona i connecta el seu servidor MCP de pagament, que conté patrons i exemples de producció per a Expo i React Native. L’agent consulta aquestes instruccions abans de preparar el pla.

Per tant, la demostració no mesura Fable 5 en solitari. Mesura un sistema format pel model, Claude Code, una biblioteca privada de coneixement, eines gràfiques i l’experiència del desenvolupador. És una distinció important per a qui vulgui reproduir el resultat: sense aquest context, la primera versió pot ser molt diferent.

Anthropic presenta Fable 5 com un model capaç de planificar en diverses fases i delegar en subagents. En el vídeo, aquesta autonomia accelera la implementació, però també incrementa el consum i fa més difícil saber què està passant a cada pas.

Expo Go serveix per començar, no per provar-ho tot

La interfície inicial es pot obrir ràpidament amb Expo Go escanejant un codi QR. Això permet validar navegació, estils i part de la lògica sense compilar una aplicació nativa completa.

El giny d’iOS és una altra història. La documentació oficial d’Expo indica que expo-widgets no està disponible a Expo Go i que cal una development build. Expo Go incorpora un conjunt fix de llibreries natives; quan el projecte necessita codi natiu nou, s’ha de generar i instal·lar una compilació pròpia.

En la prova, això obliga a passar per Xcode i instal·lar l’app en un iPhone físic. És feina real de desenvolupament, encara que l’agent hagi redactat gairebé tot el codi.

Una primera versió completa en menys d’una hora

Després d’uns quaranta minuts, Fable 5 produeix una aplicació d’unes quantes milers de línies. Ember mostra una introducció cuidada, demana permís per a les notificacions, carrega hàbits d’exemple i permet crear-ne de nous amb color, icona, freqüència i hora.

Marcar una tasca activa una animació i actualitza el progrés diari. Les notificacions locals arriben al dispositiu. L’aspecte visual és coherent, respon al mode fosc i transmet la sensació d’un producte gairebé acabat.

Aquesta amplitud és la part més convincent de la demostració: l’agent uneix navegació, estat, emmagatzematge, formularis, permisos i components natius en una sola sessió. Per fer un prototip que permeti decidir si una idea val la pena, el guany de velocitat és considerable.

Els errors apareixen quan es prova el comportament

La primera execució també revela problemes que una captura de pantalla no mostraria. La pulsació llarga no obre el menú esperat, algunes icones desborden el contenidor, el giny no carrega correctament i tocar-lo no porta a la pantalla adequada.

El creador agrupa els defectes en una llista i demana una segona passada. L’agent modifica la interacció d’arrossegar i deixar anar, afegeix resposta hàptica, corregeix la disposició visual i revisa la integració del giny. Després, Ember permet canviar l’ordre dels hàbits, reflecteix el nou ordre al giny i obre l’aplicació des de la pantalla d’inici.

La lliçó no és que l’agent falli, sinó que generar no substitueix provar. El valor arriba quan el cicle és curt: construir, executar al dispositiu, identificar defectes concrets i tornar-los a l’agent.

Quant costa el prototip

El vídeo consulta el consum amb l’ordre /usage. La sessió principal, d’uns 41 minuts, s’acosta als 40 dòlars; una ronda posterior de vuit minuts costa uns 6 dòlars. El creador ho arrodoneix a uns 50 dòlars per arribar a la versió mostrada.

Són xifres d’aquella sessió, amb la tarifa i el patró de tokens del moment, no un pressupost universal. Una especificació més curta, l’ús d’un altre model o menys subagents poden abaixar el cost; errors difícils, més plataformes i proves exhaustives el poden multiplicar.

També falta comptar el temps humà, el material privat que alimenta l’MCP, el compte de desenvolupador d’Apple i el procés de distribució. Comparar només el preu dels tokens amb les hores d’un programador amaga bona part del cost total.

«Gairebé llesta» no és «llesta per a l’App Store»

El creador considera que el prototip és gairebé publicable, però el vídeo no mostra una revisió completa de producció. Abans d’enviar una app real caldria, com a mínim, provar actualitzacions i migracions de dades, permisos denegats, diferents mides de pantalla, accessibilitat, consum de bateria, zones horàries i comportament sense connexió.

També s’haurien de revisar privacitat, telemetria, textos legals, recursos de la fitxa, política de notificacions, errors inesperats i compliment de les directrius d’Apple. Les proves automatitzades i una revisió humana del codi continuen sent necessàries.

El vídeo activa un mode que evita les confirmacions de permisos perquè l’agent treballi sense interrupcions. La mateixa referència de Claude Code etiqueta aquesta opció com a perillosa i recomana cautela. En un projecte amb secrets, ordres de terminal o accés a serveis externs, és més segur concedir només les eines indispensables i treballar en un entorn aïllat.

La conclusió real de la prova

Fable 5 demostra que un agent ben equipat pot convertir una especificació en un prototip mòbil sorprenentment coherent. El giny, les notificacions i les interaccions natives fan que la prova sigui molt més exigent que una simple web.

Però el mèrit no és prémer un botó i desaparèixer. El desenvolupador decideix l’abast, aporta patrons de qualitat, resol l’entorn natiu, prova en maquinari real i prioritza els errors. La IA redueix dràsticament el temps d’implementació; no elimina la responsabilitat de dissenyar, verificar i mantenir el producte.

Contrast i context

Fonts consultades

5 fonts
  1. 01
  2. 02
  3. 03
  4. 04
  5. 05

Font de treball

Transcripció amb marques de temps

10 fragments
Consulta la transcripció
  1. 0:00 , obre el vídeo en una pestanya nova

    this is a complete habit tracker streaks reminders a heat graph of my consistency and a native iOS widget right on my home screen showing the heat graph live it's all running on my phone right now and i didn't write a single line of code. Claude's brand new Fable 5 model built the entire thing and in this video i'll show you exactly how step by step even if you've never coded before quick thing before we start my team and i are opening up spots for one or two clients who are serious about their application we take it from zero all the way planning building publishing maintaining it a real long-term collaboration we've been building mobile applications for years it's what we do and if you are building on your own i also open a few one-on-one spots one hour with me every week or a month or two depending on the project going from idea to App Store together if that's you please send me an email it's right here in the description. Quick context: Fable 5 just came out it's anthropic's smartest model ever a whole new tier above Opus and everyone is busy arguing about benchmarks we're skipping that the only benchmark that matters today is whether it can take you from an idea to an app on your phone in five steps set up plan build iterate and ship so i'm going to be using Claude Code desktop application so right now i have this in my obsidian but i'm going to select open folder then i'll just go to my desktop and i have an apps folder where i like to create my application okay so now i'm pointing to that specific folder now make sure that you select Fable 5 so the cost of Fable is $10 per 1 million input tokens and $50 per million output tokens so it's pretty expensive now thankfully it is actually included in the Pro plan right now so i'm going to use it today i have the $20 subscription let's see if i'm able to actually get the application done i'm going to try to be a little aggressive i want to create a complex application now for the effort i recommend using extra this is what i personally use and it's good it's decent of course you need Claude Code but apart from that you need a couple things before we can create our application so for that i created a

  2. 2:17 , obre el vídeo en una pestanya nova

    document for you i'm going to leave the link in the description so that you can reference it it includes commands and things that you need to install in your computer before we move on so today we're using Expo i used to work at Expo and you know i was helping thousands of developers get their first app running so trust me on this choice Expo is how you write an application that runs on an iPhone and android to test your application you can use Expo Go so grab your phone go to the App Store or Play Store search for Expo Go and download it it's the application that we'll use as a sandbox for testing our application so one quick version note here i'm recording this video using SDK 57 which is the latest SDK at the time now there is a little issue on the App Store and Play Store the version available is SDK 54 now in my previous videos i was recommending my viewers to use TestFlight to join the SDK 57 beta release but unfortunately the testing group for the beta version is full so you cannot join the TestFlight version of the SDK 57 that means that you need to use SDK 54 if you want to use Expo Go to test your application or the other option is actually create a development build that means just compiling the project into a standalone application using your computer and that's actually what i'm gonna do today because since i want to integrate a widget that specific capability is not available in Expo Go so i'm gonna show you how you can create a development build for iOS and for that the only requirement is that you go to the App Store in your Mac and search for Xcode it's a developer tool that allows you to create iOS applications the reason why we need it is so that we can run the application on a simulator in your computer or you can run it on your physical device directly the only caveat here is that if you want to run it on a physical device you need to have a developer account but if you don't have a developer account you can still download Xcode and run it locally on your computer using

  3. 4:34 , obre el vídeo en una pestanya nova

    a simulator if you don't want to use the widget in your app you can still use Expo Go okay so i already have Xcode i'm going to close this the next thing that you need to do before we can actually create the Expo project is make sure that you have Bun installed Bun is a program that just allows you to run commands on your computer commands like creating an Expo project so you can install it by running this command on Mac or this one on windows so if this is the first time just copy this open your terminal paste the command hit enter and you're done after that you can run bun --version and then you should see something like this this is the version that i'm using that means i have Bun in my computer and i'm ready to create my project okay so i'm going to close my terminal at this point i'm going to keep scrolling down and the next thing that you'll find is the command to create the actual application now i recommend to do this manually because if you let Fable or any other agent do it for you it's going to be a just a waste of tokens expensive tokens right so we're using Fable 5 we need to be careful with the tokens and we need to provide as much information as possible so that Fable is able to deliver high quality results without wasting out of tokens and without too much back and forth we can start the conversation with a simple hello and this will show you at the top right the terminal button and then paste the command bun create expo-app so i'm going to hit enter and let's select a name for the application so i'm going to call mine Fable and hit enter so everyone knows about the issue Expo Go in the app store only supports SDK 54 but the latest is 57 so the Expo team actually updated this command to ask you what do you want to use do you want to use the SDK 57 with a development build meaning that you are going to compile the project directly on your Mac or windows or you want to just keep learning with Expo Go using the version 54 which is the one available in the app store so today i'm going to use a development build i'm going to compile it directly already have Xcode in my computer so let's select

  4. 6:51 , obre el vídeo en una pestanya nova

    the latest this will create a new folder inside my apps folder okay so at this point we can close this and i'm actually going to create a new project by pressing command n let's change the folder because now we have a new folder let's press open and inside my desktop apps i now have the Fable 5 video this is the actual application and the code where Fable 5 is going to work let's open it Claude Code is pointing to this folder and we can start working okay so we have the project let's actually run it so again to be able to see the to be able to see the terminal button i want to say hello and now it appears let's press it i'm going to collapse the left sidebar so that we have more space here to start the application we can run npx expo start make sure to run this command in the folder and this will start the server like this now on my phone as you can see here on the right i have installed Expo Go that means that i can open directly the camera and scan this QR code and then press open in Expo Go so let me sign in into my Expo account all right so once you are logged in you can scan the QR code in Expo Go and this will load the application now i'm using Expo Go with SDK 57 because i'm part of the beta group but if you are using 54 it's basically the same you can just scan the QR code and you should be able to see the application there it's also compatible with light mode which is really nice and you know this is just the blank template that you get by creating a new Expo project and that's already further than most people will ever get so congratulations everything from here is just describing what you want to make sure that we get good results from Fable 5 because you know it's expensive and i don't want to just prompt it build me a habit tracker application because the results are going to be bad the prompt needs to be very specific and high quality and we can also provide extra tools

  5. 9:08 , obre el vídeo en una pestanya nova

    agent skills and MCP servers so for now i'm going to use my skills i'm going to just scroll up i actually have a link for my favorite Claude skills so the one that i want to use right now is app-icon. app-icon is a custom skill that me and my team built and maintain it allows Claude to generate an icon for your application so let's go ahead and copy this command go back to the terminal paste it in here and hit enter this way Claude Fable 5 will have access to the skill it's just a matter of pressing enter until the installation is complete there we go so now Fable 5 has the superpower of creating a custom icon for my application apart from that i also want to use the MCP server and this is actually another tool for our members at codewithbeto.dev to connect to the MCP server it's actually pretty easy you can just go to your profile at codewithbeto.dev copy the MCP setup give it to Claude and Claude will set it for you so once you do that you can go back to Claude i'm going to ask Claude hey can you use the Code with Beto MCP server to list the resources so this is we'll just confirm that i have access to the MCP server all right so Claude is actually using the tools let's allow this and now we get a list of the examples right we actually have more but it's just a list of the most popular ones and now Claude can read patterns that already survived production and real users things like haptics onboarding animations and the stuff that really makes an application feel expensive like i said this is part of the Pro membership link below you don't have to follow along with the MCP but you can watch and see what it does and then later you can decide so the difference between build me something and build me exactly this is the actual plan and for that i actually added the plan to the document again you can reference it and copy it let's go through it just super quickly it's basically the plan to build a habit tracker

  6. 11:25 , obre el vídeo en una pestanya nova

    but i'm being super specific on what i want so i'm going to ask Fable 5 to come up with a name for the application i want the name to be short between three to eight letters and use it everywhere in the application so we need branding right the name is going to be a part of that the app is going to track daily habits for example you know walk outside and this is just a preference of mine i want my applications to feel native like it was created with SwiftUI i think it's just way better elegant and familiar to iOS users in this case and of course i'm asking to reference the Platano template and other projects available through the Code with Beto MCP server so just a quick look here the Platano template is one of the most beautiful applications that we've created me and my team it's for creating applications for AI image generations there are actually many applications already published from our members and this is just a great example that Fable can reference then i'm being extremely specific on what i want i want to be able to create edit and delete habits many little details here you can pause the video and actually read everything but the highlights here is that i actually want to have local notifications that remind me to do stuff like taking my medicine or go out for a walk and then i want to save the data locally of course so that we don't lose it we want a clean onboarding flow for new users and for this i'm actually using the MCP to reference how Inkigo my AI tattoo application nails the onboarding people are actually paying for Inkigo which means the onboarding actually works another highlight is that i want an iOS home screen widget and i'm asking the agent to explore the documentation here on how to implement it and then go ahead and implement it i want to be able to see my habits in the home screen that's the main goal another very important thing is that we are requiring Fable 5 to generate an icon for this application using the Code with Beto app-icon skill that we already installed so it's good to constrain the agent to only focus on iOS this will save you tokens for the version one and it will also generate better

  7. 13:42 , obre el vídeo en una pestanya nova

    results for that specific platform then we can adopt android in the future or you can start with android this is the plan let's go ahead and copy it let's go back to Claude Code and one thing that i like to do here is actually change the manual to be bypass permissions so personally i'm always accepting the changes so if you don't want to hit enter every time just set bypass permissions and Fable 5 will handle everything for you so let's paste the plan here and hit enter right off the bat Fable is already checking the tooling it's calling the MCP server it's gathering information to start coding okay so we are five minutes in i've been using Fable 5 for a while now i mean like a week and i can tell you that it's gonna take a while it really takes its time and if you're interested by the way in the difference between Fable 5 and Opus 4.8 i actually made a video i'm gonna link it in the description which will tell you you know if it's actually worth paying double the price for Fable 5 you can watch that after you finish with this video okay you guys quick update it's been 26 minutes 27 almost 30 minutes and still cooking i'm worried about my usage so the context window looks good but if i go to my plan and for the current session i've used 67% it's generated so far close to 4000 lines of code and it removed 1000 i can see that it's actually generating the the icon okay it's using this skill so this is awesome this is actually going to generate an image that we can see in the code base and it's building now the application and it's going to install it on my iPhone 17 Pro which is my physical device connected to my computer okay here it is it's installing it i can see it on my phone it has an icon which is absolutely amazing so i didn't have to run the build manually Fable 5 was able to install it and it's now open it on my phone now don't worry this is a normal error i'm just going to allow

  8. 15:59 , obre el vídeo en una pestanya nova

    access to the network so that i can connect to my local server and then press Reload JS this will reload from my computer it will load the application and here we have it i mean how cool is that to press continue i want to check if this is compatible with dark mode it is and it looks really nice let's test notifications okay it's asking for permissions this is a great user experience it's onboarding me i'm going to allow it and now navigates to the screen where i can see everything okay so something cool is that we asked for sample data so let's press the load sample data amazing it's using this toast with information and now we can actually see how this looks like so i asked for context menu here let's see if i am able to long press so i'm not able to long press but we have a nice animation when we complete the items let's see this in light mode and when we complete everything we have a nice animation let's long press this i can see that we have widgets so let's test this okay so seems like the widget is not working and when i open the application through the widget we get this unmatched route but we can press go back and it will take me to the application let's test the notifications i'm going to send a test notification it arrives in three seconds okay let's see and there we have it so i can press on the notification and it will open the application so notifications are working great and we can create new habits awesome so let's do a test here now some of the icons as you can see here are outside of the container which is maybe something that we can fix we can select specific days or every day so we have an issue on the layout there time for the notification and then save it okay here it is this is the test so we have the sortable list i actually ask for this so i can move it at the position that i want this is amazing

  9. 18:16 , obre el vídeo en una pestanya nova

    so what i'm going to do is just create a new window by pressing Command-N. Please adopt the containerBackground API. I don't know what that means but we can just start passing these kind of like bullet points right items in the habits are not responding to press events in the new screen colors are okay and i think this is good for now hopefully we can do it within the tokens that we have available now while Fable 5 is fixing those issues and improving the application let's just pause for a second you just watch an idea become a real application running on a physical device without writing any code so that's mile one but if you want to take this all the way to the App Store. Check out my book, From Idea to App Store with Claude Code, which is basically the mental model behind everything in this video like how to write good plans providing feedback to the model fixing errors how to handle publishing either to the App Store or Play Store. It has a guide for both. There's a whole chapter on Claude Code skills it's basically a pack that will save you weeks of work just by using the app-icon skill i was able to get a decent icon this icon is solid right and it's compatible with dark mode as well so check out the book link in the description okay now the items are fixed and every time that Fable makes a change you can see the blue bar appearing at the top with the refresh and now this feels way better i'm able to quickly drag and drop this is fully native i love being able to do this and i have the feedback so of course you cannot feel it but it feels amazing let's see okay and it fixed now the container everything displays correctly okay let's take a look this looks super clean it feels super native the navigation the transition of the toolbar buttons looks great the form sheet presentation is amazing let's see if it was able to fix the widget it's working on this it's been seven minutes and let's try to see okay and now the widget is working there we have it we can play around with the size we have the name of

  10. 20:33 , obre el vídeo en una pestanya nova

    the application which is amazing for branding i can actually change the order so for example if i want workouts at the top and read second let's check the widget and it updates so how cool is that we can open the app and now it actually takes me to the screen everything seems to be working fine we get push notifications and of course the widget is also compatible with dark mode and it looks really nice now let's talk money because Fable 5 is pretty expensive you can check the cost by just running /usage we can see that it costs $6 and it was basically eight minutes so Fable can spin subagents and sometimes these subagents need to fetch data or need to do something else and in that case it's not worth using Fable 5 because just fetching data gathering information so sometimes Fable will spin subagents using a different model in the same session so it cost me $6 let's take a look at the other one this session was 41 minutes to get the first version of the application it cost me nearly $40 you can round it to basically $50 for creating this application which to be fair it's a pretty solid application and i think it's almost ready to ship to the App Store by the way subscribe if you want to see the video on how to deploy this to the app store so you might be thinking maybe you could have created this application using Opus 4.8 for maybe $25 right because it's half 50% of the cost but i actually tried it and i'm gonna leave the video comparison in the description personally i'm gonna be using Fable 5 for complex things like planning and building the first version of the application so if you want your agent to have context of this application Ember is now actually available in the Code with Beto MCP server so if you decide to join the Pro membership and then you can ask your agent you know what i just want a sortable list like Ember from the Code with Beto MCP a widget like the Ember application and Fable 5 will know how to do it you can also use the skills check out the plan as well everything is in the description and if you want to keep watching more videos check this one i'll see you there