微信公众号文章模板创作

概述

本技能提供微信公众号文章排版模板的交互式创作工具，产出可直接复用的 HTML 模板结构。模板中保留 {{占位符}} 供下游 Article 写作 skill 在生成具体文章时填入内容——本技能不负责填充文章内容。

定位：模板工厂 — 产出排版结构 → 下游技能消费（填充标题、段落等实际内容）。

核心能力：
- 7 套预设行业模板，即选即用
- 10 大类排版要素逐项自定义
- 输出微信公众号兼容的内联样式 HTML

微信公众号技术约束（强制遵守，详见 references/custom-config.md 第 0 节及 references/wechat-html-spec.md）：

绝对禁止（会被移除或失效）：
- <script> 标签、内联事件（onclick 等）
- <style> 标签、外部 CSS 引用
- position: fixed / position: sticky
- <iframe> 标签、Canvas、表单元素（input/button/select）
- CSS 伪元素（::before, ::after）
- <div> 标签（不可靠，会被编辑器过滤或自动转为 <section>，排版容器强制使用 <section>）

强制规范：
- 所有样式必须使用内联 style 属性
- 排版容器唯一合法标签：<section>，任何情况下不使用 <div>
- 表格表头使用 <td style="font-weight:600;"> 替代 <th>
- 图片必须添加 display:block; max-width:100%; height:auto; margin:0 auto;
- 全局容器需包含标准 font-family 和 word-break:break-all
- 简单表格结构，不使用 colspan / rowspan
- 复杂 SVG 可能被过滤，仅使用基本图形（线、圆）
- 不依赖 counter-reset 等 CSS 计数器
- text-transform: uppercase 建议用预转大写文本替代

工作流总览

用户触发技能
    │
    ├── 用户选择模式 ──→ 模式一：行业模板模式
    │                        ├── 展示 7 个行业选项
    │                        ├── 用户选择行业
    │                        ├── 加载对应模板 HTML (assets/templates/)
    │                        ├── 生成带占位符的完整 HTML
    │                        └── 输出模板文件供下游使用
    │
    └── 用户选择模式 ──→ 模式二：完全自定义模式
                             ├── 加载自定义配置参考 (references/custom-config.md)
                             ├── 逐项引导用户选择（10 类排版要素）
                             ├── 根据用户选择组装 HTML
                             ├── 支持回退修改任意要素
                             └── 输出模板文件供下游使用

步骤 1：模式选择（向导入口）

技能触发后，进行以下交互：

首先确认用户需求，逐个询问以下问题：

1. 创作模式选择，展示两个选项：
   - 模式一：行业模板模式（快速套用预设模板）
   - 模式二：完全自定义模式（逐项配置每个排版细节）

2. 如果选择模式一，跳至 步骤 2：行业模板模式。

3. 如果选择模式二，跳至 步骤 3：完全自定义模式。

步骤 2：行业模板模式

2.1 展示行业选项

向用户展示 7 个行业模板选项，每个选项包含：行业名称、风格描述、配色主题、适用场景。

2.2 加载模板

用户选择行业编号后，读取对应的模板文件：assets/templates/{{模板文件名}}。

模板文件是完整的排版结构 HTML，使用 {{占位符}} 标记内容插入点。模板保留所有占位符，由下游 Article 写作 skill 在生成具体文章时填入实际内容。

模板中的占位符示例：

2.3 输出模板

1. 将模板 HTML 原样（保留所有 {{占位符}}）写入 outputs/wechat-template.html
2. 向用户描述模板包含的结构要素（h2 样式、引用块、列表、表格、代码块、底部区域等）
3. 提示用户：下游 Article 写作 skill 在生成文章时会自动填充占位符
4. 询问用户是否满意，是否需要切换行业或进入自定义模式微调

步骤 3：完全自定义模式

3.1 加载配置参考

进入自定义模式后，读取 references/custom-config.md 获取所有配置项的详细 CSS 模板和选项说明。

3.2 逐项引导配置

按照以下顺序，每次引导用户配置 1 个排版要素。每配置完一项，展示当前的效果说明。

配置顺序（10 类要素）：

第 1 项：正文字体及大小

向用户展示 5 种预设：
- a) 现代简约：系统字体，17px，#333，行高 1.8（推荐）
- b) 经典宋体："宋体",SimSun，17px，#3e3e3e，行高 1.85
- c) 优雅黑体："微软雅黑"，17px，#444，行高 1.9
- d) 小巧精致：系统字体，16px，#555，行高 1.85
- e) 大气疏朗："PingFang SC"，18px，#2e2e2e，行高 2.0

> 移动优先：正文默认 17px，确保在 375px 宽度的移动端屏幕上清晰可读。如用户无特殊需求，推荐 a) 现代简约。

支持用户微调字号和行高。

第 2 项：二级标题装饰

向用户展示 7 种装饰样式（可直接描述，无需逐个展示代码）：
- a) 左侧色条：4px 竖线 + 左内边距
- b) 底部横线：2px 底部边框
- c) 背景色块：全宽色块 + 白色文字
- d) 编号前缀：圆形数字标签
- e) 图标装饰：圆点前缀
- f) 全宽色带：渐变左侧色带
- g) 双线装饰：居中标题 + 两侧线条

选定后，询问标题字体大小（默认 20px）和颜色（默认匹配主色）。

第 3 项：段落间隔样式

向用户展示 5 种分隔方式：
- a) 无分隔（仅靠 margin-bottom 留白）
- b) 虚线分隔
- c) 渐变线分隔
- d) 三点装饰分隔
- e) 符号分隔（如 · · ·）

第 4 项：头部样式

向用户展示 3 种头部方案：
- a) 简约型：标题 + 作者日期，无背景
- b) 装饰型：渐变色背景 + 装饰线
- c) 卡片型：主色背景 + 白色标题

询问用户是否需要分类标签、是否需要头部装饰纹路。

第 5 项：底部样式

向用户展示 3 种底部方案：
- a) 标准型：二维码居中 + 引导关注文字
- b) 卡片型：背景色块包裹二维码
- c) 左右布局型：二维码左 + 文字右

询问是否包含免责声明区，如需要则提供免责声明模板（用户可自定义文案）。

第 6 项：划重点样式

向用户展示 4 种强调样式（查看 references/custom-config.md 第 6 节）：
- a) 荧光笔高亮
- b) 加粗变色
- c) 背景色块（整段）
- d) 下划线强调

第 7 项：引用块样式

向用户展示 3 种引用样式：
- a) 经典左色条
- b) 全边框卡片
- c) 引号装饰

第 8 项：代码块样式

向用户展示 4 种代码配色：
- a) VS Code Dark（深色背景）
- b) Monokai（经典深色）
- c) 简约灰（浅色背景）
- d) Dracula（深色紫调）

第 9 项：表格样式

向用户展示 2 种表格风格：
- a) 经典全边框 + 深色表头
- b) 极简水平线 + 无竖边框

第 10 项：列表样式

向用户展示 5 种列表符号：
- a) 实心圆点
- b) 方块
- c) 对勾 ✓
- d) 数字序号（圆形标签）
- e) 中文数字（标签样式）

3.3 配色方案确认

完成 10 项配置后，询问用户主色和辅色的选择：

• 主色：用于标题装饰、重点强调、表格表头、按钮色
• 辅色：用于分隔线、辅助装饰、次要强调
• 背景色：用于重点框背景、引用块背景等

提供几组预设配色供快速选择：

允许用户输入自定义色值。

3.4 组装与预览

1. 根据用户全部配置选择，从 references/custom-config.md 中提取对应的 CSS 模板
2. 将各项模板组装为完整的文章模板 HTML 结构
3. 模板中保留内容占位符 {{文章主标题}}、{{二级标题}}、{{正文段落}} 等
4. 将结果写入 outputs/wechat-template.html
5. 预览 HTML 文件

3.5 用户修改与迭代

输出模板后：
- 询问用户是否满意当前配置
- 如不满意，询问需要修改哪个要素（编号 1-10）
- 支持跳回任意步骤重新配置
- 修改后重新生成并输出
- 循环直到用户满意

输出规范

模板定位

本技能产出的是排版模板，不是成品文章。模板保留 {{占位符}}，由下游 Article 写作 skill 在生成具体文章时填入内容。

模板保留以下内容（使用 {{占位符}} 标记，由下游 skill 填充）：
- 一级标题、副标题、日期、作者等头部信息
- 文章的具体正文段落内容

模板包含以下结构（排版骨架）：
- 头部样式（一级标题 h1 + 装饰 + 作者/日期）
- 二级标题 h2 装饰样式、正文段落 p 样式
- 引用块 blockquote、划重点 span、代码块 pre/code
- 表格 table、列表 ul/ol/li
- 分隔线、底部关注区（二维码 + 公众号名称）
- 各行业独特的配色和视觉风格

HTML 输出要求

1. 所有样式内联，不使用 class 或外部 CSS
2. 不使用 CSS 伪元素（::before, ::after）
3. 所有装饰效果使用实际 HTML 元素（span, section）实现
4. 排版容器只用 <section>，严禁 <div>
5. 图片使用 img 标签，必须添加 display:block;max-width:100%;height:auto;margin:0 auto;
6. 不使用 <script>、<iframe>、<canvas>、表单元素
7. 颜色值使用标准格式：#RRGGBB 或 rgba(r,g,b,a)
8. 字体大小使用 px 单位，正文默认 17px，辅助文字 ≥ 13px
9. 使用 section 对内容区域进行语义分组
10. 输出不包含 <html>、<head>、<body> 外围标签
11. 表格表头使用 <td style="font-weight:600;"> 而非 <th>
12. 全局容器包含标准 font-family 栈、word-break:break-all 和 box-sizing:border-box
13. 不依赖 counter-reset、text-transform:uppercase

移动优先设计原则

微信公众号文章主要在移动端阅读，模板设计必须以移动端为首要考虑：

1. 正文字号 17px：在 375px 宽度的 iPhone 屏幕上保证清晰可读
2. 列表 padding-left ≥ 32px：确保编号/符号在移动端不被压缩或截断
3. 表格字号 ≥ 15px：表格在窄屏上容易挤压，字号不能太小
4. 代码字号 ≥ 14px：保证代码可读性
5. box-sizing: border-box：全局容器添加此属性，防止 padding 撑破宽度
6. 单元格 padding 优化：表格单元格采用 padding:12px 10px（竖向大于横向），适配窄屏
7. 图片 max-width: 100%：确保图片不超出屏幕宽度
8. 避免固定宽度：不使用 width:XXXpx 的固定宽度容器（图片除外）

输出前自检清单

• [ ] 无 <script>、无内联事件、无 <style> 标签
• [ ] 无 <div> 标签，所有容器均为 <section>
• [ ] 图片均含 max-width:100%; display:block; height:auto
• [ ] 正文字号默认 17px，辅助文字 ≥ 13px
• [ ] 列表 padding-left ≥ 32px，字号 ≥ 17px
• [ ] 表格字号 ≥ 15px，代码字号 ≥ 14px
• [ ] 无 position:fixed/sticky
• [ ] 表格使用 <td> 非 <th>，无 colspan/rowspan
• [ ] 全局容器含 font-family、word-break 和 box-sizing:border-box
• [ ] 保留 {{占位符}} 不填充，供下游 skill 使用

文件输出

将最终生成的模板 HTML 写入当前工作目录下的 outputs/wechat-template.html。

目录结构

wechat-template-creator/
├── SKILL.md                              # 本文件 - 技能主文件
├── assets/
│   └── templates/                        # 7 个行业预设模板
│       ├── tech-internet.html            # 科技互联网模板
│       ├── education.html                # 教育培训模板
│       ├── finance.html                  # 金融理财模板
│       ├── healthcare.html               # 健康医疗模板
│       ├── food-lifestyle.html           # 美食生活模板
│       ├── literary-emotional.html       # 文艺情感模板
│       └── business-consulting.html      # 商业咨询模板
├── references/
│   ├── custom-config.md                  # 自定义模式 CSS 配置参考（10 类要素详解）
│   └── wechat-html-spec.md                 # 公众号 HTML 代码规范权威约束（红线、白名单、自检清单）
├── scripts/                              # 预留脚本目录
└── assets/custom-css/                    # 预留自定义 CSS 资源目录

触发词

• "创建公众号模板" / "做公众号排版" / "微信文章模板"
• "设计微信排版" / "公众号文章美化" / "微信排版方案"
• "我要做一个XX行业的公众号模板"
• "帮我设计公众号文章排版"
• "自定义微信排版样式"