---
name: hundun-wechat-layout
description: |
  混沌学园风格微信公众号文章 HTML 排版技能。适用于将微信公众号原文章内容（文字+图片）提取后，
  以混沌品牌视觉体系（混沌黄 #F5B700 + 石墨黑 #181818 + 原生白底）重新排版生成可直接粘贴到
  微信公众号编辑器的纯内联 HTML 代码。支持 Hero 大图 + 瀑布流图墙、时间线卡片、模块卡片等组件。
---

# 混沌学园微信公众号 HTML 排版技能

## 一、适用场景

当用户要求以下操作时，应激活此技能：

- 将微信公众号文章重新排版为混沌学园品牌风格
- 抓取微信公众号文章并生成新的 HTML 排版
- 制作混沌风格的微信推文 HTML 片段
- 生成适用于微信公众号编辑器的纯内联样式 HTML

## 二、核心设计规范

### 2.1 色彩体系

| 角色 | 色值 | 用途 |
|:-----|:-----|:-----|
| **混沌黄 (Primary)** | `#F5B700` | 标题强调、侧边 Accent 条、标签徽章、CTA 按钮、边框点缀 |
| **深金 (Secondary)** | `#D99B00` | 正文中的关键词强调（`<strong>` 标签） |
| **石墨黑 (Dark)** | `#181818` | Hero 顶部看板背景、年份徽章、核心理念卡片、底部 CTA 按钮 |
| **辅助深色** | `#242424` | 深色卡片内部的子容器背景 |
| **原生白底** | `#FFFFFF` | 最外层容器，顺应微信公众号默认白底阅读环境 |
| **极浅灰** | `#F8F9FA` | 常规内容卡片背景（历史年份、报名须知等） |
| **微黄底** | `#FFFDF5` | 模块卡片背景（亮剑/试锋/决衡等课程模块） |
| **正文色** | `#2B2B2B` | 主正文颜色 |
| **辅助正文** | `#333333` | 非卡片区域的段落文字 |
| **二级正文** | `#4E5969` | 卡片内部说明文字 |
| **边框灰** | `#E5E6EB` | 浅色卡片边框 |
| **分割线** | `#D9D9D9` | 虚线分割（报名区域二维码上方） |

### 2.2 排版约束（微信公众号铁律）

> [!CAUTION]
> 以下规则**不可违反**，否则将在微信公众号中渲染异常或被过滤。

1. **最大宽度**：`max-width: 667px`（微信公众号最大内容宽度）
2. **移动端内边距**：两侧至少 `4px ~ 8px`，防止内容贴边
3. **100% 内联样式**：所有 CSS 必须写在 `style="..."` 属性内，**严禁** `<style>` 标签、`<link>` 外链、`class` 选择器
4. **禁止标签**：`<script>`、`<link>`、`<style>`、`<iframe>`、`<form>`、`<input>`
5. **允许标签**：`<section>`、`<p>`、`<span>`、`<strong>`、`<em>`、`<h1>`~`<h6>`、`<img>`、`<div>`、`<ul>`/`<ol>`/`<li>`、`<br>`、`<hr>`
6. **图片防盗链**：所有 `<img>` 标签必须加 `referrerpolicy="no-referrer"`
7. **字体栈**：`font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;`
8. **不使用** CSS Grid（兼容性不足），使用 `display: flex` 替代

### 2.3 图片排版方案：Hero 大图 + 瀑布流（推荐方案 B）

每组图片采用以下结构：

1. **首图 Hero Shot**（100% 全宽大图）：
   - 从该组中选取最具视觉冲击力的第一张
   - 圆角 `10px`，轻灰边框 `1px solid #E5E6EB`，微阴影 `box-shadow: 0 4px 12px rgba(0,0,0,0.08)`

2. **瀑布流副图（Column-Based Masonry）**：
   - 将剩余图片**交替分配到左右两列独立容器**（奇数索引 → 左列，偶数索引 → 右列）
   - 左右列各自 `width: 48.5%`，顶部对齐 `align-items: flex-start`
   - 列内图片垂直堆叠，仅用 `margin-bottom: 8px` 分隔
   - **关键**：不使用 `flex-wrap` 行内双列（会导致空白），而使用两个独立列容器

```html
<!-- Hero Shot -->
<section style="margin: 12px 0 10px 0;">
  <img src="..." referrerpolicy="no-referrer"
       style="width: 100%; height: auto; display: block; border-radius: 10px;
              border: 1px solid #E5E6EB; box-shadow: 0 4px 12px rgba(0,0,0,0.08);" />
</section>

<!-- Masonry Sub-grid -->
<section style="display: flex; justify-content: space-between; align-items: flex-start;
                width: 100%; box-sizing: border-box; margin-bottom: 10px;">
  <!-- 左列 -->
  <section style="width: 48.5%; box-sizing: border-box;">
    <img src="..." referrerpolicy="no-referrer"
         style="width: 100%; height: auto; display: block; border-radius: 6px;
                border: 1px solid #E5E6EB; box-shadow: 0 2px 6px rgba(0,0,0,0.05);
                margin-bottom: 8px;" />
    <!-- 更多左列图片... -->
  </section>
  <!-- 右列 -->
  <section style="width: 48.5%; box-sizing: border-box;">
    <img src="..." referrerpolicy="no-referrer"
         style="width: 100%; height: auto; display: block; border-radius: 6px;
                border: 1px solid #E5E6EB; box-shadow: 0 2px 6px rgba(0,0,0,0.05);
                margin-bottom: 8px;" />
    <!-- 更多右列图片... -->
  </section>
</section>
```

> [!WARNING]
> 不要使用横向滚动模式（`overflow-x: auto; display: flex;`）来展示多张图片。
> 在微信公众号中横向滑动体验很差，用户更习惯纵向浏览。

## 三、页面结构模板

一个完整的混沌风格微信推文 HTML 由以下模块**按顺序**组成：

### 3.1 外层容器

```html
<section style="max-width: 667px; margin: 0 auto; box-sizing: border-box;
               background-color: #FFFFFF; color: #2B2B2B;
               font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC',
               'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
               padding: 12px 4px;">
  <!-- 所有内容模块放在这里 -->
</section>
```

### 3.2 Hero 顶部看板（深色反转区域）

- 背景 `#181818`，顶部 `4px` 混沌黄边框线
- 包含：品牌标签（黄底黑字小标签）、标题（白字+黄色关键字）、副标题、Banner 大图

### 3.3 引言区块

- 浅灰背景 `#F8F9FA`，左侧 `4px` 混沌黄 Accent 条
- 排版为左侧高亮线 + 正文段落

### 3.4 核心理念卡片（深色反转）

- 石墨黑背景 `#181818`，内部小卡片 `#242424`
- 左侧 `3px` 混沌黄 Accent 线
- 适用于"既要…又要…"式的对仗金句

### 3.5 时间线年份卡片

- 浅灰背景 `#F8F9FA`，`1px solid #E5E6EB` 边框
- 年份徽章：黑底黄字 `#181818` 背景 + `#F5B700` 文字
- 标题 + 正文描述 + Hero 大图 + 瀑布流副图

### 3.6 招募要求卡片

- 浅灰背景，左侧 `4px` 石墨黑 Accent 线
- 带 emoji 图标的子标题 + 无序列表

### 3.7 课程模块卡片

- 微黄背景 `#FFFDF5`，`1px solid #F5B700` 混沌黄边框
- 日期标签用黄底黑字 `background: #F5B700; color: #181818`
- 适用于"亮剑/试锋/决衡"等模块名称

### 3.8 报名须知卡片

- 浅灰背景，信息列表格式
- 底部虚线分割线 + 居中报名二维码
- 二维码只出现一次，`border: 2px solid #F5B700`

### 3.9 底部 CTA 横幅

- 黄色渐变背景 `linear-gradient(135deg, #F5B700 0%, #FFA000 100%)`
- 深色胶囊按钮（客服微信号），**不重复放二维码**

## 四、微信图片抓取与处理工作流

### 4.1 抓取流程

1. **使用 Python `urllib.request` 抓取原文 HTML**（`read_url_content` 会被微信 anti-bot 拦截）
2. 设置 User-Agent 为桌面微信：`Mozilla/5.0 ... MicroMessenger/8.0`
3. 将原始 HTML 保存到本地文件
4. 使用正则或 BeautifulSoup 提取 `<img>` 标签的 `data-src` 或 `src` 属性
5. 整理图片索引列表 `[序号] URL`

```python
import urllib.request

url = "https://mp.weixin.qq.com/s/..."
req = urllib.request.Request(url, headers={
    'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) '
                  'AppleWebKit/537.36 (KHTML, like Gecko) '
                  'Chrome/120.0.0.0 Safari/537.36 '
                  'MicroMessenger/8.0.0'
})
with urllib.request.urlopen(req) as resp:
    html_content = resp.read().decode('utf-8')
```

### 4.2 图片引用

- 微信 CDN 图片域名：`mmbiz.qpic.cn`
- 所有 `<img>` 标签必须加 `referrerpolicy="no-referrer"` 绕过 Referer 校验
- 原文图片 URL 可直接在新 HTML 中引用，无需下载到本地

### 4.3 图片分组建议

按文章内容段落/年份/主题将图片分组，每组：
- 控制在 3~7 张为宜
- 第一张选取最具代表性的作为 Hero Shot
- 每组不超过 6 张副图（`max_sub=6`）

## 五、常见错误与排查

| 现象 | 原因 | 解决方案 |
|:-----|:-----|:---------|
| 图片显示为裂图 ❌ | 缺少 `referrerpolicy="no-referrer"` | 给所有 `<img>` 添加该属性 |
| 双列图片上下空白大 | 使用了 `flex-wrap` 行内双列 | 改为两个独立列容器 |
| 样式被微信过滤 | 使用了 `<style>` 标签或 `class` | 全部改为内联 `style="..."` |
| 排版溢出/横向滚动 | 图片未设 `max-width: 100%` | 图片加 `width: 100%; height: auto;` |
| 微信抓取返回验证页 | 直接 HTTP 请求被拦截 | 添加 MicroMessenger User-Agent |
| 二维码重复出现 | 在报名区和底部 CTA 都放了 | 二维码只在报名须知区放一次 |

## 六、文件组织

```
skills/hundun-wechat-layout/
├── SKILL.md                    # 本文件：技能说明与规范
├── scripts/
│   ├── extract_wechat.py       # 微信公众号原文抓取脚本
│   └── build_hundun_html.py    # 混沌风格 HTML 生成脚本
├── examples/
│   └── hundun-lead-article.html # 示例输出（领教营二期招募文）
└── resources/
    └── color-palette.md        # 混沌色彩体系参考
```