op7418/guizang-social-card-skill · 上手攻略

• 仓库：op7418/guizang-social-card-skill
• 链接：https://github.com/op7418/guizang-social-card-skill
• 分类：skill
• 作者：Tom
• 更新：2026-07-08

这是什么

guizang-social-card-skill 是一个面向 Claude Code / Codex 等 AI Agent 的图文卡片生成技能（Skill），专门用于从文章、截图、产品笔记、照片或视频素材，自动生成小红书 / Rednote 图文组图、Live Photo 动态卡片，以及公众号 21:9 + 1:1 封面对。

它的核心设计哲学是：把"做一张好看的社交媒体封面"这件事，从 Figma/Canva 的手动操作，，变成对 Agent 的一句自然语言指令。内置两套视觉系统——Editorial（电子杂志风） 和 Swiss（瑞士国际主义），共用 28 个版式骨架、10 套预设主题色，全部通过单文件 HTML + Playwright 渲染管线输出 PNG。

姊妹项目是 guizang-ppt-skill，共享同一套美学语言——PPT 解决横向翻页，这个解决静态信息流图文。

解决什么问题

运营小红书、公众号时，配图制作是高频但耗时的痛点：需要设计工具、版式感、配色知识，且批量出图时效率极低。

guizang-social-card-skill 把这个过程 Agent 化：

• 运营人员：把文章链接或文案丢给 Claude Code，Agent 自动生成符合品牌调性的多张社交卡片
• 内容创作者：用自然语言指定风格（"瑞士风 + IKB 蓝"），Agent 从 28 个版式里选最合适的生成
• 懒人方案：只需说"帮我把这篇文章做成 5 张小红书图文"，剩下的全交给 Agent

它的质量控制机制（Playwright 渲染 + 9 条校验规则）让 AI 生成的图片在字号、溢出、留白等细节上有保障，不会出现"AI 出图、文字出界"的尴尬。

快速安装

方式一：NPX 安装（推荐，Claude Code 直接识别）

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

方式二：直接克隆到 Claude Code skills 目录

把下面这段话直接发给 Claude Code / Cursor / 任何有 shell 权限的 AI Agent，它会自动完成安装：

帮我安装 guizang-social-card-skill。请把 https://github.com/op7418/guizang-social-card-skill 克隆到 ~/.claude/skills/guizang-social-card-skill，安装完成后检查 SKILL.md、assets/、references/ 是否存在。

方式三：手动 git clone

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

验证安装

ls ~/.claude/skills/guizang-social-card-skill/
# 应看到：SKILL.md、assets/、references/ 三项

更新技能

帮我更新 guizang-social-card-skill。请进入 ~/.claude/skills/guizang-social-card-skill 执行 git pull，然后告诉我当前最新 commit。

核心用法

安装完成后，直接对 Agent 说自然语言指令即可触发技能。常用触发语：

帮我基于这篇文章做一套瑞士风小红书图文，5张，IKB蓝。
基于这份产品测评做一套小红书 3:4，标题用电子杂志风。
帮我把这篇文章做成公众号封面对：21:9 头图 + 1:1 分享卡，视觉保持一致。
我有3张露营照片，帮我做一套全图风格的小红书图文。
把这段游戏攻略文案做成一套小红书图文，需要从 wallhaven 拿点游戏原画。
我有一段咖啡视频，帮我做成小红书5秒 Live Photo 卡片，文字压在安静区域。

7 步工作流（Agent 内部执行）

Skill 的工作流分 7 步，Agent 自动按序执行：

1. Intake — 确认：目标平台 / 风格 / 内容素材 / 用户图；无图时给 A/B/C 三选（自己拍图 / AI 生图 / 网络取图）
2. Style & Theme — 选 Editorial 或 Swiss，再从 10 套预设主题里选色（不允许自定义 hex 值）
3. Layout Selection — 从 28 个版式骨架里选（Editorial M01-M16 / Swiss S01-S12）
4. Asset Prep — 取图（Unsplash → Pexels → Flickr CC → Wallhaven → 直接搜索），落本地 + 写 SOURCES.md
5. Compose & Render — 拷贝种子模板 → 替换内容 → node render.mjs 渲染 PNG
6. Deliver & Review — 先把 PNG 给用户看，询问是否需要跑 validator
7. Iterate — 用户反馈后改 inline 样式或 swap 版式/替图，重渲染

核心画板尺寸

校验脚本（可选）

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

基于 Playwright 真实 DOM 渲染的 9 条规则（超出立即报错）：

• R1: 任何 section 超出画板边界
• R2: 内容压在底部 footer/page-number
• R3: Swiss 大标题字号与字重失衡
• R4: 正文字号低于手机可读下限
• R5: 1440 高画板切 4 横带，每带应有内容或主动留白
• R6: .h-xl / .h-display / .h-statement 行数超出版式预算
• R7: 浏览器默认 margin 造成版式漂移
• R8: 测量真实可见内容边界，报告超出和底部空白
• R9: 标题与下一块内容间距过小

⚠️ 官方默认不自动跑 validator，而是先让用户看完图再问是否需要检查，避免每轮多花数十秒。

Live Photo 生产

Live Photo 在这个 Skill 里是"把视频素材装进社交卡版式"，不是长视频剪辑。流程：

判断信息量 → 3s（公众号）还是 5s（小红书）→ 选单视频/二宫格/三宫格/四宫格/三连拼图
→ 抽首帧静态卡检查 → 生成 JPG + MOV + .pvt → 提醒发布路径

⚠️ 小红书 Live Photo 发布需要把 .pvt 传到 iPhone，从 App 内发布；桌面端/网页端通常无法直接发布 Live Photo。

10 套主题预设

Editorial（电子杂志风，6 套）

Swiss（瑞士国际主义，4 套锚点色）

⚠️ 官方不允许自定义 hex 色值，这是刻意的设计选择，旨在保证产出风格的稳定性和一致性。

典型适用场景

坑与注意

1. 不要自己改 hex 色值：10 套预设是经过设计的固定色票，不允许自定义。强行改 hex 会破坏整体风格，Agent 会拒绝。

2. Live Photo 不能替代长视频剪辑：Live Photo 的定位是把用户视频装进静态卡片版式，不是做视频内容。超过 5s/3s 的内容不应硬塞进 Live Photo。

3. 批量出图注意交付路径：输出文件在 output/*.png，不要写到 Skill 根目录。桌面端无法直接发布 Live Photo .pvt，需要传到 iPhone 从 App 发布。

4. 长文章需要拆解：原文直接生成效果差，Agent 会先从文章提取核心观点，再选择 Editorial（叙事节奏）或 Swiss（拆条数据）走不同路线。

5. 无用户图时的图源依赖：当用户不提供素材，Agent 按 Unsplash → Pexels → Flickr CC → Wallhaven → 直接搜索的优先级取图，需要网络访问。

6. 平台分辨率差异：小红书（3:4，1080×1440）和公众号封面（21:9，2100×900 / 1:1，1080×1080）尺寸不同，需在任务开始前确认目标平台。

7. LLM 生图需配合其他模型：Skill 本身不包含 AI 生图能力，AI 出图依赖所连接 Agent 的模型生图能力。

8. AGPL-3.0 协议：修改后必须开源（含网络服务）；闭源商业使用需注意合规。

与同类对比

核心差异：guizang-social-card-skill 是唯一一个专为 AI Agent 设计的社交卡片生成 Skill，可直接嵌入 AI 工作流；其他工具均面向人类手动操作。

一句话推荐结论

如果你做小红书/公众号内容运营，或需要批量生成社交媒体配图，把 guizang-social-card-skill 装进 Claude Code/Codex 后，一句中文指令就能生成杂志级图文，无需打开 Figma，也不用担心 AI 生成的图文字号出界——这可能是目前最省力的社交卡片批量生产方案。