WeChat Official Account Image Workflow

⚠️ Core Principle: Propose First, Generate Later

Never skip design proposals and directly generate images. Correct workflow:

Understand Content → Design Proposals (2-3 directions) → User Selection → Generate → Preview & Confirm → Upload

Design aesthetic profile and proposal format refer to the sister skill

xhs-image/SKILL.md

, which also applies to WeChat Official Account images.

Core Parameters

Image Type	Size	Aspect Ratio	Playwright viewport	AI Prompt Aspect Ratio Declaration
Headline Cover	1800 x 766 px	2.35:1	`--viewport-size=1800,766`	`2.35:1 ultra-wide landscape, 1800x766 pixels`
Body Wide Image	1920 x 1080 px	16:9	`--viewport-size=1920,1080`	`16:9 landscape, 1920x1080 pixels`
Body Square Image	1440 x 1080 px	4:3	`--viewport-size=1440,1080`	`4:3 landscape, 1440x1080 pixels`
Infographic	1080 x Free	Free	`--viewport-size=1080,N`	Determined by content

Step 0: Confirm Image Requirements ✅ User Confirmation

Show options to users and wait for confirmation:

Type	Description	Quantity	Recommended Path
A. Cover Only	Headline cover image	1	AI Generation
B. Body Images	Chapter illustrations to assist reading comprehension	3-8	Priority to AI Generation
C. Full Set of Images	Cover + All Body Images	4-10	Priority to AI Generation
D. Pure Infographics	Data comparison, flowcharts, checklists	1-5	AI Generation (HTML fallback for precise data tables)

Ask users:

Do you need covers, body illustrations, or a full set?
What is the article link/content? (Analyze content to determine image placement)
How many images are needed in total?

Image Quantity Recommendations

Article Length	Recommended Quantity	Includes
< 1500 words	2-3	Cover + 1-2 body images
1500-3000 words	4-6	Cover + 1 image per core chapter
3000-5000 words	6-8	Cover + chapter images + infographics
> 5000 words	8-10	No more than 10 images to avoid excessive interruption

Step 1: Style Selection ✅ User Confirmation

Based on the user's article type, recommend 3 styles for selection.

Automatic Recommendations by Article Type

Article Type	First Recommendation	Second Recommendation	Third Recommendation
AI Tool Review	Minimalist Professional	Editorial Magazine	Data Infographic
Technical Tutorial	Minimalist Professional	Hand-drawn Whiteboard	Editorial Magazine
Product Launch	Editorial Magazine	Big Poster	Minimalist Professional
In-depth Analysis	Editorial Magazine	Data Infographic	Minimalist Professional
Personal Story	Snoopy Warm Comic	Warm Narrative	Editorial Magazine
Industry Observation	Big Poster	Editorial Magazine	Data Infographic

Show users 3 recommended styles, each including:

Style name + one-sentence description
Applicable scenarios
Color tendency

Ask users: Which style do you choose? Or do you have your own reference?

Complete Style Library:

references/style-gallery.md

Step 2: Select Generation Path ✅ User Confirmation

Recommend paths based on content characteristics and show comparisons to users:

	Path A: HTML → Screenshot	Path B: AI Generation
Text Accuracy	100% (controlled by code)	Chinese text may have errors (need verification)
Layout Control	Pixel-level precision	AI free play
Visual Creativity	Medium (depends on design ability)	High (AI has creativity)
API Cost	Zero (pure local)	Consumes Gemini API per image
Speed	Fast (a few seconds)	Slow (10-30 seconds per image)
Suitable For	Text-heavy, data-heavy, checklists, infographics	Covers, atmosphere images, creative illustrations
Editability	Modify HTML and re-screenshot	Need to regenerate
Dark Mode	Direct color control via CSS	Need to declare in prompt

⚠️ Uncle Hua's Preference: Prioritize AI Generation

HTML screenshots are too flat, like PPT templates, lacking texture and design sense. AI-generated images have rich visual details, and their quality is far superior to HTML. Default to AI generation path, only use HTML fallback for "complex data tables that require word-by-word precision".

Path Recommendation Rules

Image Type	Recommended Path	Reason
Headline Cover	AI	Strong visual impact and good texture
Body Atmosphere/Scene Images	AI	High creativity
Body Infographics	AI	AI can create infographics with design sense
Flowcharts/Step Diagrams	AI	AI can add visual hierarchy
Comparison Charts	AI	Higher visual quality
Precise Data Tables (10+ cells)	HTML	The only scenario requiring HTML: large amounts of precise numbers

Default to recommending AI path, no need to ask about path selection each time.

Step 3: Generate Images

Path A: HTML → Playwright Screenshot

3-A-1. Create HTML

Generate HTML files based on the selected style and user-provided content.

HTML Template Requirements:

Canvas size: Select according to image type (cover 1800x766, body wide image 1920x1080, body square image 1440x1080)

Font:

font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif

Dark mode friendly: Use #F5F5F5 instead of pure white, #1A1A2E instead of pure black
Cover safe zone: Core information is concentrated in the central square area (766x766)

Example of Cover Big Poster Template (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; /* Large left and right padding to ensure content is in safe zone */
    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-Minute Practical Comparison by Heavy Users</div>
</body>
</html>

Example of Body Infographic Template (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">Top 5 Advantages of Claude Code</div>
  <div class="item"><span class="num">01</span><span class="text"><span class="highlight">Agent Mode</span> autonomously plans and executes complex tasks</span></div>
  <div class="item"><span class="num">02</span><span class="text">Native <span class="highlight">Terminal Integration</span> directly operates file system</span></div>
  <div class="item"><span class="num">03</span><span class="text"><span class="highlight">Multi-file Editing</span> modifies entire project at once</span></div>
</body>
</html>

3-A-2. Screenshot

bash

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

Cover:
```
--viewport-size=1800,766
```
Body wide image:
```
--viewport-size=1920,1080
```
Body square image:
```
--viewport-size=1440,1080
```

3-A-3. ✅ Preview & Confirm

Use the Read tool to show users the screenshot results.

Ask users:

Is the text content correct?
Are you satisfied with the layout and color scheme?
Is the core information of the cover within the safe zone? (Unique to covers)
What adjustments are needed?

If adjustments are needed: Modify HTML → Re-screenshot → Confirm again. (Iteration cost of HTML path is extremely low)

Path B: AI Generation (Gemini 3 Pro Image)

3-B-1. Build Prompt

Cover Base Style Prompt:

[Base Style]:
VISUAL REFERENCE: [One-sentence description of specific style aesthetics]
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: [Describe color mood, do not specify proportions]
TEXT RENDERING: Chinese text must be large, clear, readable. Title in center safe zone.

Body Base Style Prompt:

[Base Style]:
VISUAL REFERENCE: [One-sentence description of specific style aesthetics]
CANVAS: [16:9 landscape, 1920x1080 pixels / 4:3 landscape, 1440x1080 pixels], high quality rendering.
COLOR SYSTEM: [Describe color mood]
DARK MODE: Use medium-tone backgrounds, avoid pure white (#FFFFFF) and pure black (#000000).

Per-Image Prompt:

Create a [style] [cover/illustration] for a WeChat article about [topic].

[Base Style]

DESIGN INTENT: [What emotion/behavior should users have after seeing it]

TEXT TO RENDER:
- Title: "[Title, ≤10 words for covers, optional for body]"
- [Other text]

[1-2 sentences describing scene mood to let AI freely compose]

3-B-2. ✅ Prompt Confirmation

Show users the prompt to be used and wait for confirmation or modification. Specifically confirm:

Is the text content to be rendered correct?
Is the design intent accurate?
Are there any other requirements?

3-B-3. Generate

bash

export $(grep GEMINI_API_KEY ~/.claude/.env) && \
uv run /Users/alchain/Documents/写作/.claude/skills/wechat-image/scripts/generate_image.py \
  --prompt "[full prompt]" \
  --filename "[timestamp]-wechat-[type]-[description].png" \
  --aspect [cover|wide|standard|square]

```
--aspect cover
```
→ 2.35:1 headline cover
```
--aspect wide
```
→ 16:9 body wide image (default)
```
--aspect standard
```
→ 4:3 body square image
```
--aspect square
```
→ 1:1 square image

Multiple images can be generated in parallel (

run_in_background=true

3-B-4. ✅ Preview & Confirm

Use the Read tool to show users the generated results.

Checklist:

Is the text accurate? (No garbled characters/typos in Chinese)
Is the aspect ratio correct? (2.35:1 for covers, 16:9 or 4:3 for body images)
Cover safe zone: Is core information within the central square? (Unique to covers)
Dark mode: Are pure white and pure black backgrounds avoided?
Are you satisfied with the style?

Ask users: Satisfied / Regenerate / Adjust prompt?

Path C: Hybrid Path (Recommended for Full Set of Images)

Applicable to full set of images: Use AI generation for covers (to catch attention), HTML rendering for body infographics (precise information), and AI generation for body atmosphere images.

Execution sequence:

First generate cover via Path B → User confirmation
Extract consistent style from cover's color scheme/atmosphere
Generate body atmosphere images via Path B → User confirmation
Generate body infographics/data images via Path A → User confirmation

Step 4: Upload to Image Hosting

bash

python3 /Users/alchain/Documents/写作/tools/upload_image.py "[image path]"

Returns permanent ImgBB link. WeChat Official Account articles must use web links, local paths will become invalid after publication.

Quick Reference

Cover Safe Zone

┌─────────────────────────────────────┐
│         │ 766x766  │               │
│  Decorative Area  │  Safe Zone  │  Decorative Area       │ 1800 x 766
│         │ (Core)  │               │
└─────────────────────────────────────┘
           ↑ Moments Cropping Area ↑

Dark Mode Adaptation Key Points

Use #F5F5F5 (light gray) instead of pure white for background
Use #1A1A2E (dark purple-gray) instead of pure black for background
Use #595959 or #3F3F3F for body text color, not pure black #000000
Avoid shadow effects and white borders
Use low-saturation color schemes

Chinese Text Rendering (Unique to AI Path)

Cover title ≤ 10 words
Text on body images ≤ 20 words per line
Infographic text is more reliable when rendered via HTML
Must verify each image one by one

Font Recommendations (Unique to HTML Path)

Title:
```
"PingFang SC"
```
Bold /
```
"Microsoft YaHei"
```
Bold
Body:
```
"PingFang SC"
```
Regular
Commercial-safe alternatives: Alibaba Pu Hui Ti, Source Han Sans

Uncle Hua Technology Account Color Schemes

Scheme Name	Background Color	Main Color	Accent Color	Applicable Scenarios	Dark Mode Compatibility
Warm Gray Professional	#F5F0EB	#D97706	#4A90D9	AI tools, sharing	Good
Minimalist Professional	#F5F5F5	#4A90D9	#FF6B35	Tutorials, comparisons	Medium
Dark Night Gold	#1A1A2E	#E2B714	#FFFFFF	Product launches	Good
Terminal Green	#1A1A1A	#00FF41	#888888	Programming-related	Good

Golden Rules

Place core cover information in the central square safe zone
Use medium-tone backgrounds for body images (adapt to dark mode)
Prioritize HTML → Screenshot for infographics (precise text)
Prioritize AI generation for atmosphere images (high creativity)
Upload images to hosting to get permanent links
Keep consistent style for illustrations in the same article
Add one image every 800-1200 words
At least one image per H2 chapter

Image Placement Strategy

Position	Necessity	Type
Below title (cover)	Mandatory	Cover image / atmosphere image
After each H2 title	Recommended	Chapter illustration
At data/comparison sections	Recommended	Infographic
At product/tool introduction sections	Optional	Screenshot / AI concept image
Before conclusion at the end	Optional	Closing illustration

Decision Flowchart

User Demand → Step 0 Confirm Requirements
                ↓
         Step 1 Select Style (Show 3 options)
                ↓
         Step 2 Default to AI Generation (Only use HTML for precise data tables)
                ↓
         Step 3 Generate → Preview → User Confirmation
           ├→ Satisfied → Step 4 Upload
           ├→ Text rendering error → Use HTML fallback for this image
           └→ Dissatisfied → Adjust prompt and regenerate

Related Skills

Skill	Function
`xhs-image`	Xiaohongshu Images (sister skill)
`image-to-slides`	PPT Images (source of style library)

Reference Files

```
references/style-gallery.md
```
— Complete style library and prompt templates
```
references/design-guidelines.md
```
— WeChat Official Account platform design specifications

Produced by Uncle Hua | AI Native Coder · Independent Developer Official Account "Uncle Hua" | 300,000+ followers | AI Tools & Efficiency Improvement Masterpieces: Kitten Fill Light (Top 1 in AppStore Paid Rankings) · Mastering DeepSeek in One Book

huashu-wechat-image

NPX Install

Tags

SKILL.md Content (Chinese)

WeChat Official Account Image Workflow

⚠️ Core Principle: Propose First, Generate Later

Core Parameters

Step 0: Confirm Image Requirements ✅ User Confirmation

Image Quantity Recommendations

Step 1: Style Selection ✅ User Confirmation

Automatic Recommendations by Article Type

Step 2: Select Generation Path ✅ User Confirmation

⚠️ Uncle Hua's Preference: Prioritize AI Generation

Path Recommendation Rules

Step 3: Generate Images

Path A: HTML → Playwright Screenshot

3-A-1. Create HTML

3-A-2. Screenshot

3-A-3. ✅ Preview & Confirm

Path B: AI Generation (Gemini 3 Pro Image)

3-B-1. Build Prompt

3-B-2. ✅ Prompt Confirmation

3-B-3. Generate

3-B-4. ✅ Preview & Confirm

Path C: Hybrid Path (Recommended for Full Set of Images)

Step 4: Upload to Image Hosting

Quick Reference

Cover Safe Zone

Dark Mode Adaptation Key Points

Chinese Text Rendering (Unique to AI Path)

Font Recommendations (Unique to HTML Path)

Uncle Hua Technology Account Color Schemes

Golden Rules

Image Placement Strategy

Decision Flowchart

Related Skills

Reference Files