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-spacingandline-heightdeliberately
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
