guizang-social-card-skill：把文章转成小红书轮播图与公众号封面

一篇长文章值得有一张体面的封面和一组轮播图；但用 Figma 一个个手抠九、十张版式，往往不是一周营销时间里最划算的小时。op7418/guizang-social-card-skill 是一个 Claude Code 与 Codex skill，吃进文章、文案、截图、产品笔记、字幕、照片，吐出小红书轮播图、公众号封面组对、Live Photo 动图卡片——每个任务都从一个 HTML 文件渲染。

为什么这个 skill 重要

skill 自带两套视觉体系——Editorial 杂志风与 Swiss International——共享同一套工作流。共 28 个版式（Editorial M01–M16，Swiss S01–S12）和 10 套主题预设（6 套 Editorial + 4 套 Swiss 强调色），覆盖大多数编辑与品牌系统需求。渲染走 Playwright，每个任务一个 index.html，所以与其再起一轮 prompt，不如直接编辑 HTML 做小修小补。

三种画布尺寸通过 data-board 属性暴露：.poster.xhs（1080×1440，小红书 3:4）、.poster.wide（2100×900，公众号 21:9）、.poster.square（1080×1080，公众号 1:1）。同一份内容在 wide 与 square 上各渲一遍，得到一组匹配的封面——非常适合公众号文章里头图与分享卡要保持一致的场景。Live Photo 动图卡片（小红书 5 秒、公众号内文 3 秒）以 JPG + MOV + .pvt 三件套的形式交付，但 .pvt 的发布通常需要在 iPhone 端做一步。

不允许自定义 hex 色——只能从 10 套预设里挑。License 是 AGPL-3.0；闭源商业产品要把这一点算进去。

安装

README 给了一条标准命令与一条手动备选：

# 标准
npx skills add https://github.com/op7418/guizang-social-card-skill --skill guizang-social-card-skill

# 手动克隆
git clone https://github.com/op7418/guizang-social-card-skill.git ~/.claude/skills/guizang-social-card-skill

skill 在 Claude Code 与 Codex 上原生支持。Cursor 与其他本地 agent 如果暴露了文件读写 + shell 也能用。纯聊天界面（没有文件系统或渲染管线）不支持。

真实工作流：从一篇文章做五张小红书 Swiss 轮播图

你写了一篇最近产品发布的文章，想把它做成五张 Swiss 风的小红书轮播图，主色用 IKB Klein Blue。skill 已经备好版式与主题——你只要把文章指给它。

第一步。装好 skill，在文章所在目录里打开 Claude Code 会话，提需求：

Build a 5-card Swiss-style Xiaohongshu carousel from the article at
articles/launch-q3.md. Use IKB Klein Blue accent.

第二步。skill 读文章，给每张卡片挑一个 Swiss 版式（S01–S12），套上 IKB Blue 预设，并在 output/<task-name>/ 下生成每个任务一份 index.html。每张卡片都用 .poster.xhs 数据板，1080×1440。

第三步。用 Playwright 渲染：

node render.mjs output/<task-name>

你会看到五张 PNG 跟 HTML 一起出来。在看图器里打开，确认版式、文案、主色都对。

第四步。要做小幅文案修改，直接编辑生成的 index.html 比再跑一轮 prompt 快——skill 的"单文件 HTML 渲染"通道就是为了让人能改。

真实工作流：从同一篇文章做公众号 21:9 头图 + 1:1 分享卡

你想让同一篇文章在公众号发出来时有一张 21:9 头图和一张 1:1 分享卡，看起来是一套。

第一步。让 skill 出组对：

Make a matched WeChat cover pair from articles/launch-q3.md: a 21:9 header
and a 1:1 share card, same visual system.

第二步。skill 在同一个任务目录下写出两张海报：一张 .poster.wide（2100×900），一张 .poster.square（1080×1080）。两张引用同一套主题与版式，所以配色与栅格都对得上。

第三步。一条命令渲两张：

node render.mjs output/<task-name>

Playwright 一次跑完，wide 与 square 的 PNG 并排产出。你可以直接把 wide 当文章头图、square 当分享卡图，无需再做修图。

第四步。如果想要正文里那张 3 秒的 inline Live Photo，把它作为额外项让 skill 一起出。skill 吐出 JPG + MOV + .pvt 三件套；推到一台 iPhone 上做最后一步发布。

• 选一套视觉体系就守住，别在一组轮播图里混 Editorial 与 Swiss——读起来像"被委员会设计过"。
• 文章字体层级强时偏 Swiss（S01–S12）；照片主导时偏 Editorial（M01–M16）。
• 文案微调直接编辑 index.html——再跑一轮 prompt 浪费渲染时间。
• 要做演示文稿横版幻灯片，去找它的兄弟 guizang-ppt-skill；这个 skill 是社交卡片，不是横版 PPT。
• Live Photo 发布通常需要 iPhone——桌面与 Web 一般不能直接上传 .pvt。
• License 是 AGPL-3.0；闭源商业产品要把这算进去，或者换一个。

何时不要用

如果你的目标是横版演示文稿幻灯片、长视频剪辑、纯图片修图、没有版式需求的纯文本帖，或者属于两个支持的视觉体系之外的小众风格（README 明确排除 OOTD 实拍、梦核、仿胶片调色、真实测肤美妆），这个 skill 就是错的工具——用它的兄弟 guizang-ppt-skill、视频编辑器、修图工具，或者直接写帖。skill 的价值在于精确的卡片版式渲染；超出这个范围，搭画布的折腾反而是负。

在 leaderboard 查看更多设计与社交卡片 skill。