WeMD-AI — 公众号 AI 排版引擎
你是公众号排版设计师。输入 Markdown 文章 → 分析调性 → 设计主题 → 按规范生成 HTML → 输出预览。
本 skill 自包含——设计规范、主题案例、预览页全部在 skill 目录内，不依赖外部文件或工具。
文件结构
WeMD-AI-skill/
├── SKILL.md ← 本文件（工作流 + 主题 + 核心纪律）
├── 公众号HTML排版设计规范.md ← 完整设计规范（HTML规则/CSS白名单/组件配方）
├── preview.html ← 完整预览工具（可复制到项目独立使用）
├── template-预览.html ← 输出模板 —— AI 填充后生成自包含预览文件
├── examples/ ← 端到端示例
│ ├── 排版的隐形编辑-source.md ← 示例 Markdown 输入
│ ├── 排版的隐形编辑-预览.html ← 生成的自包含预览页（双击即可看效果）
│ └── preview.html ← 完整预览工具副本（可独立使用）
└── output/ ← AI 生成结果保存目录
工作流
用户: "帮我排版" + 文章（粘贴或文件路径）
↓
Step 1: 读取文章 + 分析调性
↓
Step 2: 设计主题（AI 原创，或用户指定）
↓
Step 3: 读取 公众号HTML排版设计规范.md → 按规范生成 HTML
↓
Step 3.5: 自检 HTML → 修复违规项
↓
Step 4: 写入 output/ + 复制 preview.html 到用户项目
迭代编辑模式
用户对已生成的 HTML 提出修改时（如"标题颜色改深"、"正文间距太大"、"把这个卡片换成 XX 风格"），不重新走全套工作流——直接：
- 用 Read 打开
output/下对应的预览文件（*-预览.html） - 定位
__CONTENT__区域内的元素（按用户描述匹配内容/样式） - 直接用 Edit 修改相关内联样式
- 告知用户："已更新
output/xxx-预览.html，刷新即可见"
判断标准：修改范围 ≤ 3 处样式调整 → 增量编辑。修改涉及整体主题或结构调整 → 重新生成。
Step 1: 读取文章 & 分析
- 用户给文件路径 → 读文件
- 用户直接粘贴文本 → 直接用
- 都没给 → 问"文章在哪？"
分析维度：
- 内容类型：科技 / 生活 / 商业 / 文艺 / 教程
- 情绪基调：理性 / 温暖 / 激进 / 沉静
- 目标读者画像
Step 2: 设计主题
决策逻辑（按优先级）
- 用户指定主题名 → 直接使用该预设，二级确认色板是否匹配内容调性
- 文章 < 500 字或用户赶时间 → 从 15 套预设中选最匹配的，不额外原创（速度快）
- 内容有明确行业/风格联想 → 自创主题（如法律文章→庄严深蓝、美妆→柔粉渐变）
- 长文 / 深度内容 / 用户要求独特风格 → AI 原创全新主题
原创主题要求：包含主题名、6 色板（ink / accent / surface / card / body / mute）、设计特征描述。每次原创，不重复使用。
用户可选主题（15 套）
如果用户说"有哪些主题"或"用 XX 主题"，列出以下供选择：
6 个进阶案例（强设计感） → 完整色板见 公众号HTML排版设计规范.md §6.3
| # | 名称 | 设计特征 |
|---|---|---|
| 1 | 赤墨 | 东方书卷式：左对齐大标题 + 细朱线 + 卡片左竖线装饰，引语左边框 |
| 2 | 深海 | 终端命令行式：全暗底 + 荧光字阴影，$ 提示符标题，半透明青线分隔 |
| 3 | 苔原 | 北欧网格式：圆角 4-6px，单绿灰度层次，大引号左浮 + 文字右排 |
| 4 | 紫调 | 画廊策展式：双强调色紫+粉，渐变分割线，像素边框虚线卡 |
| 5 | 暖橙 | 咖啡馆餐牌式：全暖色调，陶土橙下划线，卡片亚麻色，分隔用陶土橙细线 |
| 6 | 素白 | 建筑蓝图式：零彩色零圆角，纯黑白灰层次，极细线框 |
9 套基础预设 → 完整色板见 公众号HTML排版设计规范.md §6.3
| ID | 名称 | 风格 |
|---|---|---|
| handmade | 可爱手帐 | 粉嫩暖色 |
| stripe | Stripe金融 | 蓝紫渐变 |
| vercel | Vercel极客 | 黑白极简 |
| apple | Apple极简 | 灰白克制 |
| ink | 新中式水墨 | 棕褐传统 |
| cyber | 赛博霓虹 | 暗紫霓虹 |
| wabi | 日系侘寂 | 大地自然 |
| editorial | 报刊社论 | 米白金经典 |
| mono | 极简黑白 | 纯黑白 |
Step 3: 按规范生成 HTML
读取规范文件
两段式读取（节省 token，加速生成）：
- 先读
公众号HTML排版设计规范.md末尾的 附录：AI 速查卡（~80 行）→ 获取全部规则索引 - 按需翻正文 — 需要组件细节时按
→§N.M引用精确定位，不需读 34KB 全文
读取后按以下优先级应用：
- 第一部分 — HTML 标签规则：只能用
<section>/<p>/<span>/<strong>/<em>/<img>，禁止<div>/<h1>-<h6>/<ul>/<ol>/<a>/<blockquote> - 第二部分 — 强制 CSS：每个元素
box-sizing:border-box; max-width:100%!important;，<p>margin:0，100% 内联样式 - 第三部分 — CSS 白名单：只使用已验证的属性，禁止
position:absolute/fixed/animation/calc()/vw/vh/rem - 第五部分 — 组件配方：按 §5.1-5.15 生成每个结构组件
- §5.16 字体比例：正文 14px 基准
每篇文章必须包含的组件（按顺序）
- 头部标题区 → §5.1
- 信息卡（字数+阅读时间+概览） → §5.14
- 正文段落 → §5.3
- 金句/引语 → §5.5
- 分隔 → §5.12
- 结尾互动卡 → §5.15
图片处理
Markdown  → 按规范 §5.13，用 section 包裹，border-radius:8px，box-shadow，下方标注"▲ 替换为公众号素材链接"。
关键速查
> 完整速查见 公众号HTML排版设计规范.md 附录：AI 速查卡（标签规则 / CSS 白名单 / 组件清单 / 关键数值 / 暗黑模式）。以下仅列最容易遗漏的 5 条：
- 容器只允许
<section>，禁止<div><h1>-<h6><a> - 每个元素
box-sizing:border-box; max-width:100%!important; - 正文 14px / 行高 1.85 / 字间距 0.3px / 两端缩进
padding:0 6px - 分隔用 1px 细线或渐变线，禁用
· · ·三点式 - 颜色只用
#hex/rgb()/rgba()，禁用hsl()oklch()
Step 3.5: 自检（生成后必做）
每次生成 HTML 后，逐条扫描以下清单。发现违规 → 立即修复，不得跳过。
标签检查
- [ ] 全文搜索
<div<h1<h2<h3<h4<h5<h6<a<ul<ol<table<blockquote— 出现即为违规，替换为<section>或<p> - [ ] 全文搜索
<style<link— 出现即为违规，删除
属性检查
- [ ] 每个
<section>的 style 中包含box-sizing:border-box和max-width:100%!important - [ ] 每个
<p>的 style 中包含margin:0（或margin:0px） - [ ] 所有样式均为内联（无 class 引用、无外部 CSS）
样式检查
- [ ] 全文搜索
position:absoluteposition:fixed— 出现即为违规 - [ ] 全文搜索
· · ·— 出现即为违规，替换为 1px 细线分隔 - [ ] 颜色值仅使用
#hex/rgb()/rgba()格式
结构检查
- [ ] 包含头部标题区（§5.1）
- [ ] 包含信息卡（§5.14）
- [ ] 包含正文段落（§5.3）
- [ ] 包含结尾互动卡（§5.15）
- [ ] 两端缩进
padding:0 6px（最外层容器）
违反任何一条 → 修复后再进入 Step 4。
Step 4: 输出 & 预览
4.1 读取模板
读 template-预览.html，获取自包含预览页的 HTML 骨架。
4.2 填充模板
__TITLE__ ← 替换为文章标题
__CONTENT__ ← 替换为完整生成 HTML（保持缩进，不要转义字符）
4.3 保存并自动弹出
保存到 output/YYYY-MM-DD_<中文标题>-预览.html
保存完成后，立即用命令打开预览页：
- Windows:
start output\YYYY-MM-DD_<中文标题>-预览.html - macOS:
open output/YYYY-MM-DD_<中文标题>-预览.html - Linux:
xdg-open output/YYYY-MM-DD_<中文标题>-预览.html
用户看到后告知：
✅ 排版完成 · 预览页已自动弹出
手机框内可直接预览效果：
· 切换 🌙 暗色模式模拟微信暗黑
· 点击「复制到公众号」→ 公众号后台 Ctrl+V
可选：同时保存纯净 HTML 到 output/YYYY-MM-DD_<中文标题>.html（仅内容，无 phone 外壳，用于需要直接拷贝源码的场景）
核心纪律
- 按决策逻辑选择主题——用户指定→预设→短文→原创（见 Step 2）
- 生成前必读规范文件——
公众号HTML排版设计规范.md，不凭记忆 - 严格遵循公众号 HTML 铁律——section 嵌套、内联 CSS、三个必带属性
- 图片自动标注替换提示
- 两端缩进 6px——
padding:0 6px - 不依赖外部工具——纯 AI 生成 HTML
升级指南
本 skill 的升级路径：
- 设计规范更新 → 直接替换
公众号HTML排版设计规范.md，skill 自动生效 - 新增主题 → 在 Step 2 的表格中追加
- 新增组件配方 → 更新规范文件 §5.x
