imagegen-frontend-web

Generates one horizontal website design reference image per page section.

Updated May 9, 2026
One-click install
npx skills add https://github.com/Aeonxuu/southtownslandservice_v2 --skill imagegen-frontend-web-aeonxuu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: imagegen-frontend-web
Source: https://github.com/Aeonxuu/southtownslandservice_v2/tree/main/.agents/skills/imagegen-frontend-web
Command: npx skills add https://github.com/Aeonxuu/southtownslandservice_v2 --skill imagegen-frontend-web-aeonxuu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI image generation for websites often collapses into repetitive defaults: a single tall page screenshot, cloned left-text/right-image heroes, purple-blue gradients, and generic card grids that developers cannot reliably recreate. This Skill enforces disciplined art direction so every section of a landing page or marketing site is produced as its own consistent, implementation-ready design comp. ## Core Features & Use Cases - One image per section: A landing page with 8 sections produces 8 separate horizontal images, never one combined tall slice, with each frame labeled by section. - Combinatorial variation engine: Selects theme paradigm, typography character, hero architecture, section system, background mode, CTA style, and narrative spine per brief to avoid AI-looking repetition. - Brand consistency across frames: Enforces one palette, type scale, CTA family, and image treatment across all per-section images so they read as a single site. - Use Case: Ask for an 8-section SaaS landing page and receive 8 horizontal comps (hero, trust bar, features, showcase, benefits, testimonials, pricing, CTA) that a developer or coding model can directly implement. ## Quick Start Generate an 8-section landing page design for a premium SaaS 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 a landing page design as multiple images?▼

Request a landing page and specify the section count; the Skill generates one separate horizontal image per section, labeled sequentially. A landing page with no count defaults to 6 sections and 6 images, while a full website template defaults to 8.

What image format and aspect ratio do website design comps use?▼

Each section renders as its own horizontal image in 16:9, 16:10, or 21:9 depending on content density. Heroes typically use 16:9 or 21:9, and narrower content sections may use 16:10.

Can AI-generated website designs be consistent across multiple images?▼

Yes, the Skill enforces one brand world across all frames: same palette, typography scale, CTA family, border radius language, and image treatment. Only composition anchors, background modes, and section density vary per section.

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

The Skill bans common AI slop patterns like purple-blue gradients, floating blobs, cloned card rows, and default left-text/right-image heroes. It uses a combinatorial variation engine that commits to distinct theme, typography, hero architecture, and section system choices per brief.

What are the limitations of image-based frontend design references?▼

The output is static visual comps, not code; a developer or coding model must interpret layout, spacing, and typography from the images. Motion and interaction are only implied visually through composition cues, not delivered as working behavior.