# Web Design with Claude Code: The Complete Guide

Channel: UI Collective
Video: https://www.youtube.com/watch?v=jO-wH4zgJV0
Duration: 1 hr 11 min
Language: English
Words: 15284
Transcript page: https://viewrankai.com/tools/youtube-transcript/jO-wH4zgJV0

---

[0:00] Most know how to prompt, claude, and claude code, but not many know how to turn them into a real web design partner, one that produces actual client deliverables. In this video, I'll show you a road map for auditing any website, building brand guard rails AI actually follows, avoiding AI slop, running QA, and packaging the whole thing into a client ready pitch. Real quick before we begin, check out our website link in the video description where Academy members can get access to about 28 or 29 great courses right now on AI workflows, design topics, and a whole lot more, some premium downloads, and private Slack channel access with me and the

[0:29] team. I'm always adding more to this as well. Uh so be sure to check it out. Link is just in the description and every purchase helps me be able to keep creating great free content like this on YouTube. So link down below. Also come follow me on X link also down below. All right. Claude for websites. Now most people know how to chat with Claude. You might have seen a lot of my tutorials. I have a full playlist on designing with claude code and working with AI. I'll link that down below. And if you're like every other designer out there, you know the power of claw design, claude code,

[0:58] when it comes to building out small prototypes, sort of defining your initial design direction, so on and so forth, but do you really know how to make the most of it? And I'm not just talking from a design sense. And one question like I've really been like working on answering myself is how can we position Claude AI and Claude code as more of our web partner more than just h being this AI that helps us with our design. So think about all the ways that we can use Claude for more than just building but positioning Claude in a way that almost makes our building better. And to

[1:39] elaborate on what I mean here, if you think about the general roadmap of web design, now there's some other categories that would probably fit into this, but I'm thinking about it from a 50,000 foot view, looking at it from a design sense, a selling sense, and a marketing sense. Maybe you have an opportunity to design a client website. Maybe you have an opportunity to design your company's website. You're going to audit that opportunity. You're going to

[1:59] spend some time. What's not responsive? What's working? What's not working? Is this website prepped for lead generation? Is it not prepped for lead generation? Look at the analytics. You're going to audit that opportunity. Then you're going to start defining that direction. So what are the competitors doing that works really well? What are some designs that really speaks to the client? Define the direction that you're going to want to take that website. Then you're going to start project the brand guard rails. Uh what design system are we using? Do we have our necessary assets prepped? Do certain imagery that we need? And then you're going to go

[2:30] through the design and QA process. you're going to do the design, make sure the copy is all up to the client's standards, making sure the design system is properly applied, everything's nice and responsive, there's no issues, so on and so forth. And then finally, you're going to tell the story and start pitching that actual work. So whether it's for an external client or for it's for your company inside, you can't just say, "Oh, here's the website that I designed." Because everyone's going to be like, "All right, it looks nice, but how'd you get here?" you need to talk about what you looked at originally, what really spoke to you, what examples

[3:01] did you look at, where how did you land on this current design, why this is the best for lead generation, whatever those website goals are. I know there's probably some other categories, there's other steps that go in here, but you're going to see why I broke it out the way I did a little bit later on. But at a high level, if we were to take all these different sections and work to define everything that goes inside of them, working with Claude to do so, instead of Claude, build a website where it leads a lot of the leaves a lot of the design, a lot of the thinking open for

[3:32] interpretation by AI. And that's where you got get a lot of these AI hallucinations where you really start to burn through all of your AI tokens. It's going to turn into Claude build a website, but it has a fundamental idea on brand guidelines. It's able to review the work that it's doing section by section. Has an understanding of what competitors are doing and the patterns that you cl your client likes or that you like. It has an understanding of existing gaps on your existing website. It's able to do its own QA. It's going to have a brief to reference as it's building out section by section and a whole lot more. So,

[4:08] it's no longer about just using Claude as this AI tool that can help our design come to life and build out this prototype and assist us with some of the designs, but actually using it as something that can speed up our actual workflow and as our actual website partner for the work that we're doing now and also the work that we're doing later. And if we go back a couple slides to our road map of things here is let's just say we have a new website project that we're starting. Whether it's for a client or whether it's for an internal company, an internal team, maybe you

[4:40] work at a startup, you're redoing your website, you're doing some type of web work, whatever it is, you're going to start off with actually auditing the opportunity because before you can do anything else, you need to understand what's wrong with the current website. So that's where we're going to spend some time to start and looking at how we can use Claude to help us audit existing websites to identify opportunities that we can fix with the design that we're going to produce to help us look good and win more work if we're an agency or maybe help us get that next promotion if

[5:15] we're redesigning something internally. Right? So something funny happened and that is I had this whole video filmed, edited, prepped, ready to go and then my workound for properly auditing websites was replaced by new clawed functionality. So I'm having to refilm this part. But what we what I would have to do before here and this is also important for you to note in case you're using other AI tools is you kind of need to build your own auditing engine. And the reason for that is because a lot of AI tools, if you ask it to scan a website, what it does is it only looks at the code. It can't actually take

[5:52] screenshots of a website and audit the visuals of that. So in the past, what I would have to do is I'd have to build these micro tools like this, which if I was to go ahead and enter in a URL, let's just say anthropic.com. What I would have to do is I would have to build a micro tool leveraging the claude API. And if I set this to let's just say three pages, which is a standard call, and then choose to run this audit, it would then go through and be able to take screenshots of the actual website so it can audit the visuals beyond just the code. And the

[6:23] site that we're going to use for the auditing, it's our design system agency site. Why? Because it's site that my partners released a while ago. We just haven't worked on it ever since. It's not a site that ever gets updated. It was meant just to be a quick site just for basic lead generation. So, we're going to be using this one for the audit. So the new cla code functionality that I was referring to is the ability for claude code to actually visualize websites inside of the platform. So you can see here on the right hand side I entered in a URL and just to access that

[6:51] what I did is I just clicked this globe here uh in the very top and I entered in the URL is what Claude can do now it can browse the web navigate through different websites different navigation structures and actually be able to look at the visuals of the design beyond just the code and I know I mentioned it earlier but in the past if you were just to have Claude code analyze as a

[7:17] website. It could look at the URL and go through the source code, but it couldn't look at the visuals. So, it wouldn't be able to take screenshots of what this design is like. But now, it can. And that's why I'm having to refilm this. So, my workound before no longer necessary. All right. So, what I'm going to do, I'm going to run this small prompt here, and we're going to elaborate on this very shortly, but just to talk you through some things. I'm just going to run this

[7:41] prompt. Audit this website. Let's run. And you can even see here too that it's calling out that it's a like auditing things like the design, the content, the UX. Now, this is what we got back, a very generic audit. And we want to supercharge this because if we're part of a client engagement or we're working on redesigning a website for our startup or the company that we're working at, whatever, we can't just take what Claude gives us because it's very surface level. We need in-depth information that we can build a report on. Because what we have here is we have a couple critical, a couple high priority, a

[8:13] couple medium like SEO and accessibility and a quick win checklist. This is good if it's just for a passion project. But again, if we actually want to turn Claude code into our website partner, we need this way more in depth. So to take this to the next level, we're going to build a skill that helps Claude refine its output. Build a reusable Claude skill called website audit. The skill should deeply audit a live website, local codebase, or both. Then create a raw markdown file called website audit.mmd. This should be an intentionally messy, extremely detailed first pass audit. Do not worry about making it polished, concise, client

[8:50] ready, or perfectly organized. Capture as much useful information as possible so we can refine, restructure it later. Audit anything relevant, including all these things. So just the standard website stuff. For every finding, include as much as possible. What you noticed, where it appears, so on and so forth. Use headings, bullets, tables, notes, questions, rough ideas, and unfinished thoughts freely. In include duplicate or overlapping findings when useful. Do not remove detail just to make the report cleaner. Do not invent facts or analytics. Clearly label

[9:19] assumptions. Do not change the website. Only generate the detailed markdown audit. What I'm doing here is I don't just want that initial output with a couple things to improve on across these different categories, but what I want is absolutely everything. leave it up to me to decide what I'm going to include in a report to a client, a report to stakeholders around my audit findings. I

[9:44] don't want Claude to do that for me. Also, one of the reasons why we're doing this here, which is building this skill, is because we want to standardized process. We don't want different results every time or have the way that we prompt Cla Claude uh or maybe our co-workers are prompting Claude for an audit to produce different results. We want a standardized process which is another reason why we're building this skill to support us in that process standardization. What we're going to do, we are going to go ahead and run this prompt. And while it's going through and doing its thing, like you don't have to

[10:15] include anything like local codebase and just put a live website. I just did it almost like a capture all. Uh but anyways, let's wait to see the result. What we have now is this skill. So it looks pretty good at the fir at first glance. So it looks pretty in-depth. So we have things like guard rails, volume. Like a real site should produce 60 to 120 findings, uh rules that do not bend, severity, all this great stuff. And we have sort of all these evidence and probes like what to do, what to look for, and all the different domains that we need to audit. Not like a website

[10:46] domain, but what are all the different areas that we need to audit for? So UX, UI, all this stuff, and what those essentially look like. It's pretty indepth. Again, I'm not going to go over scripts for now. I probably could have left that part out. Um, but whatever. Let's go ahead. Let's save this skill. So now what we have here is it's almost like we're building out our auditing engine of auditing, you know, the visuals of a website or if we just have the the code of a website, we're building it out on our own. We can audit that part, too. So as I said, I just

[11:14] went ahead and saved that skill. Now, let's test out a new result leveraging this skill inside a new claw chat. Then I just invoked that website audit skill that we had saved. I'm just going to enter in the URL and just say, you know, uh, audit key pages. Uh, so let's go ahead and run. It looked at the skill, went through and did its thing, and now this is the audit that it came back with. Look at this. This is way more indepth compared to what Claude originally gave us. And that's the beauty of using that kind of skill is we have control over what we want inside of

[11:49] that audit and what we do not want inside of that audit. how in-depth we want things to go. Now, in the future, like Anthropic might come out with a website audit functionality or skill on its own. And even if you want to use that, having your own custom skills gives you the flexibility to tailor it the way that you want it to be. So, what we're going to do, we're going to go ahead and download this. By this point, we have that markdown file with this real comprehensive website audit. And if we're a marketer, an agency owner, a freelance web designer, we can't just share our findings in this massive Word

[12:26] doc or this massive markdown file and say, "Oh, this is the report that I have based off everything I found on the current website experience." We can't do that. That's too messy. That's not professional enough. So, what we want to do now, we want to take that really in-depth markdown file and almost condense it down and format it in a way

[12:44] where it's an actual client deliverable. So let's go ahead and make this markdown file from this website audit client ready still using claude. So to make this audit that we've generated or this markdown file that we've generated clientfriendly we're going to build another skill so that it also turns into a standardized process not just how we generate those initial audits but also how we generate those reports. So here inside of Claude AI, we're going to run this prompt. Build a Claude skill that takes a markdown website audit and turns into a polished client ready word document. Identify the most important findings. We write them in a clear

[13:19] client-friendly language and prioritize what matters most. Structure the document as is. So things like title page, executive summary, so on. The final file should feel professional versus strategic and easy for a client to review. Avoid copying the audit word for word or including unnecessary technical detail. Oh, let's run. We had gotten the skill back. I just skipped showing you that part because it's a

[13:39] basic skill and I just saved that skill. So what I'm doing here is I'm just calling that skill. So website audit reports and then I just uh also uploaded that markdown file that we generated originally from that audit and we're going to run with Opus 4.8 selected. Let's run. Look what we have now is we have this report which looks pretty good. Again, we can customize this as much we want to add our logo, add our branding, whatever. We have an executive summary. What's working? Some key opportunities. Prioritize

[14:06] recommendations. Um, high, medium, low, or what? What's the waiting that we use? Yeah, high, medium, low, and then recommended next steps. So, what we have here is we took that in-depth audit and then condensed it down into something that we could share with a client. One thing you might be asking is, can't I just take that markdown file and just give it to Claude AI and just say, build a report based on this? You can, and if you're only doing this once, sure. But let's say you're a freelance web designer, you're a web design agency owner, you want some consistency in your reports now and also

[14:42] in the future. What goes in the report, the formatting of the report, the wording of the report, what doesn't go in that report. In building a skill, a reusable skill helps ensure consistency in your reports now and also in the future. So that's why we're doing this to build that standardized process to really turn Claude and Claude code into our true web design partner. And that's actually the last of the parts that I had to refilm based on Claude's new functionality after I filmed it originally. So in the future part of this video, if I ever reference like an audit tool, um it's sort of what I

[15:14] looked at when I started this part of the video. Um but anyways, that's yeah, nothing to worry about. Hopefully you can see now like that's a 2-day long process now completable in about 20 minutes. Like it saves us a ton of time. And I used to work at an agency when I was interning um in university and that level of detail would have taken our small team at a time a week to go through all the details that were in that original audit and then scan that audit to build this report synthesis that we can share with a client would have taken our team forever. So by this

[15:46] point we're might be we're aware of what might be wrong with a website. Where are some areas of opportunity that we want to address? Now, that's all good and fun, but now is the hard part, which is actually defining the direction that we might want to take that website. Let's now look at defining the direction because we're already familiar with what's wrong with the website and we're going to look at this from the point of view where maybe we need to do a complete overhaul. The client's changing their brand, they have a really old website, [clears throat] they want to rebuild something from the ground up in this new like futuristic

[16:19] modern feel, whatever. So basically starting from scratch. So we're going to look to define the direction that we're going to want to take the website and generate some deliverables that we can share with the client as part of our engagement. Real quickly though, in the past, what we would do here before the introduction of AI is as follows is of course we would just browse dribble. But the issue with this, this is so overwhelming. We can't filter by

[16:43] different styles, different industries. It's it's a it's a whole lot of effort involved associated with browsing something like dribble or these repository of of tools. But we can actually replace sort of the browsing that we would have to do here manually by using AI to help us in this process. What I mean by this is we can use Mobin MCP to connect with Claude and actually have Claude do the browsing. If you're not familiar with what Mobin is, it's essentially a repository of every different screen app flow website that's out there. Like here I'm on the Mobin site side. They also have Mob and apps

[17:19] as well uh across iOS and also web apps. So you can see here that um I can toggle by different categories. I'm looking for specific screens, specific UI elements, specific flows. I can come in here and browse. So, as an example, if I'm looking to see what Airbnb is doing, I can come in here, browse all of Airbnb's uh designs, I can also see their flows as well on the lefth hand side here where their onboarding flows, so on and so forth. So, it's a really great tool that really simplifies my workflow a lot. And even with sites, too, I can browse by different categories, different sections. If I'm looking for

[17:52] inspiration on those sections, I can come in here and dialogue with Claude to pull in stuff from from Mobin via their MCP to help generate a lot of these client deliverables that we would need to info boards, things like that. So, what we're going to do here is I'm not going to hover over or click sort of my avatar in the top right because it's going to show my personal email, but I'll link Mobin down below where you can check it out. Create an account if you want to, but navigate to settings and then we're going to flip over to the MCP. And this here is what I'm referring

[18:24] to. So, under their settings under MCP, you can choose your tool. So, here we're using Claude uh code and then we have like these commands that we need to run. So, let's just copy each of these and then connect our Mobin account. Let's flip back over to Claude. Actually, sorry. Before I do that, I know as us designers, we don't really like using the Claude terminal all that much. And this here specific to the terminal, but if we wanted to use the claw desktop app, hit see all supported clients. And

[18:49] we're going to hit uh Claude desktop. And now we have this that we can actually copy and with instructions here. So, let's copy this plain text and then flip back over to Claude now. And then under customize and connectors, we're going to choose to uh add a custom connector. We're going to enter in that URL that we copied from Mobin again under the not like the original command that was being shown when we hit like claw desktop that actually remote MCP

[19:16] ser URL. Enter in the name of Mobin. Let's add this. Now you can see we're able to connect to Mobin. So let's hit connect. What that's going to do is going to open up Mobin in the browser. We're just going to choose here which I just did offline that you can't see uh to authenticate. And now you can see that um Mobin is connected that MCP is connected. So with Mob and MCP connected instead of us doing the browsing on Mobit looking for what these top websites are doing, we can dialogue with AI it does the search for us inside of Claude Code and it's going to pull in

[19:47] some of these deliverables and give us all that information. So now we can just sit back and relax. So we're going to run this prompt. research leading finance websites on Mobin and identify the pattern the design patterns that they have in common again with Opus 4.8. Well, that's wrong. You can see here what it did is it actually browsed Mobin and told us what competitor it was looking at. So, if you click and one thing it's actually going to do it, you can you can't see it on my screen, but actually opened up the specific screen that analyzed on Mobin. So, we don't need to go browsing for it. And it has

[20:16] everything this complete analysis of based on our prompts which is the design patterns that the leading finance websites actually have in common. So we can see that Mobin is up and running. It works pretty well. But again, this isn't a deliverable. And if we're an agency owner, we're a freelancer, we want some deliverables that we can actually share with the client because that's where a lot of the value is. Let's focus on some of those deliverables. Now, starting off with a mood board. When I worked in the agency realm, we would always be sharing mood boards with clients so they can sort of select which designs speak to

[20:46] them. So I am building a uh website a finance website [clears throat] finance website uh browse the screens on mobin and build me a mood board uh with dozens of looks and feels of websites I can share with a client something as simple as that. Let's run this. Here's the first result that it came back with. We have this mood board. So we have dark and premium. We see some of the the businesses that are out there, their websites that are, you know, dark and premium. And then we have editorial wealth. Uh so oversized serif headlines, warm paper, botanical greens. We have the general color palette here, type and

[21:31] feel, vibrant gradient, things like stripe. Again, stripes again. We have contra data and market. So lots of good options for us to share with a client and get some initial results on. Again, some of them appear to be dashboards. Some a lot of them appear to be um more landing page website focused, but this is good in terms of like sharing something originally with a client. But one thing I noticed here is that if we scroll down here, like this just links out to Mobin. I couldn't just if I was to share this with a client, I couldn't just link this out to Mobin. I would

[21:58] want to see actual screens here. So I ran this prompt. I need more images and not just links to Mobin as if I was a as if I was to share this with a client as right now I can't see the screens. Well, horrible prompt, but whatever. So let's make that tweak and then see the result. So made some changes. Probably not how I would have done it. We'll leave it at this for now where now we have the option to enlarge some of these and view a little bit more uh on some of the specifics. So probably not how I would have done it, but I think it's good

[22:22] enough to get the point across uh for now. But let's keep moving forward to some how else we can use this in terms of building out websites within cloud and what are some of the other deliverables that we might be able to provide to something like to someone like a client. One thing I also did is I made it like a PDF that we can also share because we're going to use this a little bit later on. So, let's just make sure we go ahead and download this. Now, one thing you're probably wondering, I'm probably going to mention this a couple times because I'm going to forget, is

[22:48] that we're going to look at this from the point of view like maybe we have this boring consulting site. We want to make it feel like like maybe more of like a premium banking site because those tend to have like pretty modern treatments. That's the point of view that I'm looking at it as. Like usually

[23:01] consulting sites just pretty boring. That's why I'm sort of crossing between consulting, which was like our design system site, and um banking and finance sites. Anyways, so we've saved that. Now, now I want one thing I want to do is I want to run this prompt. So, my client is an established consulting firm that is drawn to the look and feel of editorial wealth, which is this right here where we sort of have this sort of type of pallet. Break down the visual direction into distinct themes and provide additional direct additional detail on each to help inform our strategic direction later on. So, we're just basically asking for more details

[23:32] about this editorial wealth, this editorial wealth theme. Let's run. Now, what we have is this sort of deeper dive on the warm humanist feeling where sort of what to lean in, what to hold back on, what are the foundations, so different types of fonts, uh usually what that font is like in terms like the the types type scale, the colors that are generally uses. I might swap this out for purple or something a little bit later. Uh layout and composition, imagery and illustration, date and numbers, motion, voice, and tone. It's a little bit more of a deep dive. So hopefully you can see how we're able to

[24:03] like start off with this initial mood board or something that we got from Mobin. As we like speak with the client, we like come up with our own ideas. We have a certain preference. We can narrow that down and provide this to the AI a little bit later on. So one thing I'm going to do is probably just have that download this as a PDF as well. And one thing I might also do offline is just have it like clean up the styling and make it a little bit more look a little bit better. It just feels a little bit AI generated but it doesn't really

[24:29] matter. All right, let's keep moving forward then. One other thing you can also do is generate some competitive reports. When I worked in agencies, one thing we would always do is we would generate competitive reports and what competitors were doing in terms of their application or product. And we can use Mob and do the exact same thing

[24:43] especially we're focusing on websites. So let's run this prompt. I'm building a competitive report on websites in the banking ecosystem. Browse Mobin and provide a report. Let's run. Now we see that we have that competitive report. Now, one thing you might be wondering really quickly here is earlier on when I was doing that audit that was more like a consulting site. Like, why am I working on banking sites now? I'm looking at it from the point of view it's like, oh, we have this consulting consulting site that feels just very like plain, white, and basic and maybe we want to make it feel a little bit

[25:09] more like a like a banking application because they have really good treatments like banking websites, that kind of thing. That's sort of the point of view that I'm looking at here. All right, just in case you're wondering. Um, but anyways, then we have that um that report. We have marketing acquisition, what's the front door, onboarding and KYC, account dashboarding, and some of the stuff is more specific to to apps, not necessarily websites, but hopefully it gets the point across here. So, we have this competitive report. One thing I also did is I had it generate a word doc for me that has all that because we're going to use that a little bit

[25:37] later along with the mood board that we referenced a little bit earlier on. So, just make sure you're saving a lot of these assets that we generate as we go. But, we can see here that we have that uh banking ecosystem competitive report. So, let's go ahead just make sure we download that. Let's keep moving forward. Okay, so now we've done some

[25:52] research on things that are out there. We've started to define our direction. We have some deliverables that we could share with the client. Some of those mood boards, some of those other things that Cloud Code was able to generate. But one thing we can do now is sort of turn this research into a brief that will feed AI a little bit later on to further establish our website direction almost keep it with these types of guard rails. So basic things like the audience, primary message, conversion goal, which are all non-ressearch focused, but then things like the page structure, design principles, what actually have been informed by our

[26:26] overall research. This is going to start to act as sort of that overarching like brand guard rail before we start to generate some of those initial website sections. So we're going to look at now is all about building the guard rails that is going to help keep our AI on track as much as possible. Now, one thing I'd like to call out, and this is one of those things you're going to need to keep adding to the guard rails, building on the guardrails, especially if you're working on a larger site, larger brand guideline, whatever it is, because you might define initial set of guardrails, and as you start building

[26:54] out the website or whatever it is, you realize that things tend to drift a little bit. So, just something I wanted to call out. So what we want to do is turn everything we have that's relevance of course cuz some of the stuff we looked at earlier wouldn't necessarily be super relevant into a skill that will

[27:08] guide the AI itself inside of Claude AI. Then we're going to build a new skill. Now one thing I did is earlier on remember how we had sort of that warm humanist deep dive. I just had Claude download that as a PDF because we're going to provide that here because it's going to help influence her skill. Now let's read this prompt. We need a claude skill for a client that claude will reference whenever it designs pages, websites, landing pages or product product experiences for them. One thing you can do here is you can provide the the client name because that way you can organize all the skills that you have

[27:37] for certain clients and toggle them on and off when you're building something for a client so different skills don't get mixed up for different clients work. Anyways, let's keep going moving forward. Audience, design system designers, design leaders and teams within large enterprises. Primary message, we can make your design system AI ready. Conversion goal, book a free consultation, creative direction. and use the attached PDF as a source of truth. Create a practical and reusable design skill that tells Claude how to approach design work for this client. It should translate the audience message conversion goal and creative direction into clear guidance for the overall design approach and feeling. How to communicate expertise to

[28:10] enterprise design system teams. We didn't have anything really on that, but we'll include it here anyway. Um, and all these other things. Do not create a client-f facing brief or conduct a research. Do not include personas, competitive analysis, market data, or unsupported assumptions. The output should read as an internal design instruction set for Claude. Specific enough to influence real design decisions, but flexible enough to apply con consistently across future pages and

[28:33] components. Wow, that was a mouthful. And I had AI help me with sort of the initial prompt here. So, one thing I like to call out, the more information you have here, the better. This is more of an exercise. We might be missing some pieces of information. We could probably include more instructions and stuff, too. especially if you're working with an existing guideline or an existing startup that you likely have a color palette and some of these other details that we didn't already but whatever. So here again we're going to be using Opus 4.8. So let's go ahead. Let's run. What we have here is this skill that's going

[29:02] to act as an overarching guideline as we're building out the website. So we have the design direction. So warm humanist. So taking that output that we got from mob and some of that research that we did the client would have approved a certain direction. We narrow down on that direction and now we're providing it to the AI so that it's going to Claude code will reference that in the future when it's building out those website sections. Uh why this direction fits the client. We have all this great stuff. So voice and tone, message hierarchy and CTA, type scale, foundations, colors. Again, I might change the colors a little bit later,

[29:37] but whatever. Layout and composition, imagery and illustrations, UI styling and components, all this great stuff. This is really good. It looks like one thing it also did too is provided like a token file. Probably not something I would integrate this early on, but it is what it is for now. So, I think that

[29:52] we're in some pretty good shape here. So, we're going to go ahead and we're going to save this skill. So, by this point, we have that initial guard rail or brief. But a guardrail does not translate to an actual UI. So, we could have we could make a prompt cloud code. It could produce a UI, but the visuals of it could be absolutely horrible, but technically it follows the brand guidelines and sort of like those brand guard rails that we had to set inside that skill. So, what we need to do here is also adjust that skill to include some examples that we like to make sure

[30:22] that as Claude's building out a section, it references some of those examples. So, it tries to keep things as close to possib possible to the examples that we like. Let me elaborate here because let's just say we using that skill as we have right now. We're going to make a prompt. It's going to read the skill. We're going to get a very generic basic output. However, if we make a prompt, it Claude reads the skill and then it checks those examples. We get a little bit more targeted more of a targeted output based on the examples that we set a little bit earlier on. Now, this is a

[30:54] more advanced way to work with skills, but I found I've gotten really good outputs by using this sort of strategy by actually including examples inside that skill and then making sure that whenever UI is generated that those examples are referenced. Let's take a look about what I mean by this part here specifically. So in that deep dive that we had that PDF that we had downloaded on warm humanness sort of that that direction that in this case a client said they liked the most at the bottom here what it did is it gave some examples of where is it here references but this doesn't give AI a whole lot. So

[31:30] if we were to take maybe this origin example and then also this uh Heidi example I'm hope I'm saying that right. What we want to do is take screenshots from Mobin and then provide it to Claude to actually add to the skill. So what I did is I took screenshots. I realized that the origin website had actually been updated. Uh so I had to go back and find older screenshots of the OR origin website. Um but Heidi site is still the same. So what I did is I provided a bunch of screenshots here as you can see. So I want to adjust this skill so it holds holds examples of designs the

[32:00] client likes. In the future as Claude code reads the skill to build sections. I wanted to check the treatments found in these screenshots, adjust the skill as needed. So, basically what I'm saying is that you can I want Claude to of course read everything that's in this skill like some of those overarching brand guard rails, but as it builds out a section, I wanted to validate the design that is building against something actual concrete that it can see. So what I'm doing here is I want to store uh the screenshots that are provided here inside of this assets folder and then update this skill so that if cloud code is building something

[32:35] it also doesn't just read the skill.md but it also checks the I don't know what you want to call it the research folder the examples folder to get more solid visuals of sections that I like so that it builds something that matches. Hopefully that makes sense. Let's go ahead. Let's run this. So we have this skill back. I'll walk you through it in just a sec. But one thing that I noticed that it did originally before it provided me initial skill is that what it was doing, it was almost saying, "Oh, if we have this footer example here, our footer should match that." But that's not what we want to do. So what I did is

[33:08] I told Claude, Claude should look at all references and apply the treatment that makes sense, not one that matches an example one to one. So then it adjusted the skill and came back with what we see here. So we have all those references here. So all the different examples of designs that I had screenshotted and then it adjusted the skill.md accordingly. So if I scroll down here, picked up, sorry, I should have navigated away uh because I was right exactly where we wanted to be. So we have the reference library, how that works together. Um and then specifications around translate, do not copy, these are other companies brands,

[33:40] keep the composition and restraint replace everything brand specific with this client's tokens and rules around like reskinning things and all that fun stuff. So hopefully what it does is it doesn't like if we say we need a footer, we don't just get the exact same footer that was on this origin example because we again we don't want to copy existing brands. We're using sort of these screenshots as an overarching guideline that the AI should follow and that Claude should actually reference. I know that can be confusing. Hopefully I explained that well. If you have any questions, drop them in the comments below. I want to do a quick recap of

[34:14] everything so far. Now, Claude started off helped us analyze an existing site for opportunities to help us pitch and it generated a document that we can share with, you know, a client, whoever to sort of showcase that, okay, we're doing some thinking into this. This is everything that we've noticed about your website. We'll get back to this one in just a second here. Claude also helped us analyze some competitors designs via mob and what designs are out there. Uh, and as part of this, sorry, let me go back. could also put together some um vision boards and other client deliverables. Sorry, words are tough right now that we can share with a

[34:48] client too as part of that engagement or we can share with a stakeholder for building a site internally for our company or whatever reason. Claude has an idea on brand guidelines via the skill that we have generated and Claude also has an idea of competing designs that we like. So, we're able to feed

[35:05] some of those screenshots to Claude. Now, one thing I want to touch upon here is what I first chatted about, which is the idea that Claude helped us analyze an existing site for opportunities to help us pitch, help us improve that website. [gasps] One thing I want to call out here is that addressing those opportunities should be up to us. We should not have Claude go through and do all the thinking. This is a big mistake that I am seeing designers make because let's say we're working on a website. Claude returned to that audit. We've gone through all the steps so far and we think we're ready to start building out

[35:40] that website. What we do is, you know, we start focusing the opportunities. You know, Claude, build out the site. Now, address this opportunity because this what was wrong with their existing site. It's going to return an output. And then a lot of designers, they just take that output as it is. My question always is like, how do you know that that output is actually right and solves that opportunity or that problem that was on their existing site? If you're building a product that was on their existing product, sort of all the opportunities that you identified or that Claude helped you identify as part of any like website audit, you should be

[36:14] the one to drive the output. You should be the one to do the thinking behind it because eventually what's going to happen is someone's going to ask you, okay, you've identified all these opportunities, things that were wrong with our existing website or existing products, whatever. Like, how does your current website design or whatever you're building, whatever you're providing me solve that problem? Take advantage of that opportunity. And if you have claw do all the thinking for you, it's going to give you a good output, but you're not going to know the reason why. And you're going to be you're going to struggle to be able to

[36:43] communicate that thinking. And it's a mistake I see a lot of designers make time and time again, especially in the product design realm, but it's relevant in websites, too. So, what I'm trying to get at is do not rely on AI to do all the thinking for you. So AI can help us build out the designs, build out the designs, build out this, build out that, but you should be the one to prop strategically around the opportunities that are made available to you as part

[37:09] of that audit. Sorry that was a ramble. That said, one thing you're probably thinking is, can I include this website audit in this initial skill? [clears throat] Yes, you can. There's nothing wrong with it. But my own personal approach, as I just said, is I need to understand everything that's in that audit, making sure I understand what is what's in there, making sure why that's in there, and then make those fixes on my own. And then later on, what I'm going to do, sneak preview, is actually build this QA skill that includes that that initial audit. So, it's going to go through and QA the website and compare everything that it's

[37:48] seeing against what is inside of that audit. So that audit we're still going to use. I'm just not including it in this initial skill. And just for the reason that I always want to know what was in that audit, make sure I fix everything that was in that audit so that I can speak to it on my own a little bit later. This is part of like that critical thinking part that designers like we're we need to get better at. Um so that's just what I'm trying to teach here. So any questions on that, drop some comments below. And now before we move on to actually

[38:14] building out the site, talking through some things about claw design, how we might want to approach like building out the actual website with claude code and get into things like Figma and all that stuff a little bit later on is what I have seen before is a lot of designers what they'll do inside of just one shot say here's the research go. They enter in like their brand guard rails, uh any design system things, any of the research that they pulled from earlier, uh their mood board, vision board, all the documents that we have so far, they'll upload it into one shot and say, you know, build me a website. Now,

[38:47] that's all good and fun, but you can't build an entire website or project inside of the exact same claw chat. Why? Because the context window will get overpop populated. There's going to be too much information inside of that chat for Claude to remember what it is you provided it last week versus what you provided it today and AI is going to start hallucinating and you're going to start to get mixed results because Claude's just going to get confused. And that's another reason why we built that Claude skill is that we can preserve the context that we have across chat. So maybe we start building out the website

[39:20] in one chat. That context window gets overpop populated because we're playing around different designs, all that fun stuff. And then what we do is once that context window is overpop populated, we decide to start a new chat because maybe we're focusing on our new page, we can start a new chat and then Claude will read the skill and now all that context is now available once again inside of that chat. So we don't need to reprovide it time and time again. So that's another reason why we built that claude skill. Now for the building of the actual website is as we build out the website, there's different approaches

[39:50] that you can take here. So there's no oneizefits-all approach. Some people like to build a website page in one prompt. So they load everything into that initial prompt and they refine it section by section. That's a pretty common approach that I see where you see a lot of designers, they have these prompts that are like 10 paragraphs long. They just flood every piece of data inside of that and they go section by section tweaking things and polishing things once they have the website done more holistically. Some like to go section by section starting with the

[40:22] navbar. So they start with a blank page. They start with the navbar they and then then they just work their way down. That's another approach too. Some like to start in claw design for draft one and then once they have that really good first draft then what they do is they complete it in claude code. And in the past whenever I've been talking about more product design specific things, this has been a really really good workflow for me. Some like to start in

[40:44] Figma and then complete in cloud code. What I'm trying to get at is do what you think works best here. I get a lot of comments around, oh, how should I start up building website and AI? Do what you think makes sense. Every single one of those methods that you saw is going to get you to the exact same outcome. So, there really is no one-sizefits-all

[41:05] approach. Do what you think works best. We're going to explore today how I personally like to do things, and that is you start in claw design for draft 1, then you complete in claude code using Opus 4.8. Now, we're going to start with a website wireframe, but not give it any of the actual skills. So, claw design doesn't usually have access to everything that we've already done, but that's fine. We're just building a skeleton of the site. And then once we bring that into clawed code, it can start to apply everything that we've done so far and some of that skill. Now, we can give it sections and any other

[41:38] details maybe that the audit said we need things like testimonials or whatever else that audit said to include at a high level. Like if we're missing some really key sections, we can tell Claude designed to include that, but personally, I just like to keep the prompt and claw design to a little bit of a minimum. I'm not a big fan of like these big heavy prompts. It's just my own opinion. You can take it a

[41:58] completely different way if you want to. And again, what I'm trying to show you here is a workflow. You can customize it as much as you want to. In the past, one thing I want to cover because I'm probably going to get some comments on it is in the past I said I never wireframe. And personally, the reason why I don't usually wireframe is more specific to product design than anything website related. The reason being is if I'm building something for a client, an app, like a dashboard or something. A wireframe doesn't really help me. Clients don't like looking at wireframes. Like the pages, they're not

[42:28] super long. It's usually just a one dashboard. So I can look at the dashboard on one page holistically and sort of just piece things together the way I see fit. And Justin, like from what I've noticed working with enterprises, a lot of design teams, they don't wireframe anymore. They just jump right to hi-fi because that's what stakeholders really expect. So I know in the past I said I never wireframe, but that was specific to product design, not

[42:50] to websites. Wanted to call that out. And before we flip over to claw design, one thing I'm doing here is I'm sort of taking to build out that prompt uh in a way that kind of aligns with the skill. I'm just taking pieces of the skill itself. So I'm just auditing the skill, taking key things like this here is a really great line. Northstar, warm never soft. Warmth is the accent, not the argument. The argument is always expertise plainly stated. That's a good line that AI could do a lot with. Um so

[43:17] some of these I'm just going through. auditing the skill and taking bits and pieces of it to inform that initial prompt inside of Claw Design then. And I'll put a link to a Claw Design video down below. They've been making some changes lately. I'm going to film a new video on that, too. So, be sure to subscribe for that. And I'll also put a link to Claw Design if you've never used it before. So, we're going to run this prompt. Build a landing page for a consulting firm. The firm makes enterprise ready designs makes design well can't talk. The firm makes

[43:41] enterprise design systems ready for AI. Two things must land at once. We are serious. We are on your side. Warm humanist earns that. It reads, "An established firm that respects your craft, not an AI startup selling magic." Good line. Nor star. Warm, never soft. Warmth is the accent, not the argument. The argument is always expertise.

[43:57] Plainly stated. Feeling the hit. Considered warm, assured, human, unhurried. In an original website audit, we need a way to book a call directly on this page. And to show client proof closer to the top. So this is where I'm bringing in okay what on that initial audit what are those more section level items that we need to include that we missed on the original site I'm including those details here to start checking off that we are including some of those things that were in that audit where we're going to lean in and these are just copied from the skill I'm not going to read them uh so lean into like

[44:29] soft cornered surfaces on a firm grid plain expert first person plural voice hold back break radiance um rounded bubbly pill everything UI hype buzzwords so [clears throat] all that stuff and I also attached an image of the hex codes that were also a part of that skill so it tries to match that color code at least slightly to the color codes that we identified now in this for this point of view we're going to look at it from the from the idea that everything about the website's going to be new but this is where you would want to attach sort of your client's u hex codes and type

[45:00] styles all that fun stuff all right whatever so one thing too we need to do is select the wireframe template here because we're building a full-on like hi-fi prototype yet. So, we're going to wireframe that for now and let's go ahead. Let's run. So, this is what we got back. So, we got three different wireframes here. So, I'll walk you through it. So, this one basic hero, we have our trusted team. This is sort of like that proof near the top that came out of that original audit, which is

[45:23] good. What we do, the work is evidence. We can book a 30 minute call closer to the top of the page. We then get into case study, how we work, FAQ, then another footer along the bottom with the book a call CTA. Pretty good. This one here is a little bit of a different approach where we actually have the option to book a 30-minute call right in the hero. So, a user doesn't need to scroll at all. So, with that, this text

[45:42] here would need to be super captivating. Trusted by uh evidence, evidence uh and then what we do. And then another case study, how we work, FAQ, another solid option, a little bit of a shorter page, and then this one a little bit completely different where we have trusted by logos right along the top. um regular header uh services uh evidence so like things like looks like component token map a case study how we work and then book a call along the bottom. So three solid options here. Now one thing you might actually be wondering is we're using a wireframe but cloud design is generally pretty good at at design. So

[46:21] why not use like that prototype hi-fi option? Why do we choose wireframe here? And the answer is like you can if you want to like there's nothing stopping you from jumping right to the prototype. Now couple things I want to call out is claw design has a very like unique look to things. So you can always kind of tell what is a clawed design versus what is not a claw design design. So you always got to be careful there. Like if someone was to show me something I could easily tell that's claw design just the way the font is, just the way some things are. I can just tell. The other

[46:51] thing too is if I was to take this design again, I ran that exact same prompt and this is the output that I got. So I'll walk you through it real quickly before I continue on with my rant. Um, so we just have this basic hero. We have these logos, how we can help, like the services that we do, our process, then you can book a call just using that exact same prompt. Now, if we go back, this is it's half decent, but it's not great either. But if we go back here, I kind of like some of the ideas that the like the wireframe spun

[47:20] out. It's my own personal opinion. And if we were to take this as is claude code, we get really influenced by this design. But if we bring the wireframe into claw code, cla code is going to reference the wireframe, but it's not enough to get influenced by it. So, it's going to apply everything inside of that skill and all of that uh research that we did, all those examples that we did to build something that looks and feels great. So, try not to rely on cloud design for absolutely everything. So, as I said before, you can bring you you can do everything in cloud design and hi-fi,

[47:54] then bring it to cloud code if you're ready. But we're going to proceed with some of the wireframes, I think, for now. Now, one thing you're probably wondering too is what if we feed claw design with all of like our additional items here. So, maybe that skill that we had downloaded, maybe all some of those screenshots. This is another option for you to do because you might get a better option or better output the first time than what we saw with that original hi-fi just running that original prompt. What we're going to do, we're going to run that exact same prompt but include the skill.md that we created earlier and

[48:35] some of those other examples from uh Heidi and Origin around different examples of designs that we like. Let's go ahead and run this. And this is the result it came back with. Like it's better like the hero is a little bit better. we have some of that proof closer to the top. Um, personally, I still like still like some of the ways that it approached this with the with the wireframes than what it is here. Uh, you know, this section half decent this section not a big fan. Um, standard placeholder section book a call relatively better footer a little bit better, but [snorts] you can still tell

[49:10] it's claw design. Even if we provided all that context to claw design, this is what it produced. So personally when it comes to building some of these websites it's easier to take some of the wireframes and then just go into claw design and go section by go into cloud code sorry and go section by section because one thing you're wondering is oh this result is better in claw design and claw design is usually a little bit better can't I just keep iterating in claw design but the issue is that you're going to have to keep providing all of that context over and over and over and

[49:41] over again because the skills that are inside of claw design here. They're not your actual skills. They're skills that are only unique to claw design, like creating animated videos, creating wireframes. So, you're you'd be missing all that great context every time you make changes to the sections. So, hopefully you can see now why I'm doing some things versus the other. What we're going to do, we're going to take some of those wireframes and bring them into Claw Design and start to show you how to go section by section. A good rule of thumb here is like whenever I'm removing things from claw design, I always just

[50:12] make a copy of that original file. So I always have that original um set of wireframes to reference. What we are going to do here is we are going to uh send this to cloud code. And there's a couple different things that you can do. So I'm just going to copy this prompt. You can also just choose to export it uh if you want to. Um but personally I just like to send this to cla code. So we're going to choose to send this to cloud code. And we're going to open up cloud code. Then this is the wireframe that we chose that we chose to uh work with

[50:40] here. So it's this the third option where we have some a little bit of a different treatment, some logos along the top. I think there's some unique treatment that we can do with that. Um sort of a larger hero. Uh we get into services right away, some evidence and some stuff that we do the case study how we work. Um and we're going to roll with that for now. Whatever. Let's uh go ahead navigate into cloud code. Inside of cloud code, then I'm going to run this very vague prompt. So I'm going to invoke that skill. uh and then this is the first draft of the wireframe to

[51:10] support the design for the client mentioned in this skill make it come to life and then I pasted in what uh claw design gave us. Now this make it come to life part is there's different approaches you can take here. You can say just build the wireframe exactly as is then go section by section. You can also just say you know take this wireframe and do an initial first draft but we're just going to roll the dice here and see what it comes back with. I

[51:37] like to have fun when I'm doing this. So, let's just see what it comes back with again using Opus 4.8. Oh, that's wrong. There's one thing I want to cover here, which is the idea of like one prompting a world-class website. That concept does not really exist. Um, I see it all the time. It's like online it's like, oh, Claude Code gave me this worldclass website in one prompt. It's like Fable 5 is insane. It's incredibly difficult to do. It's like maybe they have a insane prompt or a set of skills that help you do that, but it's not things that like the average person, the

[52:09] average designer has or is able to really do right away. So, even though Claude Code can help us build websites, build designs, things like that, it's not something where it's like one prompt and done. And don't expect AI to give you something perfect in 10 minutes either. A lot of designers get discouraged where they play around with AI for 20 minutes and they're not getting what they're looking for and then they just quit because like, oh, AI can't help me. I should have done this in Figma. AI is a waste of my time. AI

[52:36] can help you, but it's still a process. You can do things faster than you can do in Figma, but it's not going to give you a perfect result every time. You're going to need to spend some iteration. You're going to need to do additional research. No matter how well we set up that skill, you're always going to need to make tweaks to things. So, just want to cover that right away. that one prompting worldass website doesn't really exist, but I see a lot of like this type of idea out there. And don't expect AI to give you something perfect in 10 minutes either. You still got to

[53:03] put some work in. All right, so I forgot to save the skill that had all the references. It was referencing an older version of the skill. So I had to go back, save the skill, then start again. But now here we are. Look at this. So you can see like this is the importance of why we set up that skill the way that we did because we can see that it's going through and it's reading some of the references that we provided. It's reading the skill. It's understanding the type of design that we're actually looking for. So, it's hopefully going to give us a better output as opposed to

[53:27] something that's clearly clearly clearly very AIish. So, this is the draft that it came back with. So, if we look here, it's not bad, but it still feels a little AI generated. And I think the issue that's happening here, look, it took some of the treatment from some of like the examples that we gave, but I think the issue is that it's trying to follow too closely to that wireframe. So I think this is where we might need to edit that scale a little bit to say you have the freedom to explore options that you think make sense. So and that's actually just what I told it. So you're

[54:00] still too close to the wireframe which is hindering progress. It's okay to drift away from the wireframe to explore new options that make sense. And we're going to play around with some like wording like that. Um and we'll loop back here. And while that's loading and doing its thing, you know, I just chose this wireframe just to get started with, but we can always revert back to different sections a little bit later on if we wanted to. So that's why another reason why it's important to keep all of the wireframe examples, even if you only send one cla code. All right, and this is what it came back with. Now, first

[54:29] off, you're probably wondering why am I wearing a different hat and different shirt. It's because I'm currently on hour about eight of planning [clears throat] and filming this video. So I have to break this up onto different days and different times of the day. So that's why I'm not wearing my black t-shirt, my black hat. Anyways, so this is what we came back with. Now, let me caveat [clears throat] here. This is still like a first draft. Not a lot of work's been done so far, but that's fine because we're going to go section

[54:54] by section very shortly. Let's scroll take a scroll through. So, hero, not bad. I think it can be cleaned up a little bit. [clears throat] As we scroll down, notice how we're starting to get into some of that feel that some of those screenshots that we provided in that skill had. So, we can see that that skill is working pretty well. It's keeping things on brand. I think the issue was before it was just adhering too much towards that lowfi wireframe that we provided it when we told it to remove the guard rails. It started to work. And as we scroll down, I think this needs [clears throat] some

[55:27] work, particularly this on the right hand side. But I think as we click here, okay, this works pretty good. As we scroll down, not a big fan of this. We'll tweak that. We have a similar treatment down here. And then we get into this also not bad. And then timeline. Okay. So, there's some work that needs to be done, but it's a solid first draft. Let's talk about an approach now as to how we go section by

[55:49] section and improve this one at a time. So, what we're going to do now, we're going to go section by section and clean some things up. So, we can sit and prompt all day long, but it's not really going to get us anywhere. Or what we can do is keep finding examples we like and give it to Claude and go section by section. And even better yet, we can use

[56:08] the mob and MCP connection to help us. We already have this connected. So we can task Claude with going to find new examples of different companies that fit that overall theme that we had identified earlier on beyond some of those initial examples because again there's a whole lot of great inspiration out there. Why should we limit us limit ourselves to the examples that were inside of that skill. That skill is great for helping to define some of the initial designs and keeping the designs on track. But we can find other examples of formats of layouts that we like. So, let's take a look at what I mean by

[56:42] this. Back inside of Claude AI chat, I'm going to invoke that skill. Please take a look uh at [clears throat] this skill and the references inside of this skill uh and find me other uh companies on Mobin that have a similar look and feel. We are going to focus on the hero to start. So know what I'm doing here. We're only going to focus on the hero because I don't want examples for everything. If we start rebuilding all all parts of our website at a time, it's going to turn into a little bit of mess. We're going to go section by section. So please take a look at the skill and have the

[57:22] reference inside. Please take a look at the skill and the reference inside of the skill and find me other companies on Mobin that have a similar look and feel. We're going to focus on the hero to start. Well, that's wrong. What it did is Mobin went through and read the skill, read the examples inside of the skill, and then came back with some examples. So for some different companies that we didn't look at before, so closest to warm humanist, uh, claim then evidence, right structure, wrong paint, audience, relevant but off register. So what we can do then is it also links us out to those examples on

[57:50] Mobin 2. So we can click into mob and take screenshots of the ones that we want and then feed that into clogged code, but focus on one section at a time. I want to show you something here. So, I provided this hero that's kind of on the edge of what we're looking for. And I entered this horrible prompt, so whatever. Adjust the hero to have this kind of type treatment. Provide a navbar that fits as well. Um, anyways, I probably should have separated out the navbar and the hero, but whatever. I'm a rule breaker. So, right away is it knew that when I opened up the project in a

[58:19] new in a new chat that this is a warm humanist design direction project. Let me load this the specific skill required for designing for this client. good workflow. So, it read the skill and now it has the full design direction. So, it's not going to build something now ideally that doesn't match our design direction like how you can see in the preview here how it's sort of like that light gradient in the back, light red gradient in the back. Um the different type of text style that's not what we're going for. So, now it recognizes that it still needs to follow the design direction based on the

[58:51] guidelines that are inside of that skill that we made earlier. You can see how powerful of a workflow this is. If you're working with a client that has a very specific brand guideline, now we're talking a little bit like this here is drifting further away from that AI slop and more towards something that actually

[59:08] looks like more of a premium website. Now, I want to call out something here too is this is a demo. This is a tutorial. This is not meant to be an 8h hour long video where we get everything pixel perfect. I'm showing you the workflow. You can customize it. Spend as much time as on your own. Of course, there are things that we're going to want to clean up here. The spacing is a little bit off. Like this button could be bigger. This here is a little bit weird. We could add in a load effect. We could like we would likely need to adjust the logo. It looks more like a

[59:35] law firm than anything else. But to go from zero to where we are at now with a workflow where we have the guard rails, we're able to go through research, go section by section. Now we're off to a pretty good start. Let's pretend we've tweaked the hero as much as we wanted to. And again, one thing I might do offline is just clean up some of those small elements. But maybe what we want to do now, let's flip back to the LOI and let's say we've marked this off section one. We'll come back to it very shortly. Now for services section two, what we do is essentially the same

[1:00:04] thing. Now looking at the loi that I had originally provided, we had that 2x two grid, but I know that 2x two grids usually lead to something that looks a little bit AI generated. So what we can do, we can repeat that process section by section now. And then what I did is I just repeated that process a couple times for some sections and just had a one prompt just to clean up some of the small things. It only took me about like five prompts. Like the hardest part is just waiting like waiting for the AI especially with Claude Opus 4.8 and some like these higherend models sometimes it

[1:00:31] can take like 10 minutes. So it's just something you got to be prepared for. So I just did other things while um it was loading. But anyways, this is kind of where we settled. So we have that nice loading effect. This hero is looking pretty good. As we scroll down we have that nice loading effect. As we continue to scroll on, we have these different cards that don't really feel too AI generated. Then we get into some testimonials, too. So, you can see here that this doesn't feel super AI generated. And even with some of the examples that we gave it, it almost still continued to

[1:01:04] keep it on brand based on that skill that we had set. I want to look at a quick example as to what I mean here, particularly for this. So the example that I gave for that case study was this example from Wise here. As you can see, it's completely different. It's not like that green. And it if we were just to take this as is and put it into our design, it wouldn't fit at all. But instead, what it did is it took that design, read that skill, and then made it on brand. So half the battle whenever you're designing with AI is trying to get it on brand, keep giving it

[1:01:34] different examples. But what that skill did that we created is it took that example that we gave it that was off-brand analyzed the format and then made it our own and adapted it to our existing brand based on those guard rails that we had set a little bit earlier on. So this here took one prompt instead of me having to iterate iterate iterate spin all over to try to get this design

[1:01:58] looking and feeling the way that I want. Those guard rails helped us do that. That's one of the big positives of doing what it is that we did in that lengthy setup process. Now, we can see that this has come a long way in a very short amount of time. One thing I want to talk

[1:02:12] about though is QA quality assurance. Because sure, Claude, every time we start working on a new layout or introduce examples that we like, Claude of course is going to read that skill that we built earlier that has those guard rails, that has those references. But as you start making changes, things are obviously going to slip through. AI is not perfect. So what we do is what we want to do now is we want to build a skill that actually does quality assurance based on all those guard rails that we set out earlier in order to so like once we finish a section we can run that quality assurance skill and it's

[1:02:52] going to validate that we didn't drift anywhere with us prompting claude a couple times on some sections didn't cause any mistakes that it wouldn't have made otherwise. So let's take a look at that now back inside of Claude AI with Opus 4.8 is selected. We're going to run this prompt. I want to build a skill that complements that original skill that we built earlier. Every time we complete a web design section in cloud code, we will invoke this new skill to ensure that we did not drift from our design direction. We could probably elaborate on this a little bit more. Uh

[1:03:19] but it's late in the day and I'm tired. So, let's run it. See what happens. That skill is built. So, you can see here how it operates. So, it takes a screenshot. If no screenshot can be produced, it stops and asks rather than guessing. Or we could like paste in a screenshot. It reports then offers to fix. It never edits unprompted. Um, and then what the output. So, an inline verdict table plus a saved MD audits we can keep. Um, I think that looks good. So, we're going to go ahead save the skill. Again, ideally, you should read through it. Uh, but just in the interest of time, we're

[1:03:47] not going to do that. Let's let's loop back to cloud code now. So, [clears throat] we're going to invoke that skill in a new cloud code shot and say, uh, please check the services uh section again with the folder that has everything has our project in it. um selected here. So call that skill. Please check the services section. Let's just see what happens. Now we have this audit back relating to the services. So we can see the area and the verdict whether it's pass. And right now it looks like everything passes except these two items. So space and measurement and data in motion we have to watch for. So [clears throat] think

[1:04:23] about like how these types of things usually get brought to your attention in like a client engagement. And usually you get to the 11th hour, [clears throat] someone from brand or marketing or whatever takes a look at the website and then gives you a list of everything that you need to change because these are not on brand. Now all of a sudden you have this secret weapon of a QA skill that does a lot of those checks for you. So as you go section by section, you can address things that you need to before it gets out of hand and before you having to change something

[1:04:54] all of a sudden messes up the entire look and feel of the website. Let's talk about deployment now. So let's say we've gone through the process. We've refined every section. We've done our QA on every section. We reviewed it with the client. They're happy. Now it comes time to deploy. For deployment, I like to use Verscell. Would highly recommend it. Um, ideally what you should be doing is you you should be pushing to a GitHub and then have your Versell connected to that GitHub. That's best practice. We're not going to go through go through that process now. You can ask Claude on how to how to do that. It's going to walk

[1:05:23] you through the specific steps, but I just want to walk you through how to deploy because maybe you want to share this early stage with a client. So, I'm just going to run this simple prompt. Uh I forgot my please here. Sorry about that. Please prep uh this file for Verzelle and provide me steps to deploy. Well, let's run. You can see here that Claude just walked me through some steps

[1:05:43] and I just walked through those steps. Relatively simple stuff. Um, and you can see here that now it's on this Verscell domain that we could share with a client for preview and things like that. Now, if you do it through GitHub, you do on their actual platform, you can connect a domain. Relatively simple stuff as well.

[1:05:58] Just have Claude walk you through it. Uh, but yeah, that's an real easy way uh to deploy. By this point, we've done like a lot of that prep work. We have that audit. We have those guard rails. We have those skills, QA skills. Uh, we've done a bunch of research. And now it comes time to actually pitching the site. So, think about like you're pitching it to a client or an internal stakeholder. And the best designers I know are really, really good at telling a story. But sometimes designers also need help in building out that story. And I got to admit something here is sorry everyone, I kind of messed

[1:06:31] up. Is I should have covered this part at least a little bit earlier or at least the setup a little bit earlier because it would lead to a little bit of a better output. So I don't think that right now I'm going to get the same output that I would have if I had covered this a little bit earlier. So sorry everyone that's on me but the concept is still something that you can take into your own client projects into your own website work or whatever. And the reason why I should have covered this part a little bit earlier is ideally every convo we have with claude

[1:06:57] AI should actually be inside of a claude project dedicated towards that client. And also too inside of this project we can store things like our audit report any MD files that we generate. is sort of the one central source of truth for that client because what we can do is we can actually have AI summarize all those chats uh at the end of the engagement summarize all of those files that we have and turn it into a client story in some type of PowerPoint format. Here I am just inside the sample client project. Now I didn't show you the process of creating a project because then you're going to see all of my messy

[1:07:29] chats and all my projects that I have. So but in the lefth hand sidebar within Claude you're going to see projects. Just choose to create a new project. So it's basically any conversation I have with Claude specific to this one client belongs in here or should have belonged in here. What I can also do is I can also add context like that audit report uh those skill.mmd files any any other files that we generate any conversations we have about finding good research on mobit can also be done inside of this project too because what that does is at the end of the engagement I can just

[1:08:03] have Claude say summarize our full process here and turn it into a PowerPoint that I can showcase to a client and it's going have all the necessary context towards the decisions that you made and why. And this only is going to work really well if you're pretty consistent on using this project. Like you can see here, I have my chat finding companies that match the the skill that we created that have similar treatments based [clears throat] on all the details of that skill. I add added additional context like that website uh audit. So by the end of this, you might

[1:08:37] have a bunch of different files in here. You might have all your chats in here. And then at the end of it, just ask Claude to summarize your journey and build you a PowerPoint. That simple. I'm not going to get a good output here just because I don't have a lot in here. Now, again, my apologies. I should have done this earlier, but if you're successful in keeping everything inside of this project, the output that you're going to get on that final PowerPoint is going to be really good. So, just to try to show you sort of the art of the possible here, I'm just going to run this small

[1:09:07] prompt based on everything inside this project and screenshots of the final designs that I also provided to that context. Build me a small PowerPoint documenting my journey. Use filler content if you need to and fill in gaps were required in order to showcase the possibilities. I don't think the output I'm going to get here is very good. Just I don't have a whole lot inside of this project, but I just want to show you what an output could potentially be. And

[1:09:27] what we get back is something like this. Like this is like a legit slide deck. that sort of talks about our journey, takes the screenshots of our website, includes it in this great like I think it did a really good job based on the details that we have. But even [clears throat] like the copy too from an audit to a site that proves the pitch. How Design System Labs went from a site that quietly contradicted its own offer to one that demonstrates it accessible, systematic, and backed by named proof. Amazing. This is really good stuff. It is 10 slides and you can think about how in-depth

[1:10:01] this would be if we added way more content to the prompt, way more context to the project. Um, stuff in the knowledge base. We had all these different chats in there. You know, maybe we generated a report and all the different competitors that we looked at. You like this is like one of those things that would take any designer like a couple days to put together and it did a pretty solid first draft in about, you know, 8 minutes. Hi, thanks for being here. I really hope you learned something. going to have a lot more content coming working with AI, working with cloud code, design systems, and a

[1:10:32] whole bunch of other things too. So, be sure to drop a subscribe for that. Uh, also to check out our website uh link in the video description for UI Collective Academy. I'm teaching AI workflows and a whole lot more. Also have some awesome things coming uh associated with that and other items as well. Um, then yeah, follow me on X and comment below. Yeah, I don't know why I'm still talking. Um, anyways, if you want to watch a video where I build an entire design system, click in the top left. If you want to watch another video I highly recommend, click in the top right. Remember to

[1:11:06] subscribe and I will see you at the next video. Woo!

---

About this transcript
Read from YouTube's own caption track and laid out by ViewRank AI (https://viewrankai.com).
ViewRank AI finds the videos already beating a creator's own average on Instagram, TikTok and YouTube Shorts, transcribes them from the audio itself in more than 60 languages, and turns what worked into new ideas and scripts.
Free transcript tools, no account needed: https://viewrankai.com/tools
How to read any video this way: https://viewrankai.com/llms.txt