我最近在做公众号，前几天我发帖子，说要开源我的项目，现在终于可以端上来了😄
做过公众号运营的朋友应该都遇到过这个痛点：
看到某篇文章排版特别舒服，格式特别棒，想学习它的视觉风格，但只能对着屏幕瞎猜，模仿学习太难了
字号是 16px 还是 17px？行高多少？那个卡片组件怎么做的？左边的强调线是几个像素？
有 AI 之前的方法，是打开浏览器开发者工具，一个个元素去检查 CSS 属性，费时费力，还容易漏掉细节
有了 AI 之后，可以让 AI 帮你提取
但是每次都让 AI 来提取也忒不方便了
所以，我开发了一个工具叫 样格（WeChat Style Extractor），核心功能是：
输入任意公众号文章链接 → 自动识别排版规则 → 生成可复用的视觉模板 → 直接复制到微信编辑器
一、技术原理
公众号文章本质是 HTML + CSS，工具通过以下步骤提取样式：
1. 抓取与解析
通过服务端请求获取文章 HTML，解析 DOM 结构，定位正文容器（通常是 <div id="js_content">）。
2. 识别内容组件
根据标签、类名、样式特征，识别出：
标题（<h1> ~ <h6>、strong + 大字号）
正文段落（<p>、<section>）
引用/提示框（带背景色、边框的容器）
分隔线（<hr> 或带 border 的空容器）
卡片组件（圆角、背景色、内边距）
3. 计算样式规则
提取每个组件的关键参数：
颜色：color、background-color、border-color
字体：font-size、font-weight、line-height
间距：margin、padding
边框：border-width、border-style、border-radius
4. 归一化与去重
相近颜色合并（色差 < 阈值）
字号/间距取中位数
过滤无效样式（如 inherit、auto）
5. 生成富文本预览
根据提取的规则，生成标准 HTML，保留样式但移除原文图片和品牌元素，用户可以直接复制到微信编辑器
二、使用步骤
第一步：打开工具
访问在线地址：https://wechat-style-extractor.godkey810.chatgpt.site
第二步：粘贴链接
在输入框中粘贴想要学习的公众号文章链接（当前版本已内置示例文章，未来会支持任意链接解析）
第三步：查看提取结果
左侧显示视觉参数和组件规则
第四步：复制富文本
点击"复制富文本"按钮，粘贴到微信公众号后台编辑器，样式完整保留，可以直接在此基础上修改内容
三、适用场景
1. 新手运营快速学习头部账号的排版风格，缩短上手时间
2. 团队协作统一视觉规范
3. 避免每篇文章风格不一致
4. 计师沉淀品牌排版模板，提高交付效率
5. 自媒体作者专注内容创作，不再纠结格式细节
四、产品路线
当前是 MVP 版本，未来可能的计划：
1. 保存多套个人视觉模板
2. 输入纯文字后一键套用模板
3. 图片素材迁移与草稿箱同步
4. 导出为可安装的 Codex Skill
欢迎提 Issue 或 PR 参与共建。
总结
如果你也遇到过"想学好排版但无从下手"的痛点，不妨试试这个工具。
🔗 在线试用：https://wechat-style-extractor.godkey810.chatgpt.site
💻 开源地址：https://github.com/sennkuwu/wechat-style-extractor
欢迎点赞、收藏、分享，也期待你的反馈和建议！