LiuZheng60/article-format

# article-format-lz · 自媒体文章排版生成技能 [](#风格总览) [](#许可证) ## ✨ 功能特性 - **双平台自动适配**：微信公众号采用全内联 `style` 确保复制不丢格式；今日头条采用纯语义 HTML 适配 ProseMirror schema 白名单。 - **23 种风格**：7 通用 + 8 节日 + 4 季节 + 4 主题，令牌化配色，换色即换风格。 - **全套组件**：微信 23 个组件（标题、列表、引用、提示框、数据卡、对比栏、代码块、表格、进度条、信息卡片、键值列表等）；头条 17 个语义组件。 - **智能风格匹配**：可由用户指定，也可根据节日 / 季节 / 主题关键词或内容类型自动选风格。 - **复制即所见即所得**：所有兼容性规则（如微信 `position:absolute`、`box-shadow` 实测支持）均基于真实编辑器粘贴验证，而非经验臆测。 - **宽表自适应**：宽表 / 长内容可自动改用信息卡片或键值列表展示，避免移动端溢出。 ## 🎯 解决什么痛点 | 痛点 | 本技能的解法 | |------|-------------| | **复制丢失**：编辑器里调好的样式，粘到公众号后台全崩 | 微信全程内联 CSS，头条用语义标签，复制粘贴零损耗 | | **双平台分裂**：微信和头条排版规则完全不同，写两遍 | 一套技能双引擎，根据平台产出不同 HTML | | **配色纠结**：选什么主色、辅色、浅底永远拿不准 | 23 种已校准风格，按内容 / 节日自动匹配 | | **组件拼装慢**：卡片、提示框、进度条手写半天 | 23 组件模板开箱即用，一句话触发 | | **兼容盲猜**：`position:absolute`、`box-shadow` 到底行不行 | 全部基于实测写入，文档与生成逻辑一致 | ## 📦 安装 ### 方式一 · WorkBuddy 推荐（SkillHub 平台） WorkBuddy 用户可直接在 **SkillHub** 技能市场一键安装，无需手动复制目录： - 技能名称：**公众号文章排版 (article-format-lz)** - 市场地址： 打开链接后点击「安装」即可同步到 WorkBuddy，重启 / 刷新后在对话中下达排版指令即可触发。 ### 方式二 · 手动复制到技能目录 将本仓库的 `article-format-lz/` 目录复制到 WorkBuddy 的技能目录之一即可，**无需额外依赖**： **用户级（推荐，跨项目可用）** # 假设仓库已 clone 到本地 cp -r article-format-lz ~/.workbuddy/skills/ **项目级（仅当前项目可见）** cp -r article-format-lz {你的项目}/.workbuddy/skills/ 重启 / 刷新 WorkBuddy 后，在对话中直接下达排版指令即可触发（见下方「快速开始」）。 ### 作为 Agent Skill 安装（OpenCode / Codex / Cursor / Copilot / Gemini CLI 等） 本技能同样兼容遵循 **Agent Skill** 规范的主流 AI 编程代理。使用 `npx skills` 一行命令即可安装： npx skills add LiuZheng60/article-format/article-format-lz 安装后会在对应代理的技能目录中注册本 skill，支持以下代理（及所有遵循 Agent Skill 规范的工具）： - **OpenCode** — `opencode` 命令行代理 - **Codex** — OpenAI Codex CLI - **Cursor** — Cursor IDE - **Copilot** — GitHub Copilot / VS Code - **Gemini CLI** — Google Gemini 命令行 - 其他遵循 Agent Skill 规范的代理（Claude Code、Aider 等） 安装完成后，在对应代理中下达排版指令即可调用本技能。 ## 🚀 快速开始 **示例 1 · 公众号排版（指定风格）** 用「墨韵素雅」风格排版这篇公众号文章：[粘贴文章] **示例 2 · 节日自动匹配** 帮我排一篇关于端午龙舟的公众号推文 # 技能会自动命中「端午·艾绿五彩」风格 **示例 3 · 今日头条** 把这篇科技资讯排成今日头条格式，发头条用 **示例 4 · 双平台** 同一篇内容，分别生成公众号和头条两个版本 **输出**：生成独立的 HTML 文件（微信 `wechat-{主题}.html`、头条 `toutiao-{主题}.html`），打开即可在预览面板中查看，点击「复制」按钮即可粘贴进对应编辑器。 ## 🖼️ 示例演示 仓库附带可直接打开查看的排版示例，覆盖单风格完整组件、全风格横向对比、以及双平台对照： | 示例 | 平台 | 说明 | |------|------|------| | [23 风格排版示例画廊](https://liuzheng60.github.io/article-format/demo/style-examples-gallery.html) | 微信公众号 | 按「通用 7 / 节日 8 / 季节 4 / 主题 4」四类组织，每风格使用同一组示例组件，便于横向对比 23 种风格的配色与特色修饰 | | [微信排版示例 · 磨砂·翡翠凝碧](https://liuzheng60.github.io/article-format/demo/wechat-emerald-jade-demo.html) | 微信公众号 | 单风格完整组件展示，主题「翡翠美学：从玉石到设计的质感语言」，覆盖强调卡 / 提示框 / 表格 / 进度条 / 信息卡片 / 代码块等 18 类组件，含磨砂特色微调（实色浅翡底 + 细描边 + 12px 圆角） | | [头条排版示例 · 翡翠美学](https://liuzheng60.github.io/article-format/demo/toutiao-emerald-jade-demo.html) | 今日头条 | 同一篇内容按头条纯语义 HTML 规则重写，附「美化预览 / 头条实际效果」双视图与一键复制，直观展示与微信版的双平台差异 | ## 🎨 风格总览 ### 通用风格（7） | 风格 | 主色 PRIMARY | 适用场合 | |------|-------------|----------| | **Linear 蓝紫（默认）** | `#5B6FED` | 技术 / AI / 编程 / 通用 | | 墨韵素雅 | `#2C2C2A` | 人文随笔、深度长文 | | 暖阳咖啡 | `#8B5E3C` | 生活方式、美食旅行 | | 青竹墨绿 | `#2D5016` | 健康养生、自然科普 | | 莫兰迪雾 | `#534AB7` | 设计美学、艺术时尚 | | 晨曦珊瑚 | `#D85A30` | 母婴育儿、情感生活 | | 深蓝学术 | `#0C447C` | 科技报告、金融分析 | ### 节日风格（8） | 风格 | 主色 PRIMARY | 触发关键词 / 适用场合 | |------|-------------|----------------------| | 元旦·冰蓝迎新 | `#4A90D9` | 新年、跨年、迎新 | | 春节·中国红金 | `#D4202A` | 过年、除夕、拜年 | | 元宵·暖灯红橙 | `#E8553A` | 汤圆、灯会、花灯 | | 清明·柳绿清雅 | `#5E8B6E` | 踏青、青团、祭祖 | | 端午·艾绿五彩 | `#3A7D5C` | 粽子、龙舟、屈原 | | 中秋·月夜金桂 | `#4A559E` | 月饼、赏月、团圆 | | 五一·活力橙绿 | `#E8822E` | 劳动节、出游、露营 | | 国庆·华诞红金 | `#C0152B` | 十一、华诞、举国同庆 | ### 季节风格（4） | 风格 | 主色 PRIMARY | 适用场合 | |------|-------------|----------| | 春·新芽樱粉 | `#7FB069` | 立春、踏青、樱花 | | 夏·海风晴蓝 | `#0E9DCB` | 立夏、消暑、海风 | | 秋·枫丹麦金 | `#C75B39` | 立秋、丰收、枫叶 | | 冬·雪霁冰蓝 | `#2E6B9E` | 立冬、围炉、雪 | ### 主题风格（4） | 风格 | 主色 PRIMARY | 适用场合 | |------|-------------|----------| | 官方·严谨庄重 | `#1A4F8B` | 政务、公告、政策、权威发布 | | 讣告·肃穆黑白 | `#333333` | 讣告、悼念、缅怀 | | 赛博·克制霓虹 | `#0891B2` | 赛博、极客、黑客、开源 | | 磨砂·翡翠凝碧 | `#3D8B6E` | 磨砂、翡翠、玉石、质感美学 | 完整色板（含辅色 / 浅底 / 文字 / 代码底）见 [`references/design-system.md`](references/design-system.md)。 ## 🧩 排版组件 ### 微信公众号（23 个，全内联 CSS） 主标题区 · 分割线 · 导语引用块 · 二级标题 · 三级标题 · 正文段落 · 行内强调 · 强调卡片 · 无序列表 · 有序列表 · 数据高亮卡片 · 信息提示框 · 对比双栏 · 表格 · 进度条 · 信息卡片 · 引用块 · 键值列表 · 代码块 · 要点回顾 · 底部版权区 等。 ### 今日头条（17 个，纯语义 HTML） 主标题 · 摘要 · 分割线 · 正文 · 加粗强调 · 章节标题 · 子标题 · 核心结论 · 无序列表 · 有序列表 · 引用块 · 数据高亮 · 表格 · 代码块 · 底部签名 · 信息卡片 · 键值列表。 ## ⚙️ 工作原理 两套平台的渲染机制不同，因此生成逻辑完全分开： | 维度 | 微信公众号 | 今日头条 | |------|-----------|----------| | 渲染机制 | 接受内联 CSS | ProseMirror schema 白名单，剥离 inline style | | HTML 形态 | `

` + `style=""` | 纯语义标签（h1/h2/p/ul/blockquote…） | | 层级建立 | 颜色 + 字号 + 装饰竖条 | Unicode 符号（◆★▶【】） | | 代码块 | `

` + `
` + ` `（禁 `

`+white-space） | `
`（schema 保留） |

| 配色 | 23 种可选风格 | 固定头条红 `#F04142` + 灰阶 |

| 兼容要点 | `position:absolute` / `box-shadow` 实测支持；`border-left` 更简洁 | 禁止 inline style 与 `
` 嵌套 |



## 📄 许可证

[MIT License](LICENSE) © 2026 article-format-lz contributors.

可自由使用、修改、分发，包括商业用途，但需保留版权与许可声明。