imagegen-frontend

What problem does it solve?

This Skill solves the common issue of generic, repetitive, low-fidelity AI-generated frontend design references that lack creative art direction, conversion focus, and clear implementation guidance for developers, making it hard to build high-end, on-brand websites.

Core Features & Use Cases

• Strict Section Separation: Enforces one horizontal design image per page section to avoid compressed, hard-to-implement full-page renders, with default section counts for common page types (e.g., 6 for landing pages, 8 for full websites).
• Awwwards-Level Art Direction: Includes detailed rules to eliminate AI slop patterns (default purple gradients, overused left-text/right-image heroes, generic card spam) and enforce premium, creative, conversion-aware design.
• Consistent Brand Cohesion: Mandates matching palettes, typography, CTA styles, and visual tone across all section images so the full page reads as a single cohesive, codeable design system.
• Use Case: Ideal for landing pages, marketing sites, product comps, and e-commerce pages where developers or coding models need accurate, high-fidelity visual direction to recreate premium frontend experiences.

Quick Start

Use the imagegen-frontend skill to generate separate horizontal design reference images for each section of a premium SaaS landing page, following all specified art direction and consistency rules.