End-to-end workflow for turning real app screenshots into polished social-ready composites using Butterkit MCP + ImageMagick

screenshot-to-post.md

name	screenshot-to-post
description	End-to-end workflow for turning real app screenshots into polished, posting-ready marketing composites using AXe/XcodeBuildMCP, Butterkit, and ImageMagick.

Screenshot to Post

Turn real app screens into marketing-ready composites for Reddit, Threads, Instagram, or any social platform.

When to Use

Use this skill when you need to:

• Create social media visuals from real app screenshots
• Build polished multi-phone composites for a post or update
• Produce marketing-worthy imagery without AI-generated screens

The Workflow

Step 1: Capture Screenshots

Two paths depending on context:

Option A — Automated (AXe or XcodeBuildMCP):

• Launch the app on simulator or device
• Use AXe or XcodeBuildMCP to navigate to the key screens
• Capture screenshots of each screen you want to feature

Option B — User-supplied:

• Ask the user to provide screenshots if live capture isn't practical
• Confirm which screens map to which marketing messages before proceeding

Capture one screenshot per slide idea. Don't capture more than you need.

Step 2: Compose in Butterkit

Use the mcp__butterkit__* tools to build marketing-worthy artboards:

• Open or create a Butterkit document (document_open or document_create)
• Set up artboards at the right App Store size (e.g. iPhone 6.9" = 1290×2796)
• For each artboard:
  • Set the device screenshot (design_set_device_screenshot)
  • Set background color or gradient (design_set_background)
  • Add/update title and subtitle text blocks (design_upsert_text_block)
  • Adjust device scale as needed (design_upsert_device) — 0.88 is a good default
• Typography defaults that work well:
  • Font: Avenir Next (or match the app's brand font)
  • Title: Heavy weight, ~40pt
  • Subtitle: Medium weight, ~25pt
  • Gradient: match the app's primary color top → lighter tint bottom

Iterate until happy: export a preview, review copy, tweak sizing.

Step 3: Export from Butterkit

Export at 2x for crisp composites:

design_export_artboards(
  documentId: ...,
  outputDir: "<project>/exports/",
  multiplier: 2.0
)

Note: if files already exist, Butterkit appends _2, _3 etc. to avoid collisions. Use the latest suffixed file for each artboard.

Step 4: Composite with ImageMagick

Group artboards into posting-friendly sets. Common groupings:

• 3 phones per composite (works well for Reddit, Threads, Instagram landscape)
• 1 phone centered (for a single hero post or final standalone slide)

Reference dimensions (2x exports, H=1720):

H=1720; PAD=100; GAP=72; BG="#F5F5F7"

# Scale sources to consistent height
magick "slide1.png" -resize x${H} /tmp/s1.png
magick "slide2.png" -resize x${H} /tmp/s2.png
magick "slide3.png" -resize x${H} /tmp/s3.png

W=$(magick identify -format "%w" /tmp/s1.png)
CW=$((PAD + W + GAP + W + GAP + W + PAD))
CH=$((PAD + H + PAD))

magick -size ${CW}x${CH} xc:"$BG" \
  /tmp/s1.png -geometry +${PAD}+${PAD} -composite \
  /tmp/s2.png -geometry +$((PAD + W + GAP))+${PAD} -composite \
  /tmp/s3.png -geometry +$((PAD + W*2 + GAP*2))+${PAD} -composite \
  "output_composite.png"

For a single centered phone:

CW=$((PAD + W + PAD))
magick -size ${CW}x${CH} xc:"$BG" \
  /tmp/s1.png -geometry +${PAD}+${PAD} -composite \
  "output_single.png"

Platform Size Notes

Platform	Recommended	Notes
Reddit	1080×1350 (4:5) or landscape	Gallery posts support multiple images
Threads	1080×1350 or square	Landscape strips also perform well
Instagram	1080×1350 (portrait)	Feed posts; square also works
Twitter/X	1600×900 (16:9)	Landscape preferred

The 3-phone landscape composite (≈2726×1920) works well for Reddit and Threads without cropping.

Tips

• Always export at 2x. 1x composites look blurry at display size.
• Keep background neutral (#F5F5F7 light gray, or white) so phones pop.
• Consistent card height across all artboards makes compositing trivial.
• The same composites can be repurposed across platforms — make them once, post everywhere.
• A 3-phone landscape strip suits Reddit/Threads/X; a single centered phone makes a clean standalone for a pinned post or blog header.