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