Poster Designer

Overview

Poster Designer is a unified poster generation skill that always outputs one final poster image, while internally selecting the appropriate generation strategy.

Unlike soft, heuristic-based tools, this skill enforces hard routing rules to ensure that information-heavy posters are generated using deterministic layout rather than direct image generation.

The skill supports two internal strategies:

• Layout-first (HTML-based) for posters that convey structured information

• Image-first (direct image generation) for posters that are purely visual and symbolic

Strategy selection is final and non-negotiable once routing conditions are met.

When to Use

Use this skill whenever the desired output is:

• A poster / long banner / vertical visual

• A single image intended for publishing or long-term display

Typical use cases include:

• Open-source milestone announcements

• Community or project notices

• Recruiting posters

• Product or platform announcements

• Technical infographics

Output Contract

This skill always produces:

• Exactly one final poster image

The skill must never output:

• HTML or CSS

• Image-generation prompts

• Design explanations

• Intermediate artifacts

Only the final image is returned.

Strategy Selection (Hard Routing)

Poster Designer applies mandatory routing rules when selecting the generation strategy.

These rules override upstream planner preferences and must not be bypassed.

Mandatory Layout-first Conditions

The Layout-first (HTML-based) strategy MUST be used if any of the following conditions are satisfied:

The poster is described as an announcement, notice, or formal milestone

The poster is intended for long-term display, including but not limited to:

• README files

• Official websites

• Documentation pages

• Community announcements

The request explicitly mentions or implies:

• structured information

• clear hierarchy

• readability

• sections, paragraphs, or multiple text blocks

The poster contains more than one semantic text role, such as:

• a title

• a numeric highlight

• explanatory or descriptive text

• acknowledgements or credits

• footer or meta information

When any of these conditions are met:

• Direct image generation MUST NOT be used

• The task must be treated as a layout-driven artifact

• HTML-based composition is required before producing the final image

Layout-first Strategy (HTML-based)

Characteristics

• Fixed-width layout (default: 1080px)

• Content-adaptive height (no hard-coded height)

• Deterministic typography, spacing, and alignment

• Clear reading order and visual hierarchy

• Final poster image generated via full-container screenshot

Critical Screenshot Requirement

When using browser screenshot tools, the viewport width MUST be explicitly set to match the layout width (default: 1080px), and the output filename MUST clearly indicate the poster's purpose.

Intent

This strategy prioritizes:

• Text clarity and legibility

• Information hierarchy

• Long-term usability and stability

It is the default strategy for any poster that functions as an information artifact rather than a purely visual symbol.

Image-first Strategy (Direct Generation)

Usage Constraints

The Image-first strategy is ONLY permitted when all of the following conditions are satisfied:

• The poster contains a single headline or a single numeric highlight

• Supporting text is minimal and decorative (no paragraphs or sections)

• The request prioritizes atmosphere, emotion, or visual impact over information clarity

• The poster resembles a keynote KV, launch visual, or symbolic milestone image

If any of these conditions are not met, Image-first generation must not be used.

Characteristics

• Composition-driven design

• Cinematic lighting and atmosphere

• Text treated as a graphic element rather than structured content

Visual Design Principles

Regardless of strategy, Poster Designer enforces the following principles:

• Structure before decoration

• Clarity before effects

• Semantic visuals over abstract decoration

The poster must clearly communicate:

• What the poster represents

• Why it matters

• What the primary visual anchor is

Semantic Visual Anchors

Poster Designer introduces domain-specific visual anchors instead of generic backgrounds.

Examples include:

• Docker milestones → containers, image layers, registry-to-node pull networks

• Recruiting → structured sections, engineering environments, technical diagrams

• Product platforms → architecture diagrams, UI-like compositions

• Community milestones → nodes, constellations, global networks

Purely abstract backgrounds without semantic meaning are insufficient.

Typography & Text Handling

• Clear hierarchy between headline, supporting text, and meta information

• Text quantity adapts to the selected strategy

• Text must remain legible at poster scale

• Decorative effects must never reduce readability

Image Usage

• Images are purposeful, not decorative fillers

• Background imagery must preserve text readability

• Mid-poster visuals must reinforce meaning

• No competing focal points are allowed

Element Overlap & Visual Clarity Check

Before final screenshot, verify:

No critical content is obscured

• Main title, key numbers, primary CTAs must be fully visible

• Background imagery must not compete with text readability

• Text placed over images should only be done when the obscured image area is non-essential

Layer discipline

• Fixed-position elements must not cover center content

• Decorative elements should not obscure semantic content

• High z-index elements (tooltips, popups, overlays) should be user-triggered, not persistent

Visual hierarchy

• Primary visual anchor should be immediately apparent

• No competing focal points that confuse the viewer

• Clear separation between foreground content and background decoration

Text-on-image safety

• When text is placed over images, ensure sufficient contrast

• Avoid placing text over areas with high visual detail that would reduce legibility

• Solid or gradient overlays may be used to improve text readability

If any of these checks fail, the poster must be adjusted before taking the final screenshot.

Quality Bar

A successful output must be suitable for:

• GitHub README banners

• Docker Hub or open-source announcements

• Conference or meetup visuals

• Company or community social posts

If the output resembles:

• A dashboard or analytics screenshot

• A generic AI marketing image

• An abstract background with loosely placed text

Then the skill has failed.

Example Invocation (Conceptual)

"Create a formal milestone announcement poster for Xinference celebrating 5,000,000 Docker Hub downloads. The poster must include a title, a prominent numeric highlight, explanatory text, acknowledgements, and footer information suitable for long-term display on README and official websites."

Summary

Poster Designer is an intent-aware, rule-enforced poster generation skill.

It guarantees that information-heavy posters are generated using deterministic layout, while reserving direct image generation strictly for minimal, visual-only use cases.