Stop Making Ugly Websites with Claude Code + Stitch 2.0

If you've been building websites with

Claude Code lately, you've probably

noticed something. A lot of them look

the same. Same hero section, same

gradients, same floating cards, same

generic modern startup vibe. You can

almost tell instantly that AI made it.

And the thing is, most people blame

Claude Code for that.

But here's what's actually happening.

Most people just ask Claude Code to also

be their designer. And those are two

different jobs. So in this video, I want

to show you the workflow that fixes

that. Because if I wanted to build a

beautiful website today, I would not

start inside Claude Code. I'd start with

Stitch 2.0 from Google. Then I'd use

Claude [music] Code to turn that design

into a real product with polish,

animation, auth, payments, and

deployments. That combination is the

secret sauce. Stitch handles the design

direction. Claude handles the execution.

And when you use both properly, your

website stops looking like AI slop and

starts looking intentional. So, let's

get into it. But if you open Claude and

say,

"Build me a beautiful landing page." It

usually gives you something that works,

but feels generic.

That's because Claude is strongest when

it has direction. It needs something

good to build from. Enter Stitch. Step

one is simple. Don't start from a blank

prompt. Start with inspiration. Most

people skip this.

They open an AI tool and type, "Build me

a modern website for my startup." And

then they're surprised when it looks

like everyone else's AI website. You

need references, real references. So

before I even open Stitch, I go looking

for websites I actually like.

I use places like Dribbble, Pinterest,

or just live websites I think look

great.

And I'm not looking for one perfect

website. I'm looking for pieces. Maybe

one site has a hero section I love.

Maybe another has amazing typography.

Maybe another has a really strong dark

theme or a cool interactive element.

That's what you want to collect. Because

once you do that, you're not asking AI

to invent taste from nothing.

You're giving it something strong to

work from. Then I take a few screenshots

or grab a website URL and bring that

into Stitch. Inside Stitch, I can choose

web, upload my screenshots, and give it

a simple prompt. One thing to note here,

your prompt does not need to sound

robotic or super technical. You can just

talk normally.

Something like,

"Create a premium landing page for my AI

agency using these references as

inspiration. [music]

I like the typography from this one, the

hero layout from this one, and I want

the overall site to feel polished,

modern, and a little interactive.

Add a headline, CTA, social proof,

features, testimonials, and a sign-up

section."

>> [music]

>> That's enough to get started. What I

like about Stitch is that it feels much

more visual than trying to do design

inside a coding tool.

You can see the canvas, generate

variations, remix sections, and react to

what you're looking at. That matters

because good design usually doesn't

happen on the first try. It happens

through iteration.

Maybe version one has the best layout.

Maybe version two has the best font.

Version three has the strongest color

palette. So you combine them. You can

literally tell Stitch,

"Use the typography from version two,

the layout from version one, and the

visual style from version three." That's

when the results get better. Now Stitch

doesn't just generate a page, it starts

defining the rules behind the page. Your

colors, your typography, your button

styles, your spacing, your corner

radius, your cards, your overall visual

language. So once Stitch gives me

something decent, I slow down and refine

the design system. If the font feels

generic, I change it. And fonts matter

way more than people think. A stronger

heading font alone can make the site

feel 10 times more premium.

Another trick I love here is editing

with screenshots. If a section is close,

but not quite right, I just take a

screenshot of that section and tell

Stitch what to change. "Make this grid

denser. Add more visual weight here.

Turn this into something more

interactive." That feels much more

natural than trying to describe

everything from scratch. Now once the

design looks about 80 to 90% right, I

bring it into Claude Code. Stitch gives

you the visual direction, Claude turns

it into a real product. So I export the

code or project files from Stitch, open

them in my IDE, and before I generate

anything else, I give Claude proper

instructions.

I always like having a Claude.md file in

the project with something like,

>> [music]

>> "You are a senior UI designer and

front-end developer. Preserve the

imported design

language, prioritize clean interactions,

and reusable components. Avoid generic

layouts, use Tailwind CSS and Shadcn/ui

where appropriate. That one file changes

how Claude works because now it has

standards. It knows this isn't just

about getting something working, it's

about making it feel polished." Then

I'll prompt it with something like,

"I've created this design in Stitch.

Turn it into a polished,

production-ready site.

Keep the design system intact, use

Tailwind and Shadcn/ui,

and run it locally." Now Claude isn't

guessing what looks good. It already has

a strong foundation to build from.

From there, I focus on polish.

The first thing I usually improve is the

background. A good background adds depth

and character.

Even subtle gradients, glows, or texture

can make a page feel more complete. Then

I add motion. Not crazy animations

everywhere, just subtle stuff. Hover

effects, smooth section reveals, cards

lifting slightly, buttons feeling

responsive.

That alone makes a site feel much more

premium. Then I usually revisit

typography one more time because yes, it

matters that much.

And once the front-end feels strong,

Claude takes over on the product side.

I'll add auth with Superbase,

payments with Stripe, email flows with

something like Resend, and then deploy

everything with GitHub and Vercel. So

now it's not just a pretty landing page,

it's a real working product. Users can

sign up, log in, pay, and use the app.

Now if you're building on WordPress

instead, the same principles apply.

You'd still want the design first, then

build and finally convert.

But you'd also want to think about what

happens after you ship your design.

Because a beautiful site that gets

hacked isn't really that beautiful. For

WordPress, that means adding a secure

plugin like MalCare. It handles your

defense layer so your site stays

protected after it goes live. You focus

on building something people want to

use, MalCare make sure it stays safe

while they do.

Now you can convert your Claude design

into a WordPress theme file and install

it. And that's it. Stop asking Claude

Code to be your designer. Use Stitch to

create the design direction first, then

use Claude to build, refine, integrate,

and ship.

That's how you stop getting generic AI

websites. That's how you build something

that actually feels custom.

That's the workflow. Try it once and