Back to Details

social-media-carousel

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Social Media Carousel

社交媒体轮播图

Design high-engagement carousel posts via inference.sh CLI.
通过inference.sh CLI设计高互动率的轮播帖。

Quick Start

快速开始

bash
curl -fsSL https://cli.inference.sh | sh && infsh login
bash
curl -fsSL https://cli.inference.sh | sh && infsh login

Generate a carousel slide

生成单页轮播图

infsh 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>" }'
undefined
infsh 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>" }'
undefined

Platform Specs

平台规格

PlatformDimensionsSlidesAspect Ratios
Instagram1080 x 1080 pxUp to 201:1 (default), 4:5, 16:9
LinkedIn1080 x 1080 px or 1080 x 1350Up to 201:1, 4:5
Twitter/X1080 x 1080 pxUp to 41:1, 16:9
Facebook1080 x 1080 pxUp to 101:1, 4:5
Use 1080 x 1350 (4:5) on Instagram and LinkedIn — takes up more screen real estate in the feed than square.
平台尺寸最大页数宽高比
Instagram1080 x 1080 px最多20页1:1（默认）, 4:5, 16:9
LinkedIn1080 x 1080 px 或 1080 x 1350最多20页1:1, 4:5
Twitter/X1080 x 1080 px最多4页1:1, 16:9
Facebook1080 x 1080 px最多10页1:1, 4:5
在Instagram和LinkedIn上使用1080 x 1350（4:5）尺寸 —— 比正方形格式在信息流中占据更多屏幕空间。

Carousel Structure

轮播图结构

The 7-Slide Framework

7页框架

SlidePurposeContent
1HookBold claim, question, or promise — stops the scroll
2ContextWhy this matters, set up the problem
3-6ValueOne point per slide, numbered
7CTAFollow, save, share, comment, visit link
页面用途内容
1吸睛页大胆断言、问题或承诺 —— 阻止用户划走
2背景铺垫说明内容的重要性，提出问题
3-6价值传递每页一个要点，带编号
7行动号召（CTA）关注、收藏、分享、评论、访问链接

Slide 1: The Hook

第1页：吸睛页

The most important slide. If this fails, nobody swipes.
Hook TypeExample
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/afterShow transformation
bash
undefined
这是最重要的一页。如果这一页没吸引力，没人会滑动查看后续内容。
吸睛类型示例
大胆断言"90%的落地页都犯了这个错误"
提问"为什么你的广告有点击但没有转化？"
数字+承诺"我希望早点学会的7个Python技巧"
反向观点"别再写博客文章了（试试这个方法）"
前后对比展示转变效果
bash
undefined

Hook slide

吸睛页示例

infsh 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>" }'
undefined
infsh 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>" }'
undefined

Slides 2-6: Content Slides

第2-6页：内容页

One point per slide. Never cram multiple ideas.
bash
undefined
每页一个要点。绝不要堆砌多个想法。
bash
undefined

Content slide template

内容页模板

infsh 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>" }'
undefined
infsh 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>" }'
undefined

Slide 7: CTA Slide

第7页：行动号召（CTA）页

bash
undefined
bash
undefined

CTA slide

CTA页示例

infsh 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>" }'
undefined
infsh 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>" }'
undefined

Design Rules

设计规则

Text Hierarchy

文本层级

ElementSize (at 1080px)Weight
Slide number96-120pxBlack (900)
Heading48-64pxBold (700-800)
Body text24-28pxRegular (400)
Caption/tag18-22pxMedium (500)
元素尺寸（1080px画布下）字重
页面编号96-120px粗黑（900）
标题48-64px粗体（700-800）
正文24-28px常规（400）
说明/标签18-22px中等（500）

Readability

可读性

RuleValue
Max words per slide30-40
Max lines of body text4-5
Line height1.5-1.6
FontSans-serif (Inter, Montserrat, Poppins)
Text contrast4.5:1 minimum (WCAG AA)
规则要求
单页最大字数30-40字
正文最大行数4-5行
行高1.5-1.6
字体无衬线字体（Inter, Montserrat, Poppins）
文本对比度最低4.5:1（符合WCAG AA标准）

Visual Consistency

视觉一致性

ElementKeep Consistent Across All Slides
Background color/gradientSame palette, slight variations OK
Font familySame font throughout
Text alignmentSame position (left or center)
Margins/paddingSame spacing
Accent colorSame highlight color
Numbering styleSame format (01, 02 or 1., 2.)
元素所有页面需保持一致
背景色/渐变相同调色板，可略有变化
字体全程使用相同字体
文本对齐方式相同位置（左对齐或居中）
边距/内边距相同间距
强调色相同高亮颜色
编号样式相同格式（01、02 或 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"
第1页："你需要掌握的5个CSS技巧"
第2页：技巧1+代码示例
第3页：技巧2+代码示例
...
第6页：技巧5+代码示例
第7页："关注获取更多开发技巧"

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
第1页："我们如何从0增长到年营收100万美元"
第2页：起步阶段（背景）
第3页：面临的挑战
第4页：我们的尝试（失败）
第5页：有效的方法
第6页：结果（数据）
第7页：关键收获+行动号召

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"
第1页："我重新设计了这个落地页"
第2页：优化前截图
第3页：标注问题1
第4页：优化后截图
第5页：解释改进点1
第6页：结果（转化率提升）
第7页："想要点评？私信我"

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 🔖"
第1页："2025年每个设计师都需要的10个工具"
第2-6页：每页2个工具+Logo+一句话介绍
第7页："收藏以备后用 🔖"

Swipe Psychology

滑动心理学

PrincipleApplication
Curiosity gapHook promises value that requires swiping
Numbered progress"3/7" creates completion drive
Visual continuityConsistent design signals "there's more"
Increasing valueBest tip last — rewards completing
Swipe cueArrow or "Swipe →" on slide 1
原则应用
好奇心缺口吸睛页承诺的价值需要滑动才能获取
编号进度"3/7" 会促使用户完成查看
视觉连续性一致的设计暗示"还有更多内容"
价值递增最好的技巧放在最后——奖励用户看完所有内容
滑动提示在第1页添加箭头或"滑动→"提示

Batch Generation

批量生成

bash
undefined
bash
undefined

Generate all slides for a carousel

生成轮播图的所有页面

for i in 1 2 3 4 5 6 7; do infsh 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
undefined
for i in 1 2 3 4 5 6 7; do infsh 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
undefined

AI-Generated Carousel Visuals

AI生成轮播图视觉元素

bash
undefined
bash
undefined

Generate illustrations for each slide

为每个页面生成插图

infsh 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 }'
undefined
infsh 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 }'
undefined

Common Mistakes

常见错误

MistakeProblemFix
Weak hook (slide 1)Nobody swipesBold claim, question, or number + promise
Too much text per slideOverwhelming, stops readingMax 30-40 words per slide
No visual consistencyLooks like different postsSame colors, fonts, margins throughout
No swipe indicatorPeople don't realize there's moreAdd "Swipe →" or arrow on slide 1
No CTA on last slideMissed engagement opportunityAsk to save, follow, share, or comment
Inconsistent numberingFeels disorganizedSame number format on every content slide
Cramming 2+ ideas per slideHard to digestOne point per slide, always
Square format on InstagramWastes feed real estateUse 1080x1350 (4:5) for more visibility
错误问题解决方法
吸睛页（第1页）吸引力弱没人滑动查看后续使用大胆断言、提问或数字+承诺
单页文字过多信息过载，用户停止阅读单页最多30-40字
视觉不一致看起来像不同的帖子全程使用相同颜色、字体、边距
无滑动提示用户不知道还有更多内容在第1页添加"滑动→"或箭头
最后一页无行动号召错失互动机会要求用户收藏、关注、分享或评论
编号不一致显得混乱所有内容页使用相同的编号格式
单页堆砌2个以上想法难以理解每页只放一个要点，务必遵守
Instagram使用正方形格式浪费信息流空间使用1080x1350（4:5）尺寸提升可见度

Related Skills

相关技能

bash
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: 
infsh app list
bash
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
浏览所有应用：
infsh app list