wechat-article-maker/
├── scripts/                  # TypeScript source files
│   ├── wechat-api.ts        # API publishing logic
│   ├── wechat-article.ts    # Browser publishing logic
│   ├── wechat-browser.ts    # Image-text publishing logic
│   ├── image-utils.ts       # Image processing tools (sharp integration)
│   ├── generate-cover.ts    # Cover image generation logic
│   ├── md-to-wechat.ts      # Markdown conversion logic
│   ├── ensure-deps.ts       # Automatic dependency installation
│   └── md/                  # Markdown rendering engine
│       ├── render.ts
│       ├── themes/          # Theme styles
│       └── extensions/      # Extension plugins
├── references/              # Reference documents
├── SKILL.md                 # Skill documentation
└── README.md                # Project description

undefined

**Automatic Dependency Installation**: Dependencies will be automatically detected and installed when the script runs for the first time, no manual operation required.

undefined

┌────────────────────────────────────────────────────────────┬───────────────────┐
│                            Path                            │       Location    │
├────────────────────────────────────────────────────────────┼───────────────────┤
│ .awesome-skills/wechat-article-maker/EXTEND.md               │ Project directory │
├────────────────────────────────────────────────────────────┼───────────────────┤
│ $HOME/.awesome-skills/wechat-article-maker/EXTEND.md         │ User home directory │
└────────────────────────────────────────────────────────────┴───────────────────┘

┌───────────┬───────────────────────────────────────────────────────────────────────────┐
│  Result   │                                  Action                                   │
├───────────┼───────────────────────────────────────────────────────────────────────────┤
│ Found     │ Read, parse and apply settings                                            │
├───────────┼───────────────────────────────────────────────────────────────────────────┤
│ Not Found │ Use default values                                                        │
└───────────┴───────────────────────────────────────────────────────────────────────────┘

**EXTEND.md Support**: Default theme | Default publishing method (api/browser) | Default author | Chrome profile path

Content Creation Progress:
- [ ] Step 0: Load preference settings
- [ ] Step 1: Content analysis and link extraction
- [ ] Step 2: Link content acquisition and understanding
- [ ] Step 3: Ask creation preferences
- [ ] Step 4: Generate Markdown article
- [ ] Step 5: User confirmation and optimization
- [ ] Step 6: Convert to HTML
- [ ] Step 7: Prepare cover image
- [ ] Step 8: Publish to WeChat
- [ ] Step 9: Completion report

undefined

2. **Determine content type**:
   - If only a single link with no other text → switch to **Workflow 2: Link Publishing Workflow**
   - If there is text content (optional links) → continue with content creation workflow

// Use WebFetch to get and analyze
for (const url of links) {
  const content = await WebFetch(url, `
Please extract and summarize the following information:
1. Article title
2. Author (if any)
3. Core viewpoints (3-5 key points)
4. Key data or cases
5. Quotable golden sentences

Return in a structured format for easy subsequent reference.
  `);
}

Article Creation Configuration

Question 1: Article Style
header: "Style"
Options:
- Professional Analysis - In-depth interpretation, suitable for technical or industry analysis (recommended)
- Easy Science Popularization - Easy to understand, suitable for general readers
- Tutorial Guide - Clear steps, suitable for practical content
- Opinion Commentary - Express views, suitable for hot topic comments

Question 2: Article Length
header: "Length"
Options:
- Short Article (800-1200 words) - Quick reading
- Medium (1500-2500 words) - Balance depth and readability (recommended)
- Long Article (3000+ words) - In-depth long-form

Question 3: Reference Material Processing (if links exist)
header: "Citation Method"
Options:
- In-depth Citation and Analysis - Detailed interpretation of original viewpoints (recommended)
- Brief Mention and Link - Just touch upon it
- Background Reference Only - No explicit citation

---
title: Article Title (follow 5 title principles)
author: Author Name (from EXTEND.md or default)
summary: Article abstract (within 120 words, highlight core value)
featureImage: Cover image path (optional)
date: YYYY-MM-DD
---

undefined

> **Golden Sentence: Core viewpoints in separate paragraphs to enhance memorability**

![Effect Comparison Diagram](step2.jpg)

2. **Save File**:

```bash

3. **Show to User**:

undefined

Article generated, please select operation

header: "Next Step"
Options:
- Direct Publish - Convert to HTML and publish to WeChat (recommended)
- Modify Content - Describe parts that need adjustment
- Regenerate - Use different style or angle
- Save Only - Do not publish, process manually later

npx -y bun "${SKILL_DIR}/scripts/md-to-wechat.ts" \
  "$output_dir/$slug.md" \
  --theme grace \
  --output "$output_dir"

{
  "title": "Article Title",
  "author": "Author",
  "summary": "Abstract",
  "htmlPath": "path/to/article.html",
  "contentImages": [
    {
      "placeholder": "WECHATIMGPH_1",
      "localPath": "/path/to/image1.jpg",
      "originalPath": "Original path"
    }
  ]
}

Cover Image Settings (no images found in article)

header: "Cover Source"
Options:
- Auto Generate - Generate gradient background cover based on article title (recommended)
- Provide Path - Specify local file or URL
- Skip for Now - Add manually later

undefined

**Cover Requirements**:
- Format: JPEG, PNG, GIF or WebP
- Recommended size: 900x500px (2:1 ratio)
- File size: < 2MB

Publishing Method Selection

header: "Publishing Method"
Options:
- API Method - Fast publishing, requires API credentials (recommended)
- Browser Method - Visual operation, requires Chrome
- Output HTML Only - Save file, publish manually later

undefined

2. **If credentials are missing**, guide setup:

Create `.env` file:

```bash
WECHAT_APP_ID=<user input>
WECHAT_APP_SECRET=<user input>

npx -y bun "${SKILL_DIR}/scripts/wechat-api.ts" \
  "$output_dir/$slug.html" \
  --title "$title" \
  --summary "$summary" \
  --cover "$cover_image" \
  --inline-css

npx -y bun "${SKILL_DIR}/scripts/wechat-article.ts" \
  --html "$output_dir/$slug.html" \
  --title "$title" \
  --summary "$summary"

echo "✓ HTML file saved to: $output_dir/$slug.html"
echo ""
echo "File includes:"
echo "• Inline styles (compliant with WeChat specifications)"
echo "• Complete article content"
echo "• Local image paths"

✓ WeChat Official Account Article Creation and Publishing Completed!

Creation Information:
• Input: User text content
• Reference Links: $link_count
• Article Style: $style
• Article Length: $word_count words

Publishing Information:
• Title: $title
• Author: $author
• Summary: $summary
• Theme: $theme
• Images: $image_count
• Cover: $cover_source

Publishing Method: API / Browser

Result:
✓ Draft saved to WeChat Official Account
• media_id: $media_id

Next Step:
→ Manage Drafts: https://mp.weixin.qq.com (after login, go to "Content Management" → "Draft Box")

Generated Files:
• $output_dir/$slug.md (Markdown source file)
• $output_dir/$slug.html (HTML file)
• $output_dir/$slug-cover.jpg (Cover image)

Link Publishing Progress:
- [ ] Step 0: Load preference settings
- [ ] Step 1: Link verification
- [ ] Step 2: Article download and parsing
- [ ] Step 3: Image download and cleaning
- [ ] Step 4: Style conversion (CSS inline)
- [ ] Step 5: User confirmation
- [ ] Step 6: Prepare cover image
- [ ] Step 7: Execute publishing
- [ ] Step 8: Completion report

undefined

undefined

const article = await WebFetch(url, `
Please extract the following information and return in JSON format:

{
  "title": "Article Title",
  "author": "Author (if any)",
  "summary": "Article abstract or introduction (within 120 words)",
  "content": "Body content in HTML format, retain original style and structure",
  "images": ["Array of image URLs"],
  "featureImage": "Cover image URL (if any)",
  "publishDate": "Publish date (if any)"
}

Notes:
- content needs to include complete HTML tags and styles
- images includes all image URLs in the article
- retain original paragraphs, titles, lists and other structures
`);

temp_dir="wechat-temp/$(date +%Y%m%d-%H%M%S)"
mkdir -p "$temp_dir/images"

undefined

3. **Image Metadata Cleaning**:

The script `wechat-api.ts` will automatically perform the following cleaning:

- **Detect non-standard metadata** in JPEG images
- **Remove AIGC/Coze markers** (not supported by WeChat)
- **Retain valid EXIF data** and image content
- **Automatic Retry**: If upload fails (error code 40113), force cleaning and retry

Algorithm (reference `scripts/wechat-api.ts:105-180`):

```typescript
function cleanImageMetadata(buffer: Buffer): Buffer {
  // Check JPEG signature
  if (buffer[0] !== 0xff || buffer[1] !== 0xd8) return buffer;

  // Detect AIGC markers
  const headerStr = buffer.slice(0, 2048).toString('binary');
  const hasAigcMarker = headerStr.includes('AIGC{') || headerStr.includes('Coze');

  if (!hasAigcMarker) return buffer;

  // Skip non-standard APP segments (0xeb, 0xec, etc.)
  // Retain standard segments (APP0-APP9, DQT, SOF, etc.)
  // Return cleaned buffer
}

echo "$html_content" > "$temp_dir/original.html"

undefined

3. **Replace Image Paths**:

```bash

undefined

Article Processing Completed

📄 Title: $title
✍️ Author: $author
📝 Summary: $summary
🌐 Original: $original_url
🖼️ Images: Total $image_count (downloaded and metadata cleaned)
🎨 Style: Converted to inline styles (compliant with WeChat specifications)

HTML saved to: $temp_dir/processed.html

Please select operation

header: "Publishing Options"
Options:
- Direct Publish (API) - Fast publish to draft box (recommended)
- Browser Publish - Open browser for visual operation
- Output HTML Only - Save file, process manually later
- Cancel - Do not save

npx -y bun "${SKILL_DIR}/scripts/wechat-api.ts" \
  "$temp_dir/processed.html" \
  --title "$title" \
  --summary "$summary" \
  --cover "$cover_image" \
  --inline-css

npx -y bun "${SKILL_DIR}/scripts/wechat-article.ts" \
  --html "$temp_dir/processed.html" \
  --title "$title" \
  --summary "$summary"

undefined

undefined

✓ Link Article Publishing Completed!

Original Article Information:
• Link: $original_url
• Title: $title
• Author: $author

Processing Information:
• Downloaded and converted HTML
• Cleaned metadata of $image_count images
• Converted styles to inline format
• Generated cover image: $cover_source

Publishing Information:
• Method: API / Browser
• Theme: Retained original style
• Status: ✓ Draft saved

Result:
• media_id: $media_id

Next Step:
→ Manage Drafts: https://mp.weixin.qq.com (after login, go to "Content Management" → "Draft Box")

Generated Files:
• $output_path (processed HTML)
• $(dirname "$output_path")/images/ (cleaned images)

undefined

undefined

undefined

**Note**: Must use `--inline-css` parameter, otherwise styles will be lost.

---

undefined

undefined

WECHAT_APP_ID=your_app_id
WECHAT_APP_SECRET=your_app_secret

WECHAT_BROWSER_CHROME_PATH=/path/to/chrome  # Custom Chrome path

undefined

---

// Image processing workflow
const result = await cleanImage(buffer, forceClean);
// Returns: { buffer, wasCleaned, method: "sharp"|"manual"|"none", originalSize, cleanedSize }

try {
  await uploadImage(imageBuffer);
} catch (error) {
  if (error.code === 40113) {
    // Force deep cleaning with sharp and retry
    const cleanedBuffer = await cleanImage(imageBuffer, true);
    await uploadImage(cleanedBuffer);
  }
}

<style>
  h1 { color: blue; font-size: 24px; }
</style>
<h1>Title</h1>

<h1 style="color: blue; font-size: 24px;">Title</h1>

npx -y bun "${SKILL_DIR}/scripts/generate-cover.ts" \
  --title "Article Title" \
  --output cover.jpg \
  --gradient-start "#667eea" \
  --gradient-end "#764ba2" \
  --width 900 \
  --height 500

convert -size 900x500 \
  -define gradient:angle=135 \
  gradient:'#667eea'-'#764ba2' \
  -gravity center \
  -font "DejaVu-Sans-Bold" \
  -pointsize 48 \
  -fill white \
  -annotate +0-30 "First Line of Title" \
  -pointsize 36 \
  -annotate +0+30 "Second Line of Title" \
  cover.jpg

User: Create an article about development trends of AI coding assistants

Agent:
✓ Analyze content type → Plain text creation mode
✓ Ask article style, length → User selects "Professional Analysis", "Medium"
✓ Generate and display article
✓ After user confirmation, convert to HTML (grace theme)
✓ Automatically generate cover image
✓ Publish to WeChat via API

Result:
• Article saved to wechat-articles/2026-02-09/ai-coding-assistant-trends.md
• HTML output to wechat-articles/2026-02-09/ai-coding-assistant-trends.html
• Cover image: wechat-articles/2026-02-09/ai-coding-assistant-trends-cover.jpg
• WeChat draft box media_id: abc123...

User: Create an official account article based on this article, in-depth analysis of its viewpoints:
https://example.com/ai-future

Agent:
✓ Extract link and get content
✓ Organize key viewpoints and data
✓ Ask creation direction → User selects "Professional Analysis", "In-depth Citation"
✓ Generate article, cite 3 core viewpoints from original, add own analysis
✓ Publish after user confirmation

Result:
• Generated 2300-word in-depth analysis article
• Cited 3 viewpoints and 2 data points from original
• Added reference links
• Published to WeChat draft box

User: Publish this article to official account: https://blog.example.com/great-article

Agent:
✓ Identify as link publishing mode
✓ Download article HTML and 5 images
✓ Clean image metadata (detected 2 with AIGC markers, cleaned)
✓ Convert styles to inline format
✓ Show processing results
✓ User confirms "Direct Publish"
✓ Publish via API

Result:
• Processed HTML: wechat-temp/20260209-153000/processed.html
• Cleaned images: wechat-temp/20260209-153000/images/ (5 images)
• WeChat draft box media_id: xyz789...

User: Publish this Markdown file: ./posts/my-article.md

Agent:
✓ Read file, parse frontmatter
✓ Ask theme → User selects "grace"
✓ Convert to HTML, apply theme styles
✓ Download 3 remote images in article
✓ Automatically generate cover image (based on title)
✓ Publish to WeChat

Result:
• HTML output to ./posts/my-article.html
• Cover image: ./posts/my-article-cover.jpg
• Published to draft box

User: Publish a set of product images to official account, title is "New Product Launch"

Agent:
✓ Identify as image-text publishing mode
✓ Open browser, navigate to image-text message editor
✓ Fill in title
✓ Upload 6 images
✓ Submit for publishing

Result:
• Image-text message saved to draft box
• Contains 6 product images