Responsive Design Patterns

Every visual asset you generate will be viewed on multiple screen sizes. A hero image generated at 1920x1080 for a desktop landing page will be cropped, scaled, or reflowed on a tablet and a phone. If the composition depends on the full frame — a subject positioned on the left third with important context on the right — the mobile crop will destroy it. Responsive design thinking must start at the prompt, not at the post-production stage.

The core principle is center-weighted composition. When you generate images for multi-device use, place the most important visual content in the center 60% of the frame. The outer 20% on each side is the responsive sacrifice zone — content that will be cropped on smaller screens. This does not mean every image must be centered and boring. It means the critical elements — the subject's face, the product, the headline text area — must survive a crop from any direction.