Hey, it's Cindy 馃尡 You commented design, so here are all five sites from the reel, in the same order, plus what to filter for on each one.
btw the waitlist for AI System Club is now open! If you're keen on using AI to automate your content, video editing, job search, business or build AI agents, feel free to sign up (only if you want to hehe). Ps. the waitlist gets first dibs:)
why these work
The real problem they solve
AI built sites come out generic because you cannot ask for a thing you cannot name. "Make it look nicer" is not a brief. "A centred hero, one line of type at about 64px, a single muted gradient behind it, no illustration" is a brief.
Each of these sites is one page section, collected hundreds of times over. You scroll until something stops you, and now you have the words.
馃挕 Pick one reference per section, not five. A page built from five different design languages still looks like a mess, even when every single piece is good.
1 路 the hero
supahero.io, for hero sections
Over 500 hero sections from real, beautifully designed sites. The hero is the one section that decides whether anybody scrolls, so it is worth spending the most time here.
Go to supahero.io and just scroll. Do not filter yet. You are looking for the one that makes you stop.
When one stops you, write down why in three words. Big type. Lots of space. One colour. That note is what you hand to Claude, not the screenshot alone.
Screenshot it, then use the describe-it-back prompt further down this page.
2 路 the pricing
pricingpages.design, for pricing plans
Modern, elegant pricing plan components, a lot of them with that clean Apple feel. Pricing is the section people most often build badly, because they try to explain instead of letting the layout do the comparing.
Pick by plan count first, not by looks. A two plan layout and a four plan layout are different design problems, and copying the wrong one is why pricing tables end up cramped.
Notice how the recommended plan is marked in the one you pick. That single detail does most of the conversion work.
3 路 the navigation
navbar.gallery, for navigation bars
A big variety of navigation patterns: mega menu, dropdown, full screen, sidebar, and more. Pick what you like most, but pick by how many links you actually have.
Count your links first. Up to about five, a simple bar wins. More than that, or several categories, and you want a mega menu or a full screen overlay.
Check the mobile version of the pattern before you commit. Most navigation looks fine on desktop and falls apart at phone width.
4 路 the call to action
cta.gallery, for call to action sections
Call to action sections that actually convert, with both templates and references pulled from real sites. The references are the useful half, because you can go and look at the live page it came from.
Look for a layout where the button has real breathing room around it. Crowded is the most common failure.
Copy the structure, then write your own words. One promise, one button, one line of reassurance underneath.
5 路 the one everyone forgets
footer.design, for footers
Footers, sorted by type and by style, so you can filter for exactly the kind you want. Nobody designs the footer, which is exactly why a considered one makes a whole site read as finished.
Use both filters together: type for the structure you need, style for the feel you are already committed to.
Match the footer to the hero you chose in step one. Those two sections bookend the page, and if they disagree the whole thing feels borrowed.
the part that makes it work
Turn a screenshot into a brief
Handing Claude an image and saying "like this" gets you a vague copy. Make it describe the reference first, in its own words, and then build. You get to correct the description before any code exists.
Describe it back, then build it
I'm attaching a screenshot of a [hero section / pricing page / navbar / CTA / footer] I want to use as a reference.
Before you write any code, describe it back to me as a spec:
- Layout and alignment, and how much empty space there is
- The type: how many sizes, roughly what scale, which weights
- The colour palette, as hex values, and which one is the accent
- What is deliberately NOT there
Then tell me which parts of this would clash with the rest of my site, and what you'd change to fit.
Wait for me to confirm the spec. Then build it with my content and my colours, not the reference's.
馃尡 Save the spec Claude writes back. That paragraph is reusable: paste it at the top of every new section so the whole page inherits one design language instead of five.
before you build
What to watch for
Reference, do not clone. These are real companies' live pages. Take the layout logic and the spacing, bring your own words, colours and type.
One design language, five sections. Decide the feel once, then hold every section to it. This is the single biggest difference between a site that looks designed and one that looks assembled.
Check phone width every time. Most of these galleries show desktop screenshots. Ask Claude to build mobile first, then widen.
Do not skip the footer. It is the cheapest section to make good and the one that makes everything above it look intentional.