Если вы ведёте официальный аккаунт WeChat (или любое rich-текстовое издание), вы наверняка видели вёрстку, которую хотелось бы переиспользовать — карточку с заголовком раздела, блок «подпишитесь», стилизованную цитату, разделитель. Копировать их вручную — значит копаться во вложенном HTML, где одна неверная правка ломает весь SVG. Этот инструмент делает нудную часть за вас: вставьте статью, и он вытянет каждый стилизованный блок как самостоятельный переиспользуемый модуль.
Дальше вы можете менять картинки внутри блока (загрузить новую или вставить URL), перекрашивать его кликом по любому используемому цвету, копировать блок как inline-HTML, готовый к вставке в редактор WeChat, CMS или любое rich-текстовое поле — и сохранять понравившиеся в локальную библиотеку, которая живёт в этом браузере. Ничего не загружается на сервер; ваши материалы принадлежат вам.
Поскольку всё работает на стороне клиента через API буфера обмена и localStorage, здесь нет ни аккаунта, ни облака, ни бэкенда — та же идея local-first, что и у остального IMG.DIY.
Как пользоваться
- Вставьте статьюСкопируйте статью WeChat (или любой rich-контент) и вставьте в поле. Можно вставить и исходный HTML.
- Извлеките модулиНажмите «Извлечь» — каждый стилизованный блок появляется своей превью-карточкой, изолированной, чтобы стили страницы не мешали.
- Редактируйте и переиспользуйтеМеняйте картинки, перекрашивайте, затем «Копировать HTML» для вставки в другое место или «Сохранить» в локальную библиотеку на будущее.
Почему извлекать блоки вёрстки, а не пересобирать их
Красивые блоки в статьях WeChat — карточки-секции с заголовками, призывы подписаться, стилизованные цитаты, SVG-разделители — почти всегда собранный вручную инлайновый HTML и SVG. Пересобирать такой блок с нуля означает точно подгонять отступы, цвета, градиенты и вложенные span, а одна неверная правка ломает SVG. Извлечение готового блока вместо этого сохраняет каждую деталь целой и превращает его в нечто, что можно переиспользовать за секунды.
Этот инструмент разбирает вставленную вами статью и извлекает каждый стилизованный блок как независимый модуль. Вы не соскабливаете целую страницу в один ком; вы получаете опрятный список отдельных, переиспользуемых кусков — ровно то, что вам хотелось, когда вы увидели красивую вёрстку в чужом посте.
Сначала локально, чтобы ассеты действительно были вашими
Облачные редакторы держат ваши сохранённые блоки на своих серверах за аккаунтом. Здесь библиотека живёт в вашем собственном браузере через localStorage, и вы можете экспортировать её в JSON-файл, чтобы сделать резервную копию или перенести между машинами. Ничего не загружается на сервер, нет регистрации, а разбор, замена изображений и перекраска работают на вашем устройстве с помощью собственных DOM и Clipboard API браузера.
Практическая выгода — это личная, переносимая библиотека модулей, растущая по мере работы: вставьте статью, оставьте два-три блока, стоящих переиспользования, и в следующий раз перетащите их прямо обратно как инлайновый HTML.
Для чего это используют
Переиспользуйте понравившуюся вёрстку — Увидели красивую карточку с заголовком или разделитель в другой статье — извлеките, перекрасьте под свой бренд и скопируйте в свой черновик.
Соберите набор фирменного стиля — Соберите заголовки секций, стили цитат и карточки подписки, которые используете каждый выпуск, в одну локальную библиотеку.
Замените изображения в блоке-шаблоне — Оставьте любимую раскладку карточки с изображением и просто заменяйте картинку каждый раз своей загрузкой.
Перекрасьте под свой бренд — Измените акцентный цвет блока везде разом, а не выискивайте по инлайновым стилям.
Переносите блоки между редакторами — Скопируйте инлайновый HTML, который вставляется со стилями целыми в редактор WeChat, CMS или любое поле с форматированием.
Держите приватный, переносимый запас — Экспортируйте свою библиотеку как JSON, чтобы сделать резервную копию или перенести в другой браузер — без аккаунта, без облака.
Хорошие блоки вёрстки заперты внутри чужих статей
Каждый, кто ведёт официальный аккаунт WeChat, собирает блоки вёрстки медленным путём. Вы читаете статью с красивой SVG-карточкой заголовка, аккуратной панелью «подпишитесь на нас», заголовком секции с цветной полосой сбоку и думаете: хочу такую структуру. Так что вы копируете всю статью в свой редактор, а потом двадцать минут удаляете всё, кроме одного нужного блока, моля, чтобы не задеть случайный <span>, из-за которого SVG схлопнется. SVG-типографика WeChat печально известна своей хрупкостью — один неверный атрибут, одно изображение, которое вы изменили не в том месте, и карточка отрисовывается как сломанный прямоугольник на половине читательских телефонов. Нужные блоки реальны, переиспользуемы и лежат прямо там в HTML, но нет чистого способа вынуть один и сохранить.
Другая половина боли — владение. Очевидный ответ — редактор шаблонов вроде 秀米 или 135编辑器: огромные библиотеки, перетаскивание, по-настоящему мощные. Но ассеты живут в их облаке, за аккаунтом, а часто и за уровнем подписки. Ваш тщательно собранный набор стилей — не папка, которой вы владеете, а логин, который вы арендуете. Захотите передать блок коллеге, сменить цвет во всех карточках сразу или просто держать личную библиотеку из пяти заголовков, которые вы реально переиспользуете, — вы работаете внутри чужого продукта на чужих условиях.
Этот инструмент идёт противоположным путём. Вы вставляете статью (или любой богатый контент, или сырой HTML), и он разбирает разметку прямо в вашем браузере, вытаскивая каждый переиспользуемый стилизованный блок — SVG-карточки типографики, заголовки секций, карточки «подпишитесь на нас», стилизованные цитаты, разделители — как отдельный независимый модуль. Оттуда вы редактируете каждый напрямую: меняете изображение внутри карточки, перекрашиваете, копируете как чистый инлайн-HTML, готовый вставить в редактор WeChat или любое поле форматированного текста, и сохраняете в локальную библиотеку, которую можно экспортировать как JSON. Ничего не загружается, нет аккаунта, и как только страница загружена, работает офлайн. Один честный предел сразу: он не может забрать статью по её URL — браузеры блокируют межсайтовые запросы к mp.weixin.qq.com, так что ввод всегда через копирование-вставку.
Чем это отличается
- Локально в первую очередь, ничего не загружается. Разбор происходит в браузере через
DOMParser. Вставленная статья никогда не покидает вашу машину — ни сервера, ни аккаунта, ни бэкенда. - Извлечение по модулям. Каждый стилизованный блок выходит как отдельный, самодостаточный модуль вместо стены запутанной разметки, которую надо подрезать вручную.
- Замена изображения на месте. Замените картинку внутри карточки, загрузив новую или вставив URL изображения, — не трогая окружающую SVG-структуру, которая делает её хрупкой.
- Перекраска везде сразу. Кликните любой цвет, используемый модулем, и смените его во всём блоке одним движением, так что карточка совпадает с вашим брендом без охоты по HEX-кодам.
- Чистое копирование инлайн-HTML. Один клик кладёт модуль в буфер обмена как инлайн-HTML (через Clipboard API), готовый вставить прямо в редактор WeChat, CMS или любое поле форматированного текста.
- Библиотека, которой владеете вы. Сохраняйте модули в локальное хранилище и экспортируйте или импортируйте всю коллекцию как JSON — настоящий, переносимый набор ассетов, а не арендуемый логин.
- Изолированные превью. Каждый модуль рендерится внутри Shadow DOM, так что стили одного блока не могут просочиться в другой, и превью показывает ровно то, что вы вставите.
- Работает офлайн после загрузки. После загрузки страницы соединение не нужно, чтобы извлекать, редактировать или копировать.
IMG.DIY против других инструментов вёрстки
| IMG.DIY Экстрактор модулей | 秀米 (xiumi.us) | 135编辑器 | i排版 | Копировать HTML вручную | |
|---|---|---|---|---|---|
| Основная цель | Извлечь и владеть переиспользуемыми блоками | Полный редактор шаблонов | Полный редактор шаблонов | Полный редактор шаблонов | — |
| Библиотека шаблонов | Нет (строите из того, что вставили) | Огромная | Огромная | Большая | Нет |
| Требуется аккаунт | Нет | Да | Да | Да | Нет |
| Что-либо загружается | Нет | Да (облако) | Да (облако) | Да (облако) | Нет |
| Владение ассетами | Да (локальный JSON) | Аренда / облако | Аренда / облако | Аренда / облако | Да, но вручную |
| Замена изображения по блоку | Да | Да (в редакторе) | Да (в редакторе) | Да (в редакторе) | Вручную |
| Перекраска целого блока | Да, один клик | Да (в редакторе) | Да (в редакторе) | Да (в редакторе) | Вручную |
| Работает офлайн | Да, после загрузки | Нет | Нет | Нет | Да |
| Цена | Бесплатно | Бесплатный тариф + платно | Бесплатный тариф + платно | Бесплатный тариф + платно | Бесплатно |
Честно говоря, это не замена редактору шаблонов, и он на неё не претендует. 秀米, 135编辑器 и i排版 — зрелые продукты с огромными библиотеками шаблонов, живой вёрсткой перетаскиванием и годами шлифовки; если вы строите богатую статью с нуля, идти надо туда, и они заслуживают своей репутации. Чего они не дают — приватной, переносимой папки с конкретными блоками, которые вы переиспользуете, редактируемыми без логина и без того, чтобы что-то покидало вашу машину. Этот инструмент — экстрактор и органайзер, а не редактор: он превращает блоки, которыми вы восхищаетесь в дикой природе, в модули, которыми вы владеете, перекрашиваете, переизображаете и вставляете куда угодно. Используйте большие редакторы, чтобы компоновать; используйте этот, чтобы хранить детали.
Почему IMG.DIY
Извлечение блоков
Вытягивает SVG-карточки, заголовки, цитаты и разделители как самостоятельные модули.
Замена картинок inline
Заменяйте любую картинку в блоке своей — загрузкой или по URL.
Перекраска в один клик
Кликните любой цвет блока и измените его сразу везде.
Копирование inline-HTML
Вставляйте прямо в редактор WeChat, CMS или любое rich-текстовое поле.
Локальная библиотека
Сохраняйте модули в этом браузере и экспортируйте/импортируйте их как JSON.
Без загрузки
Работает полностью в вашем браузере — ваши материалы не покидают устройство.