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 分享卡，一套内容三种尺寸搞定了。
三画板尺寸适配
- ：Editorial 阵营有 16 个（M01-M16，包含 Image-Led Cover、Pipeline、Before/After 等），Swiss 阵营有 12 个（S01-S12，包含 KPI Tower、H-Bar Chart、Matrix+Hero 等），基本覆盖了主流内容场景。
28 个版式骨架
- ：Editorial 给了 6 套（墨水经典、靛蓝瓷、森林墨、牛皮纸、沙丘、午夜墨），Swiss 给了 4 套锚点色（克莱因蓝、柠檬黄、柠檬绿、安全橙），色彩克制但出片效果很稳。
10 套主题预设
- ：这是核心亮点，三步法走下来——自动识别主体避开人脸和产品中心区域，计算落点明度决定字色与蒙版强度，最后根据有效区域动态调整字号和换行，基本解决了“字盖人脸”“同色不可读”“横幅毁构图”这三个老大难。
智能文字压图
- ：优先用你上传的图，没有图的话按 Unsplash → Pexels → Flickr CC → Wallha ven 的优先级自动取图，同时还会自动生成一份 SOURCES.md 记录来源。
自动图源工作流
- ：基于 MapLibre + OSM 真实瓦片，支持多 pin 标注和连线，做旅行攻略非常实用。
地图组件
- ：内置 9 张 WebP 真实材质背景，附带
截图美化资产
.frame-shot、.device-browser、.device-phone三类工具类，方便给截图加壳。 - ：杂志风的 hero 页可以挂动态墨流效果，视觉上更有层次。
WebGL 墨流背景
- ：旅行、职场、影视、产品测评、读书、美食、游戏、彩妆、健身、家居、穿搭——每个品类有不同的版式和配色规则。
11 个品类适配
- ：
版式校验脚本
validate-social-deck.mjs基于 Playwright 真实 DOM 测量，能检测溢出、字号上限、footer 碰撞等 6 条红线问题。
技术原理
- ：种子模板就是纯 HTML/CSS，Agent 可以直接读写修改，通过
单文件 HTML + CSS 渲染
node render.mjs调用 Playwright 截屏输出 PNG，完全没有前端构建链的负担。 - ：排版完全靠字号、字重和网格留白来撑起信息层级，不是靠花哨的阴影和卡片装饰，确保了版式的精确可控。
CSS Grid + 严格排版系统
- ：通过 image-overlay 规则标记 a void 区域（人脸、产品、文字密集区），在安全区内计算采样点的平均色和明度，反推出字色、阴影深度与是否需要蒙版。对比度低于 4.5 时会强制加深蒙版。
主体识别与避让算法
- ：字号不写死，根据安全区的宽高动态计算，长句自动换行不溢出，这在文字压图场景中非常重要。
自适应排版引擎
- ：设计了 7 步闭环流程（Intake → Style & Theme → Layout Selection → Asset Prep → Compose & Render → Deliver & Review → Iterate），通篇由 SKILL.md 统一调度。
Agent 结构化工作流
如何使用
- ：
一行命令安装
npx skills add https://github.com/op7418/guizang-social-card-skill --skill guizang-social-card-skill - ：把安装指令发给有 shell 权限的 Agent 就行，会自动克隆到
让 AI 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 三个免费可商用图库，自动下载到本地还会写来源清单，版权问题不用担心。
图源闭环不焦虑
- ：纯文本 HTML/CSS 技能，Claude Code 和 Codex 可以直接读写和迭代，加上完整的 SKILL.md 工作流和校验脚本，开发体验很顺畅。
Agent 原生友好
项目地址
- ：https://github.com/op7418/guizang-social-card-skill
GitHub仓库
同类竞品对比
目前市面上和这个项目比较接近的是 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 分享卡视觉统一，微信后台直接传。
公众号封面输出
