- SKILL.md: 完整设计规范(色彩体系、微信公众号兼容规则、图片排版方案) - scripts/extract_wechat.py: 微信公众号文章抓取脚本 - scripts/build_hundun_html.py: 混沌风格 HTML 生成脚本(组件化) - examples/hundun-lead-article.html: 领教营二期排版示例 - resources/color-palette.md: 混沌品牌色彩参考
66 lines
2.0 KiB
Markdown
66 lines
2.0 KiB
Markdown
# 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.
|