imagegen-frontend-web

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

1|Updated Jan 10, 2024
One-click install
npx skills add https://github.com/noemdb/cfla --skill imagegen-frontend-web-noemdb
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: imagegen-frontend-web
Source: https://github.com/noemdb/cfla/tree/main/.agents/skills/imagegen-frontend-web
Command: npx skills add https://github.com/noemdb/cfla --skill imagegen-frontend-web-noemdb

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated website design references often collapse into repetitive, generic layouts with default hero patterns, AI-slop gradients, and inconsistent branding across sections. This Skill enforces disciplined art direction so generated design comps look premium, varied, and directly implementable by developers. ## Core Features & Use Cases - One Image Per Section: Generates a separate horizontal image for every page section (hero, features, testimonials, pricing, CTA), never collapsing the page into a single tall frame. - Combinatorial Variation Engine: Selects theme paradigm, typography character, hero architecture, section anchors, background modes, and CTA styles to avoid repetitive 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 faithfully recreate. ## 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. A landing page defaults to 6 sections and 6 images; a full website defaults to 8 sections and 8 images.

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

One separate horizontal image is generated per section, always. A landing page with no specified count defaults to 6 sections producing 6 images, while a full website template defaults to 8 sections and 8 images.

Can the generated design images be used by developers to build the site?▼

Yes, each image is a frontend reference that clearly communicates layout, hierarchy, spacing, typography scale, CTA priority, and component styling. A developer or coding model should be able to implement the design directly from the frames.

How does it avoid generic AI-looking website designs?▼

It uses a combinatorial variation engine that picks distinct theme paradigms, typography characters, hero architectures, and section anchors, while banning AI-slop patterns like purple-blue gradients, floating blobs, and cloned left-text right-image blocks.

Does it keep branding consistent across multiple section images?▼

Yes, all per-section frames share one palette, typography family, CTA family, border radius language, and image treatment. Only composition anchors, background modes, and section density vary between frames.

What image format and aspect ratio does it output?▼

All images are horizontal, using 16:9, 16:10, or 21:9 aspect ratios depending on section density. Heroes typically use 16:9 or 21:9, and each frame contains exactly one section, never a full-page tall slice.