公众号排版工作室

将 Markdown 内容转换为微信公众号兼容的精美排版。支持 12 种专业风格预设、品牌色自定义、图片系统和扩展语法。

---

硬性规则

1. 微信兼容性：输出 HTML 必须使用纯内联样式（style="..."），禁止 <style> 标签、CSS class、position/float 布局、box-shadow、渐变、CSS 变量
2. 文件操作安全：只读取用户明确指定的文件，输出文件写入工作空间根目录
3. 风格忠实：严格按照所选风格的配色方案执行，不自行发明颜色
4. 内容完整：转换时保留原文所有内容，不删减、不概括、不重写

---

可用风格（12 种）

---

扩展 Markdown 语法

除标准 Markdown 外，支持以下公众号专用语法：

>>> 导语文字（灰色引导段落）

‖ 金句内容 ‖（居中高亮金句卡片）

!!! tip 标题
提示框内容（支持 tip/note/warn/info 四种类型）

![[1|cover]] — 图片角色标记（cover=封面宽图, left/right=浮动, grid=网格）

---

工作流程

模式 A：可视化排版工作室（默认）

当用户需要交互式预览和微调时使用此模式。

步骤：

1. 读取源文件：使用 read_file 读取用户指定的 .md 文件
2. 确定风格：根据用户要求或文章内容智能推荐风格（默认 elegant）
3. 写入内容文件：将以下 JSON 写入工作空间的 assets/studio-content.json：

   {
     "content": "完整的 Markdown 内容",
     "style": "elegant",
     "brandColor": ""
   }
   

   • content：完整 Markdown 文本（保留原始换行）
   • style：风格 key（见上表，可选，默认 elegant）
   • brandColor：自定义品牌色 hex（可选，如 "#ff6600"，留空使用风格默认色）
4. 打开预览：使用 open_preview 打开 assets/studio.html
5. 告知用户：说明已打开排版预览，可在预览中切换风格、编辑内容、复制到公众号

模式 B：直接输出 HTML 文件

当用户明确要求"导出 HTML"、"生成排版文件"、"自动替换"时使用此模式。

步骤：

1. 读取源文件：使用 read_file 读取用户指定的 .md 文件
2. 确定风格：根据用户要求选择风格
3. 转换排版：按照下方「排版转换规则」将 Markdown 转为微信兼容内联样式 HTML
4. 输出文件：使用 modify_file 将结果写入 <原文件名>.html（与源文件同目录）
5. 告知用户：说明已生成排版文件，可直接复制 HTML 内容粘贴到公众号编辑器

---

排版转换规则

将 Markdown 转为微信公众号兼容 HTML 时，严格遵循以下规则：

基础结构

<section style="max-width:100%;box-sizing:border-box;padding:16px 18px;background:{bg};color:{text};font-size:15px;line-height:1.8;letter-spacing:0.5px;word-break:break-all;">
  <!-- 文章内容 -->
</section>

元素样式映射

根据所选风格的配色（参考 references/styles.md），应用以下样式：

标题 H1：

<h1 style="font-size:22px;font-weight:700;color:{hd};text-align:center;margin:28px 0 20px;line-height:1.4;">标题</h1>

标题 H2（带装饰，参考 styles.md 中各风格的 H2 设计）：

<h2 style="font-size:17px;font-weight:700;color:{hd};margin:24px 0 12px;padding-bottom:8px;border-bottom:2px solid {ac};">小标题</h2>

标题 H3：

<h3 style="font-size:15px;font-weight:700;color:{hd};margin:20px 0 8px;padding-left:10px;border-left:3px solid {ac};">三级标题</h3>

正文段落：

<p style="margin:0 0 16px;color:{text};line-height:1.8;">段落内容</p>

加粗：<strong style="color:{hd};font-weight:700;">加粗文字</strong>

强调：<em style="color:{ac};font-style:italic;">强调文字</em>

链接：<a style="color:{ac};text-decoration:none;border-bottom:1px solid {ac};">链接文字</a>

行内代码：<code style="background:{al};color:{ac};padding:2px 6px;border-radius:3px;font-size:13px;">代码</code>

引用块：

<blockquote style="margin:16px 0;padding:12px 16px;background:{al};border-left:3px solid {ac};border-radius:0 4px 4px 0;color:{mu};font-size:14px;">
  引用内容
</blockquote>

无序列表：

<ul style="margin:12px 0;padding-left:0;list-style:none;">
  <li style="margin:6px 0;padding-left:18px;position:relative;color:{text};">
    <span style="position:absolute;left:0;color:{ac};">•</span>列表项
  </li>
</ul>

有序列表：

<ol style="margin:12px 0;padding-left:0;list-style:none;">
  <li style="margin:8px 0;padding-left:24px;position:relative;color:{text};">
    <span style="position:absolute;left:0;color:{ac};font-weight:700;font-size:14px;">01</span>列表项
  </li>
</ol>

分割线：

<hr style="border:none;height:1px;background:{dv};margin:24px 0;">

图片：

<img style="max-width:100%;border-radius:4px;margin:12px 0;display:block;" src="图片地址" alt="描述">
<p style="text-align:center;font-size:12px;color:{mu};margin:4px 0 16px;">图片说明</p>

扩展语法样式

导语（>>>）：

<section style="margin:0 0 20px;padding:12px 16px;color:{mu};font-size:13px;line-height:1.7;border-left:2px solid {dv};">
  导语内容
</section>

金句（‖ ... ‖）：

<section style="margin:20px 0;padding:16px 20px;text-align:center;font-size:16px;font-weight:500;color:{hd};background:{al};border-radius:4px;line-height:1.6;">
  金句内容
</section>

提示框（!!! type）：

<section style="margin:16px 0;padding:12px 16px;background:{al};border-radius:6px;border-left:3px solid {ac};">
  <p style="font-size:13px;font-weight:700;color:{ac};margin:0 0 6px;">💡 标题</p>
  <p style="font-size:14px;color:{text};margin:0;line-height:1.7;">内容</p>
</section>

提示框图标：tip=💡, note=📝, warn=⚠️, info=ℹ️

配色变量说明

从风格定义中取值（详见 references/styles.md）：

• {bg} — 页面背景色
• {text} — 正文颜色
• {hd} — 标题颜色
• {ac} — 强调色/主题色
• {al} — 浅色背景（引用、代码块）
• {mu} — 辅助文字色（图注、导语）
• {dv} — 分割线颜色

---

智能风格推荐

当用户未指定风格时，根据文章内容自动推荐：

• 技术/编程/产品 → tech
• 商业/金融/报告 → business
• 文学/情感/散文 → warm 或 elegant
• 传统文化/古诗 → chinese
• 时尚/娱乐/热点 → magazine
• 自然/健康/运动 → mint 或 forest
• 科幻/哲学/深度 → aurora
• 艺术/设计/极简 → morandi
• 通用/默认 → elegant

---

触发场景

以下用户意图应激活本技能：

• "帮我排版这篇文章"
• "把这个 md 转成公众号格式"
• "用 XX 风格排版"
• "生成公众号文章"
• "微信排版"
• "自动替换 md 文件"（使用模式 B）
• 提及"公众号"+"排版/格式/样式"

---

注意事项

• 微信编辑器不支持 <style> 标签，所有样式必须内联
• 微信不支持 position: fixed/absolute（列表项的 position:relative + absolute 是例外，微信支持）
• 图片建议宽度 100%，使用 border-radius 增加质感
• 代码块在微信中显示效果有限，建议用浅色背景 + 等宽字体模拟
• 表格使用 border-collapse:collapse + 内联 border 样式