WEBVTT

00:00:02.800 --> 00:00:24.135
How can you teach agent about a specific design style you like and get a replicated super high fidelity UI that is not losing any details? So, typically, when you try to teach agent about certain style, most of time, you just feed a screenshot and tell it, help me build an app with similar style. But most of the time, it only give you something feel like 60 or 70%. Lot of fine grained details are just got lost during that translation.

00:00:24.295 --> 00:01:02.950
The good news is that pixel perfect vibe design is not impossible. You just need the right process and right context for the agent, and then you'll be able to achieve a 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 an example design that need a 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 distributing channel, and there's one concept that is becoming increasingly popular called AEO or GEO, which represent for generative engine optimization.

00:01:02.950 --> 00:01:08.390
That simply means how often does your product and brands show up during people's conversation with ChatGPT,

00:01:08.390 --> 00:01:48.505
Perplexity, and many other luxury model providers. This report says already more than 70% of consumer now use ChatGPT 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 grader built by HubSpot. It is completely free. All you need to do just type in the company name, location, and product service. Then it'll automatically try to fetch data from different large language model provider like OpenAI, Perplexity, and Gemini, and give you details across multiple different aspects, as well as a list of different market competition

00:01:48.585 --> 00:01:53.785
that is showing up alongside your product and brand. But most importantly, it breaks down all the error improvements,

00:01:54.050 --> 00:02:12.935
So you got an 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 a 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 100% home brand agent design.

00:02:13.655 --> 00:02:15.815
And when I say high fidelity context,

00:02:15.815 --> 00:03:16.110
that means we need to go beyond just screenshots. Lightning model today is not that great and extract everything accurately into the color, spacing, font, and many other stuff. If you want to gather real CSS style from the website and send to the agent, I'll show you where do we get those context. 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 a 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 prompts 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 duck 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 do you find is that most of the time, it will only give you something like 60%.

00:03:16.110 --> 00:03:17.870
Like, this is the result it generated.

00:03:17.950 --> 00:03:35.985
It looks kinda 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 in the code now would be used as a reference to build more stuff. So whatever the first page you did on, just set a standard for the rest of page that agent is gonna generate.

00:03:35.985 --> 00:03:48.120
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 I often use. Firstly, we want to give agent much more high fidelity context

00:03:48.120 --> 00:03:53.080
about specific style. So if I want to copy mother doc style, I would just right click inspect,

00:03:53.240 --> 00:04:03.865
select HTML, and just copy the whole style here and still pasting screenshots. But instead of asking you to build app with similar style directly, the first step I want to do is I just wanted to focus on UI generation,

00:04:04.025 --> 00:04:17.980
and I would normally ask it to start from recreating a single page so that it captures the full essence I want as a reference. So our gif prompt helped me rebuild exact same UI design in single HTML as mother duck dot HTML. Above is extract CSS.

00:04:18.220 --> 00:05:07.395
So it will try to create this page that looks kinda similar to the original design. And the purpose of this page is, like, it kinda set a reference implementation about what the right style look like and also give you this playground keep fine tuning the part that doesn't look exactly the same because most likely, you'll make some mistakes. And this is where you can feed Adrian more context about the right style and ask it to iterate. And there are also free tools you can use like VisBug. It doesn't allow to get style of specific UI elements very quickly. Like, I can click on this and get the correct background color and give it to agent. The current background color should be, like, below. And now you can see the background color is exactly the same, and you can keep updating it or iterate to a style that is kinda 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 detailed style guide. In style guide, you must include the following part. Overview, color play, typography,

00:05:07.555 --> 00:05:30.145
spacing, component style, shadow animation, border radius, and so on. Then Android generates detailed style guide, including the specific color plate, topography font, the spacing system, as well as common components to give agent a really good reference. And based on that, now we can ask it to design new UI interface. I can tell you, helped me design personal to do UI based on this style in to do dot HTML.

00:05:30.225 --> 00:05:56.805
And with this, it can start generating really unbranded 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 design generated looks much better. So if I use the same prompt but with this command, you will see now the generate UI still have the same style, but it paid a lot more attention to the detailed UI interactions.

00:05:56.885 --> 00:06:14.590
And once you've 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 Next. Js application in this deny 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,

00:06:14.590 --> 00:06:17.870
which means now you can ask agent to create new page and new functionality,

00:06:17.950 --> 00:06:20.030
and it's going to look very similar and consistent.

00:06:20.525 --> 00:06:31.885
For now, I can ask to help me add a new feature to add description and due date for each task. The new UI generator gonna follow exactly the same stuff. We can even ask it to create something more advanced and complicated.

00:06:31.965 --> 00:06:49.890
It also help me add an analytics dashboard for the tasks. As a result, it generates 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 sorts of different artifacts.

00:06:50.185 --> 00:07:07.050
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 slide deck based on this stuff. Then it generate a nice slide deck using exactly the same style, and we can explore that into Tempest. You can even get agent to generate per the demo videos and animation

00:07:07.130 --> 00:08:06.450
that is on brand with similar style too. There's one library called Framer Motion that can enable you create a 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 per 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. 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 the style guide and use Google Stitches, which is AI design tools, just pasting the whole design guide and maybe even the 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, also want to introduce you to this mutual app 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 assistant guide from this web page.

00:08:06.770 --> 00:08:25.535
Then we will automatically clone this web page into a pixel perfect manner and scans 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 dot m d file that you can use for any other projects.

00:08:26.031 --> 00:08:32.671
I have put the extension link in the description below so you can try out for free. I hope you enjoyed this video. Thank you, and I'll see you next time.