Embed badge
Show
Style
[](https://versuz.dev/skills/wechat-typesetting-cy)Free SKILL.md scraped from GitHub. Clone the repo or copy the file directly into your Claude Code skills directory.
npx versuz@latest install wechat-typesetting-cygit clone https://github.com/CY-CHENYUE/wechat-typesetting-cy.gitcp -r wechat-typesetting-cy/ ~/.claude/skills/wechat-typesetting-cy/---
name: wechat-typesetting-cy
description: 微信公众号文章多模板排版技能。将纯文本或Markdown转换为精美排版的HTML代码，支持多种视觉风格模板。当用户提到"微信文章"、"公众号文章"、"发公众号"、"帮我排版"、"公众号排版"、"排版成微信格式"、"蓝色模板"、"暗黑模板"、"科技风排版"时触发。
---
# 微信公众号排版
多模板排版系统，根据文章内容自动选择最合适的视觉风格。
## 模板选择
### 可用模板
| 模板 | 视觉风格 | 适合内容 | 关键词 |
|------|----------|----------|--------|
| `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: 0; line-height: 0;`
- [ ] 是否使用了 `linear-gradient`（不允许）
- [ ] 正文色是否为 #F0EFEB
- [ ] 主强调色是否为 #FF4500
详细规范见对应的 `references/{模板名}.md`。
## 扩展新模板
未来添加新模板只需：
1. 添加 `assets/templates/{new-name}.html` — HTML模板
2. 添加 `references/{new-name}.md` — 样式规范
3. 在本文件的"可用模板"表格加一行
4. 在"组件映射"部分加对应的映射表