skills.rest
ferrarifankid04
ferrarifankid04COMMUNITY
Explore all skills by this author →
GitHub

imagegen-frontend-web

Generates per-section horizontal website design reference images with art-directed composition rules.

Updated Aug 6, 2026
Search Tags:#landing page#image generation#web design#ui design#art direction#hero composition#frontend reference
One-click install
npx skills add https://github.com/ferrarifankid04/ai-skills-public --skill imagegen-frontend-web-ferrarifankid04
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: imagegen-frontend-web
Source: https://github.com/ferrarifankid04/ai-skills-public/tree/main/claude-code/skills/imagegen-frontend-web
Command: npx skills add https://github.com/ferrarifankid04/ai-skills-public --skill imagegen-frontend-web-ferrarifankid04

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, making them useless as implementation references for developers. ## Core Features & Use Cases - Per-Section Image Output: Enforces one separate horizontal image per page section, so an 8-section landing page produces 8 consistent frames instead of one compressed collage. - Combinatorial Art Direction Engine: Selects theme paradigm, typography character, hero architecture, background mode, CTA style, and narrative spine to produce varied, brand-consistent compositions. - Anti-Slop Guardrails: Bans generic AI patterns (gradient text, fake dashboards, cloned card rows, buzzword copy) and enforces palette, spacing, and conversion discipline across all frames. - Use Case: Ask for a landing page for a premium 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 Generate a landing page design for a minimalist editorial brand with 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 in your prompt. The skill produces one horizontal image per section, defaulting to 6 sections for a landing page and 8 for a full website, each labeled sequentially.

How many images does a landing page request produce?▼

One image per section, always. A landing page with no specified count defaults to 6 sections and 6 images; a full website defaults to 8. Multiple sections are never combined into a single tall image.

Can developers implement designs from these generated images?▼

Yes. Each image is generated as a frontend reference that clearly communicates layout, hierarchy, spacing, typography scale, CTA priority, and component styling, with implementation clarity set as a high-priority baseline.

Does it avoid the default left-text right-image hero layout?▼

Yes. That pattern is explicitly flagged as overused and deprioritized. The skill prefers alternatives like centered-over-image, bottom-left overlay, stacked center, off-grid editorial, or mini minimalist heroes unless the classic layout genuinely fits best.

What design styles does the skill support?▼

It adapts to briefs including minimalist, editorial, cinematic, luxury, SaaS, agency, and e-commerce directions. Each maps to specific hero scales, background modes, gradient usage, and composition rules defined in the brief-to-direction mapping.

When should I not use this image generation approach?▼

Avoid it when you need actual code output rather than visual references, or when the request is for abstract mood art rather than website comps. The skill defaults to implementation-friendly design references, not loose moodboards.

Related Skills

Explore More Design & Creative Skills→
AppsVortexAppsVortex
31

arn-spark-style-explore

Define and document visual style direction for Arness projects.

Official
Advanced
firstsun-devfirstsun-dev
3

imagegen-frontend-web

Generates per-section horizontal website design reference images with consistent art direction.

Official
Advanced
breakingcircuits1337breakingcircuits1337

creative-director

Generate brand identity, copywriting, and visual asset direction for web projects.

Community
Advanced
TechsioCZTechsioCZ
2

figma-sync-handoff

Flag Figma library or Code Connect follow-up needs after UI-kit component work.

Official
Basic