“DESIGN” 8 Free Websites That Make Claude a Design Genius

Why Your AI Websites Look Like AI Websites

Type “build me a modern landing page” into Claude and you get the average of every website on the internet. Purple gradient. Three cards in a row. A footer nobody looked at twice. You've seen that site a thousand times, and so have your customers.

Here's what most people miss. Claude can see. Drop in a screenshot and it reads the layout, the spacing, the type sizes, all of it. Professional designers don't start from a blank page either. They collect references and work from them. You're about to do the same thing, except Claude does the building.

Credit where it's due: this list comes from a post by Viktor Oddy (@viktoroddy) on X. He shared the 8 links. I went through every one, checked what's really free, and wrote the workflow and prompts so a total beginner can use them today.

Find It. Screenshot It. Drop It In.

Seven of these eight sites work the exact same way:

1. Find a design you like on the gallery.
2. Screenshot just that part. Mac: Cmd + Shift + 4, then drag a box. Windows: Windows key + Shift + S.
3. Drop the image into Claude. In the Claude app, drag it into the chat. In Claude Code, drag the image file into the terminal, or copy the screenshot and paste it with Ctrl + V.
4. Paste the prompt from this guide with your details filled in.

The one exception is motionsites.ai, where you skip the screenshot because they hand you the prompt.

One rule: copy the pattern, not the brand. Layout, spacing and structure are fair game. Every designer alive works from references. Their logo, their words and their photos are theirs. Every prompt below tells Claude this, so leave that line in.

This works in the Claude app, in Claude Code, and in any other AI builder that takes images (Cursor, Lovable, Bolt, Codex). I use Claude Code because it builds the real files on your computer.

Do this once before you start

Paste this first. It keeps every section on the same colors and fonts, so your page doesn't end up looking like eight different websites stitched together.

Before we build anything, save this as my brand brief and use it for every section I ask for.

Business name: [YOUR BUSINESS]
What we sell: [ONE SENTENCE]
Who it's for: [YOUR CUSTOMER]
Brand colors: [HEX CODES, or "pick a palette that fits and show me first"]
Fonts: [FONT NAMES, or "pick a pairing that fits and show me first"]
Vibe: [3 WORDS, like "clean, premium, friendly"]
Main button text: [LIKE "Book a free call"]

Rules for this whole project:
1. When I attach a screenshot, copy the layout pattern, spacing and structure. Never copy their logo, their words or their images.
2. Every section has to look right on a phone.
3. Every section uses the same colors, fonts and button style so the page feels like one site.

motionsites.ai

Copy-and-paste prompts for animated and 3D websites

Real screenshot of motionsites.ai. Click for the full-length capture.

What it is: A library of finished website designs where every design comes with the full prompt that built it. Animated heroes, 3D scenes, full landing pages, single sections. You don't screenshot anything here. You copy the prompt and paste it into Claude.

When to use it: Use it first. This is where your hero section (the top of your page, the first thing people see) comes from. It's the fastest way to get a site that moves and looks custom.

How to use it with Claude

1. Go to motionsites.ai. Click Pricing (top right of the grid) and choose Free.
2. Pick a category that matches what you need: Hero, Landing Page, Sections, SaaS, Agency, Portfolio.
3. Click a design you like. Hit the copy button to grab the full prompt.
4. Paste the prompt below into Claude, then paste the motionsites prompt at the bottom where it says to.

Build this as a single landing page section. Follow the design prompt at the bottom exactly for layout, animation and style.

Then swap in my details:
Business: [YOUR BUSINESS]
What we sell: [ONE SENTENCE]
Brand colors: [HEX CODES]
Headline: [YOUR HEADLINE]
Button text: [YOUR BUTTON TEXT]

Keep every animation and the overall look. Only change the words, the colors and the images. Make sure it works on a phone.

DESIGN PROMPT:
[PASTE THE MOTIONSITES PROMPT HERE]

Tip: The prompts are written for any AI builder (Lovable, Bolt, Cursor, Claude). They work in Claude Code as is.

navbar.gallery

Navbar inspiration gallery

Real screenshot of navbar.gallery. Click for the full-length capture.

What it is: A gallery of nothing but navbars. The navbar is the menu strip at the top of a site with your logo, your links and your main button. Built by Christina Liubynska. You can browse by type: sticky, dropdown, mega menu, sidebar, announcement bar, full screen and more.

When to use it: Right after your hero is done. The navbar sits on top of everything, so a cheap one makes the whole page look cheap.

How to use it with Claude

1. Pick a type. If you have 4 or 5 links, look at Static / Sticky. If you have a lot of pages, look at Dropdown or Mega Menu.
2. Find one you like and screenshot just the navbar.
3. Drop the screenshot into Claude with the prompt below.

I attached a screenshot of a navbar I like. Rebuild this navbar pattern for my site.

Match the layout, the spacing, and how the logo, links and button are arranged.
Use my brand colors: [HEX CODES]
My logo text: [YOUR BUSINESS]
My links: [HOME, SERVICES, PRICING, CONTACT]
My button says: [BOOK A CALL]

Make it stick to the top when I scroll. On a phone, collapse the links into a menu button that opens and closes smoothly. Do not copy their logo, their words or their images.

footer.design

Footer design gallery

Real screenshot of footer.design. Click for the full-length capture.

What it is: A curated gallery of website footers, made by the studio NOOON. The footer is the block at the very bottom of the page: links, contact info, socials, legal stuff. You can sort by style, like Typographic, Large Type, Grid, Cards, Animated, Dark, Bright and Bold.

When to use it: At the end of the build. Most AI-built sites end with a sad grey strip and a copyright line. A strong footer is one of the cheapest ways to look like you paid a designer.

How to use it with Claude

1. Filter by a style that matches your page. Big bold hero? Try Large Type. Clean and minimal? Try Small Type or Grid.
2. Screenshot the whole footer.
3. Drop it into Claude with the prompt below.

I attached a screenshot of a footer I like. Rebuild this footer pattern for my site.

Match the layout, the column structure and the type sizes.
Use my brand colors and fonts from the rest of the page.
Business name: [YOUR BUSINESS]
Link columns: [COMPANY: About, Contact] [RESOURCES: Blog, Free Guides] [LEGAL: Privacy, Terms]
Socials: [INSTAGRAM, YOUTUBE, X]
Contact email: [EMAIL]

Stack the columns cleanly on a phone. Do not copy their logo, their words or their images.

cta.gallery

Call-to-action inspiration

Real screenshot of cta.gallery. Click for the full-length capture.

What it is: A gallery of calls to action. A CTA is the part of the page that asks for the sale, the signup or the booking. This site collects the good ones and lets you filter by type (Button, Form, Newsletter, Modal / Pop-up, Pricing / Subscription, Download, Call-to-Buy), by industry, and by light or dark mode.

When to use it: Any time you need someone to do something. This is the section that makes you money, so don't let Claude wing it. Most pages need one CTA near the top and a big one near the bottom.

How to use it with Claude

1. Filter by the type you need. Collecting emails? Newsletter or Form. Selling? Call-to-Buy or Pricing / Subscription.
2. Screenshot the CTA block you like.
3. Drop it into Claude with the prompt below.

I attached a screenshot of a call-to-action section I like. Rebuild this CTA pattern for my site.

Match the layout, the size of the headline and how the button stands out.
Use my brand colors and fonts from the rest of the page.
Headline: [WHAT THEY GET]
One supporting line: [WHY NOW, OR WHAT HAPPENS NEXT]
Button text: [YOUR BUTTON TEXT]
Button links to: [URL]

The button has to be the most obvious thing in the section. Add a hover effect to it. Make it look right on a phone. Do not copy their words or their images.

404s.design

Creative 404 error pages

Real screenshot of 404s.design. Click for the full-length capture.

What it is: A curated gallery of 404 pages, built by Finnian Sturdy. A 404 page is what people see when they hit a link on your site that doesn't exist. The filters are great: by style (3D, Brutalist, Hand-drawn, Minimal, Playful, Retro), by interaction (Animated, Game, Hover Effects, Scroll-driven) and by industry.

When to use it: Last. It's the page nobody thinks about, which is exactly why it makes you look like a pro. It's also a low-risk place to have fun, because it can't break your sales page.

How to use it with Claude

1. Filter by a style that fits your brand. Pick something with personality.
2. Screenshot the page. If it's animated or a game, write one sentence describing what it does.
3. Drop it into Claude with the prompt below.

I attached a screenshot of a 404 page I like. Build a 404 page for my site using the same idea and layout.

Use my brand colors and fonts from the rest of the site.
What the original does that I like: [ONE SENTENCE, like "the big 404 numbers follow the mouse"]
Headline: [SOMETHING SHORT AND HUMAN, like "Well, this is awkward."]
Button: "Back to home" linking to /

Keep it light and fast. Set it up as the real 404 page for this project so it shows up on any broken link. Do not copy their words or their images.

unsection.com

Section-first design inspiration

Real screenshot of unsection.com. Click for the full-length capture.

What it is: A big library of website sections pulled from real sites and sorted by what they are: Hero, Testimonials, Feature, CTA, Footer, Blog, Navbar, Pricing, Logo, FAQs, Team, Contact, Portfolio. You can also filter by style and type. Think of it as the catch-all for everything the other galleries don't cover.

When to use it: For the middle of your page. Testimonials, pricing tables, FAQs, logo strips, team sections. This is where AI-built pages usually fall apart into the same three boring cards.

How to use it with Claude

1. Click the category you need in the left menu (say, Pricing or FAQs).
2. Open a section you like and screenshot it.
3. Drop it into Claude with the prompt below. Reuse the same prompt for every middle section.

I attached a screenshot of a [TESTIMONIALS / PRICING / FAQ / FEATURES] section I like. Rebuild this section pattern for my site.

Match the layout, the spacing and the structure.
Use my brand colors and fonts from the rest of the page.
Here is my real content to put in it:
[PASTE YOUR TESTIMONIALS, PLANS, QUESTIONS OR FEATURES]

If I gave you less content than the screenshot has slots for, shrink the layout to fit. Do not invent testimonials, numbers or customer names. Make it look right on a phone. Do not copy their words or their images.

Tip: That "do not invent" line matters. Left alone, AI will happily make up five-star reviews from people who don't exist. Don't let it.

bentogrids.com

Bento grid layout inspiration

Real screenshot of bentogrids.com. Click for the full-length capture.

What it is: A gallery of bento grids. A bento grid is that layout you've seen on Apple's site: a block of different-sized rounded boxes that fit together like a Japanese lunch box, each box showing one feature. The gallery pulls examples from real companies and lets you filter by Web Design, Graphic Design or Animation, and by dark or light.

When to use it: For your features section. If Claude gives you three identical cards in a row (it will), replace them with a bento grid. It's the fastest single upgrade on this list.

How to use it with Claude

1. Filter to Web Design, then pick dark or light to match your page.
2. Find a grid with roughly the same number of boxes as you have features. Screenshot it.
3. Drop it into Claude with the prompt below.

I attached a screenshot of a bento grid I like. Rebuild this bento grid layout as the features section of my site.

Match the grid: which boxes are big, which are small, the rounded corners and the gaps.
Use my brand colors and fonts from the rest of the page.
My features, most important first:
1. [FEATURE] : [ONE LINE ABOUT IT]
2. [FEATURE] : [ONE LINE ABOUT IT]
3. [FEATURE] : [ONE LINE ABOUT IT]
4. [FEATURE] : [ONE LINE ABOUT IT]
5. [FEATURE] : [ONE LINE ABOUT IT]

Put the most important feature in the biggest box. Give each box a simple visual (an icon, a mini chart, a small mock screen) instead of leaving it as plain text. On a phone, stack the boxes in one column. Do not copy their words or their images.

60fps.design

UI animation and micro-interaction inspiration

Real screenshot of 60fps.design. Click for the full-length capture.

What it is: A collection of 2,000+ short clips of the tiny animations inside the best apps in the world (Airbnb, X, ChatGPT and hundreds more). Buttons that squish. Cards that morph. Numbers that tick up. These details are called micro-interactions, and they're the difference between a site that feels alive and one that feels like a PDF.

When to use it: At the very end, as polish. Get the page built first, then add motion. Never the other way around.

How to use it with Claude

1. Here's the catch: these are videos, and you can't drop a video into Claude. So you steal the words. Every clip has a descriptive title and tags like Morph, Stagger, Spring Physics, Shimmer, Parallax, Reveal. That's the real vocabulary designers use, and Claude knows all of it.
2. Find a clip you like. Write down its title and tags. Screenshot the start and the end of the animation if you can.
3. Give Claude the words and the screenshots with the prompt below.

I want to add a micro-interaction to my [BUTTON / CARDS / PRICING TOGGLE / HERO HEADLINE].

The reference is a clip from 60fps.design called "[CLIP TITLE]" tagged [TAGS, like "Morph, Spring Physics"].
What happens in it: [DESCRIBE IT IN PLAIN WORDS, like "when you tap the tab, it presses down slightly, then the highlight slides over to it with a little bounce"].
I attached screenshots of the start and end states.

Build that effect on my element. Keep it fast (under half a second), keep it subtle, and turn it off for people who have reduced motion switched on. Show me the result and tell me which numbers to change if I want it faster or bouncier.

Tip: No idea how to describe an animation? Ask Claude: "Explain what stagger, morph, spring physics and parallax mean in website animation, with one example each." Two minutes and you speak the language.

Build a Full Landing Page, Section by Section

Don't ask for the whole page in one prompt. That's how you get the average-of-the-internet site again. Build one section at a time, look at it, fix it, move on. Here's the order I'd go in:

1. Give Claude your brand brief. Paste the brand brief prompt from the top of this guide. Fill in the brackets. This is what keeps eight separate sections looking like one site.
2. Hero from motionsites.ai. Filter to Free, pick a hero, paste it in with the wrapper prompt. Now you have a page with a top that moves.
3. Navbar from navbar.gallery. Screenshot, drop, prompt. Tell Claude to put it above the hero.
4. Middle sections from unsection.com. One at a time. A logo strip or proof section, then testimonials, then pricing, then FAQ. Use your real content.
5. Features from bentogrids.com. Swap the boring three-card row for a bento grid.
6. The ask from cta.gallery. One big CTA near the bottom. Add a smaller one higher up if your page is long.
7. Footer from footer.design. Close the page properly.
8. 404 page from 404s.design. Ten minutes. Makes you look like you thought of everything.
9. Polish with 60fps.design. Pick two or three micro-interactions, tops. The main button, the cards, maybe the headline. Then stop.

After each section, look at it in your browser. If something's off, screenshot your own page, drop it back into Claude and say what's wrong in plain words: “the spacing above the pricing section is too tight” or “this looks broken on my phone.” Claude sees the problem and fixes it. That loop is the whole skill.

When the page is done, run this once to tie it together:

Review the whole page top to bottom as a senior designer. Check that every section uses the same colors, fonts, button style, corner rounding and spacing. Check every section at phone width. List what's inconsistent or broken, then fix it. Do not change my words or the layouts I approved.

4 Mistakes That Will Wreck This

• Asking for the whole page at once. One section per prompt. Every time.
• Mixing five different styles. A brutalist navbar on a soft pastel hero looks like a ransom note. Pick references that feel like they belong together, and let the brand brief hold the line.
• Animating everything. Two or three micro-interactions feel premium. Twenty feel like a casino. Motion goes last and goes light.
• Letting AI write fake proof. If Claude fills your testimonials section with made-up names and numbers, delete them. Real ones or none.

That's it. People pay designers thousands for a page like this because they think taste is something you're born with. Mostly it's knowing where to look and what to copy. Now you know where to look.

All Resources

Pricing and free limits were checked on September 18, 2026. These sites change their plans, so check their pages for current numbers. I have no affiliation with any of them.