imagegen-frontend-web

Generates per-section horizontal website design reference images with consistent art direction.

Updated Aug 12, 2026
One-click install
npx skills add https://github.com/brunoolf/frontend-craft --skill imagegen-frontend-web-brunoolf
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: imagegen-frontend-web
Source: https://github.com/brunoolf/frontend-craft/tree/main/skills/imagegen-web
Command: npx skills add https://github.com/brunoolf/frontend-craft --skill imagegen-frontend-web-brunoolf

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated website design references often collapse into repetitive defaults: left-text/right-image heroes, purple-blue gradients, cloned card sections, and single tall images that cram an entire page into one frame. This Skill enforces disciplined art direction so generated design comps look premium, varied, and directly implementable by developers or coding models. ## Core Features & Use Cases - One image per section: A landing page with 8 sections produces 8 separate horizontal images, never one collapsed tall slice, with sequential labeled output when only one image can render at a time. - Combinatorial variation engine: Picks theme paradigm, background mode, typography character, hero architecture, composition anchors, CTA styles, and a narrative concept spine, then commits to one consistent palette across all frames. - Anti-AI-slop rules: Bans generic copy ("unleash", "revolutionize"), fake brand names, gradient-text shortcuts, blob clutter, and default hero layouts, while enforcing spacing, rhythm, and conversion-aware section structure. - Use Case: Ask for a landing page for a premium SaaS product and receive 6-8 labeled section images (hero, trust bar, features, showcase, testimonials, pricing, CTA) that share one brand world and can be handed directly to a developer to recreate in code. ## Quick Start Generate a landing page design for my SaaS product with one horizontal image per section, using a cinematic dark theme and varied hero composition.

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 needs in your prompt. The skill produces one horizontal image per section, defaulting to 6 sections for a landing page and 8 for a full website, each labeled sequentially.

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. Multiple sections are never combined into a single tall frame.

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

The skill bans common AI tells: purple-blue gradients, left-text/right-image hero defaults, blob clutter, gradient headline text, and generic copy like "unleash" or "revolutionize". It varies composition anchors, background modes, and CTA styles across sections.

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, so a developer or coding model can implement it directly.

Does the style stay consistent across multiple section images?▼

Yes. All frames share one palette, typography family, CTA identity, image treatment, and tonal voice. Only composition anchors, background modes, and section density vary, so the frames read as one brand.

When should I not use full-bleed image backgrounds in web design comps?▼

Skip them when the brief asks for minimalist, clean, or typography-only directions. The brief-to-direction mapping overrides defaults, so restrained briefs get solid surfaces and generous negative space instead.