huashu-wechat-image

What the source does

• FilesystemNone observedNo reads or writes in the source
• NetworkNone observedNo outbound calls in the source
• ShellNone observedNo commands run in the source
• DependenciesPinnedNothing floats
• SecretsNone foundNo keys in source

Five audit layers

Gates applied: no behavioural pass.

image_data = base64.b64decode(image_data)

Audit 0.4.1 · source sha dff5260ada03 · 31 Oct 2026Report an issue or request a re-scan

• Publisheralchaincyf GitHub userOwner of the repository this skill is read from
• Source folderalchaincyf/huashu-skills/huashu-wechat-imageThe exact folder we audited
• LicenceMITAs the repository states it
• Commit pinned for this verdictdff5260ada03A new audit runs when the source changes
• Repository statusNot archivedLast push 5 days ago
• Sandboxed runNot runSkills are read, not executed; layer L4 is skipped

Its description: 为微信公众号文章生成高质量配图。支持封面图(2.35:1)、正文插图(16:9/4:3)、信息图。提供两条路径:AI生成(视觉创意型)和HTML渲染(文字精确型)。当用户提到"公众号配图"、"公众号封面"、"文章配图"、"正文插图"、"公众号图片"时使用此技能。

---
name: huashu-wechat-image
description: |
  为微信公众号文章生成高质量配图。支持封面图(2.35:1)、正文插图(16:9/4:3)、信息图。提供两条路径:AI生成(视觉创意型)和HTML渲染(文字精确型)。当用户提到"公众号配图"、"公众号封面"、"文章配图"、"正文插图"、"公众号图片"时使用此技能。
---

# 公众号配图工作流

## ⚠️ 核心原则:先提案,后生成

**绝对不能跳过设计提案直接出图。** 正确流程:

```
理解内容 → 设计提案(2-3个方向)→ 用户选择 → 生成 → 预览确认 → 上传
```

设计审美画像和提案格式见姊妹skill `xhs-image/SKILL.md`,公众号配图同样适用。

## 核心参数

| 图片类型 | 尺寸 | 比例 | Playwright viewport | AI Prompt 长宽比声明 |
|---------|------|------|---------------------|---------------------|
| 头条封面 | 1800 x 766 px | 2.35:1 | `--viewport-size=1800,766` | `2.35:1 ultra-wide landscape, 1800x766 pixels` |
| 正文宽图 | 1920 x 1080 px | 16:9 | `--viewport-size=1920,1080` | `16:9 landscape, 1920x1080 pixels` |
| 正文方图 | 1440 x 1080 px | 4:3 | `--viewport-size=1440,1080` | `4:3 landscape, 1440x1080 pixels` |
| 信息图 | 1080 x 自由 | 自由 | `--viewport-size=1080,N` | 按内容定 |

---

## Step 0: 确定配图需求 ✅ 用户确认

**向用户展示选项,等待确认:**

| 类型 | 说明 | 图片数量 | 推荐路径 |
|------|------|---------|---------|
| **A. 仅封面** | 头条封面图 | 1张 | AI 生成 |
| **B. 正文配图** | 章节配图,辅助阅读理解 | 3-8张 | AI 生成为主 |
| **C. 全套配图** | 封面 + 正文全部 | 4-10张 | AI 生成为主 |
| **D. 纯信息图** | 数据对比、流程图、清单 | 1-5张 | AI 生成(精确数据表格用HTML兜底) |

**问用户**:
1. 做封面、正文插图、还是全套?
2. 文章路径/内容是什么?(分析内容确定配图位置)
3. 总共需要几张图?

### 配图数量建议

| 文章长度 | 推荐配图数 | 包含 |
|---------|-----------|------|
| < 1500字 | 2-3张 | 封面 + 1-2张正文 |
| 1500-3000字 | 4-6张 | 封面 + 每个核心章节1张 |
| 3000-5000字 | 6-8张 | 封面 + 章节图 + 信息图 |
| > 5000字 | 8-10张 | 不超过10张,避免过度打断 |

---

## Step 1: 风格选择 ✅ 用户确认

**根据用户的文章类型,推荐 3 种风格供选择。**

### 按文章类型自动推荐

| 文章类型 | 第一推荐 | 第二推荐 | 第三推荐 |
|---------|---------|---------|---------|
| AI工具评测 | 极简专业 | 编辑杂志 | 数据信息图 |
| 技术教程 | 极简专业 | 手绘白板 | 编辑杂志 |
| 产品发布 | 编辑杂志 | 大字报 | 极简专业 |
| 深度分析 | 编辑杂志 | 数据信息图 | 极简专业 |
| 个人故事 | Snoopy温暖漫画 | 温暖叙事 | 编辑杂志 |
| 行业观察 | 大字报 | 编辑杂志 | 数据信息图 |

**向用户展示 3 个推荐风格**,每个包含:
- 风格名 + 一句话描述
- 适用场景
- 色彩倾向

**问用户**:选哪个风格?或者你有自己想要的参考?

**完整风格库:** `references/style-gallery.md`

---

## Step 2: 选择生成路径 ✅ 用户确认

**根据内容特征推荐路径,向用户展示对比:**

| | Path A: HTML → 截图 | Path B: AI 生成 |
|---|---|---|
| **文字准确度** | 100%(代码控制) | 中文可能出错(需验证) |
| **布局控制** | 像素级精确 | AI 自由发挥 |
| **视觉创意** | 中(靠设计能力) | 高(AI 有创造力) |
| **API 成本** | 零(纯本地) | 每张消耗 Gemini API |
| **速度** | 快(几秒) | 慢(10-30秒/张) |
| **适合** | 文字多、数据多、清单、信息图 | 封面、氛围图、创意插画 |
| **可编辑性** | 改 HTML 重新截图即可 | 需要重新生成 |
| **深色模式** | CSS 直接控制配色 | 需在 prompt 中声明 |

### ⚠️ 花叔偏好:AI生成优先

> HTML截图效果太平面、像PPT模板,缺少质感和设计感。AI生成的图片有丰富的视觉细节,品质远胜HTML。
> **默认走AI生成路径,只有「必须逐字精确的复杂数据表格」才用HTML兜底。**

### 路径推荐规则

| 图片类型 | 推荐路径 | 理由 |
|---------|---------|------|
| 头条封面 | **AI** | 视觉冲击力强,质感好 |
| 正文氛围/场景图 | **AI** | 创意性强 |
| 正文信息图 | **AI** | AI能做出设计感的信息图 |
| 流程图/步骤图 | **AI** | AI能加入视觉层次 |
| 对比图 | **AI** | 视觉品质更高 |
| 精确数据表格(10+单元格) | **HTML** | 唯一需要HTML的场景:大量精确数字 |

**默认推荐AI路径,不再逐次询问路径选择。**

---

## Step 3: 生成图片

### Path A: HTML → Playwright 截图

#### 3-A-1. 创建 HTML

根据选定风格和用户提供的内容,生成 HTML 文件。

**HTML 模板要求:**
- 画布尺寸:根据图片类型选择(封面 1800x766,正文宽图 1920x1080,正文方图 1440x1080)
- 字体:`font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif`
- 深色模式友好:用 #F5F5F5 代替纯白,用 #1A1A2E 代替纯黑
- 封面安全区:核心信息集中在中央正方形区域(766x766)

**封面大字报模板示例(2.35:1):**
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    width: 1800px; height: 766px;
    background: #1A1A2E;
    display: flex; flex-direction: column;
    justify-content: center; align-items: center;
    padding: 60px 400px; /* 左右大padding确保内容在安全区 */
    font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  }
  .title {
    font-size: 96px; font-weight: 900;
    color: #FFFFFF; text-align: center;
    line-height: 1.3; letter-spacing: 4px;
  }
  .subtitle {
    font-size: 36px; font-weight: 400;
    color: #E2B714; text-align: center;
    margin-top: 30px;
  }
  .accent-line {
    width: 200px; height: 4px;
    background: #E2B714;
    margin: 30px auto;
  }
</style>
</head>
<body>
  <div class="title">Claude vs Codex</div>
  <div class="accent-line"></div>
  <div class="subtitle">重度用户的20分钟实战对比</div>
</body>
</html>
```

**正文信息图模板示例(4:3):**
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    width: 1440px; height: 1080px;
    background: #F5F5F5;
    padding: 60px 80px;
    font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  }
  .heading {
    font-size: 56px; font-weight: 800;
    color: #1A1A1A; margin-bottom: 40px;
    line-height: 1.3;
  }
  .item {
    display: flex; align-items: flex-start;
    margin-bottom: 28px; gap: 20px;
  }
  .num {
    font-size: 40px; font-weight: 900;
    color: #4A90D9; min-width: 50px;
  }
  .text {
    font-size: 32px; color: #333;
    line-height: 1.5;
  }
  .highlight { color: #FF6B35; font-weight: 700; }
</style>
</head>
<body>
  <div class="heading">Claude Code 五大优势</div>
  <div class="item"><span class="num">01</span><span class="text"><span class="highlight">Agent模式</span>自主规划执行复杂任务</span></div>
  <div class="item"><span class="num">02</span><span class="text">原生<span class="highlight">终端集成</span>直接操作文件系统</span></div>
  <div class="item"><span class="num">03</span><span class="text"><span class="highlight">多文件编辑</span>一次修改整个项目</span></div>
</body>
</html>
```

#### 3-A-2. 截图

```bash
npx playwright screenshot "file:///path/to/card.html" output.png \
  --viewport-size=[宽],[高] --wait-for-timeout=1000
```

- 封面:`--viewport-size=1800,766`
- 正文宽图:`--viewport-size=1920,1080`
- 正文方图:`--viewport-size=1440,1080`

#### 3-A-3. ✅ 预览确认

用 Read 工具向用户展示截图结果。

**问用户**:
- 文字内容对吗?
- 布局和配色满意吗?
- 封面的核心信息在安全区内吗?(封面图特有)
- 需要调整什么?

**如需调整**:修改 HTML → 重新截图 → 再次确认。(HTML 路径迭代成本极低)

---

### Path B: AI 生成(Gemini 3 Pro Image)

#### 3-B-1. 构建 Prompt

**封面 Base Style Prompt:**
```
[Base Style]:
VISUAL REFERENCE: [一句话描述具体风格美学]
CANVAS: 2.35:1 ultra-wide landscape, 1800x766 pixels, high quality rendering.
SAFE ZONE: Center square (766x766) contains all key text and visuals.
COLOR SYSTEM: [描述色彩情绪,不指定比例]
TEXT RENDERING: Chinese text must 

Excerpt, first 6,000 characters of SKILL.md, verbatim from the audited commit. It is text from someone else’s repository, quoted so you can judge it before your agent reads it.

1. 2026-10-31
   ✓SAFE B 89 / 100

   first audit · source dff5260ada03

Questions about huashu-wechat-image

• github.com/alchaincyf/huashu-skills/tree/master/huashu-wechat-im — the audited source at commit dff5260ada03 and every finding aboveObserved · 31 Oct 2026

Spotted something wrong? Report a correction · Methodology