Create Beautiful UI with Claude Code

--- type: transcript date: 2025-07-21 youtube_id: VT8Enpn6-zQ --- # Transcript: Create Beautiful UI with Claude Code In this video, I'm going to show you how you can make it consistent, beautiful UI for your AI application. You probably built an AI application before and you get to the point where you're building out the UI and it might have a bunch of linear gradients everywhere, maybe some weird text colors. There might be icons and favicons everywhere. In this, I wanted to show you a really simple trick. This is really agnostic to any different system that you want to use, whether it's cursor or cloud code or really anything that's out there. Most of them should be able to accomplish something like this since they are just leveraging an LLM under the hood. Now, in terms of getting started, so all that you really need to do is to prompt the AI to specify that you want a style guide. I'm going to say I want to build out a simple website design system. I want to have the colors be primarily dark, but also have some light accents, and then the primary colors are going to be blue as well as purple. I don't want any linear gradients. I want it to look professional, and I want the font to overall be relatively thin. I think a lot of people in the space, they might not have really been a web developer before, maybe they're a back-end engineer or maybe they're new to coding as a whole. One thing that is super common as a developer that you'll get is something like a style guide. And where this is helpful is you're going to be able to use this as the basis for setting a lot of those reusable pieces within your application. Now, this is a super simple concept, but if you just ask for a basic UI like this, you can go and you can start to iterate on different things. What I can do within here is I want the primary button color to be purple as well as white. Let's make the purple a dark purple. And then for the secondary button, let's have a black button with white text. Let's also maybe create some inputs as well as some drop downs. The whole goal with the style guide is to really just spend a little bit of time on it until you get a decent idea of what you actually like. Here is an overall dark theme. We have some examples of some form elements. We also have my primary button here, that secondary button. We have all of these different text options within here. But what you can do with this, and where this becomes increasingly helpful, is if you start to have more and more reusable components across your site. I could say, I want to create a beautiful tile. I want to also create a table view that's going to be able to have a nice heading. And I also want some examples of what all of this looks like over a white background. The idea with this is if you spend a little bit of time on your style guide, what you can ultimately do is you can reference this bit of context within your application and you can say, okay, this is going to be what we use for styling. Here is the starting point of what we have so far. We have the colors, we have the typography. The idea with this is really just to see are there different things that are missing or do things stand out that you really don't like? Like maybe you don't like this purple or maybe don't like purple at all. You'll be able to see this early on within the application. And the nice thing with this is it will also allow for consistency within your application. And that's one thing within professional applications. And having built a ton of different websites over the years. Having something that does have consistent styles definitely is something that makes it feel much more professional versus something that might feel a little bit more rudimentary or maybe amateur or what have you. We have our nice table here. And if I just go down to the light theme here, we can also see how it looks here. Additionally, what you can do within this style guide since it is built in code is you can ask for things like animations that certain elements might have. You could say, I want to have a beautiful hero image with some nice typography that fades in and let's leverage motion for that animation. This is what it generated for us. We have this nice hero area here. We have get started. We have these call to actions. We have our colors and we have everything else that we had generated here. So you can iterate on this. And the nice thing with this and the trick that I do with this is I'm going to say now that we have the homepage done, I actually want to move that homepage to a page called style-ashguide. And then let's just have the homepage be a blank page now that says hello world. The benefit of having this as a separate page is what you're going to be able to do within cursor cla of these different systems is you're going to be able to directly reference the context of this page. So this is going to be a relatively small piece of context. This is only going to be about 4500 tokens. So I like to use AI studio sometimes just to get a sense on how many tokens something is. Now if I hop back to our application here, I see on our homepage we have hello world. And if I go over to claude, I can say based on the context and you're going to be able to do this within cursor. Like I said, you can at@mention and within here we can go the style guide on the homepage. I want to have a hero area that reads developers digest and I want to reference all of the styles just like I had within the style guide. And the goal for this page, let's have it look like a modern SAS landing page, but let's try and leverage as many of the different component pieces that we have within the style guide. Okay, so now for example sake, I prompted it just to try and leverage as many of those little pieces that we had within that style guide. But when you're actually asking for things and describing what you want with natural language, you can obviously be a lot more specific. Like maybe you're on a page and there's a table, you can say, "I want to reference the table from the style guide. I want to have a hero area." And maybe there's a button and you can choose I want to have the primary button or whatever it might be. And as you're more familiar with your style guide and you begin to use it a little bit more and you become familiar with the concepts like I have a primary, secondary, and a tertiary button and you have that sort of mental model of what those things look like, it makes it a lot easier and natural. And the thing with this is even if you're working across a number of different brands is this type of system will be able to be portable. Now I'm going to open this up. So we have developers digest the ultimate developers newsletter. We have these call to actions here. We have these subtle hover effects. Now, if I scroll down here, so one thing that I will show you is something that AI models do like to generate a lot of are things like emojis. So, I'm going to show you a trick on how you can mitigate it generating those within your application as well. If I just start to scroll down here, we have choose your plans. We have this nice feature comparison which is going to be based on the style guide table that we generated. We have this nice consistent pricing table as well. One quick aside where it is nice within your style guide is if you do have a dark and a light version, there will become times and places where both of those are relevant because if you just have a overall dark theme website, it can look pretty slick. But at times it can be nice just to have certain sections that are featured over a lighter background and if you have the inputs already for what those can look like, it can make it really easy to build out and reference. Now, you'll probably see a ton within here of different things that you change. Like personally, I think the contrast could be a little bit stronger, especially given that it is a thinner font. I find it a little bit hard to read some of these different things. But what you could do within this is you could spend a little bit more time within that style guide to actually generate all of these things. Now, another thing that you can do is if you do have things that you do not want generated, let's say I never want to generate the emojis. I can say in my claude MD, I never want to have any emojis as a part of the UI. Now, you might already be familiar with claude.md. Essentially what it is something very similar to cursor rules where this is going to be effectively a part of the system prompt. So further instructions for the AI model to actually follow. And within here we can see that it specifies no emojis and it did even go a step further and actually remove all of the emojis that we had just generated. Now in terms of another trick in terms of how you can leverage this within your cloud.md or cursor rules is you specify to reference that particular file where the style guide that you're building. And additionally, what you can do within this is as you start to build out your application, you can see, okay, maybe I need a little bit of a lighter font for these particular things. And you can go and update that single source of truth on that style guide. And you can reference it when you go and update or generate different elements in your website or web app or whatever you're building. But otherwise, that's pretty much it. I just wanted to show you a really quick one in terms of how you can start to augment the style of your application as well as start to think on how you can have a more consistent looking application. And instead of just relying on the LLM and the application to generate what your UI looks like, this can give you a little bit more of a basis in terms of the style that you're going for, as well as have something that's more consistent on brand and hopefully more unique and differentiated than what you typically get from an AI generated application. But otherwise, that's it for this video. Hopefully, you found this video useful. If you did, please comment, share, and subscribe. Otherwise, until the next