wechat-theme-extractor-cn

WeChat Article Theme Extractor

Overview

Extract body styles from a WeChat Official Account article, generate a theme configuration usable for markdown-wechat-converter , and automatically write it to the target tool file. The process analyzes fonts, colors, spacing, and block styles from the article, writes the new theme into markdown-to-wechat.html, and supports previewing after writing.

When to Use

Use this skill when the user has the following needs:

• Provide a WeChat Official Account article link and request extraction of layout and styles
• Want to generate a new theme configuration based on an existing WeChat article
• Need to automatically write the theme into markdown-to-wechat.html
• Need to directly open the target HTML preview after writing is complete

Do Not Use

This skill should not be used in the following scenarios:

• Non-WeChat Official Account article links
• The user only wants to extract plain text content and does not need to analyze theme styles
• The target project does not contain markdown-wechat-converter or the corresponding HTML configuration file

Usage Instructions

1. First run scripts/extract.py, which is only responsible for fetching the article HTML, extracting the title, and js_content。
2. Read the generated .extracted_content.html, and the AI analyzes style features such as colors, font sizes, spacing, heading levels, quote blocks, and divider elements on its own.
3. Based on the analysis results, generate a theme configuration adapted to markdown-wechat-converter .
4. Locate and modify markdown-to-wechat.htmlin the current workspace, appending the new theme to the existing theme configuration while avoiding damage to the existing structure.
5. After modification, check the target file again to confirm that the theme configuration has been successfully written.
6. If writing succeeds, use the system browser to open markdown-to-wechat.html for preview.

Execution Flow

用户提供链接
  -> 运行提取脚本
  -> 生成 .extracted_content.html
  -> AI 分析样式
  -> 生成主题配置
  -> 写入 markdown-to-wechat.html
  -> 校验写入结果
  -> 打开 HTML 预览

Run Script

python3 scripts/extract.py "https://mp.weixin.qq.com/s/xxxxx"

Script Responsibility Boundaries

The Python script only does the following:

• Fetch the WeChat article HTML
• Extract the article title
• Extract the js_content body fragment
• Save as .extracted_content.html

The following work is done by the AI:

• Style feature analysis
• Theme structure generation
• Write to the target tool configuration
• Verify the write result
• Open the preview

Write to markdown-to-wechat.html Rules

When updating markdown-to-wechat.html , the following rules must be observed:

1. First locate the real theme configuration area.

   • First search for theme-related objects, arrays, mappings, or const definitions, then decide where to modify.
   • Do not assume fixed variable names; the existing structure of the file must be the standard.

2. Maintain the original code style.

   • Continue the file's current indentation, quote style, comma style, and object structure.
   • Do not casually rearrange or format unrelated code.

3. Prefer appending or making targeted updates.

   • If the theme name does not exist, append a new entry to the existing theme collection.
   • If a theme with the same name already exists, only update that theme entry and do not insert it repeatedly.

4. Limit the scope of modification.

   • Only modify the theme definition area and the minimal registration code necessary to make the theme selectable.
   • Do not modify rendering logic, event handling, or other UI code unless the file structure mandates it.

5. After writing, a re-check is required.

   • Re-read the modified snippet to confirm that the theme key name, display name, and core style fields are all present.
   • If the theme block cannot be safely located, stop automatic writing and clearly state that the target structure needs manual confirmation.

Example theme snippet

When generating a theme, prioritize producing an object consistent with the existing structure of the target file. Below is a minimal example for reference:

{
  id: "wechat-clean-blue",
  name: "微信清爽蓝",
  styles: {
    body: {
      fontFamily: "\"PingFang SC\", \"Helvetica Neue\", sans-serif",
      fontSize: "16px",
      color: "#2b2b2b",
      lineHeight: "1.75",
      backgroundColor: "#ffffff"
    },
    h1: {
      fontSize: "24px",
      fontWeight: "700",
      textAlign: "center",
      color: "#1f3a5f"
    },
    h2: {
      fontSize: "20px",
      fontWeight: "700",
      color: "#1f3a5f",
      borderBottom: "2px solid #9ec1ff"
    },
    blockquote: {
      color: "#4a5568",
      backgroundColor: "#f7fbff",
      borderLeft: "4px solid #7fb3ff",
      padding: "12px 16px"
    }
  }
}

When actually writing:

• Field names must be based on markdown-to-wechat.html the existing theme structure
• If the target file uses array items, mapped values, or a nested registration format, rewrite this example according to the original structure
• Include at least the theme identifier, display name, and core typography styles

Output files

• scripts/.extracted_content.html: the extracted body HTML, with the header containing the title and the original URL comment

Checklist

• Able to successfully fetch the article HTML
• .extracted_content.html has been generated and its content is non-empty
• The title and js_content
• The new theme has been written to markdown-to-wechat.html
• markdown-to-wechat.html It can be previewed normally after opening