content-pipeline

内容生产和分发管线。素材收集→出稿→排版→封面→多平台转换→一键分发。涵盖公众号写作排版、小红书轮播图、Chrome CDP 自动发布。

Repository: NealST/blog-source
Last source activity: June 10, 2026 at 10:16
Detected SKILL.md language: Chinese
Stars: 1
Forks: 0

Install options

The review-first prompt is selected by default. You can switch to a direct command or download a local copy.

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

A direct command skips the review prompt. Inspect the source before running it.

npx skills add https://github.com/NealST/blog-source --skill content-pipeline

The command stays on one line. Scroll horizontally to inspect it before copying.

Prefer a local copy? Download the files currently available to SkillsMP.

Review the source files

Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.

File Explorer

35 files

SKILL.md

Source instructions · Read-only preview

Back to search Back to installation

File Explorer

35 files

SKILL.md

Source instructions · Read-only preview

name	content-pipeline
description	内容生产和分发管线。素材收集→出稿→排版→封面→多平台转换→一键分发。涵盖公众号写作排版、小红书轮播图、Chrome CDP 自动发布。

内容管线 Content Pipeline

本技能默认使用墨筝品牌色。你可以在 references/ 目录下修改为自己的品牌色，或在 local/SKILL.local.md 中覆盖路径和个人设定。

一条龙：素材收集 → 写文章 → 排版 → 多平台内容 → 一键分发。

环境变量：$SKILL_DIR = 本 skill 目录（.claude/skills/content-pipeline），$MD_FORMATTER_DIR = md2wechat 排版器所在目录。两者由 Claude Code 技能加载时自动设置，无需手动 export。

存储位置

博客文章与自媒体产物分开存放：

source/_posts/                      # 博客长文（Hexo 管理，只放 .md）
content/[slug]/                     # 自媒体产物（content-pipeline 管理）
├── post.md                         # 短资讯源文件（仅短资讯有）
├── preview.html                    # 公众号排版预览
├── cover.html                      # 公众号头图
├── illustrations.html              # 品牌配图（HTML→PNG）
├── xiaohei-illustrations/          # 小黑手绘配图（AI 生图 PNG）
├── manifest.json                   # 分发清单
├── [主题]-小红书版.html            # 小红书轮播图
├── video/                          # HyperFrames 视频（Path C）
│   ├── design.md / index.html / bgm.mp3 / output.mp4
└── drafts/current.json             # 当前素材列表

两种内容形态：

博客长文：.md 在 source/_posts/，content/{slug}/ 只放产物
短资讯：.md 在 content/{slug}/post.md，产物同目录

slug = Markdown 文件名去掉 .md。

触发词

素材收集 & 出稿（Path A）

触发词	说明
"出稿"	写文章 + 排版 + 封面图

内容生成（Path B）

触发词	说明
`/xiaohongshu` + 微信链接	微信文章转小红书轮播图
"转小红书" / "做成小红书" + 微信链接	同上
"多平台分发" + 微信链接	一次生成所有平台内容
"转小红书并发布" + 微信链接	生成 + 自动触发分发

文章阅读

触发词	说明
`/read-gzh` + 微信链接	抓取并总结公众号文章
"帮我读一下这篇公众号" / "总结一下这篇文章"	同上

排版与配图

触发词	说明
"排版"	Markdown → 公众号 HTML
"做头图" / "封面图"	生成公众号头图 HTML
"头图提示词" / "封面提示词"	生成 DALL-E/Midjourney 极简生图 Prompt
"做竖版封面"	公众号封面 → 3:4 竖版（1080×1440）
"做配图" / "准备配图"	自动选型：流程/架构→品牌，观点/隐喻→小黑
"做小黑配图"	全部走小黑手绘风格（→ xiaohei-illustrations skill）
"做品牌配图"	全部走品牌信息图（HTML→PNG）
"排版+配图" / "全套排版"	排版 + 头图 + 配图一起生成

视频生成（Path C）

触发词	说明
"做视频" / "生成视频" / "video"	博客文章 → HyperFrames 视频

分发

触发词	说明
`/distribute` / "一键发布" / "全平台发布"	读取 manifest 发布
"发布到小红书" / "发布到公众号"	单平台发布

三条输入路径

Path A：出稿 → 写文章 → 排版 → 封面/配图 → manifest
Path B：微信链接 → 抓取 → 分析 → 小红书轮播图 → 文案 → manifest → 分发
Path C：博客文章 → 提取核心内容 → design.md → HyperFrames 视频 → 渲染

Path A：出稿

第 1 步：写文章

写 Markdown 文章。写作时参考写作 skill（../writing/SKILL.md）的 5 步方法论和 AI 模式检测。

第 2 步：排版

cd "$MD_FORMATTER_DIR"
python3 md2wechat_formatter.py [文章路径] -o content/[slug]/preview.html
# 可选：--font-size large（默认 16px）或 medium（15px）

重要：preview.html 必须通过脚本生成，禁止手写内联 style 的 HTML。脚本会自动处理 strong 颜色（深墨色 #1C1C1E）、WeChat 兼容性（div→section、rgba→hex、表格斑马条纹）等问题。手写内联样式容易引入金色 strong、不兼容属性等错误。

使用「墨筝」主题——墨色 #1C1C1E + 筝弦金 #C4956A + 宣纸底 #F2EDE3，融合 Medium 排版精华。CSS 自动内联到 style 属性，适配微信 API 推送。

排版避坑：H2 标题使用 border-left:4px solid #C4956A 时，引用块/提示词卡片不要再用同款金色左竖线。引用卡片用四面浅边框 + 浅米底 + 圆角：

<blockquote style="margin:0 0 16px; padding:14px 18px; border:1px solid #e8dfd0; background:#f5efe4; border-radius:6px; font-size:14px; line-height:1.7; color:#444">

正文加粗不用金色：<strong> 统一深墨色 #1C1C1E + font-weight:700，金色仅保留给 H2 左竖线和序号圆等装饰元素。避免长文中金色泛滥失去强调意义。

第 3 步：头图 + 配图

头图：→ 读 references/cover-template.md 竖版封面（可选）：→ 读 references/cover-vertical-spec.md

配图双模式（小黑优先）：

风格	适用场景	产出	流程
小黑手绘图（默认）	见下方小黑触发条件	`xiaohei-illustrations/*.png`（AI 直出）	→ 调用 `xiaohei-illustrations` skill
品牌信息图（仅结构化数据）	见下方品牌触发条件	`illustrations.html` → Playwright 截图 PNG	→ 读 `references/cover-template.md`

选型原则：小黑是默认风格，除非段落内容明确需要结构化信息展示才用品牌。拿不准时一律走小黑。

小黑触发条件（满足任一即走小黑）：

观点表达：核心观点、立场判断、价值主张
隐喻类比：用具象事物解释抽象概念
认知锚点：全文最想让读者记住的一句话/一个概念
前后对比：改造前 vs 改造后、旧方案 vs 新方案
总结归纳：章节小结、全文收束、经验提炼
经验教训：踩坑复盘、避坑指南、反直觉发现
情绪态度：痛点共鸣、成就感、挫折感
单一概念：一个关键词或短语的视觉化锚定
角色状态：人/团队/系统在某个情境下的状态

品牌触发条件（必须同时满足：内容本身是结构化的 + 结构关系是核心信息）：

多步骤流程：3 个以上步骤 + 明确的先后/并行关系 + 箭头连接
架构图：多个组件/模块 + 组件之间有数据流或依赖关系
矩阵/表格型信息：二维对比、分类矩阵
状态机：多个状态 + 状态之间的转移条件

选型流程（用户说"做配图"时执行）：

消化正文，提炼需要配图的段落（认知锚点优先）
对每张图先检查是否命中品牌触发条件（4 条都不命中 → 小黑）
输出 shot list，标注每张图的风格、位置、主题
用户确认后分别调用对应流程生成

关键规则：每个章节只配一张图，不要给同一段落同时安排品牌图和小黑图。两种风格按段落分工，混合编排在同一篇文章里。

配图与排版 HTML 关联：两种风格最终产出都是 PNG，统一通过  占位符插入 preview.html。illustrations.html 中的 slide-label 既是给人看的位置说明，也是 scripts/insert_image_placeholders.py 用来生成占位符的输入。两种标签格式（可在同一文件中混用）：

<!-- 品牌信息图（slide 会用 html2canvas / Playwright 截屏渲染） -->
<div class="slide-label">配图 N · 放在「锚点文字」之后</div>
<div class="slide dark" data-num="N"> ... </div>

<!-- 小黑手绘图（PNG 已经放在 xiaohei-illustrations/ 下） -->
<div class="slide-label">小黑 NN · 放在「锚点文字」之后 · 文件:NN-topic.png</div>
<div class="slide xiaohei-row" data-xiaohei="NN-topic.png">
  <img src="xiaohei-illustrations/NN-topic.png" />
</div>

data-num 给品牌 slide 一个稳定编号，对应输出文件 配图-N.png；.xiaohei-row 让 render_pngs.py 跳过这一行（PNG 已经在磁盘上）。scripts/insert_image_placeholders.py 会按 slide-label 的顺序，把对应文件名注入 preview.html 锚点章节末尾。

第 4 步：manifest + 收尾

生成 manifest.json，供 /distribute 使用。然后询问是否清空素材列表（drafts/current.json）。

WeChat 发布流程（全自动）：

排版（生成 preview.html）
生成配图 PNG
在 preview.html 中插入图片占位符
生成 manifest.json
/distribute --platforms wechat（API：上传封面→上传配图→替换占位符→推送草稿箱）

manifest wechat 字段：

html（必填）：排版后的 preview.html 路径
cover_image（必填）：封面 PNG 路径
title（必填）：文章标题
author：作者名（默认 墨筝）
digest：摘要（120 字内）
images：配图 PNG 路径列表（按文章中出现顺序）
markdown（可选）：文章 Markdown 路径（仅作记录）

Path B：微信链接 → 小红书

适配原理：公众号是线性长文（无限滚动），小红书是 540×720 卡片轮播（最多 18 张）。转换时内容必须 1:1 保留原文，但排版需从连续流重组为独立卡片，标题层级、表格、图片等均有对应转换规则。

第 1 步：抓取文章

python3 "${SKILL_DIR}/scripts/fetch_wechat_article.py" "<URL>" --json

超时 30 秒。失败则提示用户手动复制正文。

如果只是阅读（/read-gzh），抓取后生成结构化总结（基本信息/核心观点/关键信息/金句/图片内容/思考点），不进入后续流程。

第 2 步：分析文章结构

提取：标题、副标题/金句、核心概念、关键数据、步骤/流程、亮点/特色、方法论/金句、行动召唤。

第 3 步：拆分为卡片

按 references/xiaohongshu-card-rules.md 的完整规则执行内容拆分和卡片生成。核心要求：1:1 保留原文，禁止压缩。

第 4 步：生成图片 HTML

输出 [简短主题]-小红书版.html。生成前必读范例：references/xiaohongshu-examples/markdown-faithful-范例.html。

视觉样式规范见 references/xiaohongshu-text-card.md，生成逻辑和质量控制见 references/xiaohongshu-card-rules.md。

头像路径：content/[slug]/ 下用 ../_shared/avatar.jpg，配 onerror 回退。

格式校验：生成的 HTML 必须使用 markdown-faithful 格式（包含 .post-header、.post-body、.post-footer class 和 .bg-paper 宣纸背景）。不得使用旧版 .slide-title + .bg-light { background: #FFFFFF } 格式，该格式已废弃。内容页背景统一使用宣纸底 #F2EDE3。

颜色合规检查：生成后必须运行验证脚本，违规则修正后重新生成：

python3 "${SKILL_DIR}/scripts/validate_xhs_html.py" content/[slug]/*小红书版.html

第 5 步：生成小红书发布文案

根据内容类型选择风格：

个人 IP 风格（真人分享、踩坑） → 读 local/SKILL.local.md 中的个人品牌风格
墨筝风格（方法论、深度分析） → 读 references/platform-copy.md

第 6 步：输出 manifest.json

{
  "version": "1.0",
  "created": "<ISO时间戳>",
  "source": "<微信链接>",
  "title": "<文章标题>",
  "outputs": {
    "xiaohongshu": { "html": "...", "copy": { "title": "...", "body": "...", "tags": [...] } }
  }
}

若触发词为"多平台分发"，manifest 会额外包含 outputs.wechat 字段（结构同 Path A 的 manifest wechat 字段）。

第 7 步：用户微调

告知产出物路径，提示可调整。输入 /distribute 一键发布。

Path C：博客文章 → 视频

将博客长文转化为 HyperFrames 视频。视频输出到 content/[slug]/video/，自带墨筝品牌水印和 BGM。

视频定位：导流型（teaser），精选亮点引导观众到公众号阅读全文。

时长与内容决策

文章规模	时长	场景数	策略
短文（<2000字）	30-45s	4-5	每个要点标题+一句描述
中篇（2000-5000字）	45-60s	5-7	精选 8-12 个最有吸引力的要点
长文（>5000字）	60-90s	7-9	精选 12-15 个要点，按章节分组

每个要点至少 4-5 秒可读时间。宁可少选几个，也不要缩短停留时间。

流程

定位文章：从 source/_posts/[slug].md 读取，创建 content/[slug]/video/
生成 design.md：品牌色衍生（暗色基调，筝弦金暖金调性可提升至视频级 #D4A76A-#E8A850），字体必须从 hyperframes 内置列表选择
准备 BGM：复制 content/_shared/bgm.mp3（共享 BGM 资源；若不存在则从 content/ai-code-review-benchmark/video/bgm.mp3 回退）
调用 hyperframes 生成视频：进入目录，hyperframes 自动读取 design.md。品牌元素必带：常驻水印（公众号：墨筝，opacity 0.7）、BGM 音频轨（data-volume="0.3"）、尾屏 CTA。竖版布局（1080×1920）：顶部留 180px 平台安全区，scene-content padding 340px 64px 80px，水印 top:228px;left:60px
校验 & 渲染：npx hyperframes lint && npx hyperframes render --output output.mp4

分发流程（/distribute）

npx -y bun "${SKILL_DIR}/scripts/distribute/distribute.ts" --manifest /path/to/manifest.json
# 选择平台：--platforms wechat,xhs
# 预览模式：--preview

缩写	平台	状态
`wechat`	公众号	可用
`xhs`	小红书	可用

执行顺序：公众号 → 小红书（避免 Chrome 端口冲突）。

四级降级：L0 API 直推 → L1 自动发布 → L2 辅助发布 → L3 手动模式。公众号优先 L0（API 凭证来自环境变量 WECHAT_APPID+WECHAT_APPSECRET 或 ~/.config/wechat-api/config.json）。

品牌设计规范

所有平台统一使用墨筝品牌色体系。完整色板、比例法则、代码高亮配色见 → references/brand-colors.md

Script Directory

Script	Purpose
`scripts/fetch_wechat_article.py`	微信文章抓取
`scripts/insert_image_placeholders.py`	配图占位符插入
`scripts/distribute/distribute.ts`	分发主编排器
`scripts/distribute/cdp-utils.ts`	共享 CDP 工具 + Manifest 类型定义
`scripts/distribute/wechat-api.ts`	公众号 API 客户端
`scripts/distribute/platforms/*.ts`	各平台发布模块
`scripts/topview_image_gen.py`	TopView AI 生图（小黑配图，GPT Image 2）
`scripts/validate_xhs_html.py`	小红书 HTML 颜色合规检查
`scripts/render_pngs.py`	Playwright 渲染 HTML 为 PNG

Reference 文件索引

按需读取，不要一次性加载所有 reference。

场景	读取文件
出稿写文章	→ 写作 skill（`../writing/SKILL.md`）
品牌色/色板	`references/brand-colors.md` — 墨筝色体系 single source of truth
生成头图/品牌配图	`references/cover-template.md` — 头图 + 品牌信息图规范
生成小黑配图	`../xiaohei-illustrations/SKILL.md` — 小黑 IP 手绘风格
横版→竖版封面	`references/cover-vertical-spec.md`
小红书卡片生成规则	`references/xiaohongshu-card-rules.md` — 内容拆分逻辑、字号层级、质量控制、下载工具栏
小红书视觉样式	`references/xiaohongshu-text-card.md` — 组件 CSS 模板、配色方案、Header/Footer HTML
小红书文案	`references/platform-copy.md`
生成视频	hyperframes skill（`../hyperframes/SKILL.md`）
分发到各平台	`references/distribute-platforms.md`

故障处理

问题	适用	处理
微信抓取失败	Path B	提示用户手动复制文章正文
文章太短（<500字）	Path B	按内容自然分页，可能只需 3-5 张卡片
文章太长（>5000字）	Path B	充分利用 18 张额度，放不下则提示跳转公众号
导出图片模糊	Path B	检查 SCALE=2，浏览器缩放 100%
manifest 不存在	通用	提示先运行内容生成
Chrome 启动失败	分发	降级 L3（手动模式）

name	content-pipeline
description	内容生产和分发管线。素材收集→出稿→排版→封面→多平台转换→一键分发。涵盖公众号写作排版、小红书轮播图、Chrome CDP 自动发布。

内容管线 Content Pipeline

本技能默认使用墨筝品牌色。你可以在 references/ 目录下修改为自己的品牌色，或在 local/SKILL.local.md 中覆盖路径和个人设定。

一条龙：素材收集 → 写文章 → 排版 → 多平台内容 → 一键分发。

存储位置

博客文章与自媒体产物分开存放：

source/_posts/                      # 博客长文（Hexo 管理，只放 .md）
content/[slug]/                     # 自媒体产物（content-pipeline 管理）
├── post.md                         # 短资讯源文件（仅短资讯有）
├── preview.html                    # 公众号排版预览
├── cover.html                      # 公众号头图
├── illustrations.html              # 品牌配图（HTML→PNG）
├── xiaohei-illustrations/          # 小黑手绘配图（AI 生图 PNG）
├── manifest.json                   # 分发清单
├── [主题]-小红书版.html            # 小红书轮播图
├── video/                          # HyperFrames 视频（Path C）
│   ├── design.md / index.html / bgm.mp3 / output.mp4
└── drafts/current.json             # 当前素材列表

两种内容形态：

博客长文：.md 在 source/_posts/，content/{slug}/ 只放产物
短资讯：.md 在 content/{slug}/post.md，产物同目录

slug = Markdown 文件名去掉 .md。

触发词

素材收集 & 出稿（Path A）

触发词	说明
"出稿"	写文章 + 排版 + 封面图

内容生成（Path B）

触发词	说明
`/xiaohongshu` + 微信链接	微信文章转小红书轮播图
"转小红书" / "做成小红书" + 微信链接	同上
"多平台分发" + 微信链接	一次生成所有平台内容
"转小红书并发布" + 微信链接	生成 + 自动触发分发

文章阅读

触发词	说明
`/read-gzh` + 微信链接	抓取并总结公众号文章
"帮我读一下这篇公众号" / "总结一下这篇文章"	同上

排版与配图

触发词	说明
"排版"	Markdown → 公众号 HTML
"做头图" / "封面图"	生成公众号头图 HTML
"头图提示词" / "封面提示词"	生成 DALL-E/Midjourney 极简生图 Prompt
"做竖版封面"	公众号封面 → 3:4 竖版（1080×1440）
"做配图" / "准备配图"	自动选型：流程/架构→品牌，观点/隐喻→小黑
"做小黑配图"	全部走小黑手绘风格（→ xiaohei-illustrations skill）
"做品牌配图"	全部走品牌信息图（HTML→PNG）
"排版+配图" / "全套排版"	排版 + 头图 + 配图一起生成

视频生成（Path C）

触发词	说明
"做视频" / "生成视频" / "video"	博客文章 → HyperFrames 视频

分发

触发词	说明
`/distribute` / "一键发布" / "全平台发布"	读取 manifest 发布
"发布到小红书" / "发布到公众号"	单平台发布

三条输入路径

Path A：出稿 → 写文章 → 排版 → 封面/配图 → manifest
Path B：微信链接 → 抓取 → 分析 → 小红书轮播图 → 文案 → manifest → 分发
Path C：博客文章 → 提取核心内容 → design.md → HyperFrames 视频 → 渲染

Path A：出稿

第 1 步：写文章

写 Markdown 文章。写作时参考写作 skill（../writing/SKILL.md）的 5 步方法论和 AI 模式检测。

第 2 步：排版

cd "$MD_FORMATTER_DIR"
python3 md2wechat_formatter.py [文章路径] -o content/[slug]/preview.html
# 可选：--font-size large（默认 16px）或 medium（15px）

使用「墨筝」主题——墨色 #1C1C1E + 筝弦金 #C4956A + 宣纸底 #F2EDE3，融合 Medium 排版精华。CSS 自动内联到 style 属性，适配微信 API 推送。

排版避坑：H2 标题使用 border-left:4px solid #C4956A 时，引用块/提示词卡片不要再用同款金色左竖线。引用卡片用四面浅边框 + 浅米底 + 圆角：

<blockquote style="margin:0 0 16px; padding:14px 18px; border:1px solid #e8dfd0; background:#f5efe4; border-radius:6px; font-size:14px; line-height:1.7; color:#444">

正文加粗不用金色：<strong> 统一深墨色 #1C1C1E + font-weight:700，金色仅保留给 H2 左竖线和序号圆等装饰元素。避免长文中金色泛滥失去强调意义。

第 3 步：头图 + 配图

头图：→ 读 references/cover-template.md 竖版封面（可选）：→ 读 references/cover-vertical-spec.md

配图双模式（小黑优先）：

风格	适用场景	产出	流程
小黑手绘图（默认）	见下方小黑触发条件	`xiaohei-illustrations/*.png`（AI 直出）	→ 调用 `xiaohei-illustrations` skill
品牌信息图（仅结构化数据）	见下方品牌触发条件	`illustrations.html` → Playwright 截图 PNG	→ 读 `references/cover-template.md`

选型原则：小黑是默认风格，除非段落内容明确需要结构化信息展示才用品牌。拿不准时一律走小黑。

小黑触发条件（满足任一即走小黑）：

观点表达：核心观点、立场判断、价值主张
隐喻类比：用具象事物解释抽象概念
认知锚点：全文最想让读者记住的一句话/一个概念
前后对比：改造前 vs 改造后、旧方案 vs 新方案
总结归纳：章节小结、全文收束、经验提炼
经验教训：踩坑复盘、避坑指南、反直觉发现
情绪态度：痛点共鸣、成就感、挫折感
单一概念：一个关键词或短语的视觉化锚定
角色状态：人/团队/系统在某个情境下的状态

品牌触发条件（必须同时满足：内容本身是结构化的 + 结构关系是核心信息）：

多步骤流程：3 个以上步骤 + 明确的先后/并行关系 + 箭头连接
架构图：多个组件/模块 + 组件之间有数据流或依赖关系
矩阵/表格型信息：二维对比、分类矩阵
状态机：多个状态 + 状态之间的转移条件

选型流程（用户说"做配图"时执行）：

消化正文，提炼需要配图的段落（认知锚点优先）
对每张图先检查是否命中品牌触发条件（4 条都不命中 → 小黑）
输出 shot list，标注每张图的风格、位置、主题
用户确认后分别调用对应流程生成

关键规则：每个章节只配一张图，不要给同一段落同时安排品牌图和小黑图。两种风格按段落分工，混合编排在同一篇文章里。

<!-- 品牌信息图（slide 会用 html2canvas / Playwright 截屏渲染） -->
<div class="slide-label">配图 N · 放在「锚点文字」之后</div>
<div class="slide dark" data-num="N"> ... </div>

<!-- 小黑手绘图（PNG 已经放在 xiaohei-illustrations/ 下） -->
<div class="slide-label">小黑 NN · 放在「锚点文字」之后 · 文件:NN-topic.png</div>
<div class="slide xiaohei-row" data-xiaohei="NN-topic.png">
  <img src="xiaohei-illustrations/NN-topic.png" />
</div>

第 4 步：manifest + 收尾

生成 manifest.json，供 /distribute 使用。然后询问是否清空素材列表（drafts/current.json）。

WeChat 发布流程（全自动）：

排版（生成 preview.html）
生成配图 PNG
在 preview.html 中插入图片占位符
生成 manifest.json
/distribute --platforms wechat（API：上传封面→上传配图→替换占位符→推送草稿箱）

manifest wechat 字段：

html（必填）：排版后的 preview.html 路径
cover_image（必填）：封面 PNG 路径
title（必填）：文章标题
author：作者名（默认 墨筝）
digest：摘要（120 字内）
images：配图 PNG 路径列表（按文章中出现顺序）
markdown（可选）：文章 Markdown 路径（仅作记录）

Path B：微信链接 → 小红书

第 1 步：抓取文章

python3 "${SKILL_DIR}/scripts/fetch_wechat_article.py" "<URL>" --json

超时 30 秒。失败则提示用户手动复制正文。

如果只是阅读（/read-gzh），抓取后生成结构化总结（基本信息/核心观点/关键信息/金句/图片内容/思考点），不进入后续流程。

第 2 步：分析文章结构

提取：标题、副标题/金句、核心概念、关键数据、步骤/流程、亮点/特色、方法论/金句、行动召唤。

第 3 步：拆分为卡片

按 references/xiaohongshu-card-rules.md 的完整规则执行内容拆分和卡片生成。核心要求：1:1 保留原文，禁止压缩。

第 4 步：生成图片 HTML

输出 [简短主题]-小红书版.html。生成前必读范例：references/xiaohongshu-examples/markdown-faithful-范例.html。

视觉样式规范见 references/xiaohongshu-text-card.md，生成逻辑和质量控制见 references/xiaohongshu-card-rules.md。

头像路径：content/[slug]/ 下用 ../_shared/avatar.jpg，配 onerror 回退。

颜色合规检查：生成后必须运行验证脚本，违规则修正后重新生成：

python3 "${SKILL_DIR}/scripts/validate_xhs_html.py" content/[slug]/*小红书版.html

第 5 步：生成小红书发布文案

根据内容类型选择风格：

个人 IP 风格（真人分享、踩坑） → 读 local/SKILL.local.md 中的个人品牌风格
墨筝风格（方法论、深度分析） → 读 references/platform-copy.md

第 6 步：输出 manifest.json

{
  "version": "1.0",
  "created": "<ISO时间戳>",
  "source": "<微信链接>",
  "title": "<文章标题>",
  "outputs": {
    "xiaohongshu": { "html": "...", "copy": { "title": "...", "body": "...", "tags": [...] } }
  }
}

若触发词为"多平台分发"，manifest 会额外包含 outputs.wechat 字段（结构同 Path A 的 manifest wechat 字段）。

第 7 步：用户微调

告知产出物路径，提示可调整。输入 /distribute 一键发布。

Path C：博客文章 → 视频

将博客长文转化为 HyperFrames 视频。视频输出到 content/[slug]/video/，自带墨筝品牌水印和 BGM。

视频定位：导流型（teaser），精选亮点引导观众到公众号阅读全文。

时长与内容决策

文章规模	时长	场景数	策略
短文（<2000字）	30-45s	4-5	每个要点标题+一句描述
中篇（2000-5000字）	45-60s	5-7	精选 8-12 个最有吸引力的要点
长文（>5000字）	60-90s	7-9	精选 12-15 个要点，按章节分组

每个要点至少 4-5 秒可读时间。宁可少选几个，也不要缩短停留时间。

流程

定位文章：从 source/_posts/[slug].md 读取，创建 content/[slug]/video/
生成 design.md：品牌色衍生（暗色基调，筝弦金暖金调性可提升至视频级 #D4A76A-#E8A850），字体必须从 hyperframes 内置列表选择
准备 BGM：复制 content/_shared/bgm.mp3（共享 BGM 资源；若不存在则从 content/ai-code-review-benchmark/video/bgm.mp3 回退）
调用 hyperframes 生成视频：进入目录，hyperframes 自动读取 design.md。品牌元素必带：常驻水印（公众号：墨筝，opacity 0.7）、BGM 音频轨（data-volume="0.3"）、尾屏 CTA。竖版布局（1080×1920）：顶部留 180px 平台安全区，scene-content padding 340px 64px 80px，水印 top:228px;left:60px
校验 & 渲染：npx hyperframes lint && npx hyperframes render --output output.mp4

分发流程（/distribute）

npx -y bun "${SKILL_DIR}/scripts/distribute/distribute.ts" --manifest /path/to/manifest.json
# 选择平台：--platforms wechat,xhs
# 预览模式：--preview

缩写	平台	状态
`wechat`	公众号	可用
`xhs`	小红书	可用

执行顺序：公众号 → 小红书（避免 Chrome 端口冲突）。

品牌设计规范

所有平台统一使用墨筝品牌色体系。完整色板、比例法则、代码高亮配色见 → references/brand-colors.md

Script Directory

Script	Purpose
`scripts/fetch_wechat_article.py`	微信文章抓取
`scripts/insert_image_placeholders.py`	配图占位符插入
`scripts/distribute/distribute.ts`	分发主编排器
`scripts/distribute/cdp-utils.ts`	共享 CDP 工具 + Manifest 类型定义
`scripts/distribute/wechat-api.ts`	公众号 API 客户端
`scripts/distribute/platforms/*.ts`	各平台发布模块
`scripts/topview_image_gen.py`	TopView AI 生图（小黑配图，GPT Image 2）
`scripts/validate_xhs_html.py`	小红书 HTML 颜色合规检查
`scripts/render_pngs.py`	Playwright 渲染 HTML 为 PNG

Reference 文件索引

按需读取，不要一次性加载所有 reference。

场景	读取文件
出稿写文章	→ 写作 skill（`../writing/SKILL.md`）
品牌色/色板	`references/brand-colors.md` — 墨筝色体系 single source of truth
生成头图/品牌配图	`references/cover-template.md` — 头图 + 品牌信息图规范
生成小黑配图	`../xiaohei-illustrations/SKILL.md` — 小黑 IP 手绘风格
横版→竖版封面	`references/cover-vertical-spec.md`
小红书卡片生成规则	`references/xiaohongshu-card-rules.md` — 内容拆分逻辑、字号层级、质量控制、下载工具栏
小红书视觉样式	`references/xiaohongshu-text-card.md` — 组件 CSS 模板、配色方案、Header/Footer HTML
小红书文案	`references/platform-copy.md`
生成视频	hyperframes skill（`../hyperframes/SKILL.md`）
分发到各平台	`references/distribute-platforms.md`

故障处理

问题	适用	处理
微信抓取失败	Path B	提示用户手动复制文章正文
文章太短（<500字）	Path B	按内容自然分页，可能只需 3-5 张卡片
文章太长（>5000字）	Path B	充分利用 18 张额度，放不下则提示跳转公众号
导出图片模糊	Path B	检查 SCALE=2，浏览器缩放 100%
manifest 不存在	通用	提示先运行内容生成
Chrome 启动失败	分发	降级 L3（手动模式）

content-pipeline

Source facts

Install options

Review the source files

More from this repository

内容管线 Content Pipeline

存储位置

触发词

素材收集 & 出稿（Path A）

内容生成（Path B）

文章阅读

排版与配图

视频生成（Path C）

分发

三条输入路径

Path A：出稿

第 1 步：写文章

第 2 步：排版

第 3 步：头图 + 配图

第 4 步：manifest + 收尾

Path B：微信链接 → 小红书

第 1 步：抓取文章

第 2 步：分析文章结构

第 3 步：拆分为卡片

第 4 步：生成图片 HTML

第 5 步：生成小红书发布文案

第 6 步：输出 manifest.json

第 7 步：用户微调

Path C：博客文章 → 视频

时长与内容决策

流程

分发流程（/distribute）

品牌设计规范

Script Directory

Reference 文件索引

故障处理

More from this repository

内容管线 Content Pipeline

存储位置

触发词

素材收集 & 出稿（Path A）

内容生成（Path B）

文章阅读

排版与配图

视频生成（Path C）

分发

三条输入路径

Path A：出稿

第 1 步：写文章

第 2 步：排版

第 3 步：头图 + 配图

第 4 步：manifest + 收尾

Path B：微信链接 → 小红书

第 1 步：抓取文章

第 2 步：分析文章结构

第 3 步：拆分为卡片

第 4 步：生成图片 HTML

第 5 步：生成小红书发布文案

第 6 步：输出 manifest.json

第 7 步：用户微调

Path C：博客文章 → 视频

时长与内容决策

流程

分发流程（/distribute）

品牌设计规范

Script Directory

Reference 文件索引

故障处理