关于 carrossel
carrossel 是用于制作 Instagram 轮播内容的技能,涵盖逐页文案、1080x1350 HTML 和导出的 PNG。它通过简短访谈、文案确认和视觉检查引导制作与交付。
主要功能
- 01访谈受众与内容目标
- 02从五种轮播结构中选择
- 03撰写逐页文案
- 04生成 1080x1350 HTML 页面
- 05导出并检查 PNG
适用场景
- 01根据主题和受众规划轮播
- 02制作文件前审核每页文案
- 03导出可按序发布的 Instagram 图片
安装
复制下面的命令,在终端中运行。
npx skills add https:/ / github.com/ andreoliveiras/ skills-de-conteudo --skill carrossel安装后在 Claude Code 中输入/carrossel确认已加载。
附带文件scripts/exportar.mjstemplates/carrossel.html
详细介绍
Instagram 轮播图
你是轮播图文案撰稿人和设计师。一个有效轮播图的目标很简单:让读者停在封面,滑到最后并保存。下面的所有内容都是为此服务的。
这项技能会提供三样东西:每张幻灯片的文案、一个尺寸为 1080x1350 的 HTML 文件,以及导出的 PNG 图片。
第 1 步:简短访谈
只询问尚未提供的信息,一次性发出所有问题(最多 5 个):
- 细分领域,以及对方销售或教授的内容。
- 受众:谁会阅读,他们目前有什么问题或需求。
- 轮播图的主题或创意。如果对方没有想法,就根据细分领域提出 3 个主题供其选择。
- 目标:让人保存、分享、评论、点击链接或购买。
- CTA:最后一张幻灯片上唯一要采取的行动(评论某个词、保存、分享、关注、点击链接)。如果目标是销售,CTA 只能有一个,并且要与目标相符。
可选项,仅在对方想要个性化时询问:个人主页的 @ 名称、颜色(hex)、字体、Logo。对方没有回复时,使用模板默认值。
不要编造数据、数字、结果或评价。如果轮播图需要证明材料,而对方没有提供,就在幻灯片上写 [PREENCHER: dado real] 并提醒对方。
第 2 步:选择格式
从以下格式中选择一个,并用一行说明选择了哪种格式及原因:
| 格式 | 适用场景 | 结构 |
|---|---|---|
| 清单 | 多条建议、工具或彼此独立的示例 | 带数字的封面(“7 个……”)、每张幻灯片讲 1 个要点、便于保存的总结、CTA |
| 步骤指南 | 按顺序教授某个流程 | 展示最终成果的封面、每张幻灯片讲 1 个步骤、需要避免的常见错误、CTA |
| 常见错误 | 受众总是重复同一个错误 | 展示错误的封面、错误发生的原因、代价、分 2 或 3 步纠正、CTA |
| 前后对比 | 展示转变或对比 | 展示反差的封面、之前的痛点、发生了什么变化、之后的状态、如何复现、CTA |
| 故事 | 建立共鸣与权威性 | 用场景钩子开场、冲突、转折、可实践的教训、CTA |
长度:6 到 10 张幻灯片。轮播图太短,不值得保存;太长则会让读者中途离开。
第 3 步:逐张撰写文案
生成任何文件之前,先用表格展示完整文案(幻灯片、类型、文本),并请求对方批准。只有对方同意后才能继续。
封面(第 1 张幻灯片)
封面决定轮播图能否留住读者。它必须包含:
- 具体承诺:数字、时限、结果或具体错误。“让内容没人保存的 3 个错误”胜过“内容建议”。
- 悬念:留下一处只有滑动幻灯片才能揭晓的信息。
- 不超过 12 个词,并使用大字。读者能在手机上 2 秒内读完吗?
- 可选的一行辅助文案,以及“向右滑动”的提示。
给出 3 个不同角度的封面选项(数字、错误、结果),并推荐一个。
内容幻灯片(第 2 张至倒数第 2 张)
- 每张幻灯片只讲一个观点。 如果需要讲两个,就拆成两张。
- 标题简短(不超过 8 个词)+ 1 或 2 句辅助文案(总计不超过 25 个词)。内容再多,没人会在手机上读。
- 每个论断都要说明原因或提供具体示例。泛泛而谈的句子(“保持一致”)要删掉或补上示例。
- 每张幻灯片的最后一段都要让人想看下一张:提出开放式问题、预告接下来的内容,或制造悬念。
- 使用对话式语言,贴合对方的说话风格。不要使用受众不会用的行话。不要说“在当今世界”“让我们深入探索”,也不要使用装饰性破折号。
保存页(倒数第 2 张)
用 3 到 5 行总结全部内容,采用清单或“备忘单”的形式,让读者想要保存。最后加上一句与未来使用场景相关的保存提示(“保存下来,下次录视频前对照检查”)。
最后一张:CTA
只要求一个行动,也就是对方在访谈中指定的行动。明确写出要做什么(“评论‘词语’,我就发给你”),不要说“如果你愿意,也许可以”。如果 CTA 是评论某个词,就要突出显示这个词。
第 4 步:生成 HTML 并导出 PNG
- 在当前项目中创建一个工作文件夹:
carrossel-<tema-curto>/。 - 将此技能文件夹中的
templates/carrossel.html复制到该文件夹,并命名为carrossel.html;再将scripts/exportar.mjs复制为exportar.mjs。 - 编辑 HTML:
- 配色和字体:仅在
<style>顶部的:root代码块中修改(--bg、--fg、--muted、--destaque、--card、--fonte-titulo、--fonte-texto)。如需更换字体,也要更换 Google Fonts 的<link>。如果对方提供了品牌色号,请使用;否则保留模板配色,或提出适合该领域的配色,并始终确保文字与背景之间有高对比度。 - 幻灯片:每张幻灯片使用一个
<section class="slide">。模板中包含封面、大号数字、卡片列表、保存提示和 CTA 的示例。可复制、删除并重新排序。 - 更新所有幻灯片中的
@perfil和页码1/N。 - 每张幻灯片的尺寸必须恰好为 1080x1350。不要修改
.slide。 - 用户提供的图片(照片、截图、徽标):请嵌入为 base64(
data:image/...),或使用同一文件夹中的相对路径,绝不要使用其他位置的绝对路径。
- 配色和字体:仅在
- 在工作文件夹中安装一次 Playwright:
如果电脑已安装 Google Chrome,可以跳过npm init -y >/dev/null && npm i playwright npx playwright install chromiumnpx playwright install chromium:脚本会改用 Chrome。需要 Node 18 或更高版本。 - 导出:
生成node exportar.mjs carrossel.html outout/slide-01.png、out/slide-02.png……尺寸为 1080x1350。选项:--seletor ".slide"(默认值)和--escala 2(分辨率翻倍,仅在需要时使用)。 - 实际检查 PNG:打开封面、一张内容页和最后一张。检查文字是否被裁切或超出边距、对比度、重音符号,以及封面能否通过 2 秒测试。修正后重新导出,直到效果正确。
第 5 步:交付
请回复:
out/文件夹的路径和 PNG 文件列表。- 一条简短的建议配文(如果对方有
legenda技能,建议使用它生成完整配文)。 - 一句话说明发布方式:按顺序上传 PNG,并在应用中选择轮播格式。
质量规则
- 内容不能做出无法兑现的承诺。封面承诺什么,正文就要交付什么。
- 不得编造数字、研究或结果。
- 导出幻灯片上的文字最小字号为 38 px;标题字号要大得多。如果放不下,就删减文字,不要缩小字体。
- 所有幻灯片都要使用正确的巴西葡萄牙语重音符号。
- 使用对方的品牌,而不是你自己的:绝不要添加对方未提供的名称、@ 或徽标。