Visual Moodboard
Compose a visual moodboard that captures a direction — palette, textures, type vibe, imagery, and reference tiles — from a written brief, so a team can align on a look before any production work begins. Lock the brief and the explicit dimensions of the mood (e.g. 'warm/editorial/handmade' vs 'cool/technical/precise') FIRST, then assemble a coherent grid of generated or sourced tiles plus a swatch strip and keyword callouts. Covers moodboards, style boards, visual direction, design inspiration, brand mood, and look-and-feel exploration.
Steps
Entry step: brief. Each step names the specialist role it wants; the full working prompt is expandable.
- Moodboard briefvisual-designerentry
lock the mood dimensions, palette, and tile plan
Show working prompt
1) Distill the direction into 3-5 mood keywords (e.g. warm, editorial, handmade, calm). 2) Lock a palette with hex swatches and the type vibe (serif/sans, weight, feeling). 3) Plan the tile grid: enumerate the tiles you'll include — e.g. 2-3 imagery tiles, a texture tile, a typography specimen tile, a palette strip — and what each should evoke. 4) Note explicit anti-references (what this is NOT) so the board has a point of view. 5) Write an acceptance-criteria checklist: 'board expresses the 3-5 keywords', 'palette swatches show exact hex', 'a typography specimen is present', 'tiles are cohesive (one direction, not a scrapbook)', 'at least 6 tiles'. 6) Record brief + checklist via write_task_note AND to notes/brief.md. No assembly yet.
- Assemble the boardimage-generator
compose the coherent tile grid into one deliverable
Show working prompt
1) Read brief.md. 2) Generate or compose each planned tile to express the locked keywords and palette — imagery tiles via the image-generation capability (or curated solid/gradient/texture blocks if no image model is available), a swatch strip rendering the exact hex values, and a type specimen tile showing the chosen pairing with sample words. 3) Assemble everything into ONE deliverable: a single index.html grid (preferred — easy to render and tweak) laying out at least 6 cohesive tiles with the keyword list as a caption. 4) Keep the direction tight: every tile should feel like the same world. 5) Reference any generated files from assets/ if produced. 6) write_task_note the board path and tile count. Good looks like: someone could brief a designer from this board alone.
- Evaluatereviewer
Grade the deliverable against every acceptance criterion. All pass → finish; any fail → loop back and fix the gap.
Show working prompt
1) Open index.html and confirm it renders a grid of at least 6 tiles (PASS/FAIL). 2) Check it expresses the 3-5 mood keywords from brief.md — is the direction legible and cohesive, not a random scrapbook (PASS/FAIL)? 3) Confirm a palette swatch strip shows the exact hex values and a typography specimen is present. 4) Verify any referenced image files actually load. 5) Write PASS/FAIL per criterion. Incoherent/off-brief → loop back to assemble. Then route — this is the whole point of the loop: - **Every criterion PASSES →** call `advance_task_step({ ref, stepId: "evaluate", next: "finish" })`. - **Any criterion FAILS →** write the specific gaps to notes, then call `advance_task_step({ ref, stepId: "evaluate", next: "assemble" })` to loop back. The builder fixes exactly those gaps. Never route to `finish` while any criterion is unmet. The build phase's completion gate already blocked a grossly-incomplete deliverable; your job is the judgment an automated check cannot make (does it actually work, read well, look right). After ~3 unproductive loops, stop and report DONE_WITH_CONCERNS so the user can step in. - Finishdeveloper
All acceptance criteria met. Stamp a short summary and report DONE.
Show working prompt
Every acceptance criterion passed. Write a one-paragraph DONE summary to task notes via `write_task_note`: what was built, the deliverable path(s), and a one-line confirmation that each criterion is met. Then report DONE.
Triggers
Phrases that suggest this craftbook to a crew.
- make a moodboard
- create a style board
- visual direction board
- design inspiration board
- look and feel board
Source
View this craftbook on GitHub · MIT license