Скилл anatomy: когда ИИ-агент объясняет технологии машинами

Как объяснить клиенту, как работает кэширование? Текст на две тысячи слов со стрелками и блоками прочтут немногие. А вот если перед человеком машина — например, штифтовый замок, где каждый штифт совпадает с битовыми полями ключа, и когда все совпали — личинка проворачивается и ничего не пересчитывается, — концепция понимается за секунды. На этой идее построен открытый скилл anatomy (github.com/wheresryan22/anatomy): «объект и есть объяснение».

Что такое anatomy

Это агентный скилл — набор инструкций и библиотека для ИИ-агентов (Claude Code, Codex, OpenCode, Antigravity, MiniMax Code). Репозиторий на GitHub собрал 12,4 тысячи звёзд, лицензия MIT, внутри 152 коммита и восемь законченных примеров-эталонов. Не нейросеть рисует картинку — агент пишет код, который детерминированно собирает фигуру: слои заливки, порядок рисования, пружинки, риски, болтики.

Философия показана в таблице самого скилла:

Концепция	Объект
Общий GPU-контекст на много канвасов	Гантри-плоттер: одна печатающая головка обходит 16 лунок
Ключ кэша, пропускающий работу	Штифтовый замок: все штифты совпали — пробка повернулась
Семь рендер-таргетов с разным размером пикселя	Комод с семью ящиками разной глубины
Сепарабельный блюр 49×49 против 49+49	Гребёнки на направляющих рядом с «гвоздёвым» штампом

Три режима: чистый SVG (изометрия, четырёхтональная заливка), SVG + WebGL (огонь, выхлоп, вода, каустика) и бета-режим настоящего 3D с вращением. Требования скромные: Node.js 20.10+ и Chrome для самопроверок.

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

В репозитории — свой «чертёжный кит»: камера, тела вращения, трубы с фланцами и хомутами, WebGL-слой в той же изометрии, что и линии. Дальше интереснее: у кита есть самопроверки, как у инженерного чертежа, а не у генератора картинок.

• Аудит геометрии: скрипт рейкастом проверяет, что ни одна труба не проходит сквозь деталь, что концы труб сидят на реальных креплениях, а изгибы не заламываются. Не прошло — сборка падает с ненулевым кодом.
• Проверка концов линий: каждая риска, шов и фаска обязана закончиться на другом штрихе, точке или обводке. В нашей фигуре — 674 конца линий, висящих — ноль.
• Скриншотные прогоны в headless-браузере: обе темы, мобильная ширина 390px, режим reduced-motion и запасной режим без WebGL.

То же самое, что code review для кода, только для чертежа.

Кейс: турбовентиляторный двигатель на стенде

Мы протестировали скилл на «неудобной» задаче: модель реактивного двигателя со всеми функциями. Получилась интерактивная фигура — она живёт прямо в этой статье:

Если читаете с телефона или хотите на весь экран — откройте пример в новой вкладке{target=“_blank”} (есть и тёмная версия{target=“_blank”}).

Что внутри:

• 191 деталь: вентилятор с 16 лопастями, компрессор низкого давления (3 ступени) и высокого (9 ступеней), камера сгорания с жаровой трубой и восемью форсунками, турбины, два соосных вала, сопло, коробка приводов с насосами, трубопроводы топлива и масла с фланцами.
• Живая физика: нажмите Space — стартер раскрутит ротор высокого давления, на ~24% оборотов произойдёт розжиг, двигатель выйдет на холостые; ротор низкого давления подтянется следом, температура газов и тяга отреагируют с реалистичными задержками.
• Рычаг тяги: тяните его мышью по квадранту или стрелками ←→, приборы N1 и EGT со стрелками и красными секторами отвечают мгновенно.
• Выхлоп посчитан шейдером: раскалённая струя с ромбами Маха появляется на высоких оборотах, камера сгорания светится в вырезе, палуба ловит отсветы.
• Наведите курсором — двигатель разберётся на десять узлов вдоль оси, каждый подпишет себя. Если оставить фигуру в покое, она сама покажет экскурсию.

Честная цифра про трудозатраты: первый аудит геометрии у нас провалился — 129 тысяч нарушений порядка отрисовки, потому что мы наслаивали детали «как в жизни», вложенными. У кита другое правило: кольца с зазорами, барабаны коротышами между ними, валы — сквозные штоки. После перестроения нарушений стало в разы меньше, а сборка с полной проверкой занимает около 23 минут чистых вычислений. Это не «кнопка сделать красиво», это инженерный конвейер — и именно поэтому результат выдерживает увеличение в четыре раза без «плывущих» деталей.

Проверка безопасности: что сказал SkillSpector

Перед работой мы, как обычно, прогнали репозиторий через SkillSpector. Вердикт напугал бы: «100/100, CRITICAL, DO NOT INSTALL», 632 находки. Разбор показал, что это ложные срабатывания: 546 — «перегрузка контекста» на большие справочники с документацией (это и есть суть скилла), 57 — непрогнанные до конца тесты из-за таймаутов сканера, остальное — минифицированный инлайн-код в готовых примерах. Ручная проверка: сетевых вызовов нет, кроме localhost для скриншотов; исполнение — только headless-браузер. Код чист. Мораль та же, что в обзоре SkillSpector: вердикт сканера — это повод разбраться, а не приговор.

Кому и зачем это на практике

Живые чертежи — это контент, который дольше держит внимание и лучше запоминается, чем гифка со стока:

• Блоги и медиа — объяснять архитектуру продуктов, сравнения, «как это работает».
• Документация и хелпдески — вместо тысячи слов: вот узел, вот что крутится, вот где подкрутить.
• Лендинги технических продуктов — интерактив, который нельзя скопировать конкуренту парой кликов.
• Обучение и онбординг — от принципов работы железа до устройства собственных пайплайнов.

Мы в Automata собираем такие фигуры под задачу: от концепции-метафоры до встроенной в страницу интерактивной схемы — с проверками, обеими темами и мобильной версией. Если хотите объяснить свой продукт языком машин — расскажите, что именно нужно объяснить, остальное сделаем мы.

📞 +7 (906) 311-77-69 · ✉ hello@automata.sale · 💬 Telegram: @automatasale · 🌐 automata.sale

ИП Урядов Евгений Евгеньевич · ИНН 645112058391 · ОГРНИП 312645301900058 Работаем по России, Беларуси и Казахстану