SuperAPI AI Directory
Partner中文AI newsFavorites
Skillssqsl-style-cloner

sqsl-style-cloner

Writing & research

View repository

Updated 10-16 11:15

About this skill

SQSL Style Cloner: WeChat Official Account layout style reverse engineering and cloning workshop

Designed for content creators and layout designers, Official Account layout reverse engineering and style cloning engineIt can take the visual tone of any WeChat Official Account article you like (primary color, accent color, quote cards, heading decorations, list markers, etc.),extract it in reverse with one click and seamlessly register it to the sqsl-article-to-wechat layout engine, so your article can immediately apply that major account's layout texture!

Core workflow

flowchart TD
    A["公众号文章 URL (https://mp.weixin.qq.com/s/...) 或 HTML 片段"] --> B["clone_wechat_style.py 视觉逆向分析"]
    B --> C["提取视觉 DNA (主色、强调色、引言卡底色、边框、段落参数)"]
    C --> D["生成标准风格模块 style_{name}.py"]
    D --> E["自动注入 sqsl-article-to-wechat/styles/ 风格池"]
    E --> F["直接使用 /sqsl-article-to-wechat 我的文章.md --style {name} 排版"]

Working modes and quick commands

0. Beginner guide mode (keywords: usage guide / how to use / help / beginner)

Trigger condition: when user input contains "usage guide"、"how to use"、"beginner"、"help" : Agent behavior：directly output the structured guide below：

Guide content：

  1. What is this: As long as you see someone else's Official Account with a nice layout, send me the link and I can help you "clone" its color scheme and layout style;
  2. How to use: send /sqsl-style-cloner https://mp.weixin.qq.com/s/... or directly send the article link and say "clone this layout";
  3. Where is it after cloning: after cloning is complete, a style code will be automatically generated (e.g. urban_chic), and automatically registered to sqsl-article-to-wechat；
  4. How to use the new style: after cloning, when laying out articles, simply use --style 你的风格代号 to call it perfectly!

1. Clone and extract a specified Official Account style

Send the Official Account article link directly to the Agent:

/sqsl-style-cloner https://mp.weixin.qq.com/s/xxxxxxxxxxxx --name tech_blue --display-name "极客深蓝风"

Or use natural language directly:

/克隆公众号风格 帮我把这篇公众号的排版样式提取出来：https://mp.weixin.qq.com/s/xxxxxxxxxxxx

Agent automatically executes the process：

  1. Run clone_wechat_style.py to fetch and parse the article body;
  2. Extract the visual DNA and output color cards and a palette;
  3. Compile and generate style_{name}.py, automatically deploy to the sqsl-article-to-wechat/styles/ directory;
  4. Generate a local _风格预览.html for user acceptance;
  5. Prompt the user that they can now use /sqsl-article-to-wechat 文档.md --style {name} for direct layout.

🎯 Core rules for reverse cloning (four retrospective lessons and six mandatory checks)

When reproducing layout styles, the following core rules must be strictly followed,never just grab a few colors and hastily apply a template：

1. Four historical lessons and prevention mechanisms

  1. Reject rigid global color counting (color depth deconstruction)：
    • Lesson: simply using Counter() to count the frequency of all CSS colors makes it easy to pick out neutral text colors, while completely missing the most essential **"tape highlight background colors" (such as #E0DEA8）and"handmade oatmeal beige card colors" (such as #F7F6F3）**。
    • Constraint: Targeted sniffing must be performed for H2/H3, span highlights, and quote card backgrounds to extract their specific role colors.
  2. Residue of old template code is strictly prohibited (zero color bleed constraint)：
    • Lesson: The rendering engine once hardcoded the old navy blue #08285E on bold text, code blocks, and the preview bar, causing non-blue styles to be severely polluted by foreign blue.
    • Constraint: All elements throughout the document (including body bold **, inline code `, list markers ●, quote card background, preview pill toolbar) must 100% dynamically inherit from the cloned style's properties, strictly preventing any default color leakage!
  3. The soul of the large-publication style lies in "layered large headings" (serials and decorations converted to images)：
    • Lesson: For top lifestyle or fashion publications such as Voicer/Nowre, the serials of their chapter large headings (such as 01、02) are often not plain text, but carefully typesetartistic numeral illustrations (such as Bodoni/Didot bold italic + soft-glow elliptical background). If only plain text is generated, the texture will be completely downgraded.
    • Constraint: When cloning, it must be checked whether decorative illustrations exist before or after the H2. If they exist, their images must be extracted as-is or headless Chrome must be invoked to dynamically render a transparent numeral layer of that font, achieving 1:1 visual restoration.
  4. Skill responsibility boundaries must be absolutely pure (publishing skills must not recklessly create covers)：
    • Lesson: The old specific Rive cover generator with 3D speakers and sound waves was mistakenly invoked, stealing the spotlight.
    • Constraint: The core of general typesetting and publishing skills lies in faithfully presenting the manuscript,never arbitrarily generating specific marketing template covers unrelated to the article。

2. Reverse-engineered cloning "Six Must-Check" checklist

Before generating the style module, the following 6 dimensions of in-depth inspection must be completed on the target webpage:

  • Must-Check 1 [Large heading serial]: Is there an artistic numeral image/SVG above or beside the H2 heading? If so, it must be rendered as an image layer;
  • Must-Check 2 [Large heading decoration]: Does the heading text have a background tape base color (background-color), underline, vertical bar, or watermark?
  • Must-Check 3 [Quote card form]: Is it a simple border-left border line, or an overall large-area light base color (such as #F7F6F3 oat card)?
  • Must-Check 4 [Letter spacing and sense of breathing room]: Do the body text and headings have obvious letter spacing (letter-spacing: 1.5px ~ 2px) and loose line height (line-height: 1.8）？
  • Must-Check 5 [Lists and emphasis markers]: Is the list prefix a bullet ●, a hyphen - , or a number?==highlight== What is the marker base color?
  • Must-Check 6 [Full-process color consistency]: From the article body to the browser preview toolbar, have any irrelevant stray colors been completely eliminated?

3. Core principle: Dual-track drive — code reverse engineering + visual multimodal review and comparison

"Just looking at code will never capture the soul; you must use your own 'eyes' to look, compare, and refine."

Because WeChat Official Account layouts undergo multiple rounds of conversion through rich text editors (Xiumi, 135, WeChat Official Account Platform), the HTML/CSS is often extremely messy and fragmented. Many effects that appear to be CSS borders are actually background stickers, and many headings that appear to be text are actually embedded layers.

Therefore, when cloning and laying out, the Agent must enforce a "dual-track comparison" workflow：

flowchart TD
    A["输入目标文章 URL"] --> B["轨道一：代码解析 (DOM/CSS/色彩提取)"]
    A --> C["轨道二：视觉捕获 (无头渲染/截图关键组件)"]
    B & C --> D["合成风格类并生成预览 HTML"]
    D --> E["强制动作：使用 view_file 视觉工具回看渲染图"]
    E --> F{"视觉像素级对照"}
    F -->|发现字距过挤/色温不对/漏掉装饰| G["修改 style 模块，微调参数"]
    G --> D
    F -->|第一眼气场、留白尺度、标题神韵完全一致| H["正式输出与交付"]

Four questions for visual acceptance (you must call view_file to inspect the image and self-check):

  1. First-impression aura (Visual Tone): Is the color temperature consistent? Is the original a handmade warm tone or a modern cool tone? Does the current layout have even 1 harsh, jarring stray color?
  2. Heading spirit (Heading Weight & Decor): Is the numeric sequence of the original main heading ordinary text or an artistic layer? Is there a tape backing or watermark behind the heading text?
  3. Whitespace and breathing room (Breathing & Rhythm): Are the paragraph spacing and quote card padding airy enough? Is the letter-spacing (letter-spacing) as expansive as a major publication?
  4. Components with both form and spirit (Component Fidelity): Is the introduction card a harsh borderline, or a whole soft oatmeal-paper-textured card? Are the list bullets lively?

Only after the Agent has personally viewed the rendered effect through an image tool and confirmed that it has both form and spirit with the original can the clone be considered truly complete!

4. Standalone invocation of the terminal 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 "都市摩登风"