mcpField
C
carrossel

carrossel

github.com/andreoliveiras营销与增长28186 次安装3 周前更新
代码仓库

关于 carrossel

carrossel 是用于制作 Instagram 轮播内容的技能,涵盖逐页文案、1080x1350 HTML 和导出的 PNG。它通过简短访谈、文案确认和视觉检查引导制作与交付。

主要功能

  1. 01访谈受众与内容目标
  2. 02从五种轮播结构中选择
  3. 03撰写逐页文案
  4. 04生成 1080x1350 HTML 页面
  5. 05导出并检查 PNG

适用场景

  1. 01根据主题和受众规划轮播
  2. 02制作文件前审核每页文案
  3. 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 个):

  1. 细分领域,以及对方销售或教授的内容。
  2. 受众:谁会阅读,他们目前有什么问题或需求。
  3. 轮播图的主题或创意。如果对方没有想法,就根据细分领域提出 3 个主题供其选择。
  4. 目标:让人保存、分享、评论、点击链接或购买。
  5. 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

  1. 在当前项目中创建一个工作文件夹:carrossel-<tema-curto>/。
  2. 将此技能文件夹中的 templates/carrossel.html 复制到该文件夹,并命名为 carrossel.html;再将 scripts/exportar.mjs 复制为 exportar.mjs。
  3. 编辑 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/...),或使用同一文件夹中的相对路径,绝不要使用其他位置的绝对路径。
  4. 在工作文件夹中安装一次 Playwright:
    npm init -y >/dev/null && npm i playwright
    npx playwright install chromium
    
    如果电脑已安装 Google Chrome,可以跳过 npx playwright install chromium:脚本会改用 Chrome。需要 Node 18 或更高版本。
  5. 导出:
    node exportar.mjs carrossel.html out
    
    生成 out/slide-01.png、out/slide-02.png……尺寸为 1080x1350。选项:--seletor ".slide"(默认值)和 --escala 2(分辨率翻倍,仅在需要时使用)。
  6. 实际检查 PNG:打开封面、一张内容页和最后一张。检查文字是否被裁切或超出边距、对比度、重音符号,以及封面能否通过 2 秒测试。修正后重新导出,直到效果正确。

第 5 步:交付

请回复:

  • out/ 文件夹的路径和 PNG 文件列表。
  • 一条简短的建议配文(如果对方有 legenda 技能,建议使用它生成完整配文)。
  • 一句话说明发布方式:按顺序上传 PNG,并在应用中选择轮播格式。

质量规则

  • 内容不能做出无法兑现的承诺。封面承诺什么,正文就要交付什么。
  • 不得编造数字、研究或结果。
  • 导出幻灯片上的文字最小字号为 38 px;标题字号要大得多。如果放不下,就删减文字,不要缩小字体。
  • 所有幻灯片都要使用正确的巴西葡萄牙语重音符号。
  • 使用对方的品牌,而不是你自己的:绝不要添加对方未提供的名称、@ 或徽标。

评论

支持 Markdown