Watch me vibe code an Animated App (Opus 5.5)

0:00 You can now use Opus 5.5 to build beautiful and responsive apps and websites, but only if you use the correct systems. And in this video, I'm going to show you exactly how you can do

0:10 that for any app that you want to using a very simple three-step system, even if you have no coding experience. So, grab that beautiful coffee and [music] let's dive in. Now, we're going to do

0:20 this across very simply three simple levels. But you have to understand that fable level work is now available for 40% cheaper in Opus 5.5, which is why we can build way more screens across way

0:35 more different designs. And again, these design systems are really going to help you level up the design of your apps. If you have the idea, you can build it unbelievably easily. And you're going to

0:44 see in this video by the end of it exactly how you can go from idea to publish thing. We're going to do this across three very simple levels to get to the desired output. And we're going

0:53 to do all of this because it's so easy in one individual app. And we're going to be using Abacus AI, the kind sponsor of today's video. And we'll be able to manage everything. Use Opus 5.5, use

1:04 Astra, use all of these different tools, manage all the boring stuff, and get it done in one simple system. So, let's begin with the very beginning, which essentially is starting with real

1:14 design. So, first thing I want to do is we're going to head up and open up Abacus. Now, I'll put a link down below so you can literally open this up. Um, it's very simple. Essentially, you can

1:22 use any of the different models that you want to. So, Astro OP is 5.5. If you click the link, you'll open up and then we get to actually begin the journey. And you can even see this one that I

1:31 created earlier in one shot referencing only Dolingo, for example. You'll see exactly how to do that. Now, once you open up the um abacus.ai website, again, I'll put a link down below so you can

1:42 grab it. It's dead familiar. All you're going to do is this is where we're going to give it the prompt. Now, what I want you to do, you got root lm that will route it to different models. We're

1:49 going to come down and we're going to select Claude Opus 5.5 because it has genuinely brand new and brilliant capabilities. It can build motion designs, right? Things that look

2:00 gorgeous like this without the even need to go ahead and generate images, but we are going to be using those as well at the exact same time. Now, level one of three is getting the correct design

2:11 references. This is basically we've got the walls best designer. Let's explain for designer what we actually want the thing to look like. So, we're going to cover things like type scale, spacing,

2:19 grids, corner radius, color tokens, motion, that kind of thing. Now, what does this realistically mean? Well, effectively, we don't inherently always necessarily know how to describe what

2:30 great design looks like. So, we can give it examples from proven apps and systems uh to do that. And there's a couple places we can do for this. I've listed a few here. I'm going them all down below

2:39 for you. Screen design, referral, mob, and page flows. Fantastic resources. So for example on referral design you can come down and look at web apps. We can look at iOS apps. These are apps that

2:50 are doing currently tens and thousands of dollars maybe less maybe significantly more. But we can see actually what are they all doing? What do they look like? What is the UI style

2:59 that we actually want to play around with here. Again you gotdesign.com is also a brilliant resource. You can see the level of animation and quality and how many prompts it would take to get

3:09 something like this. Likewise, we've got this great website here which is pageflows.com. And you know, the list goes on and on and on. So, let's say we're on moment for example, right? I

3:19 want to come down here. I'm going to go iOS. I'm going to have a look around and I can actually search by anything I want to. I can come by filter and I can link for trending. I can look for any signup

3:28 login pages. So, we can grab things that are specific, but all I'm really looking for is is an example here. And as you can see, you got even got this period tracker, guys. Maybe not maybe not going

3:35 to be the world's most popular app for the gentleman watching, but you get the idea. But we can look at these things. So let's go over the two most popular and take a look at what we're dealing

3:42 with. Now I quite like the dual lingering interface. But again, look at Revolute. Say you're doing a fintech app. Like if you just tell Abacus, build me an app. It will build you a great

3:51 app. But the ability to actually give it individual screens that look like this. And you can literally come down and copy and obviously you can do this in all the different websites and share just brings

4:00 a level of reference and stabilization that you can't get. So we kind of what we want to do is is almost kind of like make note of how these workflows are working and you want to create a collage

4:11 a kind of variation multiple different versions of it. But just to showcase the power I'm going to show how well it does just by looking at Duolingo. Say that you and I want to make the AI for

4:21 Dolingo. People already get that. Well, what we could do is have a look at the different pages look decent. So I might like that. So I might come down and click copy. And let's go back over to

4:30 Abacus. So we've got the abacus AI agent. I'm going to drop this link in here and let's come back and you can basically just grab a different thing. So, we want the ability to have

4:39 conversations. Now, obviously, you're never just going to copy and paste. I'm just doing this as an example to show you how good these models and systems are now at doing this, which is great.

4:48 And if we don't want to continue using Opus 5.5, we want to use a slightly different model for a different reason, we can easily do that down here at any point by just changing it and doing

4:57 various different things. Awesome. When we want to generate images, we can now do that in the same chat, which is great cuz it's just all integrated, which is awesome. Now, once you've gone ahead and

5:05 actually listed all these design references, there's something that's quite important to understand. So, we're going to ahead and give it the prompt. So, we've given it the references. We

5:13 want to explain the ideas. Yeah. To kind of essentially explain what you want to do, what you want it to look like. We can look at the style and then also essentially you can get it back as a

5:22 table that you can paste into next prompt, add nothing, not even a screw. So essentially, we can do this meta prompting thing where we basically copy this prompt, have Abacus interview us,

5:31 and then we can open something brand new with great context, which is going to be essentially what we're doing here. So we're giving it loads of references, and once you've done that, you're going to

5:37 end up with a prompt. So just to show you what this looks like in practice, I might say something like, "Hey there, I want you to go ahead and build for me the AI version of Dualingo." So Dolingo

5:46 for AI. I would like there to be a beautiful owl. And we're going to go ahead and teach them different concepts about AI. And I want you to look at the attached design references um to help me

5:57 sculpt and build out the app. It is going to be a mobile app that I want you to go ahead and build for me that I may turn into anything that I want to u make the designs beautiful. If you need to

6:08 generate images, do that yourself. Also leverage Opus 5.5's incredible graphical design capabilities as well. Okay, really simple prompt. Of course, I'm using GL to do this. I'll put a link

6:20 down below as well. I can get a month for free with the link and we can just literally begin and hit enter. But before we hit enter, we have to complete level two. Now level two essentially is

6:29 understanding the structure or journey of your app. So it can nail down the design, which is one thing, but we want to really realistically think about what are the different stages that we want

6:39 abacus to go through as we're using it, right? Or whatever model we're particularly using. So for example, if we take a look at Duolingo and how they do things, we want some kind of signin

6:47 page. So let's go ahead and just chat prompt us through straight. Okay. All right. I would like there to be a loading page with an animation with the ability to log in and create an account.

6:56 Then what I would like is an overview of a map where I can go from level to level. I want once you're in the level to have an animated character and to answer questions. And then when I

7:06 complete the level, I would like a celebration and then maybe something also to show the um streaks that we're getting. Then in addition to that, I also want the ability to change my

7:16 profile photo and other things you'd expect in an app. And at the same time, I also want you to have um all the database at the back end to manage all of this stuff together for

7:25 me. Let's come back over, drop that in there, like so. And we get here, which is beautiful. And then let's just improve this prompt. Hey there, could you improve this prompt, please? We've

7:34 given it all the information that we require now to make this better. So, let's come down here and we'll just add that one in there. Beautiful. Okay, now we're done. Now, we can officially hit

7:42 this one off because we've got the structure and we've got the design. A little hack for you as well. It can be really useful to pull up any software like Canva or whatever it might be and

7:50 literally just kind of guys like draw out and drop in your images here. So you can literally I mean some say that this is uh you know extreme highlevel um you know Leonardo da Vinci level what's but

8:00 you can literally grab the screenshots right? So you can come down and think okay well this is going to be screenshot one right? So I can come down and copy this over here and you can actually map

8:07 out guys what this is going to look like for you. Obviously, if this is an app that you're building, maybe for your kids, maybe for your business, maybe it's something fun that you want to play

8:16 around with. You know, you can do whatever you want to with this, but it's really cool because now I can drop this image in. Again, use any software you want to for this, but you get the idea.

8:23 You can map it out and have this. And then what we tend to do when we're building like our software and stuff is we like to have uh and I know lots of, you know, literally I know

8:32 billion-dollar companies that do everything um using I think they just literally use um what do they call it? one of the design softwares which is pretty incredible but just use Figma

8:41 literally and you might here and just say onboard right cool and then you have all of your onboard screens and then you may just come down and again here you might just have homepage right and

8:52 essentially what you can do is build this out one by one now typically when you're coding you do want to plan but you don't want to overload it so it's okay just to give it the individual

8:59 instructions and then we can amend this later and then once that's done guys you can see it's gone ahead and built for us AI lingo and let me refresh this now because essentially abacus will come

9:08 down left hand side and ask clarifying questions. It's created for us a unique owl that's waving at us. And just look at how good this has been able to do on a one shot. Super impressive. You can

9:18 see we have everything down here. We got the different sections and I can show you this. It's pretty wild actually. So we can one hit deploy this if we want to. But what we can also do is open this

9:27 up into its own browser to take a look at it. And you can do this by just saying, "Hey abacus, just open this up in a new browser for me to check out what the app looks like." Okay,

9:34 beautiful. So here we are. We've got AI Lingo. Let's go ahead and sign up to the service. And again, you can see how closely it's actually captured everything it works in. Again, I'm going

9:42 to say my name is Jack. And we'll give it a fake email down here. One of the world's most secure and realistic emails that we've ever seen. So, we come down. We can test it all out, which is

9:52 fantastic. Come down and get started. Great. We got one password coming day. We got some initial confetti, which is decent. And then we have the AI fundamentals. I can click on this. This

10:02 is the AI apprentice. I can hit my profile. Oh, I can see XP this week. Man, they've really gone to I'm actually really impressed with everything we've been able to do here with Opus 5.5. This

10:11 is pretty outrageous actually. So, let's come back over to the home section and we can begin and start. So, we click on start uh 10 XP and it's really understood all the specifics. So, a

10:19 system learns from data to make predictions. You can say that is going to be machine learning. Come down and then we can check this one out. Great. We were correct which is awesome.

10:30 So, we're going to come down, select the correct meaning, which is which of these is an example of AI of say a paper calendar. Definitely a spam filter that learns. Check that. That's great. We've

10:40 got animations popping up. And again, this is all one shot. I've not done any of these. AI learns pans from data. Cool. So, we're picking all this stuff up. And they've added that in there.

10:49 Training means what? I guess it would just be something like adjusting a model with examples. Yeah, guys, we are on a roll now. So, we've completed it. Flawless. We need to

11:03 just slightly amend the borders around this. But you can see what it's done. It's just done this straight away. We claim XP. Let's add that in. And see, we've even got the daily streak thing.

11:12 And I'm really impressed with the level of design that we've been able to get with this. But you get the full idea. Now we have this whole thing. And now we can go down and do the next level. This

11:19 is an app we built basically with one prompt. But if this all sounds like I'm speaking Spanish, I'll put a link down below for my full Claude Code course. helps you build in platforms just like

11:28 this. Learning how to build beautiful websites, apps, everything taking you from zero to a complete hero. And you also get access to the entire motion library and the full claude agentic

11:38 operating system to help you build beautiful graphics, app systems, whatever it is that you're trying to do. Now, this takes us very nicely onto the third level here that we discuss right

11:47 now, which is basically the refining of it and shipping the actual product itself. So, we'd want to come back over here and essentially we just want to go ahead and deploy it. So, but we do want

11:55 to kind of make some changes to this. So, I might say, "Hey, there when I see the animations from the bird, it's like part of his wings get cut off. Let's change that a little bit. Also, I want

12:05 better sound effects when it wins things." And let's just do the sweep and make make some of the questions a little bit more complicated as they go on and make the the kind of lessons a little

12:14 bit longer. Okay. So, you can just come back and give it these questions and kind of go back and forth with Abacus. But once you're happy with it, you can literally come over here again. You can

12:22 see it on different devices. is obviously this is mobile optimized so this is what it would look like you come over and click on deploy and once you've done that you can give it a domain so it

12:30 might say Dolingo example okay and then this will host on the abacus aai app and then within 2 minutes it'll be completely live and we can open this up

12:40 we could have wanted to create a custom domain that's completely our call this is just an example uh and then when you open it up we have this app now in reality you wouldn't just copy the

12:48 Dualingo app of course you wouldn't this is just to show you an example of how you can recreate anything we create our own custom character that flies around and essentially look at how well it was

12:57 able to understand the visual identity of this. But before we actually get a hand to customer, one of the things that you want to do is get Abacus to go through and have a look at as an AI

13:06 quality engineer. So I can say, "Hey, I want to go through the app as an AI quality engineer and test it. Find out where it breaks. Find out where the user experience might be low just so we can

13:15 make sure this is robust and will be tested properly before we give it to any customers." And then what Abacus can actually do guys which is really cool has this computer and it will open it up

13:24 for you and it will start testing and pushing buttons to see exactly what would happen testing it essentially like a human. And if you click on this computer for example you can see this

13:33 this is its background environment and it will open up the app in a computer and test it and look at this to do review API roots or guards API robustness browser flow test go report.

13:43 So, it's just going to test everything for us in the background. And then obviously once you've done your app and you built it unique, you want to either publish it in Android or Apple. There's

13:50 so many great tutorials going into detail about this final step. Um, I'll put this on screen for you here just so you're aware of the next steps you need to make. But one of the things that we

13:58 can also touch on which is important here is what we've actually covered in this video and how this crucially fits into what you need to do next. So, what we've covered in Abocus, right, is every

14:06 model in one subscription. We've talked about that you can build apps and desktops and various different sizes and web apps. We've used the AI quality engineer. We sorted database uh

14:16 databases so people can actually create accounts in this and it will actually remember who they are. Again, if we wanted to, we could add payment to this because it's just connected to Stripe.

14:23 So, if we now wanted to charge people for this app, we could do that fairly easily. And then finally, we've created the artwork inside the app. I'll put a link down below so you can check this

14:31 someone out and create and have a wonderful time. But it does bring us on to a really important question. And I said building apps is one thing, but if you truly want to convert viewers into

14:40 buyers, you need to understand how to build design systems, which we're going to learn together inside this video right Here.