/show-me: компактные визуальные представления для AI-агентов в программировании

tl;dr: заставьте своего агента общаться визуально, а не простынями текста.

1npx skills add humanlayer/skills --skill show-me

Это легче и быстрее HTML и вполне подходит для большинства задач разработки.

Кодинг-агенты практически нечитаемы

Бывший генеральный директор Reddit:

https://x.com/yishan/status/2086534431075098628

Марио Цехнер, создатель pi:

https://x.com/badlogicgames/status/2087068077309542889

Коннор из Replicas:

https://x.com/connortbot/status/2081881377147109413

Диллон Малрой даже сделал скилл *популяризировал скилл от @backnotprop, чтобы просить модель упрощать язык.

https://x.com/dillon_mulroy/status/2079238358358778142

А вот его содержание:

Переформулируй своё последнее сообщение. Перестань использовать жаргон и говори связно. Сформулируй проще и короче, как один человек говорит с другим.

Меня это уже достало

Агенты стали умнее на бумаге, но пользоваться ими стало заметно хуже в этом отношении.

То, за что люди раньше любили Claude, — его голос, его характер, его «душу» — вымыли в RL-данжене.

Sol чуть менее кринжовый, но всё равно регулярно заваливает нас простынями жаргона, от которого глаза стекленеют.

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

Моё предложение: show me

Мы возились с внутренними инструментами, чтобы это исправить, особенно для кодинга, и оформили их в скилл, который назвали show-me.

Сегодня он уже доступен в humanlayer, а если он нужен вам в другом кодинг-агенте, можно получить его здесь:

1npx skills add humanlayer/skills --skill show-me

Или получите встроенную версию humanlayer, где inline-HTML и диаграммы работают как полноценные элементы:

1brew trust humanlayer/humanlayer
2brew tap humanlayer/humanlayer
3brew install humanlayer

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

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

Как топор должен подходить к руке человека, чтобы быть полезным, так и программное обеспечение должно подходить человеческому разуму.

/show-me предлагает агенту использовать лаконичные визуальные схемы для объяснения происходящего вместо простыней текста.

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

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

Что внутри

Деревья компонентов

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

Я публиковал это в Twitter ещё в декабре 2025-го:

https://x.com/dexhorthy/status/1998968236617199803

Стеки вызовов

Для оркестрации, управления потоком выполнения или просто любой бэкенд-задачи Диллон дал нам форму «стека вызовов».

https://x.com/dillon_mulroy/status/2059985696148849025

Таниш даже написал инструмент, который вычисляет их прямо из AST:

https://x.com/tanishqk/status/2085800689129935342

Диаграммы

Классика. Если ваш чат-интерфейс поддерживает inline-диаграммы mermaid, они могут очень помочь. (Иногда это всё равно шлак, но обычно лучше, чем читать слова.)

Вариантов много. Нам больше всего нравятся диаграммы состояний и диаграммы последовательностей.

Структура файлов

Неглубокое дерево файлов, по одной строке с зоной ответственности для каждого элемента. Хорошо подходит для вопросов «где это лежит» и для определения объёма рефакторинга.

Псевдокод

Особенно для алгоритмических вещей псевдокод может быть лаконичнее.

Типы и сигнатуры

Форма кода до того, как он вообще появился, — то, что слишком внутреннее для архитектурного документа, но в чём агент всё равно может накосячить.

1interface Item {
2  id: ItemId
3  parentId: ItemId | null
4  // ...
5}
6
7interface Cursor {
8  position: ItemId
9  direction: 'up' | 'down'
10  // ...
11}
12
13resolveTarget(items: Item[], cursor: Cursor) -> ItemId | null

Синтаксис diff

Для этого можно использовать и diff-синтаксис, если большая часть содержимого не изменилась:

Для изменения компонента:

Для изменения дерева вызовов:

Для изменения структуры файлов:

А для изменения состояния или потока управления, где форма задаётся псевдокодом, а не реальным кодом:

HTML-макеты

HTML заменил нам Figma во многих задачах по прототипированию. (Если честно, я с Figma никогда не был особо дружен.)

HTML-диаграммы

Иногда нужна именно диаграмма или наглядное объяснение.

В humanlayer мы разрешаем агенту вставлять HTML прямо в ответы ассистента.

Но вы также можете просто открыть его в браузере.

Другие источники вдохновения

Хочу также отдать должное @mattpocockuk за HTML-объяснения, которые генерирует его скилл /teach, — очень здорово.

Попробуйте

1npx skills add humanlayer/skills --skill show-me

После установки скилла вызовите /show-me или попросите агента использовать скилл show-me. Направьте его на маршрут, сервис, фичу, пул-реквест или текущую тему, а можно просто попросить модель переформулировать вопрос или утверждение.

Это слишком много контента. Покажи мне.

или

/show-me как html-объяснение

Расскажите нам, что вы думаете! Отмечайте @humanlayer_dev или @dexhorthy со своими результатами или тем, что вы кастомизировали или добавили, — давайте обсудим!

GIF