# COMPLETE GUIDE TO AI-POWERED DESIGN PROCESS — 4 HOURS

## Метаданные

- **Канал:** Design Pilot
- **YouTube:** https://www.youtube.com/watch?v=idPrScvnSro
- **Дата:** 20.04.2026
- **Длительность:** 4:02:20
- **Просмотры:** 8,870
- **Источник:** https://ekstraktznaniy.ru/video/52344

## Описание

🚀 Go beyond workflows and learn to build end-to-end products without coding — https://learnproduct.design/cursor

🔥 Get 50% of your first month on Cursor — https://cursor.com/referral?code=BQ7HMBSGJSH4

In this definitive guide, I walk through every workflow I use to scale design systems, turn designs into production code, generate Figma designs from code, build interactive prototypes, and auto-generate component documentation — all powered by Claude Code and Figma's MCPs.

If you work in design systems, product design, or just want to future-proof your design practice, this is for you.

🔗 Figma File — https://www.figma.com/design/HvPhpLOICspP0CD05ST9fL/Design-Process-2.0?node-id=0-1&p=f&t=od1TjRmAGuEVIGwI-0
🔗 GitHub Repo — https://github.com/Design-Pilot/ai-design-workflows-demo
🔗 Hosted Website — https://ai-design-workflows-demo.vercel.app/docs

🧰 AI Designer Starter Pack
— Get 50% of your first month on Cursor — https://cursor.com/referral?code=BQ7HMBSGJSH4
— Prompt Faster with Wisp

## Транскрипт

### Intro & what you'll learn []

Hey everyone, hope you're all doing well. Welcome back to another video on the channel. This video is going to be the definitive guide on creating custom AI powered design workflows. Now, whether you're trying to create interactive prototypes, scale your design systems, turn your designs into code, or generate designs from code. I'm going to show you all the workflows that you can set up in order to do this. Now, once you understand how these workflows actually work, you can then apply them to your own personal projects or apply them to the work you do every single day. This video is going to be broken down into multiple phases. And in each phase, I'll show you a workflow that you can use and set up yourself. Now, we'll start off at phase zero where I'm going to be taking an example from notion mail where we'll take an email row component and prepare it for the workflows ahead. We'll use the Figma MCP and the Figma console MCP to clean up the entire design system. This includes organizing variables, identifying components that don't have variables assigned and fix those gaps so that everything is in a much healthier state. Once it's cleaned up, we'll build that in code. That step is extremely important because once the component exists in code, it opens up a lot of possibilities. Now, to make sure this coded version is accurate, we'll create a preview playground where we can compare it against the Figma version, spot any mismatches, and refine it until it feels right. After that, we'll create a skill that lets us take an instance of the main component and paste it into Figma and customize it based on a prompt. We'll test this skill, improve it, and make sure that it's reliable. Once it works, we'll evolve it further so that it can generate an entire inbox using a template that we provide. That template will include a slot and AI will take that structure, create an instance, and fill it with emails based on exactly what we need. And once that's done, we'll build the full prototype in code so we can start prototyping for real. I'll show you how to upload everything to GitHub, how to host it, and how you can create a shared interactive prototype repository for your entire team so that anyone can publish their work anytime and everybody can see what others are building. It's very similar to Shopify's internal tool called as artifact. We'll then move on to documentation. I'll show you how to document these components in Figma using Uber's new agentic AI workflow called aspec. And to wrap all of this up, we'll also create an online version of that documentation, one that's better suited for designers and product managers and not just engineers. Now, I'll be using claude code throughout this entire video, but you can use cursor, anti-gravity, codeex, whatever tool you prefer and still make use of these workflows. Now, one last thing before you go ahead and get started. Now, if you want to learn how to build AI products and not just workflows, I highly recommend you visit learnpro. design/cursor, design/cursor which is my online course which teaches you everything you need to know about the fundamentals of building products and I'll also show you how you can build your own mobile apps. Now more on that a little bit later but because we have so much to cover without any further ado

### What are MCPs used for? [2:50]

let's get started. Now before I go ahead and talk about MCPS I'm going to explain a concept of why MCPs need to exist and what is it that they actually do and understanding this is super important. Now let's take an example where let's say you want to cook some food for yourself. All right. Now, in order for you to cook food for yourself, you're going to need the recipe. You're also going to need a few items, and utensils. Now, if you have these three things, you can then go ahead and cook food for yourself. But let's say you don't have time and you are quite busy and you want to hire a cook to do that for you. So, the cook is going to come over to your house and cook the food. You will provide the recipe, the items, and the utensils. Now, you don't want to eat the same food every single day. So, what you do is you basically ask the cook if the cook can make Indian food sometimes or Italian food sometimes or even deserts. Let's say it's a festival or you're craving something sweet. You want to eat a desert. Now, essentially what the cook needs is the recipe items and utensils. But the cook also needs to know how to use this to make Indian food, Italian food or deserts for example. And this is what we call as tools versus skills. Tools are essentially the actual raw ingredients that it needs which is the recipe, the items and the utensils. And skills is what you do with these tools. So you could use the same tools to make Indian food. You can Italian or deserts. So if we have to bring this into the world of AI, AI will use tools and skills in order to do a particular job for you. Now tools are provided by the actual MCP. So anytime you use an MCP, tools come along with that MCP. And skills are essentially normal plain text files called MD files, also known as markdown files. They are just plain text files. That's about it, right? And tools come along with the MCP. And I'm going to show you the examples of all of this very soon. One more difference is that the MCP is actually given by the provider and also the tools that come along with it and these skill. md files are usually prepared by you because these skills can be customized to whatever needs that you have and these skills will then use the tools to execute your actions. Now sometimes the MCP providers also provide skills. Now we will be using two MCPS in order to create stuff that we want. The

### Figma MCP vs Figma Console MCP overview [5:18]

first one is obviously the official Figma MCP. And the second one is called the Figma Console MCP. That's the name of the MCP. The Figma MCP is the official one. And the Figma Console MCP is a third party MCP which is created by a company called as the South. Now the Figma MCP comes with 16 tools. But the Figma console MCP comes with 94 plus tools. And this is a massive difference. And this is the number at the time of making this video. Both of these companies could extend the number of tools later on. And of course, I'm going to show you these tools and how these tools look like very soon. But just because the Figma Console MCP has 94 plus tools doesn't mean that you always have to use that. And I'm going to explain to you why it's not obvious that we should use Figma Console MCP just because it gives 94 plus tools. Now, this is the official Figma documentation. And what you see here is that it says the Figma MCP server provides the following tools. So all the tools that you see over here are created by Figma in order to do a very specific task. Right? So for example, this tool called generate Figma design generates the design layers from interfaces. You have something called as get design context. So this is the name of the tool which basically gets the context for a layer or selection. So depending on the task you want to do, these are all the tools that basically allow it to do a certain thing. And knowing what these tools are is extremely important anytime you're using an MCB, right? And one of the things that was very recently released, well maybe not recently, it was the most recent one that was released is something called as the use Figma. This is essentially a general purpose tool for creating, editing, inspecting any object in the Figma file. So use Figma pretty much behaves like a designer who could create things, edit things or even inspect things in a Figma file. All right. And when you click on each of these items, there is a detailed description of what exactly happens and what is it that it does. Right now it's a good idea to actually go through this slowly and you know in your own sweet time. But one of the things that I want to talk about is this use Figma because this is one of the most important ones. So when I click on this, you can see we end up over here. So you can see here it says this is a general purpose tool for writing to Figma, which means it is used to edit, create, delete, inspect any object. All right? And it can do this to pages, frames, components, variables, variants, styles, text, images, and more. So it's pretty much like this all-in-one tool that does a lot of things which a designer also would do. When relevant, the agent will first check your design system for existing components to reuse before creating anything from scratch. So as a designer, this is how we would think. Anytime we have to create a design, the first thing we think about is that do we have a component for this? Is there something that we can reuse? Right? And that's what the agent is also going to do. So Figma has basically set up this tool to behave like a designer. And I'll give you an example here. Here it says you can ask it to create or modify designs which is adding a new frame, add a button component to use the correct fill color, set up tokens, build or generate component or various systems and variant systems fix layout issues. So it can fix the auto layout spacing which is pretty amazing. These are all the things a designer actually does. Now all of these things are tools. Now one of the things you see here is that the use Figma tool is best invoked with the Figma use skill. Now don't get confused with the naming. This is just use Figma which is the name of the tool and Figma use is the name of the skill. Right? So they've just interchanged the wording. Now when I click on this or you can actually come down over here um into the skills section. When I click on the Figma use skill, we will actually come to this skill section, right? So this has this is the Figma skills for MCP. Now these skills are provided by Figma itself. Now ideally at the end of the day these are just markdown files and I can show you that also very soon. These basically have instructions on how a tool is supposed to be used. Now it can still be a little complicated to understand what is the difference between a skill and a tool. But as you go through this video you will realize the actual differences between tools and skills. Now the main important thing about skills is that you can see here this is probably the most important thing as to why we need skills. Without skills, you'd need to describe each step yourself every single time. Now, if I have to show you an example of what this means with the cooking example we were talking about. So, let's say in this case, every time you want the cook to cook some Indian food, you don't have to tell the cook to make it spicy. When you say Indian food, the cook is going to understand that this is supposed to be spicy food. And that's typically how a skill is set up. The skill basically says that when you're making Indian food, always make it spicy. It's sort of understood. Now, for the Italian example, if you are making pasta, maybe there's a specific type of pasta you want the cook to use. And so, you don't have to tell the cook to use the specific type of pasta every time. The instruction that you give when you say make Italian food means to use a specific type of pasta. Similarly, with desserts, if you're asking the cook to make some dessert and it can have multiple flavors, the default flavor the cook should always use is chocolate flavor. So if you want to make a cookie or a bread or a cake or whatever it is, if it can be made with any different flavor, the cook should automatically know that chocolate flavor is the expected flavor. You don't have to tell the cook to make a dessert with chocolate flavor. Right? So that's the point of having skills because you don't have to give these tiny details and instructions every single time. And all you have to do is just say Indian food, Italian food or cakes, deserts, pastries, whatever it is, right? So hopefully all of this makes sense. So now we can see here that Figma actually provides around six to eight skills over here that we can use and these have very specific instructions and the MCP server will know when to trigger these skills automatically. All right. Now let's take a look at the Figma use skill. All right. Now this is a skill that triggers the write to canvas feature. This is essentially used with the use Figma tool. And when you want your assistant to create or modify context directly in Figma, such as building frames, placing components, etc., this skill makes that possible. And so there's a lot of information in this skill. And so let's actually take a look at how this actually looks. So now come down over here and click on this MCP server guide directory. And now if I come down here to the skills section, we see we have all of these various skills. And we're going to click on Figma use skill and then click on the skill. md file. And this has basically all the instructions on what the tool needs to do in order to get the job done properly. Right? So you can see here that there are a lot of rules and instructions for it to follow and we don't really have to understand or go through any of this but this is going to be done automatically by the AI and it's going to understand what it needs to do right and so there are workflows and you know there are even you know troubleshooting cases where in case something goes wrong have this needs to be fixed right so depending on what the task is the AI is going to pick the respective skill and apply that skill along with the tool so that it knows what it needs to do with the tool and how it needs to use it. Now with that being said, let's move on to the Figma console MCP. Now in the Figma console MCP documentation, you can see here this is the official website and there's a lot of information over here. What we will do is we will come down over here to the tools reference section. Here you can see that for every single tiny action they actually have a tool that does a specific task. So for example even navigating pages is going to be done by the Figma navigate and they've ordered it into various categories which is debugging design system related. So for example even for design systems they have so many specific ones for components and for variables this is crazy for creating variable they have one tool for updating they have one for renaming they have one in deleting they have one right so the reason they have all of this split out is because this one is sort of more specialized and not a generalist tool because this will result to a higher chance of execution and the goal with this is that if these tools are given very specific tasks they are less likely to make mistakes. But with the Figma official MCP because they are a generalpurpose tools, they have the skill files which sort of help guide them. So it's either creating individual tools which are specialized or you take a general purpose tool and you combine it with a skill to get the job done really well. They also have a tool called as design parity which basically checks the parity between specs and code and we will see an example of this in this video. You can definitely compare what you have in codebase and what is there in Figma and make sure if there is proper parity or not. All right. Now the question is which one should you use the Figma MCP or the Figma console MCP. And so to do that I'm going to come over here. Now there's a lot of information over here but at a high level you can see that the Figma MCP and the console MCP can all do the exact same thing except for this one case which basically says execute arbitrary plug-in API JavaScript. Now this is not relevant for us right now but then the rest of it is and because for all of these things like creating frames and tools, creating components, modifying auto layout, they have dedicated tools. The use Figma tool by Figma MCP can pretty much do everything which is why it is accompanied by the Figma use skill which has instructions on how the tool needs to be used. So now with this the question still arises when should you use what? So the answer to that is at the very bottom and they've given a very nice detailed breakdown. So you can check this out when you have some time. Going to come down over here to the product designer section. So you can see here it says for designers managing design systems Figma MCP is useful when you want an agent to create a design from code references. Now this could be either from taking the code and constructing a design and pasting it into Figma or it could still be generating any design that you have from a reference as well. That also works. And the Figma console MCP is better when you want to manage your design system, need to do batch operations, want realtime awareness of what is happening in your file, score and lint your design system, design to code audit, you want to read annotations and postreview comments. So anything that has nothing to do with generating designs, the console MCP is better equipped to do that. And the Figma MCP is specialized for doing the actual grunt work that designers actually do. Right? So this is the difference between the Figma MCP and the Figma console MCP.

### Installing the Console MCP & Desktop Bridge plugin [15:48]

Now the one thing you need to do is you want to install the console MCP and how do you actually do that? So you want to come here to the setup guide and there's a lot of instructions and details over here. So what I would do is take your time and try to figure out how to set this up. It's not really rocket science. It's just that there are too many ways to do this. Now the one thing that you want to keep in mind is make sure that they have multiple setup methods like you they have something called as the local git. They have cloud mode and remote. You want to make sure that you choose this option because this gives you the maximum number of tools. Now, I'm not going to the depths of what is local versus cloud, what is remote. It's going to be too complicated to explain all of that right now and it's also not relevant at this point. So, instead just focus on this because it has 94 tools. And you want to choose your AI tool, which is if you if you're using the cloud code CLI, use that. If you're using cursor anti-gravity, use that. Cloud desktop is what we will be using. So, you can use that if you're using cloud desktop. They also have one for codeex, so you can choose that as well. Um, it should be somewhere over here. Let me see if I can find it. There should be something over here. I'm not sure where it is. But you can see here they have a codeex setup. So if you're using OpenAI Codex, you could use that as well. Now once that's done, there's one more thing that you have to do is you need to install something called as the desktop bridge plugin. This plugin is a plugin that you know works like any other Figma plug-in. Now there's a lot of instructions. Just go ahead and follow that. But in short, what you would want to do here is come to this documentation over here. And this is the official website. And uh if you click on this, you'll basically come to the main landing page. Click on code and download the zip file. And once you download the zip file, you can find this folder called as the Figma desktop bridge. You want to click on that and then you will find this file called as the manifest. json. And this is the actual plug-in file. So when you open up the plug-in in Figma, use this to open that up. open it with this and the bridge plugin is going to be open. This bridge plug-in essentially is like a door that allows or closes the entry for AI agents. So when this bridge is active, it means that the AI can come in, inspect, edit. When this plug-in is not turned on, that means nobody can enter the Figma file and do anything. So hopefully all of this makes sense. So with that being said, let's go ahead and jump into Figma and let's get started. All right, so let's go ahead

### Figma file walkthrough [18:04]

and finally get started. Now, let me give you a quick preview of the Figma file that I have. So, what I have here is the email row component. We've got a couple of states over here and various possibilities and I also have the various icons and atoms that we will be using inside the email row component. Now, I also have annotations. So, if I open that up, I have got some annotations added over here which we will take a look at a little bit later. And what I have here is basically the various possible customization options for the text. So for example, the sender name variants is this is how it would look if it's a single um message or a single reply and then if it have more than two more than three and truncation rules and all of that. And then we also have this option to sort of show the category. So if I come here and say c uh show category of the email. All right, we can show this spill. Then we have our title variants essentially how this would look where it is truncation the maximum width and things like that. Then we also have the trailing icon button and label. All right. So we have the icon button and the label over here. I've got some specific rules also. For example, the icon button can be a paper or a calendar icon. You can have up to two labels. And here you could have both an icon button and labels. And then here for the date we have just some uh date formats. Right? So there's quite a few rules. This is how it looks in dark mode. And then I also have the section header. Probably going to go ahead and say section header and section header. All right. And then with this section header, we are then going to go ahead and have this inbox template where we have the slot component that I created. And we essentially will be able to take the section header and also the email rows and put that over here. And of course AI is going to be doing this for us, right? And so we essentially need to give this template to AI so that it can use that template and paste the design here in

### Phase-by-phase plan overview [20:08]

Figma. All right. So I'm going to be breaking this down into multiple phases because this is going to be a complex workflow and we're going to see how to set all of this up. So the first thing is we're going to be cleaning up the color and typography variables. Now what you see over here is I have my text styles that I've added but they they're not really mapped or assigned to tokens. And if I come here to my variables section, you can see I have my raw colors, but then I've actually used the correct colors, but they're not really organized very well over here. And then I also have my semantic colors. This is something that I've organized to an extent. But then you have content, surface, border, and fill. But these are not named correctly, right? That's something that I want to do. Then we have our size, which I only have one right now. And we will probably add more. We also have radius over here. And also these are not named properly. And we also are missing our paddings and our spacing tokens. And for that, we're essentially going to ask AI to do that. So in phase one, we're going to clean up the color and typography variables. And we're going to ask it to not include any business logic in the variable names. Right? The goal here is to ensure that it does not include any business logic and it feels very out of the box. Number two is we are going to review the email component and extract the sizing and spacings and then we're going to create variables using whatever we know and then create proper token names and apply it to the component right so for example over here if I click on this row you can see here that we are using values but these are not assigned to any variables right so pretty much anything over here and these are really properly constructed with auto layout over here all right then phase three is where we will build the email row in code and we will create a preview website where we can customize the settings on the website and test out the component with various configurations. Right? So it's going to be like a playground for us and to do that we are going to first ask it to create global tokens that will match Figma and then we will use those global tokens in order to create the component in code. All right. And then we are going to read the annotations and we're going to ask it to read the annotations to get details on specific rules. for example, all these annotations over here. And then we're going to create a Nex. js project where we will create a preview website and interact with it. Then phase four is once we have the code once we have this working really well, we're going to create a skill that basically creates an email row for us and paste that into Figma. Now, we're going to be making it to paste a single row and we're going to start off with that. And then phase five is we're going to update this to create an entire table of emails along with section headers and not just one email row. Then phase six is where we will update this again to now create an entire screen and fill in the emails inside. Right? The last phase would then be to use this inbox template and it's going to create those emails and paste that inside over here. Right now we're going to go ahead and start off by doing all of this. But we also have a couple more things. Once this is done and everything works perfectly, we're going to go ahead and create what we call as a god skill that allows anyone to execute these phases, right? Maybe three, four, five, and even probably six here for any other pattern or component such as drawers probably or forms, menus, whatever it is, or canban boards, whatever it is that you want to do. or maybe even chat interfaces. Okay. So, we can apply create a god skill that can create all of this for us. Then phase eight is we're going to learn to create interactive prototypes because we would have everything that we need in code. Then phase 9 is to document the component specs in Figma using by Uber. And USPEC was a documentation workflow that Uber recently came out with. I'm going to show you how to use that. And then phase 10, we're going to document all of this on a website as an interactive component so that it feels pretty real. Now, let's go ahead and finally get started. Now, I'm going to

### Writing a detailed multi-phase plan [24:09]

be using cloud code over here. I have this empty folder called as Figma workflows. And we're going to go ahead and get started. Now, before we get started, we can come here down to connectors. And we're going to have to check that the Figma MCP and the Figma console MCP are connected. So, as you can see here, I have the Figma console MCP selected, which is perfect. And if I come down here to the customize section here, I have my personal Figma uh official one selected and that's also installed. This is the official MCP server. So we're going to be using both of this. All right, perfect. So now I'm going to come back over here. We're going to start off in a new project and I also am going to go to Figma and we have this Figma desktop bridge plug-in ready. So you can come here, go to plugins, you can come here and choose import plug-in from manifest. And then you want to choose the Figma console mcp and you want to come down and choose the Figma desktop bridge and click manifest. json. This is essentially the plug-in file. All right. And then this is going to open up over here. So go ahead to cloud code and I'm going to say check Figma status with Figma console MCP. All right. So, there's a little bit of a hiccup and so I finally fixed it now. And now we can see that we are connected finally over here. All right. So, now I'm going to go ahead and select opus. All right. And in opus, I'm probably going to choose the effort uh high. And I'm going to come here and choose the plan mode, which is over here. Now, we're going to go ahead and actually explain to Claude what is it that we really want to do over here. and we're going to go ahead and try to explain all of this in a simple way. Now, I'm going to be using this dictation tool called as Whisper Flow, and you can go to the link in the description to check it out and use my affiliate link. Uh, I'd really appreciate that. All right, so let's go ahead and get started. make a plan for a couple of workflows which allow me to prompt and use a skill that creates a design and paste into Figma. Right, going to go ahead and do this. We're going to start off by testing this with an email row component for an email app. Let's build this plan which includes multiple phases. Phase one is basically going to look at the Figma variables especially the typography and the color variables and organize them and come up with proper naming conventions for them. All right. So this is going to be phase one. All right. Uh and actually we can actually bring this down. And here we're going to say phase one. Okay. And if I come here to Figma, we want to make sure that we uh have this. All right. And I'm also going to say when naming these color variables, do not include any business logic into it. For the raw color values, ensure you have two sections, which is neutrals and accent colors. All right, that's fine. Then moving on to phase two, I want you to review the email component and identify the paddings and the spacing and any corner radius values. Once you identify these values, I want you create variables in Figma for those values and then apply those variables to the email row component. All right, so this is going to be phase two. All right. Now, one thing to note here is that we also have these atoms that we need to apply tokens to. So, I'm also going to say when you are reviewing the email row component, it'll also have atoms that are used inside the component, I want you to apply the spacing, paddings, and size tokens to the main atom master components as well. All right. So, there we go. We're going to apply that over here as well. Now coming to phase three, we're going to ask it to build the email row component in code and a preview website where we can customize the settings on the website and test out the various possible uh component configurations and create global tokens and all of these things. All right, I'm going to come here down to phase three. All right. In this phase, I want you to build the email row component in code and also the various atoms that come along with it. Then build create a file with the global tokens that we have from Figma. Make sure it's a very close match. Apply these global tokens when creating the atoms and the compon and the email row component in code. Do not hardcode any values or create component specific tokens. Make sure that all tokens are being used from the global tokens. We have that and then I'm going to ask it to sort of read the annotations and create a next. js project for the preview website. I'm also going to say a few more points here. Ensure to read the annotations that I have added to the instances to understand various behaviors and customization options. All right. And then create a Nex. js JS project where I can preview this email component on the browser and have customization options that allow me to play around in this playground that you create. Now, there are actually a couple more things that I want to add, but that's essentially for phase 4 56 where we basically go ahead and create a skill. Now what I'm going to do here is in this plan I'm going to tell it what the next phases are going to be but then I'm going to sort of keep it as a pending state and when we come to these specific phases we're going to dive deeper into it. All right. Now I'm going to come here and say the next phases phase four five and six are going to be all around creating a skill that when triggered will create the design referencing the code files that are created in the project folder. create a design and then paste that into Figma. Keep this as an open point, but phase four is going to be about creating an individual email row item. Phase five is going to be about creating a set of emails along with section headers. And phase six is going to be about taking these email groups and adding it into a template which also has elements such as the sidebar and filters. I will provide more details when we come to this but for now keep it as an open point but keep this in mind when creating the current plan. Now proceed to create the plan. Feel free to ask me any clarifying questions that you want to get more information. Do note that ideally this is not just for the email row component. While this for this project will be the email row component. This system can be applied for making other patterns such as drawers, forms, chat interfaces, etc. All right, so we're going to go ahead and now run this and we're going to see what is going to happen. I'm actually going to actually probably stop this. I'm going to go ahead and actually copy all of this. Paste. Now, there's one more thing I actually want to say. I want to say create a checklist that you can refer to and check off items as and when you complete them. All right. And what I'll also do is I'm going to give it access to the Figma files over here. So I'm going to go ahead and copy this and say email row. Paste that over here. I'm going to copy this. I'm going to say components and say atoms and icons. All right. And then I'm also going to add this. This is basically going to have instances of the email row that has the various customization rules and text rules. Right now, we're going to go ahead and run this. Right now, the great thing about Claude is that you can actually see a lot of details about what it's actually done. And you can see here that it's first gathered all the design token data from the files. And so it's oh okay it actually closed all of that. It actually ran three sub aents and sub aents are agents that have their own context window. So they can be given dedicated tasks to do and they have their own context window. So it's not going to be distracted from a lot of unnecessary things. So the first sub agent is going to explore the variables. The second one email row component and the third one is going to explore all the instances annotations. So then it's going to have like a complete highle view and then it's going to pass on all of this to the main primary parent agent and that parent agent is going to have all the information to create the plan. So you can see here that I now have a thorough understanding. Let me uh launch a plan agent to synthesize all the findings and create a dedicated plan. So now it's going to create a new agent which is basically going to design the implementation plan over here. And we can also check this out a little bit more. So you can see here that there are some development nodes. This is fine component styling. This is fine. Then customization rule. So it's actually looked at pretty much all the annotations. All right. And it's figured out pretty much everything. Annotations found as you can see over here. Pretty cool. And then the variations over here. A lot of detail. These are all the component properties that we have. So it's done like a very thorough job and it's done it pretty quickly as well. So that's uh pretty good. So for the spacing tokens, it's actually asking which naming convention do you prefer? And this is so great because I actually tested this with cursor and with codeex and they didn't really care about these things. So here it's basically asking base unit index. So for example spacing uh / 0 / 1 where you can add four pixels 6 pixels. You've got basically like this multiplier. Then you have pixel value names which is spacing four spacing six. And here you have t-shirt sizes. Now depending on what is your preference and what makes sense for your design system you can think about that. I'm going to go with t-shirt sizes over here. Now for the nextJS project, which styling approach do you want to prefer for components? It's asking CSS, Tailwind, and plain CSS. Now, if you don't know the difference to this, that's totally fine. You can use the recommended one, and that should be fine. Then it's asking which font uh is it included or should I use is the Mono Trust font available as a file I can include in the project or should I use a fallback, right? And so basically, it's asking which one to use. You can say that I'll supply the file and load it wherever it is and I can provide the font files. So I'm going to go ahead and add that as well. And then for the raw naming coloring should the collection stay as dot raw colors or be uh renamed. So it's basically asking what it needs to be called. So for example, if I come down here to Figma and I come to my variables, I've called it dot raw colors. It's basically asking me what to call it to. And we can come here and say, you know, uh rename it to uh primitives. And I think that's uh fine. All right. Now, a couple of things that we can do before when it's creating the plan is that it actually did a ton of work. And it's actually it's really fascinating how it does so much work. So, I'm going to close this up for the implementation plan. It did a lot of work. So, it got all the colors and then it's preparing a list of plans, prerequisites, open questions, and it's basically revisited and done a ton of work. As you can see over here, there's a lot of things that's happening over here. All right. And it's actually gotten a ton of context as well. Then it's also going ahead and capturing screenshots. So for example, it actually got the screenshot of this which makes sense. It also got screenshot of this. But then it's also coming here and you can see that it's actually taking a screenshot of the template file also which I actually never gave. So you can see here it says let me also capture the inbox template and section headers for phase 4 to six context and check for annotations deeper down in the tree. So it's actually doing a lot more than we did it and it's behaving essentially like a very senior experienced designer. All right. And then it found a couple of critical information regarding annotations. That's totally fine. And then um it created this plans dofile. All right. So this plan that you see over here and then it loaded a couple of tools for asking me a question. And now we basically have this over here. All right. So you can see here that we're building a reasonable design to code workflow system starting with a notion mail email row component. The system bridges the Figma design tokens to production codes and includes skills that generate the Figma designs from code references. While this project focus on the email row, the architecture is designed to generalize any UI pattern. This is pretty much very important. All right. So it has a link to the Figma file. This is essentially the node and then we have a checklist over here. phase 1, phase 2, phase 3, phase 4, phase 5, and phase 6. All right. So, I'm going to come here and I'm going to close this up. All right. And I'm going to say, can you save this PRD, this plan in the current project folder. All right. Now, the reason I'm doing this is because I don't want to execute using Opus. I essentially want to use something like sonnet and set the effort to low because for the phase one it's just going to be basic simple editing of the Figma variables. All right. So you can see here it saved it to plan MD. And now I'm going to go come here and say do nothing because I just want to get rid of uh this area. So all good. Now one thing I'm going to do here I'm going to come here and type in slash and type in context. And now when I run this probably just going to go ahead and choose haiku for this. It's basically going to go ahead and identify how much context have we already used. So for until now you can see that we have used in this entire chat conversation only 40%. Now for at least phase one I'm going to continue using the context window over here because it's only used 40% and we're not going to use a lot more for phase one. So I'm going to come here and choose haiku. And because we're going to be only editing things in Figma, haiku is should be more than enough. I'm going to come here and say

### P1: Cleaning up Variables using MCP [38:21]

can you execute phase one of the implementation plan? All right. And uh of the plan. All right. And go ahead and run that. So it's trying to connect to Figma and it has all the variable data. It's going to now rename all of this as you see over here. It's going to go through that list and it's going to keep checking things off this list which is one thing which is pretty great in cloud code because you can see this visually changing over here. So that's pretty good as well. All right, so let's take a look. So phase one is completed and we can go to Figma and quickly take a look at that. All right, so in Figma now we have our primitives which is our alpha colors which is fine, our neutrals which is also fine. It's not yet organized in the correct order. So, I'm going to quickly do that because AI doesn't have the tool to order these things. And so, we have to do this manually. And so, then we have our 850 and 800. And then we also have our 950. Then we've got our blues. Then we have our yellows. Then we have our uh browns over here. All right. Browns, blue, green. And then move this also. And then we have a yellow as well. So this is fine. This is fine. All right. Perfect. Now we come here to radiuses. We have two. It has identified two. We have small. And then we also have our colors. Right now for some reason it's not updated the colors. So we're going to go ahead and um ask it to fix that. So going to come here and say the semantic color tokens collection has not been renamed with appropriate names. Right now they're still using the placeholder names. Can you look into this please? All right. I'm going to go ahead and ask me any questions if any for more clarification. Right. Go ahead and run this. All right. So now here you can see that it's missing. So it's asking us how do we want to rename it. Right. So we have content primary semantic text primary or semantic content primary or should the semantic tokens indicate their theme which is color light color dark? That's fine. or do you want to reflect the design intent? All right. So, text primary, text secondary, text muted, border weak. Right. So, I'm going to go ahead and uh say option three. Right. So, it's going to ask clarifying questions. Yeah, it's basically intent based. All right. For background and surface colors, what would you prefer? We could keep the current naming convention. And for unread and fill colors, we could probably use uh badge. We could use that. Uh that's fine. So, for this one, we could probably use business logic. All right. So for the state base color however selected should they be renamed to indicate the state stay separate. I guess we could go with option number two over here. So you can see that it's also going to update the plan and then get my approval for this which is actually very nice. And we can click here to see what is it that it's actually doing. So it's basically marked everything as complete over here which is uh pretty nice. And then it's added a couple more things which is also fine. All right. So here it's showing us a summary. So the new name is going to be uh text primary text secondary text accent brown. Now there are a few adjustments that I have to do because these colors actually are a part of the tag system badge. All right. Are part of the badge over here. So I'm going to do this myself. come here and say yes there are a few adjustments that need to be made but it's okay. I can do this myself. Go ahead and update the names based on what you have recommended to me now. And I'm going to go ahead and run this. All right. So now let's go ahead and quickly verify this in Figma. And you can see here it's done all of this, but it's not really put it into proper groups. But uh that's fine. We can do it ourselves. So I'm going to quickly pause the video and do this myself and come back. All right. So go ahead and clean this up. So now we have our surface tokens, our content tokens, and here I also have the checkbox under content, but that's like making a small exception. Then we have our fills and this is essentially going to be for the notification dot. So I've kept it separate. And then here we have our borders. And then for the tag button we have our content buttons. Content colors. And for the tag button these surface colors as well. So now obviously this is in a much better shape and I think everything else uh looks pretty fine. All right. Now with that being said we can move on to phase two which is the spacing layouts and all of this.

### P2: Creating and Applying Variables to Components [42:48]

And you can see here the last step is also a visual verification. So I'm going to go ahead and say do nothing. Now here I'm going to be using sonnet because I want a little bit more brain power over here. So I'm going to go ahead and choose sonnet. And in sonnet I'm probably going to choose medium over here. Execute phase two of the plan. All right. Um, and we can say, oop, ask me any questions at any time if you need more clarification and I'm going to go ahead and let it run this. All right, so it's gone ahead and updated everything. Phase 2 is complete. Let's go ahead and quickly verify all of this in Figma. So, we're going to open up variables and you can see we have some size tokens, which is fine. We have two radius tokens and mainly important are spacing tokens. It's also created one for zero which makes sense. So let's go ahead and take a look at the tag button first of all. So you can see here it's applied that padding of six pixels. So all of this is actually pretty good and working fine. All right. Now we can look at the action bar. Now in the action bar it forgot to add that gap. So here um we can actually add this ourselves. So I'm going to go ahead and set this to two. We are actually missing one which is interesting. So, it didn't really consider this. Probably it missed it out. So, I'm going to go ahead and create a new one. I'm going to go ahead and call this mini. And I'm going to make this two. All right. And I'm going to click on this and add this two over here. Spacing two. And also spacing two over here, which is pretty good. And the corner radius is also added. That's nice. And then over here, if we come here, we can see that it's added the paddings or actually the tokens everywhere. And over here, we've got paddings again, the gap. Here we've got um here there's nothing really so that's fine. Over here we've got a gap of 40. Over here gap of six and uh things are looking fine. Here everything seems to be pretty good. Uh there are also size tokens. So for example if I click on the checkbox icon you can see we have 20 pixels size that it has added which is nice. And even for the uh notification dot um you can see here that it's added a size. So I think all in all I think phase 2 is pretty good. And so we can to an extent mark these off as done if we really want. That's fine. And then mark this off as also done. So proper names and apply to the component or this is done. Now is where things get

### P3: Building the email row in code + Interactive playground [45:15]

pretty interesting where we're going to execute phase three. Build the email row in code and preview website where we can customize all of this. Create global tokens. Now before we do this, I want to create a plan just for phase three and then we can execute that plan. So I'm going to come back down here to um clude and let's look at phase three. So scaffold the nextjs project extract the final token values from Figma. All right. And then build the global CSS files which is fine. Implement atom components. Implement email row component with variants and properties. And then build an interactive playground and then visual parity check against Figma screenshots. All right. So I guess maybe this is fine and we don't really need to give further instructions. So you know what? I'm just going to go ahead and set this back to sonnet. And here I'm going to choose probably high this time. And I'm going to go ahead and say execute phase 3 of plan. md. And to be honest, maybe let me go ahead and look at the plan again. For phase three, we can actually review this project over here. So phase three implementation. So build an XJS project. Email. All of this is fine. So the key decision from annotations is that the sender info width which is fixed at 16 VW. All right. So that basically means here that in Figma this text or this area is going to be 16 times the viewport width or 16% of the viewport width. Right? So it's considered that date formatting. The action bar appears on hover only overlays the date area which is fine. The trailing section can have an icon or both um icon button or labels both. Right? So we've got the project structure which is fine and you can quickly take a look at this as well. So we've got the fonts which is fine. We've got the playground view which is also fine. In the email row we have the email row files. So this is essentially this email row. tsx is going to have the actual code for the email row. Utilities is essentially the logic for the date formatting. And now then we have components. In components we would have checkbox, tag button, icon button. And then we would also have a list of all the icons over here. And then we can then come down to the spacing token. So then we would have all of this. So I guess this is fine. It's not really terrible. And if you don't understand any of this, this is actually fine. You don't really have to worry too much about this. And so the global tokens will live under the global tokens with CSS properties. Uh which is fine. and component styles use the CSS modules for scope class names is also fine. All values reference tokens. All right. So as you can see here it says padding with the variable uh spacing. md. All right. Never hardcoded like this which is great. All right. And then font loading which is pointing to the user provided mono trust sans file. So we'll obviously add that. And then for the we also have a colors raw file which is for the primitives. Semantics spacing. Um and then we have all our email row properties. So the sender is going to have a text. Subject Date is going to be in a date format. It's not a string. It's just going to be a separate date format. And is red is selected. Show count. This is pretty much everything that it got from Figma, which is fine. Hover state is okay. Date formatting is based on this utilities using the annotation rules. This is fine. And playground light and dark theme. Uh this is essentially the playground that we're talking about. preset demos is replicate 20 plus variations from the Figma variations light screen. So I don't know what it's going to do. I don't know if it's going to create 20 plus variations, but it's going to be interesting to see. And then responsive preview adjust the width of the test center to 16 viewport based on behavior. So what this means is when we reduce the size of the viewport, the size of this also reduces. So which is fine. And then execution steps, this is okay. And so we can go ahead and say we can execute this. All right, let's go ahead and run this. All right. So phase three is done, but there are a lot of things that we actually have to fix to make things work. So we're going to first look at the entire code files that it's created for us. And there are a couple of atoms and then the email row. And as you can see here, it also automatically opened it on localhost. And local host is essentially opening up the website on your browser without needing any internet connection because it's just opening the files that are present in your project folder. Right? So that's called um local host. And you can see here it says that it's live over here and I just need to add the font files which I'm going to do that and then we are ready for phase 4. Now there are a lot of issues over here. Now to in order to see this better I've actually opened it up on my browser over here so we can look at things a little bit more better over here. And now the goal here is to actually find a bunch of issues and give this to AI because AI is going to make a couple of mistakes over here. Now before we actually do that, I'm going to open this up in cursor because I actually want to see the code files. So here I am in cursor and I have this file called as the notion mail components and everything regarding the mail components are um sort of extent are over here. Now we have the font files. I need to add the font files over here. And so the first thing that I'll actually do is I'm going to come over here back to claude and I'm going to drop in the font files. So, these font files over here, and I'm going to say, "These are all the font files. Can you add it to the folder? " All right. And I'm going to go ahead and choose um IO for this one cuz it's a small task. And we're going to run that and wait for it to finish. And I'm going to allow this project over here. All right. So, I went ahead and asked it to update the font files, which it did. And also the filters were not working. So, I asked it to fix that. So now we can see

### Fixing UI Inconsistencies [50:59]

here that we have all of these various options. And now we need to actually go ahead and polish a lot of them. Now this is going to actually take some time. So I'm going to do this on my own, but I'm going to show you how to do this yourself. So the first thing you want to do is I'm going to come here, click on inspect, and then you can actually see all of this over here. And it's important that you are able to review the code. So you can open this up and you can click here and then click on some of these elements. And then you can pretty much view all of the uh element details over here. Right? So, first of all, I'm going to make sure that I choose the topmost one. And you can see here that it has a border radius of eight, which is not really relevant right now. That's totally fine. And technically, this border will not exist. Uh right now, it's only there for the sake of um showing it over here, but that probably won't be there. Here is our main email row. So, we have all our padding set up. We have all of this set up here as well. All of this is fine. Now, I know here that the color is incorrect. So if I click on this and click on this piece of text, you can see here that it's using color content tertiary which is this. But in Figma, it's not that it's probably something else. It's content secondary, right? So it's made a mistake um over here. So that's definitely one thing that we need to fix. Um so if I come back and click, let's uh let's try this again. Yeah, there we go. Okay. Uh the hover state is also to an extent incorrect. All right. because the hover state is probably a bit too strong. So, what I'm going to do now is going to come back over here to Claude and we're going to ask it to do one more pass at all of this and then if it still makes some mistakes, I'm going to go ahead and correct the nitty-g gritties over here. Right. So, I'm going to start off by coming over here to Claude and let's go ahead and just say I'm going to search for context and let's see how much has been used up. All right. Uh, we're on 19% so I guess that's fine. Now I actually just realized this is not the total context. I guess this is 19% and if we come back up here again this is around 38% so that's already 60% and I think we alo utilize some over here which is a little bit more. So I think we're already exceeding a lot over here. So what I'm going to do now is I'm going to open up a new chat conversation. All right, I'm going to go and choose this and I'm going to come here set this to set. And this time I'm probably going to choose it to high. And I'm going to say there are a few UI inconsistencies between what is added in code and what is there in Figma. Can you do another pass again and review each of those variants one by one and fix them? All right. Now, it doesn't look like it can actually access these individual items. So, what I'm going to do here is I'm going to go ahead and just probably move this down a little bit. All right. And I'm going to take a copy of all of this. Bring that down. And I'm going to create a new section over here. Or let's create like a frame. Maybe a frame is better. All right. And I'm going to increase the size of this. And then probably choose the same colors. And then move this to the back. and then select all of these items, command X, and then paste that inside over here. And uh this is just going to be variants. Right. So I'm going to come over here, copy the link over here, and paste that over here. And I'm going to say I've created a new frame with instances of all the variants, making it easier for you to actually access and view the specs of the email row. All right. Now, I can also point out a couple of mistakes that I already see. All right. And in fact, what I'm going to do here is I'm going to open up Claude and open up the preview as well, which I don't think I can do right now anymore because I guess that was in a previous conversation. But I'm going to come here and say, I see a few issues already, and I'm going to point these out to give you a head start. The color of the date is incorrect. The body copy is truncating very quickly. All right. Maybe we can break these down into uh a list of items. So 1 2 3 very early. Maybe that's the better word. Let's see what else we have. And then here in this is fine. So over here the opacity value is not correct. But we can fix that. Over here in the category we have work and we should only use the neutral variant. Right? So someone come here and say the category tag button should always use the neutral variant and the rest of the uh color variants can be used for the labels. All right. So that's fine. And the count I think this is also incorrect. want to come here and say if you um yeah the subject the color of the date is incorrect as well as is the number count. What else? Uh let's see what we have with labels. This is to an extent fine. And you can see here the labels disappear on the hover state. So I'm going to fix that. The labels actually disappear on the hover state. But that should not happen. All right. What else? And the past year date. This is fine. Now, another one thing that I could also probably do here is I can come back down here to Figma and I can actually take an example over here. Probably this for example. All right. Copy that. Paste that over here. All right. And then make it a little bit easier for AI to understand everything. Paste. And then we also need to turn on the numbers. So I'm going to come here and turn on the count. So this is going to be let's say seven and then seven and seven 7 and 7. All right. And then the description. We're going to probably make this a little bit bigger. So I'm going to copy this and paste that over here. and maybe take a few more. Um, yeah, let's just go ahead and try to get this done properly. All right. And then this one, I'm going to copy this. Paste this over here. Just replace everything. Okay. And I'm also going to add some icons over here. So, we're going to show the trailing assets. So maybe to labels, trailing assets, maybe with an trailing button. And here we're going to I'm going to update this to use the paperclip icon. That's fine. And then I'm going to choose content secondary. That's okay. And over here as well, maybe just a single label, right? And I can change the variant of this label to be a different color. Or maybe we just make this brown, I guess, right? And the same thing over here. We make this yellow and I'm going to make this green for example. All right. Um couple of examples over here. This is also fine. And I guess this should be enough essentially. Right. And so this is fine. I'm going to go ahead and now let me know if you have any questions. All right. Yeah, I don't know how to move this to another line. Let's see. There we go. Okay, that's perfect. All right, so this is fine. And uh we're on it high. Let's go ahead and make sure we use a lot of power for this and run this. All right, so it's gone ahead and made a few changes and it's also taken a couple of screenshot, but it's actually not perfect. It's gone ahead and made a few changes where the category is now neutral colors. It was previously a different color, but this category can only be a neutral color. So, it's gone ahead and fixed that. It fixed the date as well is now secondary. Before it was tertiary and the subject no longer truncates early. So, I think I'll have to find an example for that. And also the labels on hover it is the date is just hidden and not the whole container. So, if we can quickly take a look at this in the browser, if you see over here, if you start over here, this looks fine. But then here again it is truncating very quickly and ideally we don't really see the background over here. There is something weird going on and essentially this entire thing needs to take up the entire width over here. Um and then here you can see that it's not following any of that because the opacity and the color is obviously not correct. So what I'm going to do now is I'm going to take some time and just point out some of these issues because it's not able to really figure this out and sort of spoon fade a little bit so that we get it pixel perfect exactly the way we want. and I'm going to come back and I'm going to show you the final result once that's done. All right, so I spent a good hour trying to polish a lot of the details and now it's in a state that I'm really happy with. So if I come over here, you can see that now it really matches our design perfectly well and it can also scale and behave the correct way. So I'll show you a couple of examples. So first of all, I can actually click on these items and now they actually have the correct colors, the correct states and pretty much everything that I need. So it works u really well. Then we have some resizing rules. Now one of the resizing rule over here was that this actually takes up 16% of the viewport width which means if the browser width decreases so is this area. And then we also have this truncation over here. And the logic here was that this actually takes up three times the size of this. So if we take the width of this and multiply this by three that would be the width of this. And all of this is actually real time. So if I can go ahead and choose inspect element and over here if I now maybe you can pay attention to this part and maybe I can even show you the code first quickly. So if I click on this you can see here that the width is actually 16 VW which is the viewport width and this area actually shrinks as and when I actually reduce the width and you can see that area is actually shrinking. Now the same thing is happening here as well. As the browser width decreases this area and this area is essentially a 3 is to1 ratio and you can see that actually happening in real time. So 3 is to1 ratio. So if we take this width and multiply it by three we get this and this is actually the logic that we want and this is going to help us when we're prototyping. All right and you can see here that things truncate really well and it's perfect. Now if I close this up, you can also see we have this hover state where it is exactly sort of clipping where we want it to. Now we can take a look at a couple of other examples. So this one is items that are red but don't have any labels. So because they are red, the notification dot doesn't exist. And then everything else looks exactly as it is. That's totally fine. We have unread with a category. So the category can only have gray color neutral tags over here. So we have that as well. And I think everything else also looks pretty good. We have unread with count. Now here it actually messed up the logic. So I asked it to fix it. So when we have two messages, we would see the number two. Three message, we would see number three. And when we have five, we would actually see one, two, and finally the last one, the third one in the list. All right. And again if I come down over here and click on inspect and if you can pay attention to this part over here as I shrink. All right. And as it gets closer you can see here that it starts truncating the text over here. And this essentially we're trying to maintain the last sender name. So we always want to show that and that's the rule that we actually want to follow. All right. That's uh perfect. And then here we have with labels. So you can see here that this one is getting truncated because these actually have a maximum width. We can have two. We can also have one with an icon button over here. You can see we have this nice how our state as well. And also have our states as well. Right? So we're already, you know, at a pretty good stage of prototyping this if we want. But we obviously need to do a little bit more work. And then here we also have something with the dates. All right? So if any uh email is in the past, it would show 2024 and right. And here if it is also obviously we're doing 2026. So any date before 2026 would show the uh year. Uh but then anything else. So this is probably today's time and here this is April 12 means that this is for the current year of 2026 right and so all of this is actually proper real logic right and this is looking pretty good. So now that this is done we can now finally go ahead and build a skill that allows us to create these designs and paste that in Figma the way we want. All right and even dark mode one also

### Code vs Design parity check [1:03:54]

works pretty good. I can sort of show you that the dark mode one is also done pretty well and so no problems here as well. Now, one of the things that I noticed here in dark mode is that this is actually using the wrong color and actually a very bright color. It looks fine in light mode, but in dark mode it's supposed to be a little bit more lighter. Now, I actually went ahead and checked the code and it was actually a mistake from my side. So, I went ahead and in Figma, I updated it. So now this one is actually using the correct color and what we have here is in the variables we actually had this token that we are using. So if I click on this you can see here that we're using this thing called tertiary alternate and we it was actually using the wrong token and so I created this token called as alpha y20 which is the correct color token that we want. But now our code doesn't actually reflect that. All right so what we're going to do now is we're going to come here to claude code. All right. And I'm going to come here and say, can you run a parity check between the variables in or let's say color variables in Figma versus what is implemented in code. Use the Figma parity check tool. All right. And we're going to basically use this tool which is a part of the Figma console MCP. So if I come into the documentation of the Figma console MCP and I come here to the tools reference, you can see here that under design system, we actually have something called as the Figma parity. Not super sure where exactly it is but it should be here right so I guess yeah so we have something called as the Figma check design parity Figma generate component doc so this is what essentially what we want to do compare the Figma specs versus code and implementation so I'm going to go ahead and copy this and then come down here to cloud code and just maybe paste that over here all right and I'll come here to Figma make sure that the Figma desktop bridge plug-in is there so just go to plugin go to development and choose the desktop bridge plugin u make sure that it's open and then I can come here and do that. And now we should be able to find that mistake that I corrected in the variables but not in code. All right. So you can see here that now it's using this tool called as the Figma check design parity. We're going to go ahead and give it some permissions for it to take a look. And uh it's looking pretty fine. So it's gone ahead and as you can see here it's fetching all the tokens that it's found. That's pretty good. and let's see how it actually does the parity and check how this works. It's going to be pretty fun. All right, so it's here with the summary and uh you can see here that it actually gave us it did a parity really well because this is the exact one that I was talking about which was tertiary alternate and in Figma we have this thing called as the alpha white 20 which is the new one that I added. So if I were to quickly show you a recap of that let me quickly open up the variables. You can see here that I added this alpha white 20 which is the new one that I added when I saw the mismatch. But then you can see here in code it's completely different. All right. And so now the fix is that we have to go ahead and add in the dark theme. We need to go and add that token. All right. Now I actually don't know if it actually did it. And you can see here it's asking if we want to make the fix right now. So that's one thing. The second thing is the missing primitive which was exactly this one. So this is the raw value that's missing. And then we have to then apply this raw value to this content tertiary alt in dark mode. All right. And we also see there's a another issue which is the tag button content neutral. And this seems to be something that's not related to what we were talking about. But we can quickly take a look and sort of look at this and understand. So here it says that the code defines color tag content neutral. So light and dark mode. And I think what this talking about is essentially this piece of text over here. All right. So this tag button. All right. This is exactly what we're talking about. It's using the tag content neutral. All right. But there is no tag button content neutral variable in Figma collection. So either Figma missing it or it's an unused token in code. Now we can also go ahead and quickly check the colors over here. So if I come down over here to variables and I can come down to this section wherever this is being used which is the secondary alternate. All right. So here if I break this for a second we see 9 C 9A which is not the same and then we have this one D3 D3 which is also not this. So I'm not entirely sure what is going on over here. And so if we were to actually fix this value let me actually quickly see what this is. So 1 D1 B16. All right. So I come down to the primitives. Let's see if we can find that. So I don't even think that sort of exists over here. Right. Yeah. 1D, 1B, 1 16. This is 900. All right. And then F1, which is this one. So we have a 900. And then we have 100. I don't even know where that's being used. All right. So we have content primary, and then we have neutral 100. So that's actually the primary. So what I can do here is I'm going to say for now, let's go ahead and fix finding number one and two. And to be honest, this is also something that we can do in code ourself. So if I open up cursor, we can actually come down over here and in the alpha colors we can add another line. So this is something that we can do ourselves. It's not really rocket science. So in the colors raw section in the tokens I can add this piece of line myself which is not really rocket science. And then we also need to find the semantic version of that and is probably somewhere else. So over here of course the color semantic. We can come down over here and in the dark mode section, we just need to replace this secondary alternate with the actual token. But now that I see that none of these are actually using the raw tokens, right? We have this raw, but then the semantic ones aren't really using that. And so we obviously going to have to fix that right now. So what I'm going to do is I'm going to go ahead and make sure we set this to set 4. 6 high cuz we're going to need some brain power here. I'm going to say fix finding number one and two. And then also I see that if I tag the file uh which is color semantic. css color semantic dotcss is not using the raw variables or tokens as we call it from colors raw CSS. All right. The semantic colors should not be hardcoded. All right. And uh we can add this over here. And we can also run this out. And then once it replies back, we can actually check for all this tag button. What are all the values that it is currently using? And you can do a quick investigation there as well. All right. So it's gone ahead and fixed everything. And now you can see here that the color is a lot lighter, which is perfect. And you can see here that in dark mode, it's using the tertiary alt, which now has the correct token value, which is white alpha at 20%. which is perfect. It's also taken a screenshot to verify it and everything looks good. And all the semantic tokens fully de hardcoded and referencing raw variables. So if I come back down here to cursor, you can see that now in our semantic colors, all of them are using our raw tokens, which is from here, which is exactly the way it needs to be. So pretty good. All right. Now, the last thing that we want to do is we want to go ahead and fix this parity issue. So what I'm going to do here is I can actually come here in the code itself and in this tag button this is where our components are. You can see here we already have the various tokens over here. So we have our background we have our colors and everything over here. So it's actually pointing us out to an issue which is the tag color neutral. All right with this content neutral which is there but there is no tag button neutral in Figma in the variables collection. Right. So in the neutral I'm actually using the color content secondary alternate which is fine and that is also what I am using in Figma. So if I come down to tag content I actually don't even have that over here. I'm actually using the main content over here. So I for the tag buttons I had like the content section and the surface section because essentially we have different colors. And I think for this one I'm just using from the main content which is why I think I probably ended up removing this one in code which we don't need. And so now this is actually being unused. So either in Figma it's missing or it's an unused token in code. Now we can leave this as it is because it's an extra piece of variable that exists but we're not really using it. We can actually go ahead and quickly check that out as well. So if I come down over here to our tokens and we come here to our um raw variables hopefully or maybe semantic variables you should see here right so we have the tag content neutral right this is the one that we don't have in Figma so what I could do here is I could just delete this from here or we could still keep it and you can see here it's just a warning so that's totally fine so we're going to go ahead and leave that as it is and save and I think everything is pretty good to go and now we can finally move on to the next phase of this. So we can come over here. And phase three is finally done, which is great news. So all that's pretty good. And now we're going to move

### P4: Create a Skill to Generate a Design in Figma [1:13:46]

to phase number four. Now before we four, let's quickly take a look at what we actually have. So maybe I'm going to open up cursor. And I have this plan over here. Now in the plan that we created, phase 4 is basically a skill which is an individual email row which basically creates a design and adds it to Figma. All right, we're going to create a definition of the skill as to what the skill actually does. We're going to implement the skill logic. All right, and then we are going to wire the code file references into the skill context. So we can ignore all of this. What we need to do here is come down here to the details and in the step number four which should be over here. All right. So we're going to it's going to create a skill called as the create email row and it's going to be triggered when we use the phrase create email row or design an email row. It reads the code files from phase number three as context for Acura's design generation and then it uses some tools over here. Sigma Figma set text Figma instance properties Figma initiate component and outputs a configured email row instance into the current Figma page. Right. Perfect. So now what I also will do is I have a set of instructions over here that I want to execute when it is

### Creating and reviewing the plan [1:15:00]

executing the skill. So I'm going to provide this as well. So let's go ahead and go to claude and I'm going to come down over here and create a new conversation. We're going to choose the same folder and this time I'm going to go ahead and choose um probably opus and we can go and choose probably a high. That's fine. So now I'm going to say let's go ahead and start building phase 4. Let's go ahead and update the plan to execute phase 4. All right. So for creating any design and to be pasted into Figma, always use a combination of the official Figma MCP and the Figma console MCP. Evaluate which one is better to use in which situation and use the right MCP. Now if we compare the Figma MCP and the Figma console MCP over here you can see that Figma MCP has this one tool called as use Figma and this is the name of the tool which basically does all of these things. So it can resize, rename, create, manage variables, modify, auto layout. It can create components and create frames. It can do everything. But the console MCP has specified dedicated tools for all of this, right? and it's going to use a uh a command called as the Figma execute which is essentially going to design in Figma. Now it's difficult for us to actually figure out what to use in what case and maybe we just let AI make the decision on whether it should use this tool called Figma use which is called use Figma or use the dedicated tools of the Figma console MCP. So I'm actually giving that complete freedom for AI over here. Now I'm also going to come to Figma and make sure we go to dev mode and we can see here that our MCP is enabled. So this is uh good to go. Now I can actually go ahead and also copy this entire thing. Maybe it's a little bit easier to do that. Come here to cloud code and I'm going to paste that over here. But I guess it pasted in a very weird way. So let's go ahead and actually mention one by one. So I'm going to go ahead and say always refer to the code component of the email to get the various specs and then use that specs and to create the design in Figma. All right. Then the next one is include inputs from user if not there. So I'm going to say always ask the user for additional inputs to gain more context. Provide a summary or an understanding and confirm with the user before implementing in Figma. All right. So we're going to ask it to give us a summary of its understanding and then we're going to paste that into Figma. All right. Then every time the skill is executed, we create a checklist and update that checklist as and when the steps are created. So this is also going to be a part of the skill. That's fine. And now we can also say include detailed instruction on how to execute each of the steps of that particular skill. All right. So I'm going to go ahead and copy this and paste this over here as well. So this is essentially going to be creating a skill and I'm going to update this to say execute phase 4 of creating a skill. All right. Then ensure to ask follow-up questions if unclear. This is fine. I think we already sort of to an extent um covered this. And ensure to include a step towards the end that takes a screenshot, reviews it and makes changes up to three times if needed. And then don't create unnecessary files and redundant information. and then set up parameters that allow us to control the variance of the email with realistic data. Now I'm going to do this later on when we come down to the phase five because in phase five we could have multiple emails that we are creating and then we could control the various parameters and I'm going to talk about this when we come to the next phase but I think for now this is fine. All right. And I'm actually going to probably go ahead and uh type here and say, "Let me know if you have any questions and need additional details. " All right. Now, one of the things that I want to do before I actually go ahead and paste in the prompt is that in Figma, I quickly came here and changed this to now take an instance of the master component and customize that instead. Now before we had decided that we're going to go ahead and make it construct everything from the code but instead of doing that we're actually going to go ahead and publish this component that we have in our library and then once it's published it will then use that take an instance of that master component and then customize it and the rest of the things will stay as it is. So, I'm going to come here and just paste the prompt that I had created. And I'm going to go ahead and just um put these out into bullet points so that we can quickly see it. And I'm going to give you a quick overview of what we are going to be doing. All right. So, number six and number seven are here. Okay. Uh we actually don't need the last one. That's fine. So, we're going to be focusing on phase four of the plan. and we're going to go ahead and update the plan in order to create a skill that helps us generate email rows and allow the and allows the AI to paste it into Figma. So, we're going to take an instance of the master component and customize it when the skill is triggered. And the email row component is going to be published to a library along with all the other variable tokens. And then we're going to mention that we're going to ensure that the skill includes the inputs that it needs from the users and asks any questions if unclear. And then it shows a summary of what will be implemented. And then once the confirmation is taken from the user, it's going to build the component in Figma. And then every time the skill is executed, create a checklist. Update that checklist as and when the steps are completed. All right. Then include detailed instructions on how to execute the step. And also use the Figma MCP and the Figma console MCP. I'm going to probably say the official Figma MCP as well as the uh console MCP with the respective tools depending on the task. Ensure to include a step that takes a screenshot, reviews it, and makes changes up to three times if needed. And then don't create unnecessary files and information. Right now, with this, I'm going to go ahead and run this. All right. So, Claude is asking us a couple of questions. So, we can answer that. So, before I rewrite the phase 4, I have a few questions that meaningfully change the plan's shape. So, first one, you said that the component is going to be published to library. Is it already published or should phase 4 include a publish to library step? This affects whether the skill uses the Figma initiate component from the same file or from a team library or whether it needs to verify the variable tokens as well. So basically I'm going to come here and just publish this first of all. So if I come here to the email row and I can open this up and I can just publish this. Uh if I come down here to variables and uh actually I need to come down to the library. I guess it should be somewhere over here the library. go to assets and then over here I'm going to click on this and we already have a couple of things publish. I'm going to click on publish and now we're just going to select the email row. This is the only thing that I want to publish. Later on we'll publish the rest as well and maybe to be honest we could also publish the inbox template together. Right? So that you know this is to an extent done. All right. So there we go. These two are published and we probably don't have to publish anything else. Maybe we have to publish some of the other components like the action bar, the action button. Maybe we don't have to publish the icons. We'll see what we want to do with the icons. We'll see if we have to publish the icons as well. And then the filter, the icon button, the nav menu item, the subheader, the tag button, um, and the section header. So all of these is something that we want to publish. I'm going to go ahead and say publish. So I'm just ignoring all the icons and publishing the rest. I'm going go ahead and say publish and this is going to publish it to our library. All right. So now I'm going to come back over here to cloud and I'm going to answer this question. I'm going to say the email row component as well as all the other items have been published to the team library. All right. And I'm also going to say along with all the tokens. Right. Perfect. Then the skill location. Should the skill live at this place or at a project level? So basically what it's asking is that if you see the URL, you can see here it says claude skills and then Figma create skill. Now if it saves it over here, this is going to be at a user level, which means no matter what project you have, it's going to create it at a global level. But we could do it under a project level inside the Figma workflows tutorial. So I'm going to come here and say create the skill under the project, right? So, we're going to go ahead and mention that out. That's great. Then number three is placement target in Figma. Where should the instance land? At the user's viewpoint center inside a specific frame. The skill creates a scratch frame and user clicks user picks prerun. Right? So, where do we want to choose? What we can do is we can go with option number A and we can paste that over here. Placement target. All right. And uh we're going to go ahead and paste that over here. All right. And then we go to number four. All right. Single row or multiple per invocation. Phase four is email and phase 5 is groups. Should phase four be strictly one row per run or should allow n rows in one go and phase 5 adds the section header grouping layer on top. Let phase 4 strictly be one row per run because I want to test if this approach works and make the necessary changes before we move on to making phase 5 which makes multiple rows. All right. Then inputs explicit versus generated. Right? So when the user triggers the skill, the skill asks for every field. The skill offers a mock data defaults and only ask the user what he wants to override and a hybrid where required fields are prompted. Optional ones default to mock content. So this is completely left to you depending on what exactly you're trying to build over here. But I'm going to go ahead and say skill offers mock data defaults and asks the user what they want to override. Right. Next. Then number six. If the component has eight variants plus instance props, expose all of them in the skills input step or start with a minimal subset and expand later. Now I'm not 100% sure what number six is and I'm so I'm going to say not sure I understand. Can you elaborate? And I'm going to say once we clarify number six only then go ahead and make the changes. All right. And let's go ahead and run this. Hopefully it understands what we're asking for. All right. So in Figma, the email row component has two types of configurable properties. Variant properties that make up the component set. And these are distinct things like theme, state, and red. Changing these means the skill picks a different variant from the set. Instance properties, toggles and overrides can be set on a placed instance. So basically the question is when the skill asks what do you want to override should it expose every variant access and every instance property the component support so that the user can configure anything the component allows in one go more powerful but the input step is longer start with common ones theme red subject preview date maybe and add more fields later once validated flow faster to test with phase for loop easier to iterate on now again I'm not fully un sure what it ask what it means so I'm going to say what do you mean by expose because when to take an instance of the master component. All the component properties are already going to be a part of that component. All right. And I'm going to run this and hopefully now we can get an answer and actually understand what it is that it's actually asking. So it says you're right. I was wording sloppily. All the component properties exist on the instance automatically once you initiate. Nothing to expose in Figma terms. What I actually meant about the skill prompt surface was which properties the skill proactively asks you about during here's the mock data what do you want to override x step every property is always setable via this figma set instance properties the question is which ones the skill surfaces in the conversation the skill walks you through every variant access and every instance property offering a mock default for each and letting you override any longer confirmation step nothing hidden option B is the skill only prompts about the core subset. The remain properties stay at whatever the mock data defaults to, but you can still change them in the confirmation step. Shorter loop, faster over here. So, what I'm going to do here is I'm going to say the AI can take a decision and come up with a random selection of component properties every single time unless there are actual specifics provided by the user. So, I'm going to let it make the decision and customize it the way it wants unless there are actual specifics provided by the user. Does this help? All right. So, it's actually understood and it is also going to go ahead. I think it already updated the file. So, which is pretty great. So, it says the it's updated summary of what it wrote and we can actually go ahead and take a look. Do you want me to go ahead and look at the create the create the skill file or would you rather review the plan first? So let's go ahead and actually review the plan. So I'm going to open up cursor and over here we should have phase 4. All right, which is great. So a oneshot skill that initiates the publish library email row library component into the user's current Figma file configures it with the mock data plus a random selection of component properties and verifies the output with a screenshot. Right. Exactly one row per run. Multirow and grouping layouts are in phase five. So this is fine. So B this is where the skill is going to be and over here we would have a folder called as skills and that would happen once the skill is created. Right now we are just updating the plan that will create the skill for us. All right. And all of this is fine. So every invocation of the skill requires a to-do list with the 11 steps and updates it as each step completes. So step number one is it's going to read this file which is essentially contains a list of properties then the utilities and then also the specs only if the visual mapping is unclear. Right now ideally this step is not important because the component is going to have all the paddings and spacings and tokens and everything. So there's no need to actually review the specs over here unless there is something broken. So that's totally fine. Then detect the placement target. So it's going to figure out where to place it. So that's fine. Then generate the mock data. This is also fine. And it has the various rules for dates as you can see over here. So that's fine. And then summary. And then you can see here it says do not touch the Figma before the final confirmation. So once we confirm it, only then will it actually touch Figma and do the actual work. And then it does the work. All right. And it's going to apply the various component properties. That's fine. And then apply other properties as well. I guess I'm not 100% sure here. Pretty much looks like the same thing, but that's fine. And then it sets the text, screenshots it, reviews it up to three times, and then reports it. All right. And then here we have the tool selection rational. So the official Figma MCP reads high fidelity screenshots during the review loop. It returns richer context and better image quality, right? So probably this makes sense. We're trying to validate, but the Figma console MCP is better for execution maybe. But it doesn't matter. We can let it do its thing. Now, this is phase five and phase six, which we can ignore for now. So, let's come back to cloud code and we're going to say yes, execute phase 4, and we're going to let it do its thing. All right, so it's gone ahead and written everything, which is pretty good. So, let's go ahead and take a look at that. And let's go and open this up in cursor. All right. So now if I just close this up and probably refresh this by opening this up again. Over here we should have something the clawed skills. All right. So we have that over here. It's not here but it's here which is totally fine. And here we have what we call as a skill. md file. Now every skill needs to be called exactly like this. Right? And the name of the skill is going to be essentially the folder name. But that's also something that we can change because the skill name is going to be over here. So this basically creates exactly one configured email row instance in the current Figma file by initiating the published team library component applying the mock data plus randomize selection. All right. So it's basically the same thing that we already saw before. All right. And now here is the file context. Now over here when you are building something for yourself this file is going to change. Now right now I'm only having one file as one example but right but ideally this would become your design system component file right and then we also have the email component node set to this which is fine. All right and there are some code spec location. So all the details regarding the specs are in this file called email row. So if I open up the source come down to components email row you can see we have all of this over here and in the email row we have basically all the v various configurations and we don't really have to look at all of that. That's fine. All right. Let's go back. Now we have the checklist. Now it's going to read the code spec for the email review email row. Now I'm not sure why it has to read the code spec but we'll come to that. Detect the placement target in Figma where to place it. Generate the mock data. present the summary to user and confirmation. All right. Now, ideally, I'm not sure if detecting the placement target in Figma is actually an important step. We could pro we could just focus on getting the summary from the user first confirmation and then we could detect the placement. All right. Apply the variant properties, instant properties, screenshot, review and report the node ID, applied properties, and the final screenshot to the user. All right. Now here it's going to read the code spec to actually understand the interface the default values variant logic render structure and pretty much everything. This is also totally fine. The output of the step is a mental model of every configurational prop its type its default and its visual effect. All right. So this is essentially for it to understand what are all the possibilities that we can customize this email component. All right. Perfect. Then detect the placement. Now I'm going to ask it to actually move this placement target detection a little bit later on because it's not important until we go ahead and confirm to the you to the AI what we actually want. The rest of is also pretty straightforward I guess over here and all of this is fine. What to create? There we go. Everything pretty good. Now what's it is missing is a checklist. All right. It actually has this checklist which is fine. So we can keep that as it is. All right. So I'm going to come down over here to Claude and I'm going to ask it to do two things. Number one is can you defer the placement step later on because there is no point in knowing where to place the design until the user has given confirmation of the requirement. All right. And number two is going to be ensure that the checklist that you have in the skill empty file is going to be updated by the AI as and when it finishes the steps. All right. And send this off as well. So it's updated the placement. So now it's we're going to read the spec, mock the data, confirm summary, and then detect the placement. All right. So that makes a lot more sense. And then the to-do list now opens up a list. And every first action is a to-do, right? Flip to in progress before starting a step and completed. And never batch or do multiple steps in progress. So if we come here and take a look at cursor hopefully I think this should have changed but I don't think it actually changed it but I'm pretty sure it um mentioned this steps over here right so um this is totally fine all right so now we can actually go ahead and trigger this the skill should immediately call the todoorite read the source files and then propose a randomized configuration and then wait for you before touching Figma so what

### Doing a Test Run of the Skill [1:34:58]

we're going to do now is going to go ahead and open up a new session and over Here I'm going to go ahead and choose the main folder. And this time we can probably choose sonnet and we can go with hi. And we are going to say check Figma status because first I want to make sure that the Figma console MCP is connected. So I'm going to come down over here and maybe let's just you know be over here. I'm going to right click, come down to plugins, go to development and choose the Figma desktop bridge. Actually not this one. Let's try that again. plugins uh Figma desktop bridge. Okay, we've got this over here. Perfect. Now, let's go ahead and run the uh check if the Figma status is connected, right? And you can see here it's connected to Figma. So, perfect. Really good. So, now we can go ahead and say um create an email row. And I'm going to tag or get the skill which is the email row. All right. And I believe we're not able to find that skill or maybe actually I need to type in slash because I guess slash will get the skills, right? Perfect. So here we have a bunch of my skills and I'm going to choose this one which is the Figma create email row. All right. And just to double check that's the name. It's called the Figma email. Figma create email row. Perfect. All right. for um assuming that you are a CEO coming back to work on a Monday morning. All right. Now, let's go ahead and just run this and we'll see how this works and let's see if we have to change the skill or make some changes at any time. So, you can see here it's launching the skill called the Figma create email row skill which is perfect. Now it's going to run its own tool called as the todo write which is basically going to create all of the todos for us. All right. And then now it's going to go ahead and start reading all the components. So it's doing the first step which is reading the code spec. So that's why it's opening up this source component and it's actually reading the email row. It's reading the utilities as it decided and it's reading all the lines and it's thinking as well. So we just wait for it and see what happens. Okay. And now it scratched off the first one because I guess it understood everything. And now it's going to generate the mock data and then present a summary to me and get explicit confirmation. All right. So let's see and wait for that. All right. So here's the configuration. So it's going to be a light theme status is unread and default which makes sense unread because it's on a Monday morning. And this is going to be an email uh a random sender. There's going to be a random subject like a weekly leadership sync. This is going to be the preview date. All right. And then there's going to be a count as well accumulated over the weekend. So it's actually understanding that maybe there was some conversation over the weekend. The category is hidden. Uh labels urgent and Q2 which is nice. And then trailing is a star icon. Now the trailing icon cannot be a star icon because it has to be either a paperclip or a calendar icon, right? And the placement in Figma will be deducted automatically right after you confirm current selection etc. proceed yes or no. Now I'm going to go ahead and actually run this and I'm not going to correct anything over here because this logic of choosing which icon to have which is if I come over here to Figma, we can either have either the um if I find that over here. Yeah, either the paperclip icon or the calendar icon. Now this is a part of the actual skill. So, in order for me to correct this, I will do it later on in the skill because right now it's actually running the skill and I don't want it to sort of deviate from its task. All right. So, I'm going to go ahead and say yes. All right. So, you can see here that if I come down to Figma, you can see here that it actually pasted that instance, but it actually pasted it in some random place. And we're going to make sure that it doesn't paste it, you know, on any other uh area, you know, by mistake. And so for now, let's just let it just but for now, we'll let it do its thing and we'll fix this later and you know, point out all these issues. All right. And so it's actually doing a lot of stuff over here. Now, I don't know if all of this is actually needed because this is going to take up a ton of context um and tokens. So, we'll try to see if we can optimize this to a certain extent at any point in time. But for now, we'll wait for it. All right. Um it's going to ask us for permissions to change things. So now I think it's going to set the instance property. So we probably just can see this and you know make it update things in real time. So hopefully it can do that. So all the booleans applied now setting text content. All right. So now it's probably going to change the name over here. All right. Let's take a look. So um now when I allow this it should probably come here and change it. As you can see it changed everything which is fine. It probably will change this as well. So let's try this again. Now it's taking a screenshot. All right. So uh let's see how this looks. So it got a screenshot which we can barely see anything over here. But you know that's fine. And let's see what it gets from that because it still hasn't updated the last two items, the labels over here and the icon. So we'll take a look and see if it can understand anything. All right. So the row is rendering correctly. All right. And need to verify the trailing icon. The label show placeholder. need to set that to urgent and Q2 with correct uh colors. So starting fix iteration one. So getting the updated node tree to locate the label instances. All right. So I'm not sure what this means, but it's going to use Figma execute to actually do that. All right. Found two label buttons. Set setting the label text and checking the tag button colors. But I guess it ran into some issues. The node shifted after the boolean toggle. So retraversing to get fresh IDs. All right. So let's see if it can actually fix that this time. All right, let's just wait. All right, so you can see here that it added the first one which is urgent and I think it has to change the other one and also change the color of this because this can't be gray. All right. So it's taken another screenshot. All right. So you can see here it says the labels live inside a Figma slot node and the Figma renders them but the plug-in API cannot access them. The tag button also exposes a type variant and no text property. This is a known slot mechanism limitation. The label placeholder text is the component's default slot and cannot be overridden programmatically. All right, so the second screenshot shows the progress urgent landed correctly on label one. All right, label two still shows label. One more fix is needed. Let me find the second label's current accessible text node. All right, so it fixed this one, but it didn't fix the other one. So let's just wait to see if it can actually fix that. All right. So you can see here that it actually finished everything and there are some issues that it was not able to fix. All right. And we're going to go ahead and understand how we can fix this. All right. Now I'm going to take this out and bring it over here. So everything to was actually fine. And you can see here it also made a mistake where it was supposed to show the names of multiple people over here. All right. because it was 12 people. So, it missed out on doing that. Uh, this was fine. This is okay. And here it missed out on doing a couple of things. So, there are actually quite a few things that we have to fix. So, I'm going to come back over

### Optimising the Skill and Testing again [1:42:26]

here and we're going to change set this to opus because we're going to need some brain power over here. I'm going to come here and say the first run was partially okay, but there are quite a few issues that we have to fix. Let's make sure we consider this and make the skill a lot more stronger and update the necessary documentation to make sure we don't make these mistakes. Right. Perfect. So, the first thing I'm going to do is the AI ended up placing the instance not in an empty area but on other frames that were already there in the file. So, make sure to place the frame in an empty area. All right, that's going to be the first thing. Then number two is you don't always have to use the Figma console MCP. You can also use the official Figma MCP and use the use Figma skill in order to do things if the Figma console MCP is not allowing you. For example, updating the components in the slot could be done with the Figma official MCP. All right, that's great. So I'm basically saying that you don't always have to use the Figma console MCP. You can also use the official Figma MCP and use the Figma skill in order to do things if the Figma console MCP is not allowing you. All right, that's that. Then number three is that the trailing icon button can either be a paperclip icon or a calendar icon. You use the star icon which is incorrect. This logic should already be available somewhere. If not, add this logic. All right. Then we also have this is all of this was fine. And over here, right, in the email instance that you created, even though the count was 12, there was only one name which was called Rachel Morrison, it needs to follow the logic that we had initially set in code where we would show three names if the count is more than three. Do you know where this logic lives currently in the project or do you not know what I'm talking about? All right, then last one. It looks like a lot of tokens was unnecessarily used and the AI was trying very hard to find information. Is there anything that we can do to reduce and optimize token usage as much as possible and make the system a lot more efficient rather than utilizing a lot of tokens? Right. So what I'm going to do is I'm going to go ahead and actually run this and let's see what we can do over here. All right. So as you can see here it's back with our findings and we can keep and we can quickly take a look. So the first thing is the empty area placement. So now it's added a line in the skill which basically figures a way to add it in a place where you know it's not overlapping anything else. So there's some sort of a logic. Second one is using both the MCPS and the Figma MCP uh the official one as a fallback. All right. So in case there's a problem then it uses the official Figma MCP and it's also created this new file called as the feedback Figma MCP strategy. All right. So there's some sort of rule over there. Number three is the icon. So it's added the icon. That's fine. Number four is senders and count coupling. So this was essentially the problem that we had where even though it's more than three senders uh you know it would show only one. So now it's basically you can see here that the first run was ignored and now the skill. md has a hard rule to follow that right. So if it is equal to or more than four then we essentially flatten via then it essentially applies a logic where we show multiple names. Now finally coming to the most important one which is token optimization. This is super important. So added an entire token efficiency rules section in the skill. md with eight hard rules. So first one is to use presets and not generate mock data. Now I'm okay with this and I can probably remove this line as a hard rule so that it doesn't really do this. I don't mind if it spends extra tokens trying to generate or think about what text to have. Um and it's fine if it doesn't really use presets. I'm fine with that. The next one is the get Figma component for development deep once caches the five text nodes and never traverses after toggling booleans. So I believe that once we get it, it's going to cache the text node ids and this essentially means that it's going to identify all the various text layers that are there and it's going to sort of store that so that it doesn't have to look for it every single time. All right. Then batch the boolean write into a single call which was basically it is applying the booleans it does it in one go. Parallelize text writes in a single message. Never retry figma set text. All right. So every time it was trying to type in a text it was running an error called as the node does not exist and this has to be verified by screenshot. All right. And this could have alone saved five tool calls in the first run. So it was trying to find that text five times and it couldn't do it. And so I guess there was an issue there. Next one is don't run a pagewide find all to find the instance sub tree. So in order to find a single component, it was going through the entire file which is obviously quite useless. All right. And then don't burn the review iterations on the slot limitation. Right? So if there is an issue with regard to slots, it shouldn't burn that or utilize the three chances we have for iterations. All right. And so basically it's updated a lot of these files. We can just quickly take a look at the this new file that was created. And let me just close this up and uh let me open this again. Um I'm not sure exactly where that file is, but we can take a look. So it's not in the skills file. That's fine. It's probably supposed to be somewhere over here in the components email row not here as well. But actually if you see here that it's there in this place called as the memory. All right. And this memory it seems to be a global thing for cloud code. Right. And so maybe we don't really have to access this file for now and we can leave it as it is. So now I'm going to say okay should we do another test run? All right. So yes that's the right call. The skill now has a lot of new rules. All of that is fine. And want me to cook kick off another one. And here are a few suggestions. Right. A designer reviewing APR on a Monday afternoon. Team lead with seven different replies. Legal team archiving last year's contracts. All right. So, what I'm going to do now, I'm going to go ahead and say run that skill, which is the Figma create email row. And I'm going to say create an email about a discussion between designers on making a choice between a few different candidates for a senior product designer role. Right? So just going to take an example over here and we're going to make sure that the plug-in is actually connected. So maybe we do that first. So it's connected over here. So instead of this I'm just going to cut this and I'm going to say check Figma status and see if this is working. Right? It's connected. So um as you can see here it's connected. So good to go. And now we can go ahead and just run this. All right. So it's given us a summary. So it's going to be an unread default and we have three names which is nice. So um because I said it's going to be a conversation of people. So it's going to assume that there are five and it's flattened into three and it's also nice. It's included an Indian name. Pretty cool. So subject line is senior product designer candidate debrief. All right. And then we have this preview. We've got a date. The count is going to be five. So that's fine. Category hidden. Labels are going to be none. The icon is also going to be hidden over here. So it's try to sort of simplify things for itself. Um the source preset is unread with count. So this is fine. And looks like now there's some sort of a preset. And uh the placement in Figma will be resolved automatically after you confirm a free area in the current page computed from existing top level nodes. Place 80 pixel below the lowest existing content. Um, so this is uh pretty fine and this is okay. And what I want to do is I'm going to say um can you this is great but can you add an uh a trailing icon in an appropriate training trailing icon. let's say an appropriate or let's say a contextual trailing icon and a label. All right. And uh then we run this. All right. So let's take a look at what we got and then we can see what happened. So it actually pasted it underneath over here which is actually correct. So, it just found an area which is an empty space and it pasted that over here. And you can see here, this is exactly how it needs to be. It's gotten the title also pretty well, the description, and it's truncating also really well. And it also got the paperclip icon, but it's not able to fix this slot issue. Now, let's take a look at understanding what actually happened behind the scenes, and this will help us understand things a little bit better. So, if I go all the way to the top, this is where it actually started. So it got pretty much everything that it needed and it found a place to paste it. So it found this area which is - 870x 3314 and it figured it out. Then it actually figured out and checked what are all the various texts that are available. Now over here it did this entire thing which I feel like is probably an overkill to actually just get the list of all of these five text layers. And so what we're going to do here is I'm going to ask it to see is there something that we can cache and store as a part of the skill. md file and instead of it always having to identify where these text pieces are. All right, that's going to be the first question that I have. All right. Then the second thing here is that it actually pasted a screenshot. It got most of it correct but then the labels were showing as label and this is basically the slot issue that we're having. The trailing icon was also not clear. Right? So then it said let me attempt the slot right with the use Figma official MCP per the skill and verify the icon identity in one shot. Right now it used that skill called use Figma and you can see here it says the official MCP can see the slot children proper instance nodes which the Figma console MCP could not. All right and then it figured out that these are all the variants. Now here it's inspecting the main tag button component to understand how to set the label and color. Now I don't think it actually has to check the Figma component. I think this could be documented inside as well. So that's one thing that we can say. All right. Next one. It's not able to name those labels. So which is why it's really struggling very hard to get this to work. So that's something that it's really struggling with. And then we get a report and the new screenshot. All of this is fine. And there was also another issue where it was trying to find the paper clip or the calendar icon, but it was actually not published. So what it did is that it actually let me it said let me do one last check for any local unpublished components. And so it actually went through the entire file and found two components which I had not yet published. So if I come down here to Figma, it was actually searching for it in my component library, but I had not published those components, right? So you know, basically these two icons, it couldn't find it. All right. Then it was able to finally swap it with the paperclip, which is fine. So now you can see here it's giving a summary where all of that was done within less than 10 tool calls. And I think we can continue to improve this. All right. And then the extra calls were spent on two design system gaps which is the label color and the text which is essentially the slot issue that we have and the icon swap. Now the icon swap we can solve just by publishing. So let's go ahead and quickly do that. So I'm going to come here to our components. Click on this. Click here. on publish. And we can pretty much publish the entire thing as well. The rest of it. I'm going go ahead and just publish that. All right. Now going to come down here to cloud code and I'm going to go ahead and try to make a few changes. First one is I'm going to say all the icons have now been published to the library. So you can refer to that. All right. Actually I'm going to uh stop that copy this paste this again and let's start um all the way from the beginning. All right. So let's try to see what where we could improve things. All right. So the first thing is this which is the cached ids. All right. So I'm going to say when getting the cached ID for the text, it looks like the AI ran the Figma get component for development deep tool. Now is this actually needed to be done all the time? Does this actually consume a lot of tokens or is this something that we can store inside the skill empty file because the text layers will not move around as we are getting an instance from the main component. Right? So I don't really know what is happening and it looks like there's a lot of thing that's doing and I'm not sure if you know we actually need something like this. All right. So that's one thing that we want to go ahead and mention. All right. And then this is fine. This is also fine. So here it is just setting the Figma text. All right. Now here it looks like the Figma official MCP seems to be a better job. So, what I'm going to do here is I'm going to say, do you think it's a better idea to always use the official Figma MCP and the use Figma tool with the use Figma skill for most of the execution work in Figma rather than using the Figma console MCP? All right, so I'm going to ask that one question and that's also fine. All right, that's also pretty good. And then let's come down over here. Let's try to see if there's anything else that we can do a little bit better. All right. Is there anything we can do to investigate this issue about not being able to rename the labels inside the slot section? All right. That's also one thing that we want to do. And um I guess that should be fine. All right. And let's run this. Now you can see that we have a brand new interface. And that's because while recording Claude Code suddenly decided to redesign their entire desktop app. So now we have a brand new interface. We've got a lot of new things and this is also absolutely brand new to me right now cuz it just changed immediately while I was waiting for it to run this. And so we've got a couple of uh new things. We've got this context window which I've always wanted which is fantastic to be very honest. Uh we've had this in other tools and finally it's nice to see that they're bringing it to the desktop app. So that's good. But anyway, let's go ahead and take a look at what we have. So the first one is that now the icons are published to the library. So you want to make sure that all your icons are published to the library. All right. And so this is good. Next one is the caching the node ids in the skill. md instead of re-query. So you can see that it says it's absolutely yes that we can absolutely cache them because the instant ids follow a stable pattern. All right. And we have this master node and then we have specific titles or text layers for each of that. Now this is actually great. All right. because this tool that it looked at which was the Figma get component for development deep call returned around 11 KB of data all right just to discover the ids which we could have hardcoded so caching this gives us some savings but the risk is that if the master component gets restructured the cache becomes useless and so we probably have to update the skill to use the new cache all right so mitigation is it's going to add a one line called as the cache staleness check. All right, to ensure and check if there has been a change or not. Now coming to the MCP. Now it's basically telling us not to use the official MCP by default and only use it as another option. Now what I'm going to do here is I'm actually going to come here and say agree with you on point number one and two. No problems there. All right. The next thing I'm going to do here is I have installed new skills for the official Figma MCP. Can you go ahead and look at those official skills that help the Figma MCP and now take a decision on whether we should still use the Figma console MCP or the official Figma MCP for all our use cases above. All right. And I'm going to go ahead and run this. All right. Now before I show you the answer over here, I want to show you something that I wanted to check. Now I actually went to the official documentation and I was looking for this place called as the Figma skills for MCP. Now these are the list of various skills that the Figma MCP actually gives you. And when you combine the tools that the official MCP gives along with this, things can get a lot better. And initially I only had a few of these skills and I essentially gave this entire website to cloud code and it I asked it to go through the entire list of all the skills and it installed the ones that we didn't have and Figma use is one of the most important skills that is actually there. So if I come down over here to claude code and I can actually open up another conversation that I was in. All right. So over here I actually basically gave it the link to that and I said do you have all the skills that are mentioned in this post. So it actually only had four of this and it did not have these three which are also very important. Figma generate design is a very important skill and Figma use is also a very important skill. All right. So basically it went ahead and installed all of that and you can see here it's added a star because it's got a lot of files which is around 20 reference files along with one skill file which is like super important right and once that these are set up I then went back and asked it to check whether the new skills are import are beneficial now and you can see here now that the verdict is where we switch the defaults for writing we use the use Figma tool and the Figma use skill file now wins. Three specific things that resolve the earlier caveats against it. So the font handling is now documented. So it explains how to exactly handle fonts. And then you can see here that there are a couple of MCP calls that the original Figma console MCP does. And a single use Figma script can do all of them together. All right. And so we can save a lot of tokens definitely because we're going to be doing one call right now. It also says that the console MCP is also important. So for example, getting screenshots is critical. The Figma console MCP screenshot capture gives us the real state. So we probably don't have to change anything. All right. And so now the new execution model for the skill reads are essentially going to be the console MCB which is anytime we're collecting information. writing is going to be use Figma which is for creating things and the library search which is when we need to check from a component library. It could be either of these two though both of them work right. So now the tool calls drop from 12 to 5 to 6 and it handles the slot label the nested icon swap cases natively rather than known limitations and this is super important and you can see here it says that we have been addressing the slot children by the virtual ids which fails. We never try to find one traversal from the stable parent slot. So apparently there's a different approach on how we can identify this. Right? So now we're going to let the Figma use tool use these skills that come along with the Figma MCP and then it's going to save us a lot of time and tokens. So the suggested sequence is the next run. We restructure steps five and eight to use the use Figma script and then we run the find one slot skill to update the slots. All right. So, do you want me to rewrite the skill with this new model and run it once to validate? So, I'm going to go ahead and say just update the skill for now. I will run the skill later in a different context window. All right. And you can also see that we're almost, you know, towards the extent we are used up 70% of that. And you can also now finally actually see what is actually being used up over here. And uh this is actually a very good way to actually understand what is actually taking up this context. All right. So that being said, I'm going to go ahead and hit return. All right. So it's gone ahead and updated everything for us and we are good to go. And essentially you can see here that it is caching some information so that it doesn't have to trigger this tool every time to get information about the component from Figma. Then it is compressed some steps by using one single skill called as use Figma which is going to do a lot of the work. Then for screenshots we're going to use the Figma console MCP itself. Right. And for slot label apparently there is an experiment that's baked in and we're going to see how that works. Icon discovery is going to happen through the search design system tool because now the icons are published and the Figma use skill. All right. is going to be listed as a prerequisite for the use Figma call. All right. So every time we use the tool called as use Figma, it need we need to pull up this skill and then we need to execute that. Now obviously we don't have to do anything. It's going to do that automatically. And so what we're going to do now is go ahead and create a new conversation, new session over here. And now we have this very nice overview as well. And also the usage of our models on a monthly on a daily basis which is actually uh very interesting. But anyway, let's go ahead and click on this, which is going to allow us to choose our specific file. And I'm going to come over here and I'm going to trigger that skill, which is the Figma email row skill. All right. And I'm going to say create a single email for a use case where a HR comes back to the office on Monday and is in the middle of compensation review cycles, right? And let's say we're going to say yearly compensation review cycles. And we're going to go ahead and this time let's try to choose um opus just to make sure that we get it right because once we make sure that this skill works perfectly then we can choose a little bit of a smaller model um which would be set. Right. So let's go ahead and run this. All right. So it's giving us a configuration which we can review. So there's going to be three senders. So that's three is fine. subject regarding engineering uh organization compensation ratings need final sign off before Friday and there is a preview date there's a count right now all of this is fine what now because we want to test I'm going to say can you add a category a label and a contextual sensible trailing icon button as well to the email right go ahead and run this all right so let's take a look at the generation and it actually finally got it right. So, it added the neutral category which is correct. We have three people. We have the number three which is perfect. Then it added the subject line, the description. And it also finally figured out the slot issue and it updated the text as well and also use the right icon. So this looks exactly like how a designer would design it. So now that this is done, we can then finally move on to the next step which is going about which is about combining the phase 4 and actually phase 5 and

### P5: Create a Skill that generates a Full Inbox [2:07:01]

phase 6. I'm going to go ahead and for phase 4 I'm just going to mark that as completed and we can design phase 5 and phase 6. Now I might actually combine these two because phase 5 is about creating an entire stack of tables and phase six is about using that template that we have to fill in the emails. So what we're going to do now, we're going to come over here and take a look at this. And now essentially what it needs to do is it actually has to now build these two elements as well. So it needs to build this navigation bar and top filter bar. And then once it builds the filter bar, then we can add the slots here. Now one of the things that we can actually do is in order to save time, I'm going to come here and update the plan to do something very interesting. So phase five is going to be this one. All right. Update the email row design skill to create an entire uh table. Actually, we're going to take this. I'm going to copy this and I'm going to paste that over here. So, we're now going to update this entire thing to create an entire screen and fill the emails inside. All right, that's one thing. Now, because we're going to be asking AI to actually take this template, make a duplicate, it doesn't have to actually code any of this. This will be needed when we want to prototype it. So what we're going to do now is phase six will be build the rest of the template which includes the side panel and the filters bar in code so that we can use it to prototype workflows. All right. So phase six is about building those components in code so that we can then prototype. All right. So we're going to go ahead and start off with phase five. Now before we do that, we need to actually go ahead and explain to it the various section headers that we have and how it all fits together. Now ideally the section header and the list items, they sort of go together. So if I were to show you a quick example of how we would do this. Let me just make a copy of this. I'm going to get the email. All right. Um I'm going to go ahead and copy that and I'm going to paste that over here. All right. We can actually just place it inside the slot. Okay. And we can set this width to be fill container. And uh we can delete this. We don't need this. And I'm going to make a couple of copies over here. All right. And then we can also take this section header. And I'm going to take that. I'm going to drop this one also inside. All right. Let's try that again. Take the slot. Drop that inside. And then we can take some of this and then paste this as well. Right. So ideally this is how the email would look where we have this divider this title which is going to separate and then we have the rest of the emails over here. Now one of the things that we want to do here is we want to have this logic where we will have yesterday last 7 days and here I'm going to say last 30 days and then I am going to actually we can um move this down instead of March that's going to be the previous month I guess. So we're going to do the last 30 days and then whatever month comes before that. Now, this doesn't really matter that much because at the end of the day, anybody can sort of to an extent override this. So, it's not really um rocket science here. So, I'm going to come here and set this to March. All right. So, with this, you can see here um I'm going to add the annotation here as well. So, this is going to be last 30 days and anything before the last 7 days or we can say uh before the last 30 days. All right. Whatever month comes after that. All right. Amazing. So now we're going to go ahead and prompt AI for this. So I'm going to open up

### Testing the Skill to Generate a Full Inbox [2:10:45]

cloud code and I'm going to be using Opus 4 six to uh go to plan mode. So we go here set to plan mode. All right, let's move on to the next phase. This time let's combine phase four and five where we need to update the skill to create an email row to include additional things. Right now, just to double check, I'm going to check if this is uh phase four or five. Actually, phase five and six. So, I'm going to come here and update this to phase uh five and six. Phase five and phase six. Right. The skill can either allow the user to create a single email row or it can use a template which has a sidebar navigation, a top filter bar and a slot section which can be used to fill in multiple rows of emails along with an email section header. All right. So, what I'm going to do here is I'm going to make sure that everything is published to the library. So I'm going to come down over here to assets. Click on the library button. Click on publish. And there's nothing to publish. So we are good to go. So what I'm going to do here is I'm going to come here and click on this. And I'm going to say here you can find the section header which separates email groups. All right. And then I'm going to come over here, click on this email template. Copy that. And then I'm going to say this is the email template that you can use which has the slot to fill in the emails. All right. And I'm going to paste that over here. So now it knows this. Now I'm also going to say here for the section header that there are some annotation. So you can check that out. So I'm going to come here and say for the section header there are annotations attached that you can read to understand when to use these section headers and how to separate email groups. All right. And um this is fine. Everything is looking pretty good. And now I'm going to come here and say there is no need to code the entire inbox screen template in code as of now because all you need to do is make an instance of the inbox template that is published in the library and add in the emails and the section header inside the slot component provided. Right now I'm also going to come here and just add to this one piece of line. All right. And add a piece of text here that says the section header and the inbox template have been published to the library already. All right. And I'm going to come here and say the email inbox template. And section header. Are we calling it the section header? Yeah, we're calling it a section header. So that is totally fine. And there we go. So, and I'm going to go ahead and make sure we're in plan mode. And let's say let me know if you have any questions and need additional clarification. All right. Now, before I go ahead and run it, I'm going to open up the plugins, go to uh development, and choose the Figma desktop bridge so that it's running. And I'm going to go ahead and run this now. All right. So, we finally have some questions. So, let's go ahead and take a look. So, how should the skill decide whether to build a single row or a full inbox template? All right. So what we're going to do here is I'm going to say autodetect from the trigger phase which is for example phrases like create an email row or create phases like create inbox, create full inbox, create an inbox with groups etc. Right? So it's going to autodetect it depending on what the requirement is. So we're going to go ahead and do that in mode B. How should the group structure headers plus row counts be decided? Right? So follow the annotations rules where for example use the date based rule from the section header which is today, yesterday, last 7 days, last 30 days, month. Pick two groups per run. Randomize two to five rows per group and derive a header text from the annotation. Right. So this is fine. All right. Then in mode B, how should each row's content be chosen? So from presets. All right. For each group, pick presets from email row or templates. tailor details to match the user groups etc. Other properties can still say randomize. This is fine. Pick random presets without catering to the date coherence. This is also fine. I'm going to go with the first one over here. All right. When mode B runs and an inbox template instance already exists on the page. What should the skill do? We'll say always add a new one. All right. So that's fine. All right. So we can now see that the plan has been created. can go ahead and uh move this over to the side and we can read what is going on over here. Now I don't know if I can actually increase the size of this. Uh looks like I can. So I'm going to go ahead and just do that slightly. All right. So the plan is to extend this skill where the phase five and phase six of this plan over here which is today that skill supports exactly one behavior is to drop a single configured email row and we're going to extend that so that it can also create a published inbox template component and fill the slot region with the section header instances and multiple email row and components. Right? So we've got a couple of user decisions that we already answered. This is fine. It actually has the node. The inner text has a single piece of text called as the title. Then there is no component property which is great. Then we have the fonts. We have the size. All right. And right now here you can see that it's fixed but we are going to test it out and see if we want to set it to fill. If it does not set it to fill automatically. All right. All of this is fine. Grouping annotations is copy varants don't show for today. Email all of that. Right. So today rows render without a header. yesterday, last seven days, last 30 days are literally literal headers. Anything older uses the full month as example, example March or February. All right. Now, the inbox template, we have those specific details as well. We've got the slot region. All right. It's a single vertical auto layout, which is perfect. Empty by default, so no clear step needed. All right. Now, it's going to affect all of these files. We can ignore all of that. And there's going to be an implementation system and it's basically going to figure out how to implement all of this. Nothing for us to do. We also have this checklist. Now, now for mode A, we have this which is the initial one which was basically the single row. There are unchanged items. We keep it as it is. And for mode B, which is the new one where we're going to create this template, we're going to have new checklist items. So read the presets and code spec, build the plan, group split, row counts per group theme, resolve each row presets, present inbox plan to user, and get explicit confirmation. Then we place it. Then it's going to place it in Figma and it's going to build it in Figma, screenshot it, review it. Here we have a hard cap of five iterations. I want to reduce that hard cap to uh three iterations. All right. And I'm going to just come over here and uh say uh reduce hard cap to five to three iterations. All right. And uh it's going to add that to the plan which is a very nice feature. All right. Then update the cache library keys in skillmd if newly resolved. All right. This is also good. These are the various steps for each step of this checklist. We don't have to really look into this. We can this all of this is you know pretty fine. There's some a lot of logic over here and uh looks uh pretty good over here. No problems over here. Verification plan. Test test how to run whatever. Right. So I'm going to go ahead and I'm going to say revise over here. All right. So now you can see that it's edited. It should be reduced over here. So we should be able to find it somewhere wherever that thing was. All right. Let me just open this up. Uh that was in the checklist I believe. Right. So let's go back to the checklist. All right. And over here now, now it says hard cap three iterations. Right now we can go ahead and execute this plan. So I'm going to go ahead and say um accept allow edits. Now we're already at 55%. Now I guess this is okay. Ideally I could have started in a new conversation but I think this is uh fine. And u I don't know if it's actually starting the implementation. Okay, you can see here it started the implementation. Now, while this is going on, I want to give you a bit of context of what actually happened behind the scenes cuz a lot of interesting things. So, when I gave these instructions, it actually created a sub agent and that sub agent is using haiku 4. 5. All right. Now, what it basically did is that it was inspecting the header and the inbox template. Now, because this is such a very small task, it doesn't require you don't need a super high model. And so it ran a sub agent to do this automatically. And if you click on this, you can actually see that this is the prompt that was given by the main agent to Haiku. And when I see show more, you can see that there is so much context. This is an actual prompt that was given by the parent agent to the sub agent to do the job. And you can see here it says report back in under 500 words of structured bulleted content. Include any raw ids verbatim. Those are most the valuable input. All right. And you can see here it says do not attempt to write in Figma. Read only. Do not propose the overall plan. Just report the facts above. Right? And you can also see this is how they work. Right? Next, then it's going to run an agent. Now, this is using Opus 4. 6 because it needed a little bit more brain power and it's using the design skill extension and here it's extending the plan. So, here you are designing the claude code skill upgrade. All right. Produce an implementation plan. I need step-by-step execution. Do not write code or edit files. Return the plan as a structured present. Okay. You can also see here that there is so much context that the parent agent gave to the sub agent. All right. Now both the parent agent and the sub agent can also have the same AI model being run but it's just that these sub aent have their own context window. All right. So they are focused on completely one single task. All right. And now we're going to let it do its thing and I'll be back when it's done. All right. So now it's gone ahead and updated it. Now what we can do is run it. Now I'm going to go ahead and open up a new conversation. And over here I'm going to probably choose sonnet. Uh over here for um hi. I think that's fine. So I'm going to go ahead and say execute. All right. Figma email row skill. And I think sometimes uh this issue happens where we can't really trigger these skills. So Figma email. Yeah. Okay. We got it over here. So there we go. Okay. So I'm going to go ahead and run this and save. Create an inbox where the user is a senior product designer at a fintech company. All right. And maybe I'm just going to give it this much at a fastpaced high growth fintech company. All right. So maybe we give it something very vague. and we're going to go ahead and run this. All right, so it's gone ahead and created it. So let's take a look in Figma and see how that looks. Okay, so this is what we have and you can see here it's an instance and it's actually done a pretty great job. So it's a design review uh payment onboarding flow feedback needed. This is fine and there are some small inconsistencies over here and that's because of my component. I think there was an issue um when I was building it. So you know we can ignore this for now. Not important. um because it's just using an actual instance. So if you see here, this is an actual instance. If I open go to the file, you can see here it's actually using an instance and then you know and then everything is working as it should. Um it looks pretty good. All right, it did miss only one icon over here, but I guess that's okay. We can do it in exception. But it was able to figure out every single thing. Um it even added the section headings correctly. So yesterday, last 7 days, and then it added March. So, uh, this is fine and I think this looks pretty good, right? So, if you're creating emails and you want to quickly mock up designs, well, this is something that you can do to quickly do them. Now, one of the things that I also did was that once it prompted, I basically went and asked it, do you think is there anything we can do to improve the skill execution, make it faster, reduce mistakes and or reduce token optimization. All right. Now you can see here it did quite a few screenshots and it was running around multiple times over here because you can see that it used this tool around five times which actually wasn't needed and so it found out a couple of things that it could fix. All right. So now you can see here that instead of running 10 trips it's going to you know go to Figma two times. All right. And it's going to have 30% less token consumption. And I asked it to basically implement all of the steps and uh it was uh pretty much done. So the next time we run this again, it should be a lot faster. All

### P6: Building the Inbox in Code [2:23:59]

right. So now that this is done, we can go ahead and mark this as completed. So phase five is officially done, 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 cloud code 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 high. 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 I'm going to go ahead and make a plan. 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 drop-downs from the playground. Cleanest match to Figma lease 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 I 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 3 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 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 tool tip or a readme note. All right. So I'm go ahead and 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 fine. And uh we'll 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 is 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 ahead and run this. Okay. So now we have the plan. Let's go ahead and quickly take a look. So we're now going to be creating the inbox template in code. All right. So phase 1 and three delivered the notion email row component plus an interactive preset playground. Phase 4 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 /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 row demo. So there's going to be like a separate thing once pushed to GitHub. Branches can build interactive prototypes, active navigation routing, filter dropdowns, detailed pane menus, composition workflows on top of the inbox without the playgrounds presets getting in the way. So this is totally fine. Then it has the Figma source, the template structure. All 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. All of this is fine. 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 atoms. 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 4, but we can ignore this for now. So, let's go ahead and just, you know, accept and allow edits and let it um build it. And then once 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 uh we have this here uh we have these labels also moving. So this is actually looking pretty good, right? And one thing that I want to do here is um 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 for 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 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 uh 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 uh 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 of that and then from these branches you can then start updating and making changes to the prototype um as the way you want. All right. So, let's go ahead and uh upload this to GitHub so that we can then

### Setting up Agents.md to work with other AI tools [2:32:21]

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 aents and 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 incursor and inside aents 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 idees like cursor, cloud core, codex or anti-gravity, those tools should still be able to identify these skills. So here I'm in the cloud core 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 we 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 sayscloud/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 cloud. 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 has to be another folder called as dotcloud for cloud 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 aents/skills or dotcursor. kills. It also says here for compatibility cursor also loads skills from the cloud code and the codeex directories. So even though we have created a project inside cloud code that those skills will be recognized by cursor and similarly for codex we would have a codeex/sklls but if you created something in cursor cloud code would not be able to recognize that because cloud code can only recognize it if it is in the cloud file. Now moving on to codeex. Now with codeex you can see here that we have again pretty much the same thing. So you can see it says for repository the codeex scans aagents. skill skill in every directory you're working on and use that. And if you have to take a look at anti-gravity, anti-gravity 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 uh folder called skills and just duplicated it into aents 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 cloud. md. Now if you see over here cloud. md and agents. md are pretty much the same thing. It's just that claude will read cla. md and the other idees like anti-gravity cursor and codex are going to read agents. mmd. That's just how they work. And when claude is actually reading claude. md, it's going to see that there 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. m MD right or else if we have the same duplicate over here in cloud. md we're basically going to have a case where you know it might be outdated information in 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 claw. 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 is you can type in slash and type in it this basically see says that it will initialize a new cla. md file with the codebase documentation. So what I did was I went ahead and ran that and then it update the cloud MD file and then I copied all of that pasted that in the agents. md file and then in the cloudmd 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 Nex. js. Now, what we can do over here is that you can see here that when you use Nex. js, the way 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 /inbox. All right whatever the website is /inbox would be over here. All right. And if we have a settings page that's going to be another folder and promotions is folder. And inside inbox you could have another folder which would be basically for example inbox/ 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 I'm going to choose set. 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 prefill 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 click on the sidebar navigation inbox should take me to the inbox page. Promotion to take promotions page. All right. And we'll go ahead and run this as well. There's 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 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. And I'm going to go ahead and run this as well. Right. So now you can see here it's h 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. Now this is done. We can

### Uploading the project to GitHub [2:40:48]

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 hourong video, I've 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 there 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. And 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 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 we 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 right and then come down to claude and I'm going to say 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 later on how they will do this. But for now we can ignore this. Right? So now if I come here to uh GitHub and I press command R to uh 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 uh 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, 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

### Working in branches & merging via PRs [2:44:12]

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 I'm going to come down to cloud 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. 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 social 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 social tab or feature social 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 we come down over here to cursive, 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'm 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 are in the socials tab. But when I come here to claude and what I'll 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. 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 dotsocials 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 example 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 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 set lower 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 are a designer and you are 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 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 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 really 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 gitpull 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 designs 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 rundev. 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

### Hosting the prototype on Vercel [2:51:44]

we are going to host this on Verscell. 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 Versell so that anybody can actually access this. So let's go ahead and set that up in Versell. So here I am in Versell and this is my personal Versel 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. 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 /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 socials 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 domain 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 tabs 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 tab. 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

### Building and Hosting an Experimental Prototype [2:54:28]

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, right? So, what I'm going to do here is I'm 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 uh 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. 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 hover 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 local host. So if I come here to my browser I have my local host 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. 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 that we're going to do here is going to come down to cloud 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 Versell Verscell 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. 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 vers 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, I'm going 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 and I'm going to 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 we 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-inspired Team Playground for Internal Prototypes [2:59:00]

Shopify's website. And this is actually called Shopify. design design which is essentially a design website which showcases the work made by the designers. Now I'm not sure if you 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 like it their own internal dribble 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 dribble 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 down 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 storybook 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 homepage, 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. And we'll 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 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 localhost 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 chithon, you can see that now I'm under prototypes under chan and that is pretty much the same thing that we have over here which is prototypes and chithan. All right. Then once we have that I then have this experiment. So I can click on this and then it's basically 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 APR 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 APR and then merge to 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 APR 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 going to come down to the tubers 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 Chayan and then I'm going to see what Chayan 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 als 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 8. And this one also is going to be phase 9. And uh 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

### P7: Documenting components in Figma with Uber's Uspec Agentic Workflow [3:07:13]

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 9. 7. And then this is going to be our phase 8. 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 aspect. So we're going to do that right now. So, here's a documentation that was released on March 11th by Ian, who works at the design system teams at Uber. And basically what he did was he found a way to sort of automate documentation specs in Figma really well. And I'm going to show you how all of that actually works and how all of this actually comes together. Now, I'm not going to go through this blog post in detail, but I'll show you a highle overview. As you can see here that this documentation was actually created by AI and he set up a nice system that allows us to do this really well. All right. And so what it allows you to do is to set up six different types of documentations which is anatomy which is essentially all the elements that form that particular component. It could be icons, it could be atoms, it could be anything else. Then APIs. Now these are things that we as designers actually never ever think about. But APIs are configurable properties. So for example when we use component properties for booleans or text or instance swaps APIs are is what we call as component properties but in developer language and these are things that we never think about. So when feature teams are using this component they should be able to customize it any way they want. Then we have the various properties which is essentially the component properties that we have. So this is from a developer perspective and designer's perspective. Then we have our color tokens. structure which is essentially your height, spacings, paddings, all of that. And then we have something for screen readers as well. Now he talks about how to set actually this up in simple steps, but there's a lot more that actually goes into understanding how all of this works. So that's what I'm going to go ahead and show you how to do that right now. Now if you come all the way down, you will find a link over here which says USPEC design. And opening that up will land you over here. And this is where the official documentation is. Now there are a lot of things over here. Now and you can see over here that there are specific pages for each of the various types of documentation that you can create. So for example for an anatomy documentation that looks like this. There are various steps over here. Right now ideally we don't have to look at any of this but it's important to understand how all of this really works but you can do this in your own sweet time and is not super important right now. But what we're going to do is we'll go ahead and start setting all of this up. I'm going to come here to the getting started section. Now let's go ahead and look at this one by one and I'm going to do this completely from scratch. So the first thing is to set up our agent. Now we have cursor, cloud code or codeex. Now it doesn't matter what you're using. The steps are pretty much the same. Now because we've been using cloud code, I'm going to click on that. First of all, install cloud code which is something that we already have. Then you want to clone this project file. And you can see here it says git clone. And this is essentially the project file which is going to have all the necessary files needed to enable this documentation. And I'm going to show you that in a second. And then you essentially want to open that project. And once we open that project, we have a couple of things that we need to do. We're going to do that and make sure that we always use the highest model. And right now Opus 4. 7 was just released. So he'll probably update this to be Opus 4. 7. All right. So now let's go ahead and set this up. So the first thing we need to do is we're going to go ahead and download this project folder. Now if you want, you can actually go to your terminal. You can copy this and paste that. Or if you want to do it the nontechnical way, you can click and you can paste it over here. And this is where you will land. And all you need to do is come over here, click on the code, and you want to choose download zip. And that's going to download the project files for you. And you can see here that this project file is downloaded. All right. Done. Now, the next thing we want to do is set up Figma MCP. Now, we already have all of this set up, so we can skip this part. All right. Then you want to connect the Figma desktop bridge plug-in, which is also done. So, we can skip that. All right. Now we need to come over here and do this thing called as a first run. Now before we understand what this first run is, let's go ahead and take a look at this documentation. So we actually understand what is happening behind the scenes. Now you can see here that the this whole thing works based on skills. So for example, if I come here and open up cursor, now he actually had made this for cursor, but this can be applied to anything else. If I come down over here to the skill section, you can see that each documentation that we can create has its own skill. So if we want to create the anatomy documentation, that is going to be a specific skill. If you want to create the API documentation, that's going to be a skill. Color, another skill. Motion, So I hope you get the point. So all of this runs based on skills. Now, if we go ahead and click on this skill. md, this basically has all the instructions the AI needs in order to create a nice anatomy documentation for us. Right now, I'm not going to go through this in depth because there's a lot of information over here. But at a high level, you can see it basically gives guidance on which tools it needs to use the specific workflow. All right? And for each workflow, there's specific set of steps that you see over here. There's a lot of code, a lot of information. You can, you know, sort of ignore all of this. None of this is actually relevant. But one thing that you also see here is that for every documentation type, there are specific details that help the AI as well. So not just the skill, there are also all of these specific details that are like essentially reference files for the AI to understand how to do the job effectively. Now, we don't really have to look at any of this. None of this is actually relevant for us right now because it's too complicated and too technical and we will never understand this. But if I come down over here again to the skills and I open up let's say anatomy over here. All right. Let's quickly take a look at the various steps that it would follow. Right. And this is something that's simple for us. So first one it verifies the MCP connection. That's fine. The second thing is that it actually reads the template key from USPECs. config. json. Now what exactly is this? Now this is where the first run skill actually comes into picture. So, so what happens is that there is actually this community file which has a template of the documentation for every spec type that you see over here. So, if I go ahead and click on this, it's going to open up Figma community and this template file. All right? And what I'm going to do here is I'm going to go ahead and say open in Figma. And you can see here it's opened up this template file. All right. I'm going to go ahead and change the color of this because I don't really like those bright colors. And what we need to do here is we want to make sure that everything you see over here is customized based on your brand identity. So what's going to happen here is that we need to publish this library so that each of these templates has an identifier number. And when I come back to GitHub and if I come back over here that is what we call as the template key. So when we run this anatomy skill, AI is going to know which component or essentially this component is the one it needs to pick and then customize for this particular skill. All right. And then it navigates to the component and extracts the data, does some evaluation, navigates to the destination if it is in a different file. It imports and detaches the anatomy template. It fills the header details. builds the composition, all the respective details and then it does a visual validation. Right? So this is how all of this actually works together. Now in order for us to identify what is this template key, we need to actually run a skill the very first time we do this. So obviously I'm going to do that with you. I'm going to show you. So if I come here to claude and we have this skill, all right, called first run. And what this basically does is that it actually identifies that particular template key and saves it somewhere. So what this skill does is that you can see here it verifies the MCP. That's fine. All right. It gets the published library link. So we have to publish this as a library. All right. And then it navigates to that file and extracts the various keys. So it's going to identify the key for this and it's going to store it. All right. And you can see it extracts the keys and then it saves it in this file called as the uspex config. JSON. So every time we run this anatomy skill all right and if I come down over here it is going to reidentify that template number from this. config. json file. Right? That is how this entire system actually works. So let's go ahead and come back to the documentation over here. We can actually close this up and close this up as well. Now over here we're going to come and see what is it that we first have to do. All right. Now we added it to our drafts and we have to publish this as a library. Now I'm going to come here to Figma and quickly what I'll do is I'm going to select each of these items. All right. And I'm just going to go ahead and change the fonts of this to what we are using so that it looks similar to us. And maybe to be honest, maybe we just do anatomy for now. All right. So, I'm going to come over here and I'm going to go ahead and choose vendans. That's what we're using. I'm going to update this as well to also vend. Update these two to um vendans. And uh we have a couple more details over here. And uh yeah, all of this and we have this number as well. Yep, this is also going to be when Sans. All right. So, actually that's not the font. I just realized that we need to use a different font. So, I'm going to come over here and choose Momo Trust Sans. I think that's the font we were using. Um, Momo Trust Sense. All right, there we go. Okay, so this is the font that we're using. And I think also a little bit of letter uh reduce the letter spacing to maybe like 0. 2 2 or maybe 0. 5. Yeah, whatever it is. That's fine. Right. And now we actually have to publish this library. So I'm going to come over here, save this somewhere, right? I'm going to rename this to USPEC template demo for example. And then I'm going to come here to the assets. Click over here. And then I'm going to go ahead and publish this library. I'm going to publish all of this over here. Now once this is done, now we can come back to our documentation over here and we've confirmed this. Now what we need to do is we need to run that first skill. So what we need to do here is open up our project and I'm going to come over here, click on open folder. I'm going to come here to app projects and I'm going to choose main and go ahead and run this. Now we are in this particular file. Now I can also do this in cursor. All right. Now I've opened it up over here in cursor and I can open this and view our files. So here we have all our files and what we need to do here is we need to run this thing called as the first run skill. So now come here to cloud code and right now they just launched opus 4. 7 while I was recording this video which is uh pretty cool. And what we'll do here is I'm going to come over here and actually first we need to make sure that the desktop bridge plug-in is working. So, I'm going to right click, go to plugins, go to development, and turn on the Figma desktop bridge plug-in. So, that's working over here. And then I'm going to come back to cloud code and I'm going to say first run. All right. And I'm going to go ahead and hit enter. And we're going to run this skill. All right. So, now we have a couple of questions that we need to answer. So, the first thing is we need to select the MCP provider. So, select which one are we using? the Figma console or the native Figma, right? And I'm going to go ahead and type in the type in two because it's just saying reply with one or two. I'm going to go ahead and press enter. All right. Now, it's going to go ahead and ask the next one, which is save the MCP provider as a Figma MCP. And it's going to go ahead and verify the connection. I'm going to go ahead and say you always allow. All right. And then the MCP is connected. Proceeding. Now, which tool are you configuring USPEC for? Now this question is a little weird for us because we are using cloud code but not cloud code but so but in this case we'll go ahead and say cloud code cla and then now it's basically asking us permissions. I'm going to allow that. And now what it basically did it says skills synced. So if I come here to cursor we now have all of these files that you see over here that are synced to our project which is essentially use. main the one that we downloaded. Before we only had first run but now we have all of this right now. If you want to do this for cursor you could see you could do it for cursor and it would work and if you uh cursor actually is over here and then for codeex is also over here you know. So but we don't really have to worry about that right now because in cursor all of this already exists and all of this is fine right so let's go back and here we're going to go ahead and say we need the Figma template library rink. Right now Uber designers can skip this because obviously this was made by Uber and then designers in Uber would obviously they would have already have it set up. So, I'm going to come here and get the Figma template library file. So, I'm going to come down over here to Figma, and this is the file that we want to copy. So, I'm going to go ahead and say copy link. I'm going to come over here and paste this. And I'm going to go ahead and say trust workspace. So, now it's going to go ahead and actually search for these template components. As you can see over here, it's going to use the Figma use skill and then the Figma use and the use Figma tool. And then it's going to go ahead and search for the design system. And as you can see here, it's put out seven sub aents, I guess, because it's trying to find each of those seven template master components. All right. So all the templates found now detecting the font family. So we would have our own font family. So it's sort of detecting that right now. Now it detected it as enter even though we changed the font. But I guess maybe there's a small issue, but that's totally fine. So now you can see that it says setup is complete. You are ready to use EUspec. So now if I come back to Google Chrome um we get the confirmation and now we can go ahead and finally create our very first spec. So for anatomy all right let's come down over here. So now you can see here that these are all the available skills that we have and we essentially need to go to a particular page and run that skill. All right. And I'm going to come here to my Figma MCP notion file and over here we have this email row component. So I'm going to go ahead and just make a copy of that. All right. And then I'm going to open up a new um session, the same file, and we're going to choose Opus 4. 7. That's fine. And I'm going to go ahead and say create anatomy. All right. So, let's say create. Now, if it doesn't actually appear for you, just go ahead and restart Cloud Code. And the skill files should be there. And we'll go ahead and paste that. And then I'm going to paste this link over here. And I'm going to go ahead and say this is an email row component. This component has a lot of atoms and icons. It also has a slot component too. All right. Now, it's important to give as much context as you want, but in this case, I'm going to intentionally not give it too much context, and I'm going to leave it as it is. Then, I'm going to go ahead and say run. Now, it's probably going to stop, think, and ask us a couple of questions, and we will be ready to answer that. All right. So, now it's actually asking us to give screenshot permissions. That probably means that it actually added it somewhere in Figma. So, I'm going to come down over to Figma. And you can see here that we actually now have this over here. And uh it's a little off. Uh things are a little bit broken over here. But I'm not going to touch this. I'm going to let it do its thing. And ideally, it's not supposed to just place it somewhere. It's supposed to move it to a place where there's enough place. But it it's fine for now. We'll just leave it as it is and let it do its thing. And you can see here that it slowly brought in that template, placed in the instance, and now it's going to go ahead and start updating all of this, right? Um, so we just have to wait for it. And you can see here that it shows the unified template placeholders. All of that is fine. And then it's going to inspect the frame structure. Now, maybe this is not really going to work because our email row is quite long. So, um, we'll see how it essentially deals with that. But if you have a smaller component, this should probably, you know, work really fine. All right. And you can also say that the content is also filled. So, it's taking another screenshot. So, um let's take a look. Doesn't look like the content is filled. So, I'm just going to probably wait for that. All right. So, you can see here that it says that it actually did everything. And we're going to come over here to Figma and we can take a look. So, now, as you can see over here, it actually updated everything. Now, there's a small issue where we don't have enough space over here. So, I'm just going to go ahead and uh take this and we're going to probably just um shrink it down. Maybe set this to fill container over here. Or um maybe we could also just maybe just increase the width of this to fit in over here. All right. And uh there's also a little bit of a tiny font issue, but that's my issue. So I'm just going to go ahead and sort of reset that over here. All right. So now, as you can see over here, we got this done. So it says the anatomy and email row, a single row in an email list showing the selection state, detail messages, and the date. And then here we have the component structure, the elements compose the email. Right? So we have the first parent one, which is the main container. The second is we have the checkbox container which is essentially this which would have the checkbox. Number three is the content which holds the message details and then we have the date info. Now you can see here that it also missed out these two things. All right, as you can see it missed out the icon button and it also missed out the labels. And so what we're going to do here is that we're also going to ask it to say we also have a hover state which essentially has this action bar. So, I'm going to come over here to Figma and I'm going to open up a new conversation, new session, and I'm going to come here and um copy this command L, paste, and I'm also going to trigger the create skill. All right, create um anatomy skill, right? Create anatomy skill. And I'm going to come here and say what you created was perfect. However, there's a tiny couple of things that are missing. Number one, in the hover state, we are missing the action bar. Number two, we also have the ability to show the category and the labels in the email row. And there is also an option to show an icon button. All right. Now, in order to help AI, what I'm going to do here is I am going to copy this entire thing as well. And I can come here and say email row, right? And I can say refer to this email row component to identify the action bar in the hover state, the category component and the labels and the icon button as well. All right. And I'm also going to say please um ask me if you have any questions. All right. And I'm going to go ahead and run this. All right. So there are a couple of questions. It says before I update the anatomy, I have a few clarifying questions. All right. First one, the hover state and the action bar. The email row component does it have a dedicated variant for the hover state or is it an action bar boolean property that appears on hover? The distinction matters. All right. So the first question is the action bar appears only in the hover state. All right. We have a dedicated variant for the hover state in which the action bar is always visible. All right. Number two. Would you like me to regenerate the entire anatomy or patch the existing annotation in place? Add new rows. All right. So, it says option A is cleaner and more reliable and option B preserves the current frame but is harder to get pixel perfect. So, now come here and say feel free to go with option A if you think it is more cleaner and reliable. So, now it's going to go ahead and you know create this whole thing from scratch. Number three is are all these boolean toggles in the email row or are some of them slots and instance swap? I'll confirm by inspecting the element. But if you already know, it will save me a round trip. Right? So the category on the left side of the email is a boolean property. The labels are also icon is labels are inside a slot component. All right. And then the fourth one is the node for the update. Is that the existing anatomy frame or should I replace it? Um, delete and generate the next one or should I place a new version somewhere and leave the old one for comparison. So, I'm going to say leave the old one for comparison and generate the new one next to the current one that you created. Right? And I'm going to go ahead and lend this. And now what I can also do is I'm probably also going to go ahead and set the context window to 1 million tokens over here. Um, so that we get a lot more usage. But it's fine. You can if you don't have the 1 million um context window, you can stick with the regular one. Um and we'll go ahead and run this. All right. So, let's go ahead and take a look. Now, it's done the documentation. So, if I come back over here to Figma and uh this is how it looks, right? So, basically, it took the hover state and it added that because it has essentially all the variants. And I'm going to come over here and just change the color of this to something else so that we can see this a little bit better. Um, maybe make it a little bit more darker or maybe even a little bit lighter. All right. Yeah, that's fine. And now you can see here it took the hover state. It added pretty much everything. 1 2 3 elements 4 5 6. And to be honest, maybe I'm just going to make this uh, you know, pure white to make that easy. And then we just add a subtle stroke over here. And uh, yeah, just uh to make things easy to see. All right. Nice. All right. So then we have the sender name, the title description and then this entire content area. Um and then now seven is the atoms which are the labels, the icon button and this and it did a pretty good job as you can see over here. It pretty much listed down every single thing. Also mentioned whether it is a frame, whether it's a component, whether it's a text layer, pretty much everything. Um there's some weird font issue, but this is my problem and not the AI's problem. So I'm just going to go ahead and just sort of reset this. So yeah, there we go. And we have the same thing over here as well. Um there's some font issue. This is on my side. So I'm just going to fix that. All right. Then it also documented the action bar anatomy. All right. So I didn't actually ask it to do it, but it did it for me. And essentially it just created these various buttons and these are um icons over here. Right. So as you can see over here, it's actually done a, you know, pretty phenomenal job of setting all of this up. And it didn't really take much time. It's just one prompt and it cleaned up everything. And now all we have to do is you know if you want you can go ahead and do the rest of the documentation. So you can come here and type in slash and you can say go ahead and say create API create color create motion property whatever it is that you want and all of this is going to work perfectly fine. So hopefully that makes sense. So with that being said now we can come here and check off the next thing which is phase 7 which is completed. All right there we go. Now the last thing couple of things pending is that in phase 8 we're going to document this on a website as some sort of an interactive component that we can play around with and so we're going to go ahead and do that now. All right. Now

### P8: Building an Interactive Web Documentation [3:30:21]

I'm here on a website called as shaden and shaden is essentially a library which is an open- source library that you can start using if you want to build something and a lot of these components or actually all of these components are based on react native and I believe they also are a part of versel which is why it looks very versal branded. But what this website does is it gives you a list of components that you can actually use and has all the functionality, has the all the accessibility and you can customize it any way you want. Now if we go ahead and take a look at one of it, let's try to take a complex example. Um let's try a sidebar. All right. So this is a sidebar that we have. All right. Um maybe we take something not so complicated as well. Maybe let's try you know what? Let's go simple and let's just go with a button. All right. Now, here I have a button and then I have a bunch of documentations over here. And you can also obviously install this component directly into your AI tool, but that's not the point of what we're going to do. But essentially what you can see here, it has a bunch of examples. It has size, it has the various size and also the respective code for that. So for example, you can see here that it uses the size property change of the size of the button and you can see here that the it has the this is basically the code for it. All right. And then you have this for the default button, the outline button, the secondary button, the ghost, destructive link icon. It's got a bunch of things, right? And you can also see that you it's got some specific specifics such as you can see that the button group is over here that it can be put inside a button group. It can be as its own child. It can be uh RTL essentially stands for right to left which means that how this would look in case of other languages and API references. Now what API reference means is that it is all designer terms it's called as component properties. What this essentially means is that when designers are using an instance of a master component all of those have specific variations. For example it has got the various types of variants. It's got various size and it has a boolean property over here. Now this is what we call as component properties in Figma but developers called as API because a design system team is going to build this and then the feature team engineers can use these variants. So for example we have default outline ghost destructive secondary and link they cannot create an elevated variant and start using that because the API doesn't allow that. So that's also something that's important. Now, while this is more focused towards engineers because it has a lot of code, we are going to try to build something like this for designers because designers typically never have an interactive playground like this. So, let's go ahead and do that. Now, here's an example of Polaris, which is Shopify's documentation. Now this is also very much developer focused but we can take an example of the simple button component over here but you can see here that it says which of these are optional not optional and it gives a list of all the properties or APIs that you see over here and it also has certain events that feature teams can sort of control all right and there's also slots in case there's a slot component and then you have all the examples right you've got the code for all of this so you've got all the various types of variants loading state icon buttons pretty much everything right and you've got some best practices, limitations, and pretty much everything there is. Now, as designers, we probably may not need to see all the code cuz it's not really important for us. But when a new designer joins the team, when you want to go ahead and update some documentation, have a source of truth or check how a particular component works, you can basically go ahead and set all of this up, which is like a designer's documentation. Now, we also have Uber. Uber also has pretty much the similar stuff. Um, it it's a lot more detailed over here, but you know, to an extent, we can sort of um ignore this for now. and uh and we can use shad CN as an reference point. So what I'm going to do is I'm going to come here to cloud code and I'm going to go ahead and start a new conversation. Now I'm going to say can you create a new branch for the next set of changes that we want to do. All right. I want to create an interactive area where we document everything regarding components. These could be atoms. These could be tokens. It could be molecules or patterns. The goal is to have an interactive preview for designers to understand everything about how a component looks, how a component functions, what are the various component properties, etc. All right. And what I'll do here is I'll come over here and make a copy of this. And I'm going to come back over here and say here is an example from Shadzen website. Let's use this as a reference to build our own version. All right. And I'm going to go ahead and paste that. Ensure that this website has controls that I can turn on or off or click or select that basically customizes the particular component right then and there so that I can visually see how it changes. All right. And then I'll say let's start off by doing it just for the email row component. We'll do a test run. We're going to make some changes before we make other components. All right. I'm going to come over here and set this to Opus uh 4. 7 high. And then I'm also going to come here and say, let me know if you have any questions and clarifications before you start coding. All right. And now we're on the main branch. We want to create a new branch. So it's going to go ahead and do that on its own. So let's go ahead and run this. All right. So we've got a couple of questions now. Now the first question is where should this actually live? So for example it's suggesting something called as docs components and email row. So this structure scales to atoms tokens molecules and patterns later. Now for now this is okay. So it's essentially going to create a folder called as docs right and then we would have tok components or else we would have tokens or molecules or whatever it is. So that's fine. Should I add a left sidebar listing categories even though only the email row is populated for now. So the scaffold is visible. So I'm going go ahead and say yes for both. All right. Second one, the controls scope for the email row. Looking at the email row and the playground presets, I could expose the toggles for unread, selected, star has attachment and label. The various types of selects, text inputs and theme. Is this the right set or do you want a narrow curated view? Example, the important prop that doesn't OM users. So this is very specific to what I am designing. Now I'm going to come here and say do not refer to the presets in the playground. Refer to the actual email row component and see what are the various customizable properties. All right. Then number three is shad CN par and what pieces do you actually want? So shad CN page has live preview controls code snippet property tables variant showcase usage examples. Which of these matter for V1? So what we can have here is the live preview. So let's have the live preview and the interactive controls. It's also nice to show the variants showcase. Ignore the code snippet. Maybe have a section for the various types of behaviors. For example, the various possible date formats, the various possible sender groupings, single user, multiple users, triple users, or more than three users. All right, there we go. Then number four is then it's asking is the existing playground just being replaced or kept? the current homepage playground already has some of this. Do you want to create new docs or live alongside it? So I'm going to say the existing playground that we have, we can remove that. We don't need that. Let's replace that with the current documentation that we're thinking about. All right. Awesome. So now let's go ahead and run this. All right. There are a couple more things to look at. So here's the plan. It's going to follow. So it's going to have a URL called as docs which is going to the main landing page. And here I guess it would list out all the various component entry points. Uh that's I'm guessing in the side navigation we would have tokens, atoms, components and patterns as well. And under components we would have email row I guess. Then the email row page sections. All right. So we would have an interactive preview. All right. So live email row rendered in a framed canvas. That's fine. All right. Then the we would have a control panel. All right. Which is actually derived from the main code file. So we would have sender subject preview which would be text inputs. We have all of this and we'll see how this actually turns out. Properties table, variants, showcase, all the various types of variants, behavior sections. That's fine. And then it's basically going to delete some of uh this entire playground section that we had. That's totally fine. Out of scope is the code snippets. We don't want any installation docs and copy buttons. Right. So, shall I proceed? All right. So, let's go ahead and take a look now. I'm going to open this up on my browser because it's easier to um look at it over there. And so this is essentially what we have. And uh you can see here now we have our tokens and all of these are essentially um are not yet set up. So we can't really click on it. And now we just have the email row. All right. Now there's also a lot of space on the right side. So I am probably going to come here and say can you make I'm going to say there is a lot of space on the right side. Can you go ahead and use up all of that entire wide space? Have a small section on the right side which behaves as the table of contents that makes me switch between sections quickly. All right. And um I will run this and while that runs we're going to come back and just keep checking. All right. So we've got the email row item basically displays what this is interactive preview. So we've got a light mode and a dark mode. Now, ideally, I want this to be like a global thing because just looking at it over here may not be enough, but that's fine. So, now this is also pretty cool where you can actually customize all of this and see how this looks. So, for example, here I have if I type in my name that it works, you know, very interactive. So, that is really cool. We have the senders list and this is so amazing because I can add multiple people. So for example, if I say for example my company which is Trade Republic. All right. And press enter. I see this. But then also let me type in my name again. All right. Okay. There we go. This is weird. So there's some sort of a bug over here. But I think it's working fine. That's okay. I'm going to add um Trade Republic again. And there we go. And then I'm going to type in my name again. All right. So that's pretty cool. So this you can see it works really well. And we're missing the count. So that's interesting. So I'm going to come here and say um the email count is missing. Can you add that as well? All right. Now we also have the subject line. This is fine. We have this. And then we also have the date which is today, past year, and this year. So this is also pretty good. Then we have the red and undead state, the selected and the deselect state. We do need a hover state. So let's see if the hover state works. Yeah, hover state works perfectly fine. We want to show the count. All right. So, the count shouldn't be toggleable. So, I'm going to come here and say the email count should not be a toggleable property. It needs to be present only if there are two or more messages sent in that email. So, what that essentially means is the moment we have more than two items, we should essentially show this, right? Looks like um it went ahead and is cleaning up this up. Cleaning this up. So we'll just wait for it. Then we have our labels. Now labels obviously we are missing the we have a category section. So if I click on category you can see that a category gets added over here which is perfect. Now the category color cannot be anything else. Now this is weird that so I'm going to come here and say the category color can only be neutral color. We should not be able to change any of the category colors. All right. And then I'm going to come over here and oh it actually compressed it again and I will say labels cannot can be any color other than neutral colors. All right. Now I don't know why it's making all of these mistakes. Maybe it's a weaker model and maybe the context window is getting used up. But ideally this should not happen. All right. And then we can add some labels. So I'm just going to first of all turn off category. Let's add some labels. So, I'm going to add a label. And I'm going to call this, let's say, promotion. Let me just call it design. There's no space here, but I guess that's fine. And um we need to have I'm going to delete this and just say design and add. We got it. So, that's fine. Now, we also have all our variants over here, which is nice, but I guess these could be documented a little bit more better. That's okay. behaviors. We have essentially our date formats and sender groupings. This is also pretty fine. All right. And I can just click over here to switch between these sections very quickly. Of course, it's not really well designed and we probably have to polish this really well, but I'm going to send this across as well. All right. Now, as you can see, it looks a lot better. Now, of course, we can go ahead and customize each of this to make it um a lot more better looking. And definitely cuz this is you know just out of the box and looks you know terrible to be honest but as you can see you can still make all of this work at the end of the day right so if I quickly take a look at what we have in cursor we basically have the app and then under that we have this section called as components which is not what we want we have the section called as docs all right and then under that we have components which has basically this so I'm going to come back over here to cloud code and I am going to say can you also add the API documentation section inside the email row component. All right. And what I'm going to do here is I'm just going to go ahead and um find that project file. And I think just to double check that is actually under docs and then components and then email row. All right. So I'm going to come here and say email row. All right. So docs components email row. I don't know where that is. Email row. All right. I'm not able to find it. So, I'm going to go ahead and say uh inside docs for the email row, right? I'm not sure why it's not really um showing up. All right, run this. Um maybe I'm going to choose um Opus 4. 7 for this. And maybe we choose Medium for this. And let's run this out. All right, so let's go ahead and take a look. And now we also have this API section. And uh this is pretty good, right? So in this API section, this is, you know, mainly for people who probably have a little bit more technical experience, but honestly, it's not, you know, really rocket science, right? And this is something that engineers and obviously design system people definitely have to look at. So essentially what this means is that all of these various types of properties are things that can be customized by anybody using this component. Now there are certain things which are required. For example, you need the sender name, you can you need a subject, the preview and the date. So these are the four things that are mandatory. So this is pretty cool. Now we could also have a section where we can have a link to the Figma file so that anybody can come here, click on it and actually take the user to the Figma file. Right? So that's also something that is um definitely possible. All right. Now with that being said, what we'll do now is we're going to come over here to cloud code and I'm going to say this is great. Can we now go ahead and make a skill where when a component is either updated or a new component is added, we can run the skill in order to do the entire documentation that we just did for the email row applicable to any other component as well. Let me know if you have any questions on how you want to set up the skill. Right? So basically now what we'll do here is we will now create a skill where all we have to do is give a link to the Figma file is tag the component and the skill is going to go ahead and document everything. All right and it's going to make sure the and why do we need to create a skill? skill so that whatever component you make looks exactly like what we have over here and every page is consistent. That's the whole point of creating a skill. So good idea, right? A few things to nail down before we get the skill right. First one is, is it invoked manually with a component name or should we autodetect which component change via git difference? I'd lean to manual plus component argument and simple predictable. So basically it's asking us when do we want to make this change? Do we want it to be manual where the user is asking or when we see something changing in GitHub where a component file is updated, do we then have to trigger it? Now ideally this is the best way to do it. when something changes in GitHub, we identify that and then the skill automatically sort of runs and it changes everything over here or and to do that we would use a concept called as hooks which I'm not going to talk about in this video um but it's a very interesting concept but then we're going to keep this manual so I'm going to come here and say manual number two the scope of generation three possible levels the skill should ideally autofill every single section all the way from interactivity to property types to the variants to the APIs and pretty much every single thing even include things like behaviors and customization options as well. It needs to have everything that the current email row documentation currently has. All right. Now, there's one question about reusable versus duplicate. The email row page has inline helpers. Should the skill extract these into a shared module so the future component talks import them cleaner? I'm not 100% sure what this is. So, I'm going to say I don't know what this means. Can you elaborate? And then the side effects, right? Should the skill also add a sidebar nav entry, remove coming soon and add a new link or flip the status from soon when the page is generated? So, I'm going to say if we already have a page which is marked as soon, we update that to make it available. If we don't have a page for the component, we create a new page. All right, I guess that was pretty straightforward, but I'm not sure what it means. Then this then confirmation gate mirror the Figma skills pattern summarize plan show property table view wait for explicit go before writing files. Yes, this is correct. Let's make a ensure that the skill has a checklist that it actually follows and it marks every item in the checklist as done as and when it completes it. Right? So there we go. And I'm going to say let me know if you have any additional questions and once that's done you can prepare the skill. All right. And I'm going to set this to um high. And also going to run this. All right. So let's go ahead and quickly take a look. It's made the skill and we can go ahead and actually read it over here. Um it's actually better to read that over here. So under the skill section, we can go to cloud code and skills and then the we have the document component. We open this up and there are a couple of uh documents over here, but that's fine. All right. So go to markdown open this up and let's review this right. So basically autogenerate or refresh a component documentation under the documentation components name. This is fine with the same structure as the email row docs header interactive row etc. Um I ideally it shouldn't say email row docs because we want this to sort of be global but for now that's totally fine. So um essentially what we have here is the various steps. So discover the component and parse the source properties utilities conditional logic. Now I want to make sure that this is not going to Figma and you can see here that it is also it is actually reading all the um code files which is the correct thing and then resolve any navigation entry. So that's fine. So it's going to decide if it's a new or an existing link. Extract the shared UID do helpers. All right. I'm not 100% sure what this is but that's fine. Infer the interactive preview controls. autogenerate the variance list, propose the behaviors and candidates um and it's going to create these two pages. So this is essentially what is the content and this is going to be how the content looks. All right, that's the CSS file for that particular page and we're going to update the um link over here from soon to true or soon to false and add a new entry whatever it is. And then it's going to do a verification, take a screenshot and surface any unmapped properties. All right. and then summarize all of that. All right, so we can go ahead and test this out. And if I come here to Figma, we can actually see what component we want to work with. Um, I think we could probably do the action bar or the tag button. Now, there's not really much to show over here. So, we could test with the tag button. So, I'm going to come over here to Cloud Code and open up a new session. And then I'm going to come here and get that skill. And I think that skill is called components. I forgot what it's called. It's called document components. So let's go ahead and type in document component and then I'm going to call this the tag button. Now maybe instead of calling it tag button, we can actually come over here and find that actual component. So if I come down over here to our component section and then we have our icon button, inbox template, nav menu item, page header, sidebar, tag button. So I'm going to go ahead and just type in um tag button and it's under source component which is correct. And um we are going to run this. All right. So it's gone ahead and done some investigation. So the interactive preview we just have the label because it's a button which is just going to have the label. It's display color. So we can choose the various types of colors. And there's no state over here. So that's fine. We have six variants. And then we have a variant with a very long label. So that's one thing. Behaviors. is there are no behaviors APIs there's only two which is a label which is required and a color which is also required and unmapped properties none all right and it's going to be in this folder which is documents atoms and then tag button which makes a lot of sense navigation change flip existing atoms tag buttons into sun now this is actually correct but what I want to do here is I actually want to add another section in atoms which basically have a section ction that talk about the other components that this is being used in. So I'm going to come here and say all of this is great and perfect. I want you to make a small change specifically for atoms. I want you to add a section which basically lists out all the other components that this atom is used in. For example, the tag button currently is being used in the email row component. So I want you to have a section under the tag button documentation which mentions that this is being used in the email row component and also make sure to update the actual skill so that it checks whether this atom is being used in other components and then I'm also going to go ahead and run this. All right. So, it's gone ahead and done it. And now we can come back over here to our browser. And here we have the tag button. We can click on that. And now that is selected. And uh all of this looks pretty good. So we have the light mode and dark mode. We have um all of these uh various options over here which is proper. We can change this to whatever we want. I'm going to go ahead and say very long tag button component. And as you can see it truncates after a certain point. So you can see the truncation rules here as well. We have the variance. You have the one which is max width. All of this is great. And you can also see here that it added this which is the components that expose this atom. And so ideally we can come here and document this a little bit more where you can have a preview of the email itself so that we could actually see where it is actually being used. And then we have the uh API communication as well. So, as you can see here, once you have everything set up in code, you can actually go ahead and build this entire documentation very quickly within a matter of minutes. Now, the last thing that I want to do before we go ahead and complete this phase is to create some sort of a getting started documentation for anybody who's going to download this file because once they download the file, they should ideally know what they have to do and how they can use this project. So, that's what I'm going to do. I'm going to go ahead and say, can you inspect the entire project and create a getting started file that helps anybody download this project to go ahead and understand how to use it? They should be able to know what skills they can use, when they have to run the skill, in what order they can, and what are all the various ways they can utilize this project. Let me know if you have any questions before implementing. Now, I'm also using what you can see over here is Opus 4. 7 1 million context. Now the reason I'm using such a high context printer is because it's probably going to go through the entire documentation and it is going to need a lot of context to understand and I'm also choosing extra high so that it takes its time to really think through everything and come up with something that works well because we already have a lot of information in this project and I want to make sure that it understands everything in its entirety. So I'm going to go ahead and choose 1 million context window and extra high. All right. So it's asking us a couple of questions which is first one we already have this readme. md which is a nextjs boiler plate which is essentially like a you know like a standard template that comes when you install nextjs and it's asking do you want me to replace that or do we want to go ahead and leave that and create a new one. So I'm going to go ahead and I wanted to sort of replace it. So that's one thing that I want to do. Second one is the audience. So it's asking for both designers and developers or primary developers. I think this is mainly for designers and product managers, right? And I would say less for developers and the depth. All right. So, a single top level guide with 200 300 lines that covers the setup, the two skills, how to run them from each agent, roots you um roots you can open in the browser and common workflows end to end or we do like a quick starter guide that links out to the agents. mmd and the individual skill. mmd for details. Now this is to an extent left to you to be very honest and depending on what your uh approach is. But I what I will do here is I will go with 1 A. So this is going to be 1 A and then for two I'm going to do I'm going to say mainly designers and product managers. So and product managers. Then number three is going to be uh I'm going to go with a because I want it to be a little bit more detailed or maybe people are not going to read 300 lines but it's fine to keep to have more and then we can reduce it later if uh we want. And I will run this. Okay, so it's done. And it's also pretty crazy. We've just used 6%. So maybe we didn't really need um a 1 million context window, which is quite funny. We could have done this within a 200 um,000 tokens context window and it still wouldn't have reached 50% because it's still 60,000. But anyway, let's go to cursor and have a look. So in cursor, I'm going to go ahead and close this up and uh we will open up. I think we should be on the correct branch and I'm going to open this up. We are going to find the um readme file. Okay, so there we go. So this is what we have and I think there is a lot of um steps and I mean it's totally left to you how much you want to customize this to be very honest. So this is a hands-on playground for designers and product managers to explore what happens when a design system lives in both Figma and code at the same time. This uh repo ships a live notion mail design system that's fine to AI skill. That's also okay. You also have a nice table of contents that when you click on should ideally take you to that particular place but it isn't navigating but that's I guess that's okay. Um so what can you do with this project? So first of all you can browse the component library by typing in /doccks see a full working inbox which is /inbox and run the skill which is to drop a configured email row into Figma which is the same skill. then generate an interactive doc docs component which is document and then experiment with UI uh experiment with UI ideas which is essentially going to be inside prototypes right um and so at the end of the day depending on what your use case is you can go ahead and actually you know set up the way you want now this is great the prerequisite so you need NodeJS 20 so you can download this from NodeJS the desktop app a coding AI agent the MCP access and uh also access to the Figma file and then you will have to download this project file so you want to type in git and clone this is exactly the link that I showed you on GitHub which allows you to download it and then you can type in npm rundev which is the code for nex. js to sort of run this. That's that's just about it and yeah and then it shows you all the urls or which is also what it calls as roots and then all the um skills that are explained right now you can also see here that it gives recipes which is essentially use cases. So if I want to show a PM what the inbox looks like this is what we can do. All right. I want to tweak my email row and see it in Figma. I'm preparing a design review. I need a full inbox in Figma. You can do that. I just add. So depending on the use cases that a person would have, it also is showing workflow. So you can obviously analyze this and see what makes sense for your use case and your company and your team and apply that as well. There also some troubleshooting ideas. That's fine. And then it's giving you a complete overview of how the folds structured. And uh we could also have links to Figma files over here to be honest, but right now I'm not doing it. And uh then all you have to do is I'm going to come here and then I'm just going to merge this. I'm going to say can you create APR and merge domain. Right. I can now finally come down over here go to phase number eight and I can double click here and then mark this one also as complete. Now that this is done

### Wrapping Up [4:00:15]

the only thing left is for you to create a god skill that essentially allows anyone to execute all of this in one shot. Because when we were creating this email row design skill, we were actually doing a lot of things manually and it required too many steps. But what if now that we have this as a reference, we create a god skill that essentially allows us to create this skill depending on whatever use case you have and depending on what your workflow is, you can choose to customize this god skill to do exactly what you want. So if you are trying to create drawers or forms or menus or cananban boards or chat interfaces for example depending on what you need to do you want it to generate code and make the you know paste into Figma skill or do you want it to just paste into Figma skill? Do you want it to do all the three which is essentially code it paste into Figma as well as document it on the browser. Depending on what your workflow is you can create essentially a god skill. You probably need to give it a couple of components for sure. Mention what are the atoms you need to provide the main template which it can sort of duplicate create an instance of and edit couple of rules and behaviors and then it's going to build everything for you. So that's pretty much it. Now I know this video was a lot but I really hope you guys found something valuable from this. And if you have any questions requests let me know in the comment sections down below. And make sure to check out learnpro. design/cursor if you're interested in learning how to build AI products completely from scratch. So, that's pretty much it. Make sure to leave a like and subscribe to the channel for more amazing awesome content. And I'll see you guys in my next video. So, till then, take care and bye-bye.