归藏社交媒体卡片

技能介绍

归藏社交媒体卡片（guizang-social-card-skill）是产品设计师藏师傅做的社交媒体卡片技能：把文章或素材做成小红书图组、公众号封面和动态卡，用单文件 HTML + Playwright 渲染成 PNG 直接发。它属于 Cola 技能库里的「图片/设计/发布/分发」一类，交付物是 output/*.png，不需要部署，也不需要导出工具。

它有两套共用同一份工作流的视觉系统：电子杂志风做氛围与叙事，瑞士风做事实与结构。它不做横向翻页 PPT（那是同作者的 guizang-ppt-skill），也不做长视频正片剪辑、纯图片修图或无版式诉求的纯文字编辑。

适用场景

✅ 合适：小红书图文组图 / Live Photo 动态卡 / 公众号封面对 / 微信朋友圈封面 / 视频号封面 / 文章配图 / 教程拆页 / 数据回顾 / 旅行攻略 / 产品测评 / 截图说明。

❌ 不合适：横向翻页 PPT（用 guizang-ppt-skill）/ 长视频正片剪辑 / 纯图片修图 / 无版式诉求的纯文字编辑。

11 个小红书品类适配（按"能力圈"分三档）：端到端强势——旅行、职场、推荐（指定子类后）；文与结构强势、图依赖用户或搜图源——游戏、影视、美食（食谱方向）、彩妆（教程方向）、健身、家居、穿搭（精选方向）；能力圈外、主动说清不强行接——OOTD 实拍流 / 梦核 / 仿胶片调色 / 真实测肤美妆等强烈依赖摄影或后期的细分赛道。

核心能力

• 🖋 双视觉系统：电子杂志风做氛围与叙事，瑞士风做事实与结构，两套共用同一份工作流。
• 📐 3 个画板尺寸：.poster.xhs 1080×1440（小红书 3:4）、.poster.wide 2100×900（公众号 21:9）、.poster.square 1080×1080（公众号 1:1）。
• 🎬 Live Photo 动态卡：支持单视频、二宫格、三宫格、四宫格、三连拼图、长视频低成本诊断；小红书按 5s，微信公众号文章内按 3s。
• 🧩 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 套（墨水经典、靛蓝瓷、森林墨、牛皮纸、沙丘、Midnight Ink 暗色）+ Swiss 4 套锚点色（IKB Klein Blue、柠檬黄、柠檬绿、安全橙）。不允许自定义 hex 值。
• 🖼 图源工作流：用户图优先；无图时按 Unsplash → Pexels → Flickr CC → Wallhaven → 直接搜索的优先级取图，落本地 + 自动写 SOURCES.md。
• 🌫 WebGL 墨流背景：杂志风 hero 页可挂动态墨流；低性能或截图时可禁用。
• 🪧 文字压图 + 主体避让：满铺图先做 quiet-zone 与主体映射，文字避开人脸、产品和关键动作；需要时只加局部 tint，不默认全图遮罩。
• 🧰 截图美化资产：9 张 WebP 真实材质背景（Editorial 5 / Swiss 4），配套 .frame-shot / .device-browser / .device-phone 工具类。
• 🗺 地图组件：MapLibre + OSM 真实瓦片，支持多 pin + 连线，适合旅行攻略。
• ✅ 校验脚本：validate-social-deck.mjs 自动检测溢出、字号上限、4 横带密度、footer 碰撞。
• 📄 单文件 HTML + Playwright 渲染：不需要前端构建链，node render.mjs 直接出 PNG。

校验脚本的 9 条规则

node validate-social-deck.mjs path/to/task-dir，基于 Playwright 真实渲染测量，不是静态扫描：

• R1 Overflow — 任何 section 超出 .poster 立刻报错，并给出超出像素对应的修正阶梯。
• R2 Footer Collision — 内容压到底部 footer / page-number。
• R3 Swiss Bold Display — Swiss 大标题违反"越大越细"时报警。
• R4 Min Readable Font — 正文、说明、标签字号低于手机可读下限。
• R5 4-Band Density — 1440 高画布切 4 横带，每带应有内容或主动留白理由。
• R6 H-XL Line Cap — .h-xl / .h-display / .h-statement 行数超出画板预算。
• R7 Figure Margin Drift — 浏览器默认 margin 造成版式漂移。
• R8 Visual Bounds — 测量真实可见内容的上/下边界，报告视觉超出和底部空白。
• R9 Title Gap — 标题与下一块内容之间的距离过小，避免贴在一起。

SKILL.md 第 7 步明确默认不自动跑 validator —— 等用户先看完图再问，避免每轮多花数十秒。

Live Photo 的定位

Live Photo 在这个 Skill 里的定位是"把用户提供的视频装进社交卡版式"，不是让 Agent 随机找公开视频，也不是长视频正片剪辑。先让首帧按静态卡片成立，再让 3s/5s 的动作补充信息。

信息量判断是第一步：微信 3s 更适合一个动作点或一次状态变化；小红书 5s 可以容纳一个小过程；三连拼图适合三个并列结果，不适合讲一个必须顺序理解的长故事。

效果预览

主题色预设

不允许自定义 hex 值，只能从 10 套预设里挑——保护美学比给自由更重要。

切主题只需替换种子模板的属性，所有 CSS 走 var(--...)。

工作方式

Skill 本身是结构化工作流，Agent 会按 7 步走：

1. Intake — 抓 4 件事：目标平台 / 风格 / 内容素材 / 用户图。无图时一次性给 A/B/C 三选（自己拍图 / AI 生图 / 网络取图），不二次劝导。
2. Style & Theme — 选 Editorial 还是 Swiss，再从 10 套预设里选主题色。不允许自定义 hex。
3. Layout Selection — 根据内容结构从 28 个版式骨架里挑、粘、改文案。
4. Asset Prep — 取图（Unsplash / Pexels / Flickr CC / Wallhaven / 直接搜索），落本地 + 写 SOURCES.md；问用户要不要标来源。
5. Compose & Render — 拷种子模板 → 替换内容 → node render.mjs。
6. Deliver & Review — 先把 PNG 给用户看，询问"你自己看还是我先帮你跑 validator"，默认不自动核查。
7. Iterate — 用户提反馈，改 inline 样式或 swap 版式 / 替图，重渲。

Live Photo 请求会在第 5 步进入动态分支：先判断 3s/5s 内能承载的信息量，抽首帧或稀疏 contact sheet 检查裁切，再输出 JPG + MOV + .pvt。交付时会提醒平台限制和发布路径。

为什么是单文件 HTML 渲 PNG：HTML + CSS 是文本，Agent 能直接写、读、改、验证；CSS Grid + 严格字号/留白/网格的版式精度远超 Markdown 排版；能接 Unsplash / Pexels / Wallhaven / Mapbox / OSM 等任意网络资源；validate-social-deck.mjs 用 Playwright 跑真实 DOM 测量而不是猜；output/*.png 直接发，不需要部署。

平台支持：Claude Code 支持（原生 Skill 工作流，适合生成 + 迭代图文）；Codex 支持（适合长流程图文生成、调用图片源、做视觉检查）；Cursor / 其他本地 Agent 可用（需要能读写文件 + 执行 shell）；普通 Chatbot 不推荐（没有文件系统和渲染管线时无法稳定出图）。

你需要提供

• 目标平台（小红书 / 公众号 / 朋友圈 / 视频号等）与想要的风格（Editorial 或 Swiss）。
• 内容素材：文章、文案或素材文件。
• 图片素材：自己的图，或确认走 AI 生图 / 网络取图。
• 做 Live Photo 时需要提供视频素材，并确认发在哪个平台。

你会获得

• output/*.png：可直接发布的小红书 3:4 图组、公众号 21:9 头图与 1:1 分享卡等。
• 需要时附带的 SOURCES.md 图源记录。
• Live Photo 分支输出预览视频、关键 JPG、MOV 和 .pvt 包（小红书 5s、微信公众号文章内 3s）。

使用示例

安装

一行命令安装（推荐）：

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

也可以把下面这段话直接发给有 shell 权限的 AI Agent：

帮我安装 guizang-social-card-skill。请把 https://github.com/op7418/guizang-social-card-skill 克隆到 ~/.claude/skills/guizang-social-card-skill,安装完成后检查 SKILL.md、assets/、references/ 是否存在。

已经安装过的话，用这段话更新：

帮我更新 guizang-social-card-skill。请进入 ~/.claude/skills/guizang-social-card-skill 执行 git pull,然后告诉我当前最新 commit。

触发关键词

• "帮我做一套小红书图文 / Xiaohongshu 图文"
• "帮我做一套 Rednote 卡片"
• "做一个公众号 21:9 头图 + 1:1 分享卡"
• "生成一套 social cards / 杂志风社交卡片"
• "把这篇文章做成轮播图文 / 教程拆页"
• "做一套瑞士风的小红书测评 / IKB 风格图文"
• "把这段视频做成小红书 Live Photo / 三连实况拼图"
• "做一个微信公众号文章内 3 秒 Live Photo"

对话示例

帮我基于这篇文章做一套瑞士风小红书图文,5 张,IKB 蓝。

基于这份产品测评做一套小红书 3:4,标题用电子杂志风。
帮我把这篇文章做成公众号封面对:21:9 头图 + 1:1 分享卡,视觉保持一致。
我有 3 张露营照片,帮我做一套全图风格的小红书图文。
把这段游戏攻略文案做成一套小红书图文,需要从 wallhaven 拿点游戏原画。
我有一段咖啡视频,帮我做成小红书 5 秒 Live Photo 卡片,文字压在安静区域。
把这三个游戏片段做成三连 Live Photo 拼图,用 Swiss 风介绍攻略要点。

Live Photo 相关：

把这个咖啡视频做成小红书 5 秒 Live Photo,标题只放一组,避开杯子和手。
这四段旅行视频素材质量很好,帮我做成四宫格 Live Photo,不加文字。
这段 2 分钟游戏视频先做 contact sheet,帮我判断适合截哪 5 秒做攻略 Live Photo。

页面上的「试试这样做」示例：

• 把这篇文章生成 3 张小红书封面图：电子杂志风、瑞士风和暗色 Midnight Ink。
• 为这组内容做一套公众号 21:9 封面对图，并自动标注图源和版权来源。
• 把这个产品教程改成小红书 Live Photo 动态卡方案，输出镜头脚本和 HTML 画板。

视觉参考：Monocle / Kinfolk / Cereal 杂志的版式与字距；Massimo Vignelli / Helvetica Forever / 瑞士国际主义网格系统；Apartamento / The Gentlewoman 的图文比与人物纪实；小红书 / Rednote 信息流里"克制反而吃香"的内容样本；歸藏的图文卡片实践。