[Guide] Stop making ugly sites: Stupid easy screenshot method

[DeathGrips]

hey guys,

Ok this might be obvious but it wasn't to me

so I'm making a lot of web apps/mobile apps using Cursor and Claude Code but whatever I prompt they tend to all end up looking like variants of the same badly designed UI.

very simple trick. Instead of only telling them what to do, show them screenshots for inspiration

And then tell them how to modify what they see. LLMs are pretty good at "seeing"

But how to find good sources for that?

2 ways:
1. [more work] you could look for websites/apps that you like and screenshot them and use as inspiration
2. [easier] well there is one site I like (free): https://dribbble.com/search/web-ui - search for whatever you need and you will probably find it. It works better if you find one that has 2 or 3 screenshots of the same design. 1 screenshot is fine, but doesn't work as well. you can also ask to copy some elements from 1 design, and other elements from another. SOTA llms are clever AF.

I just did this today with a new web app that I was making for a client:



after I will manually work on it to polish it and get rid of the "AI vibes"

money is money.

 

[mrfaraz]

hey guys,

Ok this might be obvious but it wasn't to me

so I'm making a lot of web apps/mobile apps using Cursor and Claude Code but whatever I prompt they tend to all end up looking like variants of the same badly designed UI.

very simple trick. Instead of only telling them what to do, show them screenshots for inspiration

And then tell them how to modify what they see. LLMs are pretty good at "seeing"

But how to find good sources for that?

2 ways:
1. [more work] you could look for websites/apps that you like and screenshot them and use as inspiration
2. [easier] well there is one site I like (free): https://dribbble.com/search/web-ui - search for whatever you need and you will probably find it. It works better if you find one that has 2 or 3 screenshots of the same design. 1 screenshot is fine, but doesn't work as well. you can also ask to copy some elements from 1 design, and other elements from another. SOTA llms are clever AF.

I just did this today with a new web app that I was making for a client:

View attachment 506668

after I will manually work on it to polish it and get rid of the "AI vibes"

money is money.

Good Share ,
I also use screenshots reference with Lovable to create initial prototype of my website .

 

[DeathGrips]

Good Share ,
I also use screenshots reference with Lovable to create initial prototype of my website .

thanks haven't heard of that one

 

[dvc]

Cursor and claude ai changed the way Ibsee business and life. Members on the forum should get into that asap. Life is changing, time is running.

 

[DeathGrips]

Cursor and claude ai changed the way Ibsee business and life. Members on the forum should get into that asap. Life is changing, time is running.

absolutely. it's a complete game changer!

 

[Arvos]

Interesting approach! I’ve always struggled with design and my sites usually end up looking pretty clunky, so I’m definitely giving this screenshot method a shot. Thanks for the guide, hopefully it'll save me some time.

 

[Nikolaos]

hey guys,

Ok this might be obvious but it wasn't to me

so I'm making a lot of web apps/mobile apps using Cursor and Claude Code but whatever I prompt they tend to all end up looking like variants of the same badly designed UI.

very simple trick. Instead of only telling them what to do, show them screenshots for inspiration

And then tell them how to modify what they see. LLMs are pretty good at "seeing"

But how to find good sources for that?

2 ways:
1. [more work] you could look for websites/apps that you like and screenshot them and use as inspiration
2. [easier] well there is one site I like (free): https://dribbble.com/search/web-ui - search for whatever you need and you will probably find it. It works better if you find one that has 2 or 3 screenshots of the same design. 1 screenshot is fine, but doesn't work as well. you can also ask to copy some elements from 1 design, and other elements from another. SOTA llms are clever AF.

I just did this today with a new web app that I was making for a client:

View attachment 506668

after I will manually work on it to polish it and get rid of the "AI vibes"

money is money.

Man this is totally devious and clever! I haven't thought about it, I'm going to try it out on some other websites I'm working on!

 

[brsoftsolution]

This is such a game changer because giving claude visual context totally kills those generic AI-generated aesthetics. Honestly, just mixing and matching elements from dribbble is the easiest way to make your builds look professional without needing a full-time designer

 

[larsdevries]

I’ve noticed combining multiple references tends to create more original looking results than copying a single layout style

 

[divisor]

Solid trick, and worth pointing out the natural next step — screenshots seed direction but they don't lock the AI into consistency, so by page three you start seeing visual drift between components.

What fixes that is forcing the model to work from a defined system: pick a fixed set of patterns (cards, buttons, navigation, forms) and a fixed set of tokens (colors as specific hex, a spacing scale, a type scale). Write it as a short instructions file in the project root and tell the AI to check it before generating any new component, reusing what exists instead of inventing variations. Cursor and similar tools read project files automatically and self-enforce once the rules are written down.

Screenshots give it taste. The instructions file gives it discipline.

 

[LuciferLeads]

lol yeah i do this too, showing a screenshot first makes a HUGE difference. lms just copy-paste prompts otherwise and u end up with that cookie-cutter ui. dribbble is gold for inspo, i usually mix 2–3 designs like you said and tweak colors/fonts after.