imagegen-frontend-web
Elite frontend image-direction skill for generating premium, conversion-aware website design references. CRITICAL OUTPUT RULE — generate ONE separate horizontal image FOR EVERY section. A landing page with 8 sections produces 8 images. Never compress multiple sections into one image. Enforces composition variety (not always left-text / right-image), background-image freedom, varied CTAs, varied hero scales (giant / mid / mini minimalist), narrative concept spine, second-read moments, and a single consistent palette across all images. Optimized for landing pages, marketing sites, and product co
Profile →npx skills add nexu-io/open-design --skill imagegen-frontend-web --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
What it does
Generates separate horizontal images, one per landing-page section, never combining sections into a single image. Each section is produced to act as a frontend reference for layout, typography, spacing, and CTAs, with a strict rule to keep one image per section. It enforces composition variety across sections, a single consistent palette, and specific constraints to suit landing pages, marketing sites, and product comparisons.
How it works
The skill is triggered by phrases like "website image reference", "landing page comp", "web design reference", or "section images". It operates in image mode for desktop marketing scenarios, requiring a design system, typography, color considerations, and anti-ai-slop directives. The example prompt instructs generating separate premium images for each landing-page section with a coherent palette and varied composition, and the hard rule mandates 1 image per section (e.g., 8 sections → 8 images).
When to use it
Use when you need explicit, section-by-section frontend design references for a landing page or marketing site, where each section’s image serves as a distinct visual reference for layout, typography, and CTAs. The rule specifies that a landing page with 8 sections should yield 8 images, and default handling for unspecified counts.
What it can touch
The skill specifies tools: claude-code, codex, cursor. It requires a design-system grounding and includes an example prompt to generate separate premium website reference images for each section, with one coherent palette and varied composition.
Caveats
licenses: Apache-2.0. The skill emphasizes producing separate horizontal images per section and avoids combining sections into a single frame. It enforces varied composition and palette consistency across all images, and provides no guarantees about specific visual outcomes beyond the stated rules.
# 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. --- # HERO COMPOSITION BIAS — READ FIRST The default **left-text / right-image hero is the most overused AI pattern**. It is allowed, but it should not be your first instinct. Before reaching for it, consider these alternatives and pick whichever fits the brand best: - centered over background image - bottom-left over image -
- 1. ACTIVE BASELINE CONFIGURATION
- Brief-to-direction mapping
- 2. THE COMBINATORIAL VARIATION ENGINE
- Theme Paradigm
- Background Character
- Typography Character
- Hero Architecture
- Section System
- Signature Component Set
- Motion-Implied Language
- Composition Anchor (per-section)
- Background Mode (per-section)
- CTA Variation
- Hero Scale (per-page)
What does the imagegen-frontend-web skill do?
Elite frontend image-direction skill for generating premium, conversion-aware website design references. CRITICAL OUTPUT RULE — generate ONE separate horizontal image FOR EVERY section. A landing page with 8 sections produces 8 images. Never compress multiple sections into one image. Enforces composition variety (not always left-text / right-image), background-image freedom, varied CTAs, varied hero scales (giant / mid / mini minimalist), narrative concept spine, second-read moments, and a single consistent palette across all images. Optimized for landing pages, marketing sites, and product co
How do I install it?
Run `npx skills add nexu-io/open-design --skill imagegen-frontend-web --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From nexu-io/open-design, a repository with 83,577 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.