Skip to content
FunCoding

wechat-styler

将Markdown排版为公众号HTML;组件、动画及已授权的编辑器注入按需启用。

Star
781
License
MIT
Last commit
Oct 9, 2026

skills/wechat-styler/SKILL.md

View on GitHub

WeChat Styler

把已定稿或已授权排版的 Markdown 转成可评审公众号 HTML。默认保留正文并自动加入智见品牌首尾引导(默认 Flow 纸色底 GIF,SVG 为 --cta-style svg 备用);组件改写、主题开场动画和微信编辑器注入按需加载。

WeChat Styler 左右并列效果预览

分支路由

先选分支,再读取对应 reference。默认转换无需读取组件、动画或编辑器细则。

用户需求执行分支读取
公众号排版、HTML、换主题、批量转换默认转换references/conversion-workflow.md;主题需要判断时再读 references/theme-guide.md
结构化组件、丰富排版、开场动画组件与动画默认转换 reference + references/component-guide.md + references/svg-animation-design.md
注入公众号、保存草稿、核验编辑器中的成品编辑器注入references/opencli-injection.md + references/wechat-compatibility.md
修改 Zhijian 主题视觉基线主题维护references/zhijian-theme-baseline.md + references/theme-guide.md

任务中出现新需求时只补读新增分支。

授权与能力边界

  • 用户已授权排版且正文、主题明确时,简报选择并直接生成 HTML 预览,不重复确认。只有缺口会改变原意、关键表达方向或交付格式且无法推断时才问;先完成不受影响的部分。
  • 预览生成、编辑器写入和草稿保存是不同动作。沿用会话中已有授权;没有编辑器写入或保存授权时,只交付 HTML 与核验结果。
  • 某后端因能力缺失而不可用时,可以选择已授权且满足注入验收条件的后端。遇到明确的权限拒绝或安全策略拒绝时必须停止并报告,不能换工具、CDP、浏览器自动化或间接脚本绕过。
  • 不修改输入 Markdown;组件分支在内存或临时文件中改写。

工作流

1. 默认转换

默认保留正文、不增加正文组件;转换器自动加入品牌开头与结尾引导(默认 Flow 生成的纸色底 GIF,--cta-style svg 切回透明内联 SVG)。开场互斥、关闭方式与素材维护见 references/brand-cta.md;每次转换读取该规则。按 references/conversion-workflow.md 选择主题与参数、运行转换并完成最小 QA。用户只给文件路径时默认使用 zhijian。

2. 组件与动画

组件分支先通过严格段落密度门,再按 component-density 在内存中改写 Markdown。默认 standard,只有用户明确要求“克制”或“丰富、激进、多用组件”时改为 restrained 或 rich。

执行时遵守:

  • 金句、NOTE、WARNING 和其他组件替换对应原文,不在正文后重复同一意思。
  • :::compare、:::flow、:::timeline 独占一行且前后留空行;矩阵对比保留 table。
  • 卡片只放短文本;组件数量、横向布局和完整语法按 references/component-guide.md。
  • 从正文推断开场标题、副标题和不超过 3 个标签;模板选择与 SVG 技术边界按 references/svg-animation-design.md。
  • 话题标签:frontmatter 没有 topics 时,从正文选 3–4 个写入转换用的 frontmatter(或传 --topics):栏目/合集标签固定在首位,再加 2–3 个对准目标读者或本篇主题的话题;不用「人工智能」「AI」这类泛词,品牌或产品名只在正文确实展示该产品时使用,不超过公众号上限 10 个。用户指定标签或明确不要时照办(--topics none)。
  • xiaolan-terminal 只在用户明确要求小蓝、智见小蓝或品牌 IP 时使用。
  • 生成前完成组件 reference 中的检查清单,然后运行转换与移动端视觉 QA。

3. 质量验收

正式候选必须满足:

  • 严格段落密度门通过;不靠缩小字号、放大行高或增加组件掩盖阅读墙。
  • 390px 视口无横向溢出、坏图和图片 URL 异常重复;图片去重检查为严格模式。
  • 引用、标题层级、暖陶色基线和卡片在移动端显示正常。
  • 组件没有重复正文,围栏没有泄漏,正文语义未被改写。
  • 代码围栏中的换行编译为显式 <br>;不能只依赖 \n 与 white-space:pre-wrap。
  • 兼容硬规则按 references/wechat-compatibility.md 通过后,才进入编辑器注入。

4. 编辑器注入

仅在授权范围内按 references/opencli-injection.md 执行。发布命令始终带 --report;保存草稿后必须以页面可见信号或报告中的新 appmsgid / 历史变化核对真实保存,不把命令成功当作保存证据。

报告至少保留:阶段、脱敏错误、图片状态、封面策略、代码块硬换行计数、正文首尾、草稿保存证据和可直接执行的恢复动作。失败后优先用只读验证定位,不盲目重复写入。

输出合同

  • 默认输入 article.md,输出同目录 article_wechat.html;也可显式指定输出路径。
  • 输出为完整内联样式 HTML,可复制或在获授权后注入公众号编辑器。
  • 占位图、参数、主题、输出路径和命令见 references/conversion-workflow.md。
  • 品牌引导位于文章首尾,正文中间使用静态组件。明确启用 SVG 开场动画时只保留结尾引导。
  • 开场动画承担文章标题:启用 --cover 时自动移除正文开头的一级标题(首个非空行的 # 标题),动画标题依次取 --cover-title、frontmatter.title、该一级标题;正文中段的一级标题不受影响,确需保留时传 --keep-h1。
  • 话题标签渲染在正文末尾(结尾引导之前),结构复刻公众号编辑器原生 a.wx_topic_link,斜体 14px;注入后编辑器识别为话题,保存即生效。

References

文件何时读取
references/conversion-workflow.md默认转换、参数、主题、占位符与 390px QA
references/theme-guide.md主题选择、YAML 参数或扩展主题
references/component-guide.md组件语法、密度预算、改写与检查清单
references/svg-animation-design.md动画模板选择、SVG 技术约束与回归要求
references/wechat-compatibility.md公众号兼容硬规则
references/opencli-injection.md已授权的编辑器注入、封面、图片、保存证据与恢复
references/zhijian-theme-baseline.mdZhijian 主题样式锁与移动端视觉基线

版本: 1.18.2 · 作者: 大鹏

Similar Skills

writing-skills

OBobra/superpowers298k2,631 new stars in the last 7 days

writing-plans

OBobra/superpowers298k2,631 new stars in the last 7 days

writing-shape

MAmattpocock/skills288k10,178 new stars in the last 7 days

writing-beats

MAmattpocock/skills288k10,178 new stars in the last 7 days

writing-fragments

MAmattpocock/skills288k10,178 new stars in the last 7 days

domain-modeling

MAmattpocock/skills288k10,178 new stars in the last 7 days