Wechat Typesetting Cy
Turn WeChat Official Account drafts from plain text or Markdown into paste-ready, styled HTML using blue magazine or dark tech templates.
Install
npx skills add https://github.com/cy-chenyue/wechat-typesetting-cy --skill wechat-typesetting-cyWhat is this skill?
- Two visual templates: blue-minimal (magazine serif) and dark-tech (card-based tech)
- Auto template pick from content signals or explicit user choice, with fallback prompt
- Dual modes: generate styled HTML from source or audit existing HTML for layout fixes
- Component maps for titles, chapter watermarks, quote blocks, timelines, and END markers
- Loads references/{template}.md, assets/templates/{template}.html, and shared guidelines.md
Adoption & trust: 1 installs on skills.sh; 50 GitHub stars; 3/3 security scanners passed (skills.sh audits); trending (+100% hot-view momentum).
Recommended Skills
Web Design Guidelinesvercel-labs/agent-skills
Lark Whiteboardlarksuite/cli
Ui Ux Pro Maxnextlevelbuilder/ui-ux-pro-max-skill
Sleek Design Mobile Appssleekdotdesign/agent-skills
Impeccablepbakaus/impeccable
Design Taste Frontendleonxlnx/taste-skill
Journey fit
Primary fit
Canonical shelf is Grow because the skill outputs finished article HTML for publishing and audience engagement on WeChat, not product code or launch infrastructure. Content subphase matches editorial production—structure mapping, pull quotes, data cards, and chapter styling for long-form posts.
Common Questions / FAQ
Is Wechat Typesetting Cy safe to install?
skills.sh reports 3 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.
SKILL.md
READMESKILL.md - Wechat Typesetting Cy
# 微信公众号排版 多模板排版系统，根据文章内容自动选择最合适的视觉风格。 ## 模板选择 ### 可用模板 | 模板 | 视觉风格 | 适合内容 | 关键词 | |------|----------|----------|--------| | `blue-minimal` | 白底蓝色，衬线字体，杂志感 | 深度分析、思考、随笔、观点文 | 论述、故事、分析、思考 | | `dark-tech` | 黑底橙红，无衬线，卡片化 | 产品介绍、科技报道、数据驱动 | 产品、数据、时间线、竞品 | ### 自动选择逻辑 按以下优先级判断，第一条匹配即选定： 1. **用户指定** → 使用用户指定的模板 2. **有数据、时间线、产品特性、竞品分析、排名** → `dark-tech` 3. **论述、观点、分析、故事、随笔、思考** → `blue-minimal` 4. **不确定** → 问用户："这篇文章更偏向深度分析/思考（蓝色杂志风），还是产品/科技/数据报道（暗黑科技风）？" ## 工作流程 **判断任务类型：** 1. **生成HTML** → 用户给原文，需要输出排版后的HTML代码 2. **检查排版** → 用户给已有HTML，需要检查并给出改进建议 ## 生成HTML流程 ### Step 1: 选模板 根据"自动选择逻辑"确定使用哪个模板。告知用户选择结果。 ### Step 2: 读取模板资源 根据选定模板，读取对应文件： - 样式规范：`references/{模板名}.md` — 获取配色、字体层级、组件列表 - HTML模板：`assets/templates/{模板名}.html` — 获取 HTML 标记模式和内联样式 - 通用规范：`references/guidelines.md` — 通用排版原则 ### Step 3: 分析文章结构 识别以下元素： - 文章标题、副标题 - 章节划分 - 金句/核心观点 - 数据点/关键数字 - 列表/要点 - 引用/来源 - 时间线事件（如有） - 结论/行动号召 ### Step 4: 将内容映射到模板组件 #### blue-minimal 组件映射 | 文章元素 | 模板组件 | 说明 | |----------|----------|------| | 文章标题 | 标签 + 大标题 + 副标题 | 提取关键词做标签，标题可换行 | | 章节开始 | 蓝色分割线 + 水印章节标题 | 水印编号 01/02/03 | | 核心金句 | 蓝色金句区块 | 蓝底白字，主句+副句 | | 关键数据/概念 | 三栏信息卡片 | 3个关键词+说明 | | 目录/要点列表 | 目录卡片 | 灰底两列编号列表 | | 正文段落 | 正文段落区块 | 15px，#1A1A1A，衬线字体 | | 二级要点 | 二级标题 | 16px 蓝色加粗 | | 文章结尾 | END标记 | 居中灰色 | #### dark-tech 组件映射 | 文章元素 | 模板组件 | 说明 | |----------|----------|------| | 文章标题 | 封面Banner | 标签行 + 大字标题 + 副标题 | | 关键数据 | 三列数据栏 | 嵌套table，橙红大数字 | | 章节开始 | 章节头（双色标题） | 空格分隔标签 + 白色/橙红双色标题 | | 功能/能力列表 | 能力卡片 | 绿色左边框，CAPABILITY标签 | | 时间线事件 | 时间线节点 | 绿色=正面，红色=危机 | | 引用/观点 | 引用卡片 | 橙红左边框 + 来源标注 | | 类比/解释 | FEELS LIKE类比卡 | 琥珀标签头 + "所以呢?"框 | | 排名/竞品 | 排名列表 | 大号彩色数字 + 描述 | | 事件/案例 | 事件卡片 | 彩色左边框 | | 结论 | 结尾递进区 | 文字透明度渐增，末句强调色 | ### Step 5: 生成HTML 严格按照模板HTML中的内联样式生成。关键规则： **通用规则：** - 所有样式必须内联（不用 `<style>` 标签） - 不用 class/id 选择器 - 不用 JavaScript **blue-minimal 专属规则：** - 字体族：`'Times New Roman', serif` - 主题色：`#0044FF` - 正文色：`#1A1A1A` - 章节间用蓝色分割线分隔 - 强调用蓝色加粗 `color: #0044FF; font-weight: bold` 或蓝色下划线 **dark-tech 专属规则：** - 字体族：`-apple-system, 'Helvetica Neue', sans-serif` - 主色：`#FF4500`（OrangeRed） - 正文色：`#F0EFEB` - **必须用 `<table>` 做主布局**，每章节一个 `<tr><td>` - **所有 `<td>` 加 `border: none`** - **背景色用实色 hex，不用 `rgba()`**（文字颜色的 rgba 可以） - **不用 `display: flex` / `gap`**，用嵌套 table 代替 - **不用 `linear-gradient`** - 章节间用分隔带 `<tr><td>` 分隔（`#0d0d0d`，16px高） - 分隔带加 `font-size: 0; line-height: 0;` ### Step 6: 输出并预览 1. 将排版后的内容写入 HTML 文件，保存到 `output/` 目录 2. 文件名用文章主题的 slug（如 `output/ai-agent-analysis.html`） 3. 用 `open` 命令在浏览器中打开预览 4. 告知用户：在浏览器中选中内容区域 → 复制 → 粘贴到公众号编辑器 HTML文件外壳模板（根据模板选择背景色）： ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>微信公众号排版预览</title> <style> body { margin: 0; padding: 40px; background: {{背景色}}; } .preview-wrapper { max-width: 677px; margin: 0 auto; background: {{内容背景色}}; box-shadow: 0 2px 20px rgba(0,0,0,0.08); } .tip { background: #fff3cd; padding: 12px; margin-bottom: 20px; border-radius: 4px; font-size: 14px; user-select: none; -webkit-user-select: none; max-width: 677px; margin: 0 auto 20px; } </style> </head> <body> <div class="tip">选中下方内容 → 复制 → 粘贴到公众号编辑器</div> <div class="preview-wrapper"> <!-- 排版后的内容放这里 --> </div> </body> </html> ``` 背景色参数： - `blue-minimal`：`background: #f5f5f5`，`内容背景色: #fff` - `dark-tech`：`background: #222`，`内容背景色: #080808` ## 检查排版流程 根据文章使用的模板风格，对照相应规范检查： ### 通用检查项 - [ ] 所有样式是否内联 - [ ] 段落是否过长（>4行） - [ ] 是否使用了不支持的CSS（position、外部样式表等） ### blue-minimal 检查项 - [ ] 字号是否为15px正文 / 32px大标题 / 22px章节标题 - [ ] 行间距是否为1.75倍 - [ ] 正文颜色是否为 #1A1A1A - [ ] 字体是否为 Times New Roman, serif - [ ] 主题色是否统一为 #0044FF - [ ] 章节间是否有蓝色分割线 ### dark-tech 检查项 - [ ] 主布局是否使用 `<table>`（不用 flex） - [ ] 所有 `<td>` 是否有 `border: none` - [ ] 背景色是否全部为实色 hex（不用 rgba 背景） - [ ] 章节分隔带是否有 `font-size: