Метод Andrej Karpathy в пересказе Kai (@hqmank): попросить агента собрать одну интерактивную HTML-страницу вместо текста и разобраться в теме быстрее, чем по документации. Разбираем четыре формата вывода, промпт-шаблон, метрики инструментов и цену метода.
Есть способ разобраться в новой теме без чтения документации: попросить агента превратить её в одну интерактивную HTML-страницу — со схемами, кликами и самопроверкой — и открыть её в браузере. Приём популяризировал Andrej Karpathy (@karpathy), а 5 октября 2026 года инженер Kai (@hqmank) показал кейс: он изучал SEO и GEO по такой странице и усвоил тему быстрее, чем по документации. Ниже — как метод устроен, что именно писать агенту, какие метрики у инструментов и в чём его цена.
В посте от начала октября 2026 года (@karpathy) речь о том, что меняется, когда модели выполняют больше работы, а человеку остаётся контроль и понимание. Вместо длинных абзацев он предлагает задавать формат ответа — четыре варианта по возрастанию усилия.
Kai в своём посте выбрал третий формат и описал, зачем: агент превращает ключевые идеи в страницу, по которой можно кликать. Его формулировка полезна как маркер метода — «Please build a single-file, responsive, interactive HTML explainer» — это уже не «объясни простыми словами», а заказ на артефакт.
| Формат ответа | Что вы получаете | Когда выбирать |
|---|---|---|
| Текст ASD-STE100 | Однозначные короткие формулировки без украшений | Инструкции и регламенты, где важна точность, а не картинка |
| Диаграмма | Схему: узлы, связи, слои — структуру видно без чтения | Тема — система из нескольких частей |
| HTML-страница | Самодостаточный файл с текстом, схемой и интерактивом | Новая тема или чужой код: нужно вникнуть и запомнить |
| Объясняющее видео | Анимацию под ваш вопрос с озвучкой | Нужен сквозной прогон и важна динамика |
Цикл один: текст, который у вас уже есть (документация, диф, логи, транскрипт), превращается в один файл, который вы открываете и читаете глазами. Четыре шага выглядят так.
Ключевое отличие от «объясни простыми словами» — обязательная структура. Модель, которая не понимает тему, выдаёт это в вёрстке: пустые блоки, потерянные связи, обрубленные ветки. Дыра в схеме — самый честный сигнал «здесь я не разобрался», и он появляется до того, как вы успели поверить тексту.
Ниже — промпт-шаблон из разбора tau-home.com (по мотивам поста Kai), переведённый на русский. Он требует ровно то, что отличает объяснялку от обычного ответа: самодостаточный файл, схему сверху, кликабельные блоки и ссылки на источники.
Собери один самодостаточный интерактивный HTML-файл, чтобы я быстро понял [ТЕМА ИЛИ КОД]. Требования: 1. Всё в одном файле: открывается в браузере без установки зависимостей и без сервера. 2. Сверху — схема или сетка ключевых блоков: слои, компоненты, связи. 3. Каждый блок кликабельный: по клику в панели ниже раскрываются механизм, параметры и пример. 4. Тёмная тема, карточки, аккуратные состояния наведения. 5. У каждого технического утверждения — ссылка на источник. Нет источника — помечай как предположение. Что объяснять: [ВСТАВЬТЕ ДОКУМЕНТАЦИЮ, АЛГОРИТМ ИЛИ ФРАГМЕНТ КОДА]
Format your entire response as a complete HTML document.
SEO и GEO — многопеременная тема: техническая оптимизация, структура данных, поведенческие сигналы, ответы генеративных систем. Вместо чтения гайда Kai попросил агента собрать ключевые идеи в кликабельную страницу: блоки-карточки, раскрывающиеся панели, связи между понятиями.
Его вывод — «понял быстрее, чем по документации». В комментариях к посту сразу спросили про цену: HTML с разметкой и интерактивом расходует заметно больше выходных токенов, чем markdown. Это честное ограничение метода, и оно описано ниже.
Объяснялка — не статья с картинками. Это три слоя в одном файле: короткий текст, схема и интерактив. Слои нарастают по стоимости, поэтому собирать их нужно в этом порядке.
Внутри файла нет ничего экзотического — только разметка, стили и векторная графика. Ни сборки, ни сервера, ни внешних данных: файл можно открыть через год с рабочего стола и он не сломается.
Интерактив агент пишет сам, а вот схемы лучше не отдавать на волю случая: без редакционного стиля модели выдают одинаковый «скруглённый блок». Ниже — инструменты, которыми собирают объяснялки, и проверяемые метрики внимания к ним.
| Инструмент | Лицензия | Звёзды GitHub | Роль |
|---|---|---|---|
| Diagram Design | MIT | 56 149 | Навык агента: описываем схему словами — получаем HTML с inline SVG |
| Mermaid | MIT | 90 696 | Текстовый формат схем: удобно в репозитории и на страницах |
| Excalidraw | MIT | 133 962 | Рисование руками: набросок перед автоматической схемой |
| draw.io Desktop | GPL-3.0 | 63 526 | Ручной редактор схем офлайн, экспорт в SVG |
| tldraw | своя лицензия | 50 951 | Доска для быстрых набросков и совместной работы |
Отдельно стоит темп разработки: навык обновляется быстро, и по нему видно, что проект живой. Ниже — коммиты в репозиторий Diagram Design по неделям.
Эту страницу мы собирали тем же способом, только в обратном порядке: сначала проверили факты и метрики, потом собрали текст генератором страниц, а диаграммы — навыком Diagram Design с профилем сайта (тёмная тема, шрифты сайта, ни одного внешнего запроса).
Пример проверки: звёзды репозиториев и недельные коммиты взяты из GitHub API 16.10.2026, метрики поста — со страницы поста, промпт-шаблон — из разбора tau-home.com. Всё, что не подтверждено источником, помечено как редакционное суждение.
qantcore: палитра сайта и системные шрифты, без внешних загрузок.