5 Ways To Build Beautiful Websites Using Claude Code

Welcome to another episode in our design series where we actually find new AI tools that can help you design better with AI. With models like Opus 4.5 and Gemini 3 Pro, single prompt designing has come a long way. However, there are still a lot of different tools and workflows that we're going to show you in this video that actually help you in creating truly stunning designs. Shad CN is a library that provides beautiful, fully customizable and accessible UI components that integrate seamlessly with your React and Next.js projects. Its new feature lets you create presets for importing into your project. Click on new project and you'll see sample components on one side of the page and the presets on the other from which you can play around and experiment until you find the component style that suits you the best. Once you've decided which style to import, click create project. Select which framework your project is in. Copy the install command and paste into your terminal. And a new project with the presets will be installed into the project right away. >> >> It's always better to have a design for your website ready before going to your coding agent so that you don't have to ask your agent over and over again to make changes that don't look like what you wanted. For this, Google Stitch is the best tool for designing because it now supports Gemini 3 Pro Thinking and Nano Banana integrated directly for enhancing designs using generated images. But before we dive into the design, deciding the color theme for your application is the most important step. For that, the best place is coolers, a color palette generator where you can experiment and see multiple colors side by side and analyze their combinations. Keep adjusting until you find the one you like and then export the color palette in the format that works best for you. After a good 4 minutes, the UI created by Stitch was very minimal with a clear balance between the main colors and the accent colors. One of the new feature updates of Google Stitch is that you can select all the screens of the design and generate a prototype for testing purposes. The prototype is basically a demo of the project's workings in action. Whether it's a web or mobile app, it automatically adjusts the navigation flows, finds clickable areas, and creates a fully working prototype for you directly from the design. Even if AI can create pretty good designs on its own, it never hurts to get inspiration from a good source. For this purpose, there are multiple galleries containing hero sections, navbars, footers, and even custom 404 pages where you will find creative and engaging sources of inspirations. You can get the links for all these resources in the description down below from which I used superhero for hero section design inspiration. Gave a screenshot of the page to Stitch to replicate the design fitting our website. There's one more important new feature. Google Stitch has improved the way you can export your designs. It allows you to export directly to AI Studio, their AI coding agent, Jules, or copy the code to the clipboard. But I'll export it as a zip file and import it into Claude. When working with sub aents via Claude, they used to waste a lot of your time while handling tasks for others which caused significant delays. Claude recently fixed this by giving sub aents the ability to run in the background. I have configured Puppeteer MCP for browser testing which lets Claude test the UI through browser access. Since browser testing takes a lot of time, you can run this task in the background and assign the agent another task in the meanwhile. This way you can have multiple agents working on different tasks simultaneously, making better use of your time. However, these agents will use tokens. So, you need to keep an eye on token usage and costs. You can run as many agents as you need side by side and assign them tasks as you want. Each agent will return their outputs once they have done implementation. We will be covering these background agents in more detail in a separate video, so stay tuned for that. Claude often struggles to fix small UI issues no matter how many times you ask. That's where a really amazing tool called Drawbridge comes in to fill this gap. We've already covered it previously on our channel. Earlier it worked only on cursor but now it has claude code integration and other great updates. They even thanked us in one of their releases and we're really grateful for this fantastic project. You can go to our channel and watch the video on how to use drawbridge, but they've improved features since our previous video that let you select sections more precisely than before, making it easier for non-technical users to convey issues. They've also fixed the screenshot problem we faced last time. Additionally, they've set up the slash command for clawed code automatically, which we previously had to do manually. Altogether, these improvements make your workflow much more efficient and impressive. After teaching millions of people how to build with AI, we started implementing these workflows ourselves. We discovered we could build better products faster than ever before. We help bring your ideas to life, whether it's apps or websites. Maybe you've watched our videos thinking, "I have a great idea, but I don't have a tech team to build it." That's exactly where we come in. Think of us as your technical co-pilot. We apply the same workflows we've taught millions directly to your project, turning concepts into real working solutions without the headaches of hiring or managing a dev team. Ready to accelerate your idea into reality? Reach out at hello@automator.dev. That brings us to the end of this video. If you'd like to support the channel and help us keep making videos like this, you can do so by using the super thanks button below. As always, thank you for watching and I'll see you in the next