imagegen-frontend-web

Generates one horizontal website design reference image per page section with consistent art direction.

Updated Mar 4, 2026
One-click install
npx skills add https://github.com/gmolike/Claude-Template --skill imagegen-frontend-web-gmolike
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: imagegen-frontend-web
Source: https://github.com/gmolike/Claude-Template/tree/main/.agents/skills/imagegen-frontend-web
Command: npx skills add https://github.com/gmolike/Claude-Template --skill imagegen-frontend-web-gmolike

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated website design references often collapse into repetitive defaults: a single tall page image, cloned left-text/right-image heroes, purple-blue gradient slop, and inconsistent styling across sections. This Skill enforces disciplined art direction so every section of a landing page or marketing site is produced as its own coherent, 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 collapsed tall slice. - 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 rules: Enforces a single palette, type scale, CTA family, and image treatment across all per-section frames. - 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 minimalist portfolio 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 in your prompt. The skill produces one horizontal image per section, defaulting to 6 sections for a landing page and 8 for a full website, each labeled sequentially.

How many images are generated for a landing page design?

One separate horizontal image is generated per section, always. A landing page request with no count defaults to 6 sections and 6 images; a full website defaults to 8 sections and 8 images.

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

Yes, each image is composed to clearly communicate layout, hierarchy, spacing, typography scale, CTA priority, and component styling. A developer or coding model should be able to recreate the design directly from the frames.

How does the skill avoid generic AI-looking website designs?

It uses a combinatorial variation engine covering theme paradigms, typography characters, hero architectures, and section anchors, plus explicit anti-slop rules banning default purple-blue gradients, cloned card rows, and overused left-text/right-image heroes.

Does the skill keep styling 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 between frames.

When should I not use per-section image generation for web design?

Avoid it when you need actual code output rather than visual references, or when the brief demands a single moodboard-style exploration. The skill produces design comps, not HTML, CSS, or component implementations.