小红书卡片、公众号封面与PPT：一稿多平台拆解方法

跨平台分发不是把同一张图片裁成不同尺寸，而是重新处理信息层级、文字长度和互动入口。本文比较小红书卡片、公众号封面和 PPT 的约束，建立从核心观点、版式草稿到导出验收的流程，让一稿多用保持内容一致又不牺牲平台可读性。文中只讨论可复现的步骤，不把单次结果扩展成产品承诺；每个结论都标注前提、证据和无法覆盖的边界。读者可以先完成最小验证，再按自己的版本、权限和数据补充实验。

一篇文章写完以后，最让人疲惫的通常不是再写一篇。

而是把它改成 8 张小红书卡片，做一张公众号头图，再做一份能在会议室打开的 PPT。每个平台都要求不同的比例、标题长度和信息密度，最后你会得到三套内容，颜色还不一样。

“一稿多发”不是把同一张图拉伸三遍。

小红书需要用户滑动时一眼看懂，公众号头图需要在极宽画布上保留标题和视觉锚点，演示文稿需要让讲述者按节奏翻页。它们共享主题，却不共享版式。

这一篇介绍两个项目：

~~~text
guizang-social-card-skill：小红书图文、公众号封面对、Live Photo 和社交卡片
guizang-ppt-skill：单文件 HTML 横向翻页 PPT、配图和多平台封面
~~~

两者都能在 Claude Code、Codex 等 Agent 环境中运行，也都把 HTML 当作主要的中间和交付格式。差别在于，一个围绕“社交卡片”设计，一个围绕“现场演示和叙事节奏”设计。

一、先把尺寸和目的对上

小红书 3:4，适合滑动阅读

Social Card Skill 的小红书画板是 .poster.xhs，尺寸为 1080×1440。它适合一张封面加多张内容卡片，正文要经过压缩，每张卡片只承载一个信息单元。

公众号 21:9 和 1:1，适合封面对

公众号头图是 .poster.wide，2100×900；分享卡是 .poster.square，1080×1080。两张图要保持同一套主题、关键词和视觉元素，但不能把 21:9 的构图直接裁成正方形。

HTML PPT，适合左右翻页

Guizang PPT Skill 默认生成单文件 HTML 横向 deck，浏览器直接打开即可演示。它不是多人在线编辑的 PowerPoint，也不是把整篇文章做成滚动网页，而是把观点按页面节奏重新组织。

尺寸只是第一层约束。真正决定结果的是读者在这个平台上要做什么。

二、Guizang Social Card Skill 做什么

项目地址：op7418/guizang-social-card-skill

这是一个适配 Claude Code 和 Codex 的图文卡片 Skill，支持从文章、文案、截图、产品笔记、字幕、照片或用户视频生成小红书图文组图、Live Photo 动态卡以及公众号 21:9 + 1:1 封面对。

安装命令是：

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

安装完成后，可以直接这样请求：

~~~text
基于这篇产品测评做一套小红书 3:4 图文。
先抽取 6 个核心观点，使用 Swiss 风格，给出每张卡的标题、正文上限和图片需求。
确认内容结构后，再生成单文件 HTML 并渲染 PNG。
~~~

它内置两套视觉系统：Editorial 更偏叙事和杂志感，Swiss 更偏事实、结构和高对比网格。当前 README 描述了 28 个版式骨架，Editorial 有 M01 到 M16，Swiss 有 S01 到 S12；主题预设共 10 套，不能随意输入一串自定义 hex 颜色破坏系统的一致性。

它真正解决的是版式稳定

一套小红书卡片最容易失败的地方不是没有设计，而是每一张卡都像不同的作品：封面字号很大，第二张突然变成小字长段落，第三张的色彩和前两张毫无关系。

Social Card Skill 会先根据内容结构选版式，再把文案放进模板。适合的结构包括：

• 封面和章节页。
• 前后对比。
• 流程和时间线。
• KPI 或横向条形图。
• 矩阵、分层和图文混排。
• 图片主导的产品或生活方式卡片。

你可以把一篇“企业 API 成本治理”拆成：

~~~text
第 1 张：问题，为什么模型越多，账单越难看
第 2 张：成本来自哪里，按项目、模型和 Token 拆开
第 3 张：网关怎么做路由和权限
第 4 张：预算、告警和失败重试
第 5 张：上线前检查
第 6 张：结论和行动清单
~~~

这比把文章六个小标题直接复制到六张图上更接近卡片阅读。

图片优先和来源记录

工作流优先使用用户自己的图片。如果没有图片，项目说明了 AI 生图或网络取图的路径，并建议把素材落到本地、写入 SOURCES.md。网络素材可以来自 Unsplash、Pexels、Flickr CC、Wallhaven 或直接搜索，但来源记录不能省。

满铺图还要先找 quiet zone，文字避开人脸、产品和关键动作，必要时加局部 tint，而不是默认在整张图上盖一层黑色遮罩。

如果你在做产品截图教程，项目还提供截图美化资产和 .frame-shot、.device-browser、.device-phone 等包壳工具。截图美化的目标是统一画面，不是把原始界面重画到连事实都变了。

三、Live Photo 不是把长视频塞进卡片

这是这个项目里最容易被误解的一部分。

Live Photo 的定位是“把用户提供的短视频装进社交卡片版式”。第一帧先要像一张合格的静态卡片，之后的 3 秒或 5 秒动作只负责补充信息。

项目给出的平台规划是：小红书按 5 秒，微信公众号文章内按 3 秒。小红书的 5 秒可以容纳一个小过程，微信文章内的 3 秒更适合一个动作点或一次状态变化。

常见结构包括：

• 单视频动态卡，适合咖啡、旅行、健身、产品状态和游戏瞬间。
• 二宫格、三宫格、四宫格，适合多个并列素材。
• 三连 Live Photo，适合三个并列结果或三个视角。
• 长视频诊断，先抽帧或做 contact sheet，再决定截哪一段。

正确的调用方式是把平台和素材说清楚：

~~~text
把这段咖啡视频做成小红书 5 秒 Live Photo。
先检查首帧构图，标题只放一组，避开杯子和手。
输出预览视频、关键 JPG、MOV 和用于手机发布的 .pvt，并告诉我发布路径。
~~~

如果内容需要声音、完整解释或连续教程才能看懂，就不适合硬塞进 3 秒或 5 秒的动态卡。生成后要检查首帧、裁切、文字位置、视频时长和移动端发布路径。

项目说明中也提醒，.pvt 通常需要传到 iPhone 后从对应 App 发布，电脑端或网页端一般不能直接识别为可发布的 Live Photo。输出一个文件，不等于平台发布成功。

四、Guizang PPT Skill 做什么

项目地址：op7418/guizang-ppt-skill

Guizang PPT Skill 用 HTML 生成横向翻页 deck、PPT 配图和多平台封面。它的交付核心是单文件 HTML，支持键盘左右键、滚轮、触屏滑动、底部圆点和 ESC 索引等浏览方式。

安装命令是：

~~~bash
npx skills add https://github.com/op7418/guizang-ppt-skill \
--skill guizang-ppt-skill
~~~

安装后可以直接说：

~~~text
帮我基于这篇文章做一份瑞士风 PPT，控制在 7 页左右，需要 2 到 3 张配图。
先给出页面节奏表，再生成 HTML，最后在浏览器里检查标题、图片和底部翻页组件。
~~~

它内置两套视觉系统。

Style A，电子杂志风

Style A 更适合个人分享、观点表达、行业内部讲话和叙事型内容。仓库当前提供 10 种布局，例如封面、章节、数据大字报、图文、图片网格、Pipeline 和对比页，并提供 5 套电子墨水主题。

Style B，瑞士国际主义

Style B 更适合产品分析、事实表达、方法论和商业演示。它有 22 个具名锁定版式，使用 16 列网格、直角色块、发丝线和极强的字号对比。锚点色从预设中选择，例如克莱因蓝、柠檬黄、柠檬绿和安全橙。

瑞士风不是给同一个模板换一套 CSS。它对标题位置、图片槽位、字号、底部安全线和页面结构都有更强约束，并且仓库提供了版式校验脚本：

~~~bash
node scripts/validate-swiss-deck.mjs path/to/index.html
~~~

PPT 的页面节奏

长文章变 PPT 时，先抽取核心观点，再按 6 到 10 页组织，通常比把每一个小标题都做成一页更有现场感。

一个 7 页的产品分析可以是：

~~~text

1. 结论页，今天要记住什么
2. 现象页，为什么这个问题现在出现
3. 机制页，它是怎么工作的
4. 对比页，和替代方案差在哪里
5. 证据页，数据或案例是什么
6. 行动页，团队下一步怎么做
7. 收束页，把结论重新说一遍

~~~

演示文稿不是一篇文章的截图集。讲述者会在每一页停留、解释、翻页，页面需要留出讲述空间。大段表格、培训课件和需要多人同时在线编辑的场景，并不是这个 Skill 的强项。

五、两个项目怎么配合

它们可以共用素材和视觉主题，但不要让一个项目代替另一个项目。

场景一，一篇长文拆成小红书图文

使用 Social Card Skill。先做内容拆页，再选 Editorial 或 Swiss，最后输出 .poster.xhs 和 PNG。这里要控制每张卡的字数、信息密度和滑动节奏。

场景二，一场线下分享同时要封面

使用 PPT Skill 先完成 HTML deck。确定主题色和核心视觉以后，再生成公众号 21:9 头图、1:1 分享卡和小红书 3:4 封面。这样几种产物共享视觉系统，但各自适配画布。

场景三，用户给了一段视频

如果目标是社交平台短动态，使用 Social Card Skill 的 Live Photo 分支；如果目标是现场演示或完整视频，应该使用独立的视频制作工具，不要把长视频功能强行理解成 PPT 能力。

场景四，把 PPT 作为网页交付

两个项目都输出 HTML，但用途不同。Social Card 的 HTML 更像多个固定尺寸 poster 的渲染容器，PPT Skill 的 HTML 是有左右翻页和页面索引的 deck。都可以直接打开，却不应该互相套模板。

六、从一篇文章到多平台素材的完整流程

第 1 步，冻结内容母稿

先把标题、摘要、主论点、事实来源和不能改动的数字单独整理出来。母稿是事实源，不要让各个平台的改写结果反过来覆盖它。

第 2 步，建立视觉系统

选择 Editorial 或 Swiss，确定一套主题色和字体规则。平台比例后面可以变化，视觉骨架不要每张图都重新发明。

第 3 步，生成结构表

让 Agent 输出平台、页码、核心句、文案长度、图片需求和素材来源。示例：

~~~text
请把这篇文章拆成三个交付包：

1. 小红书 6 张 3:4 卡片
2. 公众号 21:9 头图 + 1:1 分享卡
3. 7 页横向 HTML PPT

每个包分别给出核心目标、标题长度、信息密度、版式建议和需要人工确认的事实。
不要直接生成图片，先输出结构表。
~~~

第 4 步，准备素材并记录来源

优先使用用户提供的图片。网络取图或 AI 生图时，记录来源、许可证、生成模型和使用范围。PPT 配图不要把页脚、标题、页码画进图片里，图片只作为页面槽位中的素材。

第 5 步，分平台渲染

Social Card 通过种子模板和 node render.mjs 输出 PNG。需要校验时运行：

~~~bash
node validate-social-deck.mjs path/to/task-dir
~~~

PPT 通过浏览器打开 HTML，必要时再运行瑞士风校验器。两类校验器都应该在内容和版式基本稳定以后运行，不能把校验通过当成视觉审美已经完成。

第 6 步，人工看最终图

自动脚本能发现溢出、字号超限、底部碰撞和图片槽位错误，但看不出一张图是否无聊、一个标题是否误导、一个来源是否不该公开。最终图必须由人看过。

七、企业级模型接入和生产治理

图片、HTML 和 PPT 生成通常会同时用到文本模型、图像模型和浏览器渲染。企业可以通过 上游 API 或其他企业级 API 网关统一接入多个模型，再按项目进行路由和计费。

建议至少拆成三个环境：

~~~text
draft：允许快速试错，额度较低，不接生产素材
review：允许团队审核，保留版本和来源
publish：只允许经过审核的素材进入发布目录
~~~

每个环境使用不同 Key，限制模型、额度和网络访问范围。日志记录项目、模型、耗时、失败类型、输出文件和费用；不要把私人图片、客户原始视频、未公开产品截图和明文 Key 写进普通日志。

如果要接入 CMS、公众号后台或企业内容平台，把“生成文件”和“提交发布”拆成两个权限。Agent 可以创建 output/ 目录里的 HTML 和 PNG，不应该因为能生成文件就自动拥有生产账号。

八、许可证和素材边界

两个仓库当前 README 都标注 AGPL-3.0。它和“随便复制到闭源 SaaS 里”不是一回事。只要你修改、再分发，或把修改后的版本作为网络服务提供，都要认真阅读 AGPL 的署名、源码公开和网络服务义务。最终以仓库当前 LICENSE 为准，商业使用前建议让法务确认。

许可证之外，还有素材和平台规则：

• 用户提供的照片不代表包含所有人物肖像权和场景授权。
• 网络图片要保留来源和许可证，不能因为下载方便就当成无版权。
• AI 生成图里的品牌、人物、字体和第三方标识仍然可能有权利风险。
• Live Photo 的 .pvt、视频和预览图要按平台要求保存，不要把调试包直接当发布包。
• 文章标题、数字和产品截图不能因为视觉重排而改变事实。

九、验收清单

小红书卡片

• [ ] 所有卡片都是 1080×1440，首图和内容卡的标题层级一致。
• [ ] 每张卡只承载一个信息单元，正文没有缩到无法阅读。
• [ ] Editorial 或 Swiss 的视觉系统从头到尾一致。
• [ ] 图片主体、文字 quiet zone 和平台安全区已经检查。
• [ ] 运行过 validate-social-deck.mjs，并人工看过最终 PNG。

公众号封面对

• [ ] 21:9 头图和 1:1 分享卡各自重新排版，没有强行裁切。
• [ ] 标题在缩略图状态下仍然可读，视觉焦点没有被裁掉。
• [ ] 头图和分享卡共用主题色、关键词和素材来源。
• [ ] 外部图片、字体和 AI 生成素材的许可边界已确认。

Live Photo

• [ ] 小红书按 5 秒、微信公众号文章内按 3 秒规划。
• [ ] 首帧单独看也像一张合格社交卡。
• [ ] 动作在短时长内有清楚的信息变化，不是无意义循环。
• [ ] 输出 JPG、MOV 和 .pvt，并说明手机端发布路径。
• [ ] 长视频先做抽帧诊断，没有硬截一段当成完整教程。

HTML PPT

• [ ] 页面数量服务于讲述节奏，通常控制在 6 到 10 页左右。
• [ ] Style A 或 Style B 的版式没有混用成一套失控模板。
• [ ] 浏览器中检查了翻页、目录、图片、标题和底部安全线。
• [ ] 瑞士风 deck 已运行对应校验器，P0 问题为零。
• [ ] HTML 可以直接打开，交付目录没有丢失图片和字体。

企业发布

• [ ] 上游 API 或企业 API 网关中的 Key 按项目和环境分组。
• [ ] 图片生成、渲染、审核和发布权限分开。
• [ ] 日志可以追踪模型和成本，但不记录明文密钥和敏感原始素材。
• [ ] 生成文件与最终发布文件有版本号和来源记录。

总结

一稿多平台的关键，不是让一个模型同时按三个尺寸出图，而是把同一份内容拆成三个阅读动作：

~~~text
小红书卡片，让人滑动时快速理解
公众号封面对，让文章在分享和打开前有统一识别
HTML PPT，让讲述者按页面节奏表达观点
~~~

guizang-social-card-skill 更适合社交卡片、封面对和短动态，guizang-ppt-skill 更适合现场分享、产品分析和网页演示。它们都支持视觉复用，但不会替你完成事实核验、素材授权和发布审核。

这组文章到这里就闭环了：前面用资料和写作 Skill 解决内容，今天用视觉 Skill 解决分发。真正可复用的不是某一张模板，而是一条有来源、有版本、有验收的内容生产链。

结论

本文给出了问题定位、配置或创作流程的可执行路径。实际结果仍取决于当前版本、权限和运行环境，提交前应按官方文档复核可变字段，并保留失败证据和回滚边界。