Website Inspiration

---
name: website-inspiration
description: Look at real, well-designed websites before designing one. A curated list of 17 design gallery sites, each matched to the part of the page it helps with (full landing pages, hero sections, pricing, calls to action, footers, dark mode, app screens and flows, fonts, portfolios, emails). Use before designing or redesigning a website, landing page, pricing page, hero section, footer, portfolio or marketing email, when a design looks generic, or when the user asks for design inspiration, references or examples.
metadata:
  author: Edge
  license: Apache-2.0
---

# Website inspiration

Most generic web design comes from designing from memory. Before you design
a page, look at how good sites already solve the same part of the page, then
design. This skill is the list of where to look and how to use it.

## When to use

- Before designing or redesigning a website, landing page or marketing page.
- Before building one specific section: hero, pricing, call to action, footer.
- When a draft looks generic and the user asks to make it better.
- When the user asks for design inspiration, references or examples.

Skip it for small fixes to an existing design system; follow that system instead.

## The list

Pick sources by the part of the page you are working on.

### Whole pages

| Site | What it is good for |
| --- | --- |
| godly.website | The best-looking sites on the internet |
| siteinspire.com | Hand-picked sites, sorted by style |
| onepagelove.com | One-page sites, collected since 2008 |
| land-book.com | Full landing pages |
| lapa.ninja | A large library of landing pages (7,300+) |
| saaslandingpage.com | SaaS landing pages only |
| dark.design | Dark mode sites |

### One section at a time

| Site | What it is good for |
| --- | --- |
| supahero.io | Hero sections |
| pricingpages.design | Pricing pages |
| cta.gallery | Call-to-action sections |
| footer.design | Footers |

### Product screens, flows and type

| Site | What it is good for |
| --- | --- |
| saasframe.io | SaaS pages and product screens |
| mobbin.com | Real app screens and flows |
| pageflows.com | Recorded user flows from top apps |
| typewolf.com | Which fonts real sites use |

### Other formats

| Site | What it is good for |
| --- | --- |
| bestfolios.com | Designer portfolios and resumes |
| reallygoodemails.com | Email designs |

## How to use it

1. **Name the job.** Write one line: what the page is, who it is for, and
   which part you are designing (whole page, hero, pricing, footer, email).
2. **Pick two or three sources** from the tables for that job. A pricing page
   starts at pricingpages.design and saaslandingpage.com; a portfolio starts at
   bestfolios.com and godly.website; a product tour starts at mobbin.com and
   pageflows.com.
3. **Open them and collect three to five references.** If you can browse,
   visit the gallery, filter to the closest category and note the specific
   sites you would copy a pattern from, with their URLs. If you cannot browse,
   give the user the exact gallery pages to open and ask them to paste back
   screenshots or links.
4. **Write down the patterns, not the pixels.** For each reference: layout,
   type scale and fonts (check typewolf.com), colour use, how the headline and
   call to action are placed, and what makes it feel specific. Never copy a
   site's copy, logo, illustrations or brand assets.
5. **Design from the patterns.** State which reference each major decision
   came from, so the user can see why the page looks the way it does.

## Output

Before any design or code, show the user:

- The job in one line.
- The sources you checked.
- Three to five references, each with a URL and the one pattern you are taking.
- The design direction that follows from them.

Then design or build the page.

## Notes

- Galleries change. If a site is down or has moved behind a paywall, say so
  and use the next source in the same table.
- Some galleries (for example mobbin.com) limit what you can see without an
  account. Say what you could not open instead of guessing what is there.