A Claude Code and Codex skill that generates Rednote image-and-text card sets, Live Photo motion cards and WeChat article cover pairs from articles, screenshots, photos or videos. It offers an editorial magazine visual style for storytelling, lifestyle and travel content.
Claude Code
$ npx -y skills add op7418/guizang-social-card-skill --agent claude-code
Codex
$ npx skills add op7418/guizang-social-card-skill -a codex
Cursor
$ npx skills add op7418/guizang-social-card-skill -a cursor
Gemini CLI
$ npx skills add op7418/guizang-social-card-skill -a gemini-cli
GitHub Copilot
$ npx skills add op7418/guizang-social-card-skill -a github-copilot
OpenCode
$ npx skills add op7418/guizang-social-card-skill -a opencode
Windsurf
$ npx skills add op7418/guizang-social-card-skill -a windsurf
一个适配 Claude Code / Codex 等 Agent 环境的图文卡片技能,用于从文章、文案、截图、产品笔记、字幕、照片或用户视频生成小红书 / Rednote 图文组图、Live Photo 动态卡与公众号 21:9 + 1:1 封面对。
内置两套视觉系统,共用一份图文工作流:
这个 Skill 是 guizang-ppt-skill 的姊妹项目,共享美学语言但独立维护。PPT 解决"横向翻页演讲",这里解决"静态信息流图文"。
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 风介绍攻略要点。
.poster.xhs 1080×1440(小红书 3:4)、.poster.wide 2100×900(公众号 21:9)、.poster.square 1080×1080(公众号 1:1)5s,微信公众号文章内按 3sM01-M16,含 Image-Led Cover、Pipeline、Before/After 等)+ Swiss 12 个(S01-S12,含 KPI Tower、H-Bar Chart、Matrix + Hero 等)SOURCES.md.frame-shot / .device-browser / .device-phone 工具类validate-social-deck.mjs 自动检测溢出、字号上限、4 横带密度、footer 碰撞node scripts/render.mjs 直接出 PNGLive 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 可以容纳一个小过程;三连拼图适合三个并列结果,不适合讲一个必须顺序理解的长故事。
3s/5s 内观众能看到什么。如果需要解释、音频或完整教程才能懂,就不应该硬塞进 Live Photo。.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)/ 长视频正片剪辑 / 纯图片修图 / 无版式诉求的纯文字编辑
按"能力圈"分三档,详见 references/category-cookbook.md:
端到端强势(文 / 结构 / 图都在能力圈内):
文与结构强势,图依赖用户或搜图源:
能力圈外,主动说清(不强行接):
| 任务 | 推荐方式 |
|---|---|
| 长文章 → 小红书图文 | 抽核心观点,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 组合 |
validate-social-deck.mjs 用 Playwright 跑真实 DOM 测量,不是猜output/*.png 直接发,不需要部署、不需要导出工具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
帮我安装
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。触发关键词:
Skill 本身是结构化工作流,Agent 会按 7 步走:
SOURCES.md;问用户要不要标来源<!-- POSTERS_HERE --> → node scripts/render.mjs <任务目录>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 真实渲染测量,不是静态扫描:
.poster 立刻报错,并给出超出像素对应的修正阶梯.h-xl / .h-display / .h-statement 行数超出画板预算<figure> margin 造成版式漂移SKILL.md 第 7 步明确默认不自动跑 validator —— 等用户先看完图再问,避免每轮多花数十秒。
从 references/theme-presets.md 里选一套——不允许随手写 hex 值,保护美学比给自由更重要。所有主题的文字色、线条色和强调色小字都按同一套对比度规则(WCAG + APCA)算出来。
| 主题 | 色调 | 适合场景 |
|---|---|---|
| 🖋 墨水经典 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 / 夜景 / 影调封面 / 黑神话 · 艾尔登法环类深色题材 |
| 主题 | 锚点色 | 适合场景 |
|---|---|---|
| 🔵 克莱因蓝 IKB | #002FA7 | 通用默认、商业发布、AI 产品、方法论 |
| 🟡 柠檬黄 Lemon | #FFD500 | 年轻、运动、零售、消费品、Y2K |
| 🟢 柠檬绿 Lemon Green | #C5E803 | 生态、健康、Z 世代、绿色品牌 |
| 🟠 安全橙 Safety Orange | #FF6B35 | 警示、新闻、工业、活力主题 |
切主题只需把种子模板第一行 <html data-theme="…"> 改成主题 id,全部主题都已内置在模板里。瑞士风旧的 data-accent="…" 写法仍然有效。
用户给了品牌色或 logo 主色时,运行 node scripts/gz-theme.mjs brand "#FF2442" --family magazine(瑞士风用 --family swiss),把输出的主题贴进页面。脚本会把品牌色收进这套风格允许的明度和彩度范围,达不到可读性要求就拒绝,这时回到预设。
第一次使用先在 skill 目录装依赖:
npm install
node scripts/render.mjs path/to/task-dir
渲染脚本会按页面实际用到的字把字体子集化内置进 HTML(首次会下载字体到本机缓存),等背景定格、图标就绪后,按画板原尺寸把每张卡片截成 output/<id>.png,并核对尺寸。本机登记的商业字体(node scripts/gz-fonts.mjs add …)也会内置,不会上传。
Stars on GitHub
View @op7418’s profileBridges a running Claude Code or Codex session to Telegram, Discord, Feishu/Lark, QQ, or WeChat so you can chat with the coding agent from your phone. Covers setting up, starting, stopping, and diagnosing the bridge.
@op7418Adds variety-show style effects such as caption text, cards, name bars and chapter titles to interview and podcast videos. It analyzes the subtitles, proposes effects for approval, then renders the video in a chosen visual theme.
@op7418Edits Chinese articles, comments and documents to remove filler, repetition and template-like phrasing so the text reads more naturally, while keeping the facts, certainty level and author's voice. Not a detector and cannot prove authorship.
@op7418See 12 guizang-social-card-skill alternatives
Gives Claude Code access to the prompts.chat library, letting you search, retrieve and improve AI prompt templates, and find and install Agent Skills from its registry.
@gh-fA Claude Code skill for generating editable PPTX presentations and slides from a workflow, with reusable brand, style, layout, and deck workspaces, native charts, speaker notes, and template filling.
@hugohe3Gives AI agents control over Word, Excel and PowerPoint files, with skills for building .docx reports, academic papers, Excel dashboards and Morph-style animated slides.
@iofficeaiA skill that builds animation-rich HTML presentations from scratch or converts PowerPoint files to web slides. Useful for anyone turning a deck into a web presentation.
@zarazhangruiA Claude Code and Codex skill that generates Rednote image-and-text card sets, Live Photo motion cards and WeChat article cover pairs from articles, screenshots, photos or videos. It offers an editorial magazine visual style for storytelling, lifestyle and travel content. Install it with the command on its page. It includes guizang-social-card-skill. Its skills do not fire on their own yet. Free and open source.
Is this plugin yours?
Claim it with GitHubSubmit a pluginPromote it