social-media-carousel

安装 belt CLI 技能： npx skills add belt-sh/cli

社交媒体轮播图

通过 inference.sh CLI 设计高互动率的轮播帖子。

快速开始

需要 inference.sh CLI（belt）。安装说明

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

平台规格

平台	尺寸	幻灯片数量	宽高比
Instagram	1080 x 1080 px	最多 20 张	1:1（默认）、4:5、16:9
LinkedIn	1080 x 1080 px 或 1080 x 1350	最多 20 张	1:1、4:5
Twitter/X	1080 x 1080 px	最多 4 张	1:1、16:9
Facebook	1080 x 1080 px	最多 10 张	1:1、4:5

在 Instagram 和 LinkedIn 上使用 1080 x 1350 (4:5)——相比正方形，这种尺寸在信息流中占据更多屏幕空间。

轮播图结构

7 张幻灯片框架

幻灯片	用途	内容
1	钩子	大胆的主张、问题或承诺——让用户停下滚动
2	背景	说明这为何重要，引出问题
3-6	价值	每张幻灯片讲一个要点，并标上编号
7	行动号召	关注、保存、分享、评论、访问链接

幻灯片 1：钩子

最重要的一张幻灯片。如果这张不吸引人，就没人会滑动。

钩子类型	示例
大胆主张	“90% 的落地页都会犯这个错误”
问题	“为什么你的广告有人点击，却没有转化？”
数字 + 承诺	“我真希望能早点学会的 7 个 Python 技巧”
逆向观点	“别再写博客文章了（试试这个）”
前后对比	展示转变

# 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>"
}'

幻灯片 2-6：内容页

每张幻灯片只讲一个要点。绝不要塞进多个想法。

# 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>"
}'

幻灯片 7：行动号召页

# 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>"
}'

设计规则

文字层级

元素	尺寸（1080px 画布）	字重
幻灯片编号	96-120px	Black（900）
标题	48-64px	Bold（700-800）
正文	24-28px	Regular（400）
说明文字/标签	18-22px	Medium（500）

易读性

规则	数值
每张幻灯片最多字数	30-40
正文最多行数	4-5
行高	1.5-1.6
字体	无衬线字体（Inter、Montserrat、Poppins）
文字对比度	最低 4.5:1（WCAG AA）

视觉一致性

元素	所有幻灯片保持一致
背景颜色/渐变	使用相同配色，允许细微变化
字体系列	全程使用相同字体
文字对齐	位置一致（左对齐或居中）
页边距/内边距	间距一致
强调色	使用相同的突出显示颜色
编号样式	格式一致（01、02 或 1.、2.）

轮播图类型

教育 / 技巧

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"

讲故事 / 案例研究

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

前后对比

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"

清单 / 工具

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 🔖"

滑动心理学

原则	应用
好奇心缺口	钩子承诺提供有价值的内容，需要滑动才能看到
编号进度	“3/7”能激发完成的动力
视觉连贯性	一致的设计传递出“后面还有内容”的信号
价值递增	将最好的技巧放在最后——奖励看完全部内容的人
滑动提示	在第 1 张幻灯片上加箭头或“向右滑动 →”

批量生成

# 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 生成的轮播图视觉素材

# 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
}'

常见错误

错误	问题	修正方法
开场不够吸引人（第 1 张幻灯片）	没人会滑动浏览	用有力的论断、问题或数字开场，并给出承诺
每张幻灯片文字过多	让人不堪重负，停止阅读	每张幻灯片最多 30-40 个词
缺乏视觉一致性	看起来像是不同的帖子	始终使用相同的颜色、字体和边距
没有滑动提示	人们没意识到后面还有内容	在第 1 张幻灯片上添加“向右滑 →”或箭头
最后一张幻灯片没有行动号召	错失互动机会	邀请读者收藏、关注、分享或评论
编号不一致	显得杂乱无章	每张内容幻灯片都使用相同的编号格式
每张幻灯片塞入 2 个以上的想法	难以消化	始终每张幻灯片只讲一个要点
在 Instagram 上使用正方形格式	浪费信息流展示空间	使用 1080x1350（4:5），提高可见度

相关技能

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

浏览所有应用：belt app list