guizang-social-card-skill：小红书图文 + 公众号封面对的 Claude Code 视觉神器

Skill超级捕获手 技术创作者 2026-08-06 14 阅读

一个适配 Claude Code / Codex 等 Agent 环境的图文卡片技能，专门解决”小红书 / Rednote 图文组图 + 公众号封面对”的视觉自动化生成难题。你给它一段文案、一篇文章或一组素材，它就能输出完整的社交媒体配图包——不需要设计师，不需要 Figma，只要会说话。2026 年 5 月底上线 GitHub，两周内在 CSDN/知乎等技术社区引发大量讨论，被认为是”设计类 Skill 审美天花板”，截至 2026 年 8 月 6 日已斩获约 5,941 GitHub Stars，477 个 Fork，成为 2026 年中文 AI 设计工具链里最具话题性的 Skill 之一。

功能与原则

guizang-social-card-skill 的核心能力是把文字/素材自动转化为可直接发布的小红书图文、公众号封面对、Live Photo 动态卡，输出格式为单文件 HTML + Playwright 渲染 PNG，不需要任何前端构建链。

设计原则有三条：
– 双视觉系统并行：Editorial（电子杂志风）负责叙事、氛围、生活方式内容；Swiss（瑞士国际主义）负责产品测评、数据、方法论等结构化内容。两套系统共用同一工作流，用户无需切换工具。
– 文字必须压在图上，但必须好看：内置 quiet-zone 计算、主体避让（人脸/产品/关键动作）、局部 tint 叠加，不是简单的文字蒙版。
– AI 生成图片是最后手段：默认从 Unsplash / Pexels / Wallhaven / Flickr CC 取真实摄影图，AI 生图仅作为补充手段，避免”一眼 AI”感。

认可度

  • GitHub Stars：约 5,941（截至 2026-08-06）
  • Fork：477
  • 创建时间：2026-05-27，上线约两周即进入 CSDN 博客圈讨论热潮，多篇阅读量破万的教程文章
  • Trending 经历：在 CSDN「GitHub Trending 一周汇总」等自动化监控文章中多次出现
  • 社区反响：知乎用户称其”审美天花板”，微信公众号”歸藏的AI工具箱”持续维护更新

链接

GitHub 仓库：https://github.com/op7418/guizang-social-card-skill

原作者

GitHub 用户名 op7418，真实身份为技术创作者「归藏」，在知乎/小红书/公众号以「歸藏」名义活跃，长期专注 AI 设计工具与 Claude Code Skill 开发，旗下还有姊妹项目 guizang-ppt-skill（PPT 生成 Skill，同样在Trending 榜上有名）。

介绍

这个 Skill 的诞生背景很清晰：2026 年，小红书图文、公众号封面已经成为内容创作者的标准需求，但市面上的 AI 卡片工具要么让你自己上传素材、要么生成一眼假的 AI 插画、要么用 emoji 堆砌代替真实图片。guizang-social-card-skill 把整个工作流自动化了——你只需要对 Agent 说”帮我基于这篇文章做一套瑞士风小红书图文，5 张，IKB 蓝”，它就会自动完成从内容分析、图源搜索、版式选择、HTML 渲染到 PNG 交付的全流程。

它内置了两套视觉语言：Editorial（电子杂志风）借鉴 Monocle/Kinfolk/Cereal 等杂志的克制排版，适合旅行、生活方式、阅读、影视等叙事类内容；Swiss（瑞士国际主义）采用网格、单一锚点色、直角发丝线、极致字号对比，适合产品测评、数据看板、方法论教程等结构化内容。28 个版式骨架（Editorial 16 + Swiss 12）覆盖了绝大多数社交媒体图文场景。

最独特的能力是 Live Photo 动态卡：支持单视频、二宫格、三宫格、四宫格、三连拼图等多种结构，自动判断 3 秒（微信）/ 5 秒（小红书）的最佳截取方式，还能做长视频的低成本诊断——帮你判断该截哪一段、要不要倍速、要不要拆分。

特点

  • 28 个版式骨架 + 10 套主题预设：Editorial 6 套（墨水经典/靛蓝瓷/森林墨/牛皮纸/沙丘/Midnight Ink）+ Swiss 4 套锚点色（IKB Klein Blue/柠檬黄/柠檬绿/安全橙）
  • 3 个画板尺寸：.poster.xhs 1080×1440（小红书 3:4）、.poster.wide 2100×900（公众号 21:9）、.poster.square 1080×1080（公众号 1:1）
  • 智能图源工作流：用户图优先 → 无图时按 Unsplash → Pexels → Flickr CC → Wallhaven → AI 生图的优先级自动补图，并生成 SOURCES.md 记录图片来源
  • 文字压图 + 主体避让：满铺图先做 quiet-zone 分析，文字避开人脸、产品主体，再加局部 tint，绝不默认全图遮罩
  • WebGL 墨流背景：Editorial hero 页可选动态墨流效果，低性能或截图场景可禁用
  • 地图组件：MapLibre + OSM 瓦片，支持多 pin + 连线，适合旅行攻略类图文
  • 校验脚本：validate-social-deck.mjs 自动检测溢出、字号上限、4 横带密度、footer 碰撞
  • 零构建链：纯单文件 HTML + Playwright，node render.mjs 直接出 PNG，Windows/Mac/Linux 全平台

使用方法

安装（两种方式）：

方式一（推荐，Agent 自动安装）：

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

方式二（手动克隆）：

git clone https://github.com/op7418/guizang-social-card-skill.git
cp -r guizang-social-card-skill ~/.claude/skills/

基本调用示例：

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

使用场景与人群

适用场景：
– 内容创作者的小红书图文批量生产（旅行/生活方式/产品测评/读书笔记）
– 公众号运营者的封面图自动化（21:9 + 1:1 双尺寸一次出）
– 品牌方/甲方需要快速产出多版本社交素材用于 A/B 测试
– AI 工具类账号需要高质量图文配图而非 emoji 堆砌

目标用户：
– 有 Claude Code / Codex 使用经验的内容创作者
– 需要快速出图的自媒体运营者
– 追求”设计审美”不想让 AI 出一眼假卡片的设计师

输入与输出案例

案例一：文章 → 小红书图文

输入：

帮我基于这篇关于 AI 编程工具横向评测的文章做一套小红书图文，5 张，瑞士风，IKB 蓝锚点色。

输出（Agent 内部工作流）：
1. 读取文章内容，抽取核心观点（Claude Code vs Cursor vs Copilot 的多维度对比）
2. 选择 Swiss 版式骨架：S09 KPI Tower（数据对比）、S10 H-Bar Chart（评分矩阵）、S04 Matrix + Hero（总分展示）
3. 从 Unsplash 抓取编程/科技场景图片，按版式裁切
4. 渲染 HTML → Playwright 截图 → 输出 5 张 1080×1440 PNG
5. 生成 SOURCES.md 记录图片来源

案例二：视频 → Live Photo 动态卡

输入：

我有一段 30 秒的咖啡冲泡视频，帮我做成小红书 5 秒 Live Photo，只放一组标题"手冲的仪式感"，避开手和咖啡杯。

输出（Agent 内部工作流）：
1. 分析视频内容，判断 5 秒最佳截取区间（15-20 秒段：注水完整、蒸汽最美）
2. 裁切为 3:4 竖版满铺
3. 做 quiet-zone 分析，识别人手/咖啡杯主体区域
4. 标题文字压在右上角安静区域
5. 输出 MP4 + 可发布 .pvt 包

GitHub：https://github.com/op7418/guizang-social-card-skill

GitHub: https://github.com/op7418/guizang-social-card-skill

评论区

0 条评论

登录后可评论。

Skill超级捕获手 14 阅读