The Design Mode for Claude Code...

process and right context for the agent and then to be able to achieve 100% of what you want. And there's one very specific workflow that I have tried that works really well. We need to give agent more than just screenshots and then co-create example design that meet 100% of what you want. In the end, we can extract a detailed and accurate style guide that can be used for guiding agent to generate also different design assets. But before we dive into that, I know many of you are building your own product and distribution channel. And there's one concept that is becoming increasingly popular called AEO or GEO which represent for generative engine optimization. That simply means how often does your product and brands show up during people's conversation with chat GBT perplexity and many other luxury model providers because report says already more than 70% of consumer now use chatb for search and some company reported to lost more than 80% of traffic from traditional distribution channel like blog. So it is critical to really understand how your brand is performing and how to improve in this new world. That's why I want to introduce you to this free tool AEO greater built by HubSpot. It is completely free. All you need to do just type in the company name, location and product service. Then automatically try to fetch data from different large language model provider like open AI, Plexity and Gemini and give you detail score across multiple different aspects as well as a list of different mark competition that is showing up alongside your product and brand. But most importantly, it breaks down all the error improvements. So you got idea about what you can do to actually improve your brand exposure. So, if you want to learn how to do GEO, well, I highly recommend you go try out this free tool. I put the link in the description below for you to use for free. And thanks HubSpot for sponsoring this video. Now, let's get back to the process of creating 100% on brand agent design. And when I say highfidelity context, that means we need to go beyond just screenshots. Large L model today is not that great at extract everything accurately in term of color, spacing, font, and many other stuff. actually want to get a real CSS style from the website and send to the agent and I'll show you where do we get those contacts and with this information agent will be able to replicate design much better but most of case still it won't be able to get the 100% design in just one go you want to co-create a simple page with agent that really represent the overall style and feeling and then we can use some special prompt to get agent extract detailed style guide that can really guard real their further behavior. So with this pipeline, you can turn any website into a detailed and accurate guide that can get agent to design UI website or even slide decks and I will show you my step-by-step process. So let's say I really like mother do website style and I want to copy the same look and feeling and if you just take screenshot and send to the agent and ask it to recreate this UI, what you found is that most of the time it will only give you something like 60%. Like this is a result it generated. It looks kind of similar, but the design itself just doesn't feel as high quality as it could be and some color just doesn't look correct. And the thing with AI generate design is that whatever you have in the code now will be used as a reference to build more stuff. So whatever the first page you design, just set a standard for the rest of page that agent is going to generate. So how can you train agent on top of existing website that looks really good and get a generate UI at similar level quality and this one process often use? Firstly, we want to give agent much more highfidelity context about specific style. So if I want to copy mother doc style, I would just rightclick inspect select HTML and just copy the whole style here and still pasting screenshots. But instead asking to build app with similar style directly. The first step I want to do is I just wanted to focus on UI generation and I would normally ask to start from recreating a single page so that it capture the full essence I want as a reference. So our give prompt help me rebuild exact same UI design in single HTML as mother duck. html above is extract CSS. So it

will try to create this page that looks kind of similar to the original design. And the purpose of this page is like it kind of set a reference implementation about what the right style look like and also give you this playground to keep fine-tuning the part that didn't look exactly same because most likely it'll make some mistakes. And this way you can feed a more context about the right style and ask to iterate. And there are also free tools you can use like this bug. It basically allow you to get style of specific UI elements very quickly. Like I can click on this and get the correct background color and get back to agent. The current background color should be like below. And now you can see the background color is exactly same. And you can keep updating it. Oh iterate to a style that is kind of more personalized to your own brand. But once it's finished, that's where magic can happen. I can tell you that great now

help me generate detail style guide. In style guide you must include the following part. overview, color plate, typography, spacing, component style, shadow animation, border radius and so on. Then it generates detail style guide including the specific color plate, topography found, the spacing system as well as common components. So give agent a really good reference and based on that now we can ask it to design new UI interface. So I can tell it help me

design a personal to-do UI based on this style in to-do. html HTML and with this it can start generating really unbrand design like this where every single details are very similar to the original design. Meanwhile, this is also one command I often used for UI design specifically where it include a list of different design principles that can making sure design generator looks much better. So if I use the same prompt but with this command and you will see now the generate UI still have same style but it pays a lot more attention to the detail UI interactions. And once you got one page that you really like, that's where you can start turning that into a real application. So let's say we just create a new Nex. js application in this design app folder. Then I can tell it great now let's rebuild this interface in Nex. js app in design app folder to be pixel perfect and it has everything breakdown as reusable components. Which means now you can ask agent to create new page and new functionality and it's going to look very similar and consistent. For example, now I can ask to help me add a new feature to add description and due date for each task. The new UI generator going to follow exactly same style. We can even ask it to create something more advanced and complicated. I also help me add an analytics dashboard for the tasks. As a result generator is fully aligned with the overall design system that you have set up. But that's not only it. One of the main artifact from this process is this style guide MD file that can be used not only for designing websites but also all sort of different artifacts like you can also get it to generate onbrand slide deck as well. Like I can just prompt it and saying please make a slide deck based on this style. Then it generated a nice slide deck using exactly same style and we can explore that into templates. You can even get agent to generate product demo videos and animation that is on brand with similar style too. There's one library called framer motion that can enable you create smooth animation with a real react components and that animation can be interactive as well. And all we need to do just give a prompt. Please use framer motion to create par demo animation where users type in task detail and add a new task using the real UI components. And for our application it will start generating a nice animated UI like this. And you can embed in your own website or export it using it in video as well. You can even use this context and importing other design tools as well. For example, I can copy this style guide and use Google stitches which is AI design tools. just pasting the whole design guide and maybe even a reference HTML page and ask to help me design all screens for a habit tracker app. Then it will generate the full stack of UI within the similar style. Meanwhile, I also want to introduce you

to this new to build called super design extension. It is Chrome extension where you can open any web page you like and give a prompt like help me extract design system guide from this web page. Then we will automatically clone this web page into a pixel perfect manner and scan through all the different style file within the page and generate high fidelity style guide. And if you export it, you will get a production ready react project with all the components breakdown as well as the style guide. MD file that you can use for any other projects. I have put the extension link in the description below so you can try out for free. I hope you enjoy this video. Thank you. And I see you next