How I Get AI To Follow My Designs (In-Depth Walkthrough)

How many times have you given AI a beautiful design and then gotten back something that doesn't even look close?

And then you spend the next hour trying to get it to follow the designs, but nothing works. Here's the thing, though.

nothing works. Here's the thing, though.

It's not just you. The truth is, AI probably gets 60% of your design right on a good day. But no one's talking about what to do for the other 40%. So,

I just recorded myself taking a real design and getting AI to implement it.

Just me going from this design to this actually working screen. And we're not just talking about basic UI here. I'll

show you how to implement complex animations, generate placeholder images on the fly with AI, and even run multiple AI agents at the same time to speed things up. I'm going to show you exactly what to do when AI is not cooperating, when to keep pushing, what

tactics to use, and even when you should give up and move on. And if you stick around, I'll show you something interesting. I actually benchmarked

interesting. I actually benchmarked three tools, including Claude Code and Cursor, to test how well they implement designs. One of them was significantly

designs. One of them was significantly better than the other two. So, let's hop into it and find a design to implement.

What we're going to do is actually use a design library called Mobin to go find some examples. We're going to go browse

some examples. We're going to go browse Mobin and let's see if we can find something cool to implement. I'm looking

for something that's not too simple but doesn't have too many images. Here's a

really good one. It's a book summary app called Headway. We're going to use them

called Headway. We're going to use them as the example. Let's say you have this in Figma or something. This is your design and you want to go implement this in code. This is a mobile app. We're

in code. This is a mobile app. We're

just going to do this in Swift. I have

spun up a completely blank iOS repo.

There's nothing. It's just the boilerplate code that Xcode gives you. I

just like kind of modified it a little bit to say hi. But there's really nothing else in these files. This is

just what Xcode gives you. So I'm going to pull up Cloud Code and I'm using a terminal called warp to run Claude Code.

Most of the times I do run Cloud Code inside of Cursor. Just for this demo, I'm going to run it in this separate terminal just so we can see it side by side with the designs and Xcode. I'm

going to do is I'm going to start up Claude.

So I've started it up. So now we have Claude code running. It is in this repo and it's just a blank repo. So now we want to try to see how far we can implement these designs. What I'm going to actually do is just download the

screen. And I'm actually just going to

screen. And I'm actually just going to screenshot it in here. And then I'm going to go and drag this into Claude Code. So now it has access to the

Code. So now it has access to the screenshot. And anytime I'm implementing

screenshot. And anytime I'm implementing in a design, this is the first thing I do. I always drag in a screenshot as a

do. I always drag in a screenshot as a reference. And then I'm going to tell

reference. And then I'm going to tell it, and I like to dictate. So I'm using an app to to do dictation. I'm like

super lazy, so I like to dictate everything. But here's how I'm going to

everything. But here's how I'm going to prompt it. And the prompt's going to

prompt it. And the prompt's going to change depending on what I'm trying to implement. But in this case, because

implement. But in this case, because this is kind of complicated, I'm going to just dictate this prompt. Let me just pull this up side by side. So, I'm going to say, "Can you implement this screen?

And please follow the formatting and design as closely as you can. Pay

attention to the colors, the typography, the icons, the layout, and really small details like shadows, border radius, background, zstacks, how things are

being laid out on the screen. Please pay

attention to all of these things, and let's only use the single content view file to do this. Don't make any new

files. hardcode all of the data and

files. hardcode all of the data and don't worry about functionality. Please

ultraink.

Great. So, this is the prompt that I'm going to use here. I'll just like run this. This is going to take forever. The

this. This is going to take forever. The

reason that I specifically told it to only do it in this file is for some weird reason all the AI tools just when they create new files, they're not properly linked here and I have to go drag them into Xcode. I just don't want to do that. So, I'm just going to put it

all in this file just to keep things simple. But typically when I am doing

simple. But typically when I am doing this stuff, I do have it create components. I do have it create

components. I do have it create different files and I go drag them in.

I'm just too lazy and don't want to do that right now. The other thing to probably mention is that I told it to ultra think. This is just this tip that

ultra think. This is just this tip that I picked up about claude code where that's like some special command where when you tell it this, it actually just has a higher shot of getting it and it just thinks a little bit longer. I have

no idea if that's true, but I don't know. It's subjective, but it does feel

know. It's subjective, but it does feel like it's actually doing something. Now,

we see that it's actually going to be thinking through here. If you use cloud code, you know that it takes a long time. But I'm just like reading through

time. But I'm just like reading through this and I can see. Great. It it knows that there's a status bar. Um,

okay.

Is this the right thing? Status bar.

There is no status bar. Okay. Well,

hopefully I have noticed sometimes when you feed it in screenshots, it does like to implement the literal status bar. So,

I think it's about to do that. Okay. I

see that it it basically came up with a plan here. Typically, I kind of skim

plan here. Typically, I kind of skim this and read it. I'm sure it's fine.

You have the choice whether you want to edit this or just edit it. But then

don't ever ask me for permission. I'm

just going to make it not ask me for permission just cuz we're trying to move quickly here. I will tell it though,

quickly here. I will tell it though, please don't hardcode the status bar.

That's just for the screenshot, by the way. So, I'm going to tell it that just

way. So, I'm going to tell it that just so that it doesn't accidentally put that in there cuz I have seen it do that.

Everything else looks fine, I think. Did

this work? Oh, wow. Okay, cool. We got

this. Let me go pull this up side by side so we can see how it did. So again,

this was just one shot with the prompt.

I'm using Cloud 4 Opus as the model in Cloud Code. So just a heads up, that's

Cloud Code. So just a heads up, that's the default model that I have. And that

probably does make a difference to be honest. But let's see how far it how how

honest. But let's see how far it how how closely it got here. This is actually super interesting. That's hilarious that

super interesting. That's hilarious that for the books, it actually I think it made these like these are just Apple icons, I'm pretty sure. That is so funny. It actually did follow the layout

funny. It actually did follow the layout in my opinion. pretty good. It did not Yeah, it didn't add the line here. It

didn't really follow the background color. I also noticed this is not inside

color. I also noticed this is not inside of a card. It's got the categories. It

didn't make these scrollable, which is interesting because I think it should have deduced that this is a horizontal scroll just like this because you can see that on this side it's kind of just hanging off on the right. And then I

guess it got the roll the dice. It kind

of followed No, it didn't really follow the tab bar too well. And the roll the dice, it's actually a floating component. It's not directly on the

component. It's not directly on the bottom, but yeah, I would say that this is like 50 60% implemented. So, part of my process is I feed it in the screenshots. Here is where I see a lot

screenshots. Here is where I see a lot of people making a mistake. They

typically feed the screenshot and they have this expectation that Claude is just going to get the screenshot completely. What I do is I taper my

completely. What I do is I taper my expectations and I know full well it's only going to get max 60%. and that the last 40% it's up to me to then prompt it

and actually get it to implement. By

reframing my mindset here, I never get disappointed. But that is a common thing

disappointed. But that is a common thing that I'm seeing where people are like, "Oh, AI is dumb. It can't really implement the designs." Yeah, it really can't. And if you have your expectations

can't. And if you have your expectations set that it can, you're in for a pretty bad time. So, I always keep my

bad time. So, I always keep my expectations pretty low and then I know that it's going to get me 60% of the way there and it's my job to implement the rest. Even though it's only getting 60%,

rest. Even though it's only getting 60%, this is still much faster than me implementing it manually myself. I'm

actually really happy with what it came up with here. So, how are we going to get it to follow the rest? So, this is my approach. The next thing that I do is

my approach. The next thing that I do is I actually go through one by one and I manually go tell Claude code to fix the issues that I see just like I would a human who implemented the design. This

is not the answer a lot of people want to hear. I think they're hoping for some

to hear. I think they're hoping for some magic solution that'll just improve its ability to get it. My experience, I have not found that magic solution. I think

this is probably the best way to do it.

So, that's what we're going to do. I

like to tackle it little by little. So,

another mistake that I see people do is they kind of just feed in the same screenshot and they say, "Hey, you didn't really implement it correctly. Go

do it again." That usually doesn't work in my experience, what I actually try to do is break this problem down and I go section by section and I try to go correct things manually with cloud code.

So, I'm not going directly into the code myself. I'm still doing this through AI,

myself. I'm still doing this through AI, but let me show you guys what I mean.

Let's actually just start first with the layout in the container. Something

that's bothering me is this top part that yeah, that's not in a container.

So, what I'm going to do is I'm going to actually tell it, can you improve the card at the top where it has the streak

and the grow uh your growth this week?

Can you put this inside of a card and make sure that your daily mission is at the bottom of that card as well, but still inside the card? Make sure that

the background is white and that the streak is on the left and then your growth is on the right. I'm going to give you the same screenshot. Please pay

attention to that section. So, this is the prompt. And we're just going to give

the prompt. And we're just going to give it the same exact screenshot.

And now, let's see how closely it gets it. I guess while we're waiting, if you

it. I guess while we're waiting, if you noticed in my prompts, I think that the way you prompt it really does have an impact on how close it follows the designs. I try to go as specific as

designs. I try to go as specific as possible for the elements that I want it to follow. I noticed that the more

to follow. I noticed that the more specific you go, the higher shot it has at following the designs. To be honest, really like a human developer. If I was talking to a junior developer implementing the designs, these are the exact things that I would actually tell

it to. Okay, this token isn't moving.

it to. Okay, this token isn't moving.

Uh-oh. Well, I guess the system's actually overloaded. What a great time

actually overloaded. What a great time to do this during a demo. Let me just try one more time here. And then if not, is it down right now? Says it's fine.

Okay, that's not good.

This is very unfortunate. We'll pick

this back up once they're back online.

While we're waiting for that, I wanted to take a moment to thank the sponsor of the video, Mobin. I mentioned them at the beginning of the video. They are

where we got the initial screenshot for the app, but they're my favorite design tool and a huge design library with thousands of screenshots of different apps and workflows. When I have a complex UI problem to solve, I look at them for inspiration. If you've been following my channel, you know I'd

recommend them even if they weren't sponsoring the video, but they are, and a huge thank you to them for doing that.

There's a link in my description for 20% off the annual plan, which I fought really hard to get. So, definitely take advantage of that if you're interested in using them. Okay, let's see if Cloud Code is back online now. Okay, so we're back. I think that was like 30 40

back. I think that was like 30 40 minutes or something. Let's compare it to the screenshot again. Okay, so it's a little bit closer. I notice here that the padding is off. So, again, my process is I'm just going to go through

each individual thing. And I want you guys to see the level of detail I'm going for all of this. It's very clear just sending in the screenshot of that component, there's a very low chance it's actually going to get it. So, I

manually have to go in and basically tell it all the details that I care about. Uh, next thing I'm going to

about. Uh, next thing I'm going to tackle is the padding. Uh, can you reduce the padding? I also want to make sure that the your daily mission is completely flush on the bottom left and

right. And then make it so that the or

right. And then make it so that the or actually I guess that's margin not padding. but then also reduce the

padding. but then also reduce the padding of your daily mission so it's pretty against the sides as well. So

here I'm actually focusing primarily on this button. Let's see if it's able to

this button. Let's see if it's able to follow that. This is already getting

follow that. This is already getting closer. I actually kind of like that a

closer. I actually kind of like that a little bit more than the uh the original one to be honest. Hi.

Hello.

Want to help me design?

Okay, so that's done. Let me just make a couple more refinements.

Can you make sure that the items like the streak fire emoji one and the day are completely centered? Cuz right now it looks like they're left aligned. And

then the your growth this week, that stuff is also center aligned because it seems like it's right aligned. Also, can

you make sure that there is a border between the streak and your growth this week as well? While we're at it, let me just make a couple more things that I'm seeing here. Can you also make the

seeing here. Can you also make the border radius less rounded on that card?

add a very thin gray border that matches the color of the divider that you added.

Then I also noticed that it actually really kind of messed things up here. I

don't know why it did that. There is

this padding here.

Can you remove the padding of the card so that the divider border the top and the bottom are touching the top of the

card and the your daily mission. Also

reduce the size of the streak and the fire emoji one day left part because I only want it to take up 1/4th of the card width and then the other stuff can

take up the other 3/4s. I'm having to go really granular here. What did it do here? While we're waiting for this,

here? While we're waiting for this, something else that you can actually do is open up multiple instances of Claude code at the same time if you want different agents to be working in

parallel. For the sake of speed, what I

parallel. For the sake of speed, what I might actually do is open up another one so we can work on some other portion of the app. This is already getting a

the app. This is already getting a little bit better. Did it follow the border radius though? Or I mean the border color? Not really. H. Okay, maybe

border color? Not really. H. Okay, maybe

I'll try to add like one more little command here.

Can you add two to three points of padding above your growth this week and the key points? I noticed that the day key points, minutes, and insights are

not really aligned, so it looks off. Can

you make sure that the elements are all in line with each other, so it's more uniform? And then you can add a little

uniform? And then you can add a little bit more padding to the top and the bottom just so there's a little bit more breathing room. So we're going to let

breathing room. So we're going to let this run. What I'm going to do is

this run. What I'm going to do is actually open up another instance of Claude Code and then I'm going to work on another portion just so you can see that that's something we can do here.

We're going to open up another instance of Claude code. Let's work on this roll the dice part because that's kind of interesting. To be honest, it kind of

interesting. To be honest, it kind of followed the other two sections like relatively closely. It's like 60% there.

relatively closely. It's like 60% there.

So, I'm just going to make a little bit more refinements there to get it close, like tweaking the border radius, tweaking the fonts, like all that stuff.

Let's go work on this roll the dice thing because that is kind of a big issue. For the roll the dice card, you

issue. For the roll the dice card, you made it inside of the vstack so it's in line with everything, but it should actually be hovering and floating right

above the tab bar. Can you make that modification? Also, can you reduce the

modification? Also, can you reduce the padding of it a little bit? So, we're

going to let that run. Let's go check it on the other instance. So, this is done.

Okay, so it did align. No, it did not align this at all. So, it didn't actually follow this correctly. So, I

might have to reprompt it here. Can you

make sure that the streak and your growth this week are in line? The fire

emoji one, the 27, 44, and 29 are in line. And then the day, key points,

line. And then the day, key points, minutes, insights are in line. And then

what I'm going to do is I'm going to actually screenshot so it knows what I'm talking about. Add this in. And then

talking about. Add this in. And then

since it's having a hard time, I'll just throw in an extra Ultraink just to see if it gets it. And then we'll check on this one. Cool. So this one is running.

this one. Cool. So this one is running.

It needs the permissions again for this cloud code instance to start modifying.

And yeah, I you you can actually have it modifying to like the same file. And I

have noticed it actually has been okay doing that. So now we got the roll the

doing that. So now we got the roll the dice. Perfect. It's actually there

dice. Perfect. It's actually there floating instead of being in the actual stack itself. So that's perfect. Let's

stack itself. So that's perfect. Let's

go back to this instance. Okay, this is still going. Oh, actually files been

still going. Oh, actually files been modified. So either by user Oh, I guess

modified. So either by user Oh, I guess it is actually throwing an error about reading the same file, but looks like it's not a problem. It's still

continuing. So it's making the modifications.

Okay, this is getting a little bit better. So I see that at least these are

better. So I see that at least these are becoming aligned, which is good. It's

still kind of off, though. Okay,

perfect. This is getting really close.

But can you make sure to keep the columns themselves centered in terms of the content? So, your growth this week

the content? So, your growth this week should be centered aligned with the other two elements, not fully left aligned. I'm a little worried. It's

aligned. I'm a little worried. It's

getting kind of confused that it might not get that one correctly. So, we'll

see. And we have this other agent just sitting here. So, we can keep working on

sitting here. So, we can keep working on some other stuff. Okay, cool. Yeah, this

is getting a lot closer. Obviously,

still some differences here, but I actually do like the look of this card.

Maybe we can tweak that border. This

border at the top is bothering me, though. Can you make sure that there is

though. Can you make sure that there is a thin gray border going along the edges of this? I notice it looks like it's

of this? I notice it looks like it's kind of getting cut off at the top for some reason. And then we will feed in a

some reason. And then we will feed in a screenshot of that top just in case. And

then let's use the other agent since it's just sitting there. Oops, I fed this into the wrong agent. I just

realized it's fine. They're both have enough context where even though they're two different agents, I think it should still um be able to Oh, actually, no.

That was a mistake. It actually is trying to modify this roll the dice thing at the top, actually. So, I should have actually done it here. I'm just

going to repaste the exact same prompt into the right agent. And then I will drag this back in.

Okay, let's make this quick modification because I noticed I hate how there's no padding here. This roll the dice is

padding here. This roll the dice is actually completely covering the cards here. Can you add a little bit of

here. Can you add a little bit of padding to account for this new roll the dice card that's hovering over because it is actually covering the bottom of this scroll view. And so we need some

extra padding so that everything in the scroll view can be visible even if we scroll to the bottom. I take that back actually. Maybe it's not a good idea to

actually. Maybe it's not a good idea to update the same exact file. This might

actually cause a little bit of issues. I

mean, it seems like it's functioning correctly. I can see for complicated

correctly. I can see for complicated things, maybe you don't want to do that, but I mean, it seems to be working here.

Let's see. So, for this one, again, this was the bottom thing. So, now it works.

It's not actually covering it. So,

followed that one perfectly. And then

for this one, we asked it about this top border.

No, that's still that's still there a little bit. I'm actually starting to

little bit. I'm actually starting to think that it Oh, no. That actually Oh, it goes away when we do that. H. So,

there's like a weird shadow almost that's kind of making this go away. Okay, let

me just try a little bit more to debug this.

Actually, this seems good, but there is some weird shadow that's in the background that is causing it to look kind of off. Can you look at what's going on? Because when I start

going on? Because when I start scrolling, it actually looks completely fine. Is there some shadow somewhere in

fine. Is there some shadow somewhere in the hierarchy? Okay, so we're gonna let

the hierarchy? Okay, so we're gonna let this one kind of go through. I think you guys get the point, though. The way that I do this is I go through little by little, and sometimes I have to go

really in depth down to how I want the corner radius or how I want something depending on how far I want to go. But

my process is really just going section by section trying to iterate and trying to get it to follow the designs as much as possible. Some people might say,

as possible. Some people might say, "Okay, isn't it faster if you just code it directly?" For very small things,

it directly?" For very small things, fine. It could be a little bit faster if

fine. It could be a little bit faster if you just did it yourself. Still, I think the amount of time I put in to get to this point substantially faster doing it this way and just talking to Claude Code rather than typing it all out and

figuring it out. I still prefer this method of just having this conversation as if I was talking to a human developer. Okay, so this is done. Um,

developer. Okay, so this is done. Um,

yeah, and it still isn't getting this.

I'm very confused actually cuz I don't really see a shadow there. So, this

might actually be some sort of Swift UI bug potentially when I hit something like this where even after three or four prompts, it's not really getting it.

Usually, what I do is I hold off and then I switch to something else just so I don't spend too much time on it. But,

I do plan on going back and trying to figure out what is going on here. This

is such a minor thing right now that it's not worth wasting a few hours trying to debug it at this point. So,

I'll switch to something else and then I'll come back and make a note to deal with this one later. Let me show you guys some other interesting things that I do. Something cool is using AI and

I do. Something cool is using AI and specifically Claude Code because it has a web search tool. I use it to actually generate placeholder images sometimes.

This is a book app. So, what I might actually do is tell it for the book placeholders that you added, go retrieve the actual book covers using your web

search tool and getting a link and linking it in the app. If you have to download it or something, go ahead and do that. But I want to actually see the

do that. But I want to actually see the book covers in place of the placeholders that you made. I noticed there's three books here. For the third one, why don't

books here. For the third one, why don't you just pick another book in the genre cuz I actually don't know what the third book is. So, feel free to swap it. Maybe

book is. So, feel free to swap it. Maybe

a book with a blue cover would be nice if possible. I just put the Ultra Think

if possible. I just put the Ultra Think in there at the end just in case. I'm

looking at what it's thinking. It says

that the Fi the 5 a.m. club, Think and Grow Rich. Is that actually the book?

Grow Rich. Is that actually the book?

Oh, it is the book. Okay. Think and Grow Rich and then a third book. Okay, so

it's it's thinking about this correctly.

And it's going to pick Atomic Habits.

That's a that's a pretty good one actually. And I told it just pick

actually. And I told it just pick something in a similar genre, similar category. And Atomic Habits, I think,

category. And Atomic Habits, I think, does fit this fit this here. You can use this if you wanted to search for icons or if you want to have placeholder avatars. It's actually pretty smart

avatars. It's actually pretty smart about getting some placeholder avatars.

So typically when you're prototyping, you're doing something in Figma, you have to go and download a bunch of these things and put them in your product. But

what's really cool is Claude Code can actually do this. I think while we wait for this, cuz this could take some time, we can go have the other agent refine stuff a little bit more. I'm going to ask it, can you make sure to use a different background here? I think we

need something that is a little bit more on the orange side, almost like a beige color, but keep it really light. Also,

can you make sure that for any of the cards, like the categories you're interested in and the roll, the dice, put a very thin gray border around it.

You know what? Let's actually just push this thing a little bit. Um I Ah, no.

Actually, we'll just keep it as is.

That's actually enough. Still doing a web search. It's using its tool, and in

web search. It's using its tool, and in this case, it's searching for Oh, wow.

blue covers of Atomic Habits because I told it I'd prefer it to use a blue cover image for this. Okay. And then the second agent's done. It did actually get a background color that matches this a

little bit more. It added the Yeah. And

perfect. It added the gray borders around the boxes. So, this is getting closer. Okay. Let's see. Is this agent

closer. Okay. Let's see. Is this agent done? Nope. This is still going. Hey,

done? Nope. This is still going. Hey,

perfect. It's actually getting cover images. So, this is the actual cover

images. So, this is the actual cover image of the 5 a.m. Run Club. So, I

guess this Oh, these are probably custom images that Headway has for these books.

So, this isn't the real cover, which makes sense cuz they all kind of look the same. But I guess these are the real

the same. But I guess these are the real book covers, which to be honest, I actually like the ones that it generated originally better. Yeah, I guess these

originally better. Yeah, I guess these books just have really boring covers.

So, this does not look good at all. But

at least it works. And then this one's done. So yeah, we are getting a lot

done. So yeah, we are getting a lot closer. Man, I really This is really

closer. Man, I really This is really throwing me off. Let me just tell it to the book covers look kind of weird in line here. Can you somehow make them

line here. Can you somehow make them look like actual books and then put the cover on top of it? I don't know what the best way to do that is, but I really want it to look like a bookshelf and the

covers just look like images slapped on the screen. Can you fix that? To be

the screen. Can you fix that? To be

honest, I don't know what it's going to do here, but sometimes I just like to give the AI some sort of prompt like this and see because sometimes it comes up with really interesting solutions and I use the wrong agent again. So, I put

this one in the wrong chat window. So, I

guess that's something to look out for.

Typically, I actually run them in split screen, but we're limited in real estate here so I don't make this mistake. Like,

I don't have different tabs open. I keep

them side by side. But, I didn't want to do that here cuz I want to keep this stuff open. That's interesting. I don't

stuff open. That's interesting. I don't

know why it's cut off right here, but I think it's trying to put the book spine here, which that's actually kind of interesting that it did that. I'm not a huge fan of this. Um, actually, I think it does look better than the original

one that it had, to be honest. These

actually look a lot more like books. So,

that's not bad. I don't know why the shadow is there. There's a weird shadow coming from the books, so the bottom part looks cut off. Can you fix that somehow to make it look better? And then

we'll go back to this one. for the

categories you're interested in. I

noticed that there's only two cards here. Can you make sure that it has four

here. Can you make sure that it has four cards and it's scrollable horizontally?

Also, make sure that it is the text is only on one line because I noticed that it's taking up multiple lines. And if it doesn't fit there, you can truncate it

if needed. So, this is to fix this

if needed. So, this is to fix this because I noticed that, you know, it's kind of it kind of squished itself to try to fit on in within the card, but I don't want that. And I also want that

horizontal scroll view. Okay. Okay.

Yeah. So, again, this this agent was working on the whole shadow thing. And

yeah, this looks a lot better. It looks

a lot more natural. Actually, very

surprised. I don't know where it came up with the colors for this, but could probably come up with a really cool algorithm based on the image. Come up

with a spine color. Yeah, that's

actually doesn't look too bad. And these

are the real images. We got some time here. This is still going. Can you add a

here. This is still going. Can you add a thin gray border right below the Headway logo? And then let's do that. Nice.

logo? And then let's do that. Nice.

Okay, cool. Uh, I don't really like the truncation. I probably shouldn't have

truncation. I probably shouldn't have said that. I should probably just make

said that. I should probably just make it remove the truncation. Instead, make

it so that the width of the card expands to fit whatever text is there. Okay, it

added this.

Can you add some padding above the your daily mission stuff or right below that new divider that you added because the card is touching the border or the

divider? Also, something you probably

divider? Also, something you probably noticed is I'm just dictating this thing and I'm not really cleaning up the prompt that much. Something I have noticed is that even if you leave in

like a couple of extra words in there, Claude Code is pretty smart to be able to infer what you're asking. And so I have not found any issues by just kind of talking to it like a person and

leaving random artifacts of words in there and it has not been a problem.

Okay, cool. So this this actually worked. And then is this one done? Oh,

worked. And then is this one done? Oh,

this one's still going. I don't even remember what we were doing here to be honest. Oh, this was the the card one.

honest. Oh, this was the the card one.

Okay, cool. The cards are there. We have

the title. So I mean honestly I think I might just wrap this example up here.

Basically what I'm going to do is just iterate for another 2 hours until it's exactly what I want. Somebody might

laugh at me and say, "Okay, well, you can probably just do this way faster if you coded it." Um, sure. But part of the thing that's really cool about this is when I'm talking to Claude Code and doing it this way, I can kind of just

experiment as it's working. Something

that was interesting while doing this, I sure, I could have maybe followed the the whole book thing onetoone. Being

able to just ask it, hey, can you make this look like a book? The fact that it came up with the whole putting the color of the spine of the book right there with the shadow and all that stuff, that was all just creativity from Claude Code. I didn't know what it was going to

Code. I didn't know what it was going to do. So, being able to just riff off of

do. So, being able to just riff off of Claude Code while you're designing and while you're implementing designs, I have noticed I've come up with some very interesting things because I'm treating it almost like this design partner. That

is another pro of using AI to implement versus just doing it yourself. You never

know what's going to happen. While we're

here, actually, I think something cool maybe I can show you is something that I like to do with AI is actually prototype animations. It's something you can do

animations. It's something you can do very easily with Claude code because you don't really need to know how the animations work under the hood. I mean,

it would actually help a little bit, but you can just talk to it in plain English and have it do animations for you. Let's

try something kind of interesting since we're already here. Maybe I want to try to when you click on this book, we want a cool animation where it will open up

and then maybe it'll go to that book. To

be honest, this is a pretty complicated one. So, I don't know if we can get this

one. So, I don't know if we can get this done in the demo, but just see how far we get with it. But hopefully, this gives you an idea of what is possible when you use cloud code for animations and prototyping. So, I'm going to just

and prototyping. So, I'm going to just say, can you make it so that when we click on one of these books, the book almost opens up where the cover folds to

the left just like a normal book opening and on the right or in place of where the cover was, we see a little excerpt of the text. And then when the animation

is done in terms of the the cover folding, I want the text to then expand to a full screen mode. And in the full

screen, I want you to show a summary of the book. Please ultraink. Again, ultra

the book. Please ultraink. Again, ultra

think this is a pretty complicated one.

I genuinely don't know how this is going to go. Sometimes you get lucky and it

to go. Sometimes you get lucky and it actually understands it, but then a lot of the times if it's a very complex animation, there's going to be a lot of refinements just like the UI. It

actually wants to run the simulator, but I don't want it to do that because we're already in here. Okay, so let's see how far it got. My hopes are not high to be honest.

Okay, it did not follow the animation. I

will say though, this looks really cool because when you click it, yeah, it shows the preview and then it just kind of opened. I actually really also like

of opened. I actually really also like the UI it came up with for the summary.

So, that's actually pretty nice. But no,

it did not follow the animation at all.

Let me actually try to correct it and tell it. I really like it, but I noticed

tell it. I really like it, but I noticed that it's not doing the the fold over for the cover book. Um, I noticed that it's not doing the fold of the cover

image like we talked about. It kind of just opens to that preview and then I just see it appear. Please make sure to do the cover fold thingy. Okay, we're

going to let it try this again. Okay,

let's see if this worked.

Okay, this is progress. I'm very

surprised. Okay. So, it seems to be opening, but it's going the other direction. It's almost like the cover is

direction. It's almost like the cover is going inside of itself.

But that's pretty cool. Okay. So, I'll

just tell it. Wow, this is really great.

But I noticed that the cover is almost going inside of the book. Can you make it go the other direction? So, it

simulates a book opening. That is really cool, though. I'm very impressed that it

cool, though. I'm very impressed that it was able to get this. If it just went the other direction, that's really cool.

It's also not doing the whole like it kind of zooms out into the page, but that's completely fine. And I could probably fix that pretty easily. Still

going the other direction.

I need it to flip.

[Music] Oh, I guess it's right to left, not left to right, cuz it's flipping like this. It's going right to left.

like this. It's going right to left.

Yeah. Okay.

Maybe I shouldn't have said left to right. Maybe that's the issue. Okay,

right. Maybe that's the issue. Okay,

that's that's not working. Um,

man. So, this this is Is this going What is this doing? This is right to left.

[Music] It's doing it from the right side though, which is not how a book opens. I

need it to hinge from the left side where the spine is and then I need it to flip over.

Please ultra think about this again. It

needs to simulate a real book. I feel

like we're really close to be honest and this is usually how it goes with animations. Like there's like some 10%

animations. Like there's like some 10% that needs to happen and it takes up a lot of time just going back and forth to perfect it. But this is still way faster

perfect it. But this is still way faster than if I had to do this from scratch.

I'd have to look up all this stuff and figure it out. Even if this took another hour, that's not a problem. This is

still faster than if I did it manually.

Okay. Okay. Now it's getting in the right direction.

Yeah. Yeah. There we go. Okay. So, this

is opening. It's still kind of like contained.

Great. Great. This is the right direction. But can you make it so that

direction. But can you make it so that the cover flips and lands to the left of the book as if the book is opening?

Right now, it seems like it's contained in the book. You can let it spill over.

That's okay. I noticed that. Yeah, it's

like kind of contained in the book. So,

it does open the right way, but it's not opening like a real book. It kind of like disappears as we rotate, which is not what I want. Did it work? Okay, now

it's like completely broken. Oh, it's

like moving. It like moves it almost.

Oh, it's like shifting it over, which is wrong.

Ah, okay. It's not really getting it.

But I'm so confident if I just had more time and I had like 30 minutes, I can solve this. I'm like very, very

solve this. I'm like very, very confident about this. Like I think we're like five prompts away from perfecting it, but I don't really want to spend too much time on this. You get the picture.

You can achieve some really interesting complex animations with this and it is really powerful. You can do things that

really powerful. You can do things that are actually really hard to do in Figma.

As a designer, this is actually also a really good prototyping tool and a good case to just prototype directly into code. Let me just tell it to put it back

code. Let me just tell it to put it back here. Um I I actually like how it was

here. Um I I actually like how it was before. I I can live with that. While we

before. I I can live with that. While we

wait for this to happen, though, let me show you something cool you can do. when

I have a really good design and I'm like, "Okay, it's kind of following it.

I'm I'm kind of got what I needed to do." You could actually just go back and

do." You could actually just go back and forth and try out some cool experimental stuff. So, I do this all the time to try

stuff. So, I do this all the time to try to come up with some new designs. In

this case, what I might say is, "I really like it, but could you come up with a bit more modern design? I really

want something with more glossy backgrounds where I can see through elements. Can you also make it have a

elements. Can you also make it have a lot more sharper edges and just be a little bit more cool colored? So, I'm

going to have it do this. And again,

this is what it looks like right now. I

love just making a new branch and then usually I just have conversations with Claude like this where I tell it to go try different things and then if I like it, I actually end up rolling with it and if I don't, I just usually scrap the

branch and I just keep the designs that I have. But Claude Code is a very fun

I have. But Claude Code is a very fun way to just iterate on designs. And

again, there's this creativity factor because you're just asking Claw to do something, but you're not really giving it such explicit directions. It

sometimes comes up with really interesting things. Like, I told it to

interesting things. Like, I told it to have some glossy effect. I don't

actually know what this is going to look like. So, let's find out and see. But it

like. So, let's find out and see. But it

could be a really good starting point for a really cool design. Yeah, I can already tell this is a design I really hate. But, it is interesting though. It

hate. But, it is interesting though. It

is interesting. It's um this might resonate with some people. This might

actually spark some sort of inspiration where they're like, "Oh, I kind of like where this is going." Maybe if you do use a lighter background or something and actually rounded the corner radius, this actually could work. Actually, let

me try that. Can you make it a lot lighter? Like use a lighter I love the

lighter? Like use a lighter I love the gradients, but use a lighter gradient.

Maybe more greenish purples and then round all the corner radiuses as well. I

think it's a little too dark in my opinion, but maybe if it's a lot lighter, it'll be a little bit more welcoming. Oh, okay. Yeah, this is

welcoming. Oh, okay. Yeah, this is actually looking a little bit better.

Wow. Okay. Even just that one prompt, I see what it's I see in another interesting directions here. It also

changed the layout here, which again, compared to the other screenshot, this is really fascinating. So maybe there is something to this one. I mean, it's still going, but you guys get the point.

What you can do is just riff off of cloud code and just see what it can come up with. So this is a really cool

up with. So this is a really cool strategy. If you're kind of stuck, you

strategy. If you're kind of stuck, you don't know where to go, you can just give it a screenshot and then tell it, hey, can you make it in this variation instead? Yeah, it's definitely getting

instead? Yeah, it's definitely getting there. I see it now. Okay, I see the

there. I see it now. Okay, I see the vision. I see the vision cloud code. I'm

vision. I see the vision cloud code. I'm

actually going to wrap this portion up because I think we covered a lot of the workflow here. And I could honestly keep

workflow here. And I could honestly keep going, but it's going to be a lot of the same stuff. But hopefully you guys

same stuff. But hopefully you guys picked up some cool things and enjoyed watching my actual real thought process.

I realized I didn't cover something, which is why do I use Claude Code over other AI tools like cursor? In my

experience, I feel like it has a way higher shot at implementing designs compared to the other tools. I actually

ran a quick test where I compared three different AI tools against the same design to see how well it could implement it in one shot. I wanted to share the results with you guys so it can explain why I use cloud code, but it can also give you guys a good idea of

what the baseline for some of these tools are if you decide to use them. You

honestly can't go wrong using any of these tools, but let's get into the test. So, when it comes to implementing

test. So, when it comes to implementing designs, I also want to point out that not all AI tools are built equally. So,

whether you're using cursor or you're using cloud code or using something else, just know that its ability to actually follow screenshots and implement designs does vary. And so, I actually ran a really quick test that I want to run you guys through to kind of

showcase this a little bit. In this

test, what I did was I actually gave it some examples of my app. So this is Ellie and then also some screenshots I got from Mobin. I wanted to compare how three different tools and the tools are

cursor, warp, and claude code. These

three different tools, how they handle oneshotting designs, which is a really good benchmark because in my process, the way I always start implementing designs is by feeding it in an initial screenshot. And what I found is that it

screenshot. And what I found is that it usually gets around 60% of the screenshots and then I have to go iterate from there. But some tools only get like 30% or 40%. I do want to show what impact tool choice does have. So

let's go take a look at this. This was

the base design. This is for the meeting assistant app for Ellie. In my opinion, this is actually a really simple layout to be able to copy and I thought this would be pretty easy for most of the tools to pick up. And I also want to

preface that all of these were given the exact same prompt. All I did was give it a screenshot and I said, "Hey, can you follow this as closely as you can?

Please pay attention to colors, pay attention to border, pay attention to all of this stuff." So, all of them had the same prompt. All of them are also using quad 4 opus and if there's an option, the max setting. So, whatever

the most expensive Cloud4 opus model, that's what I selected for each of the tools. Nothing for it to work off of.

tools. Nothing for it to work off of.

So, it was just a blank slate and I just told it to oneshot it. On first glance, I think cursor did the worst in this case. It added this weird shadow to

case. It added this weird shadow to everything which really didn't make it look that good. Added a shadow to the mascot. It added a shadow to this text.

mascot. It added a shadow to this text.

Obviously, these chips. It didn't really follow the chips that well. It got the colors. Warp, which is the terminal that

colors. Warp, which is the terminal that I use, but they actually have an AI coding assistant in it, and I'm evaluating it. So, this is the other one

evaluating it. So, this is the other one that I wanted to throw into the mix.

They actually did a pretty decent job at following. It did not get the colors of

following. It did not get the colors of these suggestion chips, which is kind of interesting. It kind of followed the

interesting. It kind of followed the layout pretty well. It didn't do the whole shadow thing that cursor did. And

then obviously, which is what I expected, Claude Code actually did the best here in terms of following design.

And that's something I have noticed across the board as I've been testing these tools at this time. Claude Code is probably the best at implementing designs. It did miss a couple things

designs. It did miss a couple things here. So that's why I say that it gets

here. So that's why I say that it gets like 60% of this done because if you look closely, let's compare it against the base design. It didn't follow the chip correctly. Like it did add this

chip correctly. Like it did add this background to it. Oh, I even see that it didn't really trim the the background here fully. So, it's kind of bleeding

here fully. So, it's kind of bleeding outside of the chip. Did not really add that line right here that breaks up the header and the rest of the body. So,

there's no line here. It didn't follow the buttons too closely. It did add the right buttons and the right icons, but it didn't add the background on the plus. It did not follow the input fields

plus. It did not follow the input fields either. So, I wanted it to be inside of

either. So, I wanted it to be inside of the actual text box. It did not do that.

What's kind of interesting though is that warp and cursor both did that. They

all have their different nuances. Like I

guess I can't definitively say that quad code was the best one here, but because there were some things that it also messed up, but I will say that in this case, if I had to choose one to go off of, I would choose the cloud code one.

Um, here's another example. This one was a lot more complicated because it has this chart. It has a lot more elements

this chart. It has a lot more elements going on. The results were actually

going on. The results were actually really interesting here, too. In my

opinion, I still think Claude Code did the best at following the designs closely. Cursor probably did follow this

closely. Cursor probably did follow this a little bit. Actually, no. I actually

think I would probably still choose the warp one in this case. I don't like the background color that this one's kind of tough actually because they're kind of all like I really like how it got the rewards button correctly here with

cursor. This background is just really

cursor. This background is just really throwing me off. It did kind of get the day chips where Warp did not get the day chips at all.

None of them really got this this card right here correctly, but I do see Claude Code got this. At least Claude Code did kind of get the whole 1 day, 1

week, 1 month time series selector here.

It got this. They all kind of got this idea of the chart, which is really good.

Yeah, you can see that it they all didn't really follow the designs. I

think Claude Code probably got it like 40, no probably like 50% there. It's a

really good starting baseline, but yeah, they all have their different nuances, but in my opinion, I think Cloud Code was still the strongest. I decided to feed in a web design to also check because both of those are mobile examples. This one was really

examples. This one was really interesting. Sadly, Warp did not seem to

interesting. Sadly, Warp did not seem to implement it fully. I don't know what happened here, but to keep it fair, I just was oneshotting this, so I didn't want to reprompt it. Maybe this was just a bad example. It did not follow it.

This is a pretty, in my opinion, a little more complicated of a layout.

What's actually really funny is all of them accidentally took this curated by mobin watermark and and they it actually added it. What is this? It added it to

added it. What is this? It added it to the bottom of both of these implementations which is really funny.

Yeah, this one was actually really interesting too. Maybe I can move this

interesting too. Maybe I can move this here so you can see this a little bit better. In my opinion, I still think

better. In my opinion, I still think that cloud code followed this a little bit better because if you look at let's take a look at the sidebars for example.

So again, this is the sidebar. I'll just

move this here. This is the sidebar of the base design that I gave it. This is

the screenshot. You can see that cursor really did not follow it that well. It

added emojis. It made the background black. It just looks like a completely

black. It just looks like a completely different app because of this. The

calendar, it got kind of close. Like it

did kind of get the ch No, it it really didn't. It really wasn't close to be

didn't. It really wasn't close to be honest. It didn't really follow the

honest. It didn't really follow the colors, but it got the general layout, which I think is really important here.

Then when you compare it against something like Claude Code, this one actually did follow the sidebar a little closer. At least it kept the color of

closer. At least it kept the color of the sidebar consistent. So it's white.

It used really nice icons, which I'm very happy that it did. I don't know where it pulled these icons. It knew to do that. I think the calendar is a

do that. I think the calendar is a little more in line with what I'm going for because if you notice the events here are inside of a card. It didn't

really do Oh, I guess it did it, but it didn't do it that well in my opinion for cursor. But then cla code did follow the

cursor. But then cla code did follow the card a lot closer in my opinion. Like

the chips look way closer in the cloud code example than it does here. In my

opinion among all three of them, cloud code one. All of this to say and to show

code one. All of this to say and to show you guys that the tooling that you choose does have an impact on how well it's able to follow the designs. And

that's why whenever I'm implementing designs and I'm doing this stuff, I am currently defaulting to cloud code for most things. In the examples I'm about

most things. In the examples I'm about to show you. That's why I'm using cloud code. So hopefully that test was

code. So hopefully that test was interesting. And also hopefully you guys

interesting. And also hopefully you guys really enjoyed seeing my workflow. This

is my first time experimenting with a more raw, unedited video like this. So

if you like this, please comment below and I can maybe make more of these in the future. If you like this style of

the future. If you like this style of content, check out my Instagram and Tik Tok. I post almost every other day about

Tok. I post almost every other day about building productivity apps. I share a lot of things that I don't share on this channel. So be sure to check it out.

channel. So be sure to check it out.

Obviously, if you like this content, don't forget to subscribe. But thank you guys so much for watching and I'll see you guys in the next video.

[Music]