Skilloop
社媒轮播卡片

示意封面由本站生成，真实效果请查看源仓库示例。

如何使用

  1. 1

    复制安装提示

    登录后点击右侧黑色按钮，一键复制。

  2. 2

    粘贴给你的 agent

    在 Claude Code、Codex、Cursor 等工具里粘贴发送，它会自己装好。

  3. 3

    用一句话调用

    像下面这样说出你要做的东西，agent 会按这个 Skill 的流程来做。

你：/social-carousel 帮我做：Instagram、LinkedIn 等三联方形轮播

示例对话，仅演示调用方式，不代表实际产出。

你会得到

  • 1:1 方图
  • 跨卡片标题串联
  • 品牌标识位

适合

  • Instagram、LinkedIn 等三联方形轮播

不适合

  • 很多张卡片的长轮播

你需要

  • 无需额外依赖，agent 直接写 HTML
许可证
Apache-2.0
作者
@nexu-io
来源
nexu-io/html-anything/next/src/lib/templates/skills/social-carousel · ★ 9,014
支持:Claude CodeCodexCursorGemini CLIOpenCode

上游描述

三张方形卡片轮播, 标题串联, 品牌 mark + 编号

其他安装方式

更喜欢自己动手？下面的命令和上方按钮效果相同。

安装提示词（粘贴给你的 Agent）
Read https://skilloop.dev/skills/social-carousel/install.md and follow the instructions to install the skill.
一行命令安装 · Claude Code
npx skills add https://github.com/nexu-io/html-anything/tree/main/next/src/lib/templates/skills/social-carousel -g -a claude-code
一行命令安装 · Codex / Cursor
npx skills add https://github.com/nexu-io/html-anything/tree/main/next/src/lib/templates/skills/social-carousel -g -a codex
手动安装（git） · Claude Code
git clone --depth 1 https://github.com/nexu-io/html-anything.git /tmp/html-anything
mkdir -p ~/.claude/skills && cp -r /tmp/html-anything/next/src/lib/templates/skills/social-carousel ~/.claude/skills/social-carousel

作品版权归原作者所有，依其许可证分发；本站仅做链接与介绍。

相关技能

品牌分享卡（OG 图）
ProSkilloop 原创
图片

品牌分享卡（OG 图）

符合品牌调性的 OG 分享卡：标题、字标、品牌色加一个视觉创意，精确裁成 1200x630。

Skilloop · v1.0.0 · Proprietary (Skilloop Pro)
IP 角色文章封面
ProSkilloop 原创
图片

IP 角色文章封面

每张文章 / 周刊封面都是同一个 IP 角色：用文字版"角色设定"保证整个系列不跑形。

Skilloop · v1.0.0 · Proprietary (Skilloop Pro)
DTC 产品首屏主视觉
ProSkilloop 原创
图片

DTC 产品首屏主视觉

为落地页与广告生成有艺术指导感的棚拍主视觉：灯光配方、品牌色布景、为标题留白。

Skilloop · v1.0.0 · Proprietary (Skilloop Pro)
轮播图文套件
ProSkilloop 原创
图片

轮播图文套件

把干货清单或长帖变成风格统一的竖版轮播图：所有页共用同一份"风格锁"。

Skilloop · v1.0.0 · Proprietary (Skilloop Pro)