Claude Code Can Finally Make Beautiful Websites

Rick Rubin recently said that tools will come and tools will go. Only the vibe coder remains. Except that this is 98.7% of all vibe coders. Being a vibe coder, you could just start prompting your AI models, telling it to make you beautiful websites, but you're going to get a site like this just because your AI princess thinks gradients are cool. Now, to actually get good UI, you don't only need to pray to the prompt gods. You actually need to know your stuff. So, in this video, we'll be talking about three ways that will actually make your websites look better. and you're going to need them because this video only becomes obsolete when AGI finally arrives. Sam Alman says that's two years away, but he's been saying that for the past 3 years. >> YOU CAN'T KEEP GETTING AWAY WITH IT. To show you the principles, we're going to start with a website page which I can transform to show you how the principles affect it. I'm not going to make a new one and instead just screenshot an existing design because I don't have enough context engineering points to set it up. We have our Airbnb page cloned and we're going to start implementing the design principles on it. Now, in this video, I'll tell you the names of the principles, show you how they work, and at the end, you'll get implementation prompts by yours truly. The first principle we'll talk about is shadows. The UI looks really flat right now, and to make it look better, we need to add shadows to create depth and help differentiate between elements. And just like my own marriage, this implementation is divided into two parts. The first part is color layering for depth. This means creating three to four shades of your base color, in this case, plain white, and layering them across different parts of the UI to create a sense of elevation. The darker shades should be in the background while the lighter ones should appear in the front, eliminating the need for borders in the UI. This is the result after the implementation. The prompt also included some instructions for adding subtle shadows. Even up here, you can see that the individual circles have different shades of white, which helps differentiate between elements. This might look a bit off to you right now, but that's a structure issue which we'll fix later in the video. Overall, if you look at the individual components, you can clearly see how we've differentiated everything through color. The second part is implementing a two-layer shadow and gradient system. This approach gives your UI a sense of realism through dual shadows because this is all your AI rapper needs for that investor money. You could, of course, just apply a simple shadow like the one already here, but that's not enough. You can combine light and dark shadows to really add that realism. You can also apply three depth levels, which helps simulate natural lighting. Another addition to this is layering your elements with gradients, and this works especially well on dark mode components. The biggest change you'll notice with this implementation is on these elements right here. Because this is in light mode, it's a bit harder to notice, but the shadow on top is slightly lighter than the one below. And there's a subtle gradient here as well. The card components don't have the gradient as they aren't a single flat piece and have that gray card in the middle, but the gradient effect has been applied here, too. The small navigation buttons also have it. And it's these subtle little changes that make your UI look so much better. Here's a comparison of the two. And you can clearly feel that the UI feels much more elevated and the elements are clearly visible. Now, since I mentioned we'd be fixing this issue here, this leads us to the second principle, which is responsiveness. This principle is also divided into two different parts. As you saw earlier on the site, some elements were divided into multiple sections when they shouldn't have been, and the cards were overflowing here as well. Now, the first part is based on the idea that everything in your layout is a system of boxes flexible enough to respond to changes where each box has a parent child relationship, something this Nemo clearly never had. After applying our first prompt, it fixes the search bar by correcting the divisions between its elements and separates the search icon. It also implements carousel functionality, making the entire page flexible and adaptable to any dimension or screen size. Now, this brings us to the second part, which says that responsiveness isn't about shrinking your UI. It's about rearranging it based on priorities. After the prompt for this part was implemented, you'll see that in the mobile view, the search bar prioritizes the most important options and instead of the cards getting squished, the carousel maintains their proper shape and layout. The third principle of building good UIs is the proper implementation of color throughout your site. Colors come in grouped sets called color palettes. to get good color palettes. There's an amazing site called Colors where you can browse through various palettes or even generate random ones to choose from. I actually found a great article on this and I'll link it in the description below if you want to read it in depth along with its original resources. There are four main types of colors in your palette. The primary color is not the color you see most often, but the one that stands out the most. It's used for call to action elements, buttons, or areas meant to draw attention. You can see an example here. While the overall UI is mostly white, the key elements use red as the primary color. The secondary color complements the primary one. These colors are used for subtle action elements, parts of the UI that need attention but shouldn't overpower the main elements. For instance, if you're highlighting a new feature, you might use a different color like turquoise. Then comes your neutral color, which makes up most of the UI, typically black, white, and gray. This shows that even when you have a full color palette, your entire UI doesn't need to be filled with color. Finally, there's semantic color usage. These colors emphasize specific meanings or states like green for success, yellow for warnings, blue for information, and red for errors or destructive actions. You can take this site as a good example. The neutral colors make up most of the interface. Then to represent semantic states, you see yellow for warnings and then red as the primary color in the sidebar and turquoise and blue to draw attention to certain elements like notifications or success indicators or mentions. All three of these principles are meant to help you understand how to implement proper design techniques and become the true 10x designer you were destined to be. Just use the prompts in the resources and you'll be good to go.