菜单
微信公众号智能排版技能。没有固定模板——读懂文章后为每一篇现场设计排版：版面结构、阅读节奏、风格气质、配色字体全部从内容推导，每篇都不同，并给出备选风格参考；用微信安全实现手法生成全内联 HTML，以内容完整性、兼容、输出契约和真实渲染四道发布门降低粘贴后崩坏风险；输出带"一键复制"按钮的预览页。当用户提到"微信文章"、"公众号文章"、"发公众号"、"帮我排版"、"公众号排版"、"微信排版"、"排版成微信格式"、"公众号 HTML"，或给出一篇文章/Markdown 要发布到公众号时触发；也用于检查已有公众号 HTML 的兼容性与排版质量、给文章换风格重排。
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/CY-CHENYUE/wechat-typesetting-cy --skill wechat-typesetting-cy命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
正在显示 SKILL.md
基于 SOC 职业分类
| name | wechat-typesetting-cy |
| description | 微信公众号智能排版技能。没有固定模板——读懂文章后为每一篇现场设计排版：版面结构、阅读节奏、风格气质、配色字体全部从内容推导，每篇都不同，并给出备选风格参考；用微信安全实现手法生成全内联 HTML，以内容完整性、兼容、输出契约和真实渲染四道发布门降低粘贴后崩坏风险；输出带"一键复制"按钮的预览页。当用户提到"微信文章"、"公众号文章"、"发公众号"、"帮我排版"、"公众号排版"、"微信排版"、"排版成微信格式"、"公众号 HTML"，或给出一篇文章/Markdown 要发布到公众号时触发；也用于检查已有公众号 HTML 的兼容性与排版质量、给文章换风格重排。 |
没有模板。 每篇文章现场设计：版面结构、阅读节奏、风格气质、配色字体，全部从这一篇的内容推导出来——两篇不同的文章不应该得到同一套排版。唯一不变的是底线：微信公众号编辑器里粘贴后必须正常显示。
流程：读懂文章 → 现场设计（产出设计方案 + 备选气质）→ 用微信安全手法实现 → 一键复制进编辑器。
资源分两类——硬约束必读，参考仅启发：
| 文件 | 作用 | 何时读 |
|---|---|---|
references/wechat-compat.md | 微信编辑器兼容硬约束 + 自检清单（底线） | 每次生成/检查前必读 |
references/design-craft.md | 设计感手艺库：记忆点 / 字号对比 / 装饰 / 色彩 / 留白（上限） | 每次设计与生成时必读 |
references/components.md | 微信安全实现手法（DOM 结构已验证；视觉样式由设计方案决定） | 生成 HTML 时 |
references/guidelines.md | 排版审美纪律（层级/节奏/色彩） | 设计与质检时 |
references/style-directions.md | 参考案例集：八种已验证的气质组合（只供启发，禁止整套照搬） | 需要灵感或用户点名某风格时 |
assets/examples/four-gate-sample.* | 原文与 HTML 配对的四门通过样例 | 理解交付证据时 |
assets/examples/blue-minimal.html / dark-tech.html | 视觉组装与兼容展示页，不是内容完整性样例 | 可选 |
先分清两类规则——这是整个技能的骨架：
wechat-compat.md，违反就崩）；② 内容零改动（违反就是改了用户的文章）。这两类是非黑即白的红线，自检必须 100% 通过。design-craft.md / guidelines.md 里的所有数字都是"多数文章的好起点"，不是必须达标的尺。判断"这篇文章要什么"永远高于"规范说几"——极简要弱对比、对称要居中、短文不要重音时，就该违背默认值，服从内容。两条硬规则展开：
data-layout-text="true"；只标版式文字，绝不把原文包进去。该标记只服务发布前校验，被微信剥掉也不影响样式通读全文，提取：
、裸图片链接、【图：…】、【视频：…】、（此处放图）等写法都算；区分"有 https 地址的图"和"本地图/只标了位置的图/视频"文章太短（< 300 字）或气质严重混杂时，可以问用户一个问题确认定位；其余情况直接判断。
不查模板、不选方向——基于 Step 1 的画像，像设计师一样回答五个问题，答案合起来就是这一篇的设计方案：
产出一份 6-9 行的设计方案（气质 / 版面策略 / 节奏 / 配色及理由 / 形态语言 / 视觉记忆点），外加 2 个备选气质方向（各一句话+主色）。交付时原样报告给用户，一句话即可切换重排。
视觉记忆点是必填项：读者截图最可能截哪一屏？标题区封面构图 / 贯穿全文的装饰语言 / 一处大胆的金句版面，三选一（手法见 design-craft.md）——没有记忆点的设计方案是不完整的。
反平庸三个着力点（design-craft.md 详述，是倾向不是硬线，跟着文章气质用）：① 字号对比敢拉开——别无意识全压在 15/16/17（但极简的弱对比是有意选择）；② 警惕无脑居中——构图随气质选（但对称/极简文章居中可能正是对的）；③ 主色克制、大色面少、有情绪高点的文章给留白重音。装饰尽量从本篇内容意象长出来，少用通用符号库默认项。这些帮你避开平庸，但这篇文章需要别的时，服从文章。
设计自由，纪律不自由：三色纪律、字号 ≤ 4 档、组件种类 ≤ 5、guidelines.md 全部审美规则照守。
style-directions.md 的参考案例找灵感——看某种质感是怎么做出来的，禁止整套照搬任何案例的配色与组合；好设计经得起一个检验：换一篇文章，这套设计就不再是最优解生成前读齐：wechat-compat.md（硬约束）→ design-craft.md（设计感手艺）→ components.md（安全实现手法）→ guidelines.md（审美纪律）。
把文章元素映射到实现手法。组件库给的只是微信安全的 DOM 结构（多列必须 table、列表必须 p+span、深色页必须 table 骨架……）；每个组件的视觉样式——颜色、圆角、边框、装饰、间距——按本篇设计方案重新定，示例里的具体数值只是演示，不是答案：
| 文章元素 | 实现手法（形态按设计方案定） |
|---|---|
| 标题 + 副题 | 头部标题区（杂志式 / 居中式 / 极简式，或自创安全形态） |
| 章节 | 章节标题（水印编号 / 序号色块 / 左色条 / 居中细线，或自创） |
| 核心观点 / 金句 | 金句卡（色底 / 边框 / 留白居中，或自创） |
| 数据点 ≥ 2 个 | 数据栏（table 多列） |
| 并列要点 | 清单（p + 序号 span，绝不用 ul/li） |
| 操作步骤 | 步骤块（STEP 标签） |
| 时间顺序事件 | 时间线（table 左点右文） |
| 他人观点 / 引文 | 引用卡（标注来源） |
| 多方案对比 | 对比表 |
| 代码 | 代码块（pre-wrap，不用 pre 标签） |
| 图片（https 外链） | <img> + 图注（粘贴时编辑器自动转存） |
| 本地图 / 只标位置的图 | 图片占位块（可视虚线框 + 编号 + 建议内容） |
| 视频 | 视频占位块（视频无法随粘贴带入，编辑器内插入；禁止 video/iframe 标签） |
| 外链 | 正文上标 [n] + 文末参考资料（外链不可点） |
| 结尾 | 文末区（END / 互动引导 / 递进式） |
组装节奏：每章节 = 标题 + 正文（主体）+ 至多 1-2 个组件；卡片不连发；全文组件种类 ≤ 5 种。
data-layout-text="true"；若文字来自原文，即使被升格、拆成多个 span 或两侧加了装饰符，也不加此标记assets/preview-shell.html 作外壳；复制根必须保持为普通文档树中的 <div id="wechat-content">，不能换成会被浏览器自动闭合的 p，也不能放进 template、dialog / details、媒体 fallback、textarea、select、表格解析上下文、SVG / MathML 等会令浏览器把节点惰性化、隐藏、吞掉或改挂位置的祖先。替换全部占位符：{{文章标题}}、{{内容底色}}、{{风格说明}}、{{风格方向}}、{{备选方向1}}、{{备选方向2}}；风格注释必须是 #wechat-content 的第一个有效节点：
<!-- 风格方向: 自定义·周末厨房暖棕 | 备选: 清新薄荷 / 极简黑白 -->#wechat-content 内；预览 CSS、按钮和脚本留在复制区外，整段唯一复制脚本与复制按钮的直接 copyContent() 调用作为已审计基础设施保持原结构，不随视觉方案改写output/{文章主题 slug}.html（换风格重排时存 output/{slug}-{方向}.html 便于对比）自检分两类——硬规则必须 100% 过，设计判断是反思不是验收：
A. 四道硬门（任一道不过都不许交付）
python3 {技能目录}/scripts/verify-completeness.py <原文文件> <输出.html>
——脚本只读唯一且浏览器安全的 <div id="wechat-content">，排除 data-layout-text="true" 与明确不可见节点后按顺序精确比较可见原文流，保留英文词间空格并以 URL token 集合核对链接目标，能抓缺字、改标点、重排、重复、常见藏字、链接丢失与未标记增文；逐字拆开或两侧包装饰符的标记文字只要与原文重叠也会失败。原文是用户口头粘贴的，先存成临时文件再校验；修复后重跑直到通过python3 {技能目录}/scripts/verify-wechat-compat.py <输出.html>
——按浏览器的“重复属性取第一项”语义解析复制区的标签、属性与 CSS 声明，不扫预览外壳，也不会把合法 text-transform 误判成 transform；自动检查重复属性、CSS 转义/变量/calc、现代高级颜色函数、藏字手法、禁用标签/事件、flex/grid/gap、定位与动画、背景、图片/链接和整页 table 骨架。未通过必须修复后重跑；警告项与脚本覆盖不到的语义规则再对照 wechat-compat.md 人工过一遍python3 {技能目录}/scripts/verify-output-contract.py <输出.html>
——检查唯一、使用 div、位于普通文档树且自身与祖先未显式隐藏的复制根，检查重复属性、首节点风格注释及两个备选，以及按钮自身与祖先未显式隐藏、未被 inert / 禁用 fieldset 等祖先变成不可用、按钮未禁用且直接调用 copyContent() 的复制按钮、手机宽度按钮、viewport 和未替换占位符；唯一 <script> 不得带 src / type / nomodule 等属性，脚本整体必须与 assets/preview-shell.html 中已审计的复制实现保持同一代码结构，不能追加覆盖 handler，也不能自行改写成死分支、嵌套函数或提前退出。这里的“显式隐藏”指元素或祖先上的 hidden、popover 与内联隐藏声明，不宣称静态脚本能证明任意外部样式表的最终计算样式。交付契约不再混进兼容检查python3 {技能目录}/scripts/verify-mobile-render.py <输出.html> --screenshot <390x844截图.png> --json-report <报告.json>
——用本机 Chrome/Chromium 把复制区单独放进 390px 内容舞台真实渲染，并生成 390×844 首屏截图，沿祖先链和文字真实 Range 检查横向溢出、破图、中文 <12px、透明/移出屏幕等隐藏中文，以及无文字描边/阴影兜底时与背景近乎同色的中文；预览外壳的 flex/script 不参与。报告同时保留浏览器实际内部视口（部分桌面 Headless Chrome 会强制最小 500px），验收依据是 390px 内容舞台而不是伪称内部视口恰好 390。Blink 通过仍不等于微信三端必然一致，发布前手机预览继续保留B. 设计反思（发现"哪里偷懒选了最安全刻度"，不是 pass/fail 红线）
design-craft.md"设计感自检"——字号对比够不够、封面是不是随手居中、主色滥不滥、有情绪高点的话留白够不够、装饰是不是通用符号。某项"不对"如果是这篇文章的有意选择（极简弱对比、刻意居中、短文不要重音），那就是对的，在设计方案里说明理由即可；怕的是无意识的平庸guidelines.md"质量自查"——段落节奏与可读性（同样是判断，结合文章）另加一条忠实度检查：逐个组件核对内容是否都来自原文——排版只重组呈现，不新增数据、引语、徽章文案或修辞（"战火点燃"这类原文没有的演绎是常见溢出点）。需要补充的信息（如公众号名称）用占位注释标出让用户替换，不要代写。
output/{slug}.html 和 390×844 QA 截图，确认静态报告与目视结果一致用户给已有 HTML 时：
#wechat-content 的裸片段，兼容/渲染脚本显式加 --fragment，不要静默把整个预览外壳当正文guidelines.md 找质量问题（层级、节奏、色彩纪律）内容画像不变，按用户点名的气质重做 Step 2 设计（或在原方案上微调），换样式重排，重走自检。
输出存 output/{slug}-{气质}.html，和原版本并存方便对比。
某篇文章的设计特别成功，或看到好的公众号风格想收进来：在 style-directions.md 加一张案例卡（气质 / 适合内容 / 配色 / 手法要点）。记住案例永远是启发，不是模板——下一篇文章照样从内容现场设计。