skills.rest
dwaynimay
dwaynimayCOMMUNITY
Explore all skills by this author →
GitHub

imagegen-frontend-web

Generate conversion-aware frontend design reference images for landing page sections.

1|Updated Apr 27, 2026
Search Tags:#typography#landing page#image generation#frontend design#art direction#UI composition#conversion design
One-click install
npx skills add https://github.com/dwaynimay/IoTProject --skill imagegen-frontend-web-dwaynimay
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: imagegen-frontend-web
Source: https://github.com/dwaynimay/IoTProject/tree/main/.agents/skills/imagegen-frontend-web
Command: npx skills add https://github.com/dwaynimay/IoTProject --skill imagegen-frontend-web-dwaynimay

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It turns vague website and landing-page design ideas into concrete, frontend-implementable section-by-section image direction that a developer can reliably recreate.

Core Features & Use Cases

  • Section-accurate image art direction: produces one separate horizontal image per requested section (e.g., an 8-section landing page yields 8 images), preserving layout, hierarchy, spacing, and CTA priority.
  • Premium, conversion-aware frontend references: enforces art-directed composition variety, readable typography scale, and structured section “jobs” (hook → proof → educate → convert) instead of generic AI visuals.
  • Consistent brand system across a whole page: maintains a single palette, typography logic, and image treatment world across all per-section frames while still varying composition anchors and background modes.

Quick Start

Use the imagegen-frontend-web skill to generate a full landing page by requesting 8 sections and specifying your brand palette, target audience, and primary conversion action.

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 frontend design references for a landing page?▼

Generate conversion-aware frontend design references by specifying your brand palette, target audience, and conversion action. The output provides one horizontal image per requested section, ensuring consistent typography and layout guidance for developers.

What is conversion-aware art direction for website design?▼

Conversion-aware art direction structures section visuals by their jobs: hook, proof, educate, and convert. It enforces readable typography scales and structured section layouts to produce premium frontend references instead of generic AI visuals.

Can I maintain a consistent brand system across multiple landing page sections?▼

Yes, you can maintain a consistent brand system across an entire page. The generation process preserves a single palette, typography logic, and image treatment world across all per-section frames while varying composition anchors and backgrounds.

How do I create UI composition images that developers can actually implement?▼

Create implementable UI composition images by enforcing explicit constraints for hero composition, spacing rhythm, CTAs, and readable hierarchy. This provides developers with structured, frontend-friendly layout guidance for marketing sites.

Are there limitations to generating landing page design images section by section?▼

A key constraint is that the system enforces one horizontal image per requested section. It is specifically designed for marketing sites, product landing pages, and UI/UX concept comps rather than complex interactive web application dashboards.

Related Skills

Explore More Design & Creative Skills→
RenyEnnosRenyEnnos
1

design-md

Generate DESIGN.md design-system documentation from Stitch project assets.

Community
Advanced
SaltFishGCSaltFishGC

imagegen-frontend-web

Generate horizontal website section reference images from a frontend brief.

Community
Advanced
inbharataiinbharatai
22

frontend-design

Design and implement pixel-perfect frontend interfaces with HTML, CSS, and Tailwind.

Community
Intermediate
stacksjsstacksjs
2

stacks-imagegen-web

Generate horizontal frontend design reference images for Stacks application website sections.

Official
Advanced