Wechat article writer

Skill konglong87/methodology-skills/skills/wechat-article-writer

[方法论]智能体skills；一键生成公众号文章和贴图、一键小红书信息图 && 技术选型、产品策略、战略分析、MVP、DDD、一次目标追踪器、使命必达skills

Install

npx -y skills add konglong87/methodology-skills --skill wechat-article-writer

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

7 stars7 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

微信公众号文章写作和排版助手。输入主题+内容大纲→自动生成结构完整、排版精美的公众号文章（WeChat兼容HTML+行内样式），同时可配套调用infographic-generator生成4主题配图。触发词：'公众号文章','写公众号','公众号排版','微信文章','推文'。

SKILL.md

4.0 KB, as published. Nobody here has run it

微信公众号文章排版器

触发方式

用户说"公众号文章""写公众号""公众号排版""微信文章""推文"时触发
用户提供 .md 文件或写作主题+大纲

工作流

Phase 1 — 解析输入

如果是 .md 文件路径 → parseMarkdown(text) 解析
如果用户口述主题+大纲 → 先生成 Markdown 内容，再解析
自动推断文章主题（tech/product/warm/zen）

Phase 2 — 排版渲染

wechat-render.js 渲染结构化 sections → WeChat 兼容 HTML
所有样式使用行内 style=""，禁止 <style> 块、<script>、外部 CSS
输出：article.html（预览版，含 <img>） + article-plain.html（公众号粘贴版，图片用虚线占位框替换）

Phase 3 — 配图生成（通过 infographic-generator）

buildSectionPageConfigs 为每个 h2 section 生成独立花园页面配置
takeMultiPageScreenshots 通过 Playwright 截图：竖长（750×1334）+ 宽屏（1200×675 16:9）
宽屏图存入 {theme}/wide/ 子目录
buildImageMap 将宽屏图映射到文章各位置

Markdown 解析规则

输入模式	输出类型
`一、标题` `二、标题`	h2
`1. 小节` `2. 小节`	h3
`### text` `## text`	h3 / h2
`- 要点` `· 要点` `1. 步骤`	ul
`> 引用`	blockquote
`强调`	strong（强调色）
`快速回顾` `一句话总结` `划重点`	highlight
`---` `***`	separator
`案例N：` / 带冒号短行(8-50字)	h3
自然段落标题（8-30字、含！，？：、中文/字母开头）	h2

配图映射规则

图片	插入位置
hero	文章标题下方
section-N	第 N 个 h2 之后
cta	文末

默认主题：apple（明亮）。可用：linear/apple/stripe/muji。

输出目录结构

output/
├── article.html             ← 图文混排预览（含真实 <img>）
├── article-plain.html       ← 公众号粘贴版（图片为虚线占位框）
├── 插入指南.md               ← 图片位置对照表
└── screenshots/{theme}/
    ├── {theme}-hero.png     ← 竖长头图
    ├── {theme}-section-N.png ← 竖长章节图
    ├── {theme}-cta.png      ← 竖长尾图
    └── wide/                ← 宽屏版（公众号文章实际引用）
        ├── {theme}-hero-wide.png
        ├── {theme}-section-N-wide.png
        └── {theme}-cta-wide.png

WeChat 约束

所有样式行内 style=""，无 <style> 块、<script>、<iframe>、事件处理器
字体仅系统字体栈
颜色用 6 位 hex 不简写
图片先上传到微信素材库再插入，本地路径粘贴后丢失

文件清单

文件	角色
`wechat-full.js`	一站式编排入口（解析→配图→渲染）
`wechat-md2html.js`	Markdown 解析器
`wechat-render.js`	WeChat HTML 渲染器
`wechat-themes.json`	4 种文章主题
`../infographic-generator/generate-garden-page.js`	配图 HTML 生成（require 依赖）
`../infographic-generator/theme-recipes.json`	配图主题 CSS token