Guizang Social Card Skill是什么
Guizang Social Card Skill 是歸藏开源的适配 Claude Code / Codex 等 Agent 环境的图文卡片技能，能解决小红书（3:4 竖图）和公众号（21:9 + 1:1 封面）配图难题。工具内置 Editorial与 Swiss两套视觉系统、28 个版式骨架和 10 套主题预设，通过单文件 HTML + Playwright 渲染直接输出 PNG，让 AI Agent 一键生成具有杂志级排版质感的社交图文卡片。
阅读目录
Guizang Social Card Skill的主要功能
-
双视觉系统输出：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 → Wallhaven 优先级取图并自动写 SOURCES.md。
-
地图组件：MapLibre + OSM 真实瓦片，支持多 pin + 连线，适合旅行攻略。
-
截图美化资产：9 张 WebP 真实材质背景 +
.frame-shot/.device-browser/.device-phone工具类。 -
WebGL 墨流背景：杂志风 hero 页可挂动态墨流效果。
-
11 个品类适配：旅行、职场、影视、产品测评、读书、美食、游戏、彩妆、健身、家居、穿搭等内置适配规则。
-
版式校验脚本：
validate-social-deck.mjs基于 Playwright 真实 DOM 测量，检测溢出、字号上限、footer 碰撞等 6 条规则。
Guizang Social Card Skill的技术原理
-
单文件 HTML + CSS 渲染：种子模板为纯 HTML/CSS，Agent 可直接读写修改，通过
node render.mjs调用 Playwright 截屏输出 PNG，无需前端构建链。 -
CSS Grid + 严格排版系统：以字号、字重、网格留白撑起信息层级，不靠阴影和卡片装饰，确保版式精确可控。
-
主体识别与避让算法：通过 image-overlay 规则标记 avoid 区域（人脸、产品、文字密集区），在安全区内计算采样点的平均色和明度，反推字色、阴影深度与蒙版必要性，对比度低于 4.5 时强制加深蒙版。
-
自适应排版引擎：字号根据 safe 区宽高动态计算，长句自动换行不溢出，而非写死固定像素值。
-
Agent 结构化工作流：7 步闭环（Intake → Style & Theme → Layout Selection → Asset Prep → Compose & Render → Deliver & Review → Iterate），由 SKILL.md 统一调度。
如何使用Guizang Social Card Skill
-
一行命令：
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
Guizang Social Card Skill的核心优势
-
杂志级排版质感：参考 Monocle / Kinfolk / Cereal 杂志的版式与字距，克制色板在信息流中反而最显眼，告别”AI 感”大色块 + emoji 堆砌。
-
品类感知智能适配：同一段文字，说”探店”给杂志风暖色大图，说”测评”给网格风设备框对比图，不是一套模板套所有。
-
文字压图不翻车：主体避让 + 明度采样 + 自适应断行三步法，解决”字盖人脸”、”同色不可读”、”横幅毁构图”三大痛点。
-
图源闭环不焦虑：默认接入 Pexels / Unsplash / Wallhaven 三个免费可商用图库，自动落本地 + 写来源清单。
-
Agent 原生友好：纯文本 HTML/CSS 技能，Claude Code / Codex 可直接读写迭代，有完整 SKILL.md 工作流和校验脚本。
Guizang Social Card Skill的项目地址
- GitHub仓库：https://github.com/op7418/guizang-social-card-skill
Guizang Social Card Skill的同类竞品对比
| 对比维度 | guizang-social-card-skill | brand-social-design |
|---|---|---|
| 开发者 | 歸藏 (op7418) | Om Rajguru (omrajguru05) |
| 目标平台 | 小红书 3:4 竖图 + 公众号 21:9 头图 + 1:1 分享卡 | Instagram 方形帖 / 轮播、OG 图、Featured 图、邮件图、Story |
| 视觉系统 | 双系统：Editorial（杂志风）+ Swiss（瑞士网格风），28 个版式骨架 | 单系统：点阵背景 + 内嵌卡片 + 粗边框硬阴影 + 旋转标签 + 贴纸元素 |
| 品牌适配 | 10 套固定主题预设（不允许自定义 hex），保护美学一致性 | 品牌 onboarding 访谈收集色板、字体、设计人格，记忆化复用 |
| 品类感知 | 内置 11 个品类适配规则（旅行、职场、影视、美食等），自动路由版式 | 无品类区分，所有内容统一使用同一套视觉语言 |
| 文字压图 | 三步法智能避让：识别主体 → 采样明度定字色蒙版 → 自适应断行 | 无智能避让机制，文字布局相对固定 |
| 图源方案 | 自动按 Unsplash → Pexels → Flickr CC → Wallhaven 优先级取图 | 无内置图源工作流，需用户自行提供素材 |
Guizang Social Card Skill的应用场景
-
长文转小红书：抽取文章核心观点，自动拆分为 3–9 张 3:4 竖图，Editorial 叙事风或 Swiss 数据风任选。
-
产品测评发布：输入测评文案，Swiss 网格风 + IKB 蓝自动生成带设备框的参数对比图，适合数码与工具类内容。
-
旅行攻略制作：Editorial 杂志风满铺大图，叠加 MapLibre 地图组件标注路线与打卡点，一键生成探店图文。
-
公众号封面输出：同一份内容双画板渲染，21:9 头图 + 1:1 分享卡视觉统一，直接上传微信后台。
