imagegen-frontend-web

Generate horizontal frontend design references for website sections from written briefs.

Updated Nov 1, 2025

Search Tags:#landing pages #visual hierarchy #website design #art direction #image direction #frontend comps

Ready to run

npx skills add https://github.com/mhfed/portfolio-2025 --skill imagegen-frontend-web-mhfed

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: imagegen-frontend-web
Source: https://github.com/mhfed/portfolio-2025/tree/main/.agents/skills/imagegen-frontend-web
Command: npx skills add https://github.com/mhfed/portfolio-2025 --skill imagegen-frontend-web-mhfed

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves the problem of turning vague website briefs into clear, premium, implementation-ready visual references that a designer or coding model can build from.

Core Features & Use Cases

Section-by-section page planning: Creates one horizontal image for each requested section so the full site is represented clearly and consistently.
Frontend art direction: Chooses composition, typography hierarchy, spacing, imagery, CTA placement, and background treatment to produce realistic web design comps.
Brand-consistent variation: Maintains one palette and visual system while varying anchors, section rhythm, and background modes to avoid repetitive AI layouts.
Use Case: Ideal for landing pages, marketing sites, portfolio pages, and product sites that need high-end visual direction before implementation.

Quick Start

Generate a premium horizontal design reference for each section of my landing page brief, using one consistent palette and varied composition across the page.

Frequently Asked Questions about imagegen-frontend-web

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I turn a written website brief into premium frontend image comps?▼

Transform written website briefs into premium frontend image comps by generating one horizontal visual reference for each section, applying consistent brand systems, varied composition anchors, and implementation-ready hierarchy, spacing, typography, and CTA treatment.

Can I generate visual hierarchy and art direction for a full landing page?▼

Generate visual hierarchy and art direction for full landing pages by creating section-by-section horizontal image comps that maintain one consistent palette while varying section rhythm and background modes to avoid repetitive layouts.

What's the best way to plan section-by-section page design before coding?▼

Plan section-by-section page design before coding by producing premium, implementation-ready visual references that map typography hierarchy, spacing, imagery, CTA placement, and background treatment for each section of the page.

Does this approach work for marketing sites, portfolios, and product pages?▼

This approach works for marketing sites, portfolios, and product pages by providing high-end visual direction for each section, requiring one horizontal visual per section to represent the full site consistently before implementation.

How do I keep brand consistency across multiple website section designs?▼

Keep brand consistency across multiple website section designs by maintaining one palette and visual system throughout the comps while varying composition anchors and section rhythm to create distinct but cohesive section layouts.

Why do my AI-generated website layouts look repetitive and how can I fix it?▼

AI-generated website layouts look repetitive when they lack varied composition anchors; fix this by applying frontend art direction that varies section rhythm, background modes, and anchors while keeping a consistent brand system.