skills.rest
divinaarmuela
divinaarmuelaCOMMUNITY
Explore all skills by this author →
GitHub

imagegen-frontend-web

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

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

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 gradients, and layouts developers cannot accurately rebuild. 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, trust bar, features, pricing, CTA), never collapsing the page into one frame. - Combinatorial art direction: Selects theme paradigm, typography character, hero architecture, composition anchors, background modes, and CTA styles to avoid generic AI-looking output. - Brand consistency across frames: Enforces one palette, type scale, CTA family, 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 through CTA) that a developer or coding model can directly implement. ## 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 a landing page design as multiple images?▼

Request a landing page and the skill produces one horizontal image per section, defaulting to 6 sections for a landing page or 8 for a full website. Each image is labeled by section, such as "Section 1 of 8: Hero", and rendered sequentially in the same response.

What image format and aspect ratio do website design comps use?▼

Each section is rendered as a horizontal image in 16:9, 16:10, or 21:9 depending on content density. Heroes typically use 16:9 or 21:9, while narrower content sections may use 16:10. Multiple sections are never combined into one tall frame.

Can developers implement designs from generated reference images?▼

Yes, each image is created as a frontend reference that clearly communicates layout, hierarchy, spacing, typography scale, CTA priority, and component styling. The skill targets high implementation clarity so a developer or coding model can rebuild the design from the images.

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

It uses a combinatorial variation engine that picks distinct theme paradigms, typography characters, hero architectures, composition anchors, and background modes per page. It also bans common AI slop like purple-blue gradients, floating blobs, cloned card rows, and default left-text/right-image heroes.

How many images are generated for a full website design?▼

A full website or marketing site defaults to 8 sections and therefore 8 images, while a 12-section page produces 12 images. The count always equals the number of sections, and the skill never returns fewer images than sections.

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 request is for abstract mood art rather than implementable design comps. The skill defaults to website design comps and is not intended for random mood imagery.

Related Skills

Explore More Design & Creative Skills→
fnf-ax-teamfnf-ax-team
1

discovery-technical-utility-yosuke-aizawa

Generate cohesive visual direction briefs for Discovery's technical-utility outdoor aesthetic.

Official
Basic
coldtercoldter

imagegen-frontend-web

Generate one horizontal image per landing page section with consistent palette.

Community
Advanced
letxbrace-droidletxbrace-droid

imagegen-frontend-web

Generate horizontal frontend website section reference images with consistent brand styling.

Community
Advanced
m2ai-portfoliom2ai-portfolio
4

image-to-implementation

Generate a reference image and structured implementation prompt for UI coding.

Official
Intermediate