SKILL.md - 微信公众号运营助手

元数据

name: 微信公众号运营助手
description: >
  一站式完成爆款选题挖掘→拟人化去AI化文稿撰写→精美彩色排版→HTML自动生成+在线预览→授权同步公众号草稿→定时自动发布全流程自动化Skill。适用于公众号运营者、自媒体创作者、企业品牌文案、个人内容创业者实现无人值守公众号日常运营。当用户需要运营微信公众号、撰写公众号文章、生成公众号HTML、同步公众号草稿、配置定时发布时触发此技能。关键词：公众号运营、微信公众号文章、爆款选题、拟人化写作、公众号HTML生成、公众号草稿同步、自动发布。

技能概述

本Skill为微信公众号运营提供全流程自动化解决方案，涵盖从选题策划、内容创作、排版生成到发布管理的完整链路。

核心修复点（2026-04-15）：

封面图自动生成与同步机制
乱码修复与字符白名单校验
微信原生兼容排版（表格布局）
标题/摘要字数自动校验与截取
同步前预览确认机制

核心修复点（2026-04-21）：

generate_html.py 全面重构：100%内联样式，0个 <style> 标签、0个CSS类，彻底解决"同步后排版消失"问题
sync_to_wechat.py body提取逻辑修复：从 <body>...</body> 提取，不再用 html.find("<table") 截取导致结构错乱
乱码根因修复：requests.post(url, json=data) → 手动 json.dumps(ensure_ascii=False).encode("utf-8") 发送
章节块解析修复：CHAPTER ONE 章节标题与内容顺序不再错乱
增加零宽字符清洗，防止隐藏字符污染JSON

核心功能模块

1. 智能爆款选题挖掘

接收用户指定的创作领域、题材方向（文字或语音描述）
分析目标赛道的爆款文章特征：标题逻辑、开篇钩子、行文节奏、内容切入点、用户共鸣点
生成同赛道高潜力原创选题清单
提供选题建议供用户确认或自主选择

2. 拟人化文稿撰写（核心优化：细节强化）

基础写作要求

对标爆款文章的行文风格、叙事结构
强化内容话题性与吸引力，快速抓住读者注意力
全程采用拟人化口语化创作，彻底去除AI写作痕迹
杜绝机械句式、模板化表达，贴合真人原创写作观感
文章篇幅控制在1000-2000字，段落精简，适配移动端阅读

字数约束（强制）

标题：≤ 64 个字符（中文、英文、数字统一计数）
摘要：≤ 120 个字符
自动截取、精简并优化语句，确保不超限且语义完整通顺

细节优化要求（第三修复点）

撰写实操类、工具类文章时：

必须加入对应系统/工具的操作界面、交互流程、功能页面细节描述
详细说明用户与系统的交互步骤、操作路径、界面操作逻辑
清晰拆解每一步操作方式
具象化呈现功能运行界面、操作按钮、交互反馈、页面布局
通过界面细节、操作流程、交互步骤的具象化描写，提升文章细节感、真实感与说服力

3. 封面图自动生成（新增）

强制要求：每次生成文章时，必须同步生成一张适配微信公众号的封面图。

封面图规格

尺寸：900 × 500 像素（比例 9:5，微信公众号推荐尺寸）
格式：PNG 或 JPG
文件大小：≤ 2MB

封面图风格规范

简洁专业：避免过于复杂的设计元素
主题相关：与文章内容高度相关
财务主题：如用户为财务领域，使用专业、稳重的设计风格
文字处理：标题文字清晰可读，避免过小字体
配色建议：
- 主色调：深蓝 #1a1a2e、深灰 #2c3e50
- 强调色：金色 #c9a227、橙色 #f5a623
- 背景色：浅色渐变或纯色

封面图生成流程

根据文章主题和标题，设计封面图概念
使用 image_gen 工具生成封面图
保存封面图到工作目录：cover_image.png
同步时上传封面图到公众号素材库，获取 thumb_media_id

4. 精美彩色排版（微信原生兼容）

微信排版限制（必须遵守）

微信公众号 API 和编辑器对 HTML/CSS 有严格限制：

| 限制项 | 说明 | 处理方案 | |--------|------|----------| | <style> 标签 | 不支持 | 所有样式必须内联（style=""） | | linear-gradient | 不支持 | 使用纯色背景替代 | | rgba() / hsla() | 不支持 | 使用十六进制颜色 #RRGGBB | | box-shadow | 不支持 | 使用边框替代 | | Flexbox / Grid | 不支持 | 使用表格布局 <table> | | 伪元素 ::before/after | 不支持 | 使用实际元素替代 | | <br> 换行 | 慎用 | 标题避免使用，使用单行显示 |

微信原生兼容排版规范

行间距与段间距：

行高：line-height: 1.6~1.8（推荐 1.75）
段落间距：margin-bottom: 16~20px
段前段后留白适中，避免拥挤

标题样式：

主标题：font-size: 22~24px，font-weight: bold，color: #1a1a1a
章节标题：font-size: 18~20px，左侧边框装饰
小标题：font-size: 16px，color: #444

正文样式：

字号：font-size: 16px
颜色：color: #333
对齐：text-align: justify（两端对齐）

重点内容高亮：

高亮框：浅色背景 + 左侧边框
引用框：米白色背景 + 边框
强调文字：加粗 + 主题色

列表样式：

无序列表：使用 • 或自定义符号
有序列表：数字编号清晰
列表项间距：margin-bottom: 8~12px

表格布局模板（推荐）

使用 <table> 布局替代 <div> 布局，确保微信兼容性：

<!-- 章节标题示例 -->
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin: 24px 0 16px 0;">
  <tr>
    <td style="border-bottom: 2px solid #c9a227; padding-bottom: 12px;">
      <div style="font-size: 12px; color: #c9a227; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 2px;">CHAPTER ONE</div>
      <div style="font-size: 18px; font-weight: bold; color: #1a1a1a; margin-bottom: 4px;">章节主标题</div>
      <div style="font-size: 14px; color: #666;">章节副标题</div>
    </td>
  </tr>
</table>

<!-- 引言框示例 -->
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin: 20px 0; background-color: #faf8f5; border: 1px solid #e8e4df;">
  <tr>
    <td style="padding: 16px 20px;">
      <p style="margin: 0; font-style: italic; color: #555; line-height: 1.7;">引言内容...</p>
    </td>
  </tr>
</table>

<!-- 高亮框示例 -->
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin: 20px 0; background-color: #fff9e6; border-left: 4px solid #c9a227;">
  <tr>
    <td style="padding: 16px 20px;">
      <p style="margin: 0; color: #333; line-height: 1.7;">高亮内容...</p>
    </td>
  </tr>
</table>

5. HTML自动生成 + 在线预览

自动生成微信公众号专属适配HTML格式代码
使用 表格布局 确保微信兼容性
在Skill操作界面实现所见即所得的在线预览
预览页面完整还原排版效果、彩色样式、文字内容
使用 scripts/generate_html.py 脚本生成标准HTML
使用 scripts/preview_server.py 启动本地预览服务器

6. 公众号草稿同步

预览确认后主动询问用户是否同步至公众号草稿箱：

如需同步，提示用户提供 AppID、AppSecret
明确告知参数用途与获取路径
对参数进行校验，错误则友好提示重新填写
字符编码处理：使用 ensure_ascii=False 防止中文乱码
封面图同步：自动上传封面图并获取 thumb_media_id
校验通过后自动同步HTML文章至公众号草稿箱
如选择不同步，仅保留本地HTML格式文章和封面图
AppID 与 AppSecret 仅用于接口鉴权，不进行本地存储与泄露

7. 自动发布与定时任务配置

如需自动发布，向用户问询对应发布授权
获取权限后实现文章一键自动发布
支持自定义配置定时任务：每日固定发布时间、每日触发频次、间隔执行时长
定时任务后台静默运行，实现7×24小时无人值守

工作流程

用户指定创作方向
    ↓
智能爆款选题分析（用户提供领域/方向描述）
    ↓
细节化拟人化文稿撰写（自动校验字数）
    ↓
生成封面图（900×500px，主题相关）
    ↓
精美彩色排版（表格布局，微信兼容）
    ↓
HTML自动生成（内联样式，无CSS3属性）
    ↓
Skill端在线预览 ←→ 用户确认
    ↓
询问是否同步公众号草稿
    ↓ [用户选择同步]
AppID/AppSecret鉴权
    ↓
上传封面图获取thumb_media_id
    ↓
字符编码校验（防止乱码）
    ↓
同步至公众号草稿箱
    ↓
配置定时任务（可选）
    ↓
自动发布

写作风格指导

去AI化写作要点

避免使用"首先...其次...最后..."等机械连接词
避免"值得注意的是"、"毋庸置疑"等套话
使用自然的段落过渡，而非明显的逻辑连接词
增加口语化表达、个人化视角
适当使用感叹句、疑问句增加互动感

细节描写示例（工具/实操类文章）

不是只写"点击发布按钮"，而是：
"在文章编辑页面的右下角，找到那个蓝色的「群发」按钮，轻轻一点。系统会弹出确认框，显示文章即将推送的目标范围，再次点击「确认」后，等待3-5秒的加载动画，文章就成功发出去了。"

HTML生成规范

强制约束

样式内联：所有 CSS 必须内联，禁止使用 <style> 标签
表格布局：使用 <table> 替代 <div> 实现复杂布局
纯色颜色：使用 #RRGGBB 格式，禁止使用 rgba()、hsla()、linear-gradient
无阴影：禁止使用 box-shadow，使用边框替代
单行标题：标题避免使用 <br> 换行
字符编码：使用 UTF-8，JSON 序列化时设置 ensure_ascii=False

标准排版结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文章标题</title>
</head>
<body style="margin: 0; padding: 0; background-color: #f5f3f0;">
    <!-- 顶部装饰条 -->
    <table width="100%" cellpadding="0" cellspacing="0" border="0">
        <tr><td height="8" style="background-color: #1a1a2e;"></td></tr>
    </table>
    
    <!-- 主容器 -->
    <table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color: #f5f3f0;">
        <tr>
            <td style="padding: 20px 16px;">
                <!-- 内容卡片 -->
                <table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color: #ffffff; max-width: 600px; margin: 0 auto;">
                    <tr>
                        <td style="padding: 24px 20px;">
                            <!-- 标题区域 -->
                            <table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-bottom: 20px;">
                                <tr>
                                    <td style="border-bottom: 2px solid #c9a227; padding-bottom: 16px;">
                                        <h1 style="margin: 0; font-size: 22px; font-weight: bold; color: #1a1a1a; line-height: 1.4;">文章标题</h1>
                                    </td>
                                </tr>
                            </table>
                            
                            <!-- 正文内容 -->
                            <p style="margin: 0 0 16px 0; font-size: 16px; line-height: 1.75; color: #333;">正文段落...</p>
                            
                            <!-- 章节标题 -->
                            <table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin: 24px 0 16px 0;">
                                <tr>
                                    <td style="border-bottom: 1px solid #e8e4df; padding-bottom: 12px;">
                                        <div style="font-size: 11px; color: #c9a227; margin-bottom: 4px; text-transform: uppercase;">CHAPTER ONE</div>
                                        <div style="font-size: 18px; font-weight: bold; color: #1a1a1a;">章节标题</div>
                                        <div style="font-size: 14px; color: #666; margin-top: 4px;">副标题</div>
                                    </td>
                                </tr>
                            </table>
                            
                            <!-- 引言框 -->
                            <table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin: 20px 0; background-color: #faf8f5; border: 1px solid #e8e4df;">
                                <tr>
                                    <td style="padding: 16px 20px;">
                                        <p style="margin: 0; font-style: italic; color: #555; line-height: 1.7;">引言内容...</p>
                                    </td>
                                </tr>
                            </table>
                            
                            <!-- 高亮框 -->
                            <table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin: 20px 0; background-color: #fff9e6; border-left: 4px solid #c9a227;">
                                <tr>
                                    <td style="padding: 16px 20px;">
                                        <p style="margin: 0; color: #333; line-height: 1.7;">高亮内容...</p>
                                    </td>
                                </tr>
                            </table>
                            
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    
    <!-- 底部装饰条 -->
    <table width="100%" cellpadding="0" cellspacing="0" border="0">
        <tr><td height="8" style="background-color: #1a1a2e;"></td></tr>
    </table>
</body>
</html>

字符编码与乱码修复

乱码修复逻辑

JSON 序列化：使用 json.dumps(data, ensure_ascii=False)
HTTP 请求：发送原始 UTF-8 字节 data.encode('utf-8')
Content-Type：设置 application/json; charset=utf-8
HTML Meta：确保 <meta charset="UTF-8">

字符白名单校验

同步前自动校验并清洗文本：

移除控制字符（\x00-\x1F，保留 \n\r\t）
校验 emoji 兼容性（部分 emoji 在微信显示异常）
确保所有中文字符为 UTF-8 编码

微信公众号API对接

关键接口

获取 Access Token：/cgi-bin/token
新增草稿：/cgi-bin/draft/add
上传素材：/cgi-bin/media/upload
发布：/cgi-bin/message/mass/sendall
定时发布：/cgi-bin/message/schedule/send

封面图上传流程

# 1. 获取 access_token
access_token = get_access_token(appid, appsecret)

# 2. 上传封面图
url = f"https://api.weixin.qq.com/cgi-bin/media/upload?access_token={access_token}&type=image"
with open("cover_image.png", "rb") as f:
    files = {"media": f}
    response = requests.post(url, files=files)
    result = response.json()
    thumb_media_id = result["media_id"]

# 3. 同步草稿时携带 thumb_media_id
articles = [{
    "title": title,
    "content": html_content,
    "thumb_media_id": thumb_media_id,  # 封面图
    "digest": digest,
    "need_open_comment": 1
}]

字数限制

| 字段 | 限制 | 处理方案 | |------|------|----------| | title | ≤ 64 字符 | 超长自动截取，保留核心语义 | | digest | ≤ 120 字符 | 超长自动截取，生成精简摘要 | | content | ≤ 500万字符 | 一般文章不会超限 |

输出交付物

选题清单：Markdown 格式的备选选题列表
文章正文：Markdown 格式的拟人化文章
封面图：cover_image.png（900×500px）
HTML文件：可直接导入微信公众号后台的 HTML 代码（表格布局）
预览链接：本地预览服务器的访问地址

全局约束与规范

所有内容均为原创创作，不抄袭、不搬运
文稿写作始终坚守去AI化原则
接口调用、授权对接全程合规
严格保护用户公众号账号信息安全
HTML 格式必须使用表格布局，确保微信兼容性
每次生成文章必须同步生成封面图
标题/摘要必须自动校验字数，超限自动截取
同步前必须进行字符编码校验，防止乱码

踩坑经验（2026-04-21 更新）

乱码：中文变成 \uXXXX 显示

根因：requests.post(url, json=data) 内部用 json.dumps(ensure_ascii=True)，中文被转成 \uXXXX 字符串存入微信，微信原样显示为乱码。修复：

# ❌ 会乱码
requests.post(url, json=data)

# ✅ 正确做法
payload = json.dumps(data, ensure_ascii=False).encode("utf-8")
requests.post(url, data=payload,
    headers={"Content-Type": "application/json; charset=utf-8"})

排版消失：同步后格式全无

根因：原 generate_html.py 使用 <style> 标签和CSS类名，sync_to_wechat.py 的 clean_html_for_wechat() 把 <style> 标签全部删掉，结果正文变成纯裸文本。修复：HTML生成脚本全面改为内联样式（style="..."），不用 <style> 标签，不用CSS类，微信100%兼容。

内容截断/错位：章节标题顺序乱掉

根因：原脚本用 html.find("<table") + html.rfind("</table>") 截取正文，把外层大 table 容器也截进去，微信过滤掉 width/max-width 后布局全乱。另外用正则匹配 margin:20px 的高亮框和小标题 table 发生冲突，导致"维度一"出现在错误位置。修复：改用 <body>...</body> 提取正文，不依赖table边界；章节标题解析用独立逻辑，不再靠正则匹配table样式。

零宽字符污染JSON

根因：Markdown或复制粘贴内容中可能含零宽字符（\u200b等），导致JSON序列化后被截断或异常。修复：clean_text() 增加 re.sub(r'[\u200b-\u200f\ufeff]', '', text) 清洗。