imagegen-frontend-web

Generates one horizontal website design reference image per page section.

Updated Aug 11, 2026
One-click install
npx skills add https://github.com/Debindenny/travelplanner-community- --skill imagegen-frontend-web-debindenny
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: imagegen-frontend-web
Source: https://github.com/Debindenny/travelplanner-community-/tree/main/travel-planner/agent/skills/imagegen-frontend-web
Command: npx skills add https://github.com/Debindenny/travelplanner-community- --skill imagegen-frontend-web-debindenny

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated website design references often collapse into repetitive, generic layouts or a single tall image that developers cannot accurately implement. This Skill enforces disciplined art direction so every section of a landing page or marketing site is produced as its own clear, buildable design comp. ## Core Features & Use Cases - One Image Per Section: Generates a separate horizontal image for every section, so an 8-section landing page produces 8 distinct frames instead of one collapsed slice. - Art Direction System: Applies a combinatorial variation engine covering theme, typography, hero architecture, background modes, CTA styles, and narrative concept to avoid generic AI-looking output. - Multi-Image Consistency: Enforces one palette, type scale, CTA family, and image treatment across all frames so the sections read as a single brand. - Use Case: Ask for a landing page for a premium SaaS product and receive six labeled horizontal section images (hero, trust bar, features, showcase, testimonials, CTA) that a developer or coding model can directly recreate. ## Quick Start Generate a landing page design for a premium travel booking site with 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, and the skill produces one horizontal image per section with consistent palette and typography. A landing page request defaults to six sections, each rendered as its own labeled frame.

How many images are generated for a landing page design?▼

One image is generated per section, always. A landing page with no specified count defaults to 6 sections and 6 images, a full website template defaults to 8, and a 12-section page produces 12 separate horizontal images.

Can the generated design images be used by developers to build the site?▼

Yes, each image is created as an implementation-friendly frontend reference showing layout, hierarchy, spacing, typography scale, and component styling. A developer or coding model should be able to reconstruct the design directly from the frames.

How does it avoid generic AI-looking website designs?▼

It uses a combinatorial variation engine that commits to specific theme, typography, hero architecture, and section rhythm choices, while banning common AI patterns like purple-blue gradients, cloned card rows, and default left-text right-image heroes.

Does it keep branding consistent across multiple section images?▼

Yes, all per-section frames share one palette, type scale, CTA family, border radius language, and image treatment. Only composition anchors, background modes, and section density vary, so every frame reads as one brand.