wechat-layout

name	wechat-layout
command	wechat-layout
description	全能型微信公众号 AI 排版工具。将任意文本/Markdown 转换为公众号编辑器可直接粘贴的内联样式 HTML。三维组合：8 套配色主题（清新绿/科技蓝/商务黑金/活力橙/优雅紫/中国红/少女粉/极简黑白）× 10 种设计风格（柔和卡片/新粗野主义/蒸汽波/瑞士国际主义/国风雅致/复古终端/孟菲斯/杂志编辑/渐变玻璃感/官网落地页）× 6 种文章类型预设，24+ 组件。
trigger	当用户提到"公众号排版"、"文章排版"、"转成公众号格式"、"美化文章样式"、"排版这篇文章"、"公众号格式"、"微信排版"时触发

微信公众号全能排版

将用户提供的任何文档内容，转换为统一、美观、可直接粘贴进公众号编辑器的 HTML。

工作流程

排版由三个正交维度组合而成：主题（配色，themes.md）× 风格（形态语言，styles.md）× 预设（文章结构，presets.md）。

1. 读取内容：接收用户的文本/Markdown/文件。
2. 选主题与风格：
   • 用户指定了 → 直接使用。
   • 未指定 → 根据内容气质推荐（见下方两张表），并用一句话告知所选组合，不要停下来等确认。风格默认"柔和卡片风"。
3. 选文章类型预设（决定组件搭配倾向，见 references/presets.md）。
4. 读取 references/components.md 拿到组件模板，将 {{令牌}} 替换为 references/themes.md 所选色板值；若风格非默认，再按 references/styles.md 的全局覆盖规则修改形态，签名组件直接替换对应基础组件。
5. 按"内容映射规则"逐段转换，输出完整 HTML。
6. 自检：对照"硬性约束"检查，确认原文无删减。

主题推荐

内容气质	主题
健康、生活方式、环保、成长干货	清新绿
AI、科技、互联网、数码测评	科技蓝
商业分析、财经、行业报告	商务黑金
美食、旅行、活动预告、促销	活力橙
心理、文艺、女性成长、知识付费	优雅紫
节日、国潮、正能量、大事件	中国红
情感、美妆、母婴、小红书风	少女粉
深度长文、人物特稿、极简审美	极简黑白

风格推荐

内容气质	风格
通用、稳妥不出错	柔和卡片风（默认）
潮流文化、设计圈、犀利观点	新粗野主义
音乐、亚文化、复古创意	蒸汽波
深度长文、设计评论、理性克制	瑞士国际主义
传统文化、节气节日、诗文茶酒	国风雅致
程序员、AI 技术、极客测评	复古终端
亲子、活动、轻松俏皮	孟菲斯
人物特稿、生活方式、品牌软文	杂志编辑风
AI 产品、SaaS、科技发布稿	渐变玻璃感
产品发布、工具评测、年度盘点、大厂官网感	官网落地页（色带分区范式）

用户拿参考文章/截图要求"做成这种风格"时，按 references/style-lab.md 的五层解剖流程解析并生成新风格，禁止照搬像素值。

蒸汽波、国风雅致、复古终端、孟菲斯自带专属色板，选中后忽略主题维度；组合禁忌见 styles.md 末尾的组合建议表。

内容映射规则

原文特征	使用组件
文章开头第一段	首字下沉段落（若已用导语卡，则首段为普通段落，二者不同用）
开篇导语/摘要	导语卡
大章节切换	编号分隔符（01、02…）或一级标题区块，全篇二选一：章节无标题文字用编号分隔符，有标题文字用一级标题区块，两者禁止相邻连用
一级标题	一级标题区块（自动补英文副标题，如 WHY IT MATTERS）
二级标题	二级标题（左竖线）
三级标题	三级标题（▍加粗行）
核心结论、关键概念（每段最多 2 处）	高亮标注（色底）
术语、数据、动作词（每个长段至少 1 处）	粗体关键词（无底色）
金句、核心观点	金句卡或居中强调
核心原理、要点归纳	信息卡片
步骤、流程	步骤时间线
并列要点	列表卡片
两方对比	对比双栏
关键数字	数字亮点
引用他人/文献	引用块
问答内容	FAQ 组件
提示/警告	提示条
代码	代码块
图片位置	标准图片组件（保留原 URL；无图则输出 <!-- 此处配图：xxx --> 占位注释）
结尾总结	重点卡片
文末	引导关注卡（用户未提供公众号名时用"点亮【在看】"通用文案）

硬性约束（公众号编辑器兼容）

• 所有样式必须内联 style，禁止 <style> 标签、class 选择器（rich_pages wxw-img 等公众号保留 class 除外）。
• 所有直接包裹文字的最内层 <span> 必须写成 <span leaf="">（组件模板中简写为 <span>，生成 HTML 时统一补上 leaf=""），用于绕过公众号编辑器的样式过滤，防止粘贴后样式被剥离。
• 禁止 position、transform、float（首字下沉的 float 除外，为已验证可用写法）、id、JS、外部字体。
• 布局只用 section + p + span，双栏用 display: inline-block 或 table。
• 图片必须带 class="rich_pages wxw-img" 和 max-width:100% !important。
• 字号范围 11px–36px；正文 15px、行高 2.0–2.1、letter-spacing: 0.3px、两端对齐。
• 外层容器：<section> 包裹全文，背景 #ffffff，内边距 32px 20px，字体栈 -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', sans-serif。
• 代码末尾追加标准结尾：

<p style="display: none;"><br/></p>
<section class="_135editor"><mp-style-type data-value="3"></mp-style-type></section>
<p><br/></p>

视觉层次规范（保证层次分明，必须执行）

排版的第一目标是一眼能看出结构。逐条自检：

1. 字号阶梯拉开差距：一级标题 22px > 二级标题 17px > 正文 15px > 辅助/图注/来源 13px。另设强调层 18–20px，仅限居中强调、重点卡片、金句卡（18px）、数字亮点使用，且必须居中或置于卡片内，避免与标题混淆。相邻层级差 ≥ 2px，同一层级全篇统一，禁止新增其他字号（徽章、胶囊标签等装饰性文字不计入阶梯）。
2. 视觉重量阶梯：一级标题 = 卡片 + 粗体 + 大字；二级标题 = 左竖线 + 粗体，不用卡片；三级标题 = ▍前缀加粗行，无线无卡；正文无任何装饰。相邻两级标题绝不能长得像同一种东西。
3. 间距节奏（亲密性原则）：标题上方间距必须 ≥ 下方间距的 2 倍（一级 56px/24px，二级 44px/18px），让标题明确"属于"下文而不是漂在中间；段落间 20px；大章节切换（编号分隔符）前后 ≥ 48px。
4. 颜色三级制：标题色（最深）、正文主色、次要文字（明显更浅更小），全篇只用这三级灰度 + 主题色，不得混用其他文字颜色。
5. 扫读优先，双层标注（必须执行）：读者只看"标题 + 高亮 + 粗体"就应获得全文核心信息，这是排版合格线。
   • 高亮标注（色底）＝核心结论、关键概念：每段最多 2 处，全文覆盖字数 5–10%。
   • 粗体关键词（无底色、高亮文字色）＝次级重点、术语、数据、动作词：每个超过 60 字的段落至少标 1 处，长段 2–3 处，让每一屏都有视觉抓手。
   • 输出前做扫读测试：遮住普通文字只看标注，能否复述文章主线？不能则回去补标。
   • 金句卡/重点卡片一屏（约 500 字）最多一个，避免大组件泛滥。
6. 长段必拆：单个段落超过 120 字（约 4 行）必须拆成两段，或转为列表卡片/步骤时间线；连续 3 段以上纯文字，中间必须插入一个视觉组件（卡片、金句、数字亮点或图片位）。
7. 卡片留给内容，不留给标题：信息卡、列表卡等卡片组件只承载"要点归纳"类内容，连续出现必须被普通段落隔开，避免满屏卡片导致层次糊成一片。
8. 输出前通读一遍结构：折叠掉正文只看标题和卡片，应能还原文章大纲；还原不出来就是层次失败，须返工。

保留原则

• 不删减任何文字内容，不改写语义（用户明确要求润色除外）。
• 保持原文逻辑顺序与段落分隔。
• 大组件（金句卡/重点卡片）宁缺毋滥，连续两个卡片之间至少隔一个普通段落；但行内标注（高亮 + 粗体）是下限要求而非上限，按"扫读优先"规则执行，不得因克制而漏标。

输出要求

1. 直接输出完整 HTML 代码块，从外层 <section> 到标准结尾。
2. 若用户要求保存文件，写入 排版-{标题}-{主题}-{风格}.html。
3. 输出后用 1-2 句中文说明所用主题、风格与组件，并提示可换主题或风格重排。