| name | mooboard-create-collage |
| description | Creates a new Mooboard / Moobird collage board on an infinite canvas. Use for shopping boards, inspiration boards, visual research, taste-making, brand exploration, moodboards, and open-ended image + link collages. |
| disable-model-invocation | true |
Mooboard Create Collage
Create a new board under the Mooboard library in a loose, expressive,
open-collage style on an infinite board.
This is not a rigid grid and not a structured comparison board.
It should feel like a thoughtful collage made by a designer:
images, link cards, notes, handwritten labels, and arrows all living together
with breathing room.
Core idea
The canvas is infinite. You may place content wherever it makes sense.
However, every placement decision must account for the real size of the item.
That means:
- For images, either:
- measure the natural width/height and derive display size correctly, or
- intentionally choose a display size and preserve aspect ratio
- For links, todos, text, and other cards, reserve a realistic bounding box
- Never place by guesswork alone
- Never allow accidental overlap
Do not rely on a layout script to fix mistakes.
Instead, use a multi-agent review workflow to reason about the board before writing the manifest.
Best use cases
- Fashion boards
- Interior inspiration
- Car shortlists
- Product moodboards
- Brand and packaging references
- Visual shopping and taste boards
- Research collages where personality matters
Style rules
A collage board should usually include:
- 4–12 images
- Optional link cards near relevant images
- A title near the upper-left region
- 2–6 short callouts or handwritten labels
- Optional todo card
- Curved arrows when useful
- Open spacing and varied sizing
It should not look like:
- a spreadsheet
- a tight Pinterest masonry wall
- a formal comparison matrix
- a packed central cluster
- a random scatter with objects colliding
Layout character
Desired feel
- Loose, human, expressive
- Staggered placement
- Mixed image sizes
- Clear whitespace
- Related items grouped semantically
- Some asymmetry is good
- Overlaps are not allowed, except optional decorative background swatches behind content
Placement expectations
- Preferred gap between substantial content boxes: 120–220px
- Hard minimum gap between substantial content boxes: 80px
- Related callouts may sit closer, but must still be readable and non-overlapping
- Do not compress a board just to keep it small; expand the canvas instead
Required multi-agent workflow
The coordinate-generating agent must not be the final approver.
Use this process conceptually:
Agent 1 — Information Planner
Plans:
- board purpose
- content groups
- likely hero items
- whether the board wants a left-to-right reading path, radial spread, or staggered bands
Agent 2 — Layout Planner
Responsible for:
- choosing image display sizes
- reserving bounding boxes
- placing items on the infinite canvas
- keeping semantically related items near each other
Agent 3 — Collision Auditor
Checks:
- every pair of placed boxes
- that image sizes match intended aspect ratio
- that reserved boxes do not overlap
- that gaps are sufficient
- that text blocks and cards have enough breathing room
This agent must review all object pairs, not just nearest neighbours.
For N placed content objects, inspect N × (N − 1) ÷ 2 pair relationships.
Agent 4 — Composition Critic
Checks:
- whether the board feels balanced
- whether items are too crowded in one area
- whether callouts are associated with the right image
- whether the collage feels expressive rather than grid-like or messy
Agent 5 — Final Manifest Reviewer
Checks the final manifest after transcription to make sure:
- no coordinates were copied incorrectly
- image sizes still match aspect ratio
- the written JSON still matches the reviewed plan
If any reviewer finds a problem, revise the layout and re-review.
Workflow
Copy this checklist and track it:
Collage Board Progress:
- [ ] 1. Confirm theme, board name, and destination folder
- [ ] 2. Gather content (images, links, files, notes)
- [ ] 3. Measure images or choose intentional display heights/widths
- [ ] 4. Plan semantic groups and approximate regions on the infinite board
- [ ] 5. Place large items first, then medium items, then text/cards
- [ ] 6. Run collision review with independent agents
- [ ] 7. Add arrows and annotations only after layout is approved
- [ ] 8. Write .mooboard.json — every image `presentation: "interactive"`
- [ ] 9. Remove orphan media; confirm no `presentation: "file"`
- [ ] 10. Final manifest review
- [ ] 11. Report board path and summary
Images
For every image on the canvas:
- Use
type: "image"
- Store media at the board root
- MUST use
presentation: "interactive" — full image preview mode
- Include
naturalWidth and naturalHeight
- Preserve aspect ratio
Critical: interactive vs file mode
| Value | What the user sees | When to use |
|---|
"interactive" | Full image preview tile | Always for collage images |
"file" | Generic file card, not a preview | Never |
Hard rules:
- Every image in
.mooboard.json must be "presentation": "interactive".
- Never write
"presentation": "file".
- Only keep media files in the board folder that are referenced by interactive image objects. Orphan files get auto-imported as file cards and can destroy the layout.
- Link cards must use
previewMode: "card" with a real previewImage.
Sizing rule
Pick one of these approaches:
-
Measured-fit approach
- choose a target display height
- compute width =
round(displayHeight * naturalWidth / naturalHeight)
-
Chosen-width approach
- choose a target display width
- compute height =
round(displayWidth * naturalHeight / naturalWidth)
Both are valid. What matters is that the chosen display size is deliberate and consistent with the real image ratio.
Typical collage image sizes
Use varied sizes, for example:
- hero image height: 380–520
- supporting image height: 260–380
- small supporting image height: 180–260
Do not make every image the same size.
Placement method
Step 1 — Place major anchors first
Place the largest 2–4 items first.
These create the visual rhythm of the board.
Step 2 — Place related secondary items
Place supporting images and links near their related anchors.
Step 3 — Place annotations
Reserve boxes for title, callouts, and todo.
These must not be squeezed into leftover scraps.
Step 4 — Review and rebalance
If one zone is too dense, expand outward.
Do not simply nudge items by 10px and hope it works.
If a cluster is crowded, move the whole local arrangement into a better area.
Bounding-box rule
Before finalizing any placement, maintain a table of placed content:
- id
- type
- x
- y
- width
- height
- semantic group
Treat each substantial object as an axis-aligned bounding box:
- image
- link
- todo
- native text
- geo shape
- file card
- embedded card
Arrows may cross and are not considered blocking objects.
The Layout Planner proposes coordinates.
The Collision Auditor must reject any placement that violates spacing.
Links
Use card-style links when possible.
Link cards should sit near the image or claim they support.
Do not dump all links in one strip at the bottom unless explicitly requested.
Typical link card size:
Text and callouts
Use native text shapes.
Recommended:
- title:
font: "draw", size: "xl"
- callouts:
size: "m" or "l"
Callouts should be short and punchy.
Examples:
- “Best shape”
- “Most practical”
- “Too expensive?”
- “Love this front”
Arrows
Use arrows only when they improve clarity.
Good uses:
- callout → image
- image → related link
- note → detail
Prefer curved / arc arrows for collage boards.
Todo
Optional but recommended.
Use one todo card near the upper region of the board.
Typical size:
Camera and envelope
Typical envelope:
{
"version": 1,
"createdAt": 0,
"lastOpenedAt": 0,
"objects": [],
"camera": { "x": 450, "y": 500, "zoom": 0.45 },
"background": "default",
"showGrid": true
}
Adjust camera to frame the whole spread naturally.
Output to the user
Report:
- Absolute board path
- Counts of images, links, todos, and native annotations
- Any skipped URLs or assets
- That they should open or refresh the folder in Mooboard to see it
Anti-patterns
- Overlapping images, text, links, or todos
- Treating the collage like a rigid grid
- Making every image the same size
- Placing everything in the center
- Guessing image size without preserving ratio
- Adding arrows before the layout is stable
- Letting the same agent generate and approve coordinates
- Using scripts as the primary overlap checker
- Writing images with
presentation: "file" (file cards instead of previews)
- Leaving unused media in the board folder (auto-imports as file cards)
- Link cards without
previewMode: "card" / previewImage
