• Warm parchment paper-style background:

  #f5f4ed

• Ink-blue single accent color:

  #1B365D

• Chinese headings use a serif/regular script font stack, body text uses a stable sans-serif font stack
• Warm grayscale palette, no cold gray or pure white large backgrounds
• Blue vertical line on the left of headings, solid tag background, restrained quote blocks
• All background colors use solid hex values, and are declared repeatedly in outer layers, content layers, and text layers to reduce the risk of background loss after pasting into the official account

font_family_cn: 'Inter','TsangerJinKai02','Source Han Sans SC','Noto Sans CJK SC','PingFang SC','Microsoft YaHei',Arial,sans-serif
font_family_en: 'Newsreader','Source Serif 4','Source Serif Pro','Charter',Georgia,'Times New Roman',serif
font_size: 16
line_height: 1.55
accent_color: '#1B365D'
background_color: '#f5f4ed'
surface_color: '#faf9f5'
text_color: '#141413'
secondary_color: '#5e5d59'
heading_font: 'TsangerJinKai02','Source Han Serif SC','Noto Serif CJK SC','Songti SC','STSong',Georgia,serif
code_font: 'JetBrains Mono','SF Mono','Fira Code',Consolas,Monaco,'TsangerJinKai02','Source Han Serif SC',monospace

magazine-web-ppt

ink / paper / tint

rgba()

--theme magazine-ink

ink-classic

--theme magazine-indigo

indigo-research

--theme magazine-forest

forest-fieldnote

--theme magazine-kraft

kraft-archive

--theme magazine-dune

dune-gallery

• Each theme has independent font stacks, font sizes, line heights, paragraph spacing, heading structures, list markers, quote blocks, code blocks, and image captions.
• Separation mainly uses white space, short light lines, and local identifiers; no full-width solid lines are automatically inserted between chapters.
• The five themes share the

  magazine-editorial

  renderer entry, but follow different structural branches through

  magazine_variant

  , not just color replacement.
• All background colors use solid hex values, and

  background-color

  is declared repeatedly on blocks and text spans to reduce the probability of background color loss after copying to the official account editor.
• Images have

  margin:0 auto

  centered fallback to avoid left alignment caused by the official account editor rewriting image width after copying.
• The layout retains magazine feel, but the output is fully inline and can be directly copied to the official account editor.

• Chinese: FZShuSong-Z01
• English: Garamond
• Overall light gray background
• Red accent color system
• Serif headings + monospaced code

font_family_cn: 'FZShuSong-Z01','Songti SC',STSong,serif
font_family_en: 'Garamond',serif
font_size: 16
line_height: 1.9
accent_color: '#cf4436'
background_color: '#f7f6f1'
heading_font: 'Noto Serif SC','Songti SC',STSong,Georgia,serif
code_font: 'JetBrains Mono','SF Mono',Menlo,Consolas,monospace

• Sans-serif fonts
• Pure white background
• Blue accent color
• Clear and modern

font_family_cn: 'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif
font_family_en: 'SF Pro Display','Helvetica Neue',sans-serif
font_size: 16
line_height: 1.8
accent_color: '#007aff'
background_color: '#ffffff'
heading_font: 'PingFang SC','Hiragino Sans GB',sans-serif
code_font: 'SF Mono',Menlo,Consolas,monospace

• Minimalist black and white
• Large amounts of white space
• Gray tone
• Restrained and elegant

font_family_cn: 'Noto Sans SC','PingFang SC',sans-serif
font_family_en: 'Inter','Helvetica Neue',sans-serif
font_size: 15
line_height: 2.0
accent_color: '#333333'
background_color: '#fafafa'
heading_font: 'Noto Sans SC',sans-serif
code_font: 'JetBrains Mono',monospace

• Input:

  path/to/article.md

• Output:

  path/to/article_wechat.html

1. Complete HTML file
2. Inline styles (can be directly copied to official account)
3. Retain image links
4. Automatically process code blocks, quote blocks, lists, etc.

1. Read Markdown File
   • Parse frontmatter (title, summary, etc.)
   • Extract body content
2. Load Theme Configuration
   • Read theme parameters
   • Apply user-defined parameters
3. Convert to HTML
   • Markdown → HTML structure
   • Apply theme styles (inline)
   • Process special elements (code, images, quotes)
4. Output File
   • Generate complete HTML
   • Save to specified path
   • Output usage instructions

1. Create a new theme configuration file in the

   themes/

   directory:
   yaml

   # themes/my-theme.yaml
   name: my-theme
   description: My Custom Theme
   font_family_cn: 'Custom Font CN'
   font_family_en: 'Custom Font EN'
   font_size: 16
   line_height: 1.8
   accent_color: '#ff6b6b'
   background_color: '#f8f9fa'
   heading_font: 'Heading Font'
   code_font: 'Code Font'

2. Use the new theme:
   bash

   /wechat-styler article.md --theme my-theme

1. Font Fallback: All fonts have complete fallback stacks to ensure normal display on different systems
2. Image Processing: Retain original image links, ensure image bed is accessible
3. Code Blocks: Use monospaced fonts + light background
4. Quote Blocks: Light background or thin left line, avoid heavy borders
5. Image Centering: Images use both parent

   text-align:center

   and their own

   margin:0 auto

   to prevent image offset after copying to the official account editor
6. Official Account Compatibility: All styles are inline, background colors use solid hex values, avoid rgba / body background loss in the editor

code

This is a quote

**Output HTML:**
- Complete HTML usable for WeChat Official Accounts
- All styles are inline
- Can be directly copied and pasted

scripts/convert.mjs

• Node.js 18+
• marked (Markdown parsing)
• js-yaml (YAML parsing)

wechat-styler/
├── SKILL.md
├── scripts/
│   └── convert.mjs
├── themes/
│   ├── elegant.yaml
│   ├── kami.yaml
│   ├── magazine-dune.yaml
│   ├── magazine-forest.yaml
│   ├── magazine-indigo.yaml
│   ├── magazine-ink.yaml
│   ├── magazine-kraft.yaml
│   ├── modern.yaml
│   └── minimal.yaml
└── templates/
    └── base.html