用 Cursor / Codex / Claude Code Skill 给微信公众号做精细化排版的「方法论 + 配色系统 + 模板引擎 + 可视化选择器」开源包。 Markdown 进去，粘贴级安全色 HTML 出来，复制即发。
三个 Agent Skill + 一个交互式选择页，封装了一套经过微信公众号编辑器浅色 + 深色双模式实测的排版方法论：
| Skill | 职责 |
|---|---|
wxlayout-wechat-paste |
排版引擎：读 Markdown → 自主选模板（T00–T08 / L01–L02）→ 绑配色 → 渲染粘贴级 inline HTML |
wechat-safe-colors |
配色层：9 族低饱和安全色 + 四级字色 N/W/B/C + 高亮 H1/H2，微信深色模式不发脏 |
wxlayout-template-picker |
选择器：帮用户可视化选模板/配色，输出选择摘要交给排版引擎执行 |
另附 template-color-picker.html（仓库根目录，浏览器直接打开）—— 交互式模板配色索引页，左栏勾选模板/色卡，右栏 680px 实时预览，一键生成给 Agent 的指令。
公众号排版有三个老问题：
- Markdown 实时预览型工具——MD 语法表达不了「这段右对齐、这句做金句、这里用对比卡片」
- 固定模板型工具——精细控制几乎为零，模板长什么样文章就长什么样
- AI 直出 HTML——改一个字号要重新生成，CSS 在微信里兼容性是玄学
这套 Skill 走第四条路：内容 ≠ 排版。
- Markdown 只管内容（文字、结构）
- 排版由独立的「LayoutDoc」+ Skill 自主决策（卡片选型、对齐、强调）
- 视觉由 WeChat-Safe 配色 Token 驱动，浅/深双模式都安全
- 输出全内联样式 HTML，复制粘贴到公众号编辑器即可
这套 Skill 基于开放标准，支持主流 AI 编码 Agent：
| Agent | Skill 机制 | 触发方式 | 安装目录 |
|---|---|---|---|
| Cursor | ✅ SKILL.md |
@skill-name + 隐式 |
~/.cursor/skills/ |
| Codex CLI | ✅ SKILL.md + agents/openai.yaml |
$skill-name 或 /skills + 隐式 |
~/.agents/skills/ |
| Claude Code | ✅ SKILL.md |
/skill-name + 隐式 |
~/.claude/skills/ |
| GitHub Copilot | ❌ 无 Skill，走 instructions | 自动读 AGENTS.md |
— |
| Windsurf | ❌ 无 Skill，走 rules | 自动读 AGENTS.md |
— |
- Cursor / Codex / Claude Code 三家共用同一份
SKILL.md，目录不同而已 - 仓库根目录
AGENTS.md遵循 agents.md 开放标准，被上述所有 Agent 自动读取 - Copilot / Windsurf 没有 Skill 机制，靠
AGENTS.md获得核心排版权威规则
# macOS / Linux · 默认装到全部三个 Agent
git clone https://github.com/TanShilongMario/WXLayoutSkill.git wechat-layout-skills
cd wechat-layout-skills
./install.sh # 等价于 --target all
# 或只装到某一个
./install.sh --target cursor
./install.sh --target codex
./install.sh --target claude# Windows PowerShell
git clone https://github.com/TanShilongMario/WXLayoutSkill.git wechat-layout-skills
cd wechat-layout-skills
./install.ps1 # 等价于 -Target all
./install.ps1 -Target cursor脚本会把 skills/* 拷贝到对应 Agent 的全局 Skill 目录。三个 Skill 必须同时安装，wxlayout-wechat-paste 依赖 wechat-safe-colors，wxlayout-template-picker 依赖前两者。
把 skills/wechat-safe-colors 和 skills/wxlayout-wechat-paste 两个目录复制到目标 Agent 的 Skill 目录：
| Agent | 个人级 | 项目级 |
|---|---|---|
| Cursor | ~/.cursor/skills/ |
<project>/.cursor/skills/ |
| Codex CLI | ~/.agents/skills/ |
<project>/.agents/skills/ |
| Claude Code | ~/.claude/skills/ |
<project>/.claude/skills/ |
无需安装脚本。把仓库 clone 到你的项目目录，根目录 AGENTS.md 会被自动读取：
- GitHub Copilot：仓库根目录已有
AGENTS.md；若想强化，可在.github/copilot-instructions.md里加一行@AGENTS.md引用 - Windsurf：在
.windsurf/rules/wechat-layout.md写@AGENTS.md，或直接把AGENTS.md内容复制过去
有两条路径，按需选一条。
第 1 步 · 打开交互式选择页
仓库根目录的 template-color-picker.html 用浏览器直接打开（双击即可，无需服务器）：
# macOS
open template-color-picker.html
# Windows
start template-color-picker.html
# Linux
xdg-open template-color-picker.html第 2 步 · 在页面上选模板和配色
页面分两栏：
- 左栏：12 张模板卡片（T00–T08 / L01 / L02），点卡片可勾选；下方有配色主题、色族、字色方案 N/B/W/C
- 右栏：680px 实时预览，点任意模板卡即看到该模板长什么样
第 3 步 · 生成指令
页面上选好后，点「复制排版说明」按钮，得到一段给 Agent 的指令，例如：
排版 @你的文章.md
模板：T00 + T01×2 + T03 + T08
配色：warm-mixed；T03 四块用 rose/parchment/sage/charcoal
第 4 步 · 交给 Agent 渲染
把这段指令粘到对话里（各 Agent 触发语法见下方「路径 B」），Agent 会按你的选择渲染，不再自主判断。
跳过选择页，直接把文章丢给排版 Skill，Agent 会自己读文章、定模板、选配色。
@wxlayout-wechat-paste 帮我排版这篇 @article.md
$wxlayout-wechat-paste 排版 article.md
或输入 /skills 从列表选。Codex 也会根据 description 隐式自动触发。
/wxlayout-wechat-paste
然后粘贴文章内容。Claude 也会根据任务描述隐式自动触发。
直接在对话里描述需求，Agent 会读 AGENTS.md 里的排版权威规则：
帮我排版这篇文章，输出公众号 HTML：[粘贴 MD]
无论走路径 A 还是 B，Agent 渲染完成后都走这几步：
- Agent 输出 HTML 文件，内含
#copy-target区域和「复制排版内容」按钮 - 浏览器打开该 HTML 文件（双击或
open 文件名.html） - 点「复制排版内容」按钮 → 弹窗提示「已复制」
- 打开微信公众号后台 → 新建图文 → 编辑器里
Ctrl+V/Cmd+V粘贴 - 切换深色模式预览一次（公众号编辑器右上角），确认安全色不发脏
- 满意即可发布
Agent 渲染 → .html 文件 → 浏览器打开 → 点复制 → 粘贴公众号 → 浅/深预览 → 发布
路径 B 里也可以指定模板/配色，覆盖 Agent 的自主判断：
@wxlayout-wechat-paste 排版 @article.md
模板：只要 T01 + T08
配色：全篇 morandi
完全指定时按你的清单执行，不再改模板种类；未提及的槽位仍由 Agent 补全。
# 把 examples/demo.md 喂给 Skill，对照 examples/demo-expected.md 看预期编排| ID | 名称 | 用于 |
|---|---|---|
| T00 | 开篇杂志 | 文首标题+钩子 |
| T01 | 笔记 | 痛点/经历/引述 |
| T02 | 山水理念 | 分层/东方 calm（builtin 青绿） |
| T03 | 对比路径 | A/B/C/D 并列方案 |
| T04 | 架构极客 | Layer/数据流/模块（深壳） |
| T05 | 故事 | 案例/叙事 |
| T06 | 元测试深块 | 清单/自检 |
| T07 | 路线图 | MVP/阶段/计划 |
| T08 | 结语 | 金句/CTA |
| T99 | 页脚灰栏 | 日期/版权 |
| L01/L02 | 长 | 深度长文双卡模式 |
9 族安全色： parchment 羊皮纸 · rose 尘粉 · sage 鼠尾草 · lavender 薰衣草 · warmNeutral 暖灰 · charcoal 炭灰 · morandiBlue 莫兰迪蓝 · bridge 过渡色 · neutral 中性灰。每族含 50→500 明度阶梯。
四级字色：
| 方案 | 场景 | 用法 |
|---|---|---|
| N | 浅底默认 | 暖色系浅卡 |
| B | 浅底·莫兰迪 | 雾蓝感浅卡 |
| W | 深底默认 | 炭灰/暖褐深卡 |
| C | 深底·莫兰迪 | 冷净感深卡 |
高亮色： H1 暖琥珀（暖主题）、H2 板岩青（冷主题，替代高饱和蓝）。
wechat-layout-skills/
├── README.md 本文件
├── AGENTS.md 跨 Agent 通用指引（agents.md 开放标准）
├── template-color-picker.html ★ 交互式模板配色索引页（浏览器直接打开）
├── LICENSE MIT
├── CHANGELOG.md
├── install.sh / install.ps1 多 Agent 一键安装（--target cursor|codex|claude|all）
├── skills/
│ ├── wechat-safe-colors/ 配色层 Skill（自包含）
│ │ ├── SKILL.md
│ │ ├── palette-reference.md
│ │ ├── agents/openai.yaml Codex 专用元数据
│ │ └── data/
│ │ └── wechat-safe-palette.json
│ ├── wxlayout-wechat-paste/ 排版引擎 Skill（自包含）
│ │ ├── SKILL.md
│ │ ├── orchestration.md
│ │ ├── layout-templates.md
│ │ ├── agents/openai.yaml Codex 专用元数据
│ │ └── data/
│ │ ├── wechat-layout-templates.json
│ │ ├── wechat-layout-orchestration.json
│ │ └── wechat-layout-tokens.json
│ └── wxlayout-template-picker/ 模板配色选择器 Skill
│ ├── SKILL.md
│ └── agents/openai.yaml Codex 专用元数据
├── examples/
│ ├── demo.md 短文样例（<1500 字）
│ └── demo-expected.md 预期编排方案 + 验证清单
└── docs/
├── methodology.md 方法论：内容≠排版、自主编排、四层架构
└── why-safe-colors.md 为什么不用高饱和色（实测故事 + P1–P7 原则）
详见 docs/methodology.md，核心三条：
- 内容 ≠ 排版 —— MD 管内容，LayoutDoc 管排版，Theme 管视觉，三层分离各自迭代
- 自主编排 —— Agent 读文章自己决定模板/配色，不反问；卡片是「章节级强调」不是段落装饰
- 微信安全色 —— 低饱和、中明度、浅深双模式实测；不绕过 mp-darkmode
欢迎提 Issue / PR：
- 新模板（新增 TXX 需附浅/深双模式粘贴实测截图）
- 新色族（需附浅色/深色双模式粘贴实测截图，与现有
validated色族同等验证） - 新文章类型 profile（附样例 MD + 渲染结果）
- 标杆文章（多卡组合的上限参考）
MIT — 见 LICENSE