guizang-social-card-skill
byop7418· 24 skills
Generate Guizang-style social card image sets, Live Photo motion cards, material-first Live Photo puzzle layouts, triple Live Photo collages, long-video-to-Live-Photo treatments, and WeChat official account cover pairs from articles, scripts, screenshots, product notes, subtitles, photos, or user-supplied videos. Use when the user asks for 小红书图文, Rednote/Xiaohongshu images, social cards, carousel images, 3:4 covers, Live Photo, 实况照片, 单视频实况拼图, 二宫格实况拼图, 三连实况拼图, 四宫格实况拼图, 微信公众号封面, WeChat 21:9 + 1:1 covers, Swiss Style, or magazine-style social images.
How to install guizang-social-card-skill?
op7418/guizang-social-card-skill
$npx -y skills add op7418/guizang-social-card-skill --skill guizang-social-card-skillInstalls into the current project.
›Prefer a prompt? Paste this to your agent
Run `npx skills use "https://github.com/op7418/guizang-social-card-skill" --skill "op7418/guizang-social-card-skill"` and follow the generated skill instructions now. Read its complete output, redirecting it to a temporary file first if necessary. Resolve relative paths from the supporting-files directory it provides.
Use the skills in "https://github.com/op7418/guizang-social-card-skill" that are relevant to the current task. Run `npx skills add "https://github.com/op7418/guizang-social-card-skill"` and select the relevant skills, then follow their instructions.
SKILL.md
| 1 | # Guizang Social Card Skill · 小红书图文 / 公众号封面对 |
| 2 | |
| 3 |  |
| 4 |  |
| 5 |  |
| 6 |  |
| 7 |  |
| 8 |  |
| 9 |  |
| 10 | |
| 11 | [English README](./README.en.md) |
| 12 | |
| 13 | 一个适配 Claude Code / Codex 等 Agent 环境的图文卡片技能,用于从文章、文案、截图、产品笔记、字幕、照片或用户视频生成**小红书 / Rednote 图文组图**、**Live Photo 动态卡**与**公众号 21:9 + 1:1 封面对**。 |
| 14 | |
| 15 | 内置两套视觉系统,共用一份图文工作流: |
| 16 | |
| 17 | - **电子杂志风(Editorial)**。像 *Monocle* / *Kinfolk* / *Cereal* 那样克制的版面,适合叙事、生活方式、旅行、阅读、影视、个人观察。 |
| 18 | - **瑞士国际主义(Swiss)**。网格、单一锚点色、直角发丝线、极致字号对比,适合产品测评、数据、方法论、教程、AI 工具。 |
| 19 | |
| 20 | > 这个 Skill 是 [guizang-ppt-skill](https://github.com/op7418/guizang-ppt-skill) 的姊妹项目,共享美学语言但独立维护。PPT 解决"横向翻页演讲",这里解决"静态信息流图文"。 |
| 21 | |
| 22 |  |
| 23 | |
| 24 | ## 30 秒开始 |
| 25 | |
| 26 | ```bash |
| 27 | npx skills add https://github.com/op7418/guizang-social-card-skill --skill guizang-social-card-skill |
| 28 | ``` |
| 29 | |
| 30 | 也可以直接把这段话发给有 shell 权限的 AI Agent: |
| 31 | |
| 32 | ```text |
| 33 | 帮我安装 guizang-social-card-skill。请把 https://github.com/op7418/guizang-social-card-skill 克隆到 ~/.claude/skills/guizang-social-card-skill,安装完成后检查 SKILL.md、assets/、references/ 是否存在。 |
| 34 | ``` |
| 35 | |
| 36 | 已经安装过的话,用这段话更新: |
| 37 | |
| 38 | ```text |
| 39 | 帮我更新 guizang-social-card-skill。请进入 ~/.claude/skills/guizang-social-card-skill 执行 git pull,然后告诉我当前最新 commit。 |
| 40 | ``` |
| 41 | |
| 42 | 安装后直接对 Agent 说: |
| 43 | |
| 44 | ```text |
| 45 | 帮我基于这篇文章做一套瑞士风小红书图文,5 张,IKB 蓝。 |
| 46 | ``` |
| 47 | |
| 48 | 也可以试这些请求: |
| 49 | |
| 50 | ```text |
| 51 | 基于这份产品测评做一套小红书 3:4,标题用电子杂志风。 |
| 52 | 帮我把这篇文章做成公众号封面对:21:9 头图 + 1:1 分享卡,视觉保持一致。 |
| 53 | 我有 3 张露营照片,帮我做一套全图风格的小红书图文。 |
| 54 | 把这段游戏攻略文案做成一套小红书图文,需要从 wallhaven 拿点游戏原画。 |
| 55 | 我有一段咖啡视频,帮我做成小红书 5 秒 Live Photo 卡片,文字压在安静区域。 |
| 56 | 把这三个游戏片段做成三连 Live Photo 拼图,用 Swiss 风介绍攻略要点。 |
| 57 | ``` |
| 58 | |
| 59 | ## 效果 |
| 60 | |
| 61 | - 🖋 **双视觉系统**:电子杂志风做氛围与叙事,瑞士风做事实与结构,两套共用同一份工作流 |
| 62 | - 📐 **3 个画板尺寸**:`.poster.xhs` 1080×1440(小红书 3:4)、`.poster.wide` 2100×900(公众号 21:9)、`.poster.square` 1080×1080(公众号 1:1) |
| 63 | - 🎬 **Live Photo 动态卡**:支持单视频、二宫格、三宫格、四宫格、三连拼图、长视频低成本诊断;小红书按 `5s`,微信公众号文章内按 `3s` |
| 64 | - 🧩 **28 个版式骨架**:Editorial 16 个(`M01-M16`,含 Image-Led Cover、Pipeline、Before/After 等)+ Swiss 12 个(`S01-S12`,含 KPI Tower、H-Bar Chart、Matrix + Hero 等) |
| 65 | - 🎨 **10 套主题预设**:Editorial 6 套(墨水经典、靛蓝瓷、森林墨、牛皮纸、沙丘、**Midnight Ink** 暗色)+ Swiss 4 套锚点色(IKB Klein Blue、柠檬黄、柠檬绿、安全橙) |
| 66 | - 🖼 **图源工作流**:用户图优先;无图时按 Unsplash → Pexels → Flickr CC → Wallhaven → 直接搜索的优先级取图,落本地 + 自动写 `SOURCES.md` |
| 67 | - 🌫 **WebGL 墨流背景**:杂志风 hero 页可挂动态墨流;低性能或截图时可禁用 |
| 68 | - 🪧 **文字压图 + 主体避让**:满铺图先做 quiet-zone 与主体映射,文字避开人脸、产品和关键动作;需要时只加局部 tint,不默认全图遮罩 |
| 69 | - 🧰 **截图美化资产**:9 张 WebP 真实材质背景(Editorial 5 / Swiss 4),配套 `.frame-shot` / `.device-browser` / `.device-phone` 工具类 |
| 70 | - 🗺 **地图组件**:MapLibre + OSM 真实瓦片,支持多 pin + 连线,适合旅行攻略 |
| 71 | - ✅ **校验脚本**:`validate-social-deck.mjs` 自动检测溢出、字号上限、4 横带密度、footer 碰撞 |
| 72 | - 📄 **单文件 HTML + Playwright 渲染**:不需要前端构建链,`node render.mjs` 直接出 PNG |
| 73 | |
| 74 | ## Live Photo 效果与版式 |
| 75 | |
| 76 | Live Photo 在这个 Skill 里的定位是"把用户提供的视频装进社交卡版式",不是让 Agent 随机找公开视频,也不是长视频正片剪辑。先让首帧按静态卡片成立,再让 `3s/5s` 的动作补充信息。 |
| 77 | |
| 78 | | 版式 | 效果 | 适合 | |
| 79 | |------|------|------| |
| 80 | | 单视频动态卡 | 一段视频裁成 `3:4` 吃满画布;需要文字时只放一组短标题,按 `M16 Image-Led Cover` / `image-overlay` 的主体避让、quiet-zone、字体与局部 tint 规则处理 | 咖啡、旅行、健身动作、产品状态、游戏瞬间 | |
| 81 | | 二宫格 / 三宫格 / 四宫格拼图 | 多个视频井拼成一张 Live Photo,通常不加文字,让高质量素材自己说话 | 旅行风景、穿搭精选、空间细节、菜品过程、运动动作 | |
| 82 | | 三连 Live Photo 拼图 | 三段几秒素材并列,提高短时长内的信息密度;只在必要时加一行真实场景标题 | 攻略步骤、前后对比、多视角展示、模型测试结果 | |
| 83 | | 长视频诊断 | 对超长素材做稀疏抽帧 / contact sheet,判断更适合裁哪段、倍速、拆分,还是请用户指定时间段 | 用户给了 1-3 分钟素材但还没选片段 | |
| 84 | | 平台发布包 | 输出调试用 `JPG + MOV`,以及 iPhone 测试/发布用 `.pvt` 包 | 小红书、微信公众号文章内 Live Photo | |
| 85 | |
| 86 | 信息量判断是第一步:微信 `3s` 更适合一个动作点或一次状态变化;小红书 `5s` 可以容纳一个小过程;三连拼图适合三个并列结果,不适合讲一个必须顺序理解的长故事。 |
| 87 | |
| 88 | ## Live Photo 生成指南 |
| 89 | |
| 90 | 1. **确认平台和素材**:用户视频是默认输入;公开视频素材只用于 demo / 宣传测试。先确认小红书、微信公众号文章内,还是本地测试。 |
| 91 | 2. **判断信息量**:问自己 `3s/5s` 内观众能看到什么。 |
Related
6 picksType
- remotion-best-practicesRouter for all Remotion skillsJul 2026
- ai-image-generationGenerate AI images with GPT-Image-2, FLUX, Gemini, Grok, Seedream, Reve and 50+ models via inference.sh CLI.Jul 2026
- hyperframes-cliUse the HyperFrames CLI development loop: init, add, catalog, capture, lint, check, snapshot, compare, grade-compare, preview, play, present, beats, keyframes,…Jul 2026
- hyperframesMandatory entry point: read this first for any request to make, create, edit, animate, or render a video, animation, or motion graphic, including a promo,…Jul 2026
- remotion-to-hyperframesPort an existing Remotion (React) composition''s source to HyperFrames HTML.Jul 2026
- hyperframes-coreThe HyperFrames composition contract — build one renderable project.Jul 2026
