Design with Prompts

Transcript

[00:00:00] So today. the agenda, right? So we have a pretty exciting one. So first I want to talk a bit about why you should learn AI. Then we'll go into some frequently asked questions, like generally that people ask about AI and design. And we're going to make a design that you've never done before.

And finally, next, if we find time today, we will make it shareable and we will turn it into a, into an app others can use. This is, Today we will definitely do this tomorrow or if time permits we'll try to do this or we'll This is carry over for the next session or I'll make a recording and share it afterwards.

Okay So why should you learn AI? Here's like The signals that I have been getting and inspired from my own personal experience as well. So canva it reduced the need for Like traditional graphic designers. And I also heard this from the VP of design at Meta and one of his talks, but it brought a new wave of profession of social media and brand managers this is like how things are evolving.

Similarly, design systems reduce the need for traditional UI designers, but it brought new roles like [00:01:00] design system designers and UI engineers, right? Squarespace and Webflow reduce the need for traditional web designers. But it emerged a trend of design freelancers who could design and also build.

And this is, these people are making a ton of money today on Upwork and, all these other platforms. And they are like people selling templates with Webflow who make a lot of money. Similarly I think I believe that AI will reduce the need for traditional UX designers. And probably this is also one of the trends that's happening because a designer can do more.

Then what they were able to do before, and I think it will create a new way of designers who use AI to explore creativity to new heights, right? So things change, but it also creates a new opportunity. So it's just a question of how we adapt to those opportunities and how we identify it and how we how we take advantage of it.

So this could be you after today. That's the skill that I want to bring and show you that how it can be [00:02:00] possible. And basically leave you with the skill that you can take. Some common questions that I keep getting right. First, are we learning to code? No, the short answer is no, but because it's let me explain, right?

So what is, what coding really is? This is traditionally what coding really meant. For example, an API call looks like this. So you had to write an unknown language that a computer understands and you say, okay this is a response you fetched from a particular endpoint and then you wait for the results and then you catch results.

Whatever, right? So this is what coding meant before. How to format data. When you write a function and then you had all this object looking and then you type different syntaxes and all of that. But now how do API call look like? Is just you saying make an API call and get the data and show it on my screen.

That's it. And then AI does the code for you and you can choose to look at the code or not, but the code is there, right? How to format data. You just say convert [00:03:00] the data into local currency and show it on my UI. And then he does the code for you. So my question really is it really coding if you never have to write a single line of code?

It's not, it's changed things, right? So it's not coding anymore. If you're just like writing prompts, the coding is what happens in the background, but there is some level of understanding of this code that will give you leverage over like leverage to build anything that you want. And this level of understanding is not very hard to get.

Okay. In comparison to learning how to code. So the second question, can I really build anything? Here's some examples of what people have been building, built a complete web app in AI in just 24 hours, not without writing a single line of code, how I created a Chrome extension in less than two hours.

And people have been playing with V0 and Cursor and like how they made an app which could add photos, generate descriptions, all of this in just two hours and in less than eight minutes build an Airbnb app using Cursor. This is [00:04:00] what we are in front of today. I don't know if people have if this syncs enough in you that in two hours when this is possible, imagine what you can create.

If you spend a day on, so the answer is yes, you can absolutely create anything you want. Imagine this, right? So I know some of you are like job seekers and if you like most designers that are applying for jobs and like you are as well. But most portfolios have like just.

Like mockups because you probably haven't worked in a company, you're creating these like concept applications, but they're just mocks, it's very hard to tell if you're like designs actually solve a real problem when looking at these mocks. But imagine if you had an actual working application and this application solved your problem.

So it could be a problem about finance tracking. It could be a problem about your habit building. It could be a problem about anything. You forgetting the expiry dates on your items in your refrigerator, right? Build something around your problem. And now if you [00:05:00] had an app which others could actually use, imagine what impression it could create.

This will really set you apart. And I really liked this quote, right? So in an overly saturated market, you have to stand out by being exceptional. And this Alex or Moses, I'm a big fan of him and he's like the owner of school. And like this code really resonates that if you want to be exceptional, you have to be different from everyone else.

You have to try something new. We have to learn the new things. I want to tell a little story here. This is in 2018 I was in a very similar situation where I didn't find jobs. I was, I took a two year break from design and and I didn't even know if the design that I did before you encountered us.

And so I applied to like at least a hundred companies, including the company I'm working in right now. And I got rejected all of them. And what happened was I got this out of nowhere. I got the sudden opportunity to interview at grab in Singapore. And grab was like better than all the companies I had [00:06:00] applied because they had acquired uber and they're like much bigger They're like in equivalent to one of those fan companies at that point So I was pretty sure you know after getting rejected by so many the chances of me getting hired at grab was like almost like nothing But I just got the opportunity to interview and they gave me a take home task and they said okay design this like application for You know for managing some internal tools applications And I could just do the same thing by just like designing, but those two years that I took a break before I started applying for jobs again, I actually learned how to code.

So I took a take home task and I designed it and I built the whole application. It was a fully working application. And in the interview the next day, I just sent them the link and I said, Hey, use it. This is the app. They gave me the job instantly on the same call. They said the HR will contact you and roll out the software.

I am not exaggerating. This happened. And you can this is how I got my job at Grab after two years of being on like two years of [00:07:00] looking for a job in like the favorite company that I wanted to work in. This is how I got the job instantly. And look, design coding was not even a job description of a designer, but the fact that I tried something different.

The fact that I try to stand out by doing something different got me this job. And this is the message that I want to make it very strong for you that it is an overly saturated market. By doing things that others are not doing, you will have an advantage. Okay. So I hope that was enough motivation for today.

I just wanted to ease into what we're going to do. So let's start. So we are going to start building, right? So I've in fact because I'm going to show you how easy it is to build things today, I actually built something for your thing that we're going to do today. I'm going to send send something on the chat just a second.

So I want you to open this link that I just sent on the chat. And if you open it,

you should see something like [00:08:00] this. So it's, if you hit on shuffle, you will see like different app ideas, right? Now go ahead and keep hitting on shuffle until you find the idea that you want to design today and put it on the chat and we're going to build this today.

So this app, I was able to build in 15 minutes just for this call. And it uses chat GPT to just generate a random set of ideas. And then you're going to build these ideas today. And I'm sure after what you learned today, you will be able to build this in 30 minutes as well. The chat GP department be a bit tricky, but

yeah, if you've picked your idea, go ahead and paste it on the chat,

Now is you're going to see the wow moment, right?

So take your idea. I'm going to pick mine as well. Let me just go back to my, after so I'm going to make a goal setting app for aspiring novelists. Okay. So now go to v0. dev on your computer. I'm going to send the link here in the chat [00:09:00] again. So once you're in v0.

dev, let me share my screen again.

Okay. So if you go to v0. dev, and so to give a quick introduction to what v0 is, so VZero is by this company called Vercel, who built the framework that we are going to use. It's called Next. js, and this framework runs the majority of the web technology today, right? They are the biggest framework. It's it's what ChatDPT runs on.

And this is basically, it's so feature rich and it has a huge community support and so many contributors to it that pretty much anything that you can imagine it's possible on Visio. So we're set. So we zero being the next JS founders have this unique database that nobody has, and because of which they have, their model is so much better at coming up with uI ideas today as compared to so many, it's I don't know if you've heard about the problem with like pig mass designs, looking a lot like iOS stuff. It's because [00:10:00] a lot of their models are trained based on like standard iOS patterns. But now these people are in like, so it's such a different advantage because they have such more variety of data.

That they can train their models on that makes their platform a lot better, but we are going to use v0 only for conceptualization and to add all functionality and to design tweaks and stuff. We're going to use. That said, take your idea, put it on V zero. I'm just gonna so mine is saying design a goal setting app for aspiring knowledge in the style of a Victorian steampunk, right?

So you could just say this and just hit on into or if you want to say like additional things about like how you, the goal setting app needs to work. So for example, for me, I want to say. When I when I complete a goal each day it needs to celebrate with a positive message, right? Something like that.

So you can add your own like [00:11:00] things on top of it, how you wanted to behave or how you wanted to look and just go and hit enter.

So what it does is it goes and creates this. This code for it in the background and like it will, it already pre fills with, if you see some sample data of like how to celebrate things, you don't have to worry about the code, but then you can actually go and see that it tries some some part of what you like the feeling that you wanted it to create.

In this case, it was like a Victorian steampunk. I don't know how this is Victorian steampunk. If anyone, one of you in the call know how this is Victorian steampunk or what Victorian steampunk actually is. Please let me know. Okay. So if I go and say create goal setter read everything, for example.

Okay. And then, like, go to the gym, whatever. There you go. Look at this. Your words flow like the finest team from well oiled engine. [00:12:00] Isn't this cool already? Doesn't it like make you smile just by the fact that it's a working application and it just creates these fun things.

The best part is you can start from here and then you can add all kinds of functionality to it. You can change the way it looks, you can create more things to it. And I'm going to show you how easy it is.

now I'm going to show you how to take this and turn it into an application and then how you can build on top of it. So that's going to be next step. So yeah, look, so far what you have is V0 is the first starting point to build your application. So if you have any app idea you have.

Any web app that you want to build, you can start here. Say you want to build a web app for like creating bookmarks or like reading books or whatever, right? Start here. And then once you put over to cursor, you can do like lots of things. Okay. Let me share my screen back and I'll show you like how to go from here to.

To making an application out of it, right? So I'm hoping all of you have installed all the tools that I have [00:13:00] sent before and asked you to install because yeah, you would need that for the next step, right? So the first thing we need is to open like your terminal. You're on your mac So if you have windows, I think it's called Command line or command.

Yeah, it's called command line so You Open your terminal. So when you have your terminal open, you will start from any location. So this one, mine says my approach, like the like the root directory or the home. And within this I can go and say, and so this is a command that you need to type to create a next JS application.

So just say NTX. Create create, sorry, NTX create next app at latest. So what this does is it's a command to create a late latest next JS application, and then space and give a name for your application, right? Just that one thing to remember and giving a name for your application is that [00:14:00] it's not, you shouldn't use spaces.

So in my case, it's a goal setter app. So I'm just going to say goal setter, right? So you can use hyphen or a single word. So could you zoom in? It's hard. Yeah, sure. One second. Yeah, perfect. Thank you. Okay. So just type NPX create next app latest and goal setter. And what this will do is create your web application.

And within this application, we are going to bring this idea and build on top of it.

Yeah. So when I hit on enter, it'll ask me a list of questions. Just say yes to everything. Yes. Yes. Yes. You don't have to know what is what don't worry about it. The last one also just turn it to yes, and then just hit on enter and that will go and. Create create your application.

From here you don't need terminal anymore. If you're on if you're on max, just type open space dot. And what that will do is [00:15:00] open the folder where this Thing is stored. And if you're on windows, you have to say like Explorer dot, and that will open the folder and you will see the folder where this goal setter application was created.

Let's make sure you can see this application on your. On your window and what you have to do is now open cursor. Let me, so let me open a new window. What do you do, what do you have to do is open a new window in cursor. And once you have your cursor, just go and drop that folder into cursor.

So I'm going to take my goal setter and just drop it into cursor

So now I want to just give you a little. Explanation of how the project is structured, right? You need to understand the structure of the project. So when you're working on it, you know where to do what, right? That's all you need to know, but like the code itself, you wouldn't have to do.

So SRC stands for source. This is where your project main project lives, right? And then you have all these [00:16:00] pages. You like, you don't have to think so much about what's inside this, but the page dot TSX. Is basically the homepage, right? Everything that is going to be displayed on the homepage, when you run the application will be inside page dot ESX.

So that's all you need to know right now, right? Everything else are like, configuration files, things that the project needs. To configure, but we are not going to touch any of the configuration because AI will do it for us. So all you need to know right now is that page.

psx is where we will be doing most of our work. And so first thing we need to do is let's run this application and see it on the browser. So to run this application I'm going to go click on terminal and open a new terminal. So if you, I hope you can all see this when you open a new terminal on cursor

and in the terminal, you just have to type NPM run dev. NPM stands for node package manager, [00:17:00] and this command basically runs the application, that's it. You just press this and hit enter. And what that will do is just. It will start the application and it will create this link for you that you can access the application from.

So if you open this link on the browser, you will see a simple Next. js application that looks like this.

So this is basically Okay. Our web application. So everything that you see, as I said, on page dot ESX is displayed here, right? There are some like, things like, great flex. These are all like styling stuff, but if you scroll, if you just see here in the code, you don't have to understand everything, but you can see save and see your changes instantly.

This text is basically displayed on your browser, right? So save and see your text changes instantly. So basically everything. Here styled lives on this page. tsx. So if you like literally remove everything from [00:18:00] here, let me just show you you don't have to do this, but I'm just going to remove everything from here and just say hello world and save it.

And if I go here. It just like refreshes and just shows how to work. So you don't have to, you don't have to do this, but I'm just saying like how the page. tsx is what is being displayed here. I'm going to paste this side by side so you can see both on my page let me open cursor.

So what you can do is here you can hide the sidebars and keep your space clean. So I'm going to hide the sidebar for my so that we can do this.

And then what we're going to do is hit command I on your keyboard and that will open this thing for me. For some of you, it may open it at the bottom. Don't worry about it. But you will see something called as a composer. So for some of you, it may open like that. If it opens like this, what you can do is say open as a pain and then it goes and sits in the side.

Or if you don't want the site, you can just open it like this. It really, it's up to your taste, right? We want to [00:19:00] keep this composer. This is AI. This is you talking to AI. So we are going to be spending all our time in the composer and very little time on the code. So just make sure you're able to access this.

So you can tell AI remove everything on this page. Okay. And display a card with a title that says hello world and some text inside the card that says this was generated with AI. I don't know, like you could do whatever you want with it, right? So this is the part where you're telling AI what to do.

In text, and you're saying like remove everything on this page and just do this, right? Make sure you have Claude 3. 5 selected below because these are like models, AI models and of all the models, Claude is the best for programming. There will be instances where you'll use other models as well.

I'm not going to go too deep into models right now, [00:20:00] but just once you hit enter and say, whatever you want it to design, describe your design, like just Say what you would like to see. And when you see, when you just apply, it'll go and create all this code for you, right? So see if you can do that.

And when it does, I'll show you like what the issue is and like how to debug it, right?

So when cursor created something what you saw is that when this shows the red and you see this like red squiggly lines, it means it's, there's an error.

So when it leads to an error, you can always go back to the previous one and say, check out. And what that will do is just go back to the previous one. And when you hit on save, or you don't even like, once you click on check out, it'll go back to the previous screen. I'm going to touch on like why that error happens.

And we will get into that a little later, but for now let's not get into debugging errors. But for now, if you don't get any errors, great, just hit on save. And just like you should see the thing on the screen. If you land on [00:21:00] error, go back to checkout and then just try something else. Try a simpler thing.

Because right now what we are just learning is like how to interact with AI. And then we'll go into a little more advanced stuff

so now what we will do is we're going to bring over what we designed in V0 into cursor, and then we're going to around with it. You're going to make it, we're going to add more functionality. We're going to like, try to make it cooler, add the things that you said you wanted to add.

Let's do that right now. So if you go into v0 dot dev where you had your initial design. So if you lost it, you can go back to chat history and just open this over here. And once you have this, just go here, say, add to code base. Click it and just copy it, right?

Okay. So now that you are back in cursor, what you can do is look, one thing I want to clarify very clearly, right? So this is your AI composer is AI. [00:22:00] Remember that very clearly terminal is how you run your program and how you install new things, right?

Don't mix things up. So these, this is, these kinds of instructions are like installing packages to your code. Terminal is how you will speak in natural language. You will say, Hey, do this for me. Hey, do that. So once we copy this command, we are not going to paste it in. AI instead, we are going to create a new terminal.

You're going to press on plus here. This creates a new terminal and we are just going to paste that command and hit enter. That's it. What we are doing is right now, we are taking this code and putting it into our application. So again, just say yes to everything. Just select whatever, like it's just these themes.

Just say yes to everything. That's it. And it will just go and add this interface into your code. And that's all you need to know.

So what it did was it created a component. And within this component, it created this [00:23:00] page called as novelist goal setter. In my case, in your case, it would have been called something else, right? If yours was a planting application, it would have been called plant thing. If it's a habit tracking, it would have called habit tracker, whatever.

So what it did was it just took whatever code that you saw there. So if you see, this is the exact code that was that you can see here. So see this whole celebratory messages, this exact code is being imported here. This is inside components. You will see this. You will also see a folder called UI, but don't worry about it.

It created like multiple components. It created a component for the button and created a component for the card and whatnot, but you don't have to worry, go into these tiny details, but just know that. Just make sure your component is whatever you design is available here.

I'm going to open my localhost 3000 again. So currently my localhost just says, hello world. And yours probably say something else. Yours just says, maybe let me go back to what probably you have, right? Yeah, [00:24:00] just say it's a simple next year's application. So what I'm going to do is once I'm here, just make sure I'm in this component.

And I am going to go into my AI, and I'm going to say, hold on, let me just make this bigger. Yeah. I'm going to go into AI. I'm going to open a new AI, I'm going to open a new chat because I don't want to bother with the previous thing that I did. And I'm going to say, just bring this file, right?

So if, when I say at, I can tag files, so I can just say, bring novelist novelist goal setter, into. Page pages, the main page, as I explained where the home screen lives and remove everything else

from it. That's all you're saying. You're saying like, Hey, I have this component in my components folder. Just bring it to page and remove everything else. Pretty straightforward.

[00:25:00] Yeah. And once you say, just hit on enter and it will go make all the changes necessary. Don't worry about what it says. Just just accept everything. And the moment you accept, you should be able to see your application on the homepage

now is where you can start to explore anything you like, right? So just This is where you don't need me anymore.

Like now you can just go here and say change the yellow to a forest green make the background background into a purple forest, like feel, I don't know, just go get super creative. And when I just, yeah, I'm just gonna try this. Yes, William, sorry. I just need to see the the small command you gave in the chat so that you can take this to the local host.

I missed that part ahead. NPM run Dev? [00:26:00] No, not this like the final stage in the composer when you were wanting to take this on and onto the site. Oh, okay. So I said bring this conference. Yes. Yeah. That's right. Bring accurate this component, tag this component into page like got it. So you're bringing the component into page because page is where you're seeing the home screen.

You're bringing the component into page and displaying it, right? So yeah, see, there you go. So now I asked it to make the yellow to a forest green and when I accept it, you will see. See how quickly it was. It just refreshed. You can not only modify colors, you can add functionality, right? This is the part that like, now you can go crazy with this.

So for example I'm going to say enter my writing goal, right? So I don't know what it did. So I have this. So when I tap on enter, it says, okay, by [00:27:00] Joe, you conquered your request. So, okay. So now let's say I want to give a counter. So add a counter on top with the number of goals I create.

And okay. One thing you have to remember is try to have one task at a time. If you add too many things, the light, the likelihood of it creating errors is more. So just try to add one task at a time and accept it. And there you go. See. It went and created this one goal created and you could just change the position of this, change the styling of this, do whatever you want with it.

So now this is basically like your Figma, but you have your, you can just work with it with text and everything will work.

Then while I was doing this, you guys were talking and I, So I heard that you said that we need to open a new chat with the [00:28:00] composer according to the topic. And then while you were saying that I saw this thing here called problems. Do you see cursor right now, by the way? Yeah. So you can just go to your cursor and just say fix my errors.

Just go into the chat. Yeah, just say fix my errors. Because you have some errors, that's why you can see all red on the top.

Just give it a second and it'll go fix it. It's just like one of those minor things you just have to keep doing once in a while. Okay. But how do we also, how does it work with the new chat? Like I just click plus here. Yeah. Okay. And just to understand for example, right now I was editing the star map section.

So if I want to edit this star city skyline section, for example, would that require me to open a new chart? Is that how it works? Yeah. Whenever you want to make a new change, open a new chat and just tell fix this part. See the advantage [00:29:00] of opening a new chat when you're, when you read something that you're okay with, when you like, you wouldn't go back in history.

Then you can start something new and then lay around with a few options. And then like, when you're done with it, you can always like go back in history. How do you go back in history? So if the one that I was telling Dan, which was just like, see, when you'll see a thing called checkout if you scroll up inside the composer.

Oh, here. Yeah. Just keep scrolling up. And before you type a command, see the star should align with the constellation. Before that, you see a checkout. Oh, yes. Yeah. Okay. When you click on that checkout, it goes back to that, the state it was before you typed it. Oh, okay. So you can take back what you did if you don't like it.

So if you see an error, go back, try something else, make the prompt better. Okay. And until you get the right shot, so usually the reason it throws in errors because it assumes some stuff and then when you try a bit better, it [00:30:00] understands better.

So this is basically all the skill that you need, right? Just keep building on this and keep playing around with it. If you land an error, check out, go back and try building it. So this is all you need to come up with your own idea as well.

Okay. Let me talk a bit about some common types of errors, right? So usually your errors is just. These kind of errors, like when you land into errors.

First error is the build error. So this is basically, this happens because how Next. js works is there's a part of it that works on the client. A client is like on your browser and a part of it that works on the server. The server. Is where you would store like sensitive stuff. Like for example, if you have an API key or like you, you're doing some calculations that you don't want people to see, you put it on the server and stuff that you would do it on.

The client is just like simple stuff that anyone can see. You don't have to worry about this, but when you like for most of your use cases, you're not going to use all the sensitive, you're not going to go into backend stuff and all. So just make sure [00:31:00] if you get this thing, all you need to do is say, use client at the top of your page.

You can tell a I to do it. Sometimes I might not figure it out. But you can just type this use client on the top of your page and you should be good to go. Like this, like you see on the top, right? This is all. If you mention this on your page, this error will go. The second type of error.

Very, I tried, like I've used this so many times I tried building so many things. It's usually these errors that you get. You won't, you don't get any of that, right? The, so if you like learn how to fix these errors. You have the power to like, just keep building anything. The next thing is the package not installed.

So when you're like, let's say in Dan's case, you added a bounce, right? Sometimes what it does is it uses a library to create this effect and you probably would not have installed the library. So then you will see these squiggly lines, which says which on this package and it says then your application will break.

So when you see this squiggly lines. It means that this package is not installed. So all you need to do is say go into your [00:32:00] terminal. I say npm isensor install and then the package name. So in this case, it's framer motion. So I would just say npm i framer hyphen motion. You don't have this error now. I'm going to send this to you later in case you land into errors.

You can just refer to this. The third error you get is not imported correctly. So what this would happen like, if you see there's like this path, so it starts from at UI components, forest goals. So sometimes this is incorrect. It would not have read the right place where this forest goals.

Folder file wasn't. So even that happens, like you can just see the squiggly lines and understand. Okay. So maybe it's not getting it from the right place. So just see where it is in your folder structure and updated and you should be good to go. Look again, try first thing, try to do it with AI. Just say, Ask error, fix errors.

And if it doesn't, then try to find, if it's one of these five errors and you should be good to go, just tell ai, import my file from the right place. So you just tell AI that, [00:33:00] okay. You just identified that this is the import error. And just tell ai, look, my file is here. Just import the file.

The last one, this is. This is, I think one of the most common one is like TypeScript errors. TypeScript is just like AI's way to is this a better way to write your code that, when future people come and see, they understand how your code is written. You don't have to worry about this, but know that TypeScript is error is a common type of error.

When this happens, you just have to say, fix my TypeScript errors. So how do you identify a TypeScript error? You will see in the error argument of type. Something is not assignable to parameter of type something. So the moment you say type. Just say, fix my TypeScript errors. This is another these are like hacks I can give you that will avoid making any errors.

And, yeah, that, with that, I think you would other, what other common errors? Make sure your file is tagged so AI has access. These are like mistakes that you might do which is not necessarily what the AI is. So if you have a problem, go check out the previous version, like I just explained it to Dan.

Thank you. [00:34:00] And try again with a different model. So let's say it doesn't figure out after you tried two, three times, right? So you selected clod 3. 5. So try charge a PT photo or try another model, so try change it on the model and see if that figures out. But for most cases, I should be, I should figure it out or just break down the task into something smaller and I will figure it out.

And then you can, if let's say none of this works, you can go into the AI chat, which is like the option next to composer. And then ask ask AI, like, why did this error happen? Explain this thing better, right? So then it'll help you understand what the error is. So the more you learn and understand, the better you'll get with the skill

The one thing that I want to say is now that you're learning All the skill, right? You're learning something new, right? Try be the first to share your work, go put it on LinkedIn, right? Go share. If you build something cool, go share it. Like just say, look, this is what I made with cursor.

Look, this is you have the unique opportunity to be able to make something that others are still. [00:35:00] Not exposed to or not haven't got the time to try out right now You have this like superpower where you can create things anything you like so use it to your advantage because When you start doing this now, you'll get so many like so many views on your profile And trust me like after i've been posting for the last three weeks.

My linkedin is just exploding like Try to use this to your advantage and showcase what you can design, right? Don't worry about try to come up, design anything, like even this neon thing that you have, right? Share it. Just be like, Hey, look what I created. This will create, this will do a lot of this video, give a good impression of that about you, that you're trying to explore new things.

And you're trying to design new things. And you're trying to exploring your creative side of the web. These are all great things to have in your personal brand. Look at these people, right? These are like very fair people who have a lot of followers who these are like founders of this case study club.

Look at the thing. I shipped this thing in less than two hours. And then they put a post on this about like how they made this, right? The plan, the idea in Figma, turn it into a code component using V0 and made [00:36:00] it functional with CursorAR, right? So do this, right? Start to show what you make.

With this, I don't know if you all know Mengtu. Mengtu is he created this thing called DesignCode. io. It's a huge platform full of like design and code tutorials. And see, look at this, like he made like a whole thing with cursor about like how to speed up your keyboard workflow and he made a whole video editor out of it.

And look at this, I constantly get impressed by how far I can take concepts into a functional component in just a couple of hours. And normally I'd spend that amount of time designing in Figma. Now I skip Figma and go directly into code. Designing code is back and I love every minute of it. See, the possibilities are endless.

And now you've just started. Now you're in your learning journey and every, like every time you make something and you share it, your skills are going to get better. And as you keep trying something new, it's only going to get better. And you're going to get more familiar with working with AI. And then I don't know build any kind of tools, right?

Get a freelance job and then just build the whole software and charge 10 times the fee

And the last message that I want to say is [00:37:00] build your personal brand and started today, just keep posting online. Like position yourself as someone who builds creative things that is not very easy with AI use a combination of things, use mid journey, use like so many cool animations.

I don't know if you've seen there's lots of very fun things that you can do. I can show you another example of if you've seen matter JS it's like. Show you this thing. So it's like a 2d physics engine library. I actually made a tutorial on this on my YouTube channel as well. So literally you could make these things and put it on your website and all you need to do is just tell AI, Hey, use matter JS and create this exact same thing, and then go tell AI Hey, change the shape of this to like something else, instead of circles use, I don't know, apples or oranges, just, you can go get creative with it.

Look at the number of examples you have. Like you have such cool stuff that you could do. And they are completely interactive. Look at the stress thing[00:38:00]

and you have access to all of this. Can you tell me one prototyping tool that gives you ability to prototype all of this? Like you have all this, just use it. That's the main point I want to make. Yeah, that officially concludes the workshop

Any questions?

One thing, like I got this error built or build error, and there was, it was already mentioned you client, whatever you said. It was mentioned in in the culinary hunt tab, I mean in the app tab. But then also it still shows build error. Try to read on it and save, and maybe there are other errors as well.

So check where the, these like squiggly lines or like errors are . If not, go back to the history. And try a different prompt. Go back to the state where you had like it working properly and then try a different prompt.

It possible to use this for native apps, for example, because right now it's responsive. Yes, it's absolutely possible. But you need a little time and familiarity. With this [00:39:00] before you move into native apps, because if you were to build native iOS and Android applications, you would use react native for which you need a little more understanding of a little more familiarity of using cursor and the, and like working with this tool, then once you get familiar then I can do another course on like how to build apps with it.

I will also I'm also starting to make it on my YouTube channel, but. But for now, I think this is a good skill to start making web apps within let's say you make 5, 10 apps, you will get pretty comfortable with it to like pretty much I don't know, build a web app for generating AI stuff, images or something like that.

See if you can get your skill up to that level and then you can start building apps.

Hey, Lina. I want to know if there is a way that you could take a design made from Enfigma and you can create an app either by putting the image in V0 or directly on, on the TypeScript. Great question. Yes, you can. You can just you [00:40:00] can just copy your design as a PNG. Okay. Put it in Visio, just paste that image and just say design this for me.

Sometimes it may not give the exact same design. It will give something like something approximate, but if you follow the exact same process that I showed you right now, just bring that design into next years and use composer to fix everything else. And you can like pretty much have your Figma designs into a working application and you'll all be done.

Okay. And for example, importing images, that's also in VO or you do it. I don't know. In cursor importing images, all in cursor. So VZO is just like. It's the first concept, right? So if you have a sketch, bring it to V0 and create the first version and quickly bring it into cursor and then continue from cursor.

V0 is not V0 is not where you keep adding, keep adding things, so get the first version out in V0, quickly bring it to cursor and everything else should just happen in cursor. Okay.