Guizang Social Card Skill：为 Claude Code / Codex 打造的小红书图文与公众号封面生成技能
Guizang Social Card Skill 是一个适配 Claude Code / Codex 等 Agent 环境的图文卡片技能，可从文章、文案、截图、产品笔记、字幕、照片或用户视频生成小红书/Rednote 图文组图、Live Photo 动态卡与公众号 21:9+1:1 封面对。内置电子杂志风和瑞士国际主义两套视觉系统，提供 28 个版式骨架、10 套主题预设，支持单文件 HTML 渲染 PNG 与 Playwright 校验脚本。
社区作者 · zZz
它解决什么问题
Guizang Social Card Skill 是一个面向 Claude Code / Codex 等 Agent 环境的社交图文卡片生成技能，用于将文章、文案、截图、产品笔记、字幕、照片或用户视频转化为小红书/Rednote 图文组图、Live Photo 动态卡和公众号 21:9 + 1:1 封面对。项目内置电子杂志风（Editorial）与瑞士国际主义（Swiss）两套视觉系统，共用一份图文工作流。
Editorial 风格类似 Monocle/Kinfolk/Cereal，适合叙事、生活方式、旅行、阅读、影视、个人观察；Swiss 风格基于网格、单一锚点色、直角发丝线和极致字号对比，适合产品测评、数据、方法论、教程和 AI 工具。
技能提供 3 个画板尺寸（小红书 3:4 1080×1440、公众号 21:9 2100×900、公众号 1:1 1080×1080）、28 个版式骨架（Editorial M01-M16、Swiss S01-S12）、10 套主题预设（Editorial 6 套 + Swiss 4 套锚点色）。Live Photo 功能支持单视频动态卡、二宫格、三宫格、四宫格、三连拼图和长视频低成本诊断，小红书按 5s 规划，微信公众号文章内按 3s 规划。
图源工作流支持用户图优先，无图时按 Unsplash → Pexels → Flickr CC → Wallhaven → 直接搜索的优先级取图。项目还提供 WebGL 墨流背景、文字压图与主体避让、截图美化资产、MapLibre + OSM 地图组件以及 validate-social-deck.mjs 校验脚本（基于 Playwright 的 9 条版式规则）。渲染采用单文件 HTML + Playwright，node render.mjs 直接输出 PNG，交付产物为 output/*.
png 或 Live Photo 分支的 JPG + MOV + .pvt 包。适用于 Claude Code、Codex、Cursor 等能读写文件并执行 shell 的 Agent 环境，不推荐普通 Chatbot 使用。
— 本文由 AI 根据公开来源辅助整理，命令、版本与许可证请在使用前到原始页面复核。
安装 / 开始使用
方式一：一行命令安装（推荐）。在终端执行：
npx skills add https://github.com/op7418/guizang-social-card-skill --skill guizang-social-card-skill。方式二：把这段话直接发给有 shell 权限的 AI Agent：
帮我安装 guizang-social-card-skill 这个 Claude Code skill。请按下面步骤做：
- 确保 ~/.claude/skills/ 目录存在（不存在就创建）
执行
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/ 三项
- 告诉我装好了，之后我说“做一套小红书图文”之类的话就会触发这个 skill
git clone https://github.com/op7418/guizang-social-card-skill.git ~/.claude/skills/guizang-social-card-skill安装完成后需确认目录中包含 SKILL.md、assets/、references/。已安装过时更新方式：进入 ~/.claude/skills/guizang-social-card-skill 执行
git pull。
首次使用：安装后对 Agent 说“帮我基于这篇文章做一套瑞士风小红书图文,5 张,IKB 蓝。”即可触发。Agent 会按 7 步工作流执行：Intake（抓目标平台/风格/内容素材/用户图，无图时给 A/B/C 三选）→ Style & Theme（选 Editorial 或 Swiss，再从 10 套预设里选主题色）→ Layout Selection（从 28 个版式骨架里挑选）→ Asset Prep（取图并落本地 + 写 SOURCES.
md）→ Compose & Render（拷种子模板 → 替换 <!-- POSTERS_HERE --> → node render.mjs）→ Deliver & Review（先把 PNG 给用户看，默认不自动跑校验）→ Iterate（按反馈改样式或换版式，重渲）。 渲染命令：node render.mjs，可一次渲染 task 目录下 index.html 中的多个 .poster。校验命令：node validate-social-deck.
mjs path/to/task-dir，基于 Playwright 真实渲染测量 9 条规则（溢出、footer 碰撞、字号、密度、行数、margin、视觉边界、标题间距等）。
常见问题：可以批量出图，一个 index.html 含多个 .poster 会逐个截 PNG；不允许自定义颜色，只能从 10 套预设主题里选；支持 Live Photo，小红书按 5s、公众号文章内按 3s，发布通常需要 .pvt 包传到 iPhone 后从对应 App 发布；Codex 写不合规时可检查种子模板与 references/components.md 是否一致；更新可重新运行安装命令或
git pull；支持中英文图文，Editorial 的 Playfair Display + Noto Serif、Swiss 的 Inter + Helvetica 同时覆盖中英文。
来源教程配图
