SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场sqsl-style-cloner

sqsl-style-cloner

写作与研究

查看项目

更新于 10-16 11:15

技能介绍

SQSL Style Cloner：微信公众号排版风格逆向与克隆工坊。

用途

该工具用于微信公众号文章的排版风格逆向解析与克隆。用户可将喜欢的公众号文章排版风格提取出来，生成可复用的风格模块，并注册到 sqsl-article-to-wechat 排版引擎中，使自己的文章套用相同排版质感。

主要能力

  1. 风格智能克隆：输入任意公众号文章 URL、HTML 片段或截图，自动逆向解析其视觉 DNA，如品牌色、强调色、引言卡、标题边框、列表等。
  2. 自动注册到排版引擎：一键将新克隆的风格编译为标准 Python 风格模块，无缝注入 sqsl-article-to-wechat。

核心流程为：公众号文章 URL 或 HTML 片段 → clone_wechat_style.py 视觉逆向分析 → 提取视觉 DNA（主色、强调色、引言卡底色、边框、段落参数）→ 生成标准风格模块 style_{name}.py → 自动注入 sqsl-article-to-wechat/styles/ 风格池 → 使用 /sqsl-article-to-wechat 我的文章.md --style {name} 排版。

使用方式

新手引导模式下，当用户输入包含「使用引导」「怎么用」「新手」「帮助」时，Agent 会输出结构化指引：

  • 这是什么：只要看到别人家公众号排版好看，把链接发给工具，即可帮助复刻克隆其配色与排版风格。
  • 怎么用：发送 /sqsl-style-cloner https://mp.weixin.qq.com/s/... 或直接发送文章链接并说“克隆这个排版”。
  • 克隆后在哪：克隆完成后会自动生成一个风格代号（如 urban_chic），并自动注册到 sqsl-article-to-wechat。
  • 如何使用新风格：克隆后，在排版文章时直接使用 --style 你的风格代号 即可调用。

克隆并提取指定公众号风格时，可直接向 Agent 发送公众号文章链接： /sqsl-style-cloner https://mp.weixin.qq.com/s/xxxxxxxxxxxx --name tech_blue --display-name "极客深蓝风" 或使用自然语言： /克隆公众号风格 帮我把这篇公众号的排版样式提取出来：https://mp.weixin.qq.com/s/xxxxxxxxxxxx

Agent 自动执行流程：

  1. 运行 clone_wechat_style.py 抓取并解析文章正文；
  2. 提取视觉 DNA 并输出色彩卡与调色板；
  3. 编译生成 style_{name}.py，自动部署到 sqsl-article-to-wechat/styles/ 目录；
  4. 生成本地 _风格预览.html 供用户验收；
  5. 提示用户现在可以使用 /sqsl-article-to-wechat 文档.md --style {name} 直接排版。

终端 CLI 独立调用：

从公众号在线链接克隆

python3 scripts/clone_wechat_style.py "https://mp.weixin.qq.com/s/xxx" --name "cool_gray" --display-name "冷灰极简风"

从本地 HTML 片段克隆

python3 scripts/clone_wechat_style.py "examples/sample_wechat_article.html" --name "urban_chic" --display-name "都市摩登风"

逆向克隆核心军规

工具强调在排版风格复刻时须遵守以下约束。

四大历史教训与防范机制：

  1. 拒绝死板的全局色彩计数（色彩深度解构）：单纯用 Counter() 统计所有 CSS 颜色频次，容易抓出中性文字色，而遗漏「胶带高亮底色」与「手作燕麦米灰卡片色」。约束：必须针对 H2/H3、span 高亮、引用卡背景进行定向嗅探，提取其特定角色色彩。
  2. 严禁老模板代码残留（零杂色渗透约束）：渲染引擎曾硬编码旧版藏青色 #08285E 在加粗、代码块和预览栏上，导致非蓝色风格被外来蓝色污染。约束：全文所有元素，包含正文加粗、行内代码、列表标记 ●、引言卡底色、预览药丸工具栏，必须 100% 动态继承自被克隆风格的属性，严防任何默认颜色泄漏。
  3. 大刊风格的灵魂在于「大标题图层化」（序号与装饰转图片）：Voicer/Nowre 等顶级生活或潮流大刊，其章节大标题的序号往往不是纯文本，而是经过精心排版的艺术数字插图。如果只生成纯文本，质感会完全降级。约束：克隆时必须检查 H2 前后是否存在装饰性插图。若存在，必须原样提取其图片或调用无头 Chrome 动态渲染该字体的透明数字图层，实现 1:1 视觉还原。
  4. 技能职责边界绝对纯净（发布技能不瞎造封面）：曾错误地调用旧版带 3D 喇叭与声波的特定 Rive 封面生成器，喧宾夺主。约束：通用排版与发布技能的核心在于忠实呈现文稿，绝不擅自生成与文章无关的特定营销模版封面。

逆向克隆「六必查」清单，在生成风格模块前必须对目标网页完成以下 6 个维度检查：

  • 必查 1【大标题序号】：H2 标题上方或侧边是否有艺术数字图片/SVG？如有，必须转为图片图层渲染。
  • 必查 2【大标题装饰】：标题文字是否有背景胶带底色（background-color）、下划线、竖条还是水印？
  • 必查 3【引言卡形态】：是简单的 border-left 边框线，还是整体大面积浅底色（如 #F7F6F3 燕麦卡片）？
  • 必查 4【字间距与呼吸感】：正文与标题是否有明显的字间距（letter-spacing: 1.5px ~ 2px）和宽松行高（line-height: 1.8）？
  • 必查 5【列表与重点标记】：列表前缀是圆点 ●、连字符 - 还是数字？==highlight== 标记底色为何？
  • 必查 6【全流程配色一致性】：从文章正文到浏览器预览工具栏，是否彻底清除了任何无关杂色？

核心法则为双轨驱动：代码逆向 + 视觉多模态回看对照。微信公众号排版由于经过富文本编辑器多次转译，HTML/CSS 往往极其脏乱碎片化。很多看似是 CSS 边框的效果其实是背景贴纸，很多看似是文本的标题其实是内嵌图层。因此，Agent 在克隆和排版时必须强制执行「双轨对照」工作流：

输入目标文章 URL → 轨道一：代码解析（DOM/CSS/色彩提取）与轨道二：视觉捕获（无头渲染/截图关键组件）→ 合成风格类并生成预览 HTML → 强制动作：使用 view_file 视觉工具回看渲染图 → 视觉像素级对照。发现字距过挤、色温不对、漏掉装饰时修改 style 模块并微调参数；当第一眼气场、留白尺度、标题神韵完全一致时正式输出与交付。

视觉验收四问（必须调用 view_file 看图自查）：

  1. 第一眼气场（Visual Tone）：色温是否一致？原版是手作暖色调还是现代冷色调？当前排版是否有哪怕 1 处生硬刺眼的杂色？
  2. 大标题神韵（Heading Weight & Decor）：原版大标题的数字序号是普通文字还是艺术图层？标题文字背后是否有胶带底衬或水印？
  3. 留白与呼吸感（Breathing & Rhythm）：段落间距、引用卡 padding 是否足够通透？字间距（letter-spacing）是否像大刊一样舒展？
  4. 组件形神兼备（Component Fidelity）：引言卡是一条生硬的边线，还是一整块柔和的燕麦纸质感卡片？列表小点是否灵动？ 只有当 Agent 亲自通过图像工具看过了渲染效果，确认和原版“形神兼备”后，才算真正完成克隆。

适用场景

适用于希望快速复刻他人公众号排版风格的公众号内容创作者与排版设计师，将目标文章视觉调性提取为可复用风格模块，并在 sqsl-article-to-wechat 排版流程中以 --style 参数调用。

限制

关于支持的具体输入格式、平台兼容性、是否收费、价格、渲染效果等未在资料中详细说明的部分，暂未提供。