README

Guizang Social Card Skill · 小红书图文 / 公众号封面对

!GitHub stars
!License
!Skill
!Social Cards
!Live Photo
!Claude Code
!Codex

English README

一个适配 Claude Code / Codex 等 Agent 环境的图文卡片技能,用于从文章、文案、截图、产品笔记、字幕、照片或用户视频生成小红书 / Rednote 图文组图、Live Photo 动态卡与公众号 21:9 + 1:1 封面对。

内置两套视觉系统,共用一份图文工作流:

- 电子杂志风(Editorial)。像 Monocle / Kinfolk / Cereal 那样克制的版面,适合叙事、生活方式、旅行、阅读、影视、个人观察。
- 瑞士国际主义(Swiss)。网格、单一锚点色、直角发丝线、极致字号对比,适合产品测评、数据、方法论、教程、AI 工具。

 这个 Skill 是 guizang-ppt-skill 的姊妹项目,共享美学语言但独立维护。PPT 解决"横向翻页演讲",这里解决"静态信息流图文"。

!Guizang Social Card Skill 效果展示

 30 秒开始

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


也可以直接把这段话发给有 shell 权限的 AI Agent:

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


已经安装过的话,用这段话更新:

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


安装后直接对 Agent 说:

text
帮我基于这篇文章做一套瑞士风小红书图文,5 张,IKB 蓝。


也可以试这些请求:

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


 效果

- 🖋 双视觉系统:电子杂志风做氛围与叙事,瑞士风做事实与结构,两套共用同一份工作流
- 📐 3 个画板尺寸:.poster.xhs 1080×1440(小红书 3:4)、.poster.wide 2100×900(公众号 21:9)、.poster.square 1080×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 scripts/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 可以容纳一个小过程;三连拼图适合三个并列结果,不适合讲一个必须顺序理解的长