skills.rest
cloudofgeorge
cloudofgeorgeCOMMUNITY
Explore all skills by this author →
Website𝕏@cloudofgeorgeGitHub

imagegen-frontend-web

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

Updated May 11, 2026
Search Tags:#landing page#image generation#web design#art direction#ui mockup#frontend reference#design comps
One-click install
npx skills add https://github.com/cloudofgeorge/AI-hands-Engineer --skill imagegen-frontend-web-cloudofgeorge
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: imagegen-frontend-web
Source: https://github.com/cloudofgeorge/AI-hands-Engineer/tree/main/skills/design/imagegen-frontend-web
Command: npx skills add https://github.com/cloudofgeorge/AI-hands-Engineer --skill imagegen-frontend-web-cloudofgeorge

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated website design references often collapse into repetitive, generic layouts—default left-text/right-image heroes, purple-blue gradients, and cloned card sections. This Skill enforces disciplined art direction so generated frontend design images look premium, varied, and directly implementable by developers or coding models. ## Core Features & Use Cases - Per-Section Image Output: Generates one separate horizontal image for every page section (hero, trust bar, features, pricing, CTA), never collapsing multiple sections into a single frame. - 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 Enforcement: Maintains one palette, type scale, CTA family, and image treatment across all per-section frames so the full page reads as a single site. - Use Case: Ask for an 8-section SaaS landing page and receive 8 labeled horizontal design comps—hero through CTA—that a developer can directly recreate in code. ## 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, brand mood, and section count, then generate one horizontal image per section rather than a single tall page. This Skill defaults a landing page to 6 sections and a full website to 8, labeling each frame sequentially.

How many images should a landing page design generate?▼

One image per section, always. A landing page with no specified count defaults to 6 sections producing 6 images; a full website defaults to 8 sections producing 8 images. Multiple sections are never combined into one frame.

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

Vary composition anchors across sections instead of defaulting to left-text/right-image heroes, ban purple-blue gradient slop and floating blobs, and commit to one controlled palette with deliberate typography. This Skill enforces at least 3 different section anchors per page.

Can generated design images be used directly by developers?▼

Yes, when images clearly communicate layout, hierarchy, spacing, typography scale, and component styling. This Skill sets implementation clarity to 9 out of 10 so each frame functions as a codeable UI reference rather than abstract mood art.

What image format and aspect ratio works for website section mockups?▼

Horizontal frames at 16:9, 16:10, or 21:9 work best, with heroes typically at 16:9 or 21:9 and narrower content sections at 16:10. Each image renders exactly one section in high fidelity.

When should I not use full-bleed background images in web design?▼

Skip full-bleed treatments when the brief asks for minimalist, clean, or typography-only directions. Use solid surfaces, subtle textures, and generous negative space instead, reserving atmospheric backgrounds for cinematic or luxury briefs.

Related Skills

Explore More Design & Creative Skills→
mm88nl-webmm88nl-web

brand-identity

Generate a visual identity brief covering logo direction, color palette, typography, and imagery style.

Community
Intermediate
go-musicfoxgo-musicfox
2.6k

om-ux-setup

Extracts a repository's design tokens, components, and screen archetypes into a committed .uxproof/ contract.

Official
Intermediate
ecomm360-slecomm360-sl

copywriting

Generate structured marketing page copy with headlines, CTAs, and SEO metadata.

Official
Advanced
Sir-chawakornSir-chawakorn
33

screenshot-to-code

Convert UI screenshots and design mockups into HTML, CSS, and React components.

Community
Intermediate