Install the belt CLI skill: npx skills add belt-sh/cli
Social Media Carousel
Design high-engagement carousel posts via inference.sh CLI.
Quick Start
Requires inference.sh CLI (belt). Install instructions
belt login
# Generate a carousel slide
belt app run infsh/html-to-image --input '{
"html": "<div style=\"width:1080px;height:1080px;background:#0f172a;display:flex;align-items:center;justify-content:center;padding:80px;font-family:system-ui;color:white;text-align:center\"><div><p style=\"font-size:24px;color:#818cf8;text-transform:uppercase;letter-spacing:3px\">5 Rules for</p><h1 style=\"font-size:64px;margin:16px 0;font-weight:900;line-height:1.1\">Writing Headlines That Convert</h1><p style=\"font-size:22px;opacity:0.5;margin-top:24px\">Swipe →</p></div></div>"
}'
Platform Specs
| Platform |
Dimensions |
Slides |
Aspect Ratios |
| Instagram |
1080 x 1080 px |
Up to 20 |
1:1 (default), 4:5, 16:9 |
| LinkedIn |
1080 x 1080 px or 1080 x 1350 |
Up to 20 |
1:1, 4:5 |
| Twitter/X |
1080 x 1080 px |
Up to 4 |
1:1, 16:9 |
| Facebook |
1080 x 1080 px |
Up to 10 |
1:1, 4:5 |
Use 1080 x 1350 (4:5) on Instagram and LinkedIn — takes up more screen real estate in the feed than square.
Carousel Structure
The 7-Slide Framework
| Slide |
Purpose |
Content |
| 1 |
Hook |
Bold claim, question, or promise — stops the scroll |
| 2 |
Context |
Why this matters, set up the problem |
| 3-6 |
Value |
One point per slide, numbered |
| 7 |
CTA |
Follow, save, share, comment, visit link |
Slide 1: The Hook
The most important slide. If this fails, nobody swipes.
| Hook Type |
Example |
| Bold claim |
"90% of landing pages make this mistake" |
| Question |
"Why do your ads get clicks but no conversions?" |
| Number + promise |
"7 Python tricks I wish I learned sooner" |
| Contrarian |
"Stop writing blog posts (do this instead)" |
| Before/after |
Show transformation |
# Hook slide
belt app run infsh/html-to-image --input '{
"html": "<div style=\"width:1080px;height:1350px;background:linear-gradient(180deg,#1e1b4b,#312e81);display:flex;align-items:center;justify-content:center;padding:80px;font-family:system-ui;color:white;text-align:center\"><div><h1 style=\"font-size:72px;font-weight:900;line-height:1.15;margin:0\">90% of Landing Pages Make This Mistake</h1><p style=\"font-size:28px;opacity:0.6;margin-top:32px\">Swipe to find out →</p></div></div>"
}'
Slides 2-6: Content Slides
One point per slide. Never cram multiple ideas.
# Content slide template
belt app run infsh/html-to-image --input '{
"html": "<div style=\"width:1080px;height:1350px;background:#1e1b4b;padding:80px;font-family:system-ui;color:white;display:flex;flex-direction:column;justify-content:center\"><div><p style=\"font-size:120px;font-weight:900;color:#818cf8;margin:0;line-height:1\">01</p><h2 style=\"font-size:48px;margin:24px 0 16px;font-weight:800;line-height:1.2\">Your headline is too vague</h2><p style=\"font-size:26px;opacity:0.8;line-height:1.6\">\"Welcome to our platform\" tells the visitor nothing. Lead with the outcome: \"Ship docs in minutes, not days.\"</p></div></div>"
}'
Slide 7: CTA Slide
# CTA slide
belt app run infsh/html-to-image --input '{
"html": "<div style=\"width:1080px;height:1350px;background:linear-gradient(180deg,#312e81,#1e1b4b);display:flex;align-items:center;justify-content:center;padding:80px;font-family:system-ui;color:white;text-align:center\"><div><h2 style=\"font-size:56px;font-weight:900;margin:0;line-height:1.2\">Found this useful?</h2><p style=\"font-size:32px;opacity:0.8;margin-top:24px;line-height:1.5\">Save this post for later 🔖<br>Follow for more tips</p><p style=\"font-size:24px;opacity:0.4;margin-top:40px\">@yourusername</p></div></div>"
}'
Design Rules
Text Hierarchy
| Element |
Size (at 1080px) |
Weight |
| Slide number |
96-120px |
Black (900) |
| Heading |
48-64px |
Bold (700-800) |
| Body text |
24-28px |
Regular (400) |
| Caption/tag |
18-22px |
Medium (500) |
Readability
| Rule |
Value |
| Max words per slide |
30-40 |
| Max lines of body text |
4-5 |
| Line height |
1.5-1.6 |
| Font |
Sans-serif (Inter, Montserrat, Poppins) |
| Text contrast |
4.5:1 minimum (WCAG AA) |
Visual Consistency
| Element |
Keep Consistent Across All Slides |
| Background color/gradient |
Same palette, slight variations OK |
| Font family |
Same font throughout |
| Text alignment |
Same position (left or center) |
| Margins/padding |
Same spacing |
| Accent color |
Same highlight color |
| Numbering style |
Same format (01, 02 or 1., 2.) |
Carousel Types
Educational / Tips
Slide 1: "5 CSS tricks you need to know"
Slide 2: Trick 1 with code example
Slide 3: Trick 2 with code example
...
Slide 6: Trick 5 with code example
Slide 7: "Follow for more dev tips"
Storytelling / Case Study
Slide 1: "How we grew from 0 to $1M ARR"
Slide 2: The beginning (context)
Slide 3: The challenge
Slide 4: What we tried (failed)
Slide 5: What worked
Slide 6: The result (numbers)
Slide 7: Key takeaway + CTA
Before / After
Slide 1: "I redesigned this landing page"
Slide 2: Before screenshot
Slide 3: Problem 1 annotated
Slide 4: After screenshot
Slide 5: Improvement 1 explained
Slide 6: Results (conversion lift)
Slide 7: "Want a review? DM me"
Listicle / Tools
Slide 1: "10 tools every designer needs in 2025"
Slides 2-6: 2 tools per slide with logo + one-liner
Slide 7: "Save this for later 🔖"
Swipe Psychology
| Principle |
Application |
| Curiosity gap |
Hook promises value that requires swiping |
| Numbered progress |
"3/7" creates completion drive |
| Visual continuity |
Consistent design signals "there's more" |
| Increasing value |
Best tip last — rewards completing |
| Swipe cue |
Arrow or "Swipe →" on slide 1 |
Batch Generation
# Generate all slides for a carousel
for i in 1 2 3 4 5 6 7; do
belt app run infsh/html-to-image --input "{
\"html\": \"<div style='width:1080px;height:1350px;background:#1e1b4b;display:flex;align-items:center;justify-content:center;padding:80px;font-family:system-ui;color:white'><div style='text-align:center'><p style='font-size:28px;opacity:0.5'>Slide $i of 7</p></div></div>\"
}" --no-wait
done
AI-Generated Carousel Visuals
# Generate illustrations for each slide
belt app run falai/flux-dev-lora --input '{
"prompt": "minimal flat illustration, person at desk with laptop, clean modern style, simple shapes, limited color palette purple and blue tones, white background, icon style",
"width": 1080,
"height": 1080
}'
Common Mistakes
| Mistake |
Problem |
Fix |
| Weak hook (slide 1) |
Nobody swipes |
Bold claim, question, or number + promise |
| Too much text per slide |
Overwhelming, stops reading |
Max 30-40 words per slide |
| No visual consistency |
Looks like different posts |
Same colors, fonts, margins throughout |
| No swipe indicator |
People don't realize there's more |
Add "Swipe →" or arrow on slide 1 |
| No CTA on last slide |
Missed engagement opportunity |
Ask to save, follow, share, or comment |
| Inconsistent numbering |
Feels disorganized |
Same number format on every content slide |
| Cramming 2+ ideas per slide |
Hard to digest |
One point per slide, always |
| Square format on Instagram |
Wastes feed real estate |
Use 1080x1350 (4:5) for more visibility |
Related Skills
npx skills add inference-sh/skills@ai-image-generation
npx skills add inference-sh/skills@content-repurposing
npx skills add inference-sh/skills@linkedin-content
Browse all apps: belt app list
marktantongco