imagegen-frontend-web

Translate design briefs into per-section horizontal frontend image references.

16|3|Updated May 5, 2026

Search Tags:#landing-page #frontend-design #brand-consistency #visual-communication #design-references #image-direction #hero-imagery

Ready to run

npx skills add https://github.com/Kevin-Liu-01/Agent-Machines --skill imagegen-frontend-web-kevin-liu-01

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: imagegen-frontend-web
Source: https://github.com/Kevin-Liu-01/Agent-Machines/tree/main/knowledge/skills/taste-imagegen-web
Command: npx skills add https://github.com/Kevin-Liu-01/Agent-Machines --skill imagegen-frontend-web-kevin-liu-01

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Elite frontend image-direction skill for generating premium, conversion-aware website design references. CRITICAL OUTPUT RULE — generate ONE separate horizontal image FOR EVERY section. A landing page with 8 sections produces 8 images. Never compress multiple sections into one image. Enforces composition variety (not always left-text / right-image hero pattern), background-image freedom, varied CTAs, varied hero scales (giant / mid / mini minimalist), narrative concept spine, second-read moments, and a single consistent palette across all images. Optimized for landing pages, marketing sites, and product comps that developers or coding models can accurately recreate.

Core Features & Use Cases

One image per section with strict section separation for frontend reference
Consistent brand palettes and typography across sections
Art-directed hero and imagery guidance suitable for production handoff

Quick Start

Provide a design brief and brand palette to generate eight per-section horizontal hero images.

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 consistent landing page hero imagery for a multi-section frontend design?▼

To generate consistent landing page hero imagery, provide a design brief and brand palette to produce one separate horizontal image per section. This ensures unified palette, typography, and visual treatment across all 6-8 sections for a cohesive frontend design reference.

Can I get individual section images instead of a single mockup for a website design reference?▼

Yes, the output enforces strict section separation by generating one individual horizontal image for every section. A landing page with 8 sections produces 8 distinct images, preventing multiple sections from being compressed into a single visual frame.

What is the best way to art direct hero composition variety for a frontend web design brief?▼

The best way to art direct hero composition variety is to specify varied hero scales and non-standard layouts. The process avoids repetitive left-text or right-image patterns, applying varied CTA placements and minimalist framing cues to the visual communication.

Does this frontend image direction process support design-to-code handoff for developers?▼

Yes, the process supports design-to-code handoff by outputting production-ready framing cues and narrative concepts. Developers or coding models receive section-specific horizontal images with consistent visual communication suitable for accurate website recreation.

How do I ensure brand consistency across multiple sections of a landing page design comp?▼

To ensure brand consistency across multiple sections, apply a single consistent palette and typography treatment across all generated images. The per-section image direction translates the brief into unified visual references for the entire marketing site.

What happens if my landing page design brief contains more or fewer than 8 sections?▼

The image direction process is optimized for landing page style briefs with 6-8 sections. It will generate one separate horizontal image per section provided, ensuring every section receives its own distinct visual reference regardless of the exact count.