Design Skill

1. create_poster       → Pick aspect ratio (9:16, 16:9, 1:1, 4:3, 3:4)
2. set_page_layout     → Set justifyContent ("end" for bottom, "center" for middle)
3. set_background      → Solid, gradient, image, or video
4. add_group           → Text with typography hierarchy (headline + body)
5. apply_effect        → One main effect per poster
6. add_postprocess     → Stackable enhancements (WebGPU effects only!)
7. render_image        → Preview the result

1. create_poster     → aspectRatio: "9:16"
2. set_background    → type: "gradient", gradientStartColor: "#0a0a0a",
                       gradientEndColor: "#1a1a3e", gradientAngle: 160
3. add_group         → children: [
                         {type: "text", content: "HELLO", fontSize: 120,
                          fontWeight: "900", color: "#ffffff"},
                         {type: "text", content: "WORLD", fontSize: 32,
                          fontWeight: "400", color: "#888888"}
                       ]
4. apply_effect      → effectId: "ascii-standard", cellSize: 8, color: true

# 1. Create poster
create_poster: aspectRatio: "9:16", backgroundColor: "#0a0a14"

# 2. Push content to bottom
set_page_layout: justifyContent: "end"

# 3. Animated video background
set_background: type: "video", videoUrl: "/assets/manga.mp4"

# 4. Decorative line
add_layer: type: "line"
  startX: 25, startY: 60, endX: 75, endY: 60
  strokeColor: "#4cc9f0", strokeWidth: 0.002, strokeOpacity: 0.4

# 5. Text group (left-aligned)
add_group: width: 85, alignItems: "center", gap: 1
  children:
    - "NEON DREAMS" → Anton 120px, #f72585, lineHeight: 0.95
    - "A NIGHT OF ELECTRONIC MUSIC" → Outfit 16px light, #4cc9f0, letterSpacing: 6
    - "MARCH 15, 2026 / WAREHOUSE 9 / 10PM" → Outfit 12px, #888888

# 6. ASCII minimal effect
apply_effect: effectId: "ascii-minimal", cellSize: 6, color: true

# 7. Post-processing
add_postprocess: bloom (intensity: 1.8, radius: 0.5, threshold: 0.15)
add_postprocess: chromatic-aberration (strength: 0.005, angle: 45)
add_postprocess: scanlines (count: 350, intensity: 0.3)

# 1. Create poster
create_poster: aspectRatio: "3:4", backgroundColor: "#0a0a0a"

# 2. Bottom-aligned with tight spacing
set_page_layout: justifyContent: "end", gap: 1, padding: 6

# 3. Dark portrait background
search_images: query: "portrait fashion", orientation: "vertical", luminance: "dark"
set_background: type: "image", imageUrl: <result>, objectFit: "cover"

# 4. Headline group
add_group: width: 80, alignItems: "center", gap: 0.1
  children:
    - "The Art of Silence" → Playfair Display 49px 800, #ffffff, lineHeight: 1.0
    - "An intimate portrait series..." → DM Sans 16px light, #cccccc

# 5. Magazine footer
add_layer: type: "text", content: "APERTURE"
  DM Sans 14px 500, #ffffff, letterSpacing: 8, uppercase, x: 50, y: 90

# 6. Dither ink effect (no post-processes — built-in palette)
apply_effect: effectId: "dither-floyd-steinberg", pixelation: 3, paletteId: "ink"

# 1. Create poster
create_poster: aspectRatio: "1:1", backgroundColor: "#0f380f"

# 2. Centered layout
set_page_layout: justifyContent: "center"

# 3. Video background (gives dither rich material)
set_background: type: "video", videoUrl: "/assets/motorcycle.mp4"

# 4. Retro text group
add_group: width: 80, alignItems: "center", gap: 4
  children:
    - "GAME OVER" → Bungee 96px, #9bbc0f, lineHeight: 1.0
    - "INSERT COIN TO CONTINUE" → Space Mono 16px, #8bac0f, letterSpacing: 3
    - "SCORE: 999,999" → Space Mono 14px bold, #306230

# 5. Dither with Game Boy palette + built-in bloom
apply_effect: effectId: "dither-atkinson", pixelation: 5
  paletteId: "gameboy", bloomEnabled: true, bloomIntensity: 0.8, bloomRadius: 30

# 1. Create poster
create_poster: aspectRatio: "16:9", backgroundColor: "#0f172a"

# 2. Content at bottom
set_page_layout: justifyContent: "end"

# 3. Navy gradient
set_background: type: "gradient", gradientStyle: "linear", gradientAngle: 135
  gradientStartColor: "#0f172a", gradientEndColor: "#1e293b"

# 4. Centered text group
add_group: width: 80, alignItems: "center", gap: 2
  children:
    - "DEV//CONF" → Space Grotesk 72px 700, #ffffff, letterSpacing: -2
    - "The Future of Web Development" → DM Sans 24px, #aaaaaa
    - "JUNE 12-14, 2026 / SAN FRANCISCO" → DM Sans 14px 500, #666666, letterSpacing: 3

# 5. CMYK halftone + post-processing
apply_effect: effectId: "halftone-cmyk", dotSize: 0.05
add_postprocess: bloom (intensity: 0.8, radius: 0.3, threshold: 0.3)
add_postprocess: vignette (radius: 0.9)

# 1. Create poster
create_poster: aspectRatio: "9:16", backgroundColor: "#0a0a0a"

# 2. Content at bottom (lets photo breathe)
set_page_layout: justifyContent: "end"

# 3. Dramatic landscape photo
search_images: query: "mountain landscape dramatic", orientation: "vertical"
set_background: type: "image", imageUrl: <result>, objectFit: "cover"

# 4. Bold centered text
add_group: width: 85, alignItems: "center", gap: 3
  children:
    - "WILD" → Bebas Neue 140px, #ffffff, letterSpacing: 8
    - "nature / adventure / freedom" → DM Sans 18px light, #f0f0f0, letterSpacing: 4

# 5. Kuwahara art effect + film post-processing
apply_effect: effectId: "art-kuwahara"
add_postprocess: vignette (radius: 0.6)
add_postprocess: grain (size: 2.0, speed: 0.3, colorAmount: 0.2)
add_postprocess: brightness-contrast (contrast: 1.15, saturation: 0.85)