skills.rest
w0lzard
w0lzardCOMMUNITY
Explore all skills by this author →
GitHub

imagegen-frontend-web

Generates one horizontal website design reference image per page section.

Updated Jul 1, 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/w0lzard/Wolzard-s-Marketplace --skill imagegen-frontend-web-w0lzard
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: imagegen-frontend-web
Source: https://github.com/w0lzard/Wolzard-s-Marketplace/tree/main/plugins/personal-skills/skills/imagegen-frontend-web
Command: npx skills add https://github.com/w0lzard/Wolzard-s-Marketplace --skill imagegen-frontend-web-w0lzard

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated website design references often collapse into repetitive defaults: a single tall page image, left-text/right-image heroes, purple-blue gradients, and generic card layouts. This Skill enforces disciplined art direction so generated images look like premium, codeable frontend design comps. ## Core Features & Use Cases - One image per section: A landing page with 8 sections produces 8 separate horizontal images, never one combined tall slice. - Art-direction engine: Combinatorial picks for theme, typography, hero architecture, background mode, CTA style, and narrative spine keep output varied and brand-consistent. - Anti-slop rules: Bans AI gradient clichés, fake brand names, generic copy, and over-dense layouts while enforcing palette and spacing consistency across all frames. - Use Case: Ask for a landing page for a SaaS product and receive 6 labeled 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 premium fintech product with 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 consistent palette, typography, and CTA styling. A landing page defaults to 6 sections and 6 images, each labeled by section name.

How many images does a landing page design produce?▼

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 I use generated design images as references for coding a website?▼

Yes, each image is optimized for implementation clarity, communicating layout, hierarchy, spacing, typography scale, and component styling. A developer or coding model should be able to build the section directly from the image.

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

The skill bans default patterns like purple-blue gradients, left-text/right-image heroes, fake brand names, and repeated card rows. It forces varied composition anchors, background modes, and a single consistent palette across all sections.

What styles does the website image generation support?▼

It adapts to briefs including minimalist, editorial, cinematic, SaaS, agency, and e-commerce directions. Each style maps to specific hero scales, background modes, gradient rules, and composition choices defined in the skill.

Related Skills

Explore More Design & Creative Skills→
iljazimakovsiljazimakovs

branding-generator

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

Community
Advanced
misty-stepmisty-step
13

image-taste-frontend

Convert design images into HTML/CSS/JS frontend code with extracted typography and layout.

Official
Advanced
Superreal-ioSuperreal-io
1

Principios de Copywriting - Movistar

Applies nine creative copywriting principles and standard ad piece structure for Movistar campaigns.

Official
Intermediate
Samind-SamindSamind-Samind

gen-feature-journey

Generates feature list and user journey documents from system design specs via a sub-agent.

Community
Intermediate