Проблема диаграмм: части без поведения
Вирусное видео Better Stack «This Claude Code Skill Is Actually Insane» подчеркивает основную проблему традиционных диаграмм: блоки и стрелки подтверждают существование компонента, но редко раскрывают его динамическое поведение. Мы видим части, но изменения состояния и причинно-следственные связи часто остаются абстрактными, заставляя нас догадываться о механизме работы.
Представляем anatomy, навык агента с открытым исходным кодом для Claude Code, который меняет эту парадигму. Его руководящий принцип, четко сформулированный в корневом промпте, гласит: «Не рисуй блоки, стрелки и подписи. Изобрети настоящую, хорошо сделанную физическую вещь, работа которой и есть концепция». Это требование заставляет ИИ генерировать интерактивные физические машины, воплощающие логику системы.
Такой подход преображает понимание. Ключ кэша становится штифтовым замком; правильный ключ выравнивает штифты, открывая дверь. Кэш LRU может предстать в виде вращающегося механического книжного шкафа, а рукопожатие TCP анимируется как веревки и блоки, обменивающиеся письмами.
Вместо того чтобы запоминать статические связи, пользователи теперь могут проследить за механизмом, наблюдая, как вращается кэш LRU или как каретка индикатора часового типа скользит для считывания каждого блока. Это интерактивное физическое воплощение демистифицирует сложные системы, делая их интуитивно понятными как для обучения, так и для отладки. Результатом является не статичное изображение, а инспектируемый код HTML, SVG или WebGL.
Кэш становится замком, а протокол — веревочной системой
Вместо абстрактных блоков навык anatomy превращает ключ кэша в штифтовой замок. Будучи физическим механизмом, он показывает, как правильный ключ выравнивает штифты, позволяя замку открыться. Это делает проверку осязаемой, раскрывая внутреннюю работу концепции.
Кэш LRU превращается во вращающийся механический книжный шкаф или лабиринт для шариков. Вы наблюдаете, как элементы запрашиваются, перемещаются и удаляются по мере работы механизма, что проясняет его поведение. Аналогично, TCP становится системой веревок или блоков, обменивающихся письмами, иллюстрируя изменения состояния протокола рукопожатия.
Этот подход распространяется на физические сборки и измерения. Например, ракетный двигатель Raptor при наведении курсора распадается на 11 отдельных узлов, дополненных выхлопным шлейфом в WebGL. Индикатор часового типа показывает, как его каретка скользит по измерительным блокам, а стрелка считывает каждый блок по мере вашего взаимодействия.
Эти интерактивные модели, отрисованные в формате SVG или WebGL, не просто существуют — они работают. Они предлагают глубокий сдвиг от статических диаграмм к кинетическим объяснениям, преодолевая разрыв между существованием компонента и его динамической функцией.
Под капотом: иллюстрации, которые можно изучить
Anatomy, навык, продемонстрированный в видео «This Claude Code Skill Is Actually Insane», генерирует исполняемый код, а не статические изображения. Claude создает автономные компоненты SVG, HTML/JavaScript или React. Этот результат позволяет напрямую взаимодействовать, изучать и модифицировать их, фундаментально меняя то, как мы визуализируем поведение системы.
Многослойный визуальный подход обеспечивает эту интерактивность. Изометрический рендеринг, строгий порядок отрисовки по «алгоритму художника» и дополнительные эффекты WebGL, такие как шлейф двигателя (как на ракете Raptor), способствуют ощущению физической осязаемости. В отличие от плоского растрового изображения, это машины, которые можно «потрогать».
Практические отличия от традиционной генерации изображений глубоки. Аудит в браузере позволяет выявлять коллизии, неверные конечные точки каналов и некорректное перекрытие, обеспечивая геометрическую целостность — критически важная деталь для системы, призванной воплощать концепцию. Сам код можно проверять, отлаживать и контролировать его версии.
Это значительный шаг вперед по сравнению с абстрактными диаграммами. Для более глубокого изучения механизмов работы вы можете ознакомиться с кодом на GitHub - wheresryan22/anatomy: An agent skill for creating detailed, interactive isometric illustrations. Возможность проверять, взаимодействовать и контролировать версии этих сгенерированных «машин» превращает их из простых иллюстраций в функциональные, проверяемые вычислительные модели.
Нравится статья? Получайте такие каждое утро на почту.
одно письмо в день · отписка в два клика · без сторонних трекеров
Где заканчивается магия — и как это попробовать
Этот Claude Code Skill просто невероятен, но не ожидайте, что он заменит ваши повседневные инструменты для создания диаграмм. Генерация этих сложных, интерактивных моделей требует значительных вычислительных мощностей и токенов. Каждая детализированная иллюстрация часто требует множества геометрических линий, нескольких запусков агента и проверки в браузере для обеспечения точности.
Anatomy отлично подходит для объяснения конкретных механизмов и поведения систем — например, принципов работы LRU-кэша или протоколов рукопожатия в TCP. Это не замена для диаграмм Mermaid, стандартных библиотек построения графиков, финансовых дашбордов или географических карт. Используйте его, чтобы прояснить, как что-то работает, а не просто показать, что оно существует.
Чтобы поэкспериментировать с Anatomy, перейдите к проекту с лицензией MIT на GitHub по адресу wheresryan22/anatomy. Там вы найдете команду Agent Skills CLI. Начните с малого: выберите одну концепцию, сгенерируйте ее интерактивную модель и изучите полученный код SVG, HTML или React-компонента. Это гарантирует, что сгенерированное взаимодействие и логика соответствуют вашему замыслу, прежде чем вы начнете делиться результатом.
Этот навык генерирует код, а не статические изображения. Это фундаментальное отличие позволяет создавать точные интерактивные визуализации, показанные в This Claude Code Skill Is Actually Insane. От простого штифтового замка до многоузлового двигателя Raptor с выхлопным шлейфом на WebGL — Anatomy делает абстракции осязаемыми.
Часто задаваемые вопросы
Что такое навык Anatomy для Claude Code?
Навык агента с открытым исходным кодом, который направляет агентов-кодировщиков на создание интерактивных иллюстраций концепций на основе кода в виде работающих физических механизмов.
Как Anatomy объясняет программные концепции?
Он сопоставляет концепцию с механической аналогией, а затем создает интерактивную иллюстрацию, которая позволяет пользователям наблюдать за поведением системы или управлять им.
Может ли Anatomy заменить Mermaid или библиотеки для построения графиков?
Нет. Он дополняет инструменты для создания блок-схем при объяснении механизмов, но не предназначен для дашбордов, финансовых графиков или географических карт.
Как установить Anatomy для Claude Code?
В проекте описана установка с помощью Agent Skills CLI: npx skills add wheresryan22/anatomy -g -a claude-code.