Objective: Convert Markdown articles into beautiful HTML adapted for WeChat Official Account, enabling one-click publishing.
Core Value: 15x efficiency improvement (30 minutes → 2 minutes), consistent and professional formatting.
All-New Upgrade: Uses the AI tech theme, designed specifically for AI-domain content, supporting rich visual components and custom syntax.
Theme Description
This tool uses AI tech theme(ai-tech-theme), designed specifically for AI-domain content:
- Progressive purple-blue-green color scheme (retains the original purple, extended to auxiliary colors such as cyan and green)
- 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 the ::: syntax to create different types of info boxes:
::: info
这是一条信息提示
:::
::: success
操作成功！模型训练完成。
:::
::: warning
注意：此操作会消耗大量 tokens
:::
::: danger
错误：API key 无效
:::
::: tech
技术提示：使用 --temperature 参数控制输出随机性
:::
Badge Tags
Use the [!TEXT] syntax to add badges:
GPT-4 [!NEW] 支持多模态输入 [!AI]
Claude Opus [!推荐] 具有最强推理能力
Supported badge types:
[!NEW]- Gradient purple-blue badge (new feature)[!AI]- Cyan badge (AI-related)[!推荐]- Purple badge (recommended content)[!成功]- Green badge (success status)[!警告]- Yellow badge (warning notice)
⚡ Execution Flow (Strictly Follow)
Step 1: Get the Input File
Scenario Determination：
| Scenario | How to Handle |
|---|---|
| User provides a file path | Use that path directly |
| User pastes Markdown content | First use the Write tool to save it as a .md file |
| Just used wechat-tech-writer | Automatically find the most recently generated .md file (see integration guidance) |
| User only says "beautify the article" | Ask the user: file path or paste content |
Automatically detect the latest article(integration with wechat-tech-writer):
# 查找当前目录最新的 .md 文件
latest_md=$(ls -t *.md 2>/dev/null | head -1)
if [ -n "$latest_md" ]; then
echo "检测到最新文章：$latest_md"
fi
Step 2: Execute Conversion
Standard Conversion Command：
cd /root/.claude/skills/wechat-article-formatter
python3 scripts/markdown_to_html.py \
--input "{文件路径}" \
--output "{输出路径}" \
--preview
Parameter Description：
--input: Markdown file path (required)--output: HTML output path (optional, defaults to the same name with .html)--theme: Theme selection (currently only ai-tech, can be omitted)--preview: Automatically open a preview in the browser after conversion (recommended)
Example：
# 最常用：转换并预览
python3 scripts/markdown_to_html.py \
--input "Claude_Sonnet_4介绍.md" \
--preview
Important Reminder：
- WeChat Official Account has a separate title input box, and the H1 title has already been automatically removed from the HTML
- The converted HTML contains the comment:
<!-- ⚠️ 标题请在微信公众号编辑器中单独填写 -->
Step 3: Quality Check
After conversion is complete, you 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 styles | Check <h2>, <h3> tag's style attribute |
Styles lost → reconvert |
| Code highlighting | Check <pre><code> for syntax highlighting styles |
No highlighting → check whether Markdown specifies a language |
| Info cards | Check whether it contains class="alert alert-info" etc. |
Not converted → check the ::: syntax format |
| Badges | Check whether it contains class="badge badge-new" etc. |
Not converted → check the [!] syntax format |
| Image paths | Check <img src=""> path |
Local path → remind the user to upload to WeChat |
| Table formatting | Check <table> for inline styles |
Formatting messed up → simplify the number of table columns |
Quick check commands：
# 查看 HTML 文件前 50 行
head -50 output.html
# 检查是否包含信息卡片
grep -o 'class="alert alert-[^"]*"' output.html
# 检查是否包含徽章
grep -o 'class="badge [^"]*"' output.html
Step 4: Preview and feedback
Ask the user：
✅ 转换成功！已生成：{输出文件路径}
预览效果：
- 已在浏览器打开预览
- 或访问：file://{绝对路径}
请检查效果，满意吗？
- 满意 → 进入步骤5（发布指导）
- 需要调整 → 可以修改 Markdown 后重新转换
If the user is not satisfied：
| Issue | Solution |
|---|---|
| "Info box not displayed" | Check whether the correct ::: syntax is used |
| "Badge not displayed" | Check whether the correct [!] syntax is used |
| "Code block not highlighted" | Check whether the Markdown code block specifies a language (```python） |
| "Image not displayed correctly" | Reminder: local images need to be uploaded to the WeChat editor |
| "Table too wide" | Suggest simplifying the table (≤4 columns) or accepting horizontal scrolling |
Step 5: Publishing guidance
Complete guidance output to the user：
📋 发布到微信公众号步骤：
1. 打开微信公众号编辑器
2. ✅ 在标题栏填写文章标题：{从 Markdown 提取的标题}
3. 打开生成的 HTML 文件：{文件路径}
4. 在浏览器中按 Ctrl+A（全选）→ Ctrl+C（复制）
5. 粘贴到编辑器正文区（Ctrl+V）
6. 处理图片：
- 删除无法显示的本地图片引用
- 重新上传图片到微信编辑器
7. 最后检查：标题层级、段落间距、代码块、信息卡片、徽章
8. 使用微信编辑器的"预览"功能在手机查看
9. 确认无误后发布
⚠️ 注意事项：
- 样式已内联，可直接粘贴
- 本地图片需重新上传
- 粘贴后微信编辑器可能微调部分样式（正常）
- 信息卡片和徽章的颜色背景会保留
🔄 Integration with wechat-tech-writer
Scenario: Just used wechat-tech-writer to generate an article
Recognition markers：
- The user just said "write an article about XXX"
- There are newly generated .md files in the current directory
Automated workflow：
# 1. 查找最新文章
latest_article=$(ls -t *.md 2>/dev/null | head -1)
# 2. 确认是否是目标文章
echo "检测到最新文章：$latest_article"
echo "是否要转换这篇文章？(y/n)"
# 3. 自动转换（AI 科技主题）
python3 scripts/markdown_to_html.py \
--input "$latest_article" \
--preview
Seamless transition wording：
检测到你刚用 wechat-tech-writer 生成了文章：{文件名}
现在为你美化格式，使用 AI 科技主题...
❌ Error handling table
| Error message | Cause | What Claude should do |
|---|---|---|
FileNotFoundError: Input file not found |
File path error | Ask the user for the correct file path |
Unknown theme: xxx |
Theme name error | Indicate that only the ai-tech theme is currently available |
Theme CSS file not found |
Theme file missing | Check whether the file exists and reinstall |
| Conversion succeeded but code is not highlighted | Markdown does not specify a language | Remind the user to modify the code block (```python） |
| Info box not converted | ::: syntax format error | Check whether the correct start and end markers are present |
| Badge not converted | [!] syntax format error | Check whether a supported badge type is used |
| Image cannot be displayed | Local path or external link is invalid | Remind the user to re-upload in the WeChat editor |
| Table formatting messed up | Table too wide | Suggest simplifying the table or converting it to an image |
📚 Quick Reference
Most Commonly Used Commands
Standard Conversion(most commonly used):
python3 scripts/markdown_to_html.py --input article.md --preview
Specify Output Path：
python3 scripts/markdown_to_html.py --input article.md --output output.html --preview
Quick Answers to Common Questions
Q: Styles are lost after pasting into WeChat? A: Use "Paste" instead of "Paste and Match Style", or clear the editor and paste again.
Q: Code blocks are not highlighted? A: Make sure the language is specified in Markdown:```python（不是 ```）
Q: Info cards are not displayed? A: Check the ::: syntax format, make sure there are opening and closing markers, and the type is correct (info/success/warning/danger/tech)
Q: Badges are not displayed? A: Check the [!] syntax format, make sure a supported badge type is used (NEW/AI/Recommended/Success/Warning)
Q: How to customize colors?
A: Modify templates/ai-tech-theme.css CSS variables (the :root section)
✅ Execution Checklist (confirm after each execution is completed)
- Input file has been obtained (path or content)
- Conversion command has been executed
- Generated HTML file has been checked (title, code, info cards, badges, images)
- User has been asked whether the preview effect is satisfactory
- Complete publishing guidance has been provided
- Possible errors have been handled
Remember: the core of this skill isautomation + specialization, letting users complete 30 minutes of work in 2 minutes!