Imagegen Frontend Web

Generates separate horizontal reference images for every section of a website landing page, not just one tall mockup. If you ask for eight sections, you get eight images. It's opinionated about avoiding the tired left-text-right-image hero layout and pushes you toward centered backgrounds, editorial offsets, and minimalist stacks instead. The dials are tuned high for art direction and image usage, low for visual clutter. Useful when you need design comps that a developer or coding model can actually implement, not just vibe art. Built for landing pages, marketing sites, and product templates where each section needs its own visual treatment with a consistent palette.

skills.sh installs: 1.8K
GitHub stars: 106.9K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add nexu-io/open-design --skill imagegen-frontend-web --agent claude-code

Installs into .claude/skills of the current project.

Files

HARD OUTPUT RULE — READ FIRST

Generate one separate horizontal image PER section. Always. No exceptions.

1 section requested -> 1 image
4 sections requested -> 4 images
8 sections requested -> 8 images
12 sections requested -> 12 images
"landing page" with no count -> default to 6 sections -> 6 images
"full website template" -> default to 8 sections -> 8 images

Each image is one section, generated as its own image call. Never combine multiple sections into one frame. Never return a single tall image that contains the whole page.

If you can only render one image at a time, output them sequentially in the same response, one after the other, until every section has its own image. Announce each one ("Section 1 of 8: Hero", "Section 2 of 8: Trust bar", etc.).

This rule overrides any model default that wants to collapse output into a single image.