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

# Set skill directory
SKILL_DIR="${SKILL_DIR}"

# All scripts run via npx -y bun (cross-platform unified)
npx -y bun "${SKILL_DIR}/scripts/wechat-api.ts" article.md --inline-css
npx -y bun "${SKILL_DIR}/scripts/md-to-wechat.ts" article.md --theme grace
npx -y bun "${SKILL_DIR}/scripts/generate-cover.ts" --title "Title" --output cover.jpg

# Check project level
test -f .awesome-skills/wechat-article-maker/EXTEND.md && echo "project"

# Check user level (cross-platform: $HOME works on macOS/Linux/WSL)
test -f "$HOME/.awesome-skills/wechat-article-maker/EXTEND.md" && echo "user"

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

# Extract HTTP/HTTPS links
echo "$user_input" | grep -oE 'https?://[^\s]+' > /tmp/links.txt

// 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
---

# Article Title (clear pain point + attractive numbers + result-oriented)

![Cover Image](cover.jpg)

Introduction paragraph, 2-3 lines,
directly state what value readers can gain.

## Part 1: Core Problem

(3-5 lines, focus on pain points)

**Important data in separate bolded paragraph**

Supporting explanation, 3-4 lines.

![Step Effect Diagram](step1.jpg)

## Part 2: Solution

Explain in sections, each paragraph 3-5 lines.

```python
# Leave blank lines before and after code block
# Mark language type for syntax highlighting
def solution():
    return "success"

2. **Save File**:

```bash
# Generate slug (file name)
title="Article Title"
slug=$(echo "$title" | \
  iconv -t ascii//TRANSLIT 2>/dev/null | \
  tr '[:upper:]' '[:lower:]' | \
  tr ' ' '-' | \
  tr -cd '[:alnum:]-' | \
  cut -c1-50)

# Create directory and save
output_dir="wechat-articles/$(date +%Y-%m-%d)"
mkdir -p "$output_dir"
echo "$article_content" > "$output_dir/$slug.md"

✓ Article generated

📄 Title: $title
📏 Length: About $word_count words
📁 Save Location: $output_dir/$slug.md

[Article preview content...]

Please select next operation...

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

# Use Node.js script (no system dependencies)
npx -y bun "${SKILL_DIR}/scripts/generate-cover.ts" \
  --title "$title" \
  --output "$output_dir/$slug-cover.jpg" \
  --gradient-start "#667eea" \
  --gradient-end "#764ba2"

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

# Check project level
test -f .awesome-skills/.env && grep -q "WECHAT_APP_ID" .awesome-skills/.env && echo "project"

# Check user level
test -f "$HOME/.awesome-skills/.env" && grep -q "WECHAT_APP_ID" "$HOME/.awesome-skills/.env" && echo "user"

WeChat API Credentials Not Found

Steps to get credentials:
1. Visit https://mp.weixin.qq.com
2. Go to: Development → Basic Configuration
3. Copy AppID and AppSecret

Save location?
A) Project level: .awesome-skills/.env (this project only)
B) User level: ~/.awesome-skills/.env (all projects)

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

# Check link status
status_code=$(curl -sI -w "%{http_code}" -o /dev/null "$url")
if [ "$status_code" = "200" ]; then
  echo "Link valid"
else
  echo "Link inaccessible, status code: $status_code"
fi

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"

# Parse image URL array and download
image_index=1
for img_url in "${images[@]}"; do
  # Get file extension
  ext="${img_url##*.}"
  ext="${ext%%\?*}"  # Remove URL parameters

  # Download image
  output_file="$temp_dir/images/image_${image_index}.${ext}"
  curl -L -o "$output_file" "$img_url" 2>/dev/null

  image_index=$((image_index + 1))
done

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"

# Use inline conversion feature of wechat-api.ts
# Note: Generate processed HTML first, do not publish immediately
npx -y bun "${SKILL_DIR}/scripts/wechat-api.ts" \
  "$temp_dir/original.html" \
  --inline-css \
  --output "$temp_dir/processed.html" \
  --dry-run

# Replace remote image URLs with local paths
for i in {1..${#images[@]}}; do
  sed -i "s|${images[$i-1]}|$temp_dir/images/image_$i.jpg|g" "$temp_dir/processed.html"
done

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"

# Copy to permanent location
output_path="wechat-articles/$(date +%Y-%m-%d)/$slug.html"
mkdir -p "$(dirname "$output_path")"
cp "$temp_dir/processed.html" "$output_path"
cp -r "$temp_dir/images" "$(dirname "$output_path")/"

echo "✓ HTML saved to: $output_path"
echo "✓ Images saved to: $(dirname "$output_path")/images/"

✓ 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)

# One-click conversion and publish
npx -y bun "${SKILL_DIR}/scripts/md-to-wechat.ts" \
  "$markdown_file" \
  --theme grace \
  --output ./output

# Then publish via API
npx -y bun "${SKILL_DIR}/scripts/wechat-api.ts" \
  "$html_output" \
  --inline-css \
  --cover "$cover_image"

# Direct publish (automatic CSS inline)
npx -y bun "${SKILL_DIR}/scripts/wechat-api.ts" \
  "$html_file" \
  --title "Article Title" \
  --summary "Abstract" \
  --cover "$cover_image" \
  --inline-css

# Publish from Markdown file
npx -y bun "${SKILL_DIR}/scripts/wechat-browser.ts" \
  --markdown article.md \
  --images ./images/

# Directly specify content and images
npx -y bun "${SKILL_DIR}/scripts/wechat-browser.ts" \
  --title "Title" \
  --content "Content" \
  --image img1.png \
  --image img2.png \
  --submit

WECHAT_APP_ID=your_app_id
WECHAT_APP_SECRET=your_app_secret

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

# wechat-article-maker Configuration

## Default Settings

- Theme: grace
- Publishing Method: api
- Author: Baoyu
- Chrome Profile Path: ~/.chrome-wechat

## Automatic Operations

- Auto Generate Cover: true
- Auto Clean Images: true
- Auto Inline Styles: true

## Creation Preferences

- Default Article Style: Professional Analysis
- Default Article Length: Medium (1500-2500 words)
- Default Citation Method: In-depth Citation and Analysis

// 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