imagegen-frontend-web

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated website design references often collapse into repetitive defaults: a single tall page image, left-text/right-image heroes, purple-blue gradients, and inconsistent styling across sections. This Skill enforces disciplined art direction so every section of a landing page or marketing site is produced as its own coherent, implementation-ready design comp. ## Core Features & Use Cases - One image per section: A landing page with 8 sections produces 8 separate horizontal images, never one combined tall slice. - 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 rules: Enforces a single palette, type scale, CTA family, and image treatment across all per-section frames. - Use Case: Ask for a landing page for a SaaS product and receive six labeled horizontal section images (hero, trust bar, features, showcase, testimonials, CTA) that a developer or coding model can directly recreate. ## Quick Start Ask the AI to generate a landing page design for your product, specifying the number of sections or letting it default to six, and receive one horizontal reference 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 and brand mood, and the skill produces one horizontal image per section with controlled art direction. A landing page defaults to six sections, each rendered as its own implementation-ready design comp.

How many images does a landing page request produce?

One image per section, always. An unspecified landing page defaults to 6 sections and 6 images, a full website template defaults to 8, and a 12-section request produces 12 separate horizontal images.

Can developers use these generated images as build references?

Yes. Each image is designed to communicate layout, hierarchy, spacing, typography scale, CTA priority, and component styling clearly enough for a developer or coding model to recreate the section in code.

How does it avoid generic AI-looking website designs?

It uses a combinatorial variation engine covering theme paradigms, hero architectures, composition anchors, and background modes, plus explicit bans on purple-blue gradients, blob clutter, cloned card rows, and default left-text/right-image heroes.

Does it keep styling consistent across multiple section images?

Yes. All 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.

When should I not use this image generation approach?

Avoid it when you need actual production code rather than visual references, or when the request is for abstract mood art rather than structured frontend design comps. It outputs design direction images, not HTML or CSS.