Zhouxing Paiban Wx

Zhouxing Paiban WX

把“内容写作、视觉排版、微信粘贴兼容”分开处理。不得改写已定稿文章；用户只要求排版时，原文、标题层级、链接、图片顺序和代码内容都保持不变。

路由

先判断输入属于哪条路径：

1. 直接排版：用户给出文章正文或文章文件，要求排版、预览、换色、复制到公众号。
2. 风格学习：用户给出截图、图片、公众号文章链接或明确的参考页面，要求研究、模仿、保存排版风格。
3. 两者连续执行：先从参考材料学习风格，用户确认风格后，再用该风格排版文章。风格未确认前不要批量应用到长文。

如果只有文章主题或大纲、正文尚未写好，转到 zhouxing-writing-wx。如果用户要把内容发布到真实公众号，转到 wechat-publisher；本 Skill 的复制不等于发布。

共同原则

• 公众号最终依赖粘贴后的内联样式。预览像、复制富文本成功、公众号编辑器内效果正常是三个独立验收项。
• 临时页面只在本机生成和打开，不上传文章。未经用户明确要求，不修改原文文件、不发布、不发送到真实账号。
• 不从参考图或网页复制正文内容；只提取排版系统：层级、留白、色彩角色、字体、边框、卡片、强调和图片规则。
• 图片只能支持视觉推断，不能证明精确字号、字重、色值或 DOM。链接能检查 DOM/CSS 时提高证据等级；无法读取时明确标为未核实。
• 微信粘贴不可靠支持 @import、外部字体、动画、hover、复杂媒体查询、CSS counter、脚本和交互控件。风格库不得依赖这些能力。

路径 A：直接排版

1. 准备文章

• 优先使用用户提供的 Markdown 文件；纯文本可保存为临时 Markdown，但不覆盖原文件。
• 保留 Markdown 语义：H1–H6、段落、粗体、斜体、链接、连续引用、平级列表、围栏代码、图片、分隔线和简单表格。嵌套列表会被展平，脚注不支持，原始 HTML 会被转义；脚本必须在构建摘要中给出带行号的 warning，不能静默误排。
• 本地图片按文章文件所在目录解析并嵌入预览；找不到的图片必须列出，不能假装已经可复制。

2. 生成临时预览

运行：

bashCopy code
python3 scripts/build_preview.py --article "/absolute/path/article.md"

脚本默认在系统临时目录的稳定路径 zhouxing-paiban-wx-preview/index.html 生成页面，并打印路径和检查摘要。稳定路径用于让同一浏览器中的自定义风格在重新生成预览后仍可被读取。需要指定风格或输出位置时：

bashCopy code
python3 scripts/build_preview.py \
  --article "/absolute/path/article.md" \
  --theme "green-white-clean" \
  --output "/absolute/path/index.html"

先确认脚本退出码为 0，再用 macOS open <index.html> 打开。页面右侧工具栏分为两个大模块：

• 排版样式：5 套完整主题与主题主色；主题负责整篇文章的基础层级、留白、色板、标题、引用、代码和图片气质。
• 排版设计：内部使用“文字设计 / 样式设计 / 排版设计”三个切换项，同一时间只展开一类设置。文字设计包含文章字体，以及先选修改位置再调字号/字重；样式设计包含先选修改位置再选组件样式，H1–H6 共用同一套标题样式菜单，图片形式也作为“图片”位置进入；排版设计只包含段落、标题和图片间距。设置栏在桌面和窄窗口都固定在页面右侧，不得响应式移动到文章上方。
• 工具外壳的布局、流光、控件形状和主题联动规则按 references/preview-ui-design.md 执行；外壳不得进入复制结果。

图片形式保留跟随主题、直角、圆角、阴影、圆角阴影、描边、圆角描边。内置 assets/sample-article.md 引用的 sample-image.svg 是主题联动样例图，预览时其背景、描边、图形和文字颜色随当前主题主色或手动主色更新；构建脚本只为这一份内置样例素材添加临时标记，不能改色用户文章里的普通图片，复制时移除该标记但保留当前 SVG。字号/字重至少支持 H1–H6、正文、引用、代码、加粗和斜体，并先选择修改位置再修改对应数值。样式设计同样先选择修改位置，再显示该位置可用的样式；各级标题共享标题样式选项，但各自保存选择和字号。页面还必须提供“保存为新风格”、“恢复当前风格”和“复制排版”按钮；前两个使用同款白色次要胶囊并排，“复制排版”在下一行使用黑色通栏主按钮。

“保存为新风格”必须保存当前基础主题、主色、字体、各位置字号/字重、组件样式和间距覆盖，但不得保存文章 HTML、文本、图片内容或链接。新风格在当前浏览器的 localStorage 中最多保存 20 个，添加到“排版风格”下拉菜单，同名时要求换名，存储失败时明确报错且不假装已保存。这是同一浏览器/同一页面来源内的个人预设，不是写入全局 Skill 的 assets/style-library/ 或 assets/learned-style-library/；用户要求跨设备、公开分享或沉淀到 Skill 时，另走风格学习与正式入库流程。

主色调整以主题原主色为基准，保留同色系颜色之间的色相、饱和度和明度偏移；正文、中性灰和白色不随主色漂移。黑白主题只迁移深色识别元素，不把全部灰色正文染成新主色。

字体只使用系统字体栈，不嵌入外部字体：系统无衬线最稳定；苹方主要由苹果设备命中，微软雅黑主要由 Windows 命中；宋体和楷体允许选择，但必须提示跨端字形与粗细会变化。

3. 验收

至少完成以下检查：

1. 页面文件存在且非空，主题库已载入，文章不是空白。
2. 标题、正文、引用、代码块、列表、图片等真实存在的元素在预览中可见。
3. 切换主题、局部组件、换色、字体和间距控件不会改变文章源文本或层级；章节编号、英文眉题等视觉装饰标记为非正文，并从纯文本剪贴板中剥离。主题切换后局部覆盖恢复为“跟随主题”。
4. 调整主题、字体、字号/字重、组件和间距后保存一个新风格；刷新页面、重新生成默认预览页并重新打开后，它仍在风格菜单中且可完整恢复。同时检查 localStorage 不包含文章标题、正文、图片数据或链接。
5. 点击“复制排版”后显示成功；随后在公众号编辑器或一个富文本测试区粘贴检查。无法进公众号时，只能报告“本地复制已验证”，不能报告微信端通过。
6. 图片是单独风险项：远程防盗链、超大 base64 或微信重新上传都可能改变结果，必须实际粘贴检查。

路径 B：风格学习

执行前完整阅读 references/style-learning.md 和 references/theme-schema.md。

1. 收集证据

• 截图/图片：逐张查看实际像素，识别页面宽度、标题层级、段落密度、对齐、强调、引用、列表、代码、图片、分隔、卡片和调色关系。
• 文章链接：联网打开原页面，优先检查实际文章节点和计算样式；若登录、反爬或动态加载阻断，降级为截图证据并说明。
• 至少覆盖 H1、H2、H3、正文、strong、blockquote、列表、code、图片、hr；参考材料没有出现的元素标为“未观察”，不要凭空声称复刻。

2. 先交付风格证据卡

在写入风格库前，用三组信息简短报告：

• 已观察：可由图片像素或页面结构直接支持；
• 推断：估算的字号、字重、色值或间距；
• 未核实：参考中不存在或无法读取的元素。

同时说明适合的文章类型和最可能失真的 1–3 个地方。若用户要求“完全一样”，直接说明无法由截图证明像素级一致。

证据卡交付后先让用户确认研究方向和主要推断。用户未确认前只能在临时目录制作候选主题，不得写入正式风格库。

3. 生成候选、确认并入库

使用小写短横线 ID，先在系统临时目录生成候选 JSON。候选主题必须：

• 符合 references/theme-schema.md；
• 保存完整 .note-to-mp CSS、主题主色和可调色范围；不要把参考风格改写成另一套视觉系统；
• 每个核心元素提供可粘贴的保守样式；未观察元素使用兼容基础样式，并在 evidence.unobserved 记录；
• 在 evidence 中记录来源类型、观察项、推断项、未核实项和置信度，不保存参考文章正文。

对候选文件运行：

bashCopy code
python3 scripts/validate_theme.py --learned /absolute/path/to/candidate-theme.json

验证通过后，在临时副本中用 scripts/build_preview.py 对 assets/sample-article.md 生成预览并实际检查。用户确认样例或关键截图后，才把文件写入 assets/learned-style-library/<theme-id>.json；目录不存在时按需创建。入库后再次运行正式路径校验和样例预览。把新主题应用到用户长文前，再确认一次关键页面；审美确认不能被结构校验替代。

风格库维护

• 内置风格固定为 5 套原创主题：绿白清简、墨蓝刊读、石墨档案、沙金手记、雾紫叙事。每套必须拥有独立的版式隐喻，并至少在以下 8 个维度中的 5 个形成肉眼可见差异：正文栏宽度、字体体系、段落密度、H1 构图、H2 编号方式、引用结构、列表/表格结构、图片/代码处理。只换色、圆角、阴影或普遍加左竖线不算新主题。
• 绿白清简是例外的品牌基准主题：使用 assets/source-styles/zhouxing-thin-green.css 中固化的 Zhouxing·细绿白 规则，不再整体重新设计或近似重画。当前确认的差异是：H1 使用主题主色的低透明度 01 水印、固定英文眉题、24px 黑色标题和主题主色底部细线；H2 上方原有 IP 小字替换为按章节递增的 TITEL 01、TITEL 02……；引用块使用左下角收口的白色对话卡片，并保持小偏移、小扩散阴影。用户通过右侧工具栏主动调整的不算修改基准主题。
• 5 套内置主题的 H1 基础字号统一为 24px。沙金手记只在内部组件保留米黄纸张、票据与沙金装饰，整篇文章容器使用与其他主题一致的白色背景，不添加外层虚线框或硬阴影。
• 用户确认的学习主题写入 assets/learned-style-library/，预览时与 5 套内置主题合并展示；学习主题不得设置为默认主题，ID 和顺序不能与内置主题冲突。
• assets/component-library.json 保存标题样式来源与引用、代码块、行内代码、加粗、斜体、有序列表、无序列表、表格、分隔线和链接等组件。有序列表与无序列表在“修改位置”中独立设置：有序列表提供数字、双位数和罗马编号等编号体系，无序列表提供实心、空心、方形等符号体系，二者不能互相覆盖。预览页把 H1、H2、H3 的标题方案合并为 H1–H6 共用的标题样式菜单，样式只改变视觉结构，不统一覆盖各级标题在“文字设计”中设置的字号与字重。每个非默认标题样式必须同时显式定义背景与可读的前景色：浅色背景使用主题深色，深色背景使用白色，不能继承原主题标题颜色。所有同时使用上下边线的样式都要检查内容与边线的距离：标题通常使用 10–14px 垂直内边距，引用通常使用 14–16px；表格、列表、分隔线没有内容内边距问题时不额外加空白。组件应覆盖刊头、水印编号、票据、暗色摘要、居中金句、终端窗口等实质不同的视觉语言；竖线只允许作为引用块的一种可选样式，不能成为所有标题或主题的默认结构。
• 列表复制时只能保留一套符号。预览继续使用 ol / ul / li，但复制结果必须转换为普通 section + p 行；每一行由一个 inline-block 序号和一个 inline 正文容器组成，避免公众号重写语义列表后让符号与文字错行。原生有序编号按实际文字宽度占位，不能为单、双位数字统一保留固定宽度；编号与正文只保留一个短间隔。圆角编号框、圆形编号、箭头和圆角对勾使用真实内联标记，不依赖 CSS counter 或 ::marker 的高级样式。
• 所有主题和表格组件必须使用流式 width:100%、固定列布局、统一单元格盒模型、垂直对齐及长文本换行。Markdown 各行列数不一致时补齐空单元格并报告 warning，不允许生成错列结构。
• 修改内置设计系统时编辑并运行 scripts/rebuild_design_system.py，随后验证主题、组件库和样例预览。该脚本会把内置主题目录收敛为 5 个 JSON 文件，因此运行前应确认目标确实是重建内置设计系统。
• 新风格取代旧风格时直接修改同一文件；不要创建 v2、final、新版 等重复条目。
• 相似风格只有在层级、留白或装饰系统存在实质差异时才分开保存。仅主色不同不新增主题，使用页面换色功能。
• 修改主题后重跑主题校验和样例预览，并为 5 套主题分别生成同文截图做并排视觉检查；除检查旧颜色硬编码、无效 token、过浅文字、超宽内容和不支持的 CSS，还要确认任意两套主题都不会被误认成同一模板的换色版本。

失败处理

• 浏览器阻止现代剪贴板 API 时，页面会使用选区复制降级；两者都失败时，引导用户用浏览器打开并授权剪贴板，不宣称已复制。
• 浏览器禁用、清除或隔离 localStorage 时，不宣称自定义风格已持久化；说明它只保留在当前浏览器的当前页面来源中。
• Markdown 构建失败时不覆盖原文；报告能确定的异常或不支持语法。只有正文仍能安全转义时才生成纯文本降级预览，否则停止并说明未生成页面，不能假装已经降级成功。
• 参考链接无法访问时，请用户补截图；不要绕过登录或伪造 DOM/CSS 分析。
• 用户要求的效果依赖微信不支持的能力时，改成视觉等价的边框、背景、圆角、留白或内联文本标签，并说明差异。

资源

• scripts/build_preview.py：把文章和全部主题打包成单文件临时预览页。
• scripts/rebuild_design_system.py：确定性生成 5 套原创主题和 13 类元素组件库。
• scripts/validate_theme.py：校验主题结构、token、颜色和微信兼容边界。
• assets/preview-template.html：离线实时预览、控件和富文本复制界面。
• assets/style-library/：结构化排版风格库。
• assets/learned-style-library/：按需创建的用户确认风格库，不受内置主题重建脚本清理。
• assets/component-library.json：13 类语义元素的丰富可替换样式库。
• assets/sample-article.md：覆盖主要公众号文章元素的回归样例。
• references/style-learning.md：图片/链接排版分析方法和证据标准。
• references/preview-ui-design.md：工具外壳的布局、材质、流光和控件规范。
• references/theme-schema.md：主题字段、色彩联动和元素样式规范。
• references/wechat-compatibility.md：预览、复制、微信粘贴的兼容边界。