imagegen-frontend-web

Generates one horizontal website design reference image per page section with consistent art direction.

Updated May 21, 2025
One-click install
npx skills add https://github.com/nielslataire/Group-LN --skill imagegen-frontend-web-nielslataire
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: imagegen-frontend-web
Source: https://github.com/nielslataire/Group-LN/tree/main/.agents/skills/imagegen-frontend-web
Command: npx skills add https://github.com/nielslataire/Group-LN --skill imagegen-frontend-web-nielslataire

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 gradient slop, and inconsistent styling across sections. 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 a single tall slice. - 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 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, Trust bar, Features, Product showcase, Benefits, Testimonials, Pricing, 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 website design references with AI image generation?▼

Describe the site type, brand mood, and section count, and the skill produces one horizontal design comp per section. Each image shows layout, typography scale, spacing, and CTA priority clearly enough for a developer to implement.

How many images are generated for a landing page?▼

One image per section, always. A landing page request with no count defaults to 6 sections and 6 images; a full website template defaults to 8 sections and 8 images. Multiple sections are never combined into a single tall image.

Can I control the design style of the generated website comps?▼

Yes. Brief keywords like minimalist, editorial, cinematic, SaaS, agency, or e-commerce adjust hero scale, background mode, gradient use, and composition. Explicit user direction always overrides the built-in baseline configuration.

Does it avoid generic AI-looking website designs?▼

Yes. It bans purple-blue AI gradients, floating blobs, cloned left-text/right-image heroes, fake dashboards, and generic copy words. A combinatorial engine varies theme, typography, anchors, and background modes across sections.

What are the limitations of image-based website design references?▼

The output is static design comps, not working code or interactive prototypes. Text rendered inside images may be imperfect, so final copy and responsive behavior must be implemented by a developer or coding model.