skills.rest
Rayzerrek
RayzerrekCOMMUNITY
Explore all skills by this author →
GitHub

imagegen-frontend-web

Generate section-by-section frontend design references from landing page briefs.

Updated Jan 30, 2026
Search Tags:#image generation#landing pages#frontend design#art direction#conversion design#website comps
One-click install
npx skills add https://github.com/Rayzerrek/dotfiles --skill imagegen-frontend-web-rayzerrek
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: imagegen-frontend-web
Source: https://github.com/Rayzerrek/dotfiles/tree/main/.pi/agent/skills/imagegen-frontend-web
Command: npx skills add https://github.com/Rayzerrek/dotfiles --skill imagegen-frontend-web-rayzerrek

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill turns website briefs into high-end frontend image references that clearly communicate layout, hierarchy, spacing, typography, and visual rhythm for landing pages, marketing sites, and product experiences.

Core Features & Use Cases

  • Section-by-section generation: Produces one separate horizontal image for each requested section instead of collapsing a page into a single composite.
  • Art-directed web composition: Encourages varied hero structures, background modes, and CTA treatments to avoid repetitive left-text/right-image layouts.
  • Conversion-aware design references: Balances premium visual direction with clear funnels, believable copy structure, and implementation-friendly UI cues.
  • Use Case: A designer or coding model can use it to generate a complete marketing site reference set where every section is visually distinct, brand-consistent, and easy to recreate in code.

Quick Start

Use the imagegen-frontend-web skill to create a six-section landing page reference with one horizontal image per section, a consistent palette, and varied composition across the set.

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 from a landing page brief?▼

Art-directed web composition works by encouraging varied hero structures, background modes, and CTA treatments to avoid repetitive left-text and right-image layouts. This approach balances premium visual direction with clear funnels and believable copy structure.

Can I generate a complete multi-section marketing site reference set?▼

Yes, you can generate a complete marketing site reference set for homepages, product pages, and conversion-focused sites. It produces distinct, brand-consistent section images that are implementation-readable and easy to recreate in code, ensuring layout hierarchy across the full set.

What's the best way to ensure consistent palette continuity across frontend comps?▼

The best way to ensure consistent palette continuity across frontend comps is to generate a full set of section images in one run. The Skill enforces palette continuity and varied composition anchors across the full set to maintain brand consistency and implementation-readable layout hierarchy.

Does imagegen-frontend-web work for single-section and multi-section landing pages?▼

Yes, imagegen-frontend-web works for both single-section and multi-section frontend comps. It covers homepages, product pages, and conversion-focused sites, requiring one horizontal image per section to clearly communicate layout, spacing, and visual rhythm.

Why does my website comp generation produce repetitive layouts?▼

Repetitive layouts in website comp generation occur when visual direction lacks variety. This Skill avoids repetitive left-text and right-image structures by art-directing varied hero structures, background modes, and CTA treatments across each generated section image.

Related Skills

Explore More Design & Creative Skills→
AJ-434AJ-434

copywriting

Draft conversion-focused marketing copy for web pages with CTAs.

Community
Intermediate
dwaynimaydwaynimay

imagegen-frontend-web

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

Community
Advanced
zai-orgzai-org
588

copywriting

Generate persuasive marketing copy using AIDA, PAS, and FAB frameworks.

Official
Intermediate
PolliticalSolutionsPolliticalSolutions

imagegen-frontend-web

Generate one horizontal website section reference image per landing page section.

Community
Advanced