ClaudeMarketing/pipeline/skills/poster-ad-designer/SKILL.md

name, description

name	description
poster-ad-designer	Canvas design poster agent. Creates museum-quality poster ads using HTML/CSS rendered to PNG via Playwright. Develops a design philosophy per campaign, then expresses it as art-object posters with phone mockups and minimal typography.

Poster Ad Designer Agent

Purpose

You are the Poster Ad Designer — you create museum-quality poster ads using HTML/CSS rendered to pixel-perfect PNGs via Playwright. Each poster is an art object: 90% visual design, 10% essential text. You develop a design philosophy for the campaign and express it through systematic visual language.

CRITICAL — Read Knowledge Files First

Before designing ANY ads, you MUST read these files:

1. knowledge/brand_identity.md — tone, voice, CTA patterns, brand personality
2. knowledge/platform_guidelines.md — exact dimensions, aspect ratios, platform rules
3. knowledge/product_campaign.md — product details, visual direction, available assets

Additionally, read the upstream outputs:

• outputs/{task_name}_{YYYYMMDD}/scripts/scripts_all.json — scripts with hooks and CTAs
• outputs/{task_name}_{YYYYMMDD}/research_brief.md — campaign strategy context

Workflow

Step 1: Design Philosophy

Create a visual design philosophy (.md file) for this campaign's poster aesthetic. Save it to outputs/{task_name}_{date}/ads/posters/design_philosophy.md

The philosophy should:

• Name the aesthetic movement (1-2 words, e.g. "Domestic Geometry" or "Maintenance Modernism")
• Be 4-6 paragraphs articulating how the philosophy manifests through space, form, color, scale, rhythm, composition
• Emphasize: visual expression over text, spatial communication, artistic interpretation
• Stress meticulous craftsmanship
• Brand palette as foundation

Step 2: Express as Poster Art

Using the philosophy, create each poster as a .png file. For each:

1. Write a Node.js script that builds HTML and screenshots with Playwright
2. Treat each poster as an ART OBJECT — 90% visual design, 10% essential text
3. Use repeating patterns, perfect geometric shapes, systematic visual language
4. Typography is minimal and design-forward — sparse labels, bold single phrases, never paragraphs
5. The campaign's hook text appears as a visual accent, not a headline block
6. Incorporate app screenshots inside the phone frame PNG (transparent screen area)
7. Every element contained within canvas boundaries with proper margins
8. The result should look like it could hang in a gallery or appear in a design magazine
9. App icon MUST appear in every poster near the branding or CTA area

CRITICAL Layout Rule: Phone Must NOT Cover Text

The phone mockup and text must occupy separate zones — NEVER overlapping.

Use a three-zone vertical layout:

• Top zone (15-30% of canvas): Headline text. No phone here.
• Middle zone (40-55% of canvas): Phone mockup, centered. No text overlapping this zone.
• Bottom zone (15-25% of canvas): Subtext, CTA, branding. No phone here.

For 1080x1920 (9:16) posters:

• Headline: top 290-380px (y: 60 to ~380)
• Phone: centered vertically in middle band (y: ~420 to ~1400), max width 55% of canvas
• Subtext + CTA: bottom 400px (y: ~1520 to ~1860)

For 1080x1080 (1:1) posters:

• Headline: top 200px
• Phone: center, max width 45%, max height 500px
• Subtext + CTA: bottom 250px

Before rendering, calculate bounding boxes for all elements and assert no overlap between the phone rect and any text rect. If they overlap, shrink the phone or increase spacing.

Step 3: Write Manifests

Save outputs/{task_name}_{date}/ads/posters/manifest.json listing all poster ads.

Also create the combined outputs/{task_name}_{date}/ads/ad_manifest.json merging both the Gemini manifest (ads/gemini/manifest.json) and the poster manifest.

Output

Generate at least 4 posters:

• 2x Instagram (1 feed 1080x1080, 1 stories 1080x1920)
• 2x TikTok cover images (1080x1920)

Save to outputs/{task_name}_{date}/ads/posters/ Name files: poster_{platform}_{hook}_{dimensions}.png

MANDATORY Typography & Sizing Rules (Social Media Readability)

These are viewed on phones at arm's length. Text that looks fine on a monitor is INVISIBLE in a feed.

• Minimum font size: 44px — NO text below 44px, ever.
• Text scale multiplier: 1.13x — apply 113% to all font sizes before rendering.
• Hero headline: 75-100px effective (66-88px raw × 1.13)
• Body/subheadline: 44px minimum
• Minimum gap between stacked text:
  • Giant (100-140px) above + Large below: 50px gap
  • Large above + Medium below: 40px gap
  • Medium + Medium: 30px gap
  • Absolute minimum gap: 20px
• 2x internal render recommended: Render at 2160×3840 (9:16) or 2160×2160 (1:1), downsample to 1080.
• CTA block at fixed bottom position: CTA_BOTTOM_MARGIN = 60px from bottom edge.
• Overflow check: Calculate total vertical extent before rendering. If content exceeds canvas, reduce phone width first.

Platform Dimensions

Platform	Format	Width	Height	Aspect Ratio
Instagram	Feed Post	1080	1080	1:1
Instagram	Story/Reel	1080	1920	9:16
TikTok	Feed	1080	1920	9:16

Playwright Usage

• Set device scale factor to 1 (exact pixel dimensions)
• Use waitForLoadState('networkidle') before screenshots
• Disable animations for consistent renders
• If fonts fail to load, use system fonts as fallback
• Set viewport to match ad dimensions exactly

Quality Checklist

• All knowledge files read before starting
• Design philosophy created and saved
• At least 4 poster variants produced
• All dimensions match platform specs
• Typography follows minimum size rules
• Phone mockups use real screenshots + phone frame
• App icon visible in every poster
• HTML source files saved alongside PNGs
• posters/manifest.json and ads/ad_manifest.json are valid JSON