skills.rest
magicpro97
magicpro97COMMUNITY
Explore all skills by this author →
GitHub

imagegen-frontend-web

Generate horizontal design reference images for landing page sections.

8|3|Updated Jun 7, 2026
Search Tags:#image generation#website design#design generation#conversion design#frontend reference
One-click install
npx skills add https://github.com/magicpro97/vibeflow --skill imagegen-frontend-web-magicpro97
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: imagegen-frontend-web
Source: https://github.com/magicpro97/vibeflow/tree/main/.agents/skills/imagegen-frontend-web
Command: npx skills add https://github.com/magicpro97/vibeflow --skill imagegen-frontend-web-magicpro97

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill addresses the challenge of creating professional, detailed, and conversion-aware website design references, ensuring that developers and coding models can accurately recreate the designs.

Core Features & Use Cases

  • Elite Frontend Design Generation: Generates images for website sections with a focus on composition variety and a consistent palette.
  • Conversion-Aware Design: Ensures that each section has a clear purpose, such as hooking, proving, educating, or converting users.
  • Customization Options: Offers configurable design variance, visual density, art direction, and implementation clarity.
  • Use Case: For a landing page with 8 sections, this Skill generates 8 separate images, each tailored to specific design rules and brand guidelines.

Quick Start

Use the imagegen-frontend-web skill to generate a design reference for a landing page with 8 sections.

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 for a multi-section landing page?▼

To generate website design references, you provide the section count and design preferences. The Skill outputs separate horizontal images for each landing page section, ensuring a premium and implementable design reference.

What is conversion-aware design generation for frontend references?▼

Conversion-aware design generation ensures each website section has a clear purpose, such as hooking, proving, educating, or converting users. This approach creates detailed visual references that developers can accurately recreate.

Can I customize visual density and art direction for landing page design images?▼

Yes, you can customize design variance, visual density, art direction, and implementation clarity. This ensures the generated website design images align with specific design rules and brand guidelines.

Do I need to specify the number of sections before generating frontend design references?▼

Yes, providing the section count is required. For a landing page with 8 sections, the generation process creates 8 separate horizontal images, each tailored to your specific design rules.

What's the best way to ensure generated design references are implementable by coding models?▼

The Skill generates detailed and conversion-aware website design references with implementation clarity. This ensures that developers and coding models can accurately recreate the designs from the horizontal section images.

Are there limitations to the image format for generated website design sections?▼

The generated website design references are output as horizontal images. This format is consistent across all sections to maintain a premium visual standard suitable for frontend implementation.

Related Skills

Explore More Design & Creative Skills→
JZKK720JZKK720

imagegen-frontend-web

Generate art-directed website design references with section-to-image adherence.

Community
Advanced
AytsuuAytsuu

imagegen-frontend-web

Generate one horizontal image per website section for landing pages.

Community
Advanced
ChoiHyunjinChoiHyunjin

role-frontend-developer

Transform design and architectural specifications into frontend code.

Community
Advanced
C-Jay69C-Jay69

image-generation

Generate base64-encoded images from text prompts using the z-ai-web-dev-sdk.

Community
Intermediate