wechat-article-creatorlisted
Install: claude install-skill bluehood2022/wechat-article-creator
# 微信公众号文章排版 + 配图
**触发条件**：用户给一篇文章正文（或链接），要求自动排版/配图/生成公众号文章。
## 工作流程
### 1️⃣ 提取正文
- 用户给链接 → 用 `web_fetch` 尝试抓取；失败则用 Playwright 浏览器抓取
- 用户直接给文本 → 直接使用
- 清理广告、导航、水印等无关内容，只保留标题+正文
### 2️⃣ 确认风格
与用户确认以下风格参数（如未指定，用默认值）：
| 参数 | 默认值 | 说明 |
|------|--------|------|
| 主色调 | `#07C160`（微信绿） | 标题、标签、分隔线、高亮 |
| 背景 | 白色 | 公众号编辑器适配 |
| 配图风格 | 示意图/插画风 | 传给 Dreamina 的 prompt 关键词 |
| 字体 | 无衬线（全文统一） | 正文/标题/注释全部 sans-serif |
| 段落间距 | 1.8 line-height | 阅读舒适 |
### 3️⃣ 生成配图
用 Dreamina CLI 生成文章配图：
- **工具**：`dreamina text2image`
- **路径**：`/Users/jiejielu/.local/bin/dreamina`
- **参数**：`--ratio=16:9 --resolution_type=2k --poll=120`
- **数量**：封面图 1 张 + 每章节 1 张（通常 3-4 张）
- **prompt 设计**：根据文章主题和确认的风格生成，确保调性一致
- **下载**：保存到 workspace 目录，后续引用
### 4️⃣ 生成 HTML
输出微信公众号兼容的 HTML，关键规则：
- ✅ 必须包含 `<!DOCTYPE html>` + `<meta charset="utf-8">`（否则中文乱码）
- ✅ 使用内联 CSS（`style="..."`），无外部样式表
- ✅ 图片用 **纯 URL** 引用，绝对不能用 `data:image/png;base64,` 前缀（图片无法加载）
- ✅ 所有标签用 `<section>` 替代 `div`（公众号兼容性更好）
- ✅ 所有样式用 `margin/padding/font-size/color` 等基础属性
- ✅ 避免 `!important`、`@keyframes`、`position:fixed` 等不支持的属性
- ✅ 图片外层包 `border` + `border-radius` 做圆角效果
### 字体规范 ⚠️ 必须遵守
- **全文统一无衬线字体**，不要用等宽字体（monospace）
- 字体栈：`-apple-system, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif`
- `<body>` 和顶层 `<section>` 都要显式设置 `font-family`
- **禁止使用任何 emoji 表情字符**（如 🎮💊⚠️✓✗▎ 等），用纯文本符号代替：
- 装饰符号用 `▶`、`■`、`■`
- 警告用 `[!]`
- 勾选用 `[YES]` / `[NO]`
- 注释用 `//` 前缀
### 5️⃣ 保存文件
保存到 workspace：
```
/Use