WeChat Official Account Article Formatting Tool (Claude Execution Guide)
Objective: Convert Markdown articles into elegant HTML optimized for WeChat Official Accounts, enabling one-click publishing.
Core Value: 15x efficiency improvement (30 minutes → 2 minutes), consistent and professional formatting.
New Upgrade: AI Tech Theme designed specifically for AI-related content, supporting rich visual components and custom syntax.
Theme Description
This tool uses the AI Tech Theme (ai-tech-theme), designed specifically for AI-related content:
- Progressive purple-blue-green color scheme (retains original purple, expands to cyan, green and other auxiliary colors)
- Rich visual components (info cards, badges, tables, code blocks, etc.)
- AI domain-specific components (model comparison, Prompt examples, API calls, performance metrics)
- Atom One Dark code highlighting
- Responsive design, mobile-friendly
New Component Usage
Info Cards
Use
syntax to create different types of info boxes:
markdown
::: info
This is an information prompt
:::
::: success
Operation successful! Model training completed.
:::
::: warning
Note: This operation will consume a large number of tokens
:::
::: danger
Error: Invalid API key
:::
::: tech
Technical Tip: Use the --temperature parameter to control output randomness
:::
Badge Tags
Use
syntax to add badges:
markdown
GPT-4 [!NEW] supports multimodal input [!AI]
Claude Opus [!推荐] has the strongest reasoning ability
Supported badge types:
- - Gradient purple-blue badge (new feature)
- - Cyan badge (AI-related)
- - Purple badge (recommended content)
- - Green badge (success status)
- - Yellow badge (warning prompt)
⚡ Execution Process (Strictly Follow)
Step 1: Obtain Input File
Scenario Judgment:
| Scenario | How to Handle |
|---|
| User provides file path | Use the path directly |
| User pastes Markdown content | First use the Write tool to save as a .md file |
| Just used wechat-tech-writer | Automatically find the latest generated .md file (see Integration Guide) |
| User only says "Beautify article" | Ask the user: file path or paste content |
Automatic Detection of Latest Article (Integration with wechat-tech-writer):
bash
# Find the latest .md file in current directory
latest_md=$(ls -t *.md 2>/dev/null | head -1)
if [ -n "$latest_md" ]; then
echo "Detected latest article: $latest_md"
fi
Step 2: Execute Conversion
Standard Conversion Command:
bash
cd /root/.claude/skills/wechat-article-formatter
python3 scripts/markdown_to_html.py \
--input "{file path}" \
--output "{output path}" \
--preview
Parameter Explanation:
- : Markdown file path (required)
- : HTML output path (optional, default is same name .html)
- : Theme selection (only ai-tech is available now, can be omitted)
- : Automatically open preview in browser after conversion (recommended)
Example:
bash
# Most commonly used: convert and preview
python3 scripts/markdown_to_html.py \
--input "Claude_Sonnet_4介绍.md" \
--preview
Important Reminder:
- WeChat Official Account has an independent title input box, so H1 titles are automatically removed from the HTML
- The converted HTML contains a comment:
<!-- ⚠️ Please fill in the title separately in the WeChat Official Account editor -->
Step 3: Quality Check
After conversion, must check:
Use the Read tool to read the generated HTML file (first 50 lines) and check:
| Check Item | How to Verify | Common Issues |
|---|
| Title Style | Check the style attribute of , tags | Style missing → re-convert |
| Code Highlighting | Check if has syntax highlighting styles | No highlighting → check if Markdown specifies language |
| Info Cards | Check if contains etc. | Not converted → check ::: syntax format |
| Badges | Check if contains etc. | Not converted → check [!] syntax format |
| Image Path | Check the path in | Local path → remind user to upload to WeChat |
| Table Format | Check if has inline styles | Format messy → simplify number of table columns |
Quick Check Commands:
bash
# View first 50 lines of HTML file
head -50 output.html
# Check if info cards are included
grep -o 'class="alert alert-[^"]*"' output.html
# Check if badges are included
grep -o 'class="badge [^"]*"' output.html
Step 4: Preview and Feedback
Ask User:
✅ Conversion successful! Generated: {output file path}
Preview effect:
- Opened preview in browser
- Or visit: file://{absolute path}
Please check the effect, are you satisfied?
- Satisfied → Proceed to Step 5 (Publishing Guide)
- Need adjustments → Modify Markdown and re-convert
If User is Unsatisfied:
| Problem | Solution |
|---|
| "Info boxes not displayed" | Check if correct ::: syntax is used |
| "Badges not displayed" | Check if correct [!] syntax is used |
| "Code blocks not highlighted" | Check if Markdown code blocks specify language (```python) |
| "Images not displaying properly" | Reminder: Local images need to be uploaded to WeChat editor |
| "Table too wide" | Suggest simplifying table (≤4 columns) or accepting horizontal scrolling |
Step 5: Publishing Guide
Complete Guide for User:
📋 Steps to Publish to WeChat Official Account:
1. Open WeChat Official Account Editor
2. ✅ Fill in article title in the title bar: {Title extracted from Markdown}
3. Open the generated HTML file: {file path}
4. Press Ctrl+A (select all) → Ctrl+C (copy) in browser
5. Paste into editor content area (Ctrl+V)
6. Handle images:
- Delete local image references that cannot be displayed
- Re-upload images to WeChat editor
7. Final check: Title hierarchy, paragraph spacing, code blocks, info cards, badges
8. Use the "Preview" function in WeChat editor to view on mobile
9. Publish after confirmation
⚠️ Notes:
- Styles are inline, can be pasted directly
- Local images need to be re-uploaded
- WeChat editor may fine-tune some styles after pasting (normal)
- Background colors of info cards and badges will be retained
🔄 Integration with wechat-tech-writer
Scenario: Just used wechat-tech-writer to generate article
Identification Signs:
- User just said "Write an article about XXX"
- There is a newly generated .md file in current directory
Automation Process:
bash
# 1. Find latest article
latest_article=$(ls -t *.md 2>/dev/null | head -1)
# 2. Confirm if it's the target article
echo "Detected latest article: $latest_article"
echo "Do you want to convert this article? (y/n)"
# 3. Automatic conversion (AI Tech Theme)
python3 scripts/markdown_to_html.py \
--input "$latest_article" \
--preview
Seamless Transition Script:
Detected you just generated an article with wechat-tech-writer: {file name}
Now beautifying the format with AI Tech Theme...
❌ Error Handling Table
| Error Message | Cause | What Claude Should Do |
|---|
FileNotFoundError: Input file not found
| Incorrect file path | Ask user for correct file path |
| Incorrect theme name | Prompt that only ai-tech theme is available now |
| Theme file missing | Check if file exists, reinstall |
| Conversion successful but code not highlighted | Markdown did not specify language | Remind user to modify code block (```python) |
| Info boxes not converted | Incorrect ::: syntax format | Check if correct start and end tags are present with correct type (info/success/warning/danger/tech) |
| Badges not converted | Incorrect [!] syntax format | Check if supported badge type is used |
| Images cannot be displayed | Local path or external link invalid | Remind user to re-upload in WeChat editor |
| Table format messy | Table too wide | Suggest simplifying table or converting to image |
📚 Quick Reference
Most Commonly Used Commands
Standard Conversion (Most Commonly Used):
bash
python3 scripts/markdown_to_html.py --input article.md --preview
Specify Output Path:
bash
python3 scripts/markdown_to_html.py --input article.md --output output.html --preview
Quick Answers to Common Questions
Q: Styles lost after pasting to WeChat?
A: Use "Paste" instead of "Paste and Match Style", or clear editor and re-paste.
Q: Code blocks not highlighted?
A: Ensure language is specified in Markdown: ```python (not ```)
Q: Info cards not displayed?
A: Check ::: syntax format, ensure start and end tags are present with correct type (info/success/warning/danger/tech)
Q: Badges not displayed?
A: Check [!] syntax format, ensure supported badge type is used (NEW/AI/推荐/成功/警告)
Q: How to customize colors?
A: Modify CSS variables in
templates/ai-tech-theme.css
(root section)
✅ Execution Checklist (Confirm After Each Execution)
Remember: The core of this skill is automation + professionalism, allowing users to complete what originally took 30 minutes in just 2 minutes!