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

1. Guizang Social Card Skill是什么

Guizang Social Card Skill 是由独立开发者歸藏（op7418）开源的一款专为 Claude Code / Codex 等 AI Agent 环境设计的图文卡片生成技能。该工具以单文件 HTML + CSS 为核心，结合 Playwright 渲染引擎，能够在 Agent 工作流中一键输出具有杂志级排版质感的小红书 3:4 竖图、公众号 21:9 头图及 1:1 分享卡。内置 Editorial 与 Swiss 两套视觉系统、28 个版式骨架和 10 套主题预设，通过结构化工作流实现从内容输入到成品输出的全自动化，彻底解决了 AI 生成内容在社交媒体配图上的“AI 感”与排版失控问题。

技术定位与领域： 属于 AI Agent 工具链中的内容创作与视觉设计领域，聚焦于社交媒体图文卡片的自动化生成。其独特定位在于将杂志级排版规范（参考 Monocle / Kinfolk / Cereal）编码为可被 Agent 直接调用的 HTML/CSS 模板，而非依赖传统的图像生成模型或设计软件。通过纯文本结构化描述，Agent 能够精确控制版式、色彩、字距与图像避让，实现从“写内容”到“出图”的闭环。

研发背景： 开发者歸藏（op7418）是 AI 应用与开源社区活跃贡献者，曾发布多个 Agent 技能和自动化工具。研发动机源于当前 AI 生成内容在社交媒体分发时面临的配图痛点：大模型生成的文字内容质量高，但配套图片往往依赖人工设计或粗糙的模板，缺乏统一美学标准。归藏希望通过开源一套“可编程的排版系统”，让 Agent 在输出内容的同时自主完成配图，从而提升信息传播效率与品牌一致性。

核心价值： 解决了三个核心问题：一是“AI 感”视觉问题——通过克制色板、精确字距和网格系统，生成卡片在信息流中反而最显眼；二是内容与视觉的智能匹配——同一段文字，系统会根据品类（旅行、测评、美食等）自动选择版式与色调，而非一套模板通吃；三是文字压图不翻车——通过主体避让、明度采样和自适应断行，彻底避免字盖人脸、同色不可读等常见错误。这些能力让非设计背景的内容创作者也能获得专业级配图。

技术特点： 采用纯文本 HTML/CSS 作为模板，Agent 可直接读写修改，无需前端构建链；基于 CSS Grid 的严格排版系统，以字号、字重、网格留白撑起信息层级，不依赖阴影和装饰；内置主体识别与避让算法，通过 image-overlay 规则标记 avoid 区域，在安全区内计算采样点明度反推字色与蒙版深度；自适应排版引擎根据安全区宽高动态计算字号，长句自动换行不溢出；全流程通过 SKILL.md 文件统一调度，形成 7 步闭环工作流。

2. 主要功能

• 双视觉系统输出： Editorial 杂志风专注于叙事、旅行与生活方式，采用满铺大图、宽松字距和留白美学；Swiss 网格风适用于产品测评、数据和方法论，以规整的网格、设备框和参数对比为特征。两者均通过 CSS Grid 实现精确控制，用户只需指定风格名即可切换。

• 三画板尺寸适配： 原生支持小红书 3:4 竖图、公众号 21:9 头图和 1:1 分享卡三种主流社交媒体画板。渲染时自动根据目标平台选择画板尺寸，无需手动裁剪或调整，确保图片在各平台显示完整且无拉伸变形。

• 28 个版式骨架： Editorial 提供 16 个骨架（M01-M16），涵盖 Image-Led Cover、Pipeline、Before/After、Quote Card 等常用布局；Swiss 提供 12 个骨架（S01-S12），包括 KPI Tower、H-Bar Chart、Matrix + Hero 等数据可视化布局。每个骨架都是独立的 HTML 模板，Agent 可根据内容类型自动选择或用户指定。

• 10 套主题预设与智能色彩适配： Editorial 包含 6 套主题（墨水经典、靛蓝瓷、森林墨、牛皮纸、沙丘、午夜墨），Swiss 包含 4 套锚点色（克莱因蓝、柠檬黄、柠檬绿、安全橙）。所有主题预设不允许自定义 hex 值，以此保护美学一致性。同时，系统会根据内容情绪（如旅行暖色、测评冷色）自动推荐主题，降低决策成本。

• 智能文字压图三步法： 第一步通过 image-overlay 规则识别主体，标记人脸、产品、文字密集区为 avoid 区域；第二步在安全区内均匀采样点，计算平均色和明度，决定字色（黑/白）与蒙版深度；第三步根据安全区宽高动态计算字号，长句自动换行不溢出，对比度低于 4.5 时强制加深蒙版。该机制确保文字在任何背景图片上均清晰可读。

• 自动图源工作流： 当用户未提供图片时，系统按 Unsplash → Pexels → Flickr CC → Wallhaven 优先级自动搜索并下载免费可商用图片，同时自动生成 SOURCES.md 文件记录图片来源，满足版权合规要求。Agent 只需指定关键词，即可完成从搜图到落地的全流程。

• 地图组件与截图美化： 内置 MapLibre + OSM 真实瓦片地图组件，支持多 pin 标记与连线，适合旅行攻略类内容。同时提供 9 张 WebP 真实材质背景和 .frame-shot / .device-browser / .device-phone 等工具类，用于截图美化，提升产品测评和教程类内容的专业感。

• WebGL 墨流背景与品类适配规则： Editorial 的 hero 页可挂载动态墨流背景，增加视觉层次感。系统内置 11 个品类适配规则（旅行、职场、影视、产品测评、读书、美食、游戏、彩妆、健身、家居、穿搭），根据品类自动路由版式、主题和图片风格，实现“一段文字，多套方案”。

3. 如何使用

1. 环境要求与前置条件： 需要 Node.js 18+ 环境，以及 Playwright 浏览器引擎（可通过 npx playwright install chromium 安装）。推荐在 Linux 或 macOS 系统上运行，Windows 需确保 PowerShell 执行策略允许。AI Agent 需具备 shell 执行权限（如 Claude Code 或 Codex），以便克隆仓库和运行渲染脚本。

2. 安装技能： 在 Agent 环境中执行以下命令即可自动克隆技能到 ~/.claude/skills/guizang-social-card-skill 目录：

   npx skills add https://github.com/op7418/guizang-social-card-skill --skill guizang-social-card-skill
   

   如果使用手动方式，可执行：

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

3. 配置内容与参数： 在 content/ 目录下创建 Markdown 文件，按照 SKILL.md 中定义的格式编写内容（包括标题、正文、图片链接、风格偏好、目标平台等）。例如：

   ---
   platform: xiaohongshu
   style: editorial
   theme: ink-classic
   layout: M03
   images:
     - https://example.com/photo.jpg
   ---
   # 标题
   正文内容...
   

   若不指定图片，系统将自动按优先级搜索。

4. 运行渲染： 在项目根目录执行 node render.mjs，该脚本会读取 content/ 下的文件，调用 Playwright 打开对应的 HTML 模板，截屏并输出 PNG 到 output/ 目录。渲染过程自动完成主体避让、文字自适应和主题应用。Agent 可多次迭代修改内容后重新渲染。

5. 查看与校验： 输出图片位于 output/ 文件夹，文件名包含平台和版式信息。系统还提供 validate-social-deck.mjs 校验脚本，基于 Playwright 真实 DOM 测量，检测溢出、字号上限、footer 碰撞等 6 条规则，确保每张卡片符合设计规范。

6. 注意事项： 首次运行需确保网络畅通以下载 Playwright 浏览器和图片素材；若使用自定义图片，建议使用高分辨率（至少 1200px 宽）以避免模糊；主题预设不可自定义 hex 值，如需调整可修改对应 CSS 变量，但会破坏美学一致性；地图组件需联网加载 OSM 瓦片，离线环境不可用。

4. 优缺点分析

5. 同类工具对比

选型建议： 如果你的目标平台主要是小红书和公众号，并且希望获得杂志级排版质感，Guizang Social Card Skill 是最佳选择，尤其是其品类感知和智能文字压图功能能大幅节省后期调整时间。如果你需要覆盖 Instagram、OG 图等更多平台，且注重品牌记忆化复用，Brand Social Design 更适合，但其学习曲线较陡。对于仅需要简单 Twitter/LinkedIn 卡片的用户，SocialScreenshots 的轻量级 Python 方案更易上手，但缺乏高级排版和自动图源能力。综合来看，Guizang Social Card Skill 在中文社交媒体场景下具有显著优势，尤其适合内容创作者和 AI 工作流集成。

6. 编辑点评

Guizang Social Card Skill 在技术创新上展现了独特思路：它不是另一个 AI 图像生成模型，而是一套可编程的排版系统。通过将杂志级设计规范编码为纯文本 HTML/CSS 模板，它让 AI Agent 能够像人类设计师一样精确控制版式、色彩和图像关系。这种“以代码驱动设计”的方法，避免了传统图像生成模型在文字渲染和排版上的不可控性，尤其适合需要大量重复生成但风格统一的场景（如社交媒体矩阵内容）。从实用价值看，它解决了内容创作者最头疼的配图问题：以往写一篇小红书笔记需要单独设计图片，现在 Agent 可一次性输出多张风格统一的卡片，且文字压图质量远超同类工具。其品类感知和自动图源功能进一步降低了使用门槛，即使没有设计背景的用户也能获得专业级输出。

适用人群主要包括：AI 内容创作者（尤其是使用 Claude Code / Codex 的用户）、社交媒体运营团队、产品测评博主、旅行博主以及需要批量生成公众号配图的编辑。对于技术团队，它可以作为内容生产流水线的一环，与 RAG、知识库等系统集成。未来发展潜力在于：随着 Agent 生态的成熟，此类“技能”类工具将成为标准组件，归藏的开源模式有利于社区贡献更多版式和主题，未来可能扩展至更多平台（如 Instagram、LinkedIn）和更多品类。此外，若能与本地大模型结合实现完全离线运行，将进一步提升可用性。

7. 应用场景

• 长文转小红书图文笔记： 将一篇长文章（如行业分析、读书笔记）的核心观点提取出来，自动拆分为 3–9 张 3:4 竖图。Editorial 叙事风适合情感类内容，Swiss 数据风适合干货类内容。Agent 可一次性生成整套笔记，用户只需复制文字即可发布，大幅提升内容生产效率。

• 产品测评发布： 输入测评文案，系统自动选择 Swiss 网格风 + 克莱因蓝主题，生成带设备框的参数对比图、KPI 柱状图和矩阵图。适合数码、美妆、家居等产品测评，图片可直接用于小红书、公众号或电商平台，统一品牌视觉。

• 旅行攻略制作： 使用 Editorial 杂志风满铺大图，叠加 MapLibre 地图组件标注路线与打卡点。用户只需提供文字游记和地点列表，Agent 即可生成包含地图、景点图片和分段标题的图文卡片，适合小红书探店攻略或公众号旅行专栏。

• 公众号封面输出： 同一份内容双画板渲染：21:9 头图 + 1:1 分享卡。系统自动保证两图在字体、色彩和排版上视觉统一，无需手动调整。用户可直接上传微信后台，封面与分享卡形成品牌一致性。

• 品牌社交媒体矩阵维护： 对于需要同时运营小红书、公众号等多个平台的企业，可将品牌文案统一输入，系统根据平台自动选择画板尺寸和主题（如品牌色预设），批量输出多平台适配的图片，确保视觉风格一致，节省设计人力。

8. 常见问题FAQ

Q：Guizang Social Card Skill 是否支持其他社交平台（如 Instagram、Twitter）？
A：目前原生支持小红书 3:4 竖图、公众号 21:9 头图和 1:1 分享卡。其他平台可通过修改画板尺寸和版式骨架实现扩展，但需自行调整 CSS 和渲染参数。社区期待未来增加更多平台模板。

Q：是否需要 GPU 才能运行？
A：不需要 GPU。渲染过程基于 Playwright 的 Chromium 浏览器截屏，全部在 CPU 上完成。对显存无要求，但建议内存至少 4GB 以确保浏览器流畅运行。

Q：能否自定义主题颜色和字体？
A：主题预设不允许自定义 hex 值，这是为了保证美学一致性。如需修改，可编辑 CSS 变量文件（如 themes.css），但会破坏预设的克制色板。字体目前仅支持系统默认字体（如 Helvetica、Arial），如需自定义需额外加载 web 字体。

Q：渲染输出图片的分辨率是多少？
A：小红书 3:4 竖图默认输出 1080×1440 像素，公众号 21:9 头图输出 1920×822 像素，1:1 分享卡输出 1080×1080 像素。可通过修改 render.mjs 中的 viewport 参数调整分辨率，但需注意版式骨架的适配性。

Q：如何解决中文换行时出现的字间距不均匀问题？
A：目前部分版式骨架针对英文优化，中文长句换行可能出现字间距不均。建议在内容中使用短句（每行不超过 20 字），或修改对应 CSS 中的 word-spacing 和 letter-spacing 属性。未来版本计划优化中文排版引擎。

Q：自动图源功能是否完全免费且可商用？
A：系统默认接入 Unsplash、Pexels、Flickr CC 和 Wallhaven，这些图库均提供免费可商用图片（需遵守各自许可证）。系统会自动生成 SOURCES.md 记录来源，用户应自行确认最终图片的商用授权范围。

9. 项目地址

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