feat: 初始化混沌学园微信公众号 HTML 排版 Skill
- SKILL.md: 完整设计规范(色彩体系、微信公众号兼容规则、图片排版方案) - scripts/extract_wechat.py: 微信公众号文章抓取脚本 - scripts/build_hundun_html.py: 混沌风格 HTML 生成脚本(组件化) - examples/hundun-lead-article.html: 领教营二期排版示例 - resources/color-palette.md: 混沌品牌色彩参考
This commit is contained in:
@@ -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.
|
||||
Reference in New Issue
Block a user