imagegen-frontend-web

Describe the site type, brand mood, and section count in your prompt. The Skill produces one horizontal image per section with clear layout, typography scale, spacing, and CTA hierarchy that a developer can implement directly.

One image per section, always. A landing page request with no count defaults to 6 sections and 6 images; a full website template defaults to 8 sections and 8 images. Multiple sections are never combined into a single frame.

All images are horizontal: 16:9, 16:10, or 21:9 depending on section density. Heroes typically use 16:9 or 21:9, while narrower content sections may use 16:10. Each frame renders exactly one section.

Yes. Style keywords in the brief override defaults: minimalist triggers small heroes and solid surfaces, editorial enables asymmetry and strong type contrast, cinematic allows full-bleed imagery, and SaaS raises implementation clarity.

Models default to left-text/right-image heroes, purple-blue gradients, and cloned card rows. This Skill counters that with a variation engine covering composition anchors, background modes, hero scales, and banned slop patterns.

Avoid it when you need production code directly rather than visual references, or when the request is for abstract mood art rather than implementable frontend comps. The output is design direction, not HTML or CSS.