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

tl;dr — змусь свого агента спілкуватися візуально, а не простирадлами тексту.

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

Легший і швидший за HTML, достатньо добрий для більшості задач, що виникають у розробці.

Кодинг-агенти видають суцільні простирадла тексту

Колишній CEO reddit:

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

Mario Zechner, творець pi:

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

Connor з Replicas:

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

Dillon Mulroy навіть зробив скіл *популяризував скіл від @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

Якщо ти колись дивився виступ Coda Hale про інтуїцію проти уваги в інфраструктурних системах, то це трохи навіяно ним:

• аналізувати інформацію — складно й виснажливо
• твій зоровий кортекс тренувався мільйони років, щоб без жодних зусиль обробляти насичену візуальну інформацію
• оптимізуй інструменти відповідно

Як сокира має зручно лягати в людську руку, щоб бути корисною, так і програмне забезпечення має відповідати людському розуму, щоб бути корисним

/show-me спонукає агента пояснювати, що відбувається, лаконічними візуалізаціями замість простирадл тексту.

Це дуже добре підходить для проєктування програми — етапу, який нині багато хто пропускає, але який, на мою думку, є критично важливим. Варто обговорювати форму коду (типи, сигнатури, стек викликів) ще до того, як агенти візьмуться його писати.

Ті самі прийоми можна також застосовувати, щоб досліджувати великі дифи заднім числом і розуміти, куди копати під час рев'ю.

Що всередині

дерева компонентів

Та сама ідея, але на фронтенді: лишаємо важливі хуки стану та межі модулів, а все інше викидаємо.

Я ділився цим у Twitter ще в грудні 2025-го:

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

стеки викликів

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

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

Tanishq навіть написав інструмент, який обчислює їх прямо з AST

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

діаграми

Класика. Якщо твій чат-інтерфейс підтримує інлайн-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.

або

/show-me у форматі html-пояснення

Розкажи, що думаєш! Познач @humanlayer_dev або @dexhorthy своїми результатами чи тим, що ти доопрацював/додав, — і давай поміркуємо разом!

GIF