mcpField
W
wechat-theme-extractor

wechat-theme-extractor

github.com/yangsonhung设计与 UI1851 次安装12 周前更新
代码仓库

关于 wechat-theme-extractor

分析微信公众号文章的视觉样式，并为 markdown-wechat-converter 生成可复用主题。技能会将主题写入 markdown-to-wechat.html，并支持检查和预览结果。

主要功能

  1. 01提取微信公众号文章 HTML 和标题
  2. 02分析字体、颜色与间距
  3. 03生成可复用的转换器主题
  4. 04添加或更新主题定义
  5. 05验证并预览结果

适用场景

  1. 01根据微信公众号文章创建转换器主题
  2. 02预览新生成的文章样式

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/yangsonhung/awesome-agent-skills --skill wechat-theme-extractor

安装后在 Claude Code 中输入/wechat-theme-extractor确认已加载。

附带文件agents/openai.yamlscripts/extract.py

详细介绍

微信主题提取器

概述

从微信公众号文章中提取布局和样式特征，然后为 markdown-wechat-converter 生成可复用的主题。此工作流会根据文章推导字体排版、颜色、间距和区块样式，将生成的主题写入 markdown-to-wechat.html，并支持预览结果。

适用场景

在用户遇到以下情况时使用此技能：

  • 提供 mp.weixin.qq.com 文章 URL
  • 想要从微信公众号文章中提取字体排版、颜色、间距和区块样式
  • 想要为 markdown-wechat-converter 生成新主题
  • 想要将主题写入 markdown-to-wechat.html 并预览

不适用场景

遇到以下情况时不要使用此技能：

  • URL 不是微信公众号文章
  • 用户只想提取文章文本，不需要分析主题
  • 目标项目不包含 markdown-wechat-converter 或 markdown-to-wechat.html

说明

  1. 运行 scripts/extract.py，获取文章 HTML 并提取标题和 js_content。
  2. 阅读 .extracted_content.html，直接从 HTML 中分析样式特征。
  3. 生成与 markdown-wechat-converter 兼容的主题对象。
  4. 在当前工作区中找到 markdown-to-wechat.html，并注入新主题，同时确保不破坏现有主题定义。
  5. 重新打开文件，确认主题条目已实际写入。
  6. 如果验证成功，在浏览器中打开 markdown-to-wechat.html 进行预览。

工作流

User provides URL
  -> run extractor script
  -> produce .extracted_content.html
  -> analyze styles
  -> generate theme config
  -> write into markdown-to-wechat.html
  -> verify write result
  -> open preview

运行脚本

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

脚本职责

Python 脚本仅负责：

  • 获取文章 HTML
  • 提取文章标题
  • 提取 js_content 正文片段
  • 将结果保存到 .extracted_content.html

AI 负责：

  • 分析样式
  • 生成主题
  • 注入配置
  • 写入后验证
  • 打开预览

markdown-to-wechat.html 注入规则

更新 markdown-to-wechat.html 时，请遵循以下规则：

  1. 先找到实际的主题来源。

    • 编辑前，搜索与主题相关的对象、数组、映射或 const 赋值。
    • 除非文件中确实存在，否则不要假设变量名固定。

  2. 保留现有结构。

    • 与文件当前使用的对象格式、引号格式、缩进和尾随逗号约定保持一致。
    • 不要重新格式化无关部分。

  3. 新增，不要盲目覆盖。

    • 如果不存在同名新主题，则在现有主题集合中追加新条目。
    • 如果已存在同名主题，只更新该条目，不要重复添加。

  4. 限定改动范围。

    • 只修改主题定义区块，以及使主题可选所需的最小注册钩子。
    • 除非文件结构要求进行最小连接改动，否则不要修改渲染器逻辑、事件处理程序或无关的 UI 代码。

  5. 写入后进行验证。

    • 重新读取已编辑区段，确认主题键、标题和核心样式属性均已写入。
    • 如果无法安全定位主题区块，请停止操作，并说明需要人工确认目标文件结构。

主题片段示例

生成与目标文件现有结构相符的主题对象。以下是一个最简参考格式：

{
  id: "wechat-clean-blue",
  name: "WeChat Clean Blue",
  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"
    }
  }
}

写入时：

  • 匹配 markdown-to-wechat.html 中实际使用的字段名称
  • 如果目标文件使用数组、映射或嵌套注册结构，请转换此格式
  • 至少包含主题键、显示名称和核心字体排版样式

输出文件

  • scripts/.extracted_content.html：提取出的文章正文 HTML，顶部附有标题和来源 URL 注释

验证清单

  • 已成功获取文章 HTML
  • .extracted_content.html 存在且非空
  • 已提取标题和 js_content
  • 新主题条目已存在于 markdown-to-wechat.html 中
  • 预览页面已成功打开

评论

支持 Markdown