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