Stacks Documentation
SkillsChangelog
TeamSponsorsPartnersPostcardwareAwesome StacksContributing

Image generation: web

Copy page
Copy page as Markdown for LLMs
View as Markdown
View this page as plain text
Open in ChatGPT
Copy content and open ChatGPT
Open in Claude
Copy content and open Claude
Open in Perplexity
Search with Perplexity AI
On this page 4

stacks-imagegen-web · Design · model-invoked

Generates premium website reference images and nothing else, one horizontal frame per section. It enforces composition variety, varied CTAs and hero scales, a narrative spine and one consistent palette across every frame, so a coding step can actually recreate them.

When to reach for it

  • Hero
  • Trust bar
  • Features
  • Pricing
  • CTA
  • etc.)

Inside the skill

The sections an agent reads once the skill loads.

    1. ACTIVE BASELINE CONFIGURATION
    1. THE COMBINATORIAL VARIATION ENGINE
    1. FRONTEND REFERENCE RULE
    1. HERO MINIMALISM RULES
    1. IMAGE COUNT & PAGE SLICING
    1. CREATIVITY ESCALATION RULE
    1. IMAGE-FIRST ART DIRECTION
    1. ANTI-AI-SLOP RULES
    1. TYPOGRAPHY-FIRST DISCIPLINE
    1. SECTION RHYTHM RULE
    1. COMPONENT EXECUTION GUIDELINES
    1. DENSITY & SPACING DISCIPLINE
    1. COLOR & MATERIAL RULES
    1. IMAGE / MEDIA DIRECTION
    1. DEFAULT SITE PACKS
    1. MULTI-IMAGE CONSISTENCY RULE
    1. CLARITY CHECK
    1. EXTRA CREATIVITY & IMPLEMENTATION EDGE
    1. RESPONSE BEHAVIOR
    1. EXAMPLE INTERPRETATIONS
    1. FINAL GOAL

Using it

This one is model-invoked. Your agent reaches for it on its own when the task matches, and you can also call it by name:

/stacks-imagegen-web

Source: stacks-imagegen-web/SKILL.md. Shadow it for one project with app/Skills/stacks-imagegen-web/SKILL.md, then re-run buddy setup:ai. See Writing your own.