en un clic
rico-wechat-theme
// 从公众号文章链接中提取排版样式,生成可复用的公众号主题文件。当用户说"rico 制作公众号主题"、"rico 公众号主题"、或者提供公众号文章链接要求提取/制作主题时触发。也适用于用户想要分析公众号文章的排版风格、将某篇文章的样式转化为主题模板的场景。
// 从公众号文章链接中提取排版样式,生成可复用的公众号主题文件。当用户说"rico 制作公众号主题"、"rico 公众号主题"、或者提供公众号文章链接要求提取/制作主题时触发。也适用于用户想要分析公众号文章的排版风格、将某篇文章的样式转化为主题模板的场景。
| name | rico-wechat-theme |
| description | 从公众号文章链接中提取排版样式,生成可复用的公众号主题文件。当用户说"rico 制作公众号主题"、"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 无法获取到足够的样式细节,向用户说明并请求:
js_content 区域的 HTML 粘贴过来需要提取的排版要素:
关键提取策略: 微信公众号文章的样式主要存储在 <p style="..."> 和 <span textstyle="" style="font-size: 16px; ..."> 的内联 style 属性中。核心是找出:
基于提取的样式信息,参照 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 组不同的主题名和文件名组合。展示格式:
请选择一个主题(输入编号 1-5):
1. 🎨 主题名:[名称] | 文件名:wechat-[key].js
2. 🎨 主题名:[名称] | 文件名:wechat-[key].js
3. 🎨 主题名:[名称] | 文件名:wechat-[key].js
4. 🎨 主题名:[名称] | 文件名:wechat-[key].js
5. 🎨 主题名:[名称] | 文件名:wechat-[key].js
5 个选项的命名思路应各有侧重:
用户选择后,用选定的名称和文件名生成最终的主题文件。
输出内容包含:
wechat-anthropic.js)themes/ 目录index.js 中添加 import 和 STYLES 条目严格按照以下格式输出:
/**
* Theme: [用户选择的主题名]
* Key: [对应的 key]
*/
export const theme = {
"name": "[主题名]",
"styles": {
"container": "...",
"h1": "...",
// 所有必需属性
}
};
!important 标记以确保在微信环境中生效container 的 max-width 一般在 620-740px 之间max-height 一般设为 600px !important