§ 01 · The Hook
The bait, then the rug-pull.
Every vibe-coder has hit the wall: you screenshot a beautiful site, paste it into Claude, ask for something similar and get back a design that is 60 percent there. AI Jasons solution is not a better prompt but a fundamentally different pipeline: extract the actual CSS, build a reference page, then make the agent write its own instruction manual.
What the video promised.
stated at 00:18“You just need the right process and right context for the agent, and then you will be able to achieve 100 percent of what you want.”delivered at 05:07
Where the time goes.
00:00 – 00:28
01 · Hook: the 60 percent problem
Opens with core pain illustrated with Buzz Lightyear meme. States the 3-step fix.
00:28 – 02:12
02 · Framework overview + HubSpot sponsor
Diagram: Hi-fi Context to Example Design to Style.md. Sponsor block: HubSpot AEO Grader.
02:12 – 03:34
03 · Why screenshots fail
Vision models struggle with precise colors, spacing, fonts. Shows MotherDuck clone attempt at 60 percent. Propagation risk explained.
03:34 – 04:18
04 · Step 1: Extract CSS + build reference page
Right-click Inspect, copy full CSS stylesheet. Paste into Claude alongside screenshot. Rebuild as single HTML reference file.
04:18 – 05:07
05 · Step 2: Iterate with VisBug
VisBug Chrome extension lets you click any element and get exact CSS values. Feed corrections back to Claude.
05:07 – 05:30
06 · Step 3: Generate STYLE_GUIDE.md
Prompt Claude to extract detailed style guide: color palette, typography, spacing, component styles, shadow, animation, border radius.
05:30 – 06:50
07 · Apply style: new UI + Next.js scaffold
Uses STYLE_GUIDE.md to generate TaskDuck todo app. Shows /ui-design Claude command. Scaffolds to Next.js with reusable components.
06:50 – 07:07
08 · Extend to slide decks
Same style guide generates a Tempest slide deck using exact same brand tokens.
07:07 – 08:06
09 · Animated product demos with Framer Motion
Prompt Claude to use Framer Motion to create interactive product demo animation using real UI components.
08:06 – 08:33
10 · Superdesign Chrome extension
One-click alternative: Superdesign extension clones any web page, scans style files, exports production-ready React project with STYLE_GUIDE.md.
Visual structure at a glance.
Named ideas worth stealing.
00:28model
3-Step On-Brand Agentic Design
- Hi-fi Context (extract CSS)
- Example Design (co-create reference HTML)
- Style.md (extract portable style guide)
Pipeline to achieve pixel-perfect, reusable brand consistency with AI coding agents.
Steal forAny project where brand consistency across AI-generated screens matters. Drop STYLE_GUIDE.md into .claude/context/ and reference it in every UI prompt.
Lines you could clip.
03:20
“Whatever the first page you did on just sets a standard for the rest of page that agent is gonna generate.”
05:07
“Once it is finished, that is where the magic can happen. Help me generate a detailed style guide.”
06:49
“One of the main artifacts from this process is the style guide MD file that can be used not only for designing websites, but also all sorts of different artifacts.”
How they spent the runtime.
Hook length28s
Info densityhigh
Filler5%
Sponsors
- 01:02–02:12 · HubSpot AEO Grader
Things they pointed at.
04:38toolVisBug Chrome extension
07:07toolFramer Motion
07:30toolGoogle Stitch
07:00toolTempest
How they asked for the click.
08:06link
“I have put the extension link in the description below so you can try out for free.”
Soft CTA at the very end. Most actionable links pushed to description. Mid-video sponsor CTA is the stronger ask.
Word for word.
metaphoranalogystory
00:02How 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%.
00:20Lot of fine grained 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 right context for the agent, and then you'll be able to achieve a 100% of what you want.
00:34And 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.
00:51But 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. That simply means how often does your product and brands show up during people's conversation with ChatGPT, Perplexity, and many other luxury model providers.
01:10This 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.
01:31It 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 that is showing up alongside your product and brand.
01:50But most importantly, it breaks down all the error improvements, 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.
02:03I 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.
02:13And when I say high fidelity context, 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.
02:25If 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.
02:39You 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.
02:59And 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%.
03:16Like, this is the result it generated. 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.
03:30So whatever the first page you did on, just set a standard for the rest of page that agent is gonna 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 I often use.
03:44Firstly, we want to give agent much more high fidelity context about specific style. So if I want to copy mother doc style, I would just right click inspect, select HTML, and just copy the whole style here and still pasting screenshots.
03:57But 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, 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.
04:16Above is extract CSS. 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.
04:33And 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.
04:43Like, 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.
04:57But once it's finished, that's where . I can tell you that, great. Now help me generate detailed style guide.
05:02In style guide, you must include the following part. Overview, color play, typography, spacing, component style, shadow animation, border radius, and so on.
05:11Then 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.
05:30And 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.
05:47So 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. 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.
06:03Js 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, which means now you can ask agent to create new page and new functionality, and it's going to look very similar and consistent.
06:20For 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.
06:31It 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.
06:40One 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. 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.
06:57Then 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 that is on brand with similar style too.
07:09There'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.
07:27And 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.
07:39For 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.
07:58It 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. 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.
08:16And 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. I have put the extension link in the description below so you can try out for free. I hope you enjoyed this video.
08:31Thank you, and I'll see you next time.
§ · For Joe
Your STYLE_GUIDE.md is a Claude context file.
Steal this workflow
Stop feeding agents screenshots. Extract the CSS, build one reference page, then make Claude write its own instruction manual, and every screen you generate from that point is 100 percent on-brand by default.
- Pick a site whose aesthetic you want to match. Right-click Inspect, copy the full CSS. Paste it alongside a screenshot into Claude.
- Ask Claude to rebuild a single representative page as a standalone HTML file. Not a full app, just the reference.
- Use VisBug to click any element and get exact CSS values. Feed corrections back to Claude iteratively.
- Once the reference looks right, prompt: Generate a detailed STYLE_GUIDE.md including color palette, typography, spacing, component styles, shadow, animation, border radius.
- Save STYLE_GUIDE.md to .claude/context/ or reference it in CLAUDE.md. Every future UI prompt can pull from it without re-establishing brand context.
- The style guide ports beyond UI: slide decks, Framer Motion demos, even AI design tools like Google Stitch. One investment, infinite consistent outputs.
- The /ui-design Claude command pattern adds a reusable quality gate on every UI generation without extra prompting.
§ · For You
How to get AI to design exactly what you picture.
If you use AI to build anything with a UI
The reason AI-generated designs look generic is that you are giving the agent a vision it cannot fully read. Give it the actual code instead.
- Find a website whose look and feel matches what you want to build.
- Open DevTools (right-click Inspect, copy the CSS stylesheet) and paste it into Claude alongside your screenshot.
- Ask Claude to build a simple reference page, not the full app. Treat it as a proof-of-concept you will iterate on.
- Once you are happy with the reference, ask: Now generate a style guide I can reuse for all future pages.
- Every new screen you build from that point will look consistent without you having to explain the brand again.
