Guizang Social Card Skill - 歸藏开源的小红书图文优化Skill

Guizang Social Card Skill是什么

用过 Claude Code 或 Codex 这类 Agent 工具的朋友，多少都会遇到同一个尴尬——生成的图文卡片要么排版粗糙，要么尺寸不匹配，想发个小红书或公众号配图还得手动折腾半天。归藏开源的这套 Guizang Social Card Skill，说白了就是专为 Agent 环境量身打造的图文卡片技能，核心目标就一个：让 AI 能直接输出杂志级排版的社交图文。

它解决的是两个最常见的配图难题——小红书的 3:4 竖图和公众号的 21:9 头图加 1:1 分享卡。内部集成了 Editorial 和 Swiss 两套视觉系统、28 个版式骨架和 10 套主题预设，整个渲染链路就是单文件 HTML 配合 Playwright 直接输出 PNG，不需要额外的前端构建链。

主要功能

• 双视觉系统输出
  ：Editorial 走杂志风，适合叙事、旅行、生活方式类内容；Swiss 是瑞士网格风，更符合产品测评、数据展示和方法论这类场景。

• 三画板尺寸适配
  ：覆盖小红书 3:4 竖图、公众号 21:9 头图以及 1:1 分享卡，一套内容三种尺寸搞定了。

• 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 套（墨水经典、靛蓝瓷、森林墨、牛皮纸、沙丘、午夜墨），Swiss 给了 4 套锚点色（克莱因蓝、柠檬黄、柠檬绿、安全橙），色彩克制但出片效果很稳。

• 智能文字压图
  ：这是核心亮点，三步法走下来——自动识别主体避开人脸和产品中心区域，计算落点明度决定字色与蒙版强度，最后根据有效区域动态调整字号和换行，基本解决了“字盖人脸”“同色不可读”“横幅毁构图”这三个老大难。

• 自动图源工作流
  ：优先用你上传的图，没有图的话按 Unsplash → Pexels → Flickr CC → Wallha ven 的优先级自动取图，同时还会自动生成一份 SOURCES.md 记录来源。

• 地图组件
  ：基于 MapLibre + OSM 真实瓦片，支持多 pin 标注和连线，做旅行攻略非常实用。

• 截图美化资产
  ：内置 9 张 WebP 真实材质背景，附带 .frame-shot、.device-browser、.device-phone 三类工具类，方便给截图加壳。

• WebGL 墨流背景
  ：杂志风的 hero 页可以挂动态墨流效果，视觉上更有层次。

• 11 个品类适配
  ：旅行、职场、影视、产品测评、读书、美食、游戏、彩妆、健身、家居、穿搭——每个品类有不同的版式和配色规则。

• 版式校验脚本
  ：validate-social-deck.mjs 基于 Playwright 真实 DOM 测量，能检测溢出、字号上限、footer 碰撞等 6 条红线问题。

技术原理

• 单文件 HTML + CSS 渲染
  ：种子模板就是纯 HTML/CSS，Agent 可以直接读写修改，通过 node render.mjs 调用 Playwright 截屏输出 PNG，完全没有前端构建链的负担。

• CSS Grid + 严格排版系统
  ：排版完全靠字号、字重和网格留白来撑起信息层级，不是靠花哨的阴影和卡片装饰，确保了版式的精确可控。

• 主体识别与避让算法
  ：通过 image-overlay 规则标记 a void 区域（人脸、产品、文字密集区），在安全区内计算采样点的平均色和明度，反推出字色、阴影深度与是否需要蒙版。对比度低于 4.5 时会强制加深蒙版。

• 自适应排版引擎
  ：字号不写死，根据安全区的宽高动态计算，长句自动换行不溢出，这在文字压图场景中非常重要。

• Agent 结构化工作流
  ：设计了 7 步闭环流程（Intake → Style & Theme → Layout Selection → Asset Prep → Compose & Render → Deliver & Review → Iterate），通篇由 SKILL.md 统一调度。

如何使用

• 一行命令安装
  ：npx skills add https://github.com/op7418/guizang-social-card-skill --skill guizang-social-card-skill

• 让 AI Agent 执行
  ：把安装指令发给有 shell 权限的 Agent 就行，会自动克隆到 ~/.claude/skills/guizang-social-card-skill

• 手动命令行
  ：git clone https://github.com/op7418/guizang-social-card-skill.git ~/.claude/skills/guizang-social-card-skill

核心优势

• 杂志级排版质感
  ：整体设计参考了 Monocle、Kinfolk、Cereal 这类杂志的版式与字距处理方式，色彩克制反而在信息流里更抢眼，彻底告别了那种“AI 感”的大色块加 emoji 堆砌风格。

• 品类感知智能适配
  ：同一段文字，说“探店”就给杂志风暖色大图，说“测评”就给网格风设备框对比图，不是一套模板走天下。

• 文字压图不翻车
  ：主体避让加明度采样加自适应断行，这三步法直接把“字盖人脸”“同色不可读”“横幅毁构图”这三大痛点解决掉了。

• 图源闭环不焦虑
  ：默认接入了 Pexels、Unsplash、Wallha ven 三个免费可商用图库，自动下载到本地还会写来源清单，版权问题不用担心。

• Agent 原生友好
  ：纯文本 HTML/CSS 技能，Claude Code 和 Codex 可以直接读写和迭代，加上完整的 SKILL.md 工作流和校验脚本，开发体验很顺畅。

项目地址

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

同类竞品对比

目前市面上和这个项目比较接近的是 Om Rajguru 的 brand-social-design。两者思路不太一样：guizang-social-card-skill 走的是双视觉系统路线，Editorial 和 Swiss 共 28 个版式骨架，不支持自定义 hex 颜色，用意是保护美学一致性；而 brand-social-design 更偏向品牌定制，通过 onboarding 访谈收集色板和字体后记忆化复用。

在品类感知这个维度上，guizang 内置了 11 个品类适配规则，会根据内容自动路由到对应的版式；brand-social-design 没有品类区分，所有内容统一用同一套视觉语言。文字压图方面差距也明显——guizang 的三步法智能避让机制是核心卖点，而 brand-social-design 没有类似的智能避让机制，文字布局相对固定。另外，guizang 内置了自动图源工作流，brand-social-design 需要用户自行提供素材。

应用场景

• 长文转小红书
  ：把长文章的核心观点提取出来，自动拆分成 3–9 张 3:4 竖图，Editorial 叙事风或者 Swiss 数据风随你选。

• 产品测评发布
  ：输入测评文案，Swiss 网格风配 IKB 蓝自动生成带设备框的参数对比图，数码和工具类内容非常适合。

• 旅行攻略制作
  ：Editorial 杂志风满铺大图，再叠加 MapLibre 地图组件标注路线和打卡点，探店图文一键生成。

• 公众号封面输出
  ：同一份内容直接双画板渲染，21:9 头图和 1:1 分享卡视觉统一，微信后台直接传。