Create DESIGN PROTOTYPES using your Design System

— Everyone, hope you're all doing well. Welcome back to another video on the channel. Now, this is the third part of a 4-hour long video that I released on my channel, which is all about creating AI-powered design workflows. Now, if you want to check the 4-hour long video, go ahead and check it out. Link will be in the description. But, in this video I'm going to focus specifically on helping you understand how you can take what you have in code and create interactive prototypes with it. And not just about creating prototypes, but also helping you understand how you can actually set an ecosystem and work collaboratively with your teammates. We're going to teach you how to use GitHub, branching, hosting, and a lot more things. I'll also show you how you can create a playground for you and your designers. Now, there's a lot to cover in this video, so without any further ado, let's get started. Which is great. Now, we're

going to move on to phase six, where we're going to build the rest of the template, which includes the side panel, the filters bar in code, so that we can reuse it to prototype workflows. So, here's what we're going to go ahead and do. Now, I'm to CloudCode, and I'm going to open up a new conversation. And over here, I'm going to go ahead and choose Opus here again, set this to Heim, and I'm going to say this. Let's move on to build the next phase. And in this phase, what I want you to do is take the template file and build that in code. That template file is going to have the sidebar navigation and the filters. All right? And I'm going to go ahead and give it the design of the template over here. So, I can actually delete this one. We don't need this. And then I can copy this, command L to copy, and I'm going to come here and paste it over here. The goal of doing this is so that we can upload all of this to GitHub, and other designers can make branches from this, and create interactive prototypes on their own branches. All right? And we're going to go ahead and make a plan. I'll say, uh let me know if you have any questions. All right, so we've got some questions. So, um, let's go ahead and answer that. So, it says the Figma slot template is empty. What should we render inside it as the default content? So, the plain email list render a clean list of email rows directly, remove six preset dropdowns from the playground. Cleanest match to Figma, least noise for designers branching, and an email list plus dev only preset picker. Plain list by default keep the preset switcher behind a flag and a small dev button in the sidebar footer. You keep both production view and the playground tooling. All right. And keep the email preview as it is, right? So, I'm not exactly sure what it means. So, I'm going to go ahead and say I do not understand the options. Can you elaborate? All right. Now, I have a feeling that it is actually trying to combine it with the skill where we create those list of emails in Figma because ideally want this to be quite separate. All right. So, I'm going to go ahead and ask it to explain the options over here, and then I'll say next. The existing sidebar uh, theme from phase three lives at the top of the page. Where should it go now that the template has its own top bar? So, I'm going to uh, ask it to do like a keyboard shortcut. So, bind to a key like T to toggle. Zero visual footprint matches Figma exactly and designers discovered via tooltip or a readme note. All right. So, I'm going to go ahead and uh, just do a shortcut over here. The user profile shows a small um, avatar circle. How should it be rendered? So, here we can say a static gradient, no image matches the Figma visually, uh, a pink magenta blob, no files to manage. So, this is uh, fine. And uh, we let it do its thing. Okay, I get what it's trying to ask. So, it's saying we built this playground where we have those six filters on the top which was unread emails, read emails, emails with labels. Basically a showcase for the email row component. Now that the template has its own header, filter bar, we need to decide what actually fills the content below the filters. The question is, keep the drop-down visible, hide it, or drop it entirely. What I'm going to say here is the email playground that you created does not have anything to do with this. Build a new page specifically for the current task and leave the email row preview playground as it is. Is this something that we can do and is it a good approach? And I'm going to go ahead and run this. Okay, so now we have the plan. Let's go ahead and quickly take a look. So we're not going to be creating the inbox template in code. All right, so phase one and three delivered the notion email row component plus an interactive preset playground. Phase four adds a separate standalone page that translates the Figma inbox template into code and a top section wrapping the head authored inbox style email list. That's fine. So, why a new route instead of replacing with a slash command? So, so now it's going to go ahead and have this new URL, which is slash inbox, which is a clean starting point for designers which they will fork from. And no preset selector noise and no state leaking into the road demo. So there's going to be like a separate thing. Once pushed to GitHub, branches can build interactive prototypes, active navigation routing, filter drop-downs, detail pane menus, composition workflows on top of the inbox without the playground's presets getting in the way. So this is totally fine. Then it has the Figma source, the template structure. All of this is fine. Uh there's a nav menu spec, so it's obviously going to have to build all of this. There are tokens that are there, so it's going to have to build all of these components. And uh all the decisions were also considered. And there's some code over here. We can ignore this and critical files to read. That's okay. Implementation steps. Um all of this is okay. So let's quickly take a look. So it's going to uh inspect all of that. That's fine. It's going to add the icons, adding spacing, add spacing tokens if needed, add the items. All of this is okay, all right? And then we're going to And then we'll obviously preview it. And there are a couple of things that are out of phase four, but we can ignore this for now. So, let's go ahead and just, you know, accept and allow edits and let it build it. And then once with that's done, we can review it and then make any changes if needed.

All right. So, as you can see over here, it actually built everything and this looks pretty good. I'm going to go ahead and just actually copy this entire thing and maybe actually go to my browser over here and come here to the browser actually and I'm going to go ahead and type in this and I type in inbox. All right. And now you can actually see that we have this interactive website exactly how we want it. And it looks very similar to the design as well. If I could show you a version of that over here that it made, it looks very similar to what we have over here. It pretty much got everything right. I think there are a couple of tiny mistakes here and there that I can see. I think the icon here is a little bit off, but apart from that, everything else looks really good over here, right? And of course, these are interactive and, you know, they work exactly how they should, but they don't have respective URLs, so this is just like a fake prototype. But you can see here all of this really works perfectly fine, all right? And I can also right click and choose inspect element and then I can reduce the size of this and you can see things would, you know, rescale as it should. And this one, if you remember, is supposed to take 16% viewport width and that's actually doing that now. And we have this here we have these labels also moving. So, this is actually looking pretty good, right? And one thing that I want to do here is when I'm hovering on a item, I just want to see the checkbox for that item and I don't want to see it always, right? So, if I click on this, you can also see that we have like a click state and I can click multiple times. And of course, I haven't really set up the interactions from what would happen over here, but I think this is looking pretty good already. So, I'm going to quickly go ahead and come to Cloud Code. I'm going to say, "This is great, all right? " Um I d- I need you to make one small change. Show the checkbox icon only on hovering a email row, all right? And I'm going to go ahead and run that. Now, we're already out of context over here, so I'm going to quickly change this to Sonnet and probably set this to low effort because we don't really need so much brain power. And we're going to do this, and hopefully that reflects here as well. So, the checkbox icon would appear only when I hover on an email row. All right? So, it's done it, and now you can see here that the check mark appears only if I hover on a row, and this works perfectly fine. So, this is looking pretty good, and if you check here on the main browser as well, we have it over here, and this is incredible. This is pretty amazing, all right? Now, of course, the goal here is to sit down and actually build this entire prototype yourself so that you have like a starting point of how a real product looks like, and then you can start creating branches off that, and then from these branches you can then start updating and making changes to the prototype as the way you want, all right? So, let's go ahead and upload this to GitHub so that we can then branch from there. Now, one of the

things that we need to do before we start uploading things to GitHub is to make sure that our project file has everything it needs so that when somebody else downloads it, they shouldn't get into any problems. So, one of the things that I've done here is I've created two new folders called as {dot} agents and {dot} cursor. Now, what this basically means is that if I open up Cloud, we basically have the skills file. And we want the same skills file in {dot} cursor and inside {dot} agents as well. Now, why do we need to do this? The reason is because if your team members or anybody else is actually using different IDEs like Cursor, Cloud Code, CodeX, or Anti-Gravity, those tools should still be able to identify these skills. So, here I'm in the Claude Code documentation, and if I come down to the skills section, all right? You can see here it says, "Where do these skills actually live? " So, we have multiple places where you can do this. Now, enterprise we're going to ignore. Personal is what we are working on. So, for example, you can see here that it says. claude /skills, all right? And then you have the skill name, and then the skill. md, right? Now, what this means is that this folder has to be called. claude, and if it's inside a project this is actually personal, which means it's for all projects, and this is project, which means it is individual for your project, all right? And so, if you if somebody needs to use a skill that was created in another tool, like Cursor or CodeX there have there has to be another folder called as. claude for Claude Code to actually recognize that. Now, this is Cursor. Now, if I come down to Cursor it says we can store them in two locations, and we could either call it. agents/skills or. cursor. skills. It also says here, "For compatibility, Cursor also loads skills from the Claude Code and the CodeX directories. " So, even though we have created a project inside Claude Code, that those skills will be recognized by Cursor. And similarly, for CodeX, we would have a. codex/skills. But, if you created something in Cursor Claude Code would not be able to recognize that, because Claude Code can only recognize it if it is in the. claude file. Now, moving on to CodeX. Now, with CodeX you can see here that we have again pretty much the same thing. So, you can see here it says, "For repository, the CodeX scans. agents. skill in every directory you're working on and use that. " And if you have to take a look at Antigravity, Antigravity also follows the agent skills. So, you can see here it says. agents/skills, and this is essentially the skill folder. So, in order to make sure that nobody runs into any problems when they download the project what I've done here is I've basically taken this folder called skills and just duplicated it into. agents, and duplicated it into. cursor. That's about it, right? That's the first thing that I've done. Now, the second thing that I've done is that I've actually removed the plan folder that we had. And I also brought in this skills from this file. So, before the skills were over here, I brought that from there and I brought it over here because this folder is where all of our code is. So, it makes sense for the skills also to be inside this folder, which technically means that we don't really need any of this. And all we can do is we can directly open this project in any tool of our choice and start using. We don't need to open Figma workflows tutorial. We probably have to open Notion mail components. That's the second thing. Now, the third thing is agents. md and claude. md. Now, what these two files are, these are essentially files that the AI agent is going to read in the beginning of every single conversation. And it's going to have certain important information that sort of gives context for every task that it tries to do. Now, for example, one of the things that you see here is that if I go to markdown file or maybe in the preview file itself, it has a couple of details of what this project is about, some commands, some code architecture. And the thing is that we don't really have to sort of know any of this. If you do, that's great. If not, that's also totally fine. Now, we also have this thing called as the claude. md. Now, if you see over here, claude. md and agents. md are pretty much the same thing. It's just that Claude will read claude. md and the other IDEs like antigravity, cursor, and codex are going to read agents. md. That's just how they work. And when Claude is actually reading claude. md, it's going to see that is this folder called as agents. md. So, Claude is going to open this folder, read this, and see that it's actually called agents. md, and then it's going to find agents. md and read all of that. Now, the benefit of doing this is that all we have to do in the future is just keep updating agents. md, right? Or else if we have the same duplicate over here in claude. md, we're basically going to have a case where, you know, it might be outdated information either of these files. So, in order to keep things simple and to sort of link them, we basically say agents. md and in agents. md we have all of the details over here and then in cloud. md we just tag it over here. Now, how do you actually create these files? The answer to that is actually very simple. Now, if I come here to cloud code, what you can do here you can type in {slash} and type in it. This basically see says that it will initialize a new cloudcode. md file with the code base documentation. So, what I did was I went ahead and ran that and then it updated the cloud. md file and then I copied all of that, pasted that in the agents. md file and then in the cloud. md file I just added this piece of text which refers to the agents. md file. That's about it. It's as simple as that. Now, that's how you want to go ahead and set everything up before you go ahead and start publishing things to GitHub. Now, the next thing I want to talk about is how the folder structure works inside of Next. js.

Now, what we can do over here is that you can see here that when you use Next. js, the files are structured is actually super nice and super interesting. So, for example, over here you can see that when we have to design a particular screen, each screen is a particular folder. So, if I come down here to cursor and I open this up and if I come down to the source and the app, you can see here that for every page we have a particular folder. So, the inbox, which would be {slash} inbox, all right, whatever the website is {slash} inbox, would be over here. All right? And if we have a settings page, that's going to be another folder and promotions is and inside inbox you could have another folder which would be basically, for example, inbox {slash} something else, right? And so, depending on your URL, the folder structure is also going to fit in very nicely, so it becomes very easy for you to build your entire website, all right? So, that's how this is going to work. Now, in order to test this, let's go ahead and go to cloud code. I'm going to open up a new conversation, all right? And we're going to choose sonnet maybe we just set low because we don't need too much brain power. So, I'm going to come here and say, "I want to create a new page from for the promotions tab. Can you create a promotions tab and also pre-fill it with mock emails that are contextual to promotions? " So, let's go ahead and run this. All right. So, as you can see, it created this promotions tab. Now, if I click on inbox, you can see it should open up the inbox, but um I guess this is not working, so we need to fix that tiny issue. But, before that, let's come back over here to cursor and see how this looks. So, now you can see that we have this tab called as promotions and everything regarding promotions is going to be there. And this is how all of this is actually going to work. Now, I'm also going to open this up in my browser to make sure that everything is working fine. Now, I'm going to go ahead and also check this on my browser, so I'm going to go ahead and just copy this entire thing. All right. And now, as you can see over here, I'm in the promotions tab, and now this is how it looks. When I click on inbox, now it doesn't change, but if I come here to the URL and set this to inbox, then you can see that it changes. So, we essentially need to tie it up. So, I'm going to come here and go to cloud code, and I am going to say, "When I When I click on the sidebar navigation, inbox should take me to the inbox page, promotion to take promotions page. " All right. And I'm going to go ahead and run this as well. This is going to be a small fix. It's just going to add a link between them. Now, you can see here that when I click on this, it takes me to the promotions tab, and here inbox tab. Now, there's a small issue where that this is now hugging, and so we need to make sure that the inbox and promotion tabs are essentially taking up the full width. So, I can just take a quick screenshot of this very quickly, come over here, and I can say that paste that over here. As you can see, the inbox and promotion tabs are not taking up the entire width of the sidebar. They are hugging, but they should not hug. All right. All right. So, now you can see here it's uh moved it towards the end and uh this is how it works and this is how you actually build out your prototype and give designers essentially a starting point. All right? All right. Now this is done, we can finally upload this to GitHub. Now what you want to do here is you want to come here to GitHub.

Now I actually have a video on my channel all about GitHub. It's an extremely important concept to know if you're actually building things with AI. Now GitHub can be an extremely complicated thing, but it's actually really simple and that's what I've done in this video. In this hour-long video completely broken it down into small pieces and try to explain it in very simple ways. So I highly recommend that you check out that video if you don't know how GitHub works or you want a much better solid understanding or even if you haven't watched that video. Now this is my personal GitHub, but what you want to do is you want to get access to your company's GitHub repo and that they're going to have all your various apps and projects. And so I just have a couple of ones over here. I'm going to go ahead and click on new. All right? And this is basically creating a brand new repository. Now essentially, this is where designers and engineers and PMs are going to download the project that we have been working on so far. So for now I'm going to go ahead and call this as AI design workflows. All right? Now you can call this really whatever you want. All right? It doesn't really matter. All right? And then we can add a description if you want. You can do this. You can leave this. Now here we have choose visibility. Now when you're working on a personal project, you have only two options which is public or private. When you say public, anybody on the internet can download this. But when you say private, only you can access it and nobody else in the world can access it. Now when you're working in your company's repository, you would have an option so that only people within your company can actually see it. So you want to turn that on. Now because I want all of you to have access to this to check out the files, I'm actually going to go ahead and set this to public so that anybody can actually see it. All right? And I'm going to actually going to go ahead and call this demo as well so that we can have AI workflows demo. All right? Now we can ignore this. We can ignore this and we can add we can set no license as well because, you know, you're not really selling anything, so that's fine. And then I'll go ahead and say create repository, all right? Now, once this is done, it basically creates this super empty folder for you, all right? And this is where your entire code lives. Now, what you want to do here, you want to come over here and click on this link. This is essentially the URL for this particular project. So, I'm going to go ahead and click on this, all right? And then come down to Claude, and I'm going to say, "Can you publish Can you publish the entire project to this GitHub repository? " Now, this is going to take all those files and then upload it on GitHub. All right. So, now you can see here that it also checked if there's any sensitive data, and everything was fine, and it committed pretty much everything, all right? Now, you can see here that it skipped this section called as node modules, which is essentially this part over here, and the reason we don't need it is because anybody else using this project will have to install this by themselves, which is something that we can talk about it later on how they would do this, but for now we can ignore this, right? So, now if I come here to GitHub and I press a command R to refresh the web page, you can see here that now all of this is completely done over here, all right? And you can see that we have all the fonts, files over here. If you click on source, you can pretty much see everything that we need, and this is how all of this works, all right? Perfect. So, now how are people going to download this? Now, what they're going to do here is they're going to come here to code, and they can click on this link, all right? And then they can just give this to Claude or cursor or whatever, and then ask to download all of this project file. Now, that's one way. The second way to do here is just to click on download zip, and it's going to download this entire project for you, and that's about it. It's pretty simple and straightforward. Now, before we talk about how other people are going to use this, let's talk about how you would do this because when you are going to update certain things, how would you actually do it? So, what

I'm going to do here is going to come down to Claude code, and what I'll do here is I want to create another tab for socials. Now, what's going to happen here is that if I, for example, come here and create a new session, I'm going to come here and say, "Can you create a new GitHub branch for this project? And in that branch, can you go ahead and create another page for the socials tab and add relevant emails considering how it would look for a senior product designer? And then also make sure that the navigations are linked. " All right? So, and I'm going to also probably going to set this to high pretty quickly. And now, what this is going to do is that it is going to essentially create a duplicate of the project. Now, if you don't know what I'm talking about, I highly recommend you to check out that GitHub video because all of that is going to make sense. But, I'm actually showing you the process of what you would do as probably the owner of this project if you need to make any changes. All right? All right. Now, you can see here that it's done all the changes. Now, ideally, what's supposed to happen is that you are a supposed to see which branch you are currently on. For example, here it says that we are supposed to be on this branch called as the feature socials tab, right? Now, this {slash} doesn't really mean anything. It is the whole thing is the name of the branch, all right? This is not like a URL. It's just that it could be called socials tab or feature socials tab. They've just put a slash. So, this {slash} doesn't mean anything. Now, the problem with that is that repo is actually initialized over here inside Notion mail components, all right? So, if I come down over here to custom, you can see that it is actually initialized over here, right? Which is why we're not able to see which branch we're on because we are currently in this Figma workflows tutorial, right? But, the repo is actually initialized over here inside this folder. So, what I'm going to do here is I'm going to come over here to click on new session. And this time, instead of this, I'm going to change this working directory. And over here, I'm going to go ahead and click on this and then choose this project file and then say open. Now, once we do that, you can now finally see that we have that GitHub repo, all right? Now, when I click on this, you can see that we have these two branches. One is the main branch, and then one is the feature branch. Now, I'm going to show you the difference between this. So, if I come down here to Cursor, I'm actually going to go ahead and open up a new project. So, I'm going to come here to my workspace, click on open folder, and then open this up, and then choose Notion Mail Components, and open that up. All right? And then we can close this. And now, I can open the sidebar over here. And actually, we need to change this again to Notion Mail Components. There we go. Right? Now, you can see here that the branch says the feature socials tab. All right? So, when I come here to the projects, and I click on the source app, you can see we now have the socials tab. However, check this out. Right? We're in the socials tab. But when I come here to Claude, and what I do here is I'm just going to go ahead and, you know, just type in hello over here. All right? And I'm going to say, "Which branch are we currently on? " All right? You can see here that it says, "We are currently on the socials tab branch. " All right? Now, when I say, "Can you check out to main branch for a second? " All right? It's basically going to go ahead and show what we have on the main branch. All right? Now, here, it says we are on the main branch. So, now if I come down here to Cursor, you can see that now the branch has been changed to main. And then when I click on this project, we don't see the socials tab anymore. So, what we're going to do now is we're going to say, "Can you go back to feature. socials branch? " All right? And so now, we basically change back to the branch that we were working on. And this is how you're going to make your changes. All right? So, now, once this is done, we need to now upload this to GitHub. But how do we do this? So, now the first thing you can see here is that under source, all right? If I click on this, and I click on apps, for you can see we only have inbox and promotions. So, what we're going to do here is we're going to say "Can you push this to remote? " And a remote basically means you're publishing it to the cloud, all right? And then open a pull request, all right? And this is APR. Now, I'm going to let it do this and we can basically just go ahead and uh choose um Sonar Cloud here. And what this is going to do is that it is going to upload this to GitHub and this allows anybody to actually review the any code changes that are happening, right? So, another person actually has to review this. But in this case, you can do this yourself because you're a designer and you're sort of technically the owner and this is not really affecting any real code, right? And this is just so that you can update something, all right? So, now you can see here that it says the PR is open and you can come over here and go to pull requests, all right? And over here, you can see that we have this thing called as a pull request, which essentially if I click on, you can see here that it says "Design Pilot wants to merge one commit from this branch into the main branch. " Now, if I click on the checks over here or essentially the files changed, you can see that it actually tells you what are all the things that was changed. So, for example, over here, we have four files that were changed, which was the entire socials folder and you can see the entire code that's written and then in the inbox page, there was this additional line that was edited, which basically now adds this link, all right? And href basically means a link. And that basically takes you to the socials tab when you click on it, all right? So, now once that is done, what you ideally want to do here, now I have some other tools over here that are basically AI code reviewers and we don't need to cover all of that right now because there isn't actual, you know, any complicated code over here. This is very simple stuff and I don't really need to wait for it to finish over here. What I can do is I can click on merge pull request and then I say confirm merge, all right? And now all those changes are now available in the main branch and everybody can actually now access that main branch and get the latest changes. So, if I come down here to the code section, you can now see in source, we can actually go to app and then now you can see we have the socials tab over here as well. All right? And now when people can actually download this again using a function called as Git pull, and don't worry about this if you watch the GitHub video, all of this is going to make sense, and they will have the latest design for this. Now that this is done, how do we actually show people and give access to anybody else a working prototype of this? Because every time we are actually looking at prototypes, we are doing it on our local host over here. Now, the reason this is not working is because we need to come back down to cloud code, and I'm going to open up the terminal, and here I am going to say npm run dev. All right? And this is basically going to open that up for us. I'm going to go ahead and just copy this URL. I can come down to Google Chrome, and then we just paste that over here. All right? So, now our prototype is working. Now, the problem is and actually go ahead and say inbox. All right. Now, the problem with this is that this is only visible on my computer because the files are stored on my device. And if I click on socials, you can see it takes me to the socials tab. But how do I share this with someone who is sitting somewhere else and they can open this. In order to do that, we are going to have to now host this somewhere. And we are going to host this on Vercel. Now, you can use any hosting platform. You can speak with your engineers and see what works for you, but we're going to go ahead and host it on Vercel so that anybody can actually access this. So, let's go ahead and set that up in Vercel.

So, here I am in Vercel and this is my personal Vercel account where I host some of my projects, and you want to speak with your engineers and figure out where to host it. Now, what I'm going to do here is I'm going to come here to add new and I'm going to say project. Now, on this page, what you want to do, you want the project to be set up with your GitHub repository. So, over here, we have this AI design workflows demo that we created. I can actually just import that and then you get this project window. Now, if you don't know what to do here, you can just basically ask AI to help you out and it's going to really do that, but this is a very simple project, so there's no really rocket science over here. I'm going to come over here and say deploy. And what this is basically going to do is deploy this so that it gives you a actual website where you can host this and anybody can have access to it. All right. So, now you can see here that this is finally deployed, which means that you now have this website URL that you can give to anybody in your company and they will be able to access it on their browser even though they don't have the project installed. So, this is the URL, which is the AI design workflows demo. vercel. You can click on that and once you click on that, you will get an actual website that anybody in your company can access. And if I come here and say {slash} inbox, right? Now, that opens up this inbox page and I can click on promotions or socials and it basically works like a real prototype, right? And you can build this prototype as much as you want. And this is going to be an actual highly polished prototype that you can give anybody else in your company or your team, right? So, hopefully all of this makes sense. All right. So, now, you can see here that we have this new toolbar, which is what we wanted. The tab that we are working on is called as the feature social tab and this is obviously going to be merged to main right now and you can see here that it is actually merged. All right, so it's basically showing which branch was merged. Can you check out to main and pull the latest changes. All right. Now, what this means is that we are now going to go ahead and bring in all those changes back to our main branch because the main branch was the one that was quite outdated, All right? So now if I come down over here you can see and so now you can see that the now main branch has the latest changes which is the social stabs are now merged. So now if I come down here to cursor and I click on this you can see here that we're now on the main branch and the main branch now has the social stamp, right? So now everything is properly synced. So now let's say you want to go ahead and create a prototype. So now for the sake of experimentation, let's come here to notion mail and what we're going to do here is we're going to come up with a simple concept where when I hover on each of these emails it randomizes the color of the hover state. All right? So let's go ahead and just play around with this concept and see when we prototype it how does this actually look. All right? So what I'm going to do here is going to come down here to cloud code and we can stay on the same branch that's totally fine. I'm going to go ahead and set this to probably high. And I'm going to come here and say I want to experiment a simple hover state. So let's create a new branch and work on that. What I want you to do is randomize the color of the hover state as I hover on emails. Pick between five to six colors and just randomize them. All right? I'm going to go ahead and run this. So basically what would happen is every time we hovered on this it would just change from gray to purple to green depending on the element that I have it on, right? We're just trying out a simple fun experiment. All right? So it now went ahead and made those changes and now we're on this new branch called as the feature random hover colors. If I come down here to cursor also you can see that we are in that branch which is the feature hover. And you can see that it's showing you all the changes that it made which is different from the main branch. Now how do you actually see this is now because you are running this on your computer you want to check this on localhost. So if I come here to my browser I have my localhost over here and now as you can see here it's not working, but there seems to be a mistake and it actually did it over here. [snorts] And so now, we have this weird randomization and you can see that the colors are randomly changing. So, let's say you're trying to do some sort of a Christmas campaign or something just to have some fun, you can go ahead and prototype this. You can get it like this and you can test out the prototype yourself. Now, here's the question. What if you want to show this to somebody else? So, what we're going to do here is in order to show this, we have one option. So, the first thing I'm going to do here is going to come down to Claude and I'm going to say, "Can you push this to remote and create a PR? " All right. Now, what we actually don't want to do here is we don't want to merge this to the main branch because this is just a prototype, all right? And this prototype could be rejected or we are just playing around and experimenting and we don't want it to affect the main branch. But the reason we're creating a PR is because we would then get a preview link that we can give anybody else on the team. So, if I open up now this PR. Now, when I

come down over here, you can see that because we hosted on Vercel, Vercel is going to give what we call as a preview link, all right? Now, when I go ahead and click on this preview link, it's going to basically authenticate. And now if I come down over here and type in inbox, all right? You can see here that we now have this URL and here we can see that prototype. So, I can actually give this link to anybody else in the company and they can actually play around with this prototype. Now, the original one that we have, which is this one, which is the main AI demo workflows Vercel app, this is the main one, and then this is the one with the preview link, right? But then this link over here just has the prototype that we worked on and that is actually connected to this particular PR. So, if I open up GitHub and let's actually go back to our pull requests, we have one pull request that is actually just linked to this PR. Now, if we come here and we click on merge pull request, this will merge it to the main branch, which is something that we don't want. So, instead what we can do is once it is reviewed, once it is approved, we can just come here and close the pull request if we don't want to merge it and the experiment was rejected. But, if we like it and we want this to now be the source of truth, we can merge the PR over here. So, that's how you create these prototypes and you can share it with anybody else in the company with just a simple URL. So, what I'm going to do now is because I don't want this, to come down over here to our AI workflows or actually we come here to our GitHub and I'm going to come down over here say close pull request. All right? And that means that this is no longer there and this is not going to be merged to the main and it looks like we still have the preview link available. So, if you ever want to come back, we can actually click on that. And then I'm going to come over here and now you can see here it says that the PR is actually closed and I'm going to come here and say check out to main, right? And now it's going to come back to our main file and we are now in the main branch. Now, this is actually Shopify's website and this is actually called shopify. design, which is essentially a design website which showcases the work made by the designers. Now, I'm not sure if you've actually seen this website, but this is one of the website that actually blew up when this was released and Shopify has their internal tool called as Artifact. And what Artifact is, it's like it's their own internal dribbble where designers all over Shopify are sharing their work internally. And if you are a designer at Shopify, you can actually access Artifact and you will be able to see all the work that other people are working on. So, this is like their own internal dribbble or a repository. And so, if you want to build something like this for your team and for yourself, you can definitely do that. People can host and upload all of their projects and prototypes on the internal website that you have and everybody can interact and see everybody else's prototypes as well. So, how do you go ahead and set this up such that anybody in the team can go ahead and upload a prototype at any point in time. So, let's go ahead and see how to do that. Now, this whole

process can be done with a different approach and that's what I'm going to show you now. So, now come on over here and I basically asked a question saying that what is the recommended approach if we want to create or store certain prototypes that we have just worked on. For example, somewhere in the main repo, but it is not affecting the original prototype that we have. So, let's say there is a designer on the team and every designer is given a playground where they can create small projects and prototypes, but this doesn't affect the original source of truth. Now, it gave us four options. I'm going to take you through the four options. The first one is a particular branch per designer. Now, this is not a folder, this is a GitHub branch. So, just the way we had branches over here, every designer would have a branch. Now, the problem with this is that this is not a good approach to have because you shouldn't have branches unless you're actually working on something, right? So, a branch is only created for a temporary state and once the use case is completed, then you want to delete or merge the branch, all right? In our case, we decided to delete the branch, but in some cases you might want to merge the branch, all right? Now, because you want to have dedicated playgrounds, this option is not a recommended approach. The second one is what I will go with where we will have in the main project itself, in the main branch, dedicated folders for every designer. So, for example, I would have my own folder, another designer would have their own folder and I actually can see what the other designer has created and what prototypes the other designer has, right? So, I can take visual inspiration and they can also check mine, right? And I don't have to share any links to anyone because this is going to be on the main website, they can actually access this themselves, all right? Now, this is the approach that we will go with. Now, the third one is to create separate repositories. Now, the goal here is not to create separate repositories, but it is to have one repository. So, we're not going to go with this approach. And option D is to use another tool called story book, but we're not going to go ahead and do that. So now let's go ahead and actually set this up. So I'm going to go ahead and say I like option B. Let's do that. Now what I'm going to do here is I'm going to point out a couple of points. Number one, on the main home page, I want you to have small project folders that I can click on and view the list of prototypes created by each designer. All right? And this is actually going to be number one. Number two, let's take an example of the hover state interaction that we just did and make sure that is my experiment and it should live under my playground. Let's also create an empty folder for another designer named Sarah where she can put in her prototypes. Then I'm going to say let's do all of this on a main branch and then we can merge this back to main later on. I'm going to go ahead and run this. All right? Now let's go ahead and take a look at what actually happened over here. So it's done a bunch of work. It's added, you know, 400 lines of code which is totally fine and now it's created this in a new branch and once everything is fine over here, we will merge it to the main branch so that everybody can actually access this, right? Because now in the main branch we don't have these playgrounds. So now you can see here that it's updated the file structure and maybe it's better to show you in cursor over here. So we have our source file which was what we had before. We have app and then we had our inbox, promotions, and socials. And now we have added this link called as prototypes and inside that I can see all my prototypes and my other designer's prototype. Now when I open up this, you can see here that I have a separate folder called as hover experiment which has its own set of files. All right? So now how Let's go ahead and see how this actually looks. So I'm going to come here to my browser and the local host which I believe was over here or let's actually just type in local host 3000, all right? And now you can see that this is the main file, all right? So now we are in the main URL and when I click on Chetan, you can see that now I'm under prototypes under Chetan and that is pretty much the same thing that we have over here, which is prototypes and Chetan, all right? Then, once we have that, I then have this experiment, so I can click on this and then it's basically me showing me a small preview of this, all right? But ideally this entire page could also have the entire web app that we have built, all right? Now this is over here, you can see that we are under now hover experiment. So everything that you see inside on that page is living in this file over here. Now if I want to come down and see what Sarah is working on, I can actually come back over here, all right? I can come back again and I can click on Sarah and then under Sarah you can see that she has not really uploaded anything, right? Which is why under Sarah we don't have this any other folder, we just have this page, which basically is defining how this page looks like. So this is how you can set up your actual playground for yourself and your team and you can see what everybody else is working on. This is great. Can you move or actually can you create a PR and merge this to the main branch, all right? And we can actually go ahead and say um can you push and then we can say create a PR and then merge to the main. So let's go ahead and say push, create a PR and then merge to the main branch. So now we don't really have to review the PR, we're just going to merge it because, you know, everything looks fine and I want it to be on the main branch as soon as possible, all right? So it's basically going to commit, you can see here it's going to push to remote and then it's going to go ahead and create a PR for us, all right? And it's just asking permission to create a pull request and then also it's going to very soon merge this. All right? And now you can see here it's asking to merge and delete the branch. We're going to go ahead and say allow and it should work. And now you can see here that it's merged and we're now back to the main branch and it's successful. And what you want to do here is you're going to come down to the to Vercel and make sure we go to deployments and make sure that we have the latest one. So one which is ready. I can click on that and now you can see here this is how it looks and I can then come back to this original one that we had. This is the old one. If I just press enter to refresh it is going to refresh and now this is on the main branch. So I can give this link to anybody in the team and all of them will be able to access everybody else's prototypes. So let's say I am Sarah, I'm going to click on Chetan and then I'm going to see what Chetan did over here and this page can be literally anything that you want. All right? So this is how you set up playgrounds for your entire teams and then you can go around and play around with everybody else's prototypes. So hopefully all of this makes complete sense. So now when I come back here to Figma, we have now officially gone ahead and completed number six, phase six which was actually quite a crazy one, all right? And I'm going to turn that on. Now I'm also I actually also probably completed phase number eight where we created the interactive prototypes. So I'm actually going to delete this and we're going to set this to phase eight and this one also is going to be phase nine and that's pretty much it. So now we have a couple of things left to do. We're going to create a god skill that basically creates these individual skills that we did in phase three and four and five. And then we're also going to figure out how to document the specs in Figma and also document on a website our interactive design system for example. So what I'm going to do here is I'm actually going to order move these around. I'm going to start off by taking this god skill and move that all the way to the end, all right? So this is going to be our phase nine. seven and then this is going to be our phase eight. All right? So now with this we're going to go ahead and figure out how to document these component specs in Figma using Uber's workflow called as Uspec. So, we're going to do that right now. So, that's pretty much it for this video. Now, in the next video, I'm going to go ahead and show you how you can automate documentation of your design system in Figma and in code. We're going to be using Uber's AI documentation workflow called as Uspec in order to do this. So, that's pretty much it for this video, guys. Thank you guys so much watching. Hope you guys really enjoyed it. If you did, let me know in the comment sections down below. Make sure to leave a like and subscribe to the channel for more amazing awesome content. I'll see you guys in the next video. So, until then, take care and bye-bye. —