做公众号运营的都有这种体验：看到别人文章里好看的排版模块——标题样式、引导关注卡片、样式引用、分隔线——想拿来用，但一段段抠 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 导出/导入。
不上传
全程浏览器内运行，素材绝不离开你的设备。