imagegen-frontend-web

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

Updated Jul 16, 2026
One-click install
npx skills add https://github.com/optimaxin/Tredev_Gems --skill imagegen-frontend-web-optimaxin
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: imagegen-frontend-web
Source: https://github.com/optimaxin/Tredev_Gems/tree/main/agent/skills/imagegen-frontend-web
Command: npx skills add https://github.com/optimaxin/Tredev_Gems --skill imagegen-frontend-web-optimaxin

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 multi-section output. This Skill enforces disciplined art direction so generated images look like premium, codeable frontend design comps. ## Core Features & Use Cases - One Image Per Section: Generates a separate horizontal image for every page section (hero, features, pricing, CTA), never collapsing sections 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 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 reference images 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 a multi-section landing page design with AI images?

Request the page type and section count, and the skill generates one horizontal image per section, labeled sequentially. A landing page defaults to 6 sections and a full website template to 8 sections.

What image format and aspect ratio do website design references use?

Each section renders as a separate horizontal image in 16:9, 16:10, or 21:9 depending on density. Heroes typically use 16:9 or 21:9, while narrower content sections may use 16:10.

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

Yes, each image communicates layout, hierarchy, spacing, typography scale, CTA priority, and component styling. A developer or coding model can read the image and implement the design directly.

How does the skill avoid generic AI-looking website designs?

It uses a combinatorial variation engine covering theme, typography, hero architecture, and section anchors, plus explicit bans on purple-blue gradients, blob clutter, cloned card rows, and default left-text right-image heroes.

Does the skill keep branding consistent across multiple section images?

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

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

Avoid them when the brief asks for minimalist, clean, or typography-only directions, where solid surfaces and negative space are preferred. Background treatments must always match the brief rather than a fixed recipe.