imagegen-frontend-web

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

Updated Jun 9, 2026
One-click install
npx skills add https://github.com/timikalo7/Execute --skill imagegen-frontend-web-timikalo7
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: imagegen-frontend-web
Source: https://github.com/timikalo7/Execute/tree/main/.claude/skills/imagegen-frontend-web
Command: npx skills add https://github.com/timikalo7/Execute --skill imagegen-frontend-web-timikalo7

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated website design references often collapse into repetitive defaults like left-text/right-image heroes, purple-blue gradients, and single tall page slices that developers cannot accurately implement. This Skill enforces disciplined art direction so every generated image is a buildable, on-brand frontend design comp. ## Core Features & Use Cases - One image per section: Generates a separate horizontal image for every page section (hero, features, 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 generic 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 through CTA) that a developer or coding model can directly recreate in code. ## 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, then generate one horizontal image per section rather than a single tall page. This Skill defaults a landing page to 6 sections and a full website to 8, labeling each frame by section name.

How many images should a landing page design have?

One image per section, always. A landing page with no specified count defaults to 6 sections producing 6 images, a full website defaults to 8, and a 12-section page produces 12 separate horizontal frames.

How do I avoid generic AI-looking website designs?

Vary the hero composition away from the default left-text/right-image layout, ban purple-blue gradient slop and floating blobs, and pick a deliberate combination of theme paradigm, typography character, and section anchors. This Skill encodes those rules as a checklist.

Can generated design images be used directly by developers?

Yes, when each image clearly communicates layout, hierarchy, spacing, typography scale, and component styling. This Skill targets high implementation clarity so a developer or coding model can rebuild the design from the frames.

How do I keep multiple generated section images visually consistent?

Lock one palette, type scale, CTA family, border radius language, and image treatment across all frames while varying only composition anchors and background modes per section. The Skill's continuity rule enforces this single-brand-world constraint.