How to Use Design Inspiration Sites: My 4 Steps for Turning References into Your Own Design (Plus 15 Sites Sorted by Purpose)

TL;DR: Collecting inspiration is easy; turning references into your own design is the hard part. My method has four steps. Collect 3 to 5 real references from the same category and break each one into layout, color, type, and hierarchy. From those, pick the 2 to 3 core principles you actually want to learn. Rebuild the design yourself in Figma with a different structure. Then put the new draft next to each reference and check three things: layout structure, signature elements, and headline pattern. If two of the three match, redo it. I sorted 15 inspiration sites into one table by purpose, so you can ask "what am I looking for this time?" before picking a site. Watch for three limits: seeing a design does not mean you can use it, learning from a single reference makes look-alikes likely, and AI-generated images are mixed into more inspiration feeds every month.

Most designers know the feeling: two hours scrolling Pinterest, dozens of saves, and then when the real design starts, none of it seems usable. Collecting inspiration is easy. Turning it into usable reference is the hard part.

I first wrote this as a list of 15 sites in June 2026. This rewrite puts my own process at the center, from reference to finished piece, using one complete breakdown as the example. The 15 sites are now a single table sorted by purpose, with a one-line review for each. I opened every site on 2026-10-14 to check pricing, login rules, and recent changes; sources are listed at the end.

The short version: learn the why, not the look

Collecting references is not copying, as long as you study the method rather than the surface.

If you lift someone's layout, palette, image placement, and text proportions almost wholesale and only swap the brand name, that is copying. If you ask why the headline sits there, why the photo is cropped that way, and why there is so much white space, then apply those answers to your own content and brand, that is reference.

I wrote in one of my newsletters that taste matters more in the AI era: if you do not know a style exists, you will never think to ask AI for it. The more references you study and the finer you break them down, the more you have to judge with, whether you lay out the design yourself or hand it to AI.

In one line: references are not the problem. Using them without digesting them is.

How I turn references into my own design

My process has four steps: observe, break down, transform, and check. Below I walk through one banner ad, from finding references to a new draft.

Step 1: Observe. Collect real references from the same category

The point first: find references from the same product category, and make sure they are real, shipped designs. Appliances for appliances, cosmetics for cosmetics, coffee for coffee.

Every category has its own conventions, and customers already read ads in those patterns. Sale banners for online shops usually make the price huge; skincare ads often leave more white space. A reference from another category may look good but feel wrong once it sits next to its real competitors.

1. Before you search, decide what you are looking for this time: a style, a layout, type, a flow, or how information is ordered. One thing at a time.
2. Go to the site that matches that need (see the table below).
3. Collect 3 to 5 references. A small set makes the shared patterns visible; a huge pile blurs your direction.
4. When you save each one, write one sentence about why, such as "the white space feels calm" or "the price is much bigger than the product name."

I keep references in Eagle, a desktop asset manager. I have recommended it in my newsletter because it is a one-time purchase, which is rare now. Typical use: drag images in with the browser extension, add folders and tags, write notes directly on images, and find them again later by color or tag. The official site lists a 30-day free trial and a one-time price of US$34.95, with each license usable on 2 devices (checked 2026-10-14).

You can organize by use (posters, web, brand), by element (color, type, composition), or by project. Flip through your library before each new project and you will start to see your own taste, which is the seed of a personal style.

Step 2: Break it down. Write down the design language

The point first: break every reference into the same few aspects, and write one sentence on how it handles each. I always look at typefaces, number styles, color, label shapes, and layout direction, which group into four areas.

• Layout: where the main subject sits, whether it is symmetrical or split, and how much white space there is.
• Color: how many colors, in what proportions, and how saturated.
• Type: the headline typeface, the number style, the weight contrast, and what the labels look like.
• Hierarchy: what readers see first, what they see second, and what the smallest text is.

For the example I used a bath tablet ad by BOTANIST (reference source: Banner Library's public listing page, captured 2026-10-14 for this breakdown only). It is centered and symmetrical, with the headline on top and two boxes below; the palette splits evenly between a muted green and a muted apricot, one for each scent; the headline uses a Mincho-style serif and everything else is small.

After breaking down all 3 to 5 references, compare your notes and pick the 2 to 3 core principles you really want to learn this time, such as "low saturation," "a serif headline," or "lots of white space." A core is a principle, not the look of any single image.

Write your notes in two columns. One column is "principles to learn," such as low saturation, a serif headline, and generous white space. The other is "signature elements," the things that make the reference instantly recognizable, such as the two bursts of powder on either side and the two boxes side by side in the example. Learn from the first column. Leave the second behind.

For the example, the notes look like this:

Once the table is done, you are not taking away an image. You are taking away a few principles you can reuse, even in a different category.

Step 3: Transform. Rebuild it yourself in Figma

The point first: take your breakdown notes into Figma, rebuild the design yourself with a different structure, and keep only the principles.

I do not drop a reference into AI and ask for "one like this." References are for the person doing the layout, so I lay it out myself from my notes. The principles end up right and the look ends up mine.

1. Choose the structure first. If the reference is centered, try a left-right split; if it uses a full-bleed photo, try a color block with a cut-out product.
2. Apply the principles one at a time: color proportions, typeface, weight contrast, white space.
3. Write the copy from your own content. Do not edit the reference's sentences.
4. Use only the 2 to 3 cores you picked, ideally from different references, such as A's palette, B's layout rhythm, and C's type hierarchy.

In my demo draft (a fictional brand), the structure changes from centered to a split: a muted green block with a single product jar on the left, and a cream panel on the right with a launch-date tag, a large serif headline, and a short line of small text. The low saturation, serif headline, and white space stay; the powder bursts and twin boxes do not.

Step 4: Check. Put the new draft next to each reference

The point first: before you hand it in, place the new draft next to every reference and check three things.

If two of the three match the same reference, change it. Try the smallest fix first: keep the scene and style, and change only the wording, the layout, or the single most recognizable element. If it still looks too close, then consider starting over.

The more you rely on a single reference, the more likely a look-alike becomes. The 3 to 5 references are there to reveal shared patterns, not to be copied whole. What you actually take away is 2 to 3 cores, spread across different references, so the result does not look like any one of them.

Using references with AI: break them down first

The point first: when AI is part of your process, the breakdown step matters even more.

AI-built UI pages often feel familiar. That is not AI's fault; it is the lack of clear direction. Your breakdown notes are that direction. Writing the principles you want as text is more precise than handing over a reference image, and much less likely to produce a copy.

Before making graphics with AI, spend time once to define your rules for type, color, and spacing. Skip that and the results will be ordinary, and ordinary tends to look like everyone else's. Breaking down references gives those rules a basis.

The same goes for assets. To reduce the "AI look," I avoid assets that are 100% AI: I use mostly real photos and let AI edit specific parts. For references, likewise, prefer real shipped work over AI-generated images.

Pick a site by purpose: the 15 sites at a glance

The list of sites is not the point. Knowing what you need this time is. Start from the question, then pick the site.

Three sites, opened up

Landbook (land-book.com): the site now writes its name as Landbook; the URL has not changed. Its strength is letting you view a single section type or a single page type, which is ideal for sales and course pages. Use Sections for one block at a time, the page-type tags such as Pricing and Sign Up to find the same kind of page, and Filters to narrow by industry, style, and color.

Banner Library (design-library.jp): a banner looks small, but it is a hard test of hierarchy: the headline must be clear, the visual must pull you in, and the brand must still be seen. The breakdown example above came from here. Start with CATEGORY to stay in the same industry, narrow with TASTE, SHAPE, COLOR, and MEDIA, then click the tags under any banner to find similar work.

Typewolf (typewolf.com): choosing typefaces takes time, and Typewolf shows type in use on real websites, with the fonts listed under each entry. The newest homepage entry is from December 2025, so updates have slowed. For recent type trends, pair it with Landbook's Typography filter.

Changes found in the October 2026 check

• Page Flows has no free plan. The original article said only some content was paid. The pricing page lists yearly, quarterly, and team plans, and even the 3-day trial costs US$2.95 up front.
• Typewolf updates have slowed. The newest homepage entry is from 2025-12-14, and the batch before that is from September 2025. The font lists and articles are still available.
• Land-book now writes its name as Landbook. The URL is still land-book.com, and it added Mobile, Motion, OG Images, and Headlines categories.
• Savee lives at savee.com. The old savee.it address redirects there. It now offers an MCP server that lets AI tools read your saves (read only).
• Mobbin also has MCP, included in Pro. The free plan has no flows or search and allows at most 3 collections.
• Cosmos lets you search by color, find similar images, and show, blur, or hide images flagged as AI-generated.
• Pinterest has labeled AI-generated or AI-edited images "AI modified" since 2025 and offers ways to see fewer of them.
• Dribbble's homepage now centers on hiring. In 2025 it ruled that designers cannot exchange contact details on the platform until the client pays, which caused a lot of debate.

Limits and cautions

• Seeing it does not mean you can use it. Work on inspiration sites is copyrighted by its creators. Images on Banner Library, Pinterest, and Behance are for reference only; do not swap the text and reuse them. For Figma Community files, check each file's stated license, and rebuild for the brand in real projects.
• A single reference is the fastest route to a look-alike. The more you rely on one image, the more your work resembles it. A side-by-side check with the three tests above is far easier than being called out later.
• AI-generated images are everywhere. Pinterest and Cosmos now flag AI images, but labels do not catch everything. AI images often have structure that does not hold together and blurry text, and they were never real, shipped designs. To learn category conventions, favor sites that collect real work, such as Mobbin, Banner Library, and Siteinspire.
• Sites change. Plans, prices, and login rules can change. The table reflects 2026-10-14; check the official site before relying on it.
• This is my method. Different projects need different aspects; UI work also needs flows and states. The four aspects are a starting point, not the whole list.

Resources

Site plans, prices, and features were checked against each official page on 2026-10-14 and may change.

Wrap-up

Inspiration sites are not magic; they are raw material. What matters is not how many sites you bookmark but whether you can break down what you see and use it in your own work.

1. Observe: decide what you need, then collect 3 to 5 real references from the same category.
2. Break down: split them into layout, color, type, and hierarchy, pick the 2 to 3 cores worth learning, and leave signature elements behind.
3. Transform: rebuild it yourself in Figma with a different structure and your own copy.
4. Check: compare against each reference; if structure, signature elements, or headline pattern match on two counts, change it.

Be a user, not a collector. Saving a thousand images will not make you better. Using three of them in real work, and making the work better, will. Before your next project, pick one reference and run these four steps once.

Related reading

• AI Design Asset Tools: 26 Tools for Image Generation, Product Shots, and More
• Claude Design: The Complete Guide
• How to Choose an AI Slide Tool in 2026