imagegen-frontend-web

Generates per-section horizontal website design reference images for landing pages and marketing sites.

3|Updated Apr 25, 2026
One-click install
npx skills add https://github.com/cherishwins/npsi-site --skill imagegen-frontend-web-cherishwins
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: imagegen-frontend-web
Source: https://github.com/cherishwins/npsi-site/tree/main/.agents/skills/imagegen-frontend-web
Command: npx skills add https://github.com/cherishwins/npsi-site --skill imagegen-frontend-web-cherishwins

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated website design references often collapse into repetitive defaults: one tall image for a whole page, left-text/right-image heroes, purple-blue gradients, and generic card grids. This Skill enforces disciplined art direction so each generated image is a distinct, codeable frontend design comp. ## Core Features & Use Cases - One image per section: Generates a separate horizontal image for every page section (hero, trust bar, features, pricing, CTA), never collapsing sections into a single frame. - Combinatorial variation engine: Selects theme paradigm, typography character, hero architecture, section anchors, background modes, and CTA styles to avoid repetitive AI-looking layouts. - Brand consistency across frames: Enforces one palette, type scale, CTA family, and image treatment across all per-section images so they read as one site. - Use Case: Ask for an 8-section landing page for a premium SaaS product and receive 8 labeled horizontal design comps that a developer or coding model can directly implement. ## Quick Start Generate an 8-section landing page design for a premium fintech product, one horizontal image per section.

Frequently Asked Questions about imagegen-frontend-web

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate website design references with AI image generation?▼

Describe the site type, brand mood, and section count, then generate one horizontal image per section rather than a single tall page. This Skill defaults a landing page to 6 sections and a full website to 8, labeling each frame by section name.

How many images should a landing page design generate?▼

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

How do I avoid generic AI-looking website designs?▼

Vary the hero composition away from the default left-text/right-image split, ban purple-blue gradient slop and floating blobs, and pick a deliberate combination of theme paradigm, typography character, and section anchors. This Skill encodes those rules as a checklist.

Can generated design images be used as frontend implementation references?▼

Yes. Each image is required to communicate layout, hierarchy, spacing, typography scale, CTA priority, and component styling clearly enough that a developer or coding model can build from it directly.

How do I keep multiple generated section images visually consistent?▼

Enforce one palette, one type scale, one CTA family, and one image treatment across all frames while varying only composition anchors, background modes, and section density. This Skill's continuity rule defines exactly which attributes may vary.