name: 社交媒体轮播
description: “适用于Instagram、LinkedIn和Twitter/X的多幻灯片轮播设计，包括布局规则和钩子。涵盖幻灯片结构、文本层次、滑动心理学和平台特定规范。用于：轮播帖子、Instagram轮播、LinkedIn轮播、幻灯片帖子、教育内容。触发词：轮播、Instagram轮播、LinkedIn轮播、幻灯片帖子、轮播设计、滑动帖子、多图像帖子、轮播模板、教育轮播、轮播内容、Instagram幻灯片、LinkedIn幻灯片”
allowed-tools: Bash(infsh *)
社交媒体轮播
通过inference.sh CLI设计高参与度的轮播帖子。
快速开始
curl -fsSL https://cli.inference.sh | sh && infsh login
# 生成一个轮播幻灯片
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条规则用于</p><h1 style=\"font-size:64px;margin:16px 0;font-weight:900;line-height:1.1\">撰写转换率高的标题</h1><p style=\"font-size:22px;opacity:0.5;margin-top:24px\">滑动 →</p></div></div>"
}'
安装说明： 安装脚本仅检测您的操作系统/架构，从dist.inference.sh下载匹配的二进制文件，并验证其SHA-256校验和。无需提升权限或后台进程。提供手动安装和验证。
平台规范
| 平台 |
尺寸 |
幻灯片数 |
宽高比 |
| Instagram |
1080 x 1080 像素 |
最多20 |
1:1 (默认), 4:5, 16:9 |
| LinkedIn |
1080 x 1080 像素或1080 x 1350 |
最多20 |
1:1, 4:5 |
| Twitter/X |
1080 x 1080 像素 |
最多4 |
1:1, 16:9 |
| Facebook |
1080 x 1080 像素 |
最多10 |
1:1, 4:5 |
在Instagram和LinkedIn上使用1080 x 1350 (4:5) — 在信息流中占用更多屏幕空间。
轮播结构
7幻灯片框架
| 幻灯片 |
目的 |
内容 |
| 1 |
钩子 |
大胆声明、问题或承诺 — 停止滚动 |
| 2 |
上下文 |
为什么重要，设置问题 |
| 3-6 |
价值 |
每幻灯片一个要点，编号 |
| 7 |
行动号召 |
关注、保存、分享、评论、访问链接 |
幻灯片1：钩子
最重要的幻灯片。如果失败，无人滑动。
| 钩子类型 |
示例 |
| 大胆声明 |
“90%的着陆页面犯这个错误” |
| 问题 |
“为什么您的广告有点击但没有转化？” |
| 数字 + 承诺 |
“7个我希望早学的Python技巧” |
| 逆向思维 |
“停止写博客文章（改为这样做）” |
| 前后对比 |
展示转变 |
# 钩子幻灯片
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%的着陆页面犯这个错误</h1><p style=\"font-size:28px;opacity:0.6;margin-top:32px\">滑动以了解 →</p></div></div>"
}'
幻灯片2-6：内容幻灯片
每幻灯片一个要点。绝不要挤入多个想法。
# 内容幻灯片模板
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\">您的标题太模糊</h2><p style=\"font-size:26px;opacity:0.8;line-height:1.6\">\"欢迎使用我们的平台\"没有告诉访客任何信息。以结果为导向：\"在几分钟而不是几天内交付文档。\"</p></div></div>"
}'
幻灯片7：行动号召幻灯片
# 行动号召幻灯片
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\">觉得有用吗？</h2><p style=\"font-size:32px;opacity:0.8;margin-top:24px;line-height:1.5\">保存此帖子以备后用 🔖<br>关注以获取更多提示</p><p style=\"font-size:24px;opacity:0.4;margin-top:40px\">@您的用户名</p></div></div>"
}'
设计规则
文本层次
| 元素 |
大小（在1080像素下） |
字重 |
| 幻灯片编号 |
96-120px |
黑体 (900) |
| 标题 |
48-64px |
粗体 (700-800) |
| 正文文本 |
24-28px |
常规 (400) |
| 说明/标签 |
18-22px |
中等 (500) |
可读性
| 规则 |
值 |
| 每幻灯片最大字数 |
30-40 |
| 正文文本最大行数 |
4-5 |
| 行高 |
1.5-1.6 |
| 字体 |
无衬线字体 (Inter, Montserrat, Poppins) |
| 文本对比度 |
最小4.5:1 (WCAG AA) |
视觉一致性
| 元素 |
在所有幻灯片中保持一致 |
| 背景颜色/渐变 |
相同调色板，轻微变化可接受 |
| 字体系列 |
整个使用相同字体 |
| 文本对齐 |
相同位置（左或中） |
| 边距/内边距 |
相同间距 |
| 强调色 |
相同高亮颜色 |
| 编号样式 |
相同格式 (01, 02 或 1., 2.) |
轮播类型
教育 / 提示
幻灯片1: "5个您需要知道的CSS技巧"
幻灯片2: 技巧1带代码示例
幻灯片3: 技巧2带代码示例
...
幻灯片6: 技巧5带代码示例
幻灯片7: "关注以获取更多开发提示"
故事讲述 / 案例研究
幻灯片1: "我们如何从0增长到100万美元ARR"
幻灯片2: 开始（上下文）
幻灯片3: 挑战
幻灯片4: 我们尝试的（失败）
幻灯片5: 成功的做法
幻灯片6: 结果（数字）
幻灯片7: 关键要点 + 行动号召
前后对比
幻灯片1: "我重新设计了这个着陆页面"
幻灯片2: 之前截图
幻灯片3: 问题1注释
幻灯片4: 之后截图
幻灯片5: 改进1解释
幻灯片6: 结果（转化率提升）
幻灯片7: "想要评论？私信我"
列表 / 工具
幻灯片1: "2025年每个设计师需要的10个工具"
幻灯片2-6: 每幻灯片2个工具带Logo和一句话描述
幻灯片7: "保存此以备后用 🔖"
滑动心理学
| 原理 |
应用 |
| 好奇心缺口 |
钩子承诺需要滑动才能获得的价值 |
| 编号进度 |
“3/7” 创造完成驱动力 |
| 视觉连续性 |
一致设计信号表示“还有更多” |
| 递增价值 |
最佳提示最后 — 奖励完成 |
| 滑动提示 |
箭头或“滑动 →”在幻灯片1上 |
批量生成
# 为轮播生成所有幻灯片
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'>幻灯片 $i of 7</p></div></div>\"
}" --no-wait
done
AI生成轮播视觉
# 为每个幻灯片生成插图
infsh app run falai/flux-dev-lora --input '{
"prompt": "极简扁平插图，办公桌前带笔记本电脑的人，干净现代风格，简单形状，有限调色板紫色和蓝色色调，白色背景，图标风格",
"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
浏览所有应用：infsh app list