skills.rest
noticesfromchat
noticesfromchatCOMMUNITY
Explore all skills by this author →
GitHub

imagegen-frontend-web

Generate design-reference images for website sections following composition and art-direction rules.

Updated Jul 10, 2026
Search Tags:#landing page#frontend#image generation#web design#composition#art direction#ui mockup
One-click install
npx skills add https://github.com/noticesfromchat/macos-app-digest --skill imagegen-frontend-web-noticesfromchat
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: imagegen-frontend-web
Source: https://github.com/noticesfromchat/macos-app-digest/tree/main/.agents/skills/imagegen-frontend-web
Command: npx skills add https://github.com/noticesfromchat/macos-app-digest --skill imagegen-frontend-web-noticesfromchat

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Creating consistent, professional website design mockups requires careful control of composition, palette, typography, and imagery across multiple sections, which generic image generation often fails to deliver. ## Core Features & Use Cases - Section-Based Image Generation: Produce separate design-reference images for heroes, features, testimonials, pricing, and CTA sections with one coherent visual system. - Composition & Art Direction Rules: Apply structured guidance on layout anchors, background modes, palette discipline, typography hierarchy, and anti-AI-slop patterns. - Use Case: A designer needs an 8-section fintech landing page concept. The Skill generates eight consistent horizontal section images with varied composition anchors, a single brand palette, and a clear conversion path from hero to final CTA. ## Quick Start Generate design-reference images for a hero, features, and pricing section of a premium SaaS landing page with a dark editorial style.

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 mockup images for multiple sections?▼

Request separate images per section and specify the style direction, such as editorial, cinematic, or SaaS. The Skill applies one consistent palette, typography system, and brand world across all frames while varying composition anchors and background modes.

What makes a good hero section design image?▼

A strong hero uses a short 5-10 word headline, one clear primary CTA, generous negative space, and a deliberate composition anchor such as bottom-left text over a full-bleed image. Avoid the overused left-text right-image default unless it genuinely fits the brief.

Can I generate a whole-page design as a single image?▼

Yes, a whole-page image is valid when requested and legible, but separate per-section images are preferred when they improve readability. The Skill does not impose a fixed image quota for unspecified pages.

How does the Skill avoid generic AI-looking designs?▼

It enforces anti-slop rules banning default purple-blue gradients, repeated card rows, fake dashboards, generic copy like unleash or seamless, and cloned layouts. It also requires varied composition anchors, background modes, and CTA styles across sections.

What are the limitations of generated design-reference images?▼

The images are visual references, not code; a developer must interpret layout, spacing, and typography to implement them. Extremely dense pages may lose legibility in a single frame, so splitting into per-section images is recommended.

Related Skills

Explore More Design & Creative Skills→
iljazimakovsiljazimakovs

branding-generator

Generate three brand directions with color palettes, typography, and mood.

Community
Advanced
zmsqnfl-commitszmsqnfl-commits
1

image-to-code

Convert design reference images into responsive HTML/CSS/JS components.

Community
Advanced
agents-repoagents-repo
3

maiconfz--plan-refiner--interactive-plan-refiner

Reviews and refines existing markdown plans against repository context through clarifying questions.

Official
Intermediate
vultisigvultisig
19

Figma Design Implementation

Translate Figma UI designs into React components using MCP tools.

Official
Intermediate