WeChat Official Account Article Creation and Publishing

Language

Match User Language: Respond using the language the user uses. If the user uses Chinese, respond in Chinese; if the user uses English, respond in English.

Directory Structure

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

Agent Execution: Set this SKILL.md directory as

SKILL_DIR

, and run all commands via

npx -y bun

Running Methods

bash

# 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

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

Dependency Installation

Automatic Installation: All dependencies will be automatically installed when the script runs for the first time, no manual operation required.

Runtime Requirements:

✅ Bun (recommended, use via
```
npx -y bun
```
)

Dependency Description (automatically installed):

```
front-matter
```
- Frontmatter parsing
```
highlight.js
```
- Code highlighting
```
marked
```
- Markdown rendering engine
```
reading-time
```
- Reading time calculation
```
juice
```
- CSS inline conversion
```
@napi-rs/canvas
```
- High-performance image generation (optional, for cover images)
```
sharp
```
- Image processing library (built-in, for image cleaning and cover generation)

Dependency Notes:

```
sharp
```
will be automatically installed via
```
scripts/ensure-deps.ts
```
on first run
If optional dependencies are not installed,
```
generate-cover
```
will automatically generate a cover image in SVG format (supported by WeChat)

Feature Overview

This skill provides a complete workflow for WeChat Official Account articles:

Content Creation Mode: Input text content, intelligently understand and generate articles
Link Publishing Mode: Input article link, download, process and publish
Markdown Conversion: Built-in Markdown to HTML conversion with multi-theme support
Image Processing: Automatic download, metadata cleaning, compliance with WeChat specifications
Style Conversion: Automatically convert CSS to inline styles
One-Click Publishing: Supports two methods: API (fast) and browser (visual)

Preference Settings (EXTEND.md)

Use Bash to check for the existence of EXTEND.md (priority order):

bash

# 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"

┌────────────────────────────────────────────────────────────┬───────────────────┐ │ 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

Workflow Selection

Automatically select workflow based on user input:

Input Type	Identification Method	Workflow
Plain text content	No links included	Content creation workflow
Text + reference links	Contains links but main body is text description	Content creation workflow (with link analysis)
Single article link	Only contains URL, or explicitly says "publish this article"	Link publishing workflow
Markdown file path	File path ending with `.md`	Markdown conversion publishing workflow
HTML file path	File path ending with `.html`	Direct publishing workflow

Workflow 1: Content Creation and Publishing

Use this workflow when the user inputs text content (optionally with reference links).

Creation Progress Checklist

Copy this checklist and tick when completed:

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

Step 0: Load Preference Settings

Check and load EXTEND.md settings (see Preference Settings section above).

Step 1: Content Analysis and Link Extraction

Analyze user input:

Extract all links:

bash

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

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

Step 2: Link Content Acquisition and Understanding

If content includes reference links:

Get content of each link:

typescript

// 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.
  `);
}

Organize reference materials:
- Create a summary card for each link
- Mark key reference points
- Record available images or data

Step 3: Ask Creation Preferences

Use AskUserQuestion to ask user preferences:

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

Step 4: Generate Markdown Article

Generate article based on user input, reference materials and preferences:

Title Generation Requirements:

Article title must include at least 3 of the following 5 characteristics:

Feature	Description	Example
Clear Pain Point	Directly address specific troubles of target readers	《Still manually modifying code? This tool boosts your development efficiency by 300%》
Attractive Numbers	Use specific numbers to increase credibility	《I spent 3 months organizing 1000 Python tips》
Result-Oriented	Promise quantifiable benefits or changes	《Master this trick, your code review pass rate increases by 90%》
Emotional Mobilization	Stimulate curiosity, urgency or resonance	《Never write code like this again! Consequences are serious》
Suspense Setup	Create suspense to trigger click desire	《99% of programmers don't know this debugging trick》

Title Formula Reference:

Pain Point + Number + Result: 《Spent 100 hours debugging? These 3 tricks let you locate bugs in seconds》
Number + Suspense: 《7 hidden VS Code features, the 5th one is amazing》
Emotion + Pain Point: 《Don't make this low-level mistake! 5 most common pitfalls for new programmers》

Typesetting Specifications:

Paragraph Structure:

Control each paragraph to 3-5 lines, avoid large blocks of text
Important data in separate paragraphs and bolded
Key conclusions first, details later

Image Placement:

Place cover image below title
Place effect schematic after each step/section
Place summary image or call-to-action image at the end

Code Blocks:

Leave blank lines before and after code blocks
Must use syntax highlighting with language type marked
Add comments to key lines for explanation

Golden Sentence Design:

Core viewpoints in separate paragraphs
Highlight with bold or quote format
Control within 20 characters for easy memorization and dissemination

Article Structure:

markdown

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

Golden Sentence: Core viewpoints in separate paragraphs to enhance memorability

Part 3: Practical Case

Specific steps + effect diagrams, let readers have a sense of substitution.

Summary

Concise and powerful conclusion, 2-3 lines.

Reference Materials:

Article Title


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"

Show to User:

✓ Article generated

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

[Article preview content...]

Please select next operation...

Step 5: User Confirmation and Optimization

Use AskUserQuestion to ask:

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

If user selects modify:

Collect modification suggestions
Update article content
Re-save and display
Ask next step again

If user selects regenerate:

Return to Step 3, re-ask preferences
Use different creation angle

Step 6: Convert to HTML

Use built-in Markdown rendering engine for conversion:

Ask Theme (if not specified in EXTEND.md):

Theme	Description
`default`	Classic Theme - Traditional typesetting, centered title with bottom border, secondary title with white text on colored background
`grace`	Elegant Theme - Text shadow, rounded cards, delicate quote blocks (recommended)
`simple`	Minimalist Theme - Modern minimalist style, asymmetric rounded corners, fresh white space

Execute Conversion:

bash

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

Parse Output JSON:

json

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

Step 7: Prepare Cover Image

Mandatory Cover Image Rules (priority order):

Explicitly Specified: Check Frontmatter fields (
```
featureImage
```
,
```
coverImage
```
,
```
cover
```
,
```
image
```
).
Automatic First Image Fallback: If no explicit cover is specified and the article contains images, must automatically extract and use the first image in the article as cover.
Automatic Generation: Only trigger cover image generation logic when there are no images at all in the article.

If no cover specified and no images in article, ask user:

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

If Auto Generate is selected:

Priority: Multimodal Large Model Generation (if Agent supports):
- If current Agent environment has Text-to-Image capability, generate a high-quality cover image based on article title and abstract.
- Requirements: 2:1 ratio (e.g., 1024x512), modern and concise style, suitable as official account cover.
- Save as:
```
$output_dir/$slug-cover.jpg
```
- Note: If Agent cannot generate images (e.g., no tool support), directly use the fallback solution below.
Fallback Solution (using script generation):

If large model image generation is not available, run the following command to generate a gradient background text cover:

bash

# 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"

Cover Requirements:

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

Step 8: Publish to WeChat

Ask publishing method:

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

Option A: Publish via API

Check API Credentials:

bash

# 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"

If credentials are missing, guide setup:

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)

Create

.env

file:

bash

WECHAT_APP_ID=<user input>
WECHAT_APP_SECRET=<user input>

Execute Publishing:

bash

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

Important: The

--inline-css

parameter converts CSS to inline styles, as WeChat Official Account does not support

<style>

tags.

Option B: Publish via Browser

bash

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

First Run: Chrome browser will open, need to scan QR code to log in to WeChat Official Account.

Option C: Output HTML Only

bash

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"

Step 9: Completion Report

After successful publishing, display summary:

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

Workflow 2: Link Article Publishing

Use this workflow when user inputs a single article link.

Publishing Progress Checklist

Copy this checklist and tick when completed:

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

Step 0: Load Preference Settings

Check and load EXTEND.md settings.

Step 1: Link Verification

Verify link accessibility:

bash

# 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

Step 2: Article Download and Parsing

Use WebFetch to get article content:

typescript

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
`);

Step 3: Image Download and Cleaning

Create Temporary Directory:

bash

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

Download All Images:

bash

# 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

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
}

Step 4: Style Conversion (CSS Inline)

Critical Step: WeChat Official Account does not support

<style>

tags, must convert CSS to inline styles.

Save Original HTML:

bash

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

Execute CSS Inline Conversion:

bash

# 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 Image Paths:

bash

# 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

Step 5: User Confirmation

Display processing results and ask:

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

Use AskUserQuestion:

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

Step 6: Prepare Cover Image

Same as Step 7 in Workflow 1, follow mandatory cover image rules:

Prioritize using
```
featureImage
```
extracted from original article.
If no explicit cover, automatically use the first downloaded image as cover.
Only ask to generate cover when there are no images at all in original article.

Step 7: Execute Publishing

Execute according to user selection:

Option A: Direct Publish (API)

bash

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

API Method Features:

✓ Automatic download of remote images
✓ Automatic cleaning of image metadata (AIGC/Coze markers)
✓ If upload fails (40113), force cleaning and retry
✓ Supported formats: JPEG, PNG, GIF, WebP

Option B: Browser Publish

bash

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

Option C: Output HTML Only

bash

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

Step 8: Completion Report

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

Workflow 3: Markdown File Publishing

Use this workflow when user provides a

.md

file path.

Quick Publish

bash

# 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"

Step-by-Step Explanation

Parse Markdown: Extract frontmatter (title, author, summary, etc.)
Convert to HTML: Apply theme styles
Process Images: Download remote images, replace with local paths
Publish: Same as Step 8 in Workflow 1

Workflow 4: Direct HTML File Publishing

Use this workflow when user provides a

.html

file path.

Quick Publish

bash

# 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

Note: Must use

--inline-css

parameter, otherwise styles will be lost.

Image-Text Publishing (Image-Text Message)

For publishing short content + multiple images (up to 9).

Usage

bash

# 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

Parameter Description

Parameter	Description
`--markdown <path>`	Markdown file
`--title <text>`	Title
`--content <text>`	Content text
`--image <path>`	Image path (can be used multiple times)
`--images <dir>`	Image directory
`--submit`	Auto submit

See also: references/image-text-posting.md

Theme Styles

Three built-in themes (located in

scripts/md/themes/

default - Classic Theme

Traditional typesetting style
Centered title with bottom border decoration
Secondary title: white text on colored background
Suitable for: Formal articles, industry reports

grace - Elegant Theme (Recommended)

Soft text shadow
Rounded card-style quote blocks
Exquisite list styles
Suitable for: Popular science articles, personal blogs

simple - Minimalist Theme

Modern minimalist style
Asymmetric rounded corners
Fresh white space
Suitable for: Tutorials, short articles

Custom Theme

Create a new CSS file in
```
scripts/md/themes/
```
Extend styles based on
```
base.css
```
Apply using
```
--theme <name>
```
parameter

Configuration and Environment

Environment Variables

Load configuration from the following locations (priority from high to low):

Environment variables
```
<cwd>/.awesome-skills/.env
```
```
~/.awesome-skills/.env
```

Required environment variables (API publishing method):

bash

WECHAT_APP_ID=your_app_id
WECHAT_APP_SECRET=your_app_secret

Optional environment variables:

bash

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

EXTEND.md Configuration Example

markdown

# 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

Technical Details

Markdown Rendering Engine

Uses

markdown-it

and extensions (located in

scripts/md/

Basic Rendering:
```
render.ts
```
Extension Plugins:
- ```
alert.ts
```
  - GitHub-style alert blocks
- ```
footnotes.ts
```
  - Footnote support
- ```
katex.ts
```
  - Mathematical formulas
- ```
toc.ts
```
  - Table of contents generation
- ```
infographic.ts
```
  - Infographics
- ```
ruby.ts
```
  - Ruby annotations
- ```
slider.ts
```
  - Sliders
- ```
plantuml.ts
```
  - UML diagrams

Image Processing Algorithm

Metadata Cleaning (

scripts/image-utils.ts

Built-in sharp library provides reliable image processing capabilities:

Intelligent Detection: Scan first 2KB of image, detect non-standard metadata markers like AIGC/Coze/Adobe
Deep Cleaning: Re-encode JPEG using sharp to completely remove all metadata
Automatic Fallback: Manual parsing as fallback when sharp is unavailable
Size Optimization: Automatically resize oversized images (limit 1920x1080) to comply with WeChat specifications

typescript

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

Dual-Engine Cleaning Strategy:

Method	Priority	Description
Sharp Re-encoding	Preferred	Completely re-encode image, 100% metadata removal
Manual Parsing	Fallback	Parse JPEG segment structure, skip non-standard markers

Automatic Retry Logic:

typescript

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);
  }
}

CSS Inline Conversion

Uses

juice

or similar library to convert CSS rules to inline styles:

Before:

html

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

After:

html

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

Why Needed: WeChat Official Account editor does not support

<style>

tags, only accepts inline styles.

Cover Image Generation

Method 1: Multimodal Large Model Generation (Recommended)

If Agent has Text-to-Image capability, prioritize generating customized cover image based on article content. This provides more attractive and relevant visual effects.

Method 2: Pure Node.js (No System Dependencies)

Script:

scripts/generate-cover.ts

bash

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

Features:

✓ No need for ImageMagick
✓ Supports multiple image libraries (@napi-rs/canvas, sharp, SVG)
✓ Automatic line wrapping for long titles
✓ Customizable colors and sizes
✓ Cross-platform (Node.js/Bun)

Method 3: ImageMagick (if installed)

bash

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

Troubleshooting

Problem	Solution
Dependencies not installed	Dependencies will be automatically installed on first run
Cannot find module	Try re-running the command, missing dependencies will be automatically installed
Cover image generated as SVG instead of PNG/JPEG	Optional dependencies not installed, run `cd ${SKILL_DIR}/scripts && npm install @napi-rs/canvas` or accept SVG format
Link inaccessible	Check network connection, try using proxy or VPN
Image upload failed (40113)	Sharp automatically deep cleans metadata and retries, no manual action needed
Styles lost	Ensure `--inline-css` parameter is used
API Error 40001	access_token invalid or expired, check API credentials
API Error 40164 (invalid ip)	Add server IP to whitelist in WeChat Official Account backend:<br/>mp.weixin.qq.com → Development → Basic Configuration → IP Whitelist
Chrome not found	Set environment variable `WECHAT_BROWSER_CHROME_PATH`
Title/summary missing	Manually specify `--title` and `--summary` parameters
Paste failed (browser method)	Check system clipboard permissions
Markdown conversion error	Check Markdown syntax, ensure frontmatter format is correct

Best Practices

1. Content Creation

✓ Provide clear creation intent and target audience
✓ Explain how to use reference links (in-depth analysis vs brief mention)
✓ Preview before publishing to avoid rework
✓ Save Markdown source file for future modifications
✓ Title must include at least 3 features: clear pain point, attractive number, result-oriented, emotional mobilization, suspense setup
✓ Control paragraphs to 3-5 lines, important data in separate bolded paragraphs
✓ Golden sentences in separate paragraphs, control within 20 characters for easy dissemination

2. Link Publishing

✓ Confirm link is accessible (avoid pages requiring login)
✓ Check original image quality (replace blurry images if needed)
✓ Prioritize API method (fast and reliable)
✓ Preview processed HTML before publishing

3. Style and Typesetting

✓ Use
```
default
```
theme for professional articles
✓ Use
```
grace
```
theme for general content (recommended)
✓ Use
```
simple
```
theme for tutorials
✓ Ensure image clarity (recommended 2x resolution)
✓ Use 2:1 ratio for cover image (900x500px)

4. Publishing Workflow

✓ Configure API credentials first time using
✓ Preview in draft box before publishing
✓ Keep source files (markdown/html) for future modifications
✓ Regularly back up published articles

5. Image Processing

✓ Use high-quality original images (avoid secondary compression)
✓ Moderate image size (width 800-1200px)
✓ Control file size within 1MB
✓ If using AIGC images, let script automatically clean

6. Typesetting and Readability

Paragraph Structure:

✓ 3-5 lines per paragraph, avoid visual fatigue
✓ Important data/conclusions in separate bolded paragraphs
✓ Explain complex content in points, avoid堆砌

Image Strategy:

✓ Must place cover image below title
✓ Place effect schematic after key steps
✓ Place summary image or CTA image at article end

Code Display:

✓ Leave blank lines before and after code blocks
✓ Must mark programming language for syntax highlighting
✓ Add comments to key lines for better understanding

Golden Sentence Design:

✓ Refine core viewpoints into golden sentences, separate paragraphs
✓ Highlight with
```
**bold**
```
or
```
> quote
```
format
✓ Control length within 20 characters, catchy

Feature Comparison

Feature	Content Creation	Link Publishing	Markdown Publishing	HTML Publishing	Image-Text Publishing
Input Type	Text + Links	Single Link	.md File	.html File	Short Text + Images
Content Understanding	✓	✓	✗	✗	✗
Article Generation	✓	✗	✗	✗	✗
Markdown Conversion	✓	✗	✓	✗	✓
Theme Styles	✓	Keep Original	✓	Keep Original	✗
Image Cleaning	✓	✓	✓	✓	✗
CSS Inline	✓	✓	✓	✓	✗
Cover Generation	✓	✓	✓	✓	✗
API Publishing	✓	✓	✓	✓	✗
Browser Publishing	✓	✓	✓	✓	✓
Applicable Scenario	Original Content	Reprint/Share	Local Articles	Existing HTML	Image Display

Usage Examples

Example 1: Create New Article (Plain Text)

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

Example 2: Create Article Based on Link

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

Example 3: Directly Publish Link Article

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

Example 4: Markdown File Publishing

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

Example 5: Image-Text Message Publishing

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

Reference Documents

Topic	Document
Image-text publishing parameters, automatic compression	references/image-text-posting.md
Article themes, image processing	references/article-posting.md

Permission Requirements

Network Access: Get link content, download images
File Read/Write: Save articles, images and configurations
Environment Variables: Read WeChat API credentials
External Commands: Call bun/npx to execute TypeScript scripts
Browser (optional): Chrome for browser publishing method

Dependencies and Licenses

Core Dependencies

Bun/Node.js: Run TypeScript scripts (Node.js >= 18.0.0)
npm/bun: Package manager (for installing dependencies)

Automatically Installed Dependencies

Scripts will automatically install the following dependencies via

scripts/ensure-deps.ts

on first run:

Required Packages:

```
front-matter
```
- Frontmatter parsing
```
highlight.js
```
- Code highlighting
```
marked
```
- Markdown rendering engine
```
reading-time
```
- Reading time calculation
```
juice
```
- CSS inline conversion library

Optional Packages (cover image generation):

```
@napi-rs/canvas
```
- High-performance image generation
```
sharp
```
- Image processing library

Runtime Dependencies (Optional)

Chrome/Chromium: Required for browser publishing method
WeChat Official Account API Credentials: Required for API publishing method

Licenses

Markdown rendering engine based on MIT License
WeChat Official Account API usage must comply with WeChat Public Platform Service Agreement

Acknowledgments

This skill integrates the following functions and technologies:

Markdown Rendering: Based on marked and extension plugins
Style Themes: Refer to excellent typesetting practices of WeChat Official Account
Image Processing: JPEG metadata cleaning algorithm
WeChat API: Official documentation and best practices

Changelog

v1.0.3 (2026-02-10)

✓ Optimized cover image rules: Set as mandatory logic. If no cover specified, use first image in article by default; only generate default cover when there are no images in article.

v1.0.2 (2026-02-10)

✓ Optimized image strategy: Prioritize using multimodal large model to generate high-quality cover images
✓ Fixed
```
md-to-wechat.ts
```
script to support
```
--output
```
parameter

v1.0.1 (2026-02-10)

✓ Added 5 title generation principles: clear pain point, attractive number, result-oriented, emotional mobilization, suspense setup
✓ Added article typesetting specifications: paragraph structure, image placement, code blocks, golden sentence design
✓ Optimized content creation workflow, improved article readability and dissemination

v1.0.0 (2026-02-09)

✓ Integrated content creation and link publishing functions
✓ Built-in Markdown to HTML converter
✓ Supports 3 theme styles (default, grace, simple)
✓ Automatic image metadata cleaning
✓ Automatic CSS inline conversion
✓ Cover image generation (no system dependencies)
✓ Two publishing methods: API and browser
✓ Complete workflow and error handling

Skill Version: 1.0.3 Last Updated: 2026-02-10 Author: Integrated from wechat-article-writer and baoyu-post-to-wechat

wechat-article-maker

NPX Install

Tags

SKILL.md Content (Chinese)

WeChat Official Account Article Creation and Publishing

Language

Directory Structure

Running Methods

Dependency Installation

Feature Overview

Preference Settings (EXTEND.md)

Workflow Selection

Workflow 1: Content Creation and Publishing

Creation Progress Checklist

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

Part 3: Practical Case

Summary

Step 5: User Confirmation and Optimization

Step 6: Convert to HTML

Step 7: Prepare Cover Image

Step 8: Publish to WeChat

Option A: Publish via API

Option B: Publish via Browser

Option C: Output HTML Only

Step 9: Completion Report

Workflow 2: Link Article Publishing

Publishing Progress Checklist

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

Option A: Direct Publish (API)

Option B: Browser Publish

Option C: Output HTML Only

Step 8: Completion Report

Workflow 3: Markdown File Publishing

Quick Publish

Step-by-Step Explanation

Workflow 4: Direct HTML File Publishing

Quick Publish

Image-Text Publishing (Image-Text Message)

Usage

Parameter Description

Theme Styles

default - Classic Theme

grace - Elegant Theme (Recommended)

simple - Minimalist Theme

Custom Theme

Configuration and Environment

Environment Variables

EXTEND.md Configuration Example

Technical Details

Markdown Rendering Engine

Image Processing Algorithm

CSS Inline Conversion

Cover Image Generation

Troubleshooting

Best Practices

1. Content Creation

2. Link Publishing

3. Style and Typesetting

4. Publishing Workflow

5. Image Processing

6. Typesetting and Readability

Feature Comparison

Usage Examples

Example 1: Create New Article (Plain Text)

Example 2: Create Article Based on Link

Example 3: Directly Publish Link Article

Example 4: Markdown File Publishing

Example 5: Image-Text Message Publishing

Reference Documents