tomevault-io Rico 公众号主题制作器
从微信公众号文章中提取排版细节，生成符合项目格式的主题文件。
工作流程
第一步：获取文章链接
如果用户直接提供了公众号文章链接（mp.weixin.qq.com 格式），直接使用。如果没有，向用户索要。
第二步：读取文章内容
方式一（优先）：用户直接提供文章 HTML 源码或包含源码的文件。 如果用户已经把公众号文章的排版内容（HTML）放在文件里（如项目中的 示例：xxx.txt），直接读取该文件，从中提取 js_content 或 rich_media_content 区域内的样式信息。
方式二：通过 web reader 读取。 使用 mcp__web_reader__webReader 工具读取文章页面。注意：web reader 通常返回的是渲染后的文本/markdown，而非原始 HTML，因此大部分内联样式会丢失。如果 web reader 无法获取到足够的样式细节，向用户说明并请求：
- 方式 A：请用户在浏览器中打开文章，右键查看源代码，复制
js_content区域的 HTML 粘贴过来 - 方式 B：请用户提供一个包含文章 HTML 源码的本地文件路径
需要提取的排版要素：
- 全局样式：font-family、font-size、line-height、color、background-color、margin（从 p 标签的 style 属性、span 的 textstyle 样式中提取）
- 段落样式：字号（通常在 span textstyle 的 font-size 中）、行高、颜色、margin-left/margin-right
- 加粗文本：font-weight（查找 font-weight: bold）、颜色、是否有背景高亮
- 标题样式：如果文章使用了 h1-h6 标签，提取其样式；如果没有标题标签，根据段落样式推导
- 链接样式：从 a 标签及其 span 中提取 color、text-decoration
- 引用块：如果存在 blockquote，提取边框、背景色、内边距
- 代码块：从 pre/code 区域提取背景色、字体、圆角
- 图片：从 img 标签提取圆角、宽度、边距等
关键提取策略： 微信公众号文章的样式主要存储在 <p style="..."> 和 <span textstyle="" style="font-size: 16px; ..."> 的内联 style 属性中。核心是找出：
- 正文的 font-size（最常见值，如 15px、16px、17px）
- 正文的 color
- 正文的 line-height
- margin-left / margin-right 的值
- font-family（通常在 span 的 style 中，或在文末的样式块中）
- 加粗文本的 font-weight 和 color
- 链接的颜色
第三步：分析并生成主题
基于提取的样式信息，参照 references/theme-format.md 中定义的格式，生成一个完整的主题 JavaScript 对象。主题需要覆盖所有必需的样式属性（container、h1-h6、p、strong、em、a、ul、ol、li、blockquote、code、pre、hr、img、table、th、td、tr）。
对于文章中没有明确体现的元素（如 h1-h6、table 等），根据已提取的配色和排版风格合理推导补充，保持主题的一致性。
第四步：生成主题介绍
用中文撰写一段简洁的主题介绍（50-100字），描述这个主题的视觉特征和适用场景。格式如下：
主题名称：[名称]
主题简介：[描述]
主色调：[#hex]
适用场景：[场景描述]
风格关键词：[3-5个关键词]
第五步：提供 5 个选项供用户选择
基于分析结果，为用户生成 5 组不同的主题名和文件名组合。展示格式：
请选择一个主题（输入编号 1-5）：
1. 🎨 主题名：[名称] | 文件名：wechat-[key].js
2. 🎨 主题名：[名称] | 文件名：wechat-[key].js
3. 🎨 主题名：[名称] | 文件名：wechat-[key].js
4. 🎨 主题名：[名称] | 文件名：wechat-[key].js
5. 🎨 主题名：[名称] | 文件名：wechat-[key].js
5 个选项的命名思路应各有侧重：
- 提取品牌/作者特征的命名
- 描述视觉风格的命名
- 描述情感调性的命名
- 描述适用场景的命名
- 创意/隐喻式命名
第六步：确认并输出
用户选择后，用选定的名称和文件名生成最终的主题文件。
输出内容包含：
- 主题文件内容：完整的 JS 文件代码，格式参照现有主题文件（如
wechat-anthropic.js） - 文件保存位置：提示用户将文件保存到项目的
themes/目录 - 注册提示：提醒用户在
index.js中添加 import 和 STYLES 条目
输出主题文件格式
严格按照以下格式输出：
/**
* Theme: [用户选择的主题名]
* Key: [对应的 key]
*/
export const theme = {
"name": "[主题名]",
"styles": {
"container": "...",
"h1": "...",
// 所有必需属性
}
};
注意事项
- 所有 CSS 值中的颜色使用
!important标记以确保在微信环境中生效 container的max-width一般在 620-740px 之间- 图片
max-height一般设为600px !important - 代码块（pre）通常使用深色背景，行内代码（code）使用浅色背景
- 确保文字与背景之间有足够的对比度
- 参考文章中提取的实际数值，不要使用与原文风格差异过大的默认值
Source: ricocc/rico-md — distributed by TomeVault.