Content Pipeline

内容管线 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）

文章阅读

排版与配图

视频生成（Path C）

分发

三条输入路径

• 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

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

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

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

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

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

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

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

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

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

配图与排版 HTML 关联：两种风格最终产出都是 PNG，统一通过 <!-- IMAGE:文件名.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 发布流程（全自动）：

1. 排版（生成 preview.html）
2. 生成配图 PNG
3. 在 preview.html 中插入图片占位符
4. 生成 manifest.json
5. /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 步：建立原文结构索引

小红书转换是排版转写，不是二次创作。先从原文建立结构索引：frontmatter 标题、所有 Markdown 标题（## / ###）、正文段落、列表项、代码块、图片。索引只用于拆卡和逐段核对，不得改写为“核心概念 / 亮点 / 方法论 / 行动召唤”等导读标题。

第 3 步：拆分为卡片

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

标题来源硬规则：HTML 里的 .h2 / .h3 只能来自原文 Markdown 标题。不得把正文短语、段落总结、章节概括提升为标题；不得新增“先说结论”“一句话解释”“核心逻辑”“为什么重要”等非原文标题。

文本来源硬规则：正文 <p>、列表项、代码块必须来自原文原句或原列表项。为适配卡片只能调整 HTML 包裹、跨页位置、列表符号和代码样式，不能合并句子、删词、换词、重排语义或补充解释。

第 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

内容忠实度自检：交付前必须人工/脚本双重核对：

• 扫描 HTML 中全部 .h2 / .h3 文本，逐个确认它们在源 Markdown 中以 ## / ### 出现。
• 抽查每张内容卡至少 1 段正文，确认能在源文中逐字找到。
• 若 18 张容量不足，只允许在第 17 张自然截断并追加公众号阅读提示；不得通过概括、改写或新增标题来塞入更多信息。

第 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），精选亮点引导观众到公众号阅读全文。

时长与内容决策

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

流程

1. 定位文章：从 source/_posts/[slug].md 读取，创建 content/[slug]/video/
2. 生成 design.md：品牌色衍生（暗色基调，筝弦金暖金调性可提升至视频级 #D4A76A-#E8A850），字体必须从 hyperframes 内置列表选择
3. 准备 BGM：复制 content/_shared/bgm.mp3（共享 BGM 资源；若不存在则从 content/ai-code-review-benchmark/video/bgm.mp3 回退）
4. 调用 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
5. 校验 & 渲染：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

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

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

品牌设计规范

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

Script Directory

Reference 文件索引

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

故障处理