Новости ИИЗнаков 18536Время чтения47 мин

Использование HTML вместо Markdown: первоисточник команды Claude Code (кит.-англ. версия)

Инженерный руководитель Claude Code Thariq Shihipar объясняет, почему HTML лучше подходит в качестве формата вывода для AI по сравнению с Markdown, выделяя пять ключевых преимуществ: плотность информации, читаемость, двустороннее взаимодействие и практические сценарии применения. Кейс представлен в формате для изучения.

*Использование Claude Code: Невероятная эффективность HTML*

Автор: Thariq Shihipar (главный инженер Claude Code в Anthropic) | Китайско-английская версия


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

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

Но по мере того как агенты становятся все более мощными, я обнаружил, что Markdown становится все более ограничительным форматом. Конкретно, мне сложно дочитывать Markdown-файл длиной более ста строк; я хочу, чтобы Claude генерировал более богатые визуализации, цвет и диаграммы; и я хочу легче делиться этими результатами с другими.

Но по мере роста мощности агентов Markdown становится всё более ограничивающим форматом. Во‑первых, мне становится сложно внимательно читать Markdown-файл длиннее ста строк; во‑вторых, я хочу, чтобы Claude генерировал более насыщенные визуализации, цвет и диаграммы; и, в‑третьих, я хочу проще делиться такими результатами.

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

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

Вместо этого я начал предпочитать HTML как формат вывода вместо Markdown, и всё чаще замечаю, что эта практика расширяется на других членов команды Claude Code. В этой статье я делюсь, почему и как наша команда использует HTML для более богатых и удобных для чтения результатов Claude Code.

Вместо этого я стал отдавать предпочтение HTML как формату вывода вместо Markdown и всё чаще замечаю, что в этом направлении начинают работать другие члены команды Claude Code. В этой статье я делюсь, почему и как наша команда использует HTML, чтобы получать более выразительные и более удобные для чтения результаты Claude Code.

Если вы только начинаете пользоваться Claude Code, в статье про CC Switch можно быстро научиться переключаться между несколькими инструментами Claude. А если хотите упаковку способностей Claude в многоразовые Skill, обратите внимание на вводную статью о Skill.

1. Почему использовать HTML? / Why Use HTML?

Несколько факторов делают HTML более подходящим, чем Markdown, для тех задач, которые я сейчас решаю с Claude Code.

Несколько факторов делают HTML более подходящим, чем Markdown, для тех задач, которые я сейчас выполняю с помощью Claude Code.

1. Информационная плотность / Information Density

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

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

  • Табличные данные с помощью <table>
  • Дизайнерские данные с CSS
  • Иллюстрации с SVG
  • Фрагменты кода с тегами <script>
  • Взаимодействия с использованием HTML-элементов + JavaScript и CSS
  • Рабочие процессы с SVG и HTML
  • Пространственные данные через абсолютные позиции и холсты (canvas)
  • Изображения с тегом <img>

  • Табличные данные с помощью тегов <table>
  • Дизайн-данные через CSS
  • Иллюстрации с SVG
  • Встраивание фрагментов кода с помощью <script>
  • Взаимодействие через HTML-элементы с JavaScript + CSS
  • Схемы рабочих процессов с SVG и HTML
  • Пространственные данные с абсолютным позиционированием и canvas
  • Изображения через тег <img>

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

На мой взгляд, существует почти никакого класса информации, который Claude понимает, а HTML не может эффективно представить. Это делает его очень эффективным способом для модели сообщить вам сложную информацию и для вашего удобного просмотра.

Без такой возможности модель в Markdown начинает делать более неэффективные вещи, как ASCII-диаграммы или, что особенно забавно, имитацию цветов с помощью Unicode-символов.

Я заметил, что если HTML недоступен, модель начинает в Markdown делать менее эффективные вещи: ASCII-схемы или, мой любимый пример, попытки имитировать цвета Unicode-символами.

2. Визуальная ясность и удобство чтения / Visual Clarity and Ease of Reading

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

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

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

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

3. Удобство обмена / Ease of Sharing

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

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

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

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

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

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

4. Двустороннее взаимодействие / Two-Way Interactions

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

HTML также позволяет взаимодействовать с самим документом. Например, вы можете попросить добавить слайдеры или регуляторы для настройки дизайна, либо чтобы менять параметры алгоритма и наблюдать эффект. Вы также можете добавить кнопку, копирующую изменения в промпт, чтобы вставить его обратно в Claude Code.

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

При необходимости это позволяет создать специализированную среду редактирования под конкретную проблему.

5. Интеграция данных / Data Ingestion

Одна из главных причин использовать Claude Code для создания HTML вместо Claude.ai или Claude Design — в том, сколько контекста Claude Code может принимать. Например, пока писал эту статью, я попросил Claude Code просмотреть мою папку с кодом, найти все сгенерированные мной HTML-файлы, сгруппировать и классифицировать их, а затем сделать HTML-файл с диаграммами, представляющими каждый тип. Диаграммы в этой статье — прямой результат этого процесса.

Одной из главных причин использовать Claude Code для генерации HTML вместо Claude.ai или Claude Design является объём контекста, который способен принять Claude Code. Например, создавая эту статью, я попросил Claude Code просмотреть мою папку с кодом, найти все сгенерированные мной HTML-файлы, сгруппировать и категоризировать их, а затем сделать HTML-файл с диаграммами, отражающими каждый тип. Иллюстрации в этой статье — прямой результат именно этого процесса.

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

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

2. Как начать / Getting Started

Стоит отметить важный момент: для генерации такого HTML вам не нужно делать много предварительных настроек. Можно просто попросить его «сделай HTML-файл» или «сделай HTML-артефакт». Главное — понимать, зачем нужен артефакт и как вы будете его использовать. Со временем, возможно, имеет смысл собрать скилл под повторяющиеся шаблоны, но начальный запуск с «чистого» промпта — лучший способ понять, как это работает в разных кейсах.

Важно отметить: вам не нужно настраивать что-то сложное, чтобы Claude начал генерировать такой HTML. Можно просто попросить его «создай HTML-файл» или «создай HTML-артефакт». Главное — понимать, для чего нужен артефакт и как вы им будете пользоваться. Со временем может быть полезно выделить повторяющиеся паттерны в отдельный Skill, но старт с чистого промпта — отличный способ почувствовать, как это работает в разных сценариях.

3. Сценарии использования / Use Cases

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

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

1. Спецификации, планирование и исследование / Specs, Planning, and Exploration

HTML — богатый холст для углубленного анализа проблемы Claude. Когда я начинаю разбираться с задачей, вместо простого Markdown-плана я теперь рассчитываю на сеть взаимосвязанных HTML-файлов. Например, могу сначала попросить Claude Code провести мозговой штурм и создать альтернативные варианты. Потом прошу углубиться в один из них, возможно, сделать прототипы или примеры интерфейсных типов. И уже когда всё соберется, прошу подготовить план реализации. Когда я доволен планом, открываю новую сессию и передаю все эти файлы на исполнение.

HTML — это богатая среда для углубленного изучения проблемы Claude. Когда я начинаю работать над задачей, вместо простого Markdown-плана я ожидаю получить веб-сеть из HTML-файлов. Например, сначала прошу Claude Code сделать мозговой штурм и подготовить несколько вариантов исследований. Затем прошу развить один из вариантов — сделать макеты или примеры интерфейсных сущностей. Когда картина проясняется, я прошу составить план внедрения. Как только он меня удовлетворяет, открываю новую сессию и передаю все эти файлы для реализации.

На этапе проверки я также прошу агента проверки читать эти файлы — тогда у него будет куда более широкий контекст по ожиданиям и целям.

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

Примеры промптов / Example prompts:

I'm not sure what direction to take the onboarding screen. Generate 6 distinctly different approaches—vary layout, tone, and density—and lay them out as a single HTML file in a grid so I can compare them side by side. Label each with the tradeoff it's making.
Я пока не определился, в каком направлении делать экран приветствия (onboarding). Сгенерируй 6 принципиально разных подходов — с отличающимся макетом, тоном и плотностью контента — и выведи их в виде сетки в одном HTML-файле, чтобы я мог сравнить их рядом. Для каждого варианта явно укажи, на какие компромиссы он опирается.
Create a thorough implementation plan in an HTML file, be sure to make some mockups, show data flow and add important code snippets I might want to review. Make it easy to read and digest.
Составь подробный план внедрения в HTML-файле, обязательно добавь несколько макетов, покажи поток данных и включи важные фрагменты кода, которые мне нужно будет проверить. Сделай документ удобным для чтения и восприятия.

Подходит для / Use this for:

  • Exploring other ways to implement something in code / Изучение альтернативных способов реализации участка кода
  • Experimenting with multiple visual designs at once / Параллельное исследование нескольких визуальных дизайнов

2. Код-ревью и понимание кода / Code Review and Understanding

Код непросто читать в Markdown, но с HTML мы можем визуализировать диффы, аннотации, flowchart-ы и модули. Используйте HTML, чтобы понять код, который написал агент, провести его ревью или объяснить PR ревьюеру.

Чтение кода в Markdown неудобно. С HTML мы можем рендерить diff-ы, аннотации, блок-схемы и модули. HTML удобен для понимания кода, написанного агентом, для code review или для объяснения PR тому, кто его проверяет.

Пример промпта / Example prompt:

Help me review this PR by creating an HTML artifact that describes it. I'm not very familiar with the streaming/backpressure logic, so focus on that. Render the actual diff with inline margin annotations, color-code findings by severity and whatever else might be needed to convey the concept well.
Помоги мне провести ревью этого PR, создав HTML-артефакт с его описанием. Я не очень разбираюсь в логике стриминга/обратного давления, поэтому сделай акцент именно на этом. Отобрази реальный diff с inline-заметками на полях, подсвети находки по степени критичности цветом и добавь всё, что поможет лучше объяснить идею.

Подходит для / Use this for:

  • Creating a PR / Подготовка описания для PR
  • Reviewing a PR / Ревью PR, отправленного коллегой или AI
  • Understanding a topic in code / Быстрое понимание сложной темы в кодовой базе

3. Дизайн и прототипирование / Design and Prototypes

Claude Design основан на HTML, потому что HTML невероятно выразителен для дизайна, даже если итоговый финишный интерфейс не веб-страница. Claude может набросать дизайн на HTML, а затем переложить его на нужный вам язык, будь то React, Swift и т.д.

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

Вы также можете прототипировать взаимодействия: анимации, действия и т.п. Попробуйте попросить Claude добавить слайдеры, knobs и т.д., чтобы точно настроить нужный вам эффект.

Вы также можете строить прототипы взаимодействий, таких как анимации и действия. Попросите Claude добавить слайдеры, переключатели, knobs и т.д., чтобы точно подобрать нужное поведение.

Пример промпта / Example prompt:

I want to prototype a new checkout button, when clicked it does a play animation and then turns purple quickly. Create an HTML file with several sliders and options for me to try different options on this animation, give me a copy button to copy the parameters that worked well.
Я хочу создать прототип нового чек-аут-кнопка: при клике должен воспроизводиться анимационный эффект, после чего кнопка быстро становится фиолетовой. Создай HTML-файл с несколькими слайдерами и параметрами, чтобы я мог перебрать варианты анимации; добавь кнопку копирования, которая выдает успешно подобранные параметры.

Подходит для / Use this for:

  • Creating design system artifacts / Создание артефактов дизайн-системы
  • Adjusting components / Интуитивная настройка деталей UI-компонентов
  • Visualizing component libraries / Визуализация библиотек компонентов
  • Prototyping animations / Прототипирование анимаций и взаимодействий

4. Отчёты, исследования и обучение / Reports, Research, and Learning

Claude Code очень эффективно синтезирует информацию из множества источников и превращает её в удобный для чтения отчёт. Можно попросить Claude искать в Slack, кодовой базе, истории git или в интернете и формировать отчёты, которые просто и приятно читать.

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

Можно оформить это в виде длинного HTML-документа, интерактивного пояснительного материала или даже слайд-декa. Попросите Claude использовать SVG для диаграмм, чтобы лучше визуализировать материал.

Это можно собрать как длинный HTML-документ, интерактивный объясняющий материал или даже слайдовую презентацию. Попросите Claude использовать SVG для диаграмм, чтобы лучше визуализировать информацию.

Пример промпта / Example prompt:

I don't understand how our rate limiter actually works. Read the relevant code and produce a single HTML explainer page: a diagram of the token-bucket flow, the 3–4 key code snippets annotated, and a "gotchas" section at the bottom. Optimize it for someone reading it once.
Я до сих пор не понимаю, как на самом деле работает наш rate limiter. Прочитай релевантный код и создай единый HTML-страницу-объяснение: схему потока для token-bucket, 3–4 ключевых фрагмента кода с аннотациями и блок «подводные камни» внизу страницы. Сделай так, чтобы человек понял с первого чтения.

Подходит для / Use this for:

  • Writing feature summaries / Объяснение принципа работы сложной функции
  • Generating explainers / Наглядное объяснение сложной идеи для других
  • Drafting weekly status reports / Быстрое создание еженедельных статус-отчетов
  • Creating incident reports / Подготовка понятных отчётов о инцидентах
  • Producing SVG illustrations, flowcharts, and technical diagrams / Автогенерация SVG-иллюстраций, блок-схем и технических диаграмм

5. Пользовательские интерфейсы редактирования / Custom Editing Interfaces

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

Иногда действительно сложно выразить задачу только текстом. В таком случае я обычно прошу Claude собрать мне «одноразовый» редактор под текущую задачу: не продукт, не универсальный инструмент, а отдельный HTML-файл, нацеленый на один конкретный кусок данных.

Ключевой момент всегда в том, чтобы в итоге добавить экспорт: кнопку «copy as JSON» или «copy as prompt», которая преобразует сделанные в UI изменения в объект, который можно вставить обратно в Claude Code или зафиксировать в файле. Вы остаётесь в контуре, но цикл становится намного плотнее.

Главный трюк — всегда завершать это экспортом: кнопкой «copy as JSON» или «copy as prompt», которая превращает всё, что вы сделали в UI, обратно в то, что можно вставить в Claude Code или сохранить в файл. Вы остаётесь в рабочем цикле, но он становится гораздо более плотным.

Примеры промптов / Example prompts:

I need to reprioritize these 30 Linear tickets. Make me an HTML file with each ticket as a draggable card across Now / Next / Later / Cut columns. Pre-sort them by your best guess. Add a "copy as Markdown" button that exports the final ordering with a one-line rationale per bucket.
Нужно переупорядочить приоритеты этих 30 тикетов в Linear. Сделай HTML-файл, где каждый тикет — перетаскиваемая карточка в колонках Now / Next / Later / Cut. Предварительно отсортируй их по своему лучшему предположению. Добавь кнопку «copy as Markdown», которая экспортирует итоговую расстановку и для каждого блока добавляет краткое объяснение одним предложением.
Here's our feature flag config. Build a form-based editor for it, group flags by area, show dependencies between them, warn me if I enable a flag whose prerequisite is off. Add a "copy diff" button that gives me just the changed keys.
Вот конфигурация feature flags. Сделай редактор на основе формы, сгруппируй флаги по областям, покажи зависимости между ними; если я включаю флаг, а его prerequisite выключен, показывай предупреждение. Добавь кнопку «copy diff», которая выводит только изменённые ключи.
I'm tuning this system prompt. Make a side-by-side editor: editable prompt on the left with the variable slots highlighted, three sample inputs on the right that re-render the filled template live. Add a character/token counter and a copy button.
Я настраиваю этот системный промпт. Сделай редактор «линия/линия»: слева — редактируемый шаблон промпта с выделенными переменными, справа — три примера ввода, которые в реальном времени рендерят заполненный шаблон. Добавь счётчик символов/токенов и кнопку копирования.

Подходит для / Use this for:

  • Reordering, triaging, or bucketing anything / Перестановка, triage или категоризация любых артефактов (тикеты, тест-кейсы, пользовательский фидбек)
  • Editing structured config / Редактирование структурированных конфигураций (feature flags, env-переменные, JSON/YAML с ограничениями)
  • Tuning prompts and templates with live preview / Тюнинг промптов и шаблонов с live-превью
  • Curating datasets / Курирование датасетов: отбор, маркировка и экспорт данных
  • Annotating documents, transcripts, or diffs / Аннотации для длинных документов, расшифровок и diff-ов с последующим экспортом
  • Picking values painful to express in text / Подбор параметров, которые сложно выразить текстом: цветовые коды, easing curve, Cron-выражения, регулярные выражения и т.д.

FAQ / Часто задаваемые вопросы

These are the questions I get asked most often about using HTML with Claude Code, paired with the practical, day-to-day habits I've landed on.

Ниже — вопросы, которые мне чаще всего задают о работе с HTML в Claude Code, вместе с практическими рабочими привычками, которые я выработал.

Это не расходует больше токенов?

Q: Isn't it less efficient?

While Markdown often uses fewer tokens, I've found that the added expressiveness of HTML and the much higher likelihood of me reading it means I get overall better output. With the 1MM context window in Opus 4.7, the increased token usage is not really noticeable in the context window.

Markdown обычно потребляет меньше токенов, но я обнаружил, что за счёт большей выразительности HTML и гораздо более высокой вероятности того, что я действительно дочитаю результат, итоговый выход лучше. При окне в 1MM токенов у Opus 4.7 дополнительное потребление токенов практически не заметно внутри лимита контекста.

Когда вы всё же используете Markdown?

Q: When do you use Markdown now?

I have honestly stopped using Markdown altogether for almost everything, but I'm probably far on the HTML maximalist side of things.

Честно говоря, для почти всех задач я практически полностью отказался от Markdown, хотя, возможно, я уже перешёл в «HTML-макисмейтистский» край.

Как просмотреть сгенерированный HTML-файл?

Q: How do I view the generated HTML file?

I usually open it locally in a browser (you can even ask Claude to open it for you). If I want to share a link, I just upload it to S3.

Обычно открываю его локально в браузере (вы даже можете попросить Claude сделать это за вас). Если нужно поделиться ссылкой, просто загружаю файл в S3.

Не дольше ли генерировать HTML, чем Markdown?

Q: Doesn't it take longer to generate?

Yes! HTML can take 2-4x longer to generate than Markdown, but in my testing, the output is consistently worth the wait.

Да, генерация HTML обычно занимает в 2–4 раза больше времени, чем Markdown. Но в моих тестах итоговый результат стабильно окупает ожидание.

Что насчет контроля версий?

Q: What about version control?

Honestly, this is one of HTML's biggest pain points. HTML diffs are very messy in version control tools compared to clean Markdown, making code review harder.

Честно говоря, это одна из самых заметных проблем HTML. Diff в системах контроля версий для HTML заметно более «шумный» и запутанный, чем для чистого Markdown, что усложняет code review.

Как заменить планирование на HTML?

Q: Is this how you've replaced planning?

I've found that instead of having a single plan, I tend to have a few different HTML files for different parts/stages of the plan. For example, I may make an implementation plan in HTML and then do another file for exploration of UIs, and then finally make an HTML component that lists every design. I tend to keep these files around as references for the future, as well for use in verification.

Я заметил, что вместо одного единого плана мне удобнее иметь несколько HTML-файлов для разных частей/этапов. Например: план внедрения в одном HTML, отдельный файл для исследования UI, а затем HTML-компонент со списком всех вариантов дизайна. Я обычно храню такие файлы как долгосрочные справочные материалы и для этапа верификации.

Как добиться эстетичного вида сгенерированных страниц?

Q: How do I get Claude to generate pages that look good?

Claude's built-in frontend design capabilities already allow it to generate fairly nice HTML pages. But if you want pages to match your company's brand, you can ask Claude to scan your codebase and generate a design system HTML file. Then you can pass that file as reference whenever you need Claude to generate other HTML pages, and it will maintain a consistent style.

Claude уже умеет встроенными средствами фронтенд-дизайна создавать довольно приличные HTML-страницы. Если вам нужно, чтобы страницы соответствовали фирменному стилю компании, попросите Claude просканировать кодовую базу и создать HTML-файл с дизайн-системой. Затем используйте его как reference при последующей генерации HTML — и стиль будет последовательным.

5. Поддержание цикла взаимодействия с Claude / Staying in the Loop with Claude

Все вышеперечисленное сводится к тому, что главная причина моего перехода на HTML вместо Markdown — ощущение гораздо более тесного участия в процессе с Claude. По мере роста возможностей Claude я заметил, что стал реже вдумчиво читать планы и хотел остаться вовлечённым в его выборы, а не просто отдать задачу «на откуп». HTML стал именно тем механизмом. Сейчас я ощущаю себя гораздо более вовлечённым, чем раньше.

Если подвести итог, главная причина, почему я использую HTML вместо Markdown, в том, что это помогает мне чувствовать себя гораздо более вовлечённым в цикл работы с Claude. По мере того как Claude берет на себя всё больше, я замечал, что стал реже внимательно читать планы, и мне хотелось оставаться вовлеченным в его решения, а не просто передавать работу «на откуп». HTML оказался тем самым решением. Сейчас я чувствую себя в цикле намного плотнее, чем раньше.


*Оригинальный автор статьи — Thariq Shihipar (главный инженер Claude Code в Anthropic), текст передаёт его личные взгляды и личные предпочтения.*

*Эта статья написана Thariq Shihipar, инженерным руководителем Claude Code в Anthropic, и отражает его личное мнение и предпочтение использования HTML-файлов в Claude Code.*

Источники

Share

Поделиться статьёй