夜雨聆风小红书图文 · 公众号封面 · Agent Skill · 瑞士设计 · 杂志排版 ——
guizang-social-card-skill 是一个 Claude Code / Codex 原生 Skill，
将文章、文案、截图或照片一键转化为可发布的小红书轮播图与微信封面对。
内容创作者的排版困境
每天写完文章后，还要在 Canva 里一张一张拉图、调间距、选字体。 工程师、产品经理、自由职业者——没有"组里专门做封面的人"。 市面上 AI 出图要么是"题目放中间 + 渐变背景 + emoji"的模板感， 要么出图周期太长，改几轮就放弃了。
这个项目瞄准的正是这个断点： 写和发之间缺一个"不假又高效"的排版层。 它不是新的设计工具，而是一个嵌入 Claude Code 工作流的 Skill—— 你写完文章后对 AI 说一句"帮我做一套小红书图文"，它就能在 30 分钟内 端出一组可以直接发的图，看起来像一本被偏爱的杂志， 而不是套模板。
谁最需要它？有内容但没有设计师的人： 技术博客作者、独立开发者、旅行博主、产品经理。 他们手头有 Markdown、截图、数字和文字，但没有时间也不擅长 在 Figma 或 Photoshop 里逐张排版。这个 Skill 填补的 正是"写完后到发出去"中间没人管的那段路。
更具体地说，项目定义了三档能力圈：旅行、职场、推荐品类可以 端到端强势输出（文字、结构、图源都在能力内）； 游戏、影视、美食食谱方向需要用户提供素材或网络取图； OOTD 实拍流、梦核、仿胶片调色等则明确不接。 这种分类本身就是产品决策——不是技术做不到， 而是硬接一定不好看。
三分钟上手，一句话出图
安装只需要一行命令：
npx skills add https://github.com/op7418/guizang-social-card-skill
--skill guizang-social-card-skill
装好后，直接对 Claude Code 说一句话就能触发。三个典型场景。
场景一：长文章 -> 小红书图文
帮我基于这篇文章做一套瑞士风小红书图文，5 张，IKB 蓝。
Skill 会自动走完 7 步工作流：理解内容 -> 提取故事骨架 -> 选风格（瑞士国际主义）-> 规划页面布局 -> 拷贝种子模板 -> 调用 Playwright 渲染 PNG -> 交付图片给用户。全程不需要你碰 设计软件，Agent 会问你一次"图从哪来"（用户自拍 / AI 生成 / 网络取图），之后自己完成。取图后会自动写一份 SOURCES.md 记录来源并询问你是否要在图上标注。
场景二：产品测评 -> 数据卡片
把这段产品测评做成 Swiss 风 3:4，第一页上 KPI Tower。
它会自动选择 S09 KPI Tower 版式骨架，用 IKB 克莱因蓝
作为锚点色，左对齐网格排数据。数据部分优先大字号数字 +
小字号标签的对比结构。中文标题自动限制在单行 8 个字以内，
超限时 AI 会建议压缩文案而不是强行塞入——这是产品承诺，
不是技术上限。
场景三：截图教程 -> 多页拆解
提供两三张 App 截图，然后对 Agent 说：
把这 3 张截图做成小红书教程卡，每张图配一句说明。
Skill 会自动调用截图美化资产：加圆角、模糊背景、裁安全区、 套 device-browser 或 device-phone 外壳。满铺图自动叠遮罩， AI 通过"主体映射"流程确定文字落点避开人脸和关键 UI。
关键约束： 不允许自定义 hex 颜色。你只能从 10 套预设里选。 Editorial 6 套（墨水经典、靛蓝瓷、森林墨、牛皮纸、沙丘、 Midnight Ink）+ Swiss 4 套（IKB 克莱因蓝、柠檬黄、柠檬绿、 安全橙）。"从 10 套里选最接近的"比"自由配色然后翻车"更可靠。
两套设计系统与种子模板架构
项目的核心创新藏在两个设计决策里。
双视觉系统解耦 不是做一个"通用模板库"，而是拆成两套独立的视觉语言： - Editorial Magazine × E-ink（杂志编辑风）： 衬线字体、纸墨调色板、杂志结构（ledger 表、旁注、引文）。 适合叙事、旅行、生活方式。16 个版式骨架 M01–M16。 - Swiss International（瑞士国际主义）： Inter 字体、单一高饱和度锚点色、左对齐网格、发丝线分隔。 适合产品测评、数据、方法论。12 个版式骨架 S01–S12。 两套系统共用 10 套主题色，暗色 Editorial 仅开放一版 Midnight Ink（金辉 accent）守住杂志感底线。
种子模板
每次出图不是从空文件开始写 HTML。AI 从一颗种子模板出发——
它已固化字体加载、CSS 变量、三种画板尺寸（小红书 3:4、
公众号 21:9 头图、1:1 方图）以及完整 class 定义。
AI 只需替换 <!-- POSTERS_HERE --> 区域内的内容骨架，
并选择版式 ID。这样一篇文章可以在同一套模板下
同时产出多个画幅，保持视觉一致性，且不再需要
为每一张图重复决定"间距用 --gap-7 还是 24px"。
文字压图的安全链 这是 AI 出图最容易翻车的位置。项目设计了逐级保护： 1. 选图评估：检查图片是否有足够安静区来放置文字 2. 强制主体映射：AI 读图后在 HTML 注释中记录人脸位置 3. 每张图独立写 object-position：禁止用默认裁剪 4. 缩略图测试：降级到 360px 宽确认标题依然可读
失败模式总结为硬规则写在 image-overlay.md 中。
校验脚本兜底
validate-social-deck.mjs 基于 Playwright 真实 DOM 测量，
检查 6 条规则：溢出、字号上限、footer 碰撞、4 横带密度、
frame 溢出、Swiss 大字重警告。默认不自动跑——
先让用户看图，需要时才跑，省下每轮 5–10 分钟的等待。
从个人创作到内容工作流
最直接的落地场景是技术博客的媒体化分发。 一个工程师写完工具评测后，30 分钟内可以同时拿到 小红书 3:4 推送图 + 公众号封面对，不需要设计师介入。 周报场景同理：一段 Markdown 加几个数字，10 分钟后产出 5–7 张趋势图加总结卡片。
对于旅行和生活方式博主，Editorial 模式下 Midnight Ink 暗色主题配合满铺主图，能生成有杂志气的连载封面。 瑞士风的中性网格对 AI 工具更新、年度数据回顾等 "信息密度高、装饰需求低"的内容尤其好用。
项目已规划"一次出多平台包"功能：同一份内容，同时输出 小红书轮播图 + 公众号封面对，一次渲染全部 PNG。 截图美化资产从姊妹项目 guizang-ppt-skill 移植完毕， 地图组件（MapLibre + OSM）已在途中。 长远看，它可能成为 Claude Code 生态里内容发布的标准排版层—— 不只是"生成一张图"，而是"把文本转化为多平台可发布的视觉包"。
这个项目好不好用，取决于你是否有"每天产内容但没有设计师" 这个真实的痛点。如果有，它就是目前 Claude Code 生态里 最贴近实际需求的社交卡片工具。
