The Design Mode for Claude Code...

0:02How can you teach agent about a specific design style you like and get it replicated super high fidelity UI that is not losing any details, So typically when you try to teach agent about certain style, most of the time you just feed screenshots and tell it help me build an app with similar style.

0:16Most of the time it only gives you something feel like 60 or 70%. Lot of fine green details are just got lost during that translation. The good news is that pixel perfect vibe design is not impossible. You just need the right process and write a context for the agent and then it'll be able to achieve a hundred percent of what you want. And this one very specific workflow that I have tried that works really well, we need

0:37to give agent more than just screenshots. And then co-create example design that meet a hundred percent 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

0:53product 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 brand show up during people's conversation with ChatGPT Perplexity and many other larger model providers. Because report says already more than 17% of consumer now use chat GPT for search, in some company reported to lost more than 80% of traffic from traditional

1:19distribution channel like Block. 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 Grader, built by HubSpot. It is completely free. All you need to do is just type in the company name, location,

1:35product service. Then we'll automatically try to fetch data from different large line model provider like open ai, perplexity and Gemini, and give you detail score across multiple different aspects. As well as list of different market competition. That is showing up alongside your product and brand, But most importantly, it breaks down all the error improvements, so you

1:54got idea about what you can do to actually improve your brand exposure. So if you want to learn how to do GEO well i've highly recommend you go try out this free tool Have 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 a hundred

2:11percent on brand agentic design. And when I say high fidelity context, that means we need to go beyond just screenshots. Large language model today is not that great at extracting everything accurately, internal color spacing, font, and many other stuff. Actually want to gather real CSS style from the website and send to the agent and I'll show you where do we get those contexts.

2:31And with this information agent will be able to replicate design much better. But most of the case still it won't be able to get the a hundred percent design. In just one go, you want to co-create a simple page with the agent that really represents the overall style and feeling, and then we can use some special prompts to get agent extract detailed style guide that can really

2:49guard real their further behavior. So with this pipeline, you can turn any website into a detailed and accurate guide They can get agent to design, ui, website, or even slide deck, and I'll show you my step by step process. so let's say I really like Mother Duck website style, and I want to copy the same look and feeling. And if you just take a screenshot and send to, the agent

3:09And ask it to recreate this ui. What do you find 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 didn't feel as high quality as it could be and some color just didn't look correct. And the thing with AI generated design is that whatever you have

3:27in 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 the 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 general UI at similar level quality,

3:42and this one process I often use. Firstly, we want to give agent much more high fidelity context about specific style. So if I want to copy Mother Duck style, I would just right click Inspect select html and just copy the whole style here. And still pasting screenshots, but instead of asking to build an 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 it to start from recreating a simple

4:06page so that it captures the full essence I want as a reference. So I'll give prompt help me rebuild exact same UI design in single html as Motherduck.html. Above is extract. CSS. So it'll 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

4:28this playground to keep fine tuning the part that doesn't look exactly same. ' Cause most likely make some mistakes. And this is where you can feed agent more context about the right style and ask to iterate. And there are also free tools you can use like Visbug. 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

4:47and get back to agent. The current background color should be like below. And now I can see the background color exactly the same. And you can keep updating it or 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.

5:00Great. Now help me generate detailed style guide, in style guide. You must include following part, overview, color play, typography, spacing, component style, shadow animation, Border Radius and so on Then generates detailed style guide, including the specific color pallette, typography. font The spacing system. As well as common components . So give agent a really good reference

5:21and based on that, now we can ask it to design new UI interface. So I can tell you, help me design a personal to-do UI based on this style in to do the html. And with this, it can start generating really on brand design like this. Where every single details are very similar to the original design. Meanwhile, this is also one command I often use for UI design specifically, where it include a list of different design principles that can, making sure

5:44design generator looks much better. So if I use the same prompt but with this command And you'll now the generate UI still have same style, paid a lot more attention to the detailed UI interactions. And once you've got a one page that you really like. That's where you can start turning that into a real application.

6:01So let's say we just create a new next JS application. In this design app folder. Then I can tell it. Great. Now let's review this interface in next 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

6:18to 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 generated gonna follow exactly same style. We can even ask it to create something more advanced and complicated. Like, also help me add an analytics dashboard for the tasks. As a result, it generated is fully aligned with the overall design

6:38system that you have set up. But that's not only it. One of the main artifacts from this process is this style guide MD file that can be used not only for designing websites, but also all sorts of different artifacts. Like you can also get it to generate on brand slide deck as well. like, I can just prompt it and saying, please make it

6:55slide deck based on the style. then it generated a nice slide deck using exactly same style, and we can explore that into Tempest. you can even get agent to generate product demo videos and animation that is on brand with similar style too. It is one library called Framer Motion. That can enable you create a smooth animation with the real React components. And that animation can be interactive as well,

7:18and all we need to do, just give a prompt. Please use framer motion to create product demo animation where users typing 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.

7:36You 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 in the whole design guide, and maybe even the reference HTML page. And asked to help me design all screens for a Habit Tracker app. Then it will generate a full stack of UI within the similar meanwhile, I also want to introduce you to this new tool I built

7:57called Super Design Extension. It is Chrome extension where you can open any webpage you like and give a prompt like help me extract design system guide from this webpage. Then we'll automatically clone this webpage into a pixel perfect manner and scan through all the different style file within the page and generate high fidelity style guide.

8:16And if you export it, you'll get a production ready React project. With all the components breakdown as well as the style guide dot 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.

8:31Thank you, and I'll see you next time.