Guizang Social Card Skill · 小红书图文 / 公众号封面对
English README
一个适配 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.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 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 生成指南
- 确认平台和素材:用户视频是默认输入;公开视频素材只用于 demo / 宣传测试。先确认小红书、微信公众号文章内,还是本地测试。
- 判断信息量:问自己
3s/5s 内观众能看到什么。如果需要解释、音频或完整教程才能懂,就不应该硬塞进 Live Photo。
- 选择结构:单个强素材用单视频动态卡;多个好素材用二宫格 / 三宫格 / 四宫格;三个并列结果用三连;长视频先做低成本诊断。
- 先做静态卡检查:首帧必须像一张合格社交卡。检查裁切、主体、文字位置、平台安全区,不要把制作要求写成观众可见文案。
- 再生成动态资产:在任务文件夹输出预览视频、关键 JPG、MOV 和
.pvt;不要把生成结果写到 Skill 根目录。
- 交付时提醒发布路径:小红书按
5s,微信公众号文章内按 3s;通常需要把 .pvt 作为一个包传到 iPhone,再从对应 App 发布,电脑端/网页端一般不能直接发布 Live Photo。
可直接这样让 Agent 做:
把这个咖啡视频做成小红书 5 秒 Live Photo,标题只放一组,避开杯子和手。
这四段旅行视频素材质量很好,帮我做成四宫格 Live Photo,不加文字。
这段 2 分钟游戏视频先做 contact sheet,帮我判断适合截哪 5 秒做攻略 Live Photo。
适合 / 不适合
✅ 合适:小红书图文组图 / Live Photo 动态卡 / 公众号封面对 / 微信朋友圈封面 / 视频号封面 / 文章配图 / 教程拆页 / 数据回顾 / 旅行攻略 / 产品测评 / 截图说明
❌ 不合适:横向翻页 PPT(用 guizang-ppt-skill)/ 长视频正片剪辑 / 纯图片修图 / 无版式诉求的纯文字编辑
11 个小红书品类适配
按"能力圈"分三档,详见 references/category-cookbook.md:
端到端强势(文 / 结构 / 图都在能力圈内):
文与结构强势,图依赖用户或搜图源:
- 游戏、影视、美食(食谱方向)、彩妆(教程方向)、健身、家居、穿搭(精选方向)
能力圈外,主动说清(不强行接):
- OOTD 实拍流 / 梦核 / 仿胶片调色 / 真实测肤美妆等强烈依赖摄影或后期的细分赛道
常见使用场景
| 任务 |
推荐方式 |
| 长文章 → 小红书图文 |
抽核心观点,Editorial 走叙事节奏,Swiss 走拆条数据 |
| 产品测评 / 工具回顾 |
Swiss + IKB 蓝,优先 S09 KPI Tower / S10 H-Bar Chart |
| 旅行 / 生活方式分享 |
Editorial + Midnight Ink 或 Dune,M16 Image-Led Cover 满铺主图 |
| 公众号封面对 |
同一份内容渲两块:.poster.wide 21:9 + .poster.square 1:1,视觉一致 |
| 截图教程 / 工具说明 |
.frame-shot + .device-browser 包壳,优先 Swiss 网格底 |
| 游戏攻略 / 影视回顾 |
Editorial + Midnight Ink,从 Wallhaven 取游戏原画做满铺 |
| 用户视频 → Live Photo |
先判断 3s/5s 信息量,再选单视频 / 拼图 / 三连 / 长视频诊断 |
| 数据回顾 / 年终总结 |
Swiss + Lemon 或 Safety Orange,矩阵 + ledger 组合 |
为什么是单文件 HTML 渲 PNG
- Agent 友好:HTML + CSS 是文本,Agent 能直接写、读、改、验证
- 版式精确:CSS Grid + 严格字号 / 留白 / 网格,远超 Markdown 排版能力
- 图源开放:可以接 Unsplash / Pexels / Wallhaven / Mapbox / OSM 等任意网络资源
- 质量可校验:
validate-social-deck.mjs 用 Playwright 跑真实 DOM 测量,不是猜
- 交付简单:
output/*.png 直接发,不需要部署、不需要导出工具
- 动态卡可落地:Live Photo 分支输出
JPG + MOV + .pvt,并记录小红书 / 微信的时长限制和手机端发布路径
平台支持
| 平台 |
状态 |
说明 |
| Claude Code |
支持 |
原生 Skill 工作流,适合生成 + 迭代图文 |
| Codex |
支持 |
适合长流程图文生成、调用图片源、做视觉检查 |
| Cursor / 其他本地 Agent |
可用 |
需要能读写文件 + 执行 shell |
| 普通 Chatbot |
不推荐 |
没有文件系统和渲染管线时无法稳定出图 |
安装
方式一:一行命令安装(推荐)
npx skills add https://github.com/op7418/guizang-social-card-skill --skill guizang-social-card-skill
方式二:把下面这段话直接发给 AI
帮我安装 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
把这段话复制粘贴给 Claude Code / Cursor / 任何有 shell 权限的 AI Agent,它会自动完成安装。
方式三:手动命令行
git clone https://github.com/op7418/guizang-social-card-skill.git ~/.claude/skills/guizang-social-card-skill
触发方式
装好后,Claude Code 会自动发现并调用这个 skill。触发关键词:
- "帮我做一套小红书图文 / Xiaohongshu 图文"
- "帮我做一套 Rednote 卡片"
- "做一个公众号 21:9 头图 + 1:1 分享卡"
- "生成一套 social cards / 杂志风社交卡片"
- "把这篇文章做成轮播图文 / 教程拆页"
- "做一套瑞士风的小红书测评 / IKB 风格图文"
- "把这段视频做成小红书 Live Photo / 三连实况拼图"
- "做一个微信公众号文章内 3 秒 Live Photo"
使用流程
Skill 本身是结构化工作流,Agent 会按 7 步走:
- Intake — 抓 4 件事:目标平台 / 风格 / 内容素材 / 用户图。无图时一次性给 A/B/C 三选(自己拍图 / AI 生图 / 网络取图),不二次劝导
- Style & Theme — 选 Editorial 还是 Swiss,再从 10 套预设里选主题色。不允许自定义 hex
- Layout Selection — 根据内容结构从 28 个版式骨架里挑、粘、改文案。Editorial 16 个 / Swiss 12 个
- Asset Prep — 取图(Unsplash / Pexels / Flickr CC / Wallhaven / 直接搜索),落本地 + 写
SOURCES.md;问用户要不要标来源
- Compose & Render — 拷种子模板 → 替换
<!-- POSTERS_HERE --> → node render.mjs
- Deliver & Review — 先把 PNG 给用户看,询问"你自己看还是我先帮你跑 validator",默认不自动核查
- Iterate — 用户提反馈,改 inline 样式或 swap 版式 / 替图,重渲
Live Photo 请求会在第 5 步进入动态分支:先判断 3s/5s 内能承载的信息量,抽首帧或稀疏 contact sheet 检查裁切,再输出 JPG + MOV + .pvt。交付时会提醒平台限制和发布路径:小红书 5s,微信公众号文章内 3s,通常需要把 .pvt 传到 iPhone 后从对应 App 发布。
详细说明见 SKILL.md。深度细节去看对应 references/*.md。
校验脚本
node validate-social-deck.mjs path/to/task-dir
9 条规则,基于 Playwright 真实渲染测量,不是静态扫描:
- R1 Overflow — 任何 section 超出
.poster 立刻报错,并给出超出像素对应的修正阶梯
- R2 Footer Collision — 内容压到底部 footer / page-number
- R3 Swiss Bold Display — Swiss 大标题违反"越大越细"时报警
- R4 Min Readable Font — 正文、说明、标签字号低于手机可读下限
- R5 4-Band Density — 1440 高画布切 4 横带,每带应有内容或主动留白理由
- R6 H-XL Line Cap —
.h-xl / .h-display / .h-statement 行数超出画板预算
- R7 Figure Margin Drift — 浏览器默认
<figure> margin 造成版式漂移
- R8 Visual Bounds — 测量真实可见内容的上/下边界,报告视觉超出和底部空白
- R9 Title Gap — 标题与下一块内容之间的距离过小,避免贴在一起
SKILL.md 第 7 步明确默认不自动跑 validator —— 等用户先看完图再问,避免每轮多花数十秒。
主题色预设
从 references/theme-presets.md 里选一套——不允许自定义 hex 值,保护美学比给自由更重要。
Editorial 6 套
| 主题 |
色调 |
适合场景 |
| 🖋 墨水经典 Ink Classic |
#0a0a0b / #f1efea |
通用默认、商业话题、不知道选啥时最稳 |
| 🌊 靛蓝瓷 Indigo Porcelain |
#0a1f3d / #f1f3f5 |
科技、研究、AI、技术分享 |
| 🌿 森林墨 Forest Ink |
#1a2e1f / #f5f1e8 |
自然、可持续、户外、非虚构 |
| 🍂 牛皮纸 Kraft Paper |
#2a1e13 / #eedfc7 |
怀旧、人文、阅读、文学 |
| 🌙 沙丘 Dune |
#1f1a14 / #f0e6d2 |
艺术、设计、创意、时尚 |
| ⚫ 午夜墨 Midnight Ink |
#0e0d0c / #ece2cf / #d4a04a |
游戏 key art / 夜景 / 影调封面 / 黑神话 · 艾尔登法环类深色题材 |
Swiss 4 套
| 主题 |
锚点色 |
适合场景 |
| 🔵 克莱因蓝 IKB |
#002FA7 |
通用默认、商业发布、AI 产品、方法论 |
| 🟡 柠檬黄 Lemon |
#FFD500 |
年轻、运动、零售、消费品、Y2K |
| 🟢 柠檬绿 Lemon Green |
#C5E803 |
生态、健康、Z 世代、绿色品牌 |
| 🟠 安全橙 Safety Orange |
#FF6B35 |
警示、新闻、工业、活力主题 |
切主题只需替换种子模板的 <section class="poster" data-theme="..."> 属性,所有 CSS 走 var(--...)。
目录结构
guizang-social-card-skill/
├── SKILL.md ← Skill 主文件:7 步工作流
├── README.md ← 本文件
├── HANDOFF.md ← 交接文档:事实 + 版本历史
├── PRODUCT.md ← 产品文档:思考 + 决策 + roadmap
├── validate-social-deck.mjs ← Playwright 版式校验脚本
├── scripts/ ← Live Photo 打包 / 抽帧 / 文档测试脚本
├── assets/
│ ├── template-editorial-card.html ← Editorial 种子(6 主题 / 3 画板)
│ ├── template-swiss-card.html ← Swiss 种子(4 accent / 3 画板)
│ ├── magazine-bg-webgl.js ← WebGL 墨流背景
│ └── screenshot-backgrounds/ ← 9 张截图舞台底(WebP)
│ ├── style-a/ ← Editorial 5 套
│ └── style-b/ ← Swiss 4 套
└── references/
├── platform-specs.md ← 平台 × 分辨率 × 命名
├── style-system.md ← 两种风格的硬规则与反模式
├── theme-presets.md ← 10 套色票详解
├── layout-recipes.md ← 28 个版式骨架(M01-M16 + S01-S12)
├── components.md ← 字体 / 卡片 / 间距 / 图标
├── background-systems.md ← 墨流 / 网格 / 纸纹层
├── portrait-fill.md ← 3:4 板的留白对策
├── content-planning.md ← 钩子 / 拆页 / 文案压缩
├── category-cookbook.md ← 11 个小红书品类路由表
├── image-overlay.md ← 文字压图 + 主体避让规则
├── screenshot-treatment.md ← `.frame-shot` 工具类 + 截图美化
├── map-component.md ← `.map-block` MapLibre 地图
├── title-shortener.md ← 1:1 封面的短标题策略
├── production-workflow.md ← Playwright 渲染管线
├── live-photo-production.md ← Live Photo 生产 / 拼图 / 长视频 / 发布规范
└── qa-checklist.md ← 质量检查清单
核心设计原则
- 克制优于喊话 — 信息流里克制色板反而最显眼,不要堆饱和度
- 结构优于装饰 — 字号 + 字体对比 + 网格留白撑起信息层级,不靠阴影和卡片
- 版式优于自由 — 28 个版式骨架先选后改,不要发明不存在的页面
- 图片优先用户的 — Intake 时一次性给 A/B/C,不二次劝导用户拍图
- 选图与避让优先 — 满铺图先确认 quiet zone,文字避开主体(人脸 / 产品 / 文字密集区),必要时才加局部 tint
- 越大越细 — Swiss
.h-xl 字号上去 → 字重必须下来。Editorial 同此原则
- 默认不自动核查 — 把"先看图、再决定要不要 validate"做成工作流,省每轮几十秒
- Skill 是产品不是 Prompt — 有 PRODUCT.md、有版本号、有 CHANGELOG、有能力边界
- 本地测试不进 git — 所有 demo / 冒烟测试归
local-tests/,被 gitignore
- 视频先当卡片 — Live Photo 第一帧必须先像一张好社交卡,可见文案描述真实场景,不要把制作术语写上画面
视觉参考
- Monocle / Kinfolk / Cereal 杂志的版式与字距
- Massimo Vignelli / Helvetica Forever / 瑞士国际主义网格系统
- Apartamento / The Gentlewoman 的图文比与人物纪实
- 小红书 / Rednote 信息流里"克制反而吃香"的内容样本
- 歸藏的图文卡片实践
Roadmap
- 补充更多 Editorial 长内容下的字号上限冒烟测试
- 扩展 Swiss 数据类版式(更多
A Claude Code / Codex skill that turns articles, notes, screenshots, or user videos into Xiaohongshu (Rednote) photo-carousel cards and WeChat 21:9 + 1:1 cover pairs, rendering single-file HTML to PNG via Playwright.