commit a7776657754f1450d208fb71d1e3804164f0bbf9
Author: lidf <lidf@brainwork.club>
Date:   Wed Jul 22 12:06:55 2026 +0800

    feat: 初始化混沌学园微信公众号 HTML 排版 Skill
    
    - SKILL.md: 完整设计规范（色彩体系、微信公众号兼容规则、图片排版方案）
    - scripts/extract_wechat.py: 微信公众号文章抓取脚本
    - scripts/build_hundun_html.py: 混沌风格 HTML 生成脚本（组件化）
    - examples/hundun-lead-article.html: 领教营二期排版示例
    - resources/color-palette.md: 混沌品牌色彩参考

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..a832439
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,25 @@
+# Python
+__pycache__/
+*.py[cod]
+*.egg-info/
+dist/
+build/
+
+# Output
+output/
+*.html
+!skills/hundun-wechat-layout/examples/*.html
+
+# OS
+.DS_Store
+Thumbs.db
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# Env
+.env
+.env.*
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..1fc8429
--- /dev/null
+++ b/README.md
@@ -0,0 +1,65 @@
+# hdPaiban - 混沌学园微信公众号排版 Skill
+
+混沌学园（Hundun）品牌风格的微信公众号文章 HTML 排版技能包。
+
+## 功能
+
+- **微信文章抓取**：自动抓取微信公众号文章原始 HTML，提取文字与图片 URL
+- **混沌风格排版**：以混沌品牌视觉体系（黄 `#F5B700` + 黑 `#181818` + 白底）生成微信公众号兼容 HTML
+- **图片瀑布流**：Hero 大图 + 双列瀑布流副图，完美适配手机端浏览体验
+- **100% 内联样式**：生成的 HTML 可直接粘贴到微信公众号编辑器，无需额外 CSS
+
+## 项目结构
+
+```
+hdPaiban/
+├── README.md
+├── skills/
+│   └── hundun-wechat-layout/
+│       ├── SKILL.md                    # 核心技能说明与规范
+│       ├── scripts/
+│       │   ├── extract_wechat.py       # 微信文章抓取脚本
+│       │   └── build_hundun_html.py    # 混沌风格 HTML 生成脚本
+│       ├── examples/
+│       │   └── hundun-lead-article.html # 示例输出
+│       └── resources/
+│           └── color-palette.md        # 色彩体系参考
+└── docs/
+    └── (扩展文档)
+```
+
+## 快速使用
+
+### 1. 抓取微信文章
+
+```bash
+python3 skills/hundun-wechat-layout/scripts/extract_wechat.py \
+  "https://mp.weixin.qq.com/s/xxxx" \
+  ./output
+```
+
+### 2. 生成排版 HTML
+
+```bash
+python3 skills/hundun-wechat-layout/scripts/build_hundun_html.py \
+  ./output/extracted_content.txt \
+  ./output/article.html
+```
+
+### 3. 粘贴到微信公众号
+
+1. 用浏览器打开生成的 HTML 文件
+2. `Ctrl+A` 全选 → `Ctrl+C` 复制
+3. 在微信公众号编辑器中 `Ctrl+V` 粘贴
+
+## 作为 Antigravity Skill 使用
+
+将 `skills/hundun-wechat-layout/` 目录复制到 `~/.gemini/config/skills/` 下即可在 Antigravity 中自动加载此技能。
+
+## 设计规范
+
+详见 [SKILL.md](skills/hundun-wechat-layout/SKILL.md) 中的完整设计规范。
+
+## License
+
+Internal use only.
diff --git a/skills/hundun-wechat-layout/SKILL.md b/skills/hundun-wechat-layout/SKILL.md
new file mode 100644
index 0000000..b150258
--- /dev/null
+++ b/skills/hundun-wechat-layout/SKILL.md
@@ -0,0 +1,221 @@
+---
+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        # 混沌色彩体系参考
+```
diff --git a/skills/hundun-wechat-layout/examples/hundun-lead-article.html b/skills/hundun-wechat-layout/examples/hundun-lead-article.html
new file mode 100644
index 0000000..b049147
--- /dev/null
+++ b/skills/hundun-wechat-layout/examples/hundun-lead-article.html
@@ -0,0 +1,353 @@
+<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;">
+  
+  <!-- ==================== HERO HEADER ==================== -->
+  <section style="margin-bottom: 24px; padding: 20px 16px; background-color: #181818; border-radius: 14px; border-top: 4px solid #F5B700; box-shadow: 0 6px 20px rgba(0,0,0,0.15);">
+    <section style="display: inline-block; background-color: #F5B700; color: #000000; font-size: 12px; font-weight: 800; letter-spacing: 1px; padding: 4px 10px; border-radius: 4px; text-transform: uppercase; margin-bottom: 14px;">
+      混沌学园 · 特别招募
+    </section>
+    <h1 style="font-size: 22px; font-weight: 800; line-height: 1.45; color: #FFFFFF; margin: 0 0 12px 0; letter-spacing: 0.5px;">
+      每一代混沌领教，<br>
+      <span style="color: #F5B700;">都有自己的时代回应</span>
+    </h1>
+    <p style="font-size: 14px; line-height: 1.6; color: #CCCCCC; margin: 0 0 14px 0; border-top: 1px solid rgba(255, 255, 255, 0.15); padding-top: 12px;">
+      混沌 AI 领教营二期招募正式开启 —— 带领创业者再上 AI 时代牌桌
+    </p>
+    <img src="https://mmbiz.qpic.cn/mmbiz_png/vyxicBRFcOOXpDxVMFMGRicb1SytcrQEawgP7avjZcGnuPiaEfZTj0SoJFnBKGICn8mpsibW9gq7lePf5thpibz16sA/640?wx_fmt=png" referrerpolicy="no-referrer" style="width: 100%; height: auto; border-radius: 8px; border: 1px solid #333333; display: block; margin-top: 12px;" />
+  </section>
+
+  <!-- ==================== INTRO ==================== -->
+  <section style="margin-bottom: 24px; padding: 18px 16px; background-color: #F8F9FA; border-left: 4px solid #F5B700; border-radius: 0 12px 12px 0; border-top: 1px solid #E5E6EB; border-right: 1px solid #E5E6EB; border-bottom: 1px solid #E5E6EB;">
+    <p style="font-size: 15px; line-height: 1.8; color: #2B2B2B; margin: 0 0 14px 0;">
+      每一次时代转身，真正困难的不是听懂一个新概念，而是把它带回真实商业世界里，变成可行动、可验证的方法和路径。
+    </p>
+    <p style="font-size: 15px; line-height: 1.8; color: #2B2B2B; margin: 0;">
+      过去十年，在混沌陪伴企业认知升级、落地创新的道路上，一直有一群人躬身入局，早半步替大家趟路，他们就是<strong style="color: #D99B00;">混沌领教</strong>。
+    </p>
+  </section>
+
+  <p style="font-size: 15px; line-height: 1.8; color: #333333; margin: 0 0 16px 8px;">
+    很多领教本身就是创业者、企业高管、咨询顾问、产品专家或技术实践者……是各自领域里已经走得很深的人，但没有一个是旁观者。
+  </p>
+
+  <p style="font-size: 15px; line-height: 1.8; color: #333333; margin: 0 0 24px 8px;">
+    他们愿意回到混沌同学身边，陪创业者拆问题，陪团队练模型，让知识不只停在概念里，让方法不只停在案例里。也愿意当学生、做评委、带研习坊、熬夜改方案，享受与一群高手相互切磋的感觉。
+  </p>
+
+  <!-- ==================== CORE MANDATE CARD ==================== -->
+  <section style="margin-bottom: 32px; padding: 20px 16px; background-color: #181818; border-radius: 12px; border: 1px solid #333333; box-shadow: 0 4px 16px rgba(0,0,0,0.1);">
+    <h2 style="font-size: 16px; font-weight: 700; color: #F5B700; margin: 0 0 14px 0; text-align: center; letter-spacing: 1px;">
+      ⚡ AI 时代领教的新责任
+    </h2>
+    <section style="background-color: #242424; padding: 12px 14px; border-radius: 8px; margin-bottom: 10px; border-left: 3px solid #F5B700;">
+      <p style="font-size: 14px; line-height: 1.6; color: #FFFFFF; margin: 0;">
+        <strong style="color: #F5B700;">既要</strong> 能深刻理解商业，<strong style="color: #F5B700;">又要</strong> 能把握 AI 的能力边界；
+      </p>
+    </section>
+    <section style="background-color: #242424; padding: 12px 14px; border-radius: 8px; margin-bottom: 10px; border-left: 3px solid #F5B700;">
+      <p style="font-size: 14px; line-height: 1.6; color: #FFFFFF; margin: 0;">
+        <strong style="color: #F5B700;">既要</strong> 能听懂企业的期待处境，<strong style="color: #F5B700;">也要</strong> 能识别真正值得解决的问题；
+      </p>
+    </section>
+    <section style="background-color: #242424; padding: 12px 14px; border-radius: 8px; border-left: 3px solid #F5B700;">
+      <p style="font-size: 14px; line-height: 1.6; color: #FFFFFF; margin: 0;">
+        <strong style="color: #F5B700;">既要</strong> 能讲清方法，<strong style="color: #F5B700;">也要</strong> 推动方案进入流程、数据和组织。
+      </p>
+    </section>
+  </section>
+
+  <!-- ==================== TIMELINE ==================== -->
+  <section style="text-align: center; margin-bottom: 24px;">
+    <section style="display: inline-block; padding: 6px 18px; background-color: #181818; color: #F5B700; font-size: 15px; font-weight: 800; border-radius: 20px; letter-spacing: 1px; border: 1px solid #F5B700;">
+      混沌领教的发展历程 (2018 - 2026)
+    </section>
+  </section>
+
+  <!-- 2018 -->
+  <section style="margin-bottom: 24px; background-color: #F8F9FA; padding: 16px; border-radius: 12px; border: 1px solid #E5E6EB;">
+    <section style="display: flex; align-items: center; margin-bottom: 8px;">
+      <span style="background-color: #181818; color: #F5B700; font-size: 12px; font-weight: 800; padding: 2px 8px; border-radius: 4px; margin-right: 8px;">2018年冬</span>
+      <h3 style="font-size: 16px; font-weight: 700; color: #181818; margin: 0;">破晓时刻</h3>
+    </section>
+    <p style="font-size: 14px; line-height: 1.7; color: #4E5969; margin: 0 0 10px 0;">
+      2018年，混沌提出用“哲科思维点亮创新”，优选上百人进行两个月线下培训与选拔，最终 25 名首期领教诞生并投入 2019 级创新院交付中。
+    </p>
+    
+    <section style="margin: 12px 0 10px 0;">
+      <img src="https://mmbiz.qpic.cn/mmbiz_jpg/vyxicBRFcOOXTTDHOv8IGdFwJ2OTd5AIM4UC8E6eiaMkicvSkX2Hzzcr798Q9NHnxCwYNnJKodNdItLMQT3lL0tzQ/640?wx_fmt=jpeg&from=appmsg" 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>
+    
+    <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="https://mmbiz.qpic.cn/mmbiz_jpg/vyxicBRFcOOXTTDHOv8IGdFwJ2OTd5AIMCMydqNhvuspiauR1fNqdP7lkZ4DJb6aYWibHs7V3pTgiaxdhOKxF0yrdA/640?wx_fmt=jpeg&from=appmsg" 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;" />
+<img src="https://mmbiz.qpic.cn/mmbiz_jpg/vyxicBRFcOOXTTDHOv8IGdFwJ2OTd5AIMqXOmJP8lOvfqedobsA8mwSh9icrejjVRO2mCo9LNfRTO5GcgP2qWPag/640?wx_fmt=jpeg&from=appmsg" 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="https://mmbiz.qpic.cn/mmbiz_jpg/vyxicBRFcOOXTTDHOv8IGdFwJ2OTd5AIMchV9vgQb0NYXYDOgnH6I5tDtBaD3oov26dsZe282GqMIswuUsVlVicg/640?wx_fmt=jpeg&from=appmsg" 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;" />
+<img src="https://mmbiz.qpic.cn/mmbiz_jpg/vyxicBRFcOOXTTDHOv8IGdFwJ2OTd5AIMlQic4hTarEh7Bx7lxR8xniaic36v7AYAsibewcvtdHPtVMicpSZumEprAdg/640?wx_fmt=jpeg&from=appmsg" 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>
+    
+  </section>
+
+  <!-- 2019 春 -->
+  <section style="margin-bottom: 24px; background-color: #F8F9FA; padding: 16px; border-radius: 12px; border: 1px solid #E5E6EB;">
+    <section style="display: flex; align-items: center; margin-bottom: 8px;">
+      <span style="background-color: #181818; color: #F5B700; font-size: 12px; font-weight: 800; padding: 2px 8px; border-radius: 4px; margin-right: 8px;">2019年春</span>
+      <h3 style="font-size: 16px; font-weight: 700; color: #181818; margin: 0;">红马甲传奇</h3>
+    </section>
+    <p style="font-size: 14px; line-height: 1.7; color: #4E5969; margin: 0 0 10px 0;">
+      “红马甲”领教团队建立，晚上陪伴同学打磨方案到凌晨，“早半步认知这个混沌的世界”。
+    </p>
+    
+    <section style="margin: 12px 0 10px 0;">
+      <img src="https://mmbiz.qpic.cn/mmbiz_jpg/vyxicBRFcOOXTTDHOv8IGdFwJ2OTd5AIMGT5YbKdHicAwNV7yIjFx9okA7d292ae7a29aXdY9zlsccGYQsgbwDwA/640?wx_fmt=jpeg&from=appmsg" 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>
+    
+    <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="https://mmbiz.qpic.cn/mmbiz_jpg/vyxicBRFcOOXTTDHOv8IGdFwJ2OTd5AIMhn9G8iav9koTZV6JMKDGS93KIL7fAVxVAunZzibK2aO5uib3LYVpvuibrA/640?wx_fmt=jpeg&from=appmsg" 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;" />
+<img src="https://mmbiz.qpic.cn/mmbiz_jpg/vyxicBRFcOOXTTDHOv8IGdFwJ2OTd5AIMYicBOwRlQGQmfRJeORoiaa3IeJ2lyToYUocjYSLyLwWwsQlGgM6ZXvQg/640?wx_fmt=jpeg&from=appmsg" 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="https://mmbiz.qpic.cn/mmbiz_jpg/vyxicBRFcOOXTTDHOv8IGdFwJ2OTd5AIMIEKX3QDYfo6quF5GCxYbhbYCMeVGcOg1PsXWf8UfT0pB0W1H96Qddg/640?wx_fmt=jpeg&from=appmsg" 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>
+    
+  </section>
+
+  <!-- 2019 游轮 -->
+  <section style="margin-bottom: 24px; background-color: #F8F9FA; padding: 16px; border-radius: 12px; border: 1px solid #E5E6EB;">
+    <section style="display: flex; align-items: center; margin-bottom: 8px;">
+      <span style="background-color: #181818; color: #F5B700; font-size: 12px; font-weight: 800; padding: 2px 8px; border-radius: 4px; margin-right: 8px;">2019年5月</span>
+      <h3 style="font-size: 16px; font-weight: 700; color: #181818; margin: 0;">传承与游轮盛典</h3>
+    </section>
+    <p style="font-size: 14px; line-height: 1.7; color: #4E5969; margin: 0 0 10px 0;">
+      二期领教招募由一期领教担任营长。同年 30 名领教与 5000 名同学登上游轮进行模型辅导。
+    </p>
+    
+    <section style="margin: 12px 0 10px 0;">
+      <img src="https://mmbiz.qpic.cn/mmbiz_jpg/vyxicBRFcOOXTTDHOv8IGdFwJ2OTd5AIM5sIWBmOHjZ7GokvqBZp0HtZyDkZYyKz4gOtRBw7nSnB0tBy3wGQZjA/640?wx_fmt=jpeg&from=appmsg" 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>
+    
+    <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="https://mmbiz.qpic.cn/mmbiz_jpg/vyxicBRFcOOXTTDHOv8IGdFwJ2OTd5AIM5Gbz6Y63y6VYZOuxJWK8CCaZuwcHrYGmwFlLODH9e8ernsIbGsuMwQ/640?wx_fmt=jpeg&from=appmsg" 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;" />
+<img src="https://mmbiz.qpic.cn/mmbiz_jpg/vyxicBRFcOOXTTDHOv8IGdFwJ2OTd5AIMYDoxmVCc3D4KAiaPv1NyGUna2lP1doX1HjmibTEQtl472nYs7n7L0Tfw/640?wx_fmt=jpeg&from=appmsg" 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;" />
+<img src="https://mmbiz.qpic.cn/mmbiz_jpg/vyxicBRFcOOXTTDHOv8IGdFwJ2OTd5AIMicghFv99o7JPNicTIL2WGsK2Ek40X5CJJFBW19OJ2iahLrwPI43JQva3Q/640?wx_fmt=jpeg&from=appmsg" 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="https://mmbiz.qpic.cn/mmbiz_jpg/vyxicBRFcOOXTTDHOv8IGdFwJ2OTd5AIMmpQxeibcUoFBTU1nibmIElib1XLJpQ9AiaFxgbKJgIzzYlhjya9VNjqLzQ/640?wx_fmt=jpeg&from=appmsg" 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;" />
+<img src="https://mmbiz.qpic.cn/mmbiz_jpg/vyxicBRFcOOXTTDHOv8IGdFwJ2OTd5AIM00BNiboUia91zDGnibMpbJgc1CFjTzTASEfAhDz0DD31ykK4QygkOkLEQ/640?wx_fmt=jpeg&from=appmsg" 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;" />
+<img src="https://mmbiz.qpic.cn/mmbiz_jpg/vyxicBRFcOOXTTDHOv8IGdFwJ2OTd5AIMSzzU8BsLTe8E97pVJaPNkq2Wyl3aA7XdYDA6T3htjHCyIMAia9fWo0A/640?wx_fmt=jpeg&from=appmsg" 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>
+    
+  </section>
+
+  <!-- 2020 -->
+  <section style="margin-bottom: 24px; background-color: #F8F9FA; padding: 16px; border-radius: 12px; border: 1px solid #E5E6EB;">
+    <section style="display: flex; align-items: center; margin-bottom: 8px;">
+      <span style="background-color: #181818; color: #F5B700; font-size: 12px; font-weight: 800; padding: 2px 8px; border-radius: 4px; margin-right: 8px;">2020年夏</span>
+      <h3 style="font-size: 16px; font-weight: 700; color: #181818; margin: 0;">暗夜星光</h3>
+    </section>
+    <p style="font-size: 14px; line-height: 1.7; color: #4E5969; margin: 0 0 10px 0;">
+      疫情突至，80 位领教连续 12 场直播破局，陪伴同学打磨方案、参加沙漠 48 小时徒步。
+    </p>
+    
+    <section style="margin: 12px 0 10px 0;">
+      <img src="https://mmbiz.qpic.cn/mmbiz_png/vyxicBRFcOOXTTDHOv8IGdFwJ2OTd5AIM62kiaHoOobpBiaOROgWyMp8Cf6wfLAv6czicHZ3ISIOF33BTDuuK3dtLw/640?wx_fmt=png&from=appmsg" 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>
+    
+    <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="https://mmbiz.qpic.cn/mmbiz_png/vyxicBRFcOOXTTDHOv8IGdFwJ2OTd5AIMtd2NT5mtkZ0ReqkEicIFem6NkqwQ0PLGM57rmC3QSe0jJXdHdJVNKZA/640?wx_fmt=png&from=appmsg" 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;" />
+<img src="https://mmbiz.qpic.cn/mmbiz_jpg/vyxicBRFcOOXTTDHOv8IGdFwJ2OTd5AIMibJykRPYHry8fyKpacKALBpDyejos3f3ln15j7q6Lkph3a8dicI9fmDQ/640?wx_fmt=jpeg&from=appmsg" 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;" />
+<img src="https://mmbiz.qpic.cn/mmbiz_jpg/vyxicBRFcOOXTTDHOv8IGdFwJ2OTd5AIMIH9rfEPO0YIfTCt1xicqq4P7Wc1fHiah1MfC5DhqEb3X9ibR2s9BdZXEA/640?wx_fmt=jpeg&from=appmsg" 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="https://mmbiz.qpic.cn/mmbiz_jpg/vyxicBRFcOOXTTDHOv8IGdFwJ2OTd5AIMaBYDSRdCd8S6A3MmbUmfdntZtcibLt0QkDKOAApHmmEwAIHSwo1gvfw/640?wx_fmt=jpeg&from=appmsg" 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;" />
+<img src="https://mmbiz.qpic.cn/mmbiz_jpg/vyxicBRFcOOXTTDHOv8IGdFwJ2OTd5AIMl7zcMxtZ20yCB70JRGp6Y7BkkXo4wsOQAAL19a2yjsIjV277cjsabg/640?wx_fmt=jpeg&from=appmsg" 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>
+    
+  </section>
+
+  <!-- 2021 -->
+  <section style="margin-bottom: 24px; background-color: #F8F9FA; padding: 16px; border-radius: 12px; border: 1px solid #E5E6EB;">
+    <section style="display: flex; align-items: center; margin-bottom: 8px;">
+      <span style="background-color: #181818; color: #F5B700; font-size: 12px; font-weight: 800; padding: 2px 8px; border-radius: 4px; margin-right: 8px;">2021年秋</span>
+      <h3 style="font-size: 16px; font-weight: 700; color: #181818; margin: 0;">成长同频</h3>
+    </section>
+    <p style="font-size: 14px; line-height: 1.7; color: #4E5969; margin: 0 0 10px 0;">
+      善友教授大课齐聚苏州提出一战略三问。开启“领教学习日”，老老实实听课，接受同侪 challenges。
+    </p>
+    
+    <section style="margin: 12px 0 10px 0;">
+      <img src="https://mmbiz.qpic.cn/mmbiz_jpg/vyxicBRFcOOXTTDHOv8IGdFwJ2OTd5AIMRNDsBWCCnm8jib6Uj8c9D76okf3jckAiaC573MyJE8eq2CzicFYfqicxlQ/640?wx_fmt=jpeg&from=appmsg" 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>
+    
+    <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="https://mmbiz.qpic.cn/mmbiz_jpg/vyxicBRFcOOXTTDHOv8IGdFwJ2OTd5AIMlOPFibro40AVYOd15gl96D4CDgXz7OqVQfDx1wDibldqoscf1p0IWZmQ/640?wx_fmt=jpeg&from=appmsg" 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;" />
+<img src="https://mmbiz.qpic.cn/mmbiz_jpg/vyxicBRFcOOXTTDHOv8IGdFwJ2OTd5AIMB2XicSG4uC5a7XOPhp0gWerNfAGbaRjtyPL7e13lm87oMrTnaqJibsCQ/640?wx_fmt=jpeg&from=appmsg" 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;" />
+<img src="https://mmbiz.qpic.cn/mmbiz_jpg/vyxicBRFcOOXTTDHOv8IGdFwJ2OTd5AIMEkhS4icxV651aY56HxwlKPbiaz0TcwgsISGHWIicTicORficVBUPSDnpgicQ/640?wx_fmt=jpeg&from=appmsg" 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="https://mmbiz.qpic.cn/mmbiz_jpg/vyxicBRFcOOXTTDHOv8IGdFwJ2OTd5AIMqQjdxyicF5go85kYEgHibR6icXsQIcE3YOEyZyV2WzesuCkuibf2bEj5Bg/640?wx_fmt=jpeg&from=appmsg" 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;" />
+<img src="https://mmbiz.qpic.cn/mmbiz_jpg/vyxicBRFcOOXTTDHOv8IGdFwJ2OTd5AIMwhGE09rg01gKmkgzrBGrOKKTE8VCaxgWIhZMEUfCIGNaGPIqoicj8Ww/640?wx_fmt=jpeg&from=appmsg" 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>
+    
+  </section>
+
+  <!-- 2022-2024 -->
+  <section style="margin-bottom: 24px; background-color: #F8F9FA; padding: 16px; border-radius: 12px; border: 1px solid #E5E6EB;">
+    <section style="display: flex; align-items: center; margin-bottom: 8px;">
+      <span style="background-color: #181818; color: #F5B700; font-size: 12px; font-weight: 800; padding: 2px 8px; border-radius: 4px; margin-right: 8px;">2022-2024</span>
+      <h3 style="font-size: 16px; font-weight: 700; color: #181818; margin: 0;">教学相长与星火</h3>
+    </section>
+    <p style="font-size: 14px; line-height: 1.7; color: #4E5969; margin: 0 0 10px 0;">
+      推出“有系”一年期陪伴泡泡玛特、古茗等高成长企业。至 2024 年，领教团队扩充至 63 位。
+    </p>
+    
+    <section style="margin: 12px 0 10px 0;">
+      <img src="https://mmbiz.qpic.cn/mmbiz_jpg/vyxicBRFcOOXTTDHOv8IGdFwJ2OTd5AIMGqQXNIatnAc9fAy4YlHIicdPCdnokcazg9o4rA8ibvoDZKjia6d1lZsbA/640?wx_fmt=jpeg&from=appmsg" 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>
+    
+    <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="https://mmbiz.qpic.cn/mmbiz_jpg/vyxicBRFcOOXTTDHOv8IGdFwJ2OTd5AIMPk4nEGohKvnnC4TibolFFCA59S9eVCyIdkfPwriay3icOG8r9k7Jkxx3w/640?wx_fmt=jpeg&from=appmsg" 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;" />
+<img src="https://mmbiz.qpic.cn/mmbiz_png/NyLOp540WlKPibnVTZ1CYSpyCjzfQdOxiafSfM4zKetsC4RgKPUk36qLMKfkR7G8vJBtXUUWXPy4At12WAGYHibfN7UCjicusHemzadjaia5BickY/640?wx_fmt=png&from=appmsg" 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;" />
+<img src="https://mmbiz.qpic.cn/mmbiz_jpg/NyLOp540WlLQKgpHndRXPqcHGTTyBd6En2XtwdhuEtNqJic3UDyVuDs83hxc6jiaPSXGOf89eydY6Ggkx0IzbU6Fj5Z5Yiaa2m84sA6upfA3wc/640?wx_fmt=jpeg&from=appmsg" 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="https://mmbiz.qpic.cn/mmbiz_jpg/vyxicBRFcOOXTTDHOv8IGdFwJ2OTd5AIMOCVUsl0ibcuic1v4QEytOdIfOicLWzDbRSxz1RicC1iaPL8muKodNZIkEJw/640?wx_fmt=jpeg&from=appmsg" 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;" />
+<img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/NyLOp540WlKZWyjLlOv8AZiaaklT2ZrViaibQ77RdKnQln9Or2Z5lR6jAUodq084uDvSRTrHxosJAonKrSjGSiaftmialVq6DsFWCY1JT1GKdHNE/640?wx_fmt=jpeg&from=appmsg" 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>
+    
+  </section>
+
+  <!-- 2025-2026 -->
+  <section style="margin-bottom: 28px; background-color: #F8F9FA; padding: 16px; border-radius: 12px; border: 2px solid #F5B700;">
+    <section style="display: flex; align-items: center; margin-bottom: 8px;">
+      <span style="background-color: #F5B700; color: #000000; font-size: 12px; font-weight: 800; padding: 2px 8px; border-radius: 4px; margin-right: 8px;">2025 - 2026</span>
+      <h3 style="font-size: 16px; font-weight: 700; color: #181818; margin: 0;">纵身一跃 · AI 领教营一期</h3>
+    </section>
+    <p style="font-size: 14px; line-height: 1.7; color: #2B2B2B; margin: 0 0 10px 0;">
+      DeepSeek 震撼发布后混沌 All in AI。历经 5 个月、12 个奋战日夜，29 位认证 AI 领教、21 位 AI 教练走向全国 20+ 城市巡讲。
+    </p>
+    
+    <section style="margin: 12px 0 10px 0;">
+      <img src="https://mmbiz.qpic.cn/mmbiz_png/NyLOp540WlIE7vCWkkNBDDiaFMFC5lf9blosgVSaP7qicXttyRADIk1jfLJH0EokOBicYro2ia4ggVRg8oicWAicKC46DuL8cLueVnnSHKDlp6aeQ/640?wx_fmt=png&from=appmsg" 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>
+    
+    <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="https://mmbiz.qpic.cn/sz_mmbiz_png/NyLOp540WlIhsbcP2CzZOib0zJOLnWF87Br0xZVh1xoEXNfJ93OEHCM6zoy0N3ODNkZHELVrRxgSiaMXB0MJSPZiax3lsKiayGeibjr91d08Fm0c/640?wx_fmt=png&from=appmsg" 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;" />
+<img src="https://mmbiz.qpic.cn/mmbiz_jpg/NyLOp540WlJ3W0DEvL5nF1vvIzibRlGtXC1icks3NAtE4WPnU440mcVX2K9lbCibiasTxKuvdfth75wCwvU7UqInCMS3Icq4HbuddnTrxfQN4T4/640?wx_fmt=jpeg" 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="https://mmbiz.qpic.cn/mmbiz_png/NyLOp540WlLfJLc5PgrKEj5n5XSjvx8pWb72WOGwAmq2DuUWZbcF6UaF7hyXGkibTicvzJk5iafUx4kyicibic59XQC8peX6QurVLgtFJQRCjKS9c/640?wx_fmt=png&from=appmsg" 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>
+    
+  </section>
+
+  <!-- ==================== RECRUITMENT REQUIREMENTS ==================== -->
+  <section style="text-align: center; margin-bottom: 20px;">
+    <h2 style="font-size: 18px; font-weight: 800; color: #181818; margin: 0 0 6px 0;">
+      下一批 AI 领教，轮到你下场
+    </h2>
+    <p style="font-size: 13px; color: #D99B00; margin: 0; font-weight: 600;">AI 领教的价值：把企业 AI 落地往前推进一步</p>
+  </section>
+
+  <section style="margin-bottom: 14px; background-color: #F8F9FA; padding: 16px; border-radius: 12px; border-left: 4px solid #181818; border-top: 1px solid #E5E6EB; border-right: 1px solid #E5E6EB; border-bottom: 1px solid #E5E6EB;">
+    <h3 style="font-size: 15px; font-weight: 700; color: #181818; margin: 0 0 10px 0;">🔍 1. 产业研究能力</h3>
+    <ul style="margin: 0; padding-left: 18px; color: #4E5969; font-size: 14px; line-height: 1.7;">
+      <li>从产业结构中识别 AI 变革的关键环节与信号</li>
+      <li>将复杂信息整合成有价值的战略命题与长期选择</li>
+      <li>构建系统解决方案，提炼可迁移的方法论</li>
+    </ul>
+  </section>
+
+  <section style="margin-bottom: 14px; background-color: #F8F9FA; padding: 16px; border-radius: 12px; border-left: 4px solid #181818; border-top: 1px solid #E5E6EB; border-right: 1px solid #E5E6EB; border-bottom: 1px solid #E5E6EB;">
+    <h3 style="font-size: 15px; font-weight: 700; color: #181818; margin: 0 0 10px 0;">🚀 2. 前沿部署能力</h3>
+    <ul style="margin: 0; padding-left: 18px; color: #4E5969; font-size: 14px; line-height: 1.7;">
+      <li>走进客户一线，精准把握企业意图</li>
+      <li>将模糊问题翻译成可落地的 AI 场景</li>
+      <li>回到真实价值流程，将数据与组织有机结合</li>
+    </ul>
+  </section>
+
+  <section style="margin-bottom: 28px; background-color: #F8F9FA; padding: 16px; border-radius: 12px; border-left: 4px solid #181818; border-top: 1px solid #E5E6EB; border-right: 1px solid #E5E6EB; border-bottom: 1px solid #E5E6EB;">
+    <h3 style="font-size: 15px; font-weight: 700; color: #181818; margin: 0 0 10px 0;">🤝 3. 领教特质与胸怀</h3>
+    <ul style="margin: 0; padding-left: 18px; color: #4E5969; font-size: 14px; line-height: 1.7;">
+      <li>相信哲科思维，具备利他主义胸怀</li>
+      <li>保持谦卑心，是终身成长践行者，以求知为乐</li>
+      <li>拥有“摆渡人”态度，具备付出精力陪伴创新的愿力</li>
+    </ul>
+  </section>
+
+  <!-- ==================== MODULES ==================== -->
+  <section style="text-align: center; margin-bottom: 20px;">
+    <section style="display: inline-block; padding: 6px 18px; background-color: #181818; color: #F5B700; font-size: 15px; font-weight: 800; border-radius: 20px;">
+      混沌 AI 领教营二期 · 模块安排
+    </section>
+  </section>
+
+  <section style="margin-bottom: 14px; background-color: #FFFDF5; padding: 16px; border-radius: 12px; border: 1px solid #F5B700;">
+    <section style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
+      <h3 style="font-size: 16px; font-weight: 800; color: #181818; margin: 0;">一模块 · 亮剑</h3>
+      <span style="font-size: 12px; color: #181818; background: #F5B700; font-weight: 700; padding: 2px 8px; border-radius: 4px;">2026.8.29 - 8.30</span>
+    </section>
+    <p style="font-size: 13px; color: #D99B00; margin: 0 0 6px 0; font-weight: 700;">主题：“拿手菜”交流 (地点：北京)</p>
+    <p style="font-size: 14px; color: #4E5969; margin: 0; line-height: 1.6;">每位老师分享真实操盘过的课题与案例，秀出真知灼见。</p>
+  </section>
+
+  <section style="margin-bottom: 14px; background-color: #FFFDF5; padding: 16px; border-radius: 12px; border: 1px solid #F5B700;">
+    <section style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
+      <h3 style="font-size: 16px; font-weight: 800; color: #181818; margin: 0;">二模块 · 试锋</h3>
+      <span style="font-size: 12px; color: #181818; background: #F5B700; font-weight: 700; padding: 2px 8px; border-radius: 4px;">2026.9.19 - 9.20</span>
+    </section>
+    <p style="font-size: 13px; color: #D99B00; margin: 0 0 6px 0; font-weight: 700;">主题：案主课题方案 1.0 (地点：北京)</p>
+    <p style="font-size: 14px; color: #4E5969; margin: 0; line-height: 1.6;">与案主企业完成课题匹配，打造 AI 落地解决方案 1.0。</p>
+  </section>
+
+  <section style="margin-bottom: 28px; background-color: #FFFDF5; padding: 16px; border-radius: 12px; border: 1px solid #F5B700;">
+    <section style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
+      <h3 style="font-size: 16px; font-weight: 800; color: #181818; margin: 0;">三模块 · 决衡</h3>
+      <span style="font-size: 12px; color: #181818; background: #F5B700; font-weight: 700; padding: 2px 8px; border-radius: 4px;">2026.11.6 - 11.8</span>
+    </section>
+    <p style="font-size: 13px; color: #D99B00; margin: 0 0 6px 0; font-weight: 700;">主题：案主课题方案 2.0 (地点：北京)</p>
+    <p style="font-size: 14px; color: #4E5969; margin: 0; line-height: 1.6;">基于实践迭代 2.0 方案，提炼成功/失败方法论。</p>
+  </section>
+
+  <!-- ==================== ENROLLMENT ==================== -->
+  <section style="margin-bottom: 28px; background-color: #F8F9FA; padding: 18px 16px; border-radius: 12px; border: 1px solid #E5E6EB;">
+    <h3 style="font-size: 16px; font-weight: 700; color: #181818; margin: 0 0 12px 0; border-bottom: 1px solid #E5E6EB; padding-bottom: 8px;">
+      📋 报名须知与时间表
+    </h3>
+    <p style="font-size: 14px; color: #4E5969; margin: 0 0 8px 0;"><strong style="color: #181818;">报名时间：</strong>2026.7.6 - 8.16</p>
+    <p style="font-size: 14px; color: #4E5969; margin: 0 0 8px 0;"><strong style="color: #181818;">面试形式：</strong>2026.7.20 - 8.23（飞书视频会议）</p>
+    <p style="font-size: 14px; color: #4E5969; margin: 0 0 8px 0;"><strong style="color: #181818;">选拔机制：</strong>每个模块设评审与淘汰。</p>
+    <p style="font-size: 14px; color: #4E5969; margin: 0 0 12px 0;"><strong style="color: #181818;">费用说明：</strong>无学费，差旅自理，收班费（约 3000 元/模块）分摊场地物料。</p>
+    
+    <!-- SINGLE ENROLLMENT QR CODE -->
+    <div style="text-align: center; margin-top: 18px; padding-top: 14px; border-top: 1px dashed #D9D9D9;">
+      <img src="https://mmbiz.qpic.cn/sz_mmbiz_png/NyLOp540WlIEjVgvpwgzOgDPjbDLcyhjYpVmfcBBH4RGqyVV01JqyYib3pGU1unDlfrHEoWm9SndWq90pdONrxuyCXsIuia1J9zqm0t1G87ia8/640?wx_fmt=png&from=appmsg" referrerpolicy="no-referrer" style="max-width: 180px; width: 180px; height: auto; border-radius: 10px; border: 2px solid #F5B700; box-shadow: 0 4px 12px rgba(245, 183, 0, 0.2);" />
+      <p style="font-size: 13px; font-weight: 700; color: #181818; margin: 8px 0 0 0; letter-spacing: 0.5px;">微信扫码提交报名表</p>
+    </div>
+  </section>
+
+  <!-- ==================== FOOTER ==================== -->
+  <section style="text-align: center; padding: 24px 16px; background: linear-gradient(135deg, #F5B700 0%, #FFA000 100%); border-radius: 14px; color: #000000; margin-bottom: 12px;">
+    <h3 style="font-size: 18px; font-weight: 900; margin: 0 0 8px 0; letter-spacing: 0.5px;">欢迎加入混沌 AI 领教营二期</h3>
+    <p style="font-size: 13px; font-weight: 700; margin: 0 0 14px 0; opacity: 0.9;">追问 AI 时代第一性原理 · 与敢于共创的人同行</p>
+    
+    <section style="display: inline-block; background-color: #181818; color: #F5B700; font-size: 14px; font-weight: 800; padding: 10px 24px; border-radius: 24px; letter-spacing: 1px;">
+      添加客服微信：hundunkefu0001
+    </section>
+  </section>
+
+</section>
\ No newline at end of file
diff --git a/skills/hundun-wechat-layout/resources/color-palette.md b/skills/hundun-wechat-layout/resources/color-palette.md
new file mode 100644
index 0000000..809cf52
--- /dev/null
+++ b/skills/hundun-wechat-layout/resources/color-palette.md
@@ -0,0 +1,44 @@
+# 混沌学园品牌色彩体系参考
+
+## 核心色板
+
+```
+┌──────────────────────────────────────────────────┐
+│  混沌黄 (Primary)   #F5B700   ████████████████  │
+│  深金 (Secondary)   #D99B00   ████████████████  │
+│  石墨黑 (Dark)      #181818   ████████████████  │
+│  辅助深色           #242424   ████████████████  │
+│  原生白底           #FFFFFF   ████████████████  │
+│  极浅灰             #F8F9FA   ████████████████  │
+│  微黄底             #FFFDF5   ████████████████  │
+└──────────────────────────────────────────────────┘
+```
+
+## 文字色板
+
+| 角色 | 色值 | 使用场景 |
+|:-----|:-----|:---------|
+| 主正文 | `#2B2B2B` | 白底区域段落文字 |
+| 辅助正文 | `#333333` | 非卡片区域段落 |
+| 二级正文 | `#4E5969` | 卡片内说明文字、列表文字 |
+| 深色卡内文字 | `#FFFFFF` | 石墨黑背景下的正文 |
+| 深色卡内辅助 | `#CCCCCC` | 深色卡内的副标题/描述 |
+
+## 边框与分割
+
+| 角色 | 色值 | 使用场景 |
+|:-----|:-----|:---------|
+| 浅色卡片边框 | `#E5E6EB` | 年份卡片、报名卡片外框 |
+| 深色卡片边框 | `#333333` | 深色区域内部元素边框 |
+| 虚线分割 | `#D9D9D9` | 二维码上方的分隔线 |
+
+## 渐变
+
+- **底部 CTA 横幅**: `linear-gradient(135deg, #F5B700 0%, #FFA000 100%)`
+
+## 配色原则
+
+1. **白底为基调**：顺应微信公众号默认白色阅读环境
+2. **黄色做点缀**：用于标签徽章、左侧 Accent 线、边框高亮、CTA 按钮
+3. **黑色做对比**：Hero 看板和核心理念使用深色反转，制造视觉焦点
+4. **不大面积铺黑底**：避免在微信白底环境中产生撕裂感
diff --git a/skills/hundun-wechat-layout/scripts/build_hundun_html.py b/skills/hundun-wechat-layout/scripts/build_hundun_html.py
new file mode 100644
index 0000000..9d5c3a7
--- /dev/null
+++ b/skills/hundun-wechat-layout/scripts/build_hundun_html.py
@@ -0,0 +1,250 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""
+混沌学园风格微信公众号 HTML 生成脚本
+用途：将提取的图片列表与文字内容，生成符合混沌品牌视觉体系的微信公众号 HTML 排版。
+
+使用方法：
+    python3 build_hundun_html.py <extracted_content.txt> <输出HTML路径>
+
+设计规范：
+    - 白底 (#FFFFFF) + 混沌黄 (#F5B700) + 石墨黑 (#181818)
+    - Hero 大图 + 双列瀑布流副图
+    - 100% 内联样式，微信公众号编辑器兼容
+    - 所有图片加 referrerpolicy="no-referrer"
+
+详细规范请参阅 SKILL.md
+"""
+
+import sys
+import re
+import html as html_lib
+from pathlib import Path
+
+
+# ============================================================
+# 混沌色彩体系常量
+# ============================================================
+COLOR_PRIMARY = "#F5B700"       # 混沌黄
+COLOR_SECONDARY = "#D99B00"     # 深金（正文强调）
+COLOR_DARK = "#181818"          # 石墨黑
+COLOR_DARK_SUB = "#242424"      # 辅助深色（深色卡片子容器）
+COLOR_BG = "#FFFFFF"            # 原生白底
+COLOR_CARD = "#F8F9FA"          # 极浅灰（内容卡片）
+COLOR_MODULE = "#FFFDF5"        # 微黄底（课程模块卡片）
+COLOR_TEXT = "#2B2B2B"          # 主正文
+COLOR_TEXT_ALT = "#333333"      # 辅助正文
+COLOR_TEXT_SUB = "#4E5969"      # 二级正文
+COLOR_BORDER = "#E5E6EB"        # 边框灰
+COLOR_DIVIDER = "#D9D9D9"       # 虚线分割
+
+FONT_STACK = (
+    "-apple-system, BlinkMacSystemFont, 'PingFang SC', "
+    "'Hiragino Sans GB', 'Microsoft YaHei', sans-serif"
+)
+
+
+def loadImages(filePath: str) -> dict:
+    """
+    从 extracted_content.txt 加载图片索引映射。
+    
+    :param filePath: 提取结果文件路径
+    :return: {索引: URL} 字典
+    """
+    imgDict = {}
+    with open(filePath, 'r', encoding='utf-8') as f:
+        for line in f:
+            match = re.match(r'\[(\d+)\]\s+(https?://\S+)', line.strip())
+            if match:
+                idx = int(match.group(1))
+                url = html_lib.unescape(match.group(2))
+                imgDict[idx] = url
+    return imgDict
+
+
+def renderHeroMasonry(imgDict: dict, imgIndices: list, maxSub: int = 6) -> str:
+    """
+    渲染 Hero 大图 + 双列瀑布流副图。
+    
+    :param imgDict: 全局图片索引字典
+    :param imgIndices: 本组图片索引列表
+    :param maxSub: 最大副图数量
+    :return: HTML 字符串
+    """
+    urls = [imgDict[i] for i in imgIndices if i in imgDict]
+    if not urls:
+        return ""
+    
+    heroUrl = urls[0]
+    subUrls = urls[1:1 + maxSub]
+    
+    heroHtml = f'''
+    <section style="margin: 12px 0 10px 0;">
+      <img src="{heroUrl}" referrerpolicy="no-referrer"
+           style="width: 100%; height: auto; display: block; border-radius: 10px;
+                  border: 1px solid {COLOR_BORDER};
+                  box-shadow: 0 4px 12px rgba(0,0,0,0.08);" />
+    </section>
+    '''
+    
+    if not subUrls:
+        return heroHtml
+    
+    leftUrls = subUrls[0::2]
+    rightUrls = subUrls[1::2]
+    
+    def buildCol(colUrls):
+        imgs = []
+        for u in colUrls:
+            imgs.append(
+                f'<img src="{u}" referrerpolicy="no-referrer"'
+                f' style="width: 100%; height: auto; display: block;'
+                f' border-radius: 6px; border: 1px solid {COLOR_BORDER};'
+                f' box-shadow: 0 2px 6px rgba(0,0,0,0.05);'
+                f' margin-bottom: 8px;" />'
+            )
+        return "\n".join(imgs)
+    
+    leftHtml = buildCol(leftUrls)
+    rightHtml = buildCol(rightUrls)
+    
+    masonryHtml = f'''
+    <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;">
+        {leftHtml}
+      </section>
+      <section style="width: 48.5%; box-sizing: border-box;">
+        {rightHtml}
+      </section>
+    </section>
+    '''
+    
+    return heroHtml + masonryHtml
+
+
+def renderYearCard(year: str, title: str, desc: str, imgHtml: str,
+                   highlight: bool = False) -> str:
+    """
+    渲染时间线年份卡片。
+    
+    :param year: 年份文字（如"2018年冬"）
+    :param title: 小标题
+    :param desc: 描述段落
+    :param imgHtml: 内部图片 HTML（由 renderHeroMasonry 生成）
+    :param highlight: 是否用混沌黄边框高亮（用于最新年份）
+    :return: HTML 字符串
+    """
+    borderStyle = f"2px solid {COLOR_PRIMARY}" if highlight else f"1px solid {COLOR_BORDER}"
+    badgeBg = COLOR_PRIMARY if highlight else COLOR_DARK
+    badgeColor = "#000000" if highlight else COLOR_PRIMARY
+    titleColor = COLOR_DARK
+    
+    return f'''
+  <section style="margin-bottom: 24px; background-color: {COLOR_CARD};
+                  padding: 16px; border-radius: 12px; border: {borderStyle};">
+    <section style="display: flex; align-items: center; margin-bottom: 8px;">
+      <span style="background-color: {badgeBg}; color: {badgeColor};
+                   font-size: 12px; font-weight: 800; padding: 2px 8px;
+                   border-radius: 4px; margin-right: 8px;">{year}</span>
+      <h3 style="font-size: 16px; font-weight: 700; color: {titleColor}; margin: 0;">{title}</h3>
+    </section>
+    <p style="font-size: 14px; line-height: 1.7; color: {COLOR_TEXT_SUB}; margin: 0 0 10px 0;">
+      {desc}
+    </p>
+    {imgHtml}
+  </section>
+    '''
+
+
+def renderModuleCard(name: str, dateRange: str, theme: str, desc: str) -> str:
+    """
+    渲染课程模块卡片（微黄底）。
+    
+    :param name: 模块名称（如"一模块 · 亮剑"）
+    :param dateRange: 时间（如"2026.8.29 - 8.30"）
+    :param theme: 主题文字
+    :param desc: 描述文字
+    :return: HTML 字符串
+    """
+    return f'''
+  <section style="margin-bottom: 14px; background-color: {COLOR_MODULE};
+                  padding: 16px; border-radius: 12px;
+                  border: 1px solid {COLOR_PRIMARY};">
+    <section style="display: flex; justify-content: space-between;
+                    align-items: center; margin-bottom: 8px;">
+      <h3 style="font-size: 16px; font-weight: 800; color: {COLOR_DARK}; margin: 0;">{name}</h3>
+      <span style="font-size: 12px; color: {COLOR_DARK}; background: {COLOR_PRIMARY};
+                   font-weight: 700; padding: 2px 8px; border-radius: 4px;">{dateRange}</span>
+    </section>
+    <p style="font-size: 13px; color: {COLOR_SECONDARY}; margin: 0 0 6px 0; font-weight: 700;">{theme}</p>
+    <p style="font-size: 14px; color: {COLOR_TEXT_SUB}; margin: 0; line-height: 1.6;">{desc}</p>
+  </section>
+    '''
+
+
+def renderRequirementCard(icon: str, title: str, items: list) -> str:
+    """
+    渲染招募要求卡片。
+    
+    :param icon: emoji 图标
+    :param title: 卡片标题（如"1. 产业研究能力"）
+    :param items: 列表项文字列表
+    :return: HTML 字符串
+    """
+    liHtml = "\n".join(f"      <li>{item}</li>" for item in items)
+    return f'''
+  <section style="margin-bottom: 14px; background-color: {COLOR_CARD};
+                  padding: 16px; border-radius: 12px;
+                  border-left: 4px solid {COLOR_DARK};
+                  border-top: 1px solid {COLOR_BORDER};
+                  border-right: 1px solid {COLOR_BORDER};
+                  border-bottom: 1px solid {COLOR_BORDER};">
+    <h3 style="font-size: 15px; font-weight: 700; color: {COLOR_DARK};
+              margin: 0 0 10px 0;">{icon} {title}</h3>
+    <ul style="margin: 0; padding-left: 18px; color: {COLOR_TEXT_SUB};
+              font-size: 14px; line-height: 1.7;">
+{liHtml}
+    </ul>
+  </section>
+    '''
+
+
+def wrapPage(innerHtml: str) -> str:
+    """
+    将内部 HTML 包裹为完整的微信公众号页面容器。
+    
+    :param innerHtml: 内部所有模块的 HTML
+    :return: 完整的 HTML 片段
+    """
+    return f'''<section style="max-width: 667px; margin: 0 auto; box-sizing: border-box;
+               background-color: {COLOR_BG}; color: {COLOR_TEXT};
+               font-family: {FONT_STACK}; padding: 12px 4px;">
+{innerHtml}
+</section>'''
+
+
+# ============================================================
+# 示例用法（可按需修改 main 逻辑适配不同文章）
+# ============================================================
+if __name__ == "__main__":
+    if len(sys.argv) < 3:
+        print("用法: python3 build_hundun_html.py <extracted_content.txt> <输出HTML路径>")
+        print("示例: python3 build_hundun_html.py ./output/extracted_content.txt ./output/article.html")
+        sys.exit(1)
+    
+    inputFile = sys.argv[1]
+    outputFile = sys.argv[2]
+    
+    imgDict = loadImages(inputFile)
+    print(f"📦 已加载 {len(imgDict)} 张图片索引")
+    
+    # 示例：生成一个简单的年份卡片
+    imgHtml = renderHeroMasonry(imgDict, [1, 2, 3, 4, 5])
+    yearCard = renderYearCard("2024年", "示例年份", "这是一段示例描述文字。", imgHtml)
+    
+    fullHtml = wrapPage(yearCard)
+    
+    Path(outputFile).write_text(fullHtml, encoding='utf-8')
+    print(f"✅ HTML 已生成: {outputFile}")
diff --git a/skills/hundun-wechat-layout/scripts/extract_wechat.py b/skills/hundun-wechat-layout/scripts/extract_wechat.py
new file mode 100644
index 0000000..7206c7d
--- /dev/null
+++ b/skills/hundun-wechat-layout/scripts/extract_wechat.py
@@ -0,0 +1,156 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""
+微信公众号文章抓取脚本
+用途：抓取微信公众号文章原始 HTML，提取文字内容与图片 URL 列表。
+
+使用方法：
+    python3 extract_wechat.py <微信文章URL> [输出目录]
+
+示例：
+    python3 extract_wechat.py "https://mp.weixin.qq.com/s/xxxx" ./output
+
+输出文件：
+    - raw_article.html     原始 HTML 源码
+    - extracted_content.txt 提取的图片列表与纯文本摘要
+"""
+
+import sys
+import os
+import re
+import urllib.request
+import html as html_lib
+from pathlib import Path
+
+
+def fetch_wechat_html(url: str) -> str:
+    """
+    使用桌面微信 User-Agent 抓取微信公众号文章原始 HTML。
+    
+    :param url: 微信公众号文章 URL
+    :return: 原始 HTML 字符串
+    :raises: urllib.error.URLError 如果请求失败
+    """
+    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'
+        ),
+        'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8',
+        'Accept-Language': 'zh-CN,zh;q=0.9,en;q=0.8',
+    }
+    req = urllib.request.Request(url, headers=headers)
+    with urllib.request.urlopen(req, timeout=30) as resp:
+        return resp.read().decode('utf-8', errors='replace')
+
+
+def extractTitle(htmlContent: str) -> str:
+    """从 HTML 中提取文章标题。"""
+    match = re.search(r'<title[^>]*>(.*?)</title>', htmlContent, re.DOTALL | re.IGNORECASE)
+    if match:
+        title = re.sub(r'<[^>]+>', '', match.group(1)).strip()
+        return html_lib.unescape(title)
+    return "未知标题"
+
+
+def extractImages(htmlContent: str) -> list:
+    """
+    从微信文章 HTML 中提取所有图片 URL。
+    优先提取 data-src 属性（微信懒加载），其次 src 属性。
+    
+    :param htmlContent: 原始 HTML 字符串
+    :return: 去重后的图片 URL 列表
+    """
+    imgUrls = []
+    seen = set()
+    
+    # 优先匹配 data-src（微信懒加载图片）
+    for match in re.finditer(r'data-src=["\']([^"\']+mmbiz[^"\']+)["\']', htmlContent):
+        url = html_lib.unescape(match.group(1))
+        if url not in seen:
+            imgUrls.append(url)
+            seen.add(url)
+    
+    # 补充匹配 src（部分图片无 data-src）
+    for match in re.finditer(r'<img[^>]+src=["\']([^"\']+mmbiz[^"\']+)["\']', htmlContent):
+        url = html_lib.unescape(match.group(1))
+        if url not in seen:
+            imgUrls.append(url)
+            seen.add(url)
+    
+    return imgUrls
+
+
+def extractText(htmlContent: str) -> str:
+    """
+    提取文章正文区域的纯文本（js_content 内部）。
+    
+    :param htmlContent: 原始 HTML 字符串
+    :return: 清理后的纯文本
+    """
+    contentMatch = re.search(
+        r'id=["\']js_content["\'][^>]*>(.*?)(?=<div\s+class=["\']ct_mpda_wrp|$)',
+        htmlContent,
+        re.DOTALL | re.IGNORECASE
+    )
+    if not contentMatch:
+        return ""
+    
+    text = contentMatch.group(1)
+    # 移除所有 HTML 标签
+    text = re.sub(r'<[^>]+>', ' ', text)
+    # 解码 HTML 实体
+    text = html_lib.unescape(text)
+    # 清理多余空白
+    text = re.sub(r'\s+', ' ', text).strip()
+    return text
+
+
+def main():
+    """主入口函数。"""
+    if len(sys.argv) < 2:
+        print("用法: python3 extract_wechat.py <微信文章URL> [输出目录]")
+        print("示例: python3 extract_wechat.py 'https://mp.weixin.qq.com/s/xxxx' ./output")
+        sys.exit(1)
+    
+    url = sys.argv[1]
+    outputDir = Path(sys.argv[2]) if len(sys.argv) > 2 else Path("./output")
+    outputDir.mkdir(parents=True, exist_ok=True)
+    
+    print(f"📡 正在抓取: {url}")
+    htmlContent = fetch_wechat_html(url)
+    
+    # 保存原始 HTML
+    rawPath = outputDir / "raw_article.html"
+    rawPath.write_text(htmlContent, encoding='utf-8')
+    print(f"💾 原始 HTML 已保存: {rawPath} ({len(htmlContent):,} 字节)")
+    
+    # 提取标题
+    title = extractTitle(htmlContent)
+    print(f"📰 标题: {title}")
+    
+    # 提取图片
+    imgUrls = extractImages(htmlContent)
+    print(f"🖼️  发现 {len(imgUrls)} 张图片")
+    
+    # 提取文本
+    textContent = extractText(htmlContent)
+    
+    # 写入提取结果
+    extractPath = outputDir / "extracted_content.txt"
+    with open(extractPath, 'w', encoding='utf-8') as f:
+        f.write(f"Title: {title}\n\n")
+        f.write(f"Images ({len(imgUrls)}):\n")
+        for i, imgUrl in enumerate(imgUrls, 1):
+            f.write(f"[{i}] {imgUrl}\n")
+        f.write(f"\n--- 正文摘要 (前 2000 字) ---\n\n")
+        f.write(textContent[:2000])
+    
+    print(f"📄 提取结果已保存: {extractPath}")
+    print(f"\n✅ 完成！共提取 {len(imgUrls)} 张图片，正文约 {len(textContent)} 字。")
+
+
+if __name__ == "__main__":
+    main()