Design with Prompts

Download source code here

Transcript

[00:00:00] Today, I'm going to show you how to build this cool 3D interaction . You can just play around with it and you can also change the colors of the iPhone. And you see this nice animation and reflects the light so well.

And this is just going to take a few minutes to build and you don't need to know any coding to build this. You can do the same with any 3D model.

So to get started, I'm going to go into the terminal and I'm going to create a new Next. js file. And to start a new Next. js file, you just have to go to Next. js documentation. When you go into installation and you just have to copy this line of code, go back into your terminal and just say npx create next app latest.

And we are just going to call it interactive iPhone. and just say yes to everything else. And it goes ahead and creates a basic Next. js application.

So once I've created the application, I can go into the interactive iPhone directory and just open it in my code editor, which is cursor. Cursor is an AI powered code editor, which is almost like a design tool because you almost never interact with code.

All the work that you do inside cursor is [00:01:00] going to be in prompts as you're going to see that right now.

So once I'm in cursor, the only thing you need to know is how the project is structured and how this project is displayed on your browser. So to do that, I'm going to go open terminal and just say npm run dev. What that does is it creates a server that just opens on your browser, on your local host, and it creates this basic Next js application.

So there's nothing much going on here. This comes along with the package and so far we've done nothing. If you see in the project directory, if you go into the source and you can see a few files and page. tsx is the file which is being rendered over here. You can see that there's just some code here.

You don't need to know much, but you just see that there's some text like read our docs and read our docs is essentially the call to action that you see here. And you can see save and see your changes instantly, which is here. Basically, whatever text is inside this page is over here.

But again . You don't need to know how this code is written. None of that is relevant for us.

All we need to know right [00:02:00] now is that we are going to display our iPhone on this page, and it is going to come up on the homepage

so the first thing I'm going to do is go and grab our iPhone model. Now you could do this in a lot of ways. I already have an iPhone model, but you could just go and grab it in the Sketchfab website and you have lots of 3D models. Here's an iPhone model. There's not just iPhone, you could do for pretty much anything.

You can see place for travel. You could just create this nice earth that you could just download it. And there are some free models that you could use as well. And all of these are simple to use and customize.

You also have a tool called Spline, where what you can do is just use prompts to create your own 3D model, and then you can just download and use it on your website.

It is literally that simple.

So the first thing I'm going to do is go into my root folder and I'm going to create a folder called public. And then inside this public, I'm going to create a folder called models, and within this models directory, I'm going to go paste my iPhone model

I will put a link to this model if you want to use it for your own use case as [00:03:00] well.

So now that I have my iPhone model, all I'm going to do is go back into page and open my composer using command I and I'm going to say create an interactive 3D model of an iPhone. The source for the model is placed in the root directory. of my project inside public models as a glb file. Render the iPhone on a canvas and use a single point light source from the top right that is fully dispersed, enhancing the device features.

Textures and colors, bringing a studio effect to its appearance.

So now that said, I'm going to press enter and it will go and create this model that we need. And it does everything in the background. You don't need to do any coding here.

Okay, there you go. It's done something. I'm going to accept what it did, and [00:04:00] let's see what we have so far.

Okay, I see there are some issues. It's because I didn't do one of the things that it asked me to do, which is basically this line of command. First, make sure to install these dependencies I'm going to copy this. I'm going to go into my terminal and I will close this, and I'm going to say npm install these packages, and it will go and install all these packages on its own.

Okay, so now it has installed the packages, and now most of the errors should automatically disappear. These errors have already gone. And over here I still see some errors. Let me see why these errors are happening. i'm going to go over it and say ai fix in chat and it automatically understands what the error is and why it's happening And it says okay. Apply this and it should be fine.

I've applied it. And yeah, that's it. Oh, wait, there's one more over here. I'm ai fix in chat again and It has suggested that it's a prop name. So it's basically to do with some code stuff. Again, you don't need to do any of these, just say accept and that's it. [00:05:00] And just save it.

And when you go launch the application, npm run dev, it starts a local server. And all I need to do is just go into localhost 3000.

And then it brings this one issue. So this is one part you could always go and copy this error and paste it and inform and it should work properly. But the issue is that you just need to say use client over here. So it just is a client component and it's not a server component.

Again, this is probably the only other small code thing . Once you do that. Now you have a perfectly interactive iPhone model

that you can play around with. And it has even the lighting and reflection so perfectly done. Look at the little umbrella over here, the light umbrella, and it's so perfect. It would have otherwise taken such a long time to build.

So now that we have our iPhone, let's try to change the color of the iPhone. So to change the color of the iPhone, we need to know exactly which part of the iPhone's color that we need to change. There are lots of things going on in this iPhone 3D model. There could be the color of these [00:06:00] rims. There could be the color of these on the top.

There could be a color of the surface over here on the back. There could be the color of these buttons. So we need to know which colors we exactly want to change. So we could do that by going into 3js. editor.

So once I'm in 3js editor, I'm going to say import and import the 3d model that I just

used. So now if I zoom in, you can see my iPhone model looks like this. So the reason why we are doing this is to understand which, which layers that we need to change. If you pull one of these layers, so I'm going to select this and then pull this. Now you can see that this layer is one of the parts that we probably need to change the color of.

And we don't need to change the color of this because this is the main screen. We probably need to change the color of this. And you could just take your iPhone model apart and see which ones are the ones that you're really interested in changing.

Now, if you see here, what happens is you can go into material and you can see that each of [00:07:00] them has a name. So literally using this name, we can modify the color within cursor, and I'm just going to show you exactly how to do this. So I pulled out the material names for two layers that I want to change.

I pretty much only want to change this one, and I want to change the color of this one, the one over here. So I already pulled out the names for both of them, and I'm going to go into cursor, and I'm going to say,

change the color of only material name, and I'm going to go and paste these materials here to hot pink. Let everything else be the same original color. You probably don't have to say the second sentence, but I still say it anyway.

And it goes and does its magic

I'm just going to say accept and hit save. Okay. Let me go back to my browser.

There you go. It's already changed the color to hot pink. It's already looking very cool.

So if you go back into cursor, you could just say, change it to any color you want and it already [00:08:00] does the job for you. Until this point, you didn't have to know anything about 3js, anything about any of this coding that's happening behind the scenes.

This is insane, because this would have taken such a long time to learn and understand without AI, even for an experienced developer.

So now let's do the fun stuff. The fun stuff we want to do right now is we want to create the four colors over here. And then when we click on one of these colors, we want the color of the iPhone case to change so to do that, we're going to go and do it all using Sketch. So I created this simple sketch that I'm going to use.

And it's again, a simple box with my iPhone and a few colors on the bottom. And I'm just, I just told AI that this needs to be a color selection. It cannot get any more simple. And now I'm going to go here and I'm going to create a folder called prompts. And within prompts, I'm going to put this prompts inside the public folder.

And within prompts, I am going to go paste this [00:09:00] image. That's it. So now that I have this image inside my source code, now cursor has access to this image and it can read what I'm trying to describe on the image.

So now I'm going to go again to page and I'm going to go into cursor and say I want to add a color selection toggle. I want four colors as shown in the image where tapping on each color changes the color of the material specified in the iPhone. which is what I did the previous step. And I'm going to go tag the image that I just imported.

So I'm going to go hit on add files and just tag this iPhone home page. That's it. And then hit enter and it'll do its magic

so now it went ahead and did all the changes in the UI that it needs to do. And I'm just going [00:10:00] to accept it. And let's see, there's some error that's happening here. The error is in this file called iPhone model. And let's see, I'm just going to say AI fix in chat. This is again, a TypeScript error, but let's just use this and Paste whatever it's suggesting and accept and I think that is pretty much and I can also hit on tab and it already suggested what fix I need to make and There it is.

So I'm gonna go and see what it made.

Okay, I can see that the colors are changing and The only problem is that the colors, this, these four color changing should have been at the center. So I'm going to go make that change as well. So move the color selection toggle to the center and remove everything else except the color toggle and the iPhone from the home screen.

And let's see what it does.

Okay, so now if I refresh, oops, I [00:11:00] haven't saved it. Oh, it's still not done making those changes. Okay, I'm going to accept all the changes. And save and refresh. There you go. It's pretty much everything is working as we wanted. And now you can play around with it. You can change the color.

Let me use different colors actually from the initial example that I had. So I'm going to go and go back to cursor. I'm going to say use, use these four colors instead. And I'm going to go paste my colors.

This is hot pink

and I'm going to call this matte teal, and call this matte coral,

and finally

matte purple.

Okay. So now it has already updated the colors, and I'm going to accept these changes as well, and hit save, and go back to my browser, and I can see the new colors reflected as my initial example. This is pretty cool already.

Now we will add this nice animation. When you click on one of the colors, it does this complete 360 degree [00:12:00] rotation.

Let's add that to this example. It is again, as simple as you can imagine. When I switch the color, let the iPhone Rotate a full circle in the vertical axis like a trailer video.

When I hit enter and it automatically does all the code that it, that I need to make this animation happen.

And that's it. Until now, I have no idea of what's happening in the code and I don't need to know. And once I say accept all. Pretty much everything else is done. So I'm going to go back into code editor, hit refresh. There you go.

Okay. So it seems to keep rotating the iPhone. Keeps rotating on its own after one rotation. Make the iPhone stop.

Okay. Yeah. AI is allowed to make mistakes. Of course, we're already getting so much done with it without knowledge of code or any manual work . So I'm just going to apply all the changes that it suggested and hit [00:13:00] refresh and let's see what it does. There you go. Okay. So I see one more issue.

The issue is that it only happens in the alternate colors. So see, this is how you simply work with AI and you just tell it what the issue is and it fixes it on its own. The iPhone is only rotating when I click on the colors.

Only alternate times. Every time I click on a color, let the iPhone rotate.

And that's it. I'm just going to accept this and let's see , what it did.

I think this is pretty much exactly what I was looking at. And again, everything is interactive. You could zoom in or zoom out. And it's very cool that you could just do this in just minutes.

So this is how you can make interactions like these using AI with zero coding knowledge. And if you just understand the basic Next. js working directory and how things work, you don't need to learn code. You could just bring any ideas to [00:14:00] life. And the possibilities of what you can create with this is so much more than what you can do with Figma or any other design tool.

So if you like this video, hit the like button and let me know in the comments and I will make more videos like this.