HTML вместо Markdown: почему ИИ-агенты генерируют в HTML и как это использовать

HTML становится предпочтительным форматом вывода для ИИ-агентов вместо Markdown — он плотнее по информации, проще для восприятия, легче делится и поддерживает двустороннюю интерактивность.

Общая картина

Markdown долгое время был основным форматом, в котором агенты общаются с человеком. Он прост, портативен, поддерживает базовое форматирование и легко редактируется вручную.

Но по мере роста возможностей агентов Markdown становится ограничивающим форматом. Файл на 100+ строк уже трудно читать. Хочется более богатых визуализаций, цветов, диаграмм — и возможности легко поделиться результатом.

При этом всё меньше причин редактировать такие файлы вручную: спецификации, справочники, результаты брейнштормов — всё это чаще правится через промпт, а не руками. Это снимает главное преимущество Markdown — удобство ручного редактирования.

HTML решает все эти проблемы и открывает возможности, которые Markdown дать не может.

Почему HTML

Плотность информации

HTML может передавать гораздо более богатую информацию по сравнению с Markdown:

Практически любой набор данных, который агент способен прочитать, можно эффективно представить в HTML. Без HTML агент вынужден использовать менее эффективные решения: ASCII-диаграммы или, например, имитировать цвета юникод-символами.

Визуальная ясность и удобство чтения

По мере того как агенты выполняют всё более сложную работу, они генерируют всё более объёмные спецификации и планы. На практике Markdown-файл длиннее 100 строк мало кто дочитывает до конца — и тем более никого не заставить прочитать его в команде.

HTML-документы гораздо легче читать. Агент может визуально организовать структуру: вкладки, иллюстрации, ссылки, навигация. Документ может быть адаптивным — по-разному отображаться на мобильном и десктопе.

Простота распространения

Markdown-файлы трудно шарить: браузеры не рендерят их нативно, приходится прикладывать вложением к письму или сообщению.

HTML можно загрузить на любой хостинг (например, S3) и отправить ссылку. Коллеги откроют документ в браузере и смогут легко на него ссылаться.

Вероятность того, что кто-то действительно прочитает вашу спецификацию, отчёт или описание PR, многократно выше, если это HTML.

Двусторонняя интерактивность

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

Загрузка контекста

Одно из главных преимуществ генерации HTML через кодинг-агента (а не через обычный чат) — объём контекста, который агент может загрузить. Агент может прочитать файловую систему проекта, найти все ранее сгенерированные HTML-файлы, сгруппировать их и создать новый документ с диаграммами по каждому типу.

Кроме файловой системы, контекст можно получить через MCP-серверы (Slack, Linear и др.), браузер, историю Git и другие источники.

Радость использования

Создавать HTML-документы с помощью агента просто приятнее — это вовлекает в процесс и повышает чувство сопричастности к результату.

Как начать

Не нужно создавать специальные скиллы или шаблоны. Достаточно попросить агента: «сделай HTML-файл» или «сделай HTML-артефакт».

Главное — понимать, что именно вы хотите получить от артефакта и как будете его использовать. Со временем можно создать скилл, но для начала лучше просто промптить с нуля и набирать опыт.

Сценарии использования

Спецификации, планирование и исследование

HTML — богатый холст для погружения в задачу. Вместо простого Markdown-плана можно построить целую сеть HTML-файлов:

1. Попросить агента провести брейншторм и создать несколько вариантов
2. Развернуть один из них в деталях — мокапы, фрагменты кода
3. Когда всё устраивает — попросить составить план реализации
4. Передать все файлы в новую сессию для имплементации

Примеры промптов:

Я не уверен, в каком направлении развивать экран онбординга.
Сгенерируй 6 принципиально разных подходов — варьируй компоновку, тон и плотность —
и размести их в одном HTML-файле в виде сетки, чтобы я мог сравнить их рядом.
Подпиши каждый вариант — какой компромисс он делает.

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

Код-ревью и понимание кода

Код трудно читать в Markdown. В HTML можно отрендерить диффы, аннотации, блок-схемы, модули. Это часто работает лучше, чем стандартный вид GitHub diff.

Пример промпта:

Помоги мне провести ревью этого PR — создай HTML-артефакт с его описанием.
Я не очень хорошо разбираюсь в логике стриминга и backpressure, так что сфокусируйся на этом.
Отрендери реальный дифф с инлайн-аннотациями на полях,
выдели находки цветом по степени серьёзности и добавь всё, что поможет
хорошо передать концепцию.

Применяется для:

• Создания PR
• Ревью PR
• Разбора и понимания участка кода

Дизайн и прототипы

HTML чрезвычайно выразителен для дизайна, даже если целевая платформа — не веб. Агент может набросать дизайн в HTML, а затем переписать на React, Swift и т.д.

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

Пример промпта:

Хочу прототипировать новую кнопку оформления заказа: при нажатии она проигрывает
анимацию, а затем быстро становится фиолетовой. Создай HTML-файл с несколькими
слайдерами и опциями, чтобы я мог попробовать разные варианты анимации.
Добавь кнопку копирования параметров, которые подошли.

Применяется для:

• Артефактов дизайн-системы
• Настройки компонентов
• Визуализации библиотек компонентов
• Прототипирования анимаций

Отчёты, исследования и обучение

Агент отлично синтезирует информацию из разных источников и превращает её в читаемый отчёт. Можно промптить агента искать в Slack, кодовой базе, истории Git, интернете — и генерировать понятные отчёты для себя, руководства или команды.

Формат: длинный HTML-документ, интерактивный объяснитель или слайд-шоу. SVG-диаграммы помогают визуализировать.

Пример промпта:

Я не понимаю, как на самом деле работает наш rate limiter.
Прочитай соответствующий код и создай одну HTML-страницу-объяснение:
диаграмму потока token-bucket, 3–4 ключевых фрагмента кода с аннотациями
и раздел «подводные камни» внизу. Оптимизируй для однократного прочтения.

Применяется для:

• Описания работы фичи
• Объяснения концепций
• Еженедельных статус-отчётов
• Инцидент-репортов
• SVG-иллюстраций, блок-схем, технических диаграмм

Одноразовые редакторы

Иногда сложно описать желаемый результат текстом. В таком случае можно попросить агента собрать одноразовый редактор — один HTML-файл, заточенный под конкретную задачу.

Ключевой приём: всегда заканчивать кнопкой экспорта — «copy as JSON» или «copy as prompt» — чтобы результат можно было вставить обратно в агента.

Примеры промптов:

Мне нужно пересортировать эти 30 тикетов в Linear.
Сделай HTML-файл, где каждый тикет — перетаскиваемая карточка
по колонкам «Сейчас / Далее / Позже / Отсечь». Предварительно рассортируй их по своей оценке.
Добавь кнопку «скопировать как markdown», которая экспортирует итоговый порядок
с однострочным обоснованием для каждой группы.

Вот наш конфиг фича-флагов. Собери для него редактор на основе формы,
сгруппируй флаги по областям, покажи зависимости между ними,
предупреди меня, если я включу флаг, чей пререквизит выключен.
Добавь кнопку «скопировать дифф», которая выдаст только изменённые ключи.

Я настраиваю системный промпт. Сделай редактор с двумя панелями:
слева — редактируемый промпт с подсвеченными переменными,
справа — три примера ввода, которые в реальном времени перерисовывают заполненный шаблон.
Добавь счётчик символов/токенов и кнопку копирования.

Применяется для:

• Приоритизации и сортировки (тикеты, тест-кейсы, фидбек)
• Редактирования конфигов (фича-флаги, env-переменные, JSON/YAML)
• Тюнинга промптов и шаблонов с live-превью
• Курирования датасетов: approve/reject, теги, экспорт
• Аннотирования документов и транскриптов
• Подбора значений, которые трудно выразить текстом: цвета, easing-кривые, crop-области, cron-расписания, регулярные выражения

Частые вопросы

Чеклист: когда переключаться на HTML

Ссылки

• Оригинальная статья — Thariq (@trq212), команда Claude Code
• Галерея примеров HTML-артефактов
• Claude Code — кодинг-агент Anthropic

По теме

• Статья: Codex Desktop как визуальный конструктор UI: дизайн-цикл, который превращает ИИ в дизайнера
• Блог: Codex вышел в браузер — теперь он работает прямо в Chrome
• База знаний: Impeccable — открытый дизайн-скилл, который учит AI-инструменты понимать дизайн

Если вы работаете с кодинг-агентами и хотите разобраться, как выстроить эффективный формат вывода под ваши задачи — пишите в Telegram @pimenov.