imagegen-frontend-web

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

Updated Jul 10, 2026
One-click install
npx skills add https://github.com/AvaTar-ArTs/.Agent-skills --skill imagegen-frontend-web-avatar-arts
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: imagegen-frontend-web
Source: https://github.com/AvaTar-ArTs/.Agent-skills/tree/main/skills/taste-skill/skills/imagegen-frontend-web
Command: npx skills add https://github.com/AvaTar-ArTs/.Agent-skills --skill imagegen-frontend-web-avatar-arts

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated website design references often collapse into repetitive defaults like left-text/right-image heroes, purple-blue gradients, and single tall page slices that developers cannot accurately implement. This Skill enforces disciplined art direction so every generated image is a premium, codeable frontend design comp. ## Core Features & Use Cases - One Image Per Section: Generates a separate horizontal image for every page section (hero, features, pricing, CTA), never collapsing multiple sections into one frame. - Combinatorial Variation Engine: Selects theme paradigms, typography characters, hero architectures, background modes, and CTA styles to avoid generic AI-looking layouts. - Brand Consistency Across Frames: Enforces one palette, type scale, 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 labeled horizontal design comps (hero, trust bar, features, showcase, benefits, testimonials, pricing, CTA) that a developer or coding model can directly recreate. ## 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 website design references with AI image generation?

Describe the site type and brand mood, and the skill produces one horizontal image per section with art-directed layout, typography, and imagery. A landing page request defaults to 6 sections, producing 6 separate labeled images.

How many images does 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 template defaults to 8, and a 12-section page produces 12 separate horizontal frames.

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

Yes, each image is a frontend reference that clearly communicates layout, hierarchy, spacing, typography scale, CTA priority, and component styling. A developer or coding model should be able to implement the design directly from the frames.

How does it avoid generic AI-looking website designs?

It uses a combinatorial variation engine that picks distinct theme paradigms, hero architectures, background modes, and composition anchors per section. It explicitly bans purple-blue gradients, floating blobs, 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, typography family, CTA identity, border radius language, and image treatment. Only composition anchors, background modes, and section density vary between frames.

When should I not use this image generation approach?

Avoid it when you need actual code output rather than visual references, or when the request is for abstract mood art rather than implementable website comps. It defaults to structured frontend design, not freeform illustration.