Answer me with HTML — навык, который отвечает на сложный вопрос одной страницей

Ответ агента — это стена текста в терминале. Читать её тяжело, и дело не в том, что модель отвечает плохо. Проблема в самом формате: длинный блок текста трудно просматривать, а схемы в нём нет вообще.

Проект Answer me with HTML предлагает простое решение. Это агентный навык для Claude Code, Codex, Cursor, OpenCode и других агентов. Вы задаёте вопрос как обычно, но вместо простыни текста получаете одну HTML-страницу со схемами, таблицами и выводами.

Почему нельзя просто попросить HTML

Попросить модель написать HTML можно. И делает она это неплохо. Но замеры автора показывают: в девяти страницах, написанных моделью вручную, текста было всего 21 процент. Остальное — служебная работа:

То есть модель тратила больше половины ответа на координаты схем и повторяющийся CSS. При этом стрелки на схемах часто указывали в пустоту, а на одну страницу уходило минута-две.

С навыком схема работы другая. Модель пишет только текст и короткий черновик в Markdown. Всё остальное делает CLI из навыка. На тех же вопросах модель тратит 612 токенов вместо 4893 — примерно в восемь раз меньше, а ответ появляется за 12 секунд вместо 31. Замеры сделаны на Claude Sonnet 5.5, три темы по три запуска, брались медианы. Числа лежат в репозитории, их можно пересчитать командой node bench/corpus.mjs.

Счёт за API уменьшается скромнее — примерно на 15 процентов, потому что каждый запрос всё равно читает системный промпт, ваш вопрос и историю диалога. Подробный разбор — в bench/README.md.

Установка

Нужен Node.js версии 20 или новее. Шага npm install нет — CLI лежит внутри навыка.

Самый простой путь — поручить установку агенту. Вставьте в Claude Code, Codex, Cursor или OpenCode такую фразу:

Install Answer me with HTML: read https://raw.githubusercontent.com/QingYunA/answer-me-with-html/main/INSTALL.md and follow it.

Файл INSTALL.md написан специально для агентов: ставит плагин в Claude Code и навык в остальные агенты, не трогает уже установленную копию и в конце проверяет результат страницей про трёхстороннее рукопожатие TCP.

Для Claude Code есть установка плагином — выполните в самом Claude Code:

/plugin marketplace add QingYunA/answer-me-with-html
/plugin install answer-me-with-html@answer-me-with-html

Одна команда для любого агента:

npx skills add QingYunA/answer-me-with-html

Установщик vercel-labs/skills спросит, в какие агенты поставить навык, и поддерживает больше 70 агентов.

Установка вручную — скопировать папку навыка в папку навыков вашего агента:

git clone --depth 1 https://github.com/QingYunA/answer-me-with-html.git /tmp/answer-me-with-html
cp -R /tmp/answer-me-with-html/skills/answer-me-with-html ~/.claude/skills/answer-me-with-html

У Codex папка ~/.codex/skills/, у Cursor — ~/.cursor/skills/, у OpenCode — ~/.config/opencode/skill/.

Что вы спрашиваете и что получаете

Агент сам решает, нужна ли страница: связанные понятия, многошаговые схемы, сравнения. Можно и прямо сказать «объясни это в HTML».

Страницы лежат в ~/.answer-me-with-html/pages/. Кнопки в правом верхнем углу переключают тему и светлый/тёмный режим, собирают ваш ответ и копируют Markdown, из которого сделана страница.

Как это устроено

Вот всё, что пишет модель:

---
title: TCP three-way handshake
---
## A Three-way handshake {span=2}
```sequence num
Client -> Server: SYN, seq=x
Server -> Client: SYN+ACK, seq=y, ack=x+1
Client -> Server: ACK, ack=y+1
note Client, Server: ESTABLISHED
```

## C State changes {span=2}
```flow LR
(CLOSED) -> LISTEN: passive open
LISTEN -> SYN_RCVD: get SYN / send SYN+ACK
SYN_RCVD -> *ESTABLISHED: get ACK
```

Дальше CLI выбирает шаблон, расставляет панели, применяет тему, строит блок-схему библиотекой dagre и рассчитывает интервалы в диаграмме последовательности по ширине подписей. Полный черновик из примера лежит в examples/tcp.en.md.

Компоненты

Агент выбирает компонент по форме информации:

Плюс блок кода, который может процитировать строки из ваших файлов, и обычная таблица — в ячейках ok, no, warn превращаются в ✓, ✗ и !. Полный синтаксис компонента: am help <component>, формат черновика и вызов CLI без агента — в справке.

Что ещё умеет

• Раскладка считается, а не угадывается. Позиции панелей и координаты схем вычисляются, подписи не обрезаются, в сетке нет дыр.
• Ошибки чинятся сами. Если в черновике ошибка, CLI возвращает номер строки, компонент и правильный пример. Агент чинит за одну попытку.
• Три темы. blueprint похожа на инженерный чертёж, shadcn использует аккуратные карточки, paper рассчитана на длинный текст. У всех есть светлый и тёмный режим, свои темы можно взять из каталога тем.
• Один файл без зависимостей. Страница — это один .html без ссылок на CDN и без веб-шрифтов. Открывается офлайн и легко пересылается.
• Настоящий код, а не перепечатка. Блок кода умеет цитировать строки из ваших файлов, так что на странице лежит реальный код. Файлы за пределами папки и файлы с ключами отклоняются.
• Ответ прямо на странице. Прокомментируйте любую панель, выберите вариант в вопросах ask — кнопка Reply соберёт всё в одно сообщение для агента.
• Исходник сохраняется. Каждая страница хранит внутри Markdown, из которого сделана. Кнопка «Copy source» вернёт его.

Проверка текста по ASD-STE100

ASD-STE100 — это управляемый вариант английского языка, который сначала применили в руководствах по обслуживанию самолётов. Правила конкретные: короткие предложения, одно значение на слово, шаги — в виде команд. Андрей Карпати отмечал, что если попросить LLM писать по этим правилам, текст читается заметно легче.

При каждой сборке страницы проверяется то, что машина умеет проверять: длина предложений, простые слова, пассивный залог. По умолчанию это только предупреждение. Строгий режим включается через /answer-me-with-html:config style strict или поле style: в самом черновике.

Режим «всегда включён»

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

Включается правилом в файле правил агента — например, ~/.claude/CLAUDE.md или AGENTS.md — которое можно добавить одной фразой:

Turn on always-on mode for Answer me with HTML: add a global rule — "[answer-me-with-html always-on] Whenever a reply gives a conclusion, summary, plan, comparison, review or explanation, even a short one, also make a page with the answer-me-with-html skill (2 to 4 panels for routine answers), render it with --no-open before you write the reply, and end the reply with a file:// link to the page. Skip casual chat, one- or two-sentence replies with no conclusion, pure command output, and requests for plain text."

Выключить — удалить правило. Старые страницы копятся в ~/.answer-me-with-html/, чистятся командой am clean.

Объясняющие видео

Последняя ступень «лестницы Карпати» для понимания вывода LLM — объясняющее видео. Попросите видео в стиле 3Blue1Brown: «make a 3b1b-style video on the TCP handshake».

Агент пишет тот же черновик, что и для страницы, плюс строку закадрового текста на каждый шаг. Команда am video превращает это в страницу-плеер: схема собирается по шагам вместе с голосом, камера следует за узлом, названным в скобках, а голос лежит внутри страницы, поэтому видео играет офлайн. В плеере есть полоса глав для перехода между сценами, кнопка скорости и кнопка экспорта — видео кодируется прямо в браузере и скачивается файлом (ffmpeg не нужен). Флаг --mp4 требует ffmpeg, а --webm обходится без него. Подробности — в гайде по видео.

Отдельно стоит сравнение с Archify и плагинами GenUI: Archify делает одну интерактивную схему из JSON-описания, а плагины GenUI показывают компоненты внутри одного чат-приложения. Здесь ответ собирается целиком — текст, таблицы, код и схемы — из Markdown-черновика, в любом агенте, умеющем выполнять команды в терминале.

Разработка

git clone https://github.com/QingYunA/answer-me-with-html.git && cd answer-me-with-html
npm install
npm test          # run the tests
AM_E2E=1 npm test # also run end-to-end video tests (system TTS, Chrome, ffmpeg)
npm run smoke:install # install for real with npx skills and validate the plugin manifests (needs network)
npm run build     # after changing src/, rebuild skills/answer-me-with-html/scripts/am.mjs
npm run snapshot  # compare rendered HTML with origin/main (refactors must not change it)

В рантайме всего две зависимости: marked разбирает Markdown, а dagre раскладывает блок-схемы. Обе уже вшиты в am.mjs. Соглашения мейнтейнеров описаны в CONTRIBUTING.md.

Лицензия — MIT. Шрифт Bangers, который может подключить тема, распространяется по SIL Open Font License 1.1.