Интерактивные объяснения

Когда мы перестаём понимать, как работает код, написанный нашими агентами, мы накапливаем «когнитивный долг». Один из лучших способов погасить его — строить интерактивные объяснения, которые помогают по-настоящему разобраться в логике программы.

Это AI-перевод статьи, сделанный каналом Про AI: Лучшие Статьи и Исследования.

Интерактивные объяснения

Interactive explanations Автор: Simon Willison Оригинальный текст:

Когда мы теряем понимание того, как работает код, написанный нашими агентами, мы берём на себя когнитивный долг.

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

Однако часто детали действительно важны. Если ядро нашего приложения превращается в чёрный ящик, который мы не до конца понимаем, мы больше не можем уверенно рассуждать о нём. Это затрудняет планирование новых функций и в итоге замедляет прогресс точно так же, как накопленный технический долг.

Как погасить когнитивный долг? Улучшая своё понимание того, как работает код.

Один из моих любимых способов сделать это — создавать интерактивные объяснения.

Разбираемся в облаках слов

В статье An AI agent coding skeptic tries AI agent coding, in excessive detail Макс Вульф упомянул, что тестирует способности LLM (большая языковая модель) в Rust с помощью промпта «Создай приложение на Rust, которое генерирует визуализации "облака слов" по длинному входному тексту».

Это захватило моё воображение: я всегда хотел разобраться, как работают облака слов, поэтому запустил асинхронный исследовательский проект — начальный промпт здесь, код и отчёт здесь — чтобы изучить эту идею.

Всё отлично сработало: Claude Code для веба создал мне CLI-инструмент на Rust, способный генерировать подобные изображения.

Но как это на самом деле работает?

В отчёте Claude было сказано, что используется «размещение по архимедовой спирали со случайным угловым смещением для каждого слова, чтобы компоновка выглядела естественно». Мне это мало что прояснило!

Я запросил линейный разбор кодовой базы, который помог мне подробнее понять код на Rust — вот сам разбор (и промпт). Это помогло разобраться в структуре кода, но интуитивного понимания того, как именно работает «размещение по архимедовой спирали», у меня так и не появилось.

Тогда я попросил создать анимированное объяснение. Для этого я вставил ссылку на уже существующий документ walkthrough.md в сессию Claude Code вместе со следующим запросом.

Вы можете поиграть с результатом здесь. Вот демо в виде анимированного GIF.

Я использовал Claude Opus 4.6, у которого оказался неплохой вкус в создании поясняющих анимаций.

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

Я обнаружил, что эта анимация действительно помогла мне по-настоящему понять, как работает алгоритм.

Я давно ценю анимации и интерактивные интерфейсы как способ объяснения различных концепций. Хороший агент (агентный) для написания кода может создавать их по запросу, чтобы помочь разобраться в коде — как в своём собственном, так и в чужом.

Подпишитесь на канал и каждый день читайте лучшие материалы про AI переведенные на русский!

Нашли интересную статью для перевода? Пришлите нашему боту: @ailongreadsbot