Skip to content
  • Reels cover: 8 sites that turn Claude into a design genius. Below it, the domain names of the 8 sites.

Visuals in Turkish · the full text is on this page

Tools · Web

8 design inspiration sites that make Claude better at web design, with ready-made prompts

If the site Claude builds for you comes out ordinary, you're not showing it what it should look like. Show it an example and let it adapt it to your brand.

Short answer

Telling Claude "make me a nice website" gives you an average result, because it doesn't know what it should look like. motionsites.ai, navbar.gallery, footer.design, cta.gallery, 404s.design, unsection.com, bentogrids.com and 60fps.design are galleries of examples collected from real websites: you take a screenshot of the section you like and give it to Claude, and it rewrites the layout for your brand. All but one can be browsed for free; most of motionsites' prompts are paid. You don't copy one-to-one; you borrow the pattern (layout, spacing, order). DijiKoçum's PDF gives a ready-made prompt for each of the 8 sites, plus menu, section order, button copy and 404 ideas for 12 industries.

5 steps · 2 min read · · Turan Yasin Salcı

Step by step · 5 steps

0/5 checked · saved in this browser only

  1. Find an example.

    Pick an example close to your business; use the filters (industry, style, light/dark).

  2. Take a screenshot of just that section.

    Win + Shift + S on Windows, Cmd + Shift + 4 on Mac. One section, not the full page.

  3. Describe your brand to Claude once.

    Open a new chat on claude.ai, attach the image and send this message first:

    My business: [business name], [industry], [city].
My colors: [main color code], [second color code]. My font: [font or 'suggest one'].
My site runs on [WordPress / Wix / Framer / plain HTML].
The screenshots I send from now on are examples from other sites.
Don't copy them one-to-one: borrow the layout, spacing and hierarchy;
write the copy, colors and visuals for my brand.
Code: a single HTML file + Tailwind (CDN), and it should look right on a phone.
Copy in English, short and natural. Don't make up information you don't know; leave a [blank].

  4. Paste that site's prompt.

    Fill in the square brackets with your own details. Example for a menu (navbar.gallery):

    The attached image is an example of a top menu (navbar).
Write the same layout for my site: logo on the left, menu in the center, a single button on the right.
My menu items: [Home, Services, Pricing, About, Contact].
Button text: [Book an appointment].
On desktop it should be horizontal; on phones it should turn into a hamburger menu.
When the page scrolls down, the menu should stay fixed at the top.
Give me a single HTML file + Tailwind.

  5. Fix it with one sentence, then publish.

    Have the part you don't like fixed with a single sentence ("Double the spacing between sections"). Add the code to your site, and before publishing, open it on your phone and tap the menu and buttons.

How to measure it

Compare the number of clicks on the button in that section (in GA4 or your site builder's stats) for one week before and one week after you publish the new section. Change only one section at a time so you know where the difference comes from.

Free · PDF

Download the Full versions of the 8 prompts and website sections by industry (PDF).

A printable checklist version of the steps on this page. The PDF is in Turkish; no sign-up needed.

Download the checklist (PDF in Turkish)

Sources

  • D
    DijiKoçum guide to Claude design sites (8 sites, 8 prompts, 12 industries)Our own data · checked: October 10, 2026

[A] primary source · [B] industry research · [C] practitioner · [D] our own data

Frequently asked questions

Do these sites connect to Claude?

No. They're galleries of examples collected from real websites. You take the screenshot and give it to Claude; Claude can read images.

Are they all free?

All but one can be browsed for free. Browsing motionsites.ai is open, but most of its prompts require a paid membership; all of 60fps.design's filters are in its PRO membership (October 10, 2026).

Is it a problem to copy another site's design?

Don't take the logo, photos or copy; borrow only the pattern. That's why you tell Claude "don't copy one-to-one."

Next step

Let’s look at your site together.

Free Digital Checkup: a health score for your website, your ads and your visibility in AI search, plus what to fix first. 3 minutes.

Free Digital Checkup Our Web service

More guides