moodboard

Moodboard

Assemble a section-by-section visual moodboard for a page. For every section the report shows the current state large, the problems identified beside it, a grid of benchmark screenshots each captioned with the practice it demonstrates, the best practices grouped by discipline, and the recommendation for the brand.

This is the page altitude, visual-first output of Web Anatomy. It generates its own content: it captures the live page section by section (the same on-page reading audit-page does) and pulls benchmarks per section from the MCP (the same retrieval find-examples does), then composes both into one scrollable board.

How moodboard differs from the neighbors

Keep the routing clean. The closest neighbor is benchmark-compare, and they share the same MCP retrieval underneath, so the distinction matters.

• benchmark-compare takes one target (a URL, screenshot, or pasted section) and returns a verdict: a gap analysis where each gap is labeled HIGH, MEDIUM, or LOW. The screenshots are evidence for the gaps. Use it to answer "how far is this from the winners, and what is the biggest gap."
• moodboard takes the whole page and returns a reference board: every section in scroll order, the current state large beside the problems, and a grid of benchmark screenshots as the centerpiece. The screenshots are the point. Use it to answer "what should each block look like, as a brief I can hand to design or import into Figma." It does not score gaps.
• find-examples is one section's swipe file. research-best-practices is a narrative report. improve-page is a grounded rework with copy-paste fixes.

In short: benchmark-compare scores a gap on one target; moodboard composes the page-wide visual reference you build from.

Output Behavior

Always write:

• .webanatomy/moodboard/{page}-{YYYY-MM-DD}/report-data.json
• .webanatomy/moodboard/{page}-{YYYY-MM-DD}/report.html
• .webanatomy/moodboard/{page}-{YYYY-MM-DD}/report.md
• .webanatomy/moodboard/{page}-{YYYY-MM-DD}/references/