How to Build a Moodboard from Real Websites, Not Screenshots

Most design projects start with a folder of screenshots. A hero from one site, a pricing section from another, a settings page you liked once. The folder is useful for about a day, then it goes stale: you can't tell what font that was, the colours are compressed, and when it's time to actually design something, you're back to eyeballing.

A moodboard built from plucks is different. Every item on it still knows its own CSS. Fonts, exact hex values, spacing, radii, shadows, the responsive behaviour. When you move from collecting to designing, you don't describe the reference to a tool. You hand the reference over.

Here's how we build one.

Step 1: Collect as you browse

Install the Pluck extension and just use the web as usual. When something catches your eye, click the Pluck icon, hover until the element you want is highlighted, and click. Pick the smallest thing that captures what you liked:

• A button if it's the shape and weight you want.
• A card if it's the padding and shadow.
• A section (hero, feature grid, footer) if it's the layout.
• The whole page if it's the overall rhythm.

Every pluck is saved to your library automatically, with its screenshot, source page and full style data. You don't need to copy anything or switch to the Save to Studio mode, though that mode is handy when you don't want to disturb your clipboard.

A habit that pays off: pluck more than you think you need, and pluck across categories. Three navbars, three pricing tables, three sets of form fields. Patterns show up in threes.

Step 2: Review in the library

Open Pluck Studio. The library lists everything you've plucked, newest first, and you can filter by site. Each pluck opens into a detail view with the screenshot, the page it came from and the captured styles.

This is where you sort inspiration from noise. Look at ten things you plucked last week and most will seem ordinary. Two or three will still look right. Those are the ones that go on the board.

Step 3: Lay out the board

Create a board and add the plucks you kept. The canvas is free-form, so arrange them the way you'd arrange a physical moodboard: group by what they teach you.

A layout we use for a landing page project:

• Top row: navigation. Two or three navbars with the density and alignment we're after.
• Middle: the hero and feature sections, each next to a note about what we liked. (Put the note in a prompt card's text if you want it to travel with the generation later.)
• Bottom: small parts. Buttons, badges, input fields, a footer.
• Off to one side: anything we're unsure about. It's easier to decide later when it's next to the things we're sure about.

You can also drop your own images on the board: a logo, a photo, an earlier design. They become image cards and connect to prompts exactly like plucks do.

Step 4: Turn the board into a brief

This is the part that a screenshot moodboard can't do. Add a prompt card, write the brief, and connect the references that matter to it.

For example: "A landing page hero for a developer tool. Navigation and button style from the first two references, type scale and spacing from the third. Dark background, one accent colour, a short headline and a single call to action." Then connect the three plucks.

Run it. A generation card appears to the right. Because the references are plucks rather than screenshots, the composed prompt includes their real values: the font family and weights, the exact spacing, the border radius, the shadow. The model gets told what the component is, not just shown a picture of it.

If the first result isn't it, change the brief and run again. If it's close, connect the generation itself as a reference to a new prompt and ask for the next step. The board keeps all of it, so the history of the idea is visible.

On hosted models this spends a few credits a run; on the desktop app with Codex it's free.

Step 5: Take the pieces into your tools

A moodboard that produced a direction is also a moodboard that can hand off. Every pluck on the board is still a pluck:

• Open it and copy it as an AI prompt for Claude, Cursor, Lovable or v0 to rebuild in your stack.
• Copy it as Figma layers to drop into a design file as editable vectors.
• Copy the HTML for a quick study of how it was built.

The generation images go wherever a PNG goes: a deck, a design review, a ticket.

Why this beats a folder of screenshots

It keeps the data. A screenshot of a button is a picture. A plucked button is a picture plus the CSS that made it, plus how it looks at mobile widths. When you reuse it in a brief, nothing is approximated.

It stays organised by use. Boards are per project. The library is everything. Move items between them freely instead of duplicating files.

It's one tool from inspiration to output. The same canvas that holds the references runs the generation and hands off the parts. You don't export anything to get started.

Agents can read it. Connect Claude Code or Codex over MCP and the agent can search your library, build a board from it and run prompts, which is useful once your collecting habit outpaces your organising habit.

A note on where the material comes from

A moodboard is for study. Plucking a navbar to understand its spacing, or using five sites' pricing tables to inform your own, is the ordinary way design has always worked, only faster. Rebuilding someone's site and shipping it as yours is not. If you want the detail, we wrote a practical guide on where the line is.

Start a board

Install Pluck if you haven't, pluck the next five things that make you stop scrolling, then open Studio and put them on a board. If you'd rather go straight to a finished design, Redesign a Landing Page with References picks up where this post ends.