Как упаковать Markdown в капризный редактор WeChat с помощью Claude Code

Если вы хоть раз верстали письма под старый Outlook, то наверняка помните то чувство бессилия, когда аккуратный макет рассыпается на куски. Примерно с таким же кошмаром сталкиваются авторы, которые пробуют выложить техническую статью в WeChat Official Accounts.

WeChat в Китае выполняет роль полноценной контент-платформы, но встроенный редактор там невероятно суров к чужой разметке. Он безжалостно вырезает теги <style> и <script>, игнорирует CSS-классы, ломает блочные контейнеры и намертво отсекает display: grid вместе с CSS-переменными. Попробуйте скопировать туда обычный HTML из любого конвертера Markdown, и статья моментально превратится в нечитаемую кашу.

Недавно я наткнулся на репозиторий gzh-design-skill. Это специализированный навык для AI-ассистентов вроде Claude Code, Codex или Cursor. Он берет исходный Markdown и транслирует его в пуленепробиваемый инлайновый HTML, который переносится в визуальный редактор через обычный буфер обмена без единого сбоя.

Почему верстка под WeChat сводит с ума

Чтобы оценить задумку авторов, нужно взглянуть на технические ограничения самой площадки. Платформа пропускает внутрь исключительно инлайновые стили. Причем каждый строчный текстовый узел обязан быть обернут в конструкцию <span leaf="">. Стоит забыть этот странный атрибут, и редактор сбросит типографику, шрифты или межстрочные интервалы при первом же автосохранении.

Вторая проблема касается кода и картинок. Попробуйте вставить фрагмент кода без горизонтальной прокрутки, и мобильный клиент WeChat разорвет строки в самых неожиданных местах.

Разработчики gzh-design-skill отказались от наивной идеи «попросить модель сделать красиво». Вместо абстрактных системных промптов они собрали строгую дизайн-систему, упакованную в набор готовых шаблонов и вспомогательных скриптов.

Набор тем и анатомия компонентов

Внутри репозитория подготовлено шесть готовых стилевых тем. Каждая из них решает свою задачу:

Зеленая тема рассчитана на пошаговые инструкции, разборы инструментов и технические чек-листы.
Красно-белая классика подходит для аналитических колонок, обзоров и выразительных лонгридов.
Графитовый минимализм ориентирован на дизайн-критику, новости технологий и презентации продуктов.
Дзен-стиль с обильными отступами создан для неспешных эссе и авторских колонок.

_{Зеленая тема}
_{Красно-белая тема}
_{Оливковые заметки}
_{Графитовый минимализм}	_{Дзен-стиль}	_{Стиль квитанции}

В каждом шаблоне содержится каталог типовых блоков. Сюда входят карточки данных, врезки для цитат, компактные плашки для кода, бейджи и акцентные разделители.

Навык самостоятельно расставляет нумерацию глав, генерирует оглавление на основе заголовков, аккуратно подчеркивает ключевые мысли в абзацах и склеивает блок авторской подписи в конце статьи.

Двухуровневая валидация вместо надежды на модель

Большинство навыков для нейросетей страдают одной болезнью: автор пишет длинный промпт со списком запретов, модель соглашается, а на сотом абзаце всё равно вставляет запрещенный тег.

Здесь логику контроля перенесли на детерминированные скрипты в папке scripts/. Проверка идет в два этапа:

Скрипт component_lint.py анализирует исходные библиотеки компонентов. Он отлавливает опасные конструкции вроде white-space: pre, проверяет границы блоков и отсекает запрещенные стили до сборки статьи.
Скрипт validate_gzh_html.py сканирует уже итоговый HTML-документ. Он инспектирует дерево DOM, проверяет наличие атрибутов leaf у текста и выявляет любые признаки полуширинной пунктуации в китайском тексте.

python3 scripts/component_lint.py .
python3 scripts/validate_gzh_html.py output.html

Если валидатор находит ошибки, агент получает сигнал тревоги, исправляет верстку и запускает проверку заново. Процесс повторяется, пока на выходе не останется ровно ноль ошибок.

Быстрый старт и рабочий процесс

Подключить навык к агенту можно одной командой через пакетный менеджер:

npx skills add https://github.com/isjiamu/gzh-design-skill

Если вы предпочитаете ручную установку, достаточно клонировать репозиторий в каталог навыков:

git clone https://github.com/isjiamu/gzh-design-skill.git ~/.claude/skills/gzh-design

После установки вы просто отдаете агенту файл с черновиком:

Сверстай файл article.md в зеленой теме для публикации в WeChat.

Агент сгенерирует не просто кусок разметки, а готовую страницу предпросмотра. Вы открываете ее в браузере, нажимаете кнопку копирования в верхнем углу, переходите в редактор WeChat и жмете стандартное сочетание клавиш для вставки. Все цвета, шрифты и отступы встают на свои места.

Как собрать собственную тему оформления

Если шести предустановленных вариантов мало, в проекте предусмотрен отдельный генератор стилей. Он описан в файле references/theme-generator.md.

Вы можете скинуть агенту скриншот понравившейся статьи или описать палитру словами: «хочу журнал в стиле темного индиго с акцентами цвета охры». Агент собирает сбалансированную цветовую схему:

Акцентный цвет для нумерации глав и ключевых якорных элементов.
Светлая мягкая подложка для карточек и цитат.
Фоновый полупрозрачный оттенок для подчеркивания важных фраз.
Шкала нейтральных серых тонов, которая берет на себя девяносто процентов основного текста.

Сгенерированные блоки сразу упаковываются в отдельный Markdown-файл темы, тестируются скриптом component_lint.py и регистрируются в общем индексе. После этого новую тему можно вызывать по имени точно так же, как стандартные.

Чему этот проект учит разработчиков

Репозиторий gzh-design-skill заслуживает внимания далеко за пределами китайского медиарынка. Это отличный пример того, как нужно проектировать взаимодействие с AI-агентами при решении специфичных прикладных задач.

Вместо попыток заставить модель импровизировать авторы построили жесткий каркас: зафиксировали дизайн-переменные, описали надежные кирпичики разметки и поручили контроль компилятору на Python.

Ровно такой же подход отлично сработает, если вам понадобится научить агента генерировать сложную почтовую рассылку под спам-фильтры Outlook, выгружать техническую документацию в закрытую корпоративную Wiki или готовить чистые PDF-отчеты. Изучите исходники проекта, чтобы увидеть, как превратить капризную языковую модель в предсказуемый инструмент верстки.