imagegen-frontend

Generate 16:9 website section design images with palette consistency and composition variety.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/alperien/blandaid --skill imagegen-frontend-alperien
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: imagegen-frontend
Source: https://github.com/alperien/blandaid/tree/main/skills/imagegen-frontend
Command: npx skills add https://github.com/alperien/blandaid --skill imagegen-frontend-alperien

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill solves the issue of generic, low-quality AI-generated website mockups that lack structural integrity, consistent design systems, and conversion-focused layouts.

Core Features & Use Cases

  • Structured Art Direction: Enforces a rigorous pipeline that mandates palette consistency, viewport-scale typography, and intentional composition variety across all generated sections.
  • Conversion-Driven Sequencing: Maps generated images to specific conversion stages (Hook, Proof, Interest, Desire, Action) to ensure the output reads as a persuasive narrative.
  • Use Case: When building a new SaaS landing page, use this skill to generate a series of implementation-ready, 16:9 section images that a developer can accurately translate into code, avoiding the common pitfalls of "AI-slop" like floating blobs or generic gradients.

Quick Start

Use the imagegen-frontend skill to generate a six-section landing page concept for a premium fintech product with a dark cinematic mood.

Frequently Asked Questions about imagegen-frontend

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

FAQPage Schema
How do I generate conversion-aware UI mockups that avoid generic AI design flaws?

Conversion-aware UI mockups are generated through a structured art-direction pipeline that enforces palette consistency, viewport-scale typography, and intentional composition variety to avoid generic AI-slop like floating blobs. This ensures implementation-ready layout clarity for developers translating designs into code.

What is conversion-driven sequencing in website design references?

Conversion-driven sequencing maps generated UI mockup images to specific conversion stages—Hook, Proof, Interest, Desire, and Action—ensuring the visual output reads as a persuasive narrative across multiple website sections rather than disconnected components.

How do I create landing page mockups with consistent palette and typography scales?

Landing page mockups with consistent palettes and typography are created by enforcing a rigorous art-direction pipeline that mandates palette consistency and viewport-scale typography across all generated section comps, producing implementation-ready 16:9 reference images.

Can I use this to generate section comps for a SaaS landing page?

Yes, you can generate a series of implementation-ready, 16:9 section images for a SaaS landing page. The structured pipeline ensures the output provides layout clarity that a developer can accurately translate into frontend code without structural ambiguity.

What's the best way to plan art direction for multiple website sections?

Planning art direction for multiple website sections is best handled by enforcing intentional composition variety alongside palette consistency. This structured approach ensures each generated section comp maintains visual distinction while adhering to a unified design system.

Does this approach work for generating dark cinematic UI visual references?

Yes, this approach works for generating dark cinematic UI visual references. The art-direction pipeline applies the specified mood across all section comps while maintaining the required palette consistency and conversion-driven sequencing for the final landing page concept.