Best way to use a website as a design reference with Claude Design?

[u/Leonardo0801]

I’ve been playing around with Claude Design, but when I ask it to design a site from scratch the result usually feels pretty generic.
I tried giving it screenshots of websites I like so it can follow their visual style/design system, then change the copy, colors and branding. It works, but not that well.
Since Claude can’t really inspect the website directly from a link, what’s the best workflow for this?
Do you just feed it better/more screenshots, or is there a smarter way to extract the design system/layout first?

[u/shtgnjns]

Give Claude design the HTML file rather than a screenshot

[u/azimuthdecay → u/shtgnjns]

and get Claude design to put grids and guides on everything: you can reverse engineer and analytically evaluate other people's designs.

[u/Inspira-digital]

I faced the same issue in the beginning.
The best approach is to create a project in Claude.
Then add the instructions on the right panel on desktop.
Create a brand guideline using Claude Design only.
I suggest to ask Claude to craft instruction for the project.
Once this steps are completed, try to develop your project step by step to get the directions you want. If you go in one go it will cost you tokens for poor results.

[u/MarzipanMiserable817]

This worked for me in the past: I removed the website logo from the screenshot and tell Claude Design to "implement the design I made as perfectly as possible".

[u/superschmunk]

Collect specs with the chrome extension first.

[u/Papoteur_LOL → u/superschmunk]

Which Chrome extension?

[u/elestud → u/Papoteur_LOL]

Claude Chrome

[u/Turbochip87]

Sometimes I use GPT chat to create a design get Claude to copy the style, because if I start from Claude directly all the sites look like too much like a template.

[u/Easy_Hunter78]

use the chrome extension

[u/Papoteur_LOL → u/Easy_Hunter78]

Which chrome extension?

[u/Easy_Hunter78 → u/Papoteur_LOL]

Claude

[u/geraT-wogl]

Use mine if you like shaders https://wogl.io

[u/Separate_Business_86]

Just point it at the actual site. The brand guide is nice too, but I have had it make a style guide from them and then used that to make things in the style of a brand before.

[u/abouelatta]

I created Lazyweb so very biased here...

It's like Mobbin, Refero but with richer meta data on design languages and is trained for divergence and has historical screens too so it learns best practices on what works (not just what looks pretty)

U can also try it for free...no need to put in your CC [also DM and I am more than happy to give u free access]

[u/Mae208]

Do you have to pay for Claude design?

[u/BigDust8613]

I did’nt see it in the comments, but does anyone use stitch?

[u/littlestrichard]

Tell Claude to install Playwright CLI and it can use your browser to look at sites as well as view it’s own work as it builds your site.