Живые схемы в Claude: навык Anatomy, установка и 7 запросов

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

Anatomy делает по-другому. Это бесплатный навык для Claude Code: пишешь одну строку, что нужно объяснить, и Claude придумывает настоящий предмет, работа которого и есть объяснение. Потом собирает его из десятков маленьких деталей в объёмную изометрическую схему, которая двигается под курсором. Ниже установка на Mac и Windows, 7 готовых запросов и как сохранить результат для карусели или сайта.

Проверь: это про тебя?

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

Что такое Anatomy

Репозиторий github.com/wheresryan22/anatomy, сайт проекта skills.wheresryan.sh/anatomy. Создан 8 октября 2026 года, за 10 дней набрал больше 15 тысяч звёзд. Лицензия MIT, то есть бесплатно и можно использовать в своей работе.

Главное правило навыка: предмет и есть объяснение. В README приводят пример: «кэш, который пропускает работу, если ничего не изменилось» превращается в замок со штифтами, который поворачивается, только когда совпали все штифты. Дальше Claude собирает предмет из деталей с объёмом и тенями, кладёт в карточку с заголовком, подсказкой и живыми цифрами, а потом сам проверяет работу, приближая каждый стык.

Навык написан для Claude Code, но работает и в Antigravity, OpenCode, Codex и MiniMax Code. API-ключи не нужны, ставить ничего через npm install тоже не нужно.

Что получится на выходе

• SVG. Основа: объёмные детали, плавное движение, живые цифры. Это отдельная HTML-страница, одиночный SVG-файл или компонент для React и Next.js.
• SVG плюс WebGL. Для того, что линиями не нарисуешь: огонь, выхлоп, вода, свет лампы, пар.
• 3D (бета). Детали, которые по-настоящему вращаются: диск, пальцы, отваливающаяся часть.

Каждая схема бывает в светлой или тёмной теме. Детали реагируют на мышку и клавиатуру.

Попробуй до установки

В папке examples лежат готовые страницы, их можно открыть в браузере без Claude. Скачай ZIP архив репозитория, распакуй и открой двойным щелчком, например, examples/raptor-engine/raptor-engine.html (двигатель Raptor 2, наведи курсор, и он разберётся на 11 узлов) или examples/arcade-cabinet/arcade-cabinet.html (игровой автомат с монеткой). Рядом лежат версии с приставкой -light, это светлая тема.

Установка на Mac

1. Поставь Claude Code, если его ещё нет. Открой «Терминал» и вставь: curl -fsSL https://claude.ai/install.sh | bash. Для работы нужен платный тариф Claude. Официальная инструкция: code.claude.com/docs.
2. Поставь Node.js с nodejs.org, версию LTS. Самому навыку хватает 20.10, но установщик навыков просит 22.20 или новее. Проверить версию: node -v.
3. В терминале введи: npx skills add wheresryan22/anatomy -g -a claude-code. Навык ляжет в папку ~/.claude/skills/anatomy. Без -a claude-code установщик спросит, для каких программ его поставить.
4. Запусти Claude Code командой claude и напиши запрос, который начинается с /anatomy. Если навык не виден, введи /reload-skills.

Установка на Windows

1. Поставь Claude Code: открой PowerShell и вставь irm https://claude.ai/install.ps1 | iex.
2. Скачай установщик Node.js LTS с nodejs.org и пройди его, нажимая «Далее». Закрой и снова открой окно терминала, чтобы команда node появилась.
3. Введи npx skills add wheresryan22/anatomy -g -a claude-code. Если PowerShell ругается на запуск скриптов, открой «Командную строку» (cmd) и введи то же самое.
4. Запусти claude и пиши запрос с /anatomy.

Если установщик не сработал

Есть путь без команд. Скачай ZIP, распакуй, переименуй папку anatomy-main в anatomy и перенеси в папку skills внутри .claude в домашней папке. На Mac это ~/.claude/skills/ (скрытые папки в Finder показывает Cmd + Shift + точка), на Windows C:\Users\твоё_имя\.claude\skills\. Внутри должен лежать файл SKILL.md.

Как писать запрос

Автор навыка советует три привычки:

1. Называй идею. Скажи, что нужно объяснить, и дай настоящие цифры: размеры, количество, сроки, пороги. Предмет Claude придумает сам.
2. Или сразу назови предмет. Кофемашина, горелка, замок, и что в нём должно двигаться.
3. Скажи, где схема будет жить. Отдельная HTML-страница, одиночный SVG или компонент для React. Светлая или тёмная тема.

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

7 готовых запросов

1. Ракетный двигатель для ребёнка

/anatomy объясни ребёнку 8 лет, как работает ракетный двигатель: топливо и окислитель смешиваются в камере сгорания, горячий газ вырывается через сопло и толкает ракету вверх. Пламя сделай на WebGL. Все подписи на русском, одна HTML-страница, светлая тема.

2. Как работает твой продукт

/anatomy объясни клиентам, как работает [мой продукт или услуга]. Реальные цифры: [сроки, число шагов, лимиты]. Придумай механизм, в котором движение деталей и есть этот процесс, и покажи живые цифры. Подписи на русском, одна HTML-страница для лендинга, светлая тема.

3. Схема для карусели

/anatomy схема для поста в Instagram: как работает автоворонка. Человек пишет слово в комментариях, бот за минуту присылает гайд, через сутки приходит напоминание. Придумай предмет, который это показывает, подписи на русском. Только SVG-файл и PNG-превью, тёмная тема.

4. Кофемашина изнутри

/anatomy кофемашина со снятой боковой панелью: бойлер, трубка теплообменника, группа, помпа, паровая трубка и манометр. Покажи, как течёт вода, когда варишь эспрессо. Подписи на русском, одна HTML-страница, светлая тема.

5. Как ключ открывает замок

/anatomy объясни ребёнку, как ключ открывает дверной замок: штифты поднимаются, и цилиндр поворачивается, только когда все штифты встали на место. Дай покрутить ключ мышкой. Подписи на русском, одна HTML-страница, светлая тема.

6. Обучение сотрудников

Заказ приходит на сайт, сборка занимает [время], упаковка [время], курьер забирает [во сколько]. Придумай механизм, который это показывает, с живыми цифрами. Подписи на русском, одна HTML-страница, светлая тема.

7. Живая схема для сайта

/anatomy фигура для моего сайта на Next.js: как работает подписка на мой клуб. Человек оплачивает, получает доступ на 30 дней, за 3 дня до конца приходит напоминание. React-компонент плюс статичное HTML-превью, тёмная тема, подписи на русском.

Как сохранить и показать результат

• Файлы остаются у тебя. Claude отдаёт исходник: скрипт сборки и готовую страницу. Спроси в чате «где лежит HTML-файл», открой его двойным щелчком в браузере.
• Картинка для карусели. Попроси в запросе «PNG-превью», как в запросе 3. Или сделай скриншот: на Mac Cmd + Shift + 4, на Windows Win + Shift + S.
• Видео для Reels и сторис. Запиши экран, пока двигаешь детали: на Mac Cmd + Shift + 5, на Windows Win + Alt + R.
• На сайт. Одиночный SVG вставляется в страницу как картинка, HTML можно выложить как отдельную страницу, для сайта на React или Next.js проси компонент.
• Похвастаться. Напиши Claude «publish this figure to the Anatomy community gallery». Он спросит название и имя на GitHub, покажет, что отправит, и после твоего «да» выложит схему в общую галерею.

Что учесть

• Схема собирается долго, так задумано: Claude проходит список деталей, геометрию, проверку и крупные планы каждого стыка. Запускай, когда не торопишься.
• Навык рисует машины, приборы, инструменты и мебель. Людей и точные карты он не рисует. Идея без механизма получится слабее.
• Это не построитель графиков: осей и диаграмм не будет, цифры показываются живым табло.
• Для огня и воды нужен WebGL. Без него сама схема всё равно читается.

Задание на сегодня

1. Скачай ZIP и открой raptor-engine.html. Пять минут покрути двигатель, чтобы понять, что вообще получится.
2. Поставь навык одной командой из раздела про свою систему.
3. Возьми запрос 2 и подставь свой продукт: что ты продаёшь, сколько шагов проходит клиент, какие сроки.
4. Пока Claude собирает схему, займись своими делами. Когда готово, открой страницу и сделай скриншот.

В итоге у тебя будет живая схема твоего продукта, которую можно сразу поставить на лендинг или в карусель. Такого визуала у конкурентов нет.

Отправить статью в Telegram