Guizang Social Card Skill

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

Guizang Social Card Skill，一款由歸藏开源的创新性工具，专为 Claude Code / Codex 等人工智能代理环境量身打造，旨在彻底解决小红书（3:4 竖图）与公众号（21:9 + 1:1 封面）配图的难题，为用户呈现杂志级质感的图文卡片。

Guizang Social Card Skill 亮点解析

这款强大的工具内置了两套截然不同的视觉系统——Editorial（杂志风）与 Swiss（网格风），并提供了多达 28 种精心设计的版式骨架和 10 套丰富的主题预设。其核心优势在于，仅需一个 HTML 文件配合 Playwright 渲染，即可实现一键输出高质量 PNG 图片，让 AI Agent 也能轻松创作出具有专业排版水准的社交图文卡片。

核心功能一览

双视觉系统，风格随心切换：Editorial 杂志风适合承载故事性强、生活化或旅行类内容；而 Swiss 网格风则更侧重于产品评测、数据分析和方的呈现。
三画板尺寸，全平台适配：完美支持小红书 3:4 竖图，以及公众号的 21:9 头图和 1:1 分享卡，满足不同平台的视觉需求。
海量版式骨架，创意无限：Editorial 提供 16 种版式（如 Image-Led Cover、Pipeline、Before/After 等），Swiss 则有 12 种（如 KPI Tower、H-Bar Chart、Matrix + Hero 等），总计 28 种骨架供选择。
主题预设，色彩有格调：Editorial 包含 6 套主题（墨水经典、靛蓝瓷、森林墨、牛皮纸、沙丘、午夜墨），Swiss 则有 4 套锚（克莱因蓝、柠檬黄、柠檬绿、安全橙），确保视觉统一性。
智能文字压图，告别遮挡烦恼：通过三步法，自动识别图片主体，智能避开人脸或产品核心区域；根据背景明度动态调整文字颜色与蒙版；字号和断行也进行自适应处理，确保文字清晰可读。
自动图源，省时省力：优先选用用户提供的图片，若无用户图，则按 Unsplash → Pexels → Flickr CC → Wallhaven 的优先级自动抓取，并自动生成 SOURCES.md 文件记录来源。
地图组件，攻略利器：集成 MapLibre + OSM 真实瓦片，支持多标记点和连线功能，尤其适合制作旅行攻略。
截图美化资产，提升质感：提供 9 张 WebP 真实材质背景，以及 .frame-shot / .device-browser / .device-phone 等工具类，丰富截图展示效果。
WebGL 墨流背景，动态视觉效果：杂志风的 hero 页面可添加动态墨流效果，增强视觉吸引力。
11 个品类适配，精准匹配内容：针对旅行、职场、影视、产品测评、读书、美食、游戏、彩妆、健身、家居、穿搭等 11 个品类，内置适配规则，让设计更贴合内容主题。
版式校验脚本，品质保障：validate-social-deck.mjs 脚本基于 Playwright 真实 DOM 测量，能够检测溢出、字号上限、footer 碰撞等 6 条规则，确保版式质量。

技术原理揭秘

纯净的单文件 HTML + CSS 渲染：核心模板采用纯 HTML/CSS，AI Agent 可直接读写修改。通过 node render.mjs 调用 Playwright 进行截屏输出 PNG，无需复杂的前端构建流程。
CSS Grid + 精准排版系统：利用字号、字重和网格留白来构建信息层级，而非依赖阴影或卡片装饰，确保版式的精确性和可控性。
主体识别与避让算法：通过 image-overlay 规则标记需要避让的区域（如人脸、产品中心、文字密集区），并在安全区域内计算采样点的平均色和明度，以此反推字色、阴影深度和蒙版的必要性。当对比度低于 4.5 时，会加深蒙版以保证可读性。
自适应排版引擎：字号会根据安全区域的宽高动态计算，长句也能自动换行，避免溢出，而不是使用固定的像素值。
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 权限的 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 命令进行手动安装。

Guizang Social Card Skill 的核心优势

杂志级排版质感，告别“AI 感”：借鉴 Monocle、Kinfolk、Cereal 等杂志的版式和字距，采用克制的色板设计，使得信息在内容流中更加突出，避免了“AI 感”十足的大色块和 emoji 堆砌。
品类感知，智能适配内容：针对不同内容，如“探店”会生成暖色调的杂志风大图，而“测评”则会生成带有设备框的网格风对比图，实现了一套模板服务于所有内容，而非千篇一律。
文字压图，万无一失：结合了主体避让、明度采样和自适应断行三步法，有效解决了“字盖人脸”、“同色不可读”和“横幅毁构图”等常见问题。
图源闭环，无忧无虑：默认接入 Pexels、Unsplash、Wallhaven 等三个免费可商用图库，并自动将图片保存至本地，同时生成来源清单，让图源管理变得轻松。
Agent 原生友好，无缝集成：作为纯文本 HTML/CSS 技能，Claude Code / Codex 等 AI Agent 可直接读写和迭代，并提供了完整的 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 网格风格的对比图，并带有设备框，非常适合数码产品和工具类内容的呈现。
旅行攻略制作：利用 Editorial 杂志风的满铺大图，并叠加 MapLibre 地图组件标注路线和打卡点，轻松生成引人入胜的旅行图文。
公众号封面输出：同一份内容可实现双画板渲染，生成 21:9 的头图和 1:1 的分享卡，两者视觉风格统一，可直接上传至微信后台。

阅读原文