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.

>> [snorts]

>> 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.

[snorts] 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