Build a website without Figma. Just AI prompts. (ChatGPT + Midjourney + 21st.dev + Cursor)

Welcome back to design AI stack where I share practical AI workflows for designers. And today I'm going to

designers. And today I'm going to challenge myself. I'm going to build a

challenge myself. I'm going to build a website without designing it. So without

opening Figma, I'm going in there um with cursor. I'm going to prompt all the

with cursor. I'm going to prompt all the UI that I need and let's see what we end up with. Um, and my AI stack today will

up with. Um, and my AI stack today will be chat GPT for planning and creating content. I'm going to try MidJourney

content. I'm going to try MidJourney today to generate some nice images. Um,

and then 21st Dev because they have really cool UI components. Let's see if we can string it together and make it somewhat unique. Um, and I'm going to

somewhat unique. Um, and I'm going to tie everything together with cursor.

Okay. So, let's start all over again.

Going to make a new I'm going to ask chat GPT.

Let's go.

Okay, cool. Uh, everything seems to be done.

So now the next step is to create a Let me bring this in.

I'm building a new website for featurestack.dev. It's a tiny SDK you

featurestack.dev. It's a tiny SDK you can install to track your analytics, collect user feedback and customer support all in one tool. I want you to

create a content. Uh the audience is for indie devs, uh vibe coders or even designers who want to build. So, um I'm

building a landing page right now and it has to be compelling. Use a tone of voice that is familiar with my audience.

I just love talking to it instead of typing. So,

so here's a lending copies generated.

Fidget.dev.

Everything looks pretty good.

Let's go to the agent mode. Let's see

what it's doing. All right, it's done.

So, let me just see the summary. SEO

metadata, landing page sections, hero, value prop, features, why exist, who is it for, key benefits, setup, simplicity, and the CTA section down below.

So, let's keep all and let's switch back to let's switch back to the website and let me refresh. And that's it. Huh. It

looks like it has built out the whole layout and the whole content. One tiny

SDK, infinite signal, zero overhead.

That's pretty cool. And it has all the different sections as well.

All right.

So, we're off to a good start. Um,

within couple of minutes, maybe under 10 minutes, we already have a landing page with a pretty good copy. So, now let's

try to focus on the hero section first.

We're going to add a pretty good image that we can generate from uh midjourney.

Let's go to midjourney.com so that we can generate the image.

Okay. So, it's going it's generating me a few options. Tech forest fusion ocean flow data streams lightning as information flow. Okay. There's a few of

information flow. Okay. There's a few of them.

All right. So, let's try some of these.

Let's copy.

Go to create. As you've seen, I've done uh a couple of these already. And just

paste it here. Just make sure you have the latest. So, I want landscape version

the latest. So, I want landscape version seven is the latest. And let's see.

Okay. Let's see which one we should go for. I think I like the

for. I think I like the this one. Huh?

this one. Huh?

So, let's try this. Uh, let's do upscale subtle.

Take the upscale version of it. Let me

download image.

All right, it's downloaded.

says optimize 480. There we go. Go back

to the landing page and say add the new background image.

BG image optimize to the hero section.

Nope, it's not visible.

Uh, let's get in there and try to fix this absolute d.

The section probably has something that is hindering it. BG

background.

There we go. Okay. So, the BG background is the one that is covering the image. So, we have it here.

I think there's a backdrop blur overlay for text readability. There we go. So, I

think let's remove this.

B you white and black and backdrop blur.

Ah, that's not so bad. I think it's start it added its own CSS. That's why

it's a little bit blurry and that's not what we want. Add

to chat.

BG white 60 is too harsh. I want a gradient

top to bottom.

Uh bottom would be opacity zero and top would be let's say

60%.

The gradient is from white 60 to transparent. So I'm going to make it

transparent. So I'm going to make it like white 90.

Okay. Can I do white 100? Yeah, I can.

Okay perfect.

And you can see here how it scales nicely even on uh mobile. And it goes up

here. So the next thing I want to do is

here. So the next thing I want to do is changing the font favorite from sales here.

That's pretty cool.

Let's copy um this in and let's see how it goes.

Yeah, this is pretty cool. Let's just

copy the URL here and say uh what does it pair with? Let's see.

I'm using Google phone frances as the heading. What is a good pairing font for

heading. What is a good pairing font for it?

All right. So, it's asking to use inter as your body. Okay, I can do that.

Okay, so we have enter. I'm going to say install and use Frances as the heading font

and enter as and enter as the body.

So it was actually using Gist which is Shhat Cen's font. It's going to be replaced by Francis. Enter here.

Perfect. Now, let's get the navbar in.

So, let's go to 21st dev.

And let's choose a navigation menu.

Let's see what they have here.

That's pretty cool.

Ooh, I like that. Okay,

Mr. the Shabban hider. Good job, man.

Let's open the component and copy prompt.

Okay it debugged and fixed the issue that happened. And there we

go. You can see the

go. You can see the navbar installed pretty cleanly at the top. Wow, I'm pretty happy where this is

top. Wow, I'm pretty happy where this is going and where this is heading. That's

pretty cool. And login.

All right. So, there's some uh issue with my mode here. I can't switch. So, let's fix

mode here. I can't switch. So, let's fix that theme toggle. It's called

theme toggle. It's called All right.

Now, it works.

We can fix that. Not an issue, but at least it's in there. which is what we want.

Um, I think I would want to have it sticky.

Make the nav bar sticky.

All right, there we go. It even has a layer blur or background blur to it. So,

that's a pretty nice effect.

All right, so this looks pretty cool.

Let's add a footer right now.

Let's go back to 21st dev. Uh,

yeah, I think this is the most basic you can get. So let me open the component.

can get. So let me open the component.

Let's copy that.

All right, it's fixing. Let's go down.

Oh, very nice. Very cool. So now we have a photo section as well. It also uses our fonts which is great.

We do not want that logo to be there. So

I think I can replace it.

Perfect.

All right. It did that change. It's

using the same SVG as the navbar.

It's still doing its thing. I'm not sure what it's doing. Ah, it's done. Perfect.

Let's keep all. Okay, we have the hero image done. Uh the nav bar which is

image done. Uh the nav bar which is sticky when you scroll and we added the footer as well. Going to do now is try

to find a nice color, a brand color for features tag. Maybe it's not black.

features tag. Maybe it's not black.

Removing text foreground. Aha, that's

the one that keeps changing. Okay. So,

there we have it. We have a passable landing page that we just did under an hour. So,

this is starting to look pretty good.

Keep all uh pretty happy with this. We

can commit and deploy. Deploy it. Nope. Uh, one

and deploy. Deploy it. Nope. Uh, one

last thing I the clouds I think. Let's see. 92% 100%.

Wow. Look at that. That's crazy.

Look at this one. Oh, this is too fast.

It's too fast. Too fast. Oh my god, this is amazing.

Make the background image the fallback image and uh

replace it with uh BG video MP4 if we can make it work. Oh, wow. Look at

that.

There we go.

I do miss the half te effect that we have. So I don't know if we can say

have. So I don't know if we can say um add a half tone

effect layer on top of the video.

Let's see. It might work, it might not.

Oh wow, it did add an half tone layer.

That's pretty cool.

I think it's added black. So, let me keep this and change this to white.

All right. So, there you have it. We

have a cool landing page that plays the background video and a navbar

with some content created from charge and a footer.

That's it.