公众号排版模板提取

安装位置要求（重要）

本技能只安装到项目级，不要安装到全局目录（~/.claude/skills/、~/.agents/skills/ 等）：

多数工具（Codex、Kimi Code、Cursor 等）：解压到项目根目录的 .agents/skills/wechat-layout-template/（Agent Skills 开放标准 universal 目录，工具自动发现）
Claude Code：解压到项目根目录的 .claude/skills/wechat-layout-template/

安装方式：从技能中心页面下载 zip 解压到上述项目目录；或安装 content-system-setup 技能后运行 python3 scripts/setup.py --install-skills，自动下载安装全部配套技能（项目级）。

Overview

从参考公众号（如已有同风格文章）的已发布文章中提取 HTML 排版结构，识别跨文章重复出现的固定素材（品牌头图、尾图、二维码、引导关注文案等），替换为占位符，生成可复用的排版 HTML 模板。固定素材存入素材库，后续排版时直接从素材库取用，无需每次重新设计。

核心原则：两篇对比出固定内容——单篇文章中出现的图片/文案可能是内容相关的，两篇文章中都出现的相同图片/文案才是排版层面的固定素材。

微信兼容性约束（关键）

微信公众号后台会剥离 <style> 标签、class/id 属性，以及 flex/grid/transform/animation/position:fixed/var()/calc()/@media 等不受支持的 CSS 属性。生成的模板必须避开这些属性，否则发布后样式丢失。

完整清单见 references/wechat-compatibility.md。

模板写作约定：

模板文件（.html）允许使用 <style> + class 组织（便于人工维护和调整），wechat-layout-apply 的 apply-layout.py 会在排版时自动把 class 规则内联到元素 style=""，并删除 <style>、class、id
模板 CSS 禁止使用：display:flex、display:grid、gap、transform、animation、@keyframes、transition、var(--xxx)、calc()、@media、position:fixed/absolute/sticky、vw、vh、@font-face、@import
模板 CSS 推荐使用：display:block/inline-block、text-align、margin/padding（优先 padding）、font-family 系统字体栈、十六进制颜色、border-radius、background-color

验证方式：模板生成后，用 wechat-layout-apply 跑一次示例文章排版，检查输出 HTML 的「微信兼容性检查」报告是否全部 ✅，再发布到草稿箱实测。

When to Use

用户提供公众号文章链接，要求提取排版模板
用户说"把这个排版存成模板""沉淀公众号样式""提取排版结构"
用户想复用某篇文章的排版风格
用户想建立自己的排版素材库
用户需要对比两篇文章找出品牌固定元素

When NOT to Use

从零设计新排版 → 直接编写 HTML/CSS
发布文章到公众号 → 用 wechat-publisher 技能
仅查看文章内容 → 直接用 WebFetch
修改已有模板 → 直接编辑模板文件

Quick Reference

| 操作 | 说明 | |------|------| | 提取单篇排版 | 提供 1 个文章链接，提取完整 HTML 排版结构 | | 对比提取模板 | 提供 2 个文章链接，自动识别固定素材并替换为占位符 | | 查看已有模板 | ls AI第二大脑_内容创作系统/07_视觉与排版/排版模板/ | | 修改素材 | 直接编辑 AI第二大脑_内容创作系统/07_视觉与排版/排版模板/<模板名>/待替换素材.md | | 预览模板 | 打开模板文件夹中的 .html 文件在浏览器中查看 | | 参考修改模板 | 提供新文章链接 + 指定参考部位 → 修改模板 → 生成新预览 |

排版模板存储结构

每个排版模板一个独立文件夹，包含预览、待替换素材和内部文件：

AI第二大脑_内容创作系统/07_视觉与排版/排版模板/
├── 排版模板202605/              # 每个模板独立文件夹（以日期或名称命名）
│   ├── 排版模板202605.html      # 排版 HTML（含预览效果，可直接浏览器打开）
│   ├── 待替换素材.md            # 可替换素材清单（用户直接编辑此文件修改素材）
│   └── _内部文件/               # 脚本/缓存/素材库（用户无需关心）
│       ├── 素材库/              # 排版素材库
│       │   ├── materials.json   # 素材索引（固定文案、图片URL）
│       │   └── images/          # 本地备份的素材图片
│       └── 示例-标准排版.html  # 早期参考版本
├── 排版模板2026XX/              # 后续新模板按同样结构创建
│   ├── ...

素材库格式

materials.json 结构：

{
  "name": "示例公众号排版素材库",
  "updated": "2026-05-02T10:00:00+08:00",
  "materials": {
    "header_logo": {
      "type": "image",
      "description": "顶部品牌头图",
      "url": "https://mmbiz.qpic.cn/xxx/header-logo",
      "alt": "示例公众号",
      "placeholder": "{{header_logo}}"
    },
    "footer_qr": {
      "type": "image",
      "description": "底部二维码",
      "url": "https://mmbiz.qpic.cn/xxx/qr-code",
      "alt": "扫码关注示例公众号",
      "placeholder": "{{footer_qr}}"
    },
    "brand_intro": {
      "type": "text",
      "description": "品牌介绍文案",
      "content": "示例公众号——助力一线从业者找到自己的经营路径。",
      "placeholder": "{{brand_intro}}"
    },
    "follow_guide": {
      "type": "text",
      "description": "引导关注文案",
      "content": "点击上方蓝字关注我们，获取更多经营干货。",
      "placeholder": "{{follow_guide}}"
    }
  }
}

素材类型：

image：图片素材，通过 URL 引用
text：文案素材，直接存储文本内容
html：复杂 HTML 片段（如带链接的按钮、表格等）

Workflow

Step 1: 获取文章内容

用户提供 1-2 个公众号文章链接。用 WebFetch 获取每篇文章的完整 HTML。

WebFetch: <文章链接>
prompt: 提取这篇文章的完整 HTML 排版结构，包括所有图片URL、文字内容、CSS样式。保留原始 HTML 标签结构。

如果 WebFetch 返回的是渲染后的纯文本而非原始 HTML，提醒用户：公众号文章需要从浏览器获取原始 HTML（右键 → 检查 → 复制外层的 <section> 或 <div> 标签内容），或者提供文章的永久链接。

Step 2: 清洗 HTML

获取到原始 HTML 后，用 scripts/clean-layout.py 清洗：

python3 scripts/clean-layout.py \
  --input article-raw.html \
  --output article-clean.html

清洗操作：

移除 data-*、id、class 等微信自带属性（保留 style）
移除 <script>、<iframe>、广告追踪代码
标准化图片 src（去掉微信防盗链参数 ?wx_fmt=... 后的后缀不影响显示的可保留）
保留布局结构标签（<section>、<div>、<p>、<span>、<img>、<h1>-<h6> 等）
保留内联 style 属性

Step 3: 识别固定素材（对比模式）

当有两篇文章时，进入对比模式。对比逻辑：

文本对比：提取两篇文章中所有纯文本段落，找出完全相同的文本块
图片对比：提取两篇文章中所有 <img> 的 src，找出 URL 完全相同的图片
结构对比：找出两篇文章开头和结尾相同的 HTML 片段（头尾固定框架）

对比结果呈现给用户确认：

🔍 对比分析结果：

📷 共同图片（2 张）：
  1. https://mmbiz.qpic.cn/xxx/header.jpg — 顶部品牌头图
  2. https://mmbiz.qpic.cn/xxx/qr.jpg — 底部二维码

📝 共同文案（3 处）：
  1. "点击上方蓝字关注我们" — 引导关注
  2. "示例公众号——助力一线从业者" — 品牌介绍
  3. "扫码添加小助手，加入示例社群" — 引流文案

🏗️ 共同结构（2 处）：
  1. 文章开头 <section> 品牌标题区
  2. 文章结尾 <section> 关注引导区

以上内容将被标记为固定素材，替换为占位符。确认吗？

用户确认后，执行替换。

Step 4: 单篇模式（手动标注）

当只有一篇文章时，将完整 HTML 保存为 cleaned 版本，然后引导用户手动标注哪些是固定素材：

📋 已提取文章排版结构。

请告诉我这篇文章中哪些是每篇都会出现的固定内容：

示例：
- "顶部蓝色区域的品牌头图" → 固定素材
- "底部的二维码和关注文案" → 固定素材
- "文章标题下方的作者署名区" → 固定素材
- "正文中的配图" → 内容相关，不固定

请描述哪些区域是固定的，我来替换为占位符。

Step 5: 生成模板和更新素材库

将固定素材替换为占位符后：

创建模板文件夹：在 AI第二大脑_内容创作系统/07_视觉与排版/排版模板/ 下新建子文件夹（以日期或名称命名，如 排版模板202605/）
保存模板 HTML：替换占位符后的 HTML 保存到该文件夹下，作为排版预览文件
生成待替换素材：将固定素材写入 待替换素材.md（用户可直接编辑此文件更新素材）
保存内部文件：素材库 materials.json、清洗脚本缓存等存入 _内部文件/ 子目录

占位符命名规则：

图片类：{{header_logo}}、{{footer_qr}}、{{article_divider}}
文案类：{{brand_intro}}、{{follow_guide}}、{{brand_slogan}}
HTML 片段类：{{header_section}}、{{footer_section}}
内容占位符（每篇文章不同）：{{article_title}}、{{cover_image}}、{{article_body}}、{{topic_question}}

Step 6: 生成预览

模板 HTML 本身即包含预览效果——固定素材已具象化为实际内容（图片、文案），正文区域用示例文章填充。直接在浏览器中打开模板 HTML 即可预览。

# 在浏览器中预览模板效果
open AI第二大脑_内容创作系统/07_视觉与排版/排版模板/<模板名>/<模板名>.html

预览中包含：

固定素材：品牌图片、引导关注文案等实际显示效果
示例正文：从原始文章中截取的前几个段落，展示排版样式
完整的 CSS 样式：字体、字号、颜色、间距、背景等

Step 7: 验证模板

生成后验证：

模板 HTML 中所有 <img> 的 src 是否已替换为占位符或保留为内容图片
素材库中每个素材的 placeholder 字段在模板中是否能找到对应
预览 HTML 在浏览器中打开检查结构完整性和视觉效果

Step 8: 完成报告

✅ 排版模板提取完成

📁 模板文件夹：AI第二大脑_内容创作系统/07_视觉与排版/排版模板/排版模板202605/
├── 📄 排版模板202605.html    # 排版预览（浏览器打开查看效果）
├── 📝 待替换素材.md           # 可替换素材（编辑此文件修改素材）
└── 📦 _内部文件/              # 素材库及缓存

📊 对比分析：
  - 共同图片：1 张（动态分隔线 GIF）
  - 固定文案：7 处（栏目标签、END标记、关注引导、主编联系、品牌标语、话题前后缀）
  - 模板占位符：10 个（4 个内容占位 + 6 个素材占位）

🔧 后续操作：
  - 修改素材：编辑 待替换素材.md，告诉我「刷新预览」
  - 参考修改模板：提供新文章链接 + 指定参考部位 → 修改模板 → 新预览
  - 使用模板排版：用 wechat-layout-apply 技能

单篇模式 vs 对比模式

| 模式 | 输入 | 固定素材识别 | 适用场景 | |------|------|-------------|---------| | 对比模式 | 2 篇文章链接 | 自动识别（取交集） | 已有 2+ 篇同风格文章 | | 单篇模式 | 1 篇文章链接 | 用户手动标注 | 只有 1 篇参考文章 | | 追加对比 | 已有模板 + 1 篇新链接 | 用新文章验证已有素材 | 验证/完善已有模板 |

追加对比模式：如果已有模板和素材库，提供一篇新文章，验证已有固定素材是否在新文章中也出现——出现的确认保留，未出现的可能不是固定素材。

素材库修改

用户随时可以修改素材库：

# 编辑待替换素材.md（推荐方式）
编辑 AI第二大脑_内容创作系统/07_视觉与排版/排版模板/<模板名>/待替换素材.md

# 或直接编辑素材 JSON（高级用户）
编辑 AI第二大脑_内容创作系统/07_视觉与排版/排版模板/<模板名>/_内部文件/素材库/materials.json

修改支持：

更改素材 URL 或文案内容
新增素材（添加新条目，模板中需手动加对应占位符）
删除素材（删除条目，模板中对应占位符将在排版时被忽略）
修改素材描述（方便后续查找）

修改后无需重新生成模板，wechat-layout-apply 技能会在排版时自动读取最新的素材库。

参考修改模板

已有模板和素材库后，用户可以提供一篇新的参考文章链接，并指定要参考这篇文章的哪个部位，来修改模板的特定部分。修改后自动生成新的预览。

触发方式

用户：参考这篇文章 [链接] 的标题区样式，把模板的标题区改成那样的布局
用户：看看这篇文章 [链接] 的底部关注引导区，替换我们模板里的 footer 部分
用户：用这篇文章 [链接] 的分隔线样式，把我们的分隔线占位符换掉

工作流

1. 获取参考文章

用 curl 或 WebFetch 获取指定文章的 HTML 和内容。

2. 定位参考部位

用户指定要参考的部位（如"标题区""底部引导区""分隔线样式""正文排版"等）。从参考文章中提取对应部位的 HTML 结构、CSS 样式、图片 URL。

🔍 从参考文章中提取了「标题区」：

结构：封面图 → 标题 → 作者信息行（头像 + 昵称 + 时间）→ 分隔线
样式：标题字号 24px、居中、颜色 #1a1a1a、下方 12px 间距
新增元素：作者头像小图、发布时间

以下是要修改的部分，确认后将更新模板并生成新预览。

3. 确认修改

将修改方案呈现给用户确认：

哪些占位符保持不变（继续使用素材库）
哪些部位会新增（新增占位符或 HTML 结构）
哪些部位会修改（修改 CSS 样式或 HTML 结构）
哪些部位会删除（不再需要的占位符或结构）

4. 应用修改

用户确认后：

更新模板文件夹中的 HTML 文件（修改结构/CSS/占位符）
如有新固定素材，更新 待替换素材.md 和 _内部文件/素材库/materials.json
如有不再需要的素材，从素材库移除
刷新浏览器预览

5. 修改报告

✅ 模板已更新

📁 模板文件夹：AI第二大脑_内容创作系统/07_视觉与排版/排版模板/排版模板202605/
├── 📄 排版模板202605.html
└── 📝 待替换素材.md

🔧 本次修改：
  - 新增：作者信息行（{{author_avatar}}、{{author_name}}、{{publish_time}}）
  - 修改：标题字号 22px → 24px，增加下方间距
  - 保留：栏目标签、分隔线 GIF、底部固定素材

📦 素材库更新：
  + 新增素材：author_default_avatar（默认头像占位图）

参考部位关键词

用户可以用自然语言描述要参考的部位，常见表述：

| 用户表述 | 对应模板区域 | |---------|-------------| | "标题区""标题样式""头部排版" | 封面图 + 标题 + 栏目元信息 + 分隔线区域 | | "正文排版""段落样式""内文" | 正文区 p/h2/img/blockquote 样式 | | "底部引导""关注区""footer" | END标记 + 关注引导 + 主编联系 + 品牌标语区域 | | "分隔线""分割线样式" | 各小节之间的分隔符样式 | | "话题区""互动区" | 今日话题 section 结构和样式 | | "整体配色""色调" | CSS 颜色变量、背景色、字体色 | | "图片样式""配图" | 正文中 img 的圆角、阴影、边距、说明文字样式 |

Common Mistakes

| 错误 | 原因 | 修复 | |------|------|------| | 模板中断行/样式丢失 | 清洗 HTML 时过度清理 | 清洗脚本只移除 script/iframe，保留所有 style | | 把内容图片当成固定素材 | 只用 1 篇文章提取 | 用 2 篇文章对比，或用户逐项确认 | | 图片 URL 过期 | 微信图片 URL 有防盗链和有效期 | 素材库记录 URL，定期检查；关键图片建议下载到本地 images/ | | 占位符命名混乱 | 随意命名 | 遵循命名规则：{{类型_用途}} | | WebFetch 拿不到 HTML | 公众号文章需要微信环境 | 让用户在微信打开 → 复制链接 → 用浏览器打开 → 复制 HTML |

Resources

references/wechat-compatibility.md — 微信 HTML/CSS 兼容性指南（核心约束，生成模板前必读）
scripts/clean-layout.py — HTML 清洗脚本，移除微信属性/脚本，保留布局结构和内联样式
scripts/generate-preview.py — 预览生成脚本，将素材库内容填入模板生成可视化预览
references/placeholder-guide.md — 占位符命名规范
references/material-format.md — 素材库格式详解