Guizang Social Card Skill
Claude Code / Codex skill — generate Xiaohongshu carousels & WeChat 21:9+1:1 cover pairs. Editorial × Swiss visual systems, 28 layouts, 10 themes, single-file HTML → PNG. 小红书图文…
Install
npx skills add https://github.com/op7418/guizang-social-card-skill --skill guizang-social-card-skillclaude mcp add guizang-social-card-skill -- npx skills add https://github.com/op7418/guizang-social-card-skill --skill guizang-social-card-skill{
"mcpServers": {
"guizang-social-card-skill": {
"command": "npx",
"args": [
"skills",
"add",
"https://github.com/op7418/guizang-social-card-skill",
"--skill",
"guizang-social-card-skill"
]
}
}
}Install command taken from the project's README or registry entry. Always review code before running it.
README excerpt
Read full README on GitHub →Guizang Social Card Skill · 小红书图文 / 公众号封面对
一个适配 Claude Code / Codex 等 Agent 环境的图文卡片技能,用于从文章、文案、截图、产品笔记、字幕、照片或用户视频生成小红书 / Rednote 图文组图、Live Photo 动态卡与公众号 21:9 + 1:1 封面对。
内置两套视觉系统,共用一份图文工作流:
- 电子杂志风(Editorial)。像 Monocle / Kinfolk / Cereal 那样克制的版面,适合叙事、生活方式、旅行、阅读、影视、个人观察。
- 瑞士国际主义(Swiss)。网格、单一锚点色、直角发丝线、极致字号对比,适合产品测评、数据、方法论、教程、AI 工具。
这个 Skill 是 guizang-ppt-skill 的姊妹项目,共享美学语言但独立维护。PPT 解决"横向翻页演讲",这里解决"静态信息流图文"。
30 秒开始
npx skills add https://github.com/op7418/guizang-social-card-skill --skill guizang-social-card-skill
也可以直接把这段话发给有 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/ 是否存在。
已经安装过的话,用这段话更新:
帮我更新 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 卡片,文字压在安静区域。
把这三个游戏片段做成三连 Live Photo 拼图,用 Swiss 风介绍攻略要点。
效果
- 🖋 双视觉系统:电子杂志风做氛围与叙事,瑞士风做事实与结构,两套共用同一份工作流
- 📐 3 个画板尺寸:
.poster.xhs1080×1440(小红书 3:4)、.poster.wide2100×900(公众号 21:9)、.poster.square1080×1080(公众号 1:1) - 🎬 Live Photo 动态卡:支持单视频、二宫格、三宫格、四宫格、三连拼图、长视频低成本诊断;小红书按
5s,微信公众号文章内按3s - 🧩 28 个版式骨架:Editorial 16 个(
M01-M16,含 Image-Led Cover、Pipeline、Before/After 等)+ Swiss 12 个(S01-S12,含 KPI Tower、H-Bar Chart、Matrix + Hero 等) - 🎨 10 套主题预设:Editorial 6 套(墨水经典、靛蓝瓷、森林墨、牛皮纸、沙丘、Midnight Ink 暗色)+ Swiss 4 套锚点色(IKB Klein Blue、柠檬黄、柠檬绿、安全橙)
- 🖼 图源工作流:用户图优先;无图时按 Unsplash → Pexels → Flickr CC → Wallhaven → 直接搜索的优先级取图,落本地 + 自动写
SOURCES.md - 🌫 WebGL 墨流背景:杂志风 hero 页可挂动态墨流;低性能或截图时可禁用
- 🪧 文字压图 + 主体避让:满铺图先做 quiet-zone 与主体映射,文字避开人脸、产品和关键动作;需要时只加局部 tint,不默认全图遮罩
- 🧰 截图美化资产:9 张 WebP 真实材质背景(Editorial 5 / Swiss 4),配套
.frame-shot/.device-browser/.device-phone工具类 - 🗺 地图组件:MapLibre + OSM 真实瓦片,支持多 pin + 连线,适合旅行攻略
- ✅ 校验脚本:
validate-social-deck.mjs自动检测溢出、字号上限、4 横带密度、footer 碰撞 - 📄 单文件 HTML + Playwright 渲染:不需要前端构建链,
node render.mjs直接出 PNG
Live Photo 效果与版式
Live Photo 在这个 Skill 里的定位是"把用户提供的视频装进社交卡版式",不是让 Agent 随机找公开视频,也不是长视频正片剪辑。先让首帧按静态卡片成立,再让 3s/5s 的动作补充信息。
| 版式 | 效果 | 适合 |
|---|---|---|
| 单视频动态卡 | 一段视频裁成 3:4 吃满画布;需要文字时只放一组短标题,按 M16 Image-Led Cover / image-overlay 的主体避让、quiet-zone、字体与局部 tint 规则处理 |
咖啡、旅行、健身动作、产品状态、游戏瞬间 |
| 二宫格 / 三宫格 / 四宫格拼图 | 多个视频井拼成一张 Live Photo,通常不加文字,让高质量素材自己说话 | 旅行风景、穿搭精选、空间细节、菜品过程、运动动作 |
| 三连 Live Photo 拼图 | 三段几秒素材并列,提高短时长内的信息密度;只在必要时加一行真实场景标题 | 攻略步骤、前后对比、多视角展示、模型测试结果 |
| 长视频诊断 | 对超长素材做稀疏抽帧 / contact sheet,判断更适合裁哪段、倍速、拆分,还是请用户指定时间段 | 用户给了 1-3 分钟素材但还没选片段 |
| 平台发布包 | 输出调试用 JPG + MOV,以及 iPhone 测试/发布用 .pvt 包 |
小红书、微信公众号文章内 Live Photo |
信息量判断是第一步:微信 3s 更适合一个动作点或一次状态变化;小红书 5s 可以容纳一个小过程;三连拼图适合三个并列结果,不适合讲一个必须顺序理解的长故事。
Live Photo 生成指南
Similar plugs
Makes your AI agent think like the laziest senior dev in the room. The best code is the code you never wrote.
An AI skill that provides design intelligence for building professional UI/UX across multiple platforms.
Turn any codebase, with its docs, SQL schemas, configs, and PDFs, into a queryable knowledge graph. A /graphify skill for Claude Code, Cursor, Codex, and Gemini CLI: local…
Why use many token when few token do trick. Viral skill + proxy for coding agents that cuts 65% of tokens by talking like a caveman.
Production-grade engineering skills for AI coding agents.