---
title: "Make a moodboard while you browse, then have Claude Code build from it"
description: "Tag the parts of websites you like as you capture them in Bigshot, then ask Claude Code to use the tag. A real run with ten captures from patch.io and cursor.com/compile, one prompt and a restyled homepage."
url: https://www.bigshot.pics/blog/moodboard-for-claude-code
---
# Make a moodboard while you browse, then have Claude Code build from it

*2026-10-16*


When you prototype a page, the references are spread across the web: a
hero on one site, a line drawing on another, a row of cards somewhere else.
Describing them to a coding agent takes longer than showing them.

In [Bigshot](https://www.bigshot.pics/) you collect them as you browse, under one tag, and the agent
reads them from your project. The video below is one real run: ten captures,
one prompt, and the homepage of our Acme demo app restyled.

![Tagging captures moodboard in Bigshot, capturing parts of patch.io and cursor.com/compile, the board in the Library, Claude Code reading the files, and the Acme homepage before and after.](https://www.bigshot.pics/video/moodboard-web.mp4)

## Start a tag

With a Project active, open the tag pill under the island, type a name and
create it. Every capture after that carries the tag until you change it.
Here the Project is the Acme repository and the tag is `moodboard`.

![The island's tag picker with “moodboard” typed in and Create “moodboard” below it.](https://www.bigshot.pics/blog/moodboard-tag.webp)

## Capture the parts you like

Drag out only the part you want, not the whole page. The agent then sees the
reference without everything around it. The run in the video took six
captures from patch.io, among them its hero, a systems diagram, a customer
quote and a row of article cards, and four from cursor.com/compile, among
them a line drawing, city cards and speaker portraits.

If a capture needs explaining, right-click it and add a note in
**Screenshot Context…**, such as "the type scale, not the colours". The agent
reads notes with the images. This run used none.

## See the board

The Library shows the tag as a board. Pick the Project, then the tag, and
switch to the masonry view to see every capture at its own shape.

![The Library with the moodboard tag selected: ten captures in a masonry grid, each with its time, Google Chrome as the source app and the moodboard chip.](https://www.bigshot.pics/blog/moodboard-board.webp)

## Ask your agent

The prompt, typed into Claude Code in the Acme repository:

```text
Restyle the Acme homepage like the screenshots tagged moodboard.
```

Claude Code read `.screenshots/index.json`, which lists every capture with
its tags, then opened the ten images tagged `moodboard`, then the homepage's
code. Nothing was pasted into the conversation. The files were already in
the project, and the index said which ones carried the tag.

![Claude Code with the prompt, the reply “I'll look at the moodboard screenshots and the current homepage, then restyle it to match.”, and Read .screenshots/index.json, 417 lines.](https://www.bigshot.pics/blog/moodboard-prompt.webp)

How the index works, and how to keep the folder out of Git, is in
[Save screenshots in your repo](https://www.bigshot.pics/blog/screenshot-context-in-your-repo).

## The result

The homepage before:

![The Acme homepage before: a light page with a centred title, “Your team, in one place”, and a list of five apps.](https://www.bigshot.pics/blog/moodboard-before.webp)

And after one run, about five minutes, with no follow-up prompts:

![The Acme homepage after: a dark page with a large two-line title, the second line in dotted type, an orbit drawing behind two buttons, and numbered app rows.](https://www.bigshot.pics/blog/moodboard-after.webp)

The page went dark, the title got a second line in dotted type, two buttons
were added beside it, the app rows were numbered, and a thin orbit drawing went
behind the hero. Claude Code's comment on that drawing reads "like the
systems figure on the moodboard". It ran on a branch, and the result is
shown as it came out.

It is a first pass, not a finished design. From here you keep prompting, or
capture more references under the same tag and ask again.

## Setting it up

Moodboards need a Project, which needs a licence. Add the repository in
Settings › Projects, and Bigshot sets up `.screenshots/` and the lines in
`CLAUDE.md` or `AGENTS.md` that point the agent at it. The same works in
Codex.

- [Moodboards](https://www.bigshot.pics/how-to-use/moodboards): the workflow and example prompts
- [Tags](https://www.bigshot.pics/docs/library#tags): adding, removing and archiving them
- [Projects and screenshot context](https://www.bigshot.pics/docs/projects#tags): what the agent
  reads