Create a responsive hero visual from the CLI

Build the hero as a layout system, not one finished bitmap

Start with a landscape master whose job is to supply atmosphere, subject, and usable negative space. Keep the headline, supporting copy, and buttons as live page elements. The first command can be `npx @offlinecreator/mcp@0.1.2 generate --model "$MODEL" --prompt "$PROMPT" --aspect 16:9 --wait`. The version-pinned CLI requires a model and prompt, accepts `--aspect` or `--aspectRatio`, and passes `16:9`, `9:16`, or `1:1` into the generation request.

A 16:9 generation is only the source frame. Define the desktop and mobile hero boxes in the actual layout, then decide whether one source survives both crops. If the mobile crop loses the subject or its deliberate copy space, create a separate portrait or square art-directed source instead of shrinking the desktop composition. Responsive-image guidance distinguishes this explicit source choice from simple resolution switching.

Set the crop contract before generation

Write down three boundaries before generation: the subject-safe region, the copy-safe region, and the acceptable focal shift at the mobile breakpoint. A practical prompt describes one subject placed away from the live-copy side, a quiet background in that copy zone, no lettering, and enough environmental margin for a narrower crop. This is a composition request, not a guarantee that the model will preserve every boundary.

Confirm the model ID and operator approval under your existing account procedure, then submit one 16:9 proof with the cited generate command. Place that genuine result behind the real headline and buttons at representative wide, tablet, and narrow widths. Reject it if the subject collides with copy, a required detail leaves the frame, or generated pseudo-text appears. Only then choose between revising the prompt, changing the focal position, or authorizing a dedicated mobile source.

Use the supported ratio deliberately

Desktop proof

16:9Generate the wide master with the subject offset from the live-copy zone. OfflineCreator's current image generator exposes 16:9, 9:16, and 1:1 choices.

Mobile fallback

9:16 or 1:1Use a second source only when an approved wide image cannot be cropped without losing the subject, meaning, or copy-safe space.

Resolution variants

Same crop, several widthsCreate smaller and larger encodes of each approved composition so the browser can select an appropriately sized file.

Keep the prompt focused on crop resilience

A page-specific prompt can read: “Wide editorial hero photograph of a ceramic desk lamp in a warm studio, lamp anchored in the right third, calm low-detail wall across the left half for live headline and buttons, soft side light, restrained earth palette, believable materials, no words, no logos, no border.” Record the model ID, exact prompt, ratio, and local proof filename so a reviewer can distinguish a prompt change from a crop change.

If the first result fails, change one cause at a time. Move the subject farther from the copy zone before changing the palette; simplify the background before switching models; request a dedicated 9:16 composition only after confirming that focal positioning cannot rescue the wide source. Do not claim visual consistency between separate generations. Compare both sources in context and require human approval for subject identity, product geometry, brand suitability, and misleading details.

Finish the responsive and compression handoff

Separate art direction from bandwidth selection. Use a `picture` element with a mobile `source` when the small layout needs a different crop or aspect ratio. Within each approved crop, provide width-described `srcset` candidates and an accurate `sizes` value so the browser can choose according to the rendered width. Keep a fallback `src` and put `width`, `height`, and `alt` on the nested image.

Export and inspect AVIF or WebP candidates plus a compatible fallback rather than declaring one universal quality setting. Current web performance guidance says modern formats can reduce transfer size, but compression must be tested because there is no setting that suits every image; sharp edges and text can respond differently from photographic detail. Compare visible artifacts in the actual hero at target viewports, record file bytes, and select the smallest candidate that passes the team's visual review.

Make the accessibility decision in placement context. If the hero contributes information, write a short alternative that conveys that meaning. If it is decorative or repeats nearby live text, use an empty `alt` value. W3C also advises avoiding images of text except where essential; keeping campaign copy live preserves text resizing, contrast control, translation, and independent responsive placement.

Continue by the unresolved production risk

Use the crop guide when the approved source still needs breakpoint-safe framing. Return to the creative-workflow directory when model choice or access method is unresolved. Use the ad-concept guide when the hero is part of a campaign that still needs claims and brand review. These routes preserve this page's narrow job: create and hand off one responsive hero system from a CLI-generated source.

Editorial ownership boundary

This page owns “cli responsive hero visual”: a 16:9 CLI proof, a desktop-to-mobile art-direction decision, live-text accessibility, and a compression handoff. It does not own general model comparisons, every responsive-cropping technique, or performance guarantees. The recent-source run found no relevance-qualified practitioner evidence for this exact workflow, so the recommendations rely on verified product interfaces and primary web standards guidance rather than invented community consensus.