gilde

← All craftbooks

Marketing Hero Image

Media: imagesevalv1.0.0released 2026-06-05workflow: build-loop

Create a single high-impact marketing hero image from a brief and place it into a working hero section. Lock the brief FIRST — aspect ratio, subject, mood, palette, focal point, and crucially the safe zone where headline and CTA text will overlay — because a beautiful hero that has no room for copy (or whose focal point sits under the button) is useless. Then generate the image to the brief and place it behind real overlaid text to prove it works. Covers hero banners, marketing imagery, landing-page art, website headers, and key visuals.

Steps

Entry step: brief. Each step names the specialist role it wants; the full working prompt is expandable.

  1. Hero briefvisual-designerentry

    lock ratio, subject, mood, palette, focal point, text safe-zone

    Show working prompt
    1) Decide the aspect ratio and target use (e.g. 16:9 full-bleed web hero). 2) Lock the subject and scene, the mood/style, and the palette (hex) so the image will harmonize with the brand. 3) Define the FOCAL POINT and, critically, the TEXT SAFE ZONE — which third of the frame stays low-contrast/empty so an overlaid headline + CTA remains readable. 4) Note the headline and CTA copy that will sit on it (even placeholder) so placement is concrete. 5) Write an acceptance-criteria checklist: 'aspect ratio is <X>', 'focal point is off the text safe zone', 'palette matches <hex>', 'overlaid headline + CTA are readable against the image', 'image is delivered at usable resolution'. 6) Record brief + checklist via write_task_note AND to notes/brief.md. No image yet.
  2. Generate the heroimage-generator

    render the hero image to the brief

    Show working prompt
    1) Read brief.md. 2) Using the image-generation capability (or a tasteful CSS/SVG composition if no image model is available), produce the hero at the locked aspect ratio and palette. 3) Compose so the focal point lands OUTSIDE the declared text safe zone and that zone stays calm enough for overlaid copy. 4) Match the mood and avoid clutter near where text goes. 5) Save it to assets/ (e.g. assets/hero.png or hero.svg) at usable resolution. 6) Generate at least one alternate framing if quick, so placement has options. Good looks like: a striking image with obvious clear space for the headline.
  3. Place in a hero sectiondeveloper

    build index.html with the hero behind real overlaid text

    Show working prompt
    1) Build a single index.html hero section that uses the generated image as a full-bleed background (object-fit: cover or background-size: cover) at the locked aspect ratio. 2) Overlay the real headline and CTA button positioned within the safe zone, with a subtle scrim/gradient ONLY if needed for contrast. 3) Make it responsive — the focal point must survive a mobile crop. 4) Reference the real assets/ file (relative path). 5) On a loop-back, fix only named gaps (unreadable text, focal point clipped, wrong ratio). 6) write_task_note the page path and image used. Good looks like: a hero you could ship, with crisp, readable copy over the art.
  4. Evaluatereviewer

    Grade the deliverable against every acceptance criterion. All pass → finish; any fail → loop back and fix the gap.

    Show working prompt
    1) Confirm assets/ contains the hero image (PASS/FAIL). 2) Open index.html and verify the image renders full-bleed at the locked aspect ratio. 3) The decisive check: is the overlaid headline + CTA clearly READABLE against the image and is the focal point clear of the text (PASS/FAIL)? 4) Resize to a narrow viewport — does it survive the mobile crop? 5) Confirm the palette matches the brief. 6) Write PASS/FAIL per criterion. Unreadable/clashing text → loop back to place; bad image/focal point → note it for generate.

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: "place" })` 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.
  5. 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.

Source

View this craftbook on GitHub · MIT license