一个适用于 Claude Code、Codex 及类似编程智能体环境的智能体技能。它可以从文章、文案、屏幕截图、产品笔记、字幕或照片中生成 小红书/Rednote 轮播图 和 微信 21:9 + 1:1 封面对。
两种视觉体系共享一个工作流：
- 编辑风格。受 Monocle / Kinfolk / Cereal 启发的克制排版。最适合讲故事、生活方式、旅行、阅读、电影和个人观察。
- 瑞士国际风格。网格优先，单一锚定色，锐利细线，极致字体对比。最适合产品评测、数据、框架、教程和 AI 工具。
guizang-ppt-skill 的姊妹项目。共享视觉语言，独立维护。PPT 解决“横向滑动演讲”；本项目解决“静态信息流图片”。
30 秒快速开始
npx skills add https://github.com/op7418/guizang-social-card-skill --skill guizang-social-card-skill
或将其粘贴到具有 shell 访问权限的 AI 智能体：
为我安装 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，然后告诉我最新的提交信息。
然后向你的智能体提问：
用这篇文章为我制作一个瑞士风格的小红书轮播图，5 张卡片，IKB 蓝色。
其他有用的提示：
用这篇产品评测为我制作一个 3:4 的小红书套图，使用编辑风格的标题。
将这篇文章转换为微信封面对：21:9 主图 + 1:1 分享卡，视觉统一。
我有 3 张露营照片——为我制作一个以图片为主导的小红书轮播图。
将这份游戏攻略文案转换为小红书套图；从 Wallhaven 获取一些游戏美术素材。
你将获得
- 🖋 两种视觉体系：编辑风格营造氛围和叙事，瑞士风格强调事实和结构，共享一个工作流
- 📐 3 种画布尺寸：
.poster.xhs1080×1440（小红书 3:4）、.poster.wide2100×900（微信 21:9）、.poster.square1080×1080（微信 1:1） - 🧩 28 种布局骨架：16 种编辑风格（
M01-M16，包括图片主导封面、管道、前后对比）+ 12 种瑞士风格（S01-S12，包括 KPI 塔、水平条形图、矩阵加主图） - 🎨 10 种主题预设：6 种编辑风格（墨色经典、靛蓝瓷器、森林墨色、牛皮纸、沙丘、午夜墨色暗色）+ 4 种瑞士锚定色（IKB 克莱因蓝、柠檬黄、柠檬绿、安全橙）
- 🖼 图片来源工作流：首先使用用户图片；否则按以下顺序获取：Unsplash → Pexels → Flickr CC → Wallhaven → 直接搜索，下载到本地并自动生成
SOURCES.md - 🌫 WebGL 墨流背景：编辑风格的主页可以附带实时墨流动画；可以在低功耗设备或截图模式下禁用
- 🪧 图片叠加与人脸安全：全幅图片必须带有蒙版；文字放置区域必须避开主体。硬性规则参见
references/image-overlay.md - 🧰 截图美化素材：9 种真实纹理 WebP 背景（5 种编辑风格 / 4 种瑞士风格），搭配
.frame-shot/.device-browser/.device-phone工具 - 🗺 地图组件：MapLibre + OSM 实时瓦片，支持多点标记 + 连接线，专为旅行指南设计
- ✅ 验证器：
validate-social-deck.mjs自动检测溢出、字体上限违规、4 频段密度空缺和页脚冲突 - 📄 单文件 HTML + Playwright 渲染：无需前端构建流水线；直接运行
node render.mjs输出 PNG
适用 / 不适用
✅ 适用：小红书轮播图 / 微信封面对 / 朋友圈封面 / 视频号封面 / 文章配图 / 教程页面 / 数据回顾 / 旅行指南 / 产品评测 / 截图解说
❌ 不适用：横向滑动文稿（使用 guizang-ppt-skill） / 长视频生成 / 纯照片修图 / 无排版的纯文本编辑
11 种小红书内容分类
按“能力圈”分级——参见 references/category-cookbook.md：
端到端强项（文案 / 结构 / 图片均在范围内）：
- 旅行、职业、推荐（需指定子类别）
文案与结构强，图片依赖用户或来源素材：
- 游戏、电影、美食（食谱导向）、美妆（教程导向）、健身、家居、时尚（精选穿搭）
明确超出范围（不会强行适配）：
- OOTD 实拍 / 梦幻核 / 胶片模拟调色 / 真实皮肤测试美妆——任何严重依赖摄影或后期处理的题材
常见场景
| 任务 | 推荐流程 |
|---|---|
| 长文章 → 小红书轮播图 | 提取核心要点；编辑风格用于叙事节奏，瑞士风格用于数据分解 |
| 产品评测 / 工具总结 | 瑞士风格 + IKB 蓝色，优先使用 S09 KPI 塔 / S10 水平条形图 |
| 旅行 / 生活方式 | 编辑风格 + 午夜墨色或沙丘，M16 图片主导封面 用于全幅主图 |
| 微信封面对 | 将同一内容渲染两次：.poster.wide 21:9 + .poster.square 1:1，视觉统一 |
| 截图教程 / 工具演示 | .frame-shot + .device-browser，优先使用瑞士网格基座 |
| 游戏攻略 / 电影回顾 | 编辑风格 + 午夜墨色，从 Wallhaven 获取游戏美术用于全幅主图 |
| 数据回顾 / 年度总结 | 瑞士风格 + 柠檬黄或安全橙，矩阵 + 账本组合 |
为什么选择单文件 HTML 转 PNG
- 智能体友好：HTML + CSS 是文本——智能体可以直接编写、阅读、编辑和验证
- 布局精确：CSS Grid + 严格的字体 / 边距 / 网格规则远超 Markdown 的布局能力
- 开放图片来源：接入 Unsplash / Pexels / Wallhaven / Mapbox / OSM / 任何网络资源
- 可验证质量：
validate-social-deck.mjs运行 Playwright DOM 测量，而非猜测 - 简单交付：直接输出
output/*.png——无需部署，无需导出工具
平台支持
| 平台 | 状态 | 说明 |
|---|---|---|
| Claude Code | 支持 | 原生 Skill 工作流，理想用于生成和迭代卡片 |
| Codex | 支持 | 适合长文卡片生成、图片来源和视觉质量检查 |
| Cursor / 其他本地智能体 | 可用 | 需要文件系统读写 + shell 执行能力 |
| 纯聊天机器人 | 不推荐 | 没有文件系统和渲染流水线，无法可靠交付图片 |
安装
方式一：一行安装（推荐）
npx skills add https://github.com/op7418/guizang-social-card-skill --skill guizang-social-card-skill
方式二：将此内容粘贴到 AI 智能体
为我安装
guizang-social-card-skillClaude Code 技能。步骤：
- 确保
~/.claude/skills/存在（如果不存在则创建）- 运行
git clone https://github.com/op7418/guizang-social-card-skill.git ~/.claude/skills/guizang-social-card-skill- 验证：
ls ~/.claude/skills/guizang-social-card-skill/应显示SKILL.md、assets/、references/- 完成后告诉我。之后，诸如“给我做一个小红书轮播图”之类的话将触发此技能。
将上方代码块粘贴到 Claude Code / Cursor / 任何具有 shell 访问权限的 AI 智能体中。
方式三：手动 CLI
git clone https://github.com/op7418/guizang-social-card-skill.git ~/.claude/skills/guizang-social-card-skill
如何触发
安装后，Claude Code 会自动检测到此技能。触发短语：
- “给我做一个小红书 / Rednote 轮播图”
- “给我做小红书卡片”
- “做一个微信 21:9 主图 + 1:1 分享卡”
- “生成社交卡片 / 杂志风格社交卡片”
- “把这篇文章做成教程轮播图”
- “做一个瑞士风格的小红书评测 / IKB 风格卡片”
工作流
此技能是一个结构化的工作流。智能体将执行 7 个步骤：
- 接收 — 捕获 4 项内容：目标平台 / 风格 / 源内容 / 用户图片。当没有图片时，一次性提供 A/B/C 选项（自己拍摄 / AI 生成 / 在线来源）；不再重复提议
- 风格与主题 — 选择编辑风格或瑞士风格，然后从 10 种主题预设中挑选。不允许自定义十六进制颜色值
- 布局选择 — 从 28 种布局骨架中选择 / 粘贴 / 调整文案。16 种编辑风格 / 12 种瑞士风格
- 素材准备 — 获取图片（Unsplash / Pexels / Flickr CC / Wallhaven / 直接搜索），下载到本地并写入
SOURCES.md；询问是否注明来源 - 合成与渲染 — 复制种子模板 → 替换
<!-- POSTERS_HERE -->→node render.mjs - 交付与审查 — 首先展示 PNG，询问“你自己查看一下，还是需要我运行验证器？”——不会自动验证
- 迭代 — 应用用户反馈，微调内联样式或更换布局 / 图片，重新渲染
完整规范见 SKILL.md。详细信息参见对应的 references/*.md。
验证器
node validate-social-deck.mjs path/to/task-dir
基于 Playwright 真实渲染测量的 6 条规则，而非静态扫描：
- R1 溢出 — 任何超出
.poster的部分立即失败 - R2 字体上限 —
.h-xl/.h-display的大小和粗细组合超过种子定义 - R3 页脚冲突 — 内容挤入底部页脚 / 页码
- R4 4 频段密度 — 1440 高的画布分割为 4 个水平频段；每个频段必须包含内容或有明确的留白理由
- R5 框架溢出 —
.frame-img/.frame-shot的子元素溢出框架 - R6 瑞士身份 — 瑞士模板中内联
font-weight >= 700会警告（违反“越大越细”原则）
SKILL.md 第 7 步明确说明验证器不会自动运行——等待用户先查看图片，每轮可节省数十秒。
主题预设
从 references/theme-presets.md 中选择。不允许自定义十六进制颜色值——保护美学比选择的自由更重要。
编辑风格（6 种）
| 主题 | 色调 | 最适合 |
|---|---|---|
| 🖋 墨色经典 | #0a0a0b / #f1efea | 通用默认，商业话题，不确定时使用 |
| 🌊 靛蓝瓷器 | #0a1f3d / #f1f3f5 | 科技、研究、AI、技术写作 |
| 🌿 森林墨色 | #1a2e1f / #f5f1e8 | 自然、可持续、户外、非虚构 |
| 🍂 牛皮纸 | #2a1e13 / #eedfc7 | 怀旧、人文、阅读、文学 |
| 🌙 沙丘 | #1f1a14 / #f0e6d2 | 艺术、设计、创意、时尚 |
| ⚫ 午夜墨色 | #0e0d0c / #ece2cf / #d4a04a | 游戏主视觉 / 夜景 / 电影封面 / 黑神话·艾尔登法环风格暗黑主题 |
瑞士风格（4 种）
| 主题 | 锚定色 | 最适合 |
|---|---|---|
| 🔵 IKB 克莱因蓝 | #002FA7 | 通用默认，商业发布，AI 产品，框架 |
| 🟡 柠檬黄 | #FFD500 | 青春，体育，零售，消费，Y2K |
| 🟢 柠檬绿 | #C5E803 | 生态，健康，Z 世代，绿色品牌 |
| 🟠 安全橙 | #FF6B35 | 警告，新闻，工业，活力主题 |
要切换主题，只需替换种子模板中的 <section class="poster" data-theme="..."> 属性；所有 CSS 通过 var(--...) 解析。
目录
guizang-social-card-skill/
├── SKILL.md ← 主技能文件：7 步工作流
├── README.md ← 中文 README
├── README.en.md ← 本文件
├── HANDOFF.md ← 交接文档：事实 + 版本历史
├── PRODUCT.md ← 产品文档：思路 + 决策 + 路线图
├── validate-social-deck.mjs ← Playwright 布局验证器
├── assets/
│ ├── template-editorial-card.html ← 编辑风格种子模板（6 主题 / 3 画布）
│ ├── template-swiss-card.html ← 瑞士风格种子模板（4 强调色 / 3 画布）
│ ├── magazine-bg-webgl.js ← WebGL 墨流背景
│ └── screenshot-backgrounds/ ← 9 种截图舞台背景（WebP）
│ ├── style-a/ ← 5 种编辑风格
│ └── style-b/ ← 4 种瑞士风格
└── references/
├── platform-specs.md ← 平台 × 分辨率 × 命名
├── style-system.md ← 两种风格的硬性规则和反模式
├── theme-presets.md ← 全部 10 种调色板详情
├── layout-recipes.md ← 28 种布局骨架（M01-M16 + S01-S12）
├── components.md ← 字体 / 卡片 / 间距 / 图标
├── background-systems.md ← 墨流 / 网格 / 纸张层
├── portrait-fill.md ← 3:4 画板的留白策略
├── content-planning.md ← 钩子 / 分页 / 文案压缩
├── category-cookbook.md ← 11 种小红书内容分类路由表
├── image-overlay.md ← 全幅图片蒙版 + 人脸安全规则
├── screenshot-treatment.md ← `.frame-shot` 工具 + 截图美化
├── map-component.md ← `.map-block` MapLibre 地图
├── title-shortener.md ← 1:1 封面的短标题策略
├── production-workflow.md ← Playwright 渲染流水线
└── qa-checklist.md ← 质量检查清单
核心设计原则
- 克制胜过喧哗 — 克制的调色板在饱和的信息流中更显眼
- 结构胜过装饰 — 字体 / 对比 / 网格承载层次，而非阴影或卡片
- 布局先于自由 — 先选择，后调整；不可在 28 种骨架之外发明页面
- 用户图片优先 — 在接收阶段，一次性给出 A/B/C 选项；不要重复提议自己拍摄
- 蒙版 + 避开 — 全幅图片始终带有蒙版；文字放置区域必须避开主体（人脸 / 产品 / 文本密集区域）
- 越大越细 — 瑞士风格
.h-xl字号增大 → 字重必须减小。编辑风格遵循相同规则 - 不自动验证 — 让用户先看看，然后在验证前询问；每轮可节省数十秒
- 技能是产品，不是提示词 — 拥有 PRODUCT.md、版本号、更新日志、能力边界
- 本地测试不纳入版本控制 — 所有演示 / 冒烟测试存放在
local-tests/下，已写入 gitignore
视觉参考
- Monocle / Kinfolk / Cereal 杂志的排版和字母间距
- 马西莫·维涅里 / Helvetica 永恒 / 瑞士国际印刷风格网格体系
- Apartamento / The Gentlewoman 的图片与文字比例和人物肖像
- 小红书 / Rednote 上“克制赢得信息流”的案例
- 归藏的社交卡片实践
路线图
- 针对长编辑风格内容中字体上限边缘情况的更多冒烟测试
- 更多瑞士风格数据布局（额外的图表骨架）
- 图片生成后：主动询问是否进行局部修改 / 重新生成整个图片
- 更多分类的推荐布局包（目前 11 种中有 7 种是端到端强项）
- 适用于 Marketplace 的 WorkBuddy 版本
贡献
Bug、布局问题、新布局请求——欢迎提交 Issue 和 PR。修改的优先级：
- 编辑种子模板时，同时更新
references/components.md的对应表（大小 / 间距 / 字重） - 添加布局时，将完整配方添加到
references/layout-recipes.md（文案上限 + 最小密度） - 添加主题颜色时，同时更新种子模板的
[data-theme="..."]块 +references/theme-presets.md - 添加瑞士风格规则时，同时更新
validate-social-deck.mjs中的对应规则 - 你遇到的错误记录到
references/qa-checklist.md - 测试和演示存放在
local-tests/——不要污染技能根目录
许可证
AGPL-3.0 © 2026 op7418
本项目采用 GNU AGPL-3.0 许可证。要点：
- 需要署名 — 保留版权声明
- 衍生作品必须开源 — 任何修改版本、分支或再分发必须在 AGPL-3.0（或兼容许可证）下发布，并提供完整源代码
- 网络使用即分发 — 即使你只将修改版本作为 SaaS / 网络服务运行而不分发代码，也必须发布源代码（这是 AGPL 比 GPL 更严格的原因）
- 禁止闭源、专有或仅付费分发
完整条款参见 LICENSE。