# 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.