skills.rest
KlyrhonMiko
KlyrhonMikoCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

imagegen-frontend-web

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

Updated Aug 25, 2026
Search Tags:#landing page#image generation#web design#ui design#art direction#frontend reference#design comps
One-click install
npx skills add https://github.com/KlyrhonMiko/kly-skills --skill imagegen-frontend-web-klyrhonmiko
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: imagegen-frontend-web
Source: https://github.com/KlyrhonMiko/kly-skills/tree/main/data/skills/imagegen-frontend-web
Command: npx skills add https://github.com/KlyrhonMiko/kly-skills --skill imagegen-frontend-web-klyrhonmiko

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI image generation for web design often collapses into repetitive defaults like left-text/right-image heroes, purple gradients, and single tall page slices, producing references that developers cannot accurately recreate. ## Core Features & Use Cases - Per-Section Image Output: Enforces one separate horizontal image per page section, so an 8-section landing page yields 8 consistent frames instead of one compressed collage. - Combinatorial Art Direction Engine: Selects theme paradigm, typography character, hero architecture, section system, and signature components to produce varied, non-generic compositions. - Brand Consistency Rules: Maintains one palette, type scale, CTA family, and image treatment across all generated frames so they read as a single site. - Use Case: Ask for a premium SaaS landing page and receive six labeled horizontal section images (hero, trust bar, features, showcase, testimonials, CTA) that a developer or coding model can directly implement. ## Quick Start Generate a landing page design for a fintech product with 8 sections, 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 with consistent palette, typography, and CTA styling so each frame can be implemented directly as frontend code.

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

One image per section, always. A landing page request without a count defaults to 6 sections and 6 images, while a full website template defaults to 8 sections and 8 images, each rendered as a separate horizontal frame.

Can the generated design images be used by coding models?▼

Yes, each image is optimized for implementation clarity, communicating layout, hierarchy, spacing, typography scale, and component styling. A developer or coding model can look at a frame and understand how to build that section.

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

The skill bans common AI slop patterns like purple-blue gradients, floating blobs, cloned card rows, and default left-text/right-image heroes. It uses a combinatorial variation engine to pick distinctive themes, typography, and composition anchors per project.

What image formats and aspect ratios are used for section images?▼

All section images are horizontal, using 16:9, 16:10, or 21:9 aspect ratios depending on content density. Heroes typically use 16:9 or 21:9, while narrower content sections may use 16:10.

Related Skills

Explore More Design & Creative Skills→
iljazimakovsiljazimakovs

branding-generator

Generate three brand directions with color palettes, typography, and mood.

Community
Advanced
AbsolutelySkilledAbsolutelySkilled
207

figma-to-code

Convert Figma design frames into HTML, CSS, and React components.

Official
Advanced
edisonabeledisonabel

ckm:brand

Manage brand identity, voice, messaging, and asset consistency.

Community
Advanced
gokul12072006gokul12072006

banner-design

Design social media, ad, and print banners with AI-generated visuals and HTML/CSS.

Community
Intermediate