A single campaign image rarely lives in a single rectangle. A desktop hero may be wide and shallow, a product card nearly square, and a mobile story tall enough to remove half the original scene. When teams choose a style first and geometry later, every crop becomes a negotiation over which part of the image can be sacrificed.
The fix is to treat the slot as an input constraint. Kimg AI offers text-to-image and image-to-image routes, while its Banana surface exposes an Image Size control with several aspect ratios. Before asking Nano Banana Pro for lighting, texture, or mood, map the real containers and decide what each one must preserve. Styling then has a box to serve instead of a canvas to fight.
Geometry Drift Starts Before the First Export
Export tools are often blamed for a bad crop, but the failure usually began in the brief. “Create a clean product visual” says nothing about where the subject can sit, whether copy will cover a corner, or how much background can disappear. The generator fills that silence with a composition that works for its current frame.
Later, a designer tries to turn that frame into three others. A centered subject may survive a square tile but block copy in a wide hero. A dramatic close-up may look strong on desktop and become an unidentified texture on mobile. No export setting can invent space that the original composition never contained.
Responsive artwork therefore needs a geometry plan, not one supposedly universal master. Identify the containers, mark what cannot be cropped, and decide whether one composition can honestly serve more than one slot. If two slots require the subject on opposite sides or protect different actions, stop the universal-master attempt immediately. Finding that incompatibility before styling saves a late round of defensive cropping.
Inventory Real Slots and Their Crop Pressure
Open the actual page templates before generating anything. Record each container’s aspect ratio, typical displayed size, overlay position, and responsive behavior. If the layout changes at a breakpoint, capture both states. A design file with an ideal frame is not enough when the production page applies a different `object-fit` rule.
| Slot | Primary job | Protected region | Safe sacrifice |
| Wide hero | Set context and leave room for copy | Subject plus clear text side | Peripheral atmosphere |
| Square card | Make one object recognizable | Central object silhouette | Wide environmental cues |
| Tall mobile panel | Carry a vertical reading path | Top-to-middle subject action | Side detail |
The table is not a promise that one source can cover all three. It is a conflict detector. If the wide hero needs the subject on the right and the mobile panel needs it centered, those are separate composition tasks. Share the visual language, reference material, and acceptance rules; do not force them to share the same crop.
Name the Element That Carries Meaning
For every slot, choose one meaning-bearing element. It may be a product silhouette, a hand action, a material transition, or a clear empty region for verified copy. Protecting five elements usually means none has priority. The chosen element becomes the first line of the prompt and the first item in review.
Measure Overlays Instead of Imagining Them
Place the real title block, badge, and navigation over a blank container. Mark the occupied area as unavailable. Do the same for mobile. This step feels mundane, which is why it is often skipped; it also prevents the expensive discovery that the most attractive part of the generated image sits beneath a call-to-action.
Build the Responsive Artwork in Three Steps
Use text-to-image when the scene remains open and the slot geometry is the main constraint. Use image-to-image when a product, object, palette, or existing composition must carry into the result. Kimg AI presents both routes on the Banana page. The choice should come from what is fixed, not from which tab feels more creative.
Step One Set the Ratio and Subject Zone
Select the Image Size ratio that matches the first slot. Then describe where the subject belongs in relational language: right third with open space on the left, centered with clear margins, or lower half with an uncluttered upper field. Avoid pixel coordinates in a prose prompt; the review frame will enforce exact placement later.
Step Two Add Only Relevant Style Direction
Once placement is clear, add the material, lighting, and mood that support the campaign. Do not spend half the prompt listing fashionable styles. Two concrete choices—such as soft overcast light and matte paper texture—are easier to inspect than a chain of abstract adjectives. Style is now subordinate to the protected region.
Step Three Generate a Controlled Comparison
The interface allows one to four images. If comparing outputs, keep the ratio, subject zone, source, and core style fixed. Change one uncertainty at a time. Four unrelated prompts produce four separate problems; three controlled variants can answer whether the subject needs more margin or the background needs less contrast.
When using Nano Banana Pro AI, treat reference images as constraints that still require inspection. A reference may guide form or color without guaranteeing that every object, mark, or proportion remains untouched. Record what the reference is supposed to control so reviewers know which differences matter.
Protect One Safe Region Across Related Variants
Put each candidate into the real container at delivery size. Add the actual overlays, then simulate the most aggressive normal crop. Review in that order. Starting with a zoomed image encourages comments about texture before the team knows whether the asset works in its interface.
Mark pass or fail for recognition, overlay collision, crop survival, and visual hierarchy. If a candidate fails only because the subject is too close to an edge, request one local composition change and specify what must remain. If it fails because the entire scene depends on information outside the safe region, return to the slot brief.
Do not confuse a safe region with empty design. The protected area may be visually rich; it simply cannot rely on expendable edges for meaning. The rest of the frame can carry texture, depth, or atmosphere as long as cropping it does not change the story.
Kimg AI can support this iteration through source-led editing, but keep the crop sheet and acceptance record outside the tool. That external sheet prevents a later variation from quietly replacing an approved container rule with a more attractive full-screen composition.
Export Only Variants That Pass Their Own Slot
One composition system is more useful than one universal crop. Reuse the same subject priorities, palette, reference set, and review language across the campaign, then allow each incompatible container to have its own approved frame. Consistency comes from shared decisions, not identical pixel boundaries.
Before delivery, open every asset in its real interface and resize once through the expected breakpoint. If the meaning-bearing element moves under an overlay, becomes unrecognizable, or requires a reviewer to remember the uncropped master, reject it. The best responsive visual is not the frame that survives every possible shape. It is the family of frames that makes the same promise clearly in each real slot.