做公眾號運營的都有這種體驗：看到別人文章裡好看的排版模組——標題樣式、引導關注卡片、樣式引用、分隔線——想拿來用，但一段段摳 HTML 太費勁，改圖又經常把整個 SVG 弄壞。這個工具替你幹最煩的那步：貼上一篇文章，它把每個排版塊單獨拆出來，成為可複用的獨立模組。
接下來你可以給某個模組換圖（上傳新圖或貼上圖片 URL）、點它用到的任意顏色一鍵改色、把模組複製成 inline HTML 直接粘進公眾號後臺 / CMS / 任意富文字框，還能把喜歡的存進只屬於這臺瀏覽器的本地素材庫。什麼都不上傳，素材是你自己的。
因為全程用 Clipboard 和 localStorage 在客戶端跑，沒有賬號、沒有云、沒有後端——和 IMG.DIY 其它工具一樣的本地優先理念：你自己的素材 → 你自己的庫。
使用方法
- 貼上文章複製一篇公眾號文章（或任意富文字），粘進輸入框；也可以貼上 HTML 原始碼。
- 提取模組點「提取」——每個排版塊變成一張獨立預覽卡，用 Shadow DOM 隔離，頁面樣式不會干擾它。
- 編輯複用換圖、改色，然後「複製 HTML」粘到別處，或「存入素材庫」下次直接拿。
為什麼是「提取」模組，而不是照著重做
公眾號文章裡那些好看的塊——標題卡片、引導關注、樣式引用、SVG 分隔線——幾乎都是手工拼的 inline HTML 和 SVG。照著重做一個，得把內邊距、顏色、漸層、層層巢狀的 span 全對上，改錯一處整個 SVG 就塌了。直接把成品塊提取出來，每個細節原樣保留，幾秒鐘就能複用。
這個工具解析你貼上的文章，把每個排版塊單獨拎出來成為獨立模組。不是把整頁抓成一坨，而是給你一份乾淨的、可複用的單塊清單——正是你看到別人排版好看時真正想要的東西。
本地優先，素材才真的是你的
雲編輯器把你存的模組放在它的伺服器上、鎖在賬號後面。這裡素材庫存在你自己瀏覽器的 localStorage 裡，還能匯出成 JSON 檔案備份或換機遷移。什麼都不上傳、無需註冊，解析、換圖、改色全在你裝置上用瀏覽器自帶的 DOM 和剪貼簿 API 完成。
好處很實在：一個隨手就長起來的個人便攜模組庫——貼上文章，留下值得複用的兩三個塊，下次直接把它們當 inline HTML 拖出來。
大家都用它來做什麼
複用看中的排版 — 在別人文章裡看到好看的標題卡或分隔線——提取出來，改成你的品牌色，複製進自己的草稿。
攢一套自家風格模板 — 把每期都用的標題、引用樣式、引導關注卡片，收進一個本地素材庫。
只換模板塊裡的圖 — 保留一個喜歡的圖文卡片版式，每次只把裡面的圖換成你自己上傳的。
一鍵改成品牌色 — 一次性改掉某個塊的強調色，不用在一堆 inline 樣式裡翻找。
在編輯器之間搬運 — 複製 inline HTML，粘進公眾號編輯器、CMS 或任意富文字框，樣式原樣保留。
私有便攜的素材囤 — 把素材庫匯出成 JSON 備份，或帶到另一臺瀏覽器——無賬號、無雲端。
好看的排版模組,都被鎖在別人的文章裡
做公眾號的人,攢素材的方式往往很笨。刷到一篇排版漂亮的文章——一張精緻的 SVG 標題卡、一個乾淨的"關注我們"卡片、一個側邊帶色塊的小標題——你心裡想:這個結構我想要。於是把整篇文章複製進編輯器,再花二十分鐘把不要的部分一點點刪掉,一邊刪一邊祈禱別手滑碰掉某個 <span>,把 SVG 弄塌。公眾號的 SVG 排版是出了名的脆:一個屬性放錯位置、一張圖在不該改的地方改了尺寸,卡片就在一半讀者的手機上渲染成一個破框。你想要的那些模組明明就真實地躺在 HTML 裡、明明可以複用,卻沒有一個乾淨的辦法把它單獨取出來留著。
另一半的痛,是"歸誰所有"。最順手的答案當然是秀米、135編輯器這類别範本編輯器:素材庫巨大、拖拽即用、確實好用。但素材都存在它們的雲上,鎖在賬號後面,很多還鎖在會員等級後面。你精心攢起來的那套樣式,不是一個你自己的資料夾,而是一個你租來的登入入口。想把某個模組遞給同事、想一次性把一張卡片上所有顏色改成品牌色、或者只是想留一個真正常用的五個小標題的私人庫——你都只能在別人的產品裡、按別人的規矩來。
這個工具反著來。你把文章(或任意富文字內容、或原始 HTML)粘進去,它就在你自己的瀏覽器裡解析這段程式碼,把每一個可複用的樣式塊——SVG 標題卡、帶標題的小標題欄、關注卡片、樣式引用塊、分割線——各自抽成一個獨立的模組。之後每一個都能直接編輯:換掉卡片裡的圖、改顏色、把它複製成乾淨的行內 HTML 直接粘進公眾號編輯器或任何富文字框,還能存進一個可以匯出成 JSON 的本地素材庫。沒有任何上傳,不用註冊,頁面載入完之後斷網也照樣能用。有一個限制先說清楚:它沒法憑一個網址去抓文章——瀏覽器會攔截對 mp.weixin.qq.com 的跨站請求,所以輸入方式永遠是複製貼上。
它的不同之處
- 本地優先,零上傳。 解析用瀏覽器的
DOMParser在本機完成,你粘進去的文章不出你的電腦——沒有伺服器、沒有賬號、沒有後端。 - 按模組抽取。 每一個樣式塊單獨抽成一個自成一體的模組,而不是給你一大坨纏在一起、只能手動修剪的程式碼。
- 原地換圖。 上傳新圖或貼上圖片連結,就能替換卡片裡的圖片,不去動那套讓它變脆的 SVG 結構。
- 一鍵改全域性顏色。 點一下模組用到的任意顏色,整塊的這個顏色一起改,不用在一堆十六進位制色值裡翻找,就能讓卡片對上你的品牌色。
- 乾淨的行內 HTML 複製。 一鍵把模組以行內 HTML 形式放進剪貼簿(用 Clipboard API),可以直接粘進公眾號編輯器、CMS 或任何富文字框。
- 真正屬於你的素材庫。 把模組存進本地儲存,整個合集能匯出/匯入為 JSON——一套可攜帶、真正歸你的素材包,而不是租來的登入。
- 預覽相互隔離。 每個模組在 Shadow DOM 裡渲染,一個塊的樣式不會串到另一個塊,預覽所見即貼上所得。
- 載入後可離線。 頁面載入完之後,抽取、編輯、複製都不需要聯網。
IMG.DIY 與其他排版工具對比
| IMG.DIY 模組提取 | 秀米 (xiumi.us) | 135編輯器 | i排版 | 手動摳 HTML | |
|---|---|---|---|---|---|
| 核心定位 | 抽取並擁有可複用塊 | 完整模板編輯器 | 完整模板編輯器 | 完整模板編輯器 | — |
| 模板庫 | 無(從你粘的內容裡攢) | 巨大 | 巨大 | 較大 | 無 |
| 是否需註冊 | 否 | 是 | 是 | 是 | 否 |
| 是否上傳內容 | 否 | 是(雲端) | 是(雲端) | 是(雲端) | 否 |
| 素材歸屬 | 歸你(本地 JSON) | 租用/雲端 | 租用/雲端 | 租用/雲端 | 歸你,但純手動 |
| 單塊換圖 | 有 | 有(編輯器內) | 有(編輯器內) | 有(編輯器內) | 手動 |
| 整塊改色 | 有,一鍵 | 有(編輯器內) | 有(編輯器內) | 有(編輯器內) | 手動 |
| 是否可離線 | 載入後可以 | 否 | 否 | 否 | 可以 |
| 價格 | 免費 | 免費檔 + 付費 | 免費檔 + 付費 | 免費檔 + 付費 | 免費 |
平心而論,這個工具不是模板編輯器的替代品,也不假裝是。秀米、135編輯器、i排版都是成熟產品,模板庫龐大、拖拽排版實時可見、打磨多年——如果你要從零排一篇內容豐富的文章,就該用它們,它們的名氣是實打實掙來的。它們給不了的,是一個私有、可攜帶、你想改隨時改、且什麼都不出本機的"常用塊資料夾"。這個工具是抽取器和整理器,不是編輯器:它把你在別處看中的塊,變成歸你所有、能改色、能換圖、能粘到任何地方的模組。用大編輯器來排版,用它來把那些零件留下來。
為什麼選 IMG.DIY
模組提取
把 SVG 卡片、標題、引用、分隔線拆成獨立模組。
模組內換圖
把塊裡的任意圖片換成你自己的——上傳或 URL。
一鍵改色
點塊裡用到的任意顏色，一次全部替換。
複製 inline HTML
直接粘進公眾號後臺、CMS 或富文字框。
本地素材庫
模組存到本瀏覽器，可 JSON 匯出/匯入。
不上傳
全程瀏覽器內執行，素材絕不離開你的裝置。