How to build a moodboard for AI-generated UI

Designers have always made moodboards. A wall of screenshots, a Pinterest board, a Figma page full of things that felt right. It works because you're the one reading it. You remember why you saved each image.

When the next step is an AI tool instead of your own hands, that changes. Claude Code, Cursor or any other AI coding tool can look at your images, but it can't know why you saved them. A moodboard for AI-generated UI has to carry the "why" as well as the pictures. Here's how to build one.

Why AI needs a different kind of moodboard

A traditional moodboard is a feeling. Twenty images that together say "warm, quiet, a bit editorial". You absorb the mood and make decisions that fit it.

An AI tool can't absorb a mood the way you do. Give it twenty images and ask for "this vibe", and it averages them: a bit of each colour palette, a bit of each layout, nothing specific. The result looks like every other AI-generated interface, which is the problem I wrote about in why AI-generated UI all looks the same.

What works better is a moodboard of decisions: specific details, each with a note that says what to take from it.

Step 1: Collect parts, not pages

Most references are useful because of one detail. The curve of a button. The spacing in a pricing table. The way a headline sits against a photo. The rest of the page is noise.

So save the part. Crop the screenshot down to the detail, or draw a box around it. A crop of one card teaches an AI tool more than a full-page capture of the site it came from.

Good things to collect for UI work:

• Typography: a headline size and weight you like, a type pairing, a caption style.
• Layouts: a grid, a section rhythm, how a hero is split.
• Interactions: a hover state, a transition, how a menu opens.
• Colours: a single shade, or two colours that sit well together.
• Copy: a tone of voice, a button label, an empty state.
• Tiny details: a border, a divider, an icon style, a focus ring.

Step 2: Annotate what you saw in each reference

This is the step most moodboards skip, and the one that matters most for AI. Next to each reference, write a few words about what you noticed:

• "This curve. Just this curve."
• "This green shade."
• "This amount of white space."
• "Keep the structure. Lose the styling."

Each note narrows the reference from "something like this" to one instruction. It also helps you: looking back after a week, you'll know why you saved it.

Step 3: Save what you don't want

A good moodboard also records what you rejected. If you've decided against glassy gradients, oversized rounded corners or a particular font, save an example and say so: "steer away from this style".

AI tools default to the most common patterns. Telling them what to avoid is often more useful than telling them what to do, because it rules out the generic first guess.

Step 4: Organise by decision, not by source

It's tempting to group references by where you found them. For AI work, group them by what they decide: one set for typography, one for spacing, one for colour, one for components.

When you ask Claude Code to style the pricing page, you can then hand over exactly the references that apply. The model gets five relevant details instead of fifty loosely related images.

Step 5: Turn the moodboard into context your AI can use

A moodboard only helps if it reaches the tool. There are a few ways to get it there:

• Attach the images directly. Claude Code can read images, so paste or drag in the few references that matter for the task, each with its note.
• Write the decisions into the project. Add the rules your moodboard settled to the project's CLAUDE.md file: "corners are 999px on buttons and 16px on cards", "one accent green, #C7D882". Claude Code reads that file at the start of every session.
• Send references with each piece of feedback. When you point at an element on localhost and say what's wrong, attach the reference that shows the fix.

My designer's workflow for building with Claude Code goes through how these fit together on a real project.

A moodboard tool built for this

Pinterest, Are.na and Figma are all good at holding images. What they don't do is keep the note about why on the exact detail, and carry it into your AI tool.

That's what I built Moodbit for. It's a Chrome extension: press Control+M on any site, draw a box, drop a pin and type the thought. Save part of a page, an image, a link or a few words into a project you can search later. When you're building, attach those references to feedback on your own app and send it all to Claude Code.

Common questions

What is a UI moodboard?

A collection of interface references, such as screenshots, components, colours and type, that sets the direction for a design. For AI work, each reference should carry a note about which part of it matters.

How many references should a moodboard for AI have?

Fewer than you think. Five to ten well-annotated details for a task beat fifty unannotated images. Keep the full collection, but send the AI only what applies to the change at hand.

Can I use a moodboard with Claude Code?

Yes. Claude Code reads images, so you can paste references into a session. It works best when each image has a short note, and when the lasting decisions are written into your project's CLAUDE.md.

What's the best way to save design inspiration from websites?

Save the specific detail rather than the whole page, and write down why straight away. A browser extension that crops, annotates and files references in one step makes this fast enough to do every time.

Should a moodboard include things I don't like?

Yes. Examples of what to avoid stop AI tools from falling back on the most common patterns, which is often the fastest way to a less generic result.