公众号排版器

WeChat MP Formatter（公众号排版器）

Overview

Convert article content (title + body text + optional lyrics/quotes/highlights) into a self-contained HTML file with inline styles. The user opens the HTML in a browser, clicks a "copy" button, and pastes directly into the WeChat公众号 editor — all formatting (background colors, borders, font sizes) is preserved.

When to Use

• User asks to format an article for WeChat公众号 / 公众号排版
• User wants to create styled content that can be copy-pasted into the公众号 editor
• User mentions "公众号文章" + "排版" / "格式" / "样式"
• User has article text and needs it turned into publishable公众号 format

适用场景 / Best For

• 强烈推荐（本 skill 的主打场景）：歌曲分享、音乐人/专辑介绍、歌词赏析、怀旧 / 情感 / 生活方式类公众号文章。默认暖色调配色 + 音乐卡片 / 歌词引用块组件就是为这类内容调的。
• 可用但需调整：通用文章、随笔、商业或科技类 —— 可保留高亮块、金句块、互动引导，但通常要换配色（见 Color Palette 的 Alternate palettes）并去掉"音乐卡片"这种强音乐语义的组件。
• 暂不适用：依赖复杂多栏布局、数据图表，或强品牌 VI 统一规范的内容（公众号编辑器会过滤 flex / gradient / box-shadow，详见下方兼容性规则）。

说明：本 skill 当前实现以歌曲 / 音乐类排版为第一优先级。其他类型若要长期量产，建议后续补一套中性 / 冷色调配色与通用组件库（例如 1.1 版本规划）。

Critical CSS Compatibility Rules（核心兼容性规则）

The WeChat公众号 editor filters out certain CSS properties when pasting. Follow these rules strictly:

MUST DO

• Use for ALL styled containers — NOT. The editor strips background-color from but preserves it on.
• Use `` for music cards or any multi-column layouts.
• Use background-color (not background: shorthand) for all background colors.
• Put ALL styles as inline style="..." attributes on each element.
• Use border-radius, border, padding, margin, color, font-size, line-height, text-align — all safe.

MUST NOT DO

• Do NOT use display:flex — the editor removes it, layouts collapse.
• Do NOT use linear-gradient — the editor removes it, backgrounds turn transparent.
• Do NOT use box-shadow — the editor removes it.
• Do NOT use `` for styled blocks (background-color will be stripped).
• Do NOT use external CSS classes for article content — only inline styles.
• Do NOT use position, transform, animation — filtered by the editor.

For the full compatibility reference, see references/compatibility.md.

Formatting Components（排版组件库）

1. Music Card（音乐卡片）

Table-based layout with a circular disc icon + song info. Use `` structure.

  
    
      
    
    
      🎵 歌曲名
      歌手名 · 年份
    
  

2. Lyric Quote Block（歌词引用块）

Warm-toned background + left border + italic text. Use ``.

歌词内容

3. Highlight Box（重点高亮块）

Bordered box for key insights. Use ``.

  内容

4. Key Sentence Block（金句块）

Centered or left-aligned emphasis with distinct background. Use ``.

金句内容

5. Interactive Prompt（互动引导框）

Dark background box at the end guiding comments/shares. Use ``.

  互动引导文字

6. Section Heading（小标题）

Left border accent + bold. Use `` with inline style.

标题文字

7. Body Paragraph（正文段落）

Standard paragraph style. Use `` with inline style.

正文内容

8. Inline Emphasis（行内强调）

Colored bold text within paragraphs. Use ``.

强调文字

Color Palette（配色方案）

Default warm-tone palette (suitable for nostalgia/music/lifestyle content):

Alternate palettes: change #8b4513 (primary) and #d4a574 (secondary) to match the article tone. Keep the BG colors neutral.

Workflow

Step 1: Receive Article Content

Get the article title, body text, and any special elements (lyrics, quotes, key sentences, music info) from the user.

Step 2: Choose Components

Select which formatting components to use based on content type:

• Music/literature articles: Music Card + Lyric Quote + Highlight + Interactive Prompt
• General articles: Highlight + Key Sentence + Interactive Prompt
• Series articles: add Series Navigation at the bottom

Step 3: Build HTML

Use assets/template.html as the base template. Fill in:

1. Article title in the and tags
2. Article body using the component styles above
3. If multiple articles: duplicate the content section, add nav tabs

Step 4: Copy Function

The template includes a copyArticle(id, btn) function using document.execCommand('copy'). This works in file:// context (no HTTPS needed). Do NOT use ClipboardItem API — it requires a secure context.

Step 5: Output

Save the HTML file to the user's working directory. Tell the user to:

1. Open the HTML file in a browser
2. Click the "复制全文" button
3. Paste (Ctrl+V) into the WeChat公众号 editor

Template Usage

The base template is at assets/template.html. It contains:

• Complete `` block for page chrome (nav bar, buttons) — these use CSS classes (safe, not copied)
• Copy function (execCommand-based, works on file://)
• Example article structure with all components
• Multiple article support with tab navigation

To use: read the template, replace the example content with the actual article, save as a new HTML file.

Typography Rules

• Body font-size: 16px (17px for elderly audiences)
• Body line-height: 2.0 (generous spacing for readability)
• Heading font-size: 18px
• Lyric font-size: 16px, line-height 1.9
• Interactive prompt font-size: 13px
• Use letter-spacing:0.3px on body paragraphs for slight breathing room
• Keep paragraphs short: 3-5 lines max per paragraph for mobile reading

Common Mistakes to Avoid

1. Using instead of → background colors will be stripped after pasting
2. Using background: instead of background-color: → less reliable
3. Using flexbox for layouts → will collapse after pasting
4. Using ClipboardItem in the copy function → fails on file:// protocol
5. Making paragraphs too long → mobile readers (especially elderly) won't finish
6. Forgetting border-collapse:collapse on tables → gaps in music cards