guizang-social-card-skill：Claude Code 批量生成社媒卡片实战

把一篇 5000 字的技术文章拆成小红书 9 图，最耗时的不是内容提炼，而是每张卡片的排版。标题放哪一行、配色用哪个版本、封面对要不要统一风格——这些重复劳动占掉大半时间。guizang-social-card-skill 把这套流程塞进 Claude Code：你告诉 Agent 要生成什么内容，它输出单文件 HTML，再用 Playwright 本地渲染成 PNG。下面会讲清楚它支持哪些画板尺寸、两套视觉系统的区别、怎么安装和运行、渲染脚本怎么用、校验规则有哪些，以及 AGPL-3.0 授权的合规边界。

项目定位：它适合你吗？

guizang-social-card-skill 不是 AI 绘图提示词，而是一套本地渲染流水线。它的核心能力是：在 Claude Code 或 Codex 这类 Agent 环境里，批量生成小红书图文组图和公众号封面对，输出单文件 HTML，再用 Playwright 渲染成 PNG。版式骨架和主题预设已经固定，Agent 只负责填内容和调参数。

这张表能帮你快速判断要不要用它：

维度	说明
它是什么	Claude Code / Codex 的 Skill，用于批量生成社媒卡片
输出格式	单文件 HTML → 本地 Playwright 渲染 PNG
支持平台	小红书（1080×1440）、公众号封面（2100×900 + 1080×1080）
适合人群	内容运营、独立开发者、技术博主、需要把长文拆成组图的人
不适合人群	需要精修摄影、真实测肤、复杂品牌手册审批、闭源商用二次分发的人
授权	AGPL-3.0，商用前需确认开源义务
不承诺的事	批量发布、自动发布、平台审核规则适配

如果你只是想快速产出风格统一的封面图，并且接受 AGPL-3.0 的开源义务，它可以省下大量手动排版时间。如果你需要更精细的品牌控制、闭源商用或复杂审批流程，这个工具的约束可能不适合。

两套视觉系统与三种画板

Editorial vs Swiss：风格差异

项目内置两套视觉系统，覆盖不同内容类型：

视觉系统	适用场景	版式骨架	主题预设
Editorial	克制叙事、旅行笔记、阅读分享	16 个	6 套
Swiss	网格对比、产品测评、数据展示	12 个	4 套

Editorial 偏向杂志排版，适合文字为主的卡片。Swiss 更像数据图表，适合对比类内容或需要强调结构的信息。两套系统加起来有 28 个版式骨架和 10 套主题预设，足够覆盖大部分小红书图文和公众号封面的常见风格。

三种画板尺寸

画板尺寸决定了输出的图片比例：

画板标记	尺寸	用途
.poster.xhs	1080×1440（3:4）	小红书图文标准比例
.poster.wide	2100×900（21:9）	公众号封面宽版
.poster.square	1080×1080（1:1）	公众号封面方版

公众号通常需要宽版和方版两种封面同时准备。小红书图文组图则统一用 1080×1440。这些尺寸来自 README 的画板定义，不代表小红书或微信官方审核规则，发布前仍需要检查平台当前要求。

安装：CLI 与 Clone 两种方式

方式一：CLI 安装（推荐）

前提条件是你已经安装 Claude Code 或 Codex，并且能正常调用 Agent。在终端执行：

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

这个命令会把 Skill 安装到 Claude Code 的个人目录。安装完成后，你可以在 Claude Code 里直接调用 /guizang-social-card-skill，或者在相关任务中让 Agent 自动发现并使用它。

如果你对 Skill 的基础概念还不太熟悉，可以先看这篇入门文章：手写提示词累吐了？Claude Code 这个功能让我效率翻 3 倍。

方式二：Clone 到本地

如果你需要修改模板或定制版式，可以直接 clone 项目：

git clone https://github.com/op7418/guizang-social-card-skill ~/.claude/skills/guizang-social-card-skill

Clone 后的目录结构大致如下：

guizang-social-card-skill/
├── SKILL.md
├── templates/
├── scripts/
│   ├── render.mjs
│   └── validate-social-deck.mjs
└── references/

本地定制的好处是你可以直接改模板、调整字号、修改配色。但改动后的版本仍受 AGPL-3.0 约束，二次分发或作为网络服务提供时需要开源。

渲染与校验：从 HTML 到 PNG

渲染脚本用法

Agent 输出单文件 HTML 后，需要用 Playwright 渲染成 PNG。项目提供了渲染脚本：

node render.mjs

这个脚本会读取当前任务目录下的 HTML 文件，调用 Playwright 无头浏览器渲染，输出 PNG 到同目录。渲染过程中可能遇到的常见问题：

• Playwright 未安装：先执行 npx playwright install chromium
• HTML 文件路径不对：检查 Agent 输出的文件名是否符合脚本预期
• 字体缺失：中文字体需要本地有对应字体文件，否则可能出现渲染空白

渲染完成后，建议人工检查一遍图片效果。尤其是中文标题过长、遮罩层遮挡、人物脸部避让和 footer 碰撞这类问题，脚本无法完全覆盖。

校验脚本用法

项目还提供了质量校验脚本：

node validate-social-deck.mjs path/to/task-dir

校验规则包括以下 6 条：

1. 溢出检测：文字超出画板边界会被标记
2. 字号上限：标题字号超过阈值会报错
3. footer 碰撞：底部 footer 与正文内容重叠会被标记
4. 横带密度：Swiss 系统的横带过于密集会触发警告
5. frame 溢出：版式骨架的 frame 边界超出画板会被标记
6. Swiss 字重：Swiss 系统的字重配置不符合规范会报错

校验脚本可以帮你快速定位排版问题，但它不会自动修复。你需要回到 HTML 模板或 Agent 输出，调整参数后再重新渲染。

如果你想让 Agent 更准确地输出符合规范的 HTML，可以参考这篇配置指南：别再让 Claude 乱写代码了！一个配置文件让 AI 准确率提升 10%。

素材来源与授权风险

图源工作流

项目支持从多个图源获取素材：

• Unsplash：免费高质量图片，多数可商用
• Pexels：免费图片，需核对具体授权条款
• Flickr CC：Creative Commons 图片，需标注来源和授权类型
• Wallhaven：壁纸类图片，商用前需确认授权
• 搜索结果：通用搜索引擎抓取，授权状态不确定

Agent 会根据你的需求自动选择图源，但素材的授权状态不会自动验证。发布前你需要人工核对每张图的来源和授权条款，尤其是商用场景。如果图片标注了“不可商用”或“需署名”，你需要在卡片中保留相关信息。

AGPL-3.0 授权解读

项目采用 AGPL-3.0 授权，比 MIT 或 Apache 更严格。核心要求：

场景	要求
个人使用	无限制，自由使用和修改
二次分发	必须保持 AGPL-3.0，提供源码
网络服务	如果作为 SaaS 或网络服务提供，必须开源服务端代码
商用	可以商用，但必须遵守开源义务

如果你的团队有闭源需求，或者计划把这个工具集成到闭源产品中，需要在商用前确认合规。AGPL-3.0 要求你在提供网络服务时开源服务端代码，这对部分商业团队可能是障碍。

风险提示

需要明确几个边界：

• 项目只生成 PNG 资产，不提供批量发布或自动发布功能
• 画板尺寸来自 README 定义，不代表小红书或微信官方审核规则
• Stars 和 Forks 数量会变化，不适合作为核心价值依据
• 素材授权需要人工核对，Agent 无法自动完成

如果你对 Agent 的授权和合规有更多疑问，可以看这篇子代理指南：Claude 回复太啰嗦？用 Subagent 打造你的专属 AI 团队。

延伸阅读

如果你想更系统地了解 Claude Code Skill 和 Agent 工具，可以看这几篇文章：

• 手写提示词累吐了？Claude Code 这个功能让我效率翻 3 倍：Skill 的基础概念和提示词复用价值
• 别再让 Claude 乱写代码了！一个配置文件让 AI 准确率提升 10%：用 CLAUDE.md 规范 Agent 输出
• Claude 回复太啰嗦？用 Subagent 打造你的专属 AI 团队：子代理架构和多 Agent 协作

这几篇都是 Claude Code 使用技巧的实战总结，能帮你更好地理解 Skill 在 Agent 工作流中的位置。

结论

guizang-social-card-skill 把小红书图文和公众号封面的排版流程塞进 Claude Code，让你用 Agent 批量生成风格统一的卡片。它内置两套视觉系统、三种画板尺寸、28 个版式骨架和 10 套主题预设，覆盖大部分内容运营场景。

但它的边界也很清楚：只生成 PNG 资产，不提供发布功能；素材授权需要人工核对；AGPL-3.0 要求你在商用前确认开源义务。如果你需要精修摄影、复杂品牌审批或闭源商用，这个工具的约束可能不适合。

下一步建议：点击 GitHub 链接，用 CLI 命令安装 Skill，试着生成第一组卡片。遇到渲染问题先检查 Playwright 安装状态和字体配置，校验脚本能帮你定位大部分排版错误。