Poster

Algorithmic Poster Philosophy Generator

Overview

This skill transforms the task from:

• "generate a design"

into:

• "create a design philosophy and express it visually"

Philosophy always comes first.
The visual output is only an expression of the system.

Output tools:

• Philosophy → written inline as structured markdown
• Poster → rendered as SVG via show_widget (never described in text, always rendered)

Workflow

STEP 1 — Create Algorithmic Philosophy

Before generating any visual output, construct a design philosophy inline as structured markdown.

Write 4–6 paragraphs covering the following:

1. Concept (Core Idea)

Define the central aesthetic idea.

• Avoid vague artistic language
• Keep it abstract but actionable
• Must be translatable into design behavior

2. Visual Logic

Translate the concept into layout logic:

• Grid vs non-grid systems
• Information density (minimal / dense)
• Whitespace strategy

3. System Behavior

Describe how the design behaves:

• Hierarchy (primary / secondary / tertiary)
• Alignment vs deviation
• Rhythm, repetition, offset

4. Parametric Thinking

Convert design into variables:

• Font size ratios (e.g. title : subtitle : meta = 10 : 3 : 1)
• Alignment rules (e.g. left-anchored with 1 intentional break)
• Margin ratios (e.g. top margin = 15% of height)
• Color count (≤ 2 recommended)
• Number of active elements (≤ 5 recommended)

Avoid result-based descriptions (e.g. "cool style").
Focus on controllable parameters.

5. Emergence

Explain what the system produces when executed:

• Visual feeling
• Perceived structure
• Emotional tone

CRITICAL GUIDELINES (Philosophy Stage)

• Avoid redundancy
• Every sentence must be convertible into design rules
• No purely decorative or empty language
• Think like both a designer and a system builder

STEP 2 — Visual Expression (SVG Poster via show_widget)

Based on the philosophy, call show_widget to render an inline SVG poster.

Never describe the poster in text. Always render it directly.

SVG Poster Specifications

• Format: SVG
• Aspect ratio: 3:4 (recommended: viewBox="0 0 600 800")
• Background: white or near-black only
• Font: load via <style>@import url('https://fonts.googleapis.com/css2?family=...')</style> inside SVG
• Rendering: inline via show_widget

Design Rules (Derived from Philosophy)

Information Strategy

• Reduce content automatically — keep only essential text
• Max 3 information blocks (title / secondary / meta)
• Remove anything that doesn't serve the hierarchy

Layout System

• Use strict alignment OR intentional single deviation (based on philosophy)
• Maintain strong vertical reading flow
• Generous whitespace — let negative space carry weight

Typography System

• Clear hierarchy: title (large) / secondary (medium) / meta (small)
• Limit to 1–2 typefaces
• Refined, intentional spacing — use letter-spacing and line-height deliberately

Color System

• Black / white / grayscale OR low-saturation palette
• Maximum 2 colors (excluding white/black)
• Color must serve hierarchy, not decoration

Element Control

• Minimal elements only (≤ 5 active elements on canvas)
• No decorative icons, illustrations, or ornaments
• Design relies on layout, typography, and space — not graphics
• Thin rules or geometric lines allowed only if they reinforce structure

ADVANCED PRINCIPLES

Concept Embedding

The user's concept must NOT be written explicitly on the poster.

Instead, embed it into:

• Structure and grid logic
• Spacing rhythm
• Typographic alignment or deviation

Think: "A hidden reference inside the system — felt, not read."

Controlled Chaos

Variation is allowed, but always within constraints.

This is not randomness.
This is designed, intentional variation operating within a defined system.

Craftsmanship Standard

The output must feel:

• Balanced and intentional
• Refined through many iterations
• Minimal — nothing added that could be removed

Like a poster that a senior designer spent a week on.

Output Format

1 — Philosophy

Written inline as structured markdown (4–6 paragraphs, following the 5-section structure above).

2 — Poster

Rendered directly as SVG via show_widget.
Aspect ratio 3:4. Typography-driven. No decorative elements.
The poster is the system made visible — not a summary of it.

Full Example

Input

"帮我做一张关于'沉默'主题的极简海报"

Philosophy Output (inline markdown)

Concept: Silence is not the absence of sound — it is the space between signals. The design treats whitespace as the primary element, with text as intrusion.

Visual Logic: Near-empty grid. One dominant typographic anchor. All secondary information pushed to the margins. Density approaches zero.

System Behavior: Single primary element centered or offset by exactly one grid unit. Secondary text at 8% opacity or reduced weight — present but receding. No tertiary elements.

Parametric Thinking: Title font-size = 11% of canvas height. Margin = 18% on all sides. Secondary text = title size × 0.18. Color count = 1 (black on white). Active elements = 2.

Emergence: The viewer experiences stillness. The eye finds one point, then rests. Meaning accumulates in what is not shown.

Poster Output

→ show_widget renders a 600×800 SVG:
Single large word near vertical center, slight left offset. One line of small meta text at bottom-right. No rules, no borders. Pure typographic silence.

Key Principle

Do NOT generate just a poster.

ALWAYS generate: → a philosophy system
→ then express it as a rendered SVG artifact via show_widget