Стоит читать если: вы активно используете Claude Code для генерации спецификаций, отчетов или кода и ищете способы улучшить читаемость и интерактивность результатов. Можно пропустить если: вы работаете с моделями Claude только для простых текстовых задач, где Markdown полностью устраивает.
HTML вместо Markdown: почему это работает
Команда Claude Code пришла к выводу, что HTML предлагает больше преимуществ для решения сложных инженерных задач, которые теперь под силу ИИ-агентам.
- Плотность информации. HTML способен передавать гораздо более насыщенную информацию по сравнению с Markdown. Это не только заголовки и форматирование, но и полноценные таблицы, SVG-иллюстрации, интерактивные элементы с JavaScript и CSS, изображения, пространственные данные через canvas. В Markdown модели часто вынуждены использовать менее эффективные методы, такие как ASCII-диаграммы или Unicode-символы для имитации цветов.
- Визуальная ясность и читаемость. Когда Claude Code генерирует большие спецификации или планы (больше сотни строк), читать их в Markdown становится сложно. HTML-документы, напротив, позволяют визуально организовывать структуру с помощью вкладок, иллюстраций и ссылок, делая навигацию более удобной. Поддерживается даже адаптивный дизайн для разных форм-факторов.
- Удобство обмена. Markdown-файлы часто приходится прикреплять к письмам или сообщениям, так как большинство браузеров не отображают их корректно. HTML-файл достаточно загрузить, и ссылка на него будет легко доступна коллегам, которые смогут открыть его в любом браузере.
- Двусторонние взаимодействия. HTML позволяет создавать интерактивные документы. Например, можно добавить слайдеры или элементы управления для настройки дизайна или параметров алгоритма. Изменения можно скопировать и вставить обратно в промпт Claude Code, создавая специализированные среды редактирования для конкретных проблем.
- Прием данных. Claude Code может получать контекст из файловой системы, интегрированных систем управления проектами (Slack, Linear), веб-браузера (с плагином Claude в Chrome) и истории Git. Это позволяет генерировать HTML-файлы, которые синтезируют информацию из множества источников.
С чего начать генерацию HTML
Модели не требуют специальных инструкций, чтобы начать генерировать HTML. Достаточно просто попросить: «создай HTML-файл» или «создай HTML-артефакт». Главное — четко понимать, что должен делать артефакт и как вы будете его использовать. Со временем можно создавать скиллы для повторяющихся задач, но начать стоит с экспериментов без них.
Примеры использования HTML-арвывода
Вот несколько сценариев, где HTML-файлы превосходят Markdown:
- Спецификации, планирование и исследование. Вместо простого Markdown-плана можно создать целую сеть HTML-файлов для мозгового штурма, исследования вариантов, макетов и примеров интерфейсов.
- Пример: «Я не уверен, в каком направлении развивать экран онбординга. Сгенерируй 6 различных подходов — измени макет, тон и плотность — и расположи их в одном HTML-файле в виде сетки для сравнения. Отметь каждый компромисс.»
- Проверка кода и понимание. Код в Markdown сложно читать, но HTML позволяет отображать диффы, аннотации, блок-схемы и модули. Это удобно для понимания кода, написанного агентом, для ревью или объяснения Pull Request'а.
- Пример: «Помоги мне просмотреть этот PR, создав HTML-артефакт, описывающий его. Я плохо знаком с логикой стриминга/backpressure, поэтому сосредоточься на этом.»
- Дизайн и прототипы. Claude Design использует HTML из-за его выразительности. Модель может набросать дизайн в HTML, а затем перевести его в нужный язык (React, Swift). Можно прототипировать анимации и взаимодействия, добавляя ползунки и кнопки.
- Пример: «Я хочу создать прототип новой кнопки оплаты, которая при нажатии воспроизводит анимацию, а затем быстро становится фиолетовой. Создай HTML-файл с несколькими ползунками и опциями для настройки этой анимации.»
- Отчеты, исследования и обучение. Claude Code эффективно синтезирует информацию из нескольких источников (Slack, кодовая база, Git-история, интернет) и преобразует ее в отчеты. Это могут быть длинные HTML-документы, интерактивные объяснения или даже слайд-шоу.
- Пример: «Я не понимаю, как работает наш ограничитель скорости. Прочитай соответствующий код и создай одну HTML-страницу-объяснение: диаграмму потока токенов, 3–4 ключевых фрагмента кода с аннотациями и раздел „подводные камни“ внизу.»
- Пользовательские интерфейсы для редактирования. Для специфических задач можно попросить Claude построить одноразовый HTML-редактор. Главное — добавить кнопку экспорта (например, «скопировать как JSON» или «скопировать как промпт»), чтобы перенести изменения обратно в Claude Code или в файл.
- Пример: «Мне нужно изменить приоритет 30 тикетов Linear. Создай мне HTML-файл с каждым тикетом в виде перетаскиваемой карточки по колонкам „Сейчас / Далее / Позже / Отменить“.»
Частые вопросы о HTML в Claude Code
Увеличивает ли это потребление токенов? Хотя Markdown обычно использует меньше токенов, повышенная выразительность HTML и более высокая вероятность того, что инженер прочитает результат, обеспечивают лучший общий результат. С контекстным окном в 1 миллион токенов (Opus 4.7) возросшее потребление токенов вряд ли будет заметно.
Когда по-прежнему использовать Markdown? Автор блога признается, что почти полностью перестал использовать Markdown, хотя и считает себя «HTML-максималистом».
Заменяет ли это планирование? Вместо одного общего плана автор теперь создает несколько HTML-файлов для разных частей и этапов планирования (например, план реализации, исследование UI, список компонентов). Эти файлы служат в качестве ссылок для будущих задач и для верификации.
Как это помогает оставаться в курсе? Использование HTML помогает инженерам быть более вовлеченными в процесс принятия решений Claude Code. Когда модель берет на себя больше работы, появляется риск менее внимательного чтения планов. HTML позволяет оставаться вовлеченным в выбор модели, а не просто передавать задачи. Анонс
Также за день
- Claude Code v2.1.145 добавил команду
claude agents --jsonдля вывода активных сессий в JSON, улучшил атрибуты трассировки OTEL и расширил информацию о GitHub в статусной строке JSON. - Claude Code v2.1.144 получил поддержку команды
/resumeдля фоновых сессий, улучшил отображение информации о плагинах, а команда/modelтеперь меняет модель только для текущей сессии (для установки по умолчанию нажмитеdв селекторе).
Что это значит
Выбор формата вывода больше не вопрос привычки, а вопрос эффективности. Переход команды Claude Code на HTML для сложных задач подчеркивает, что с ростом возможностей ИИ-агентов меняются и требования к инструментам. Инженерам стоит экспериментировать с HTML-выводом, чтобы раскрыть полный потенциал своих моделей и сделать взаимодействие с ними более продуктивным, особенно при работе над многокомпонентными проектами, требующими высокой детализации и интерактивности.