genjutsu — навыки для Claude Code, которые сначала показывают замысел, а потом пишут код

genjutsu — это набор навыков для Claude Code, claude.ai и Cowork, который учит ИИ делать интерфейсы, которые двигаются, и страницы, которые выглядят как задумано, а не как по умолчанию. Название переводится как «техника иллюзии». Репозиторий открыт под лицензией MIT, написан на Python, у него 576 звёзд.

Главная мысль проекта простая. Когда модель пишет интерфейс по запросу «сделай страницу для стартапа», она достаёт из памяти усреднённый шаблон: нумерованный надзаголовок, три одинаковые карточки, выдуманный «ESTD. 2018». Результат технически работает, но выглядит как сотни других. genjutsu решает это двумя средствами. Первое — перед написанием кода агент обязан сформулировать, как именно должна вести себя деталь интерфейса, и показать это человеку на утверждение. Второе — в проекте ведётся каталог «признаков» (tells): типовых ходов, которые модель достаёт без просьбы, и отдельная проверка ищет их в готовом коде.

Три масштаба

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

Если непонятно, какой навык нужен, можно описать желаемый результат — подходящий подберётся сам. cast и paint предлагают перейти на bunshin ровно один раз и сразу называют её стоимость, если задача оказалась про целый сайт.

Установка

npx skills add https://genjutsu.athevon.dev -g

После этого в Claude Code достаточно описать задачу словами или вызвать /genjutsu. Чтобы следить за новыми версиями: npx skills update -g. Флаг -g нужен в обеих командах, а адрес — именно этот, не репозиторий: команда npx skills add AThevon/genjutsu поставит навыки без их модулей.

Второй способ — плагин для Claude Code. Тогда в сессии появляются отдельные команды /genjutsu:cast, /genjutsu:paint и /genjutsu:bunshin:

/plugin marketplace add AThevon/genjutsu
/plugin install genjutsu

Подробности про область установки, claude.ai, Cowork и другие агенты — в документации по установке.

Сначала тезис, потом код

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

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

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

Признаки, которые никто не просил

Каталог признаков — это полевое руководство по дефолтам, к которым модель тянется без запроса. Среди примеров — нумерованный надзаголовок, три равные карточки, придуманное «ESTD. 2018», выдуманный статус сборки.

Правило простое. Если работа на web больше, чем один hover или переход, любой признак, который написал агент, исправляется до финального отчёта. Проходов не больше двух, а то, что осталось, попадает в отчёт. Исключение одно: если признак назван в утверждённом тезисе, он остаётся.

Проверить проект можно одной командой — она перечисляет найденное с указанием file:line и вопросом, на который нужно ответить:

python3 ~/.agents/skills/genjutsu/_jutsu/design-audit/scripts/audit.py . --group tells

Сайт целиком: bunshin

bunshin — самый дорогой режим, и он честен в этом. Сначала он называет стоимость. Затем задаёт ровно два вопроса: какой уровень и в какую сторону двигаться. Дальше работает команда агентов: арт-директор отвечает за исследование и общее направление, на каждую страницу назначается отдельный исполнитель, затем идут проверяющие и раунды правок, пока не сработает правило остановки.

На выходе — готовый сайт, документ DESIGN.md с правилами, файл AGENTS.md и отчёт о том, что было проверено, а что осталось непроверенным. Последняя часть — не формальность: она прямо перечисляет места, где агент не мог проверить себя.

Примеры с честными отчётами

Авторы ведут открытый репозиторий с примерами — genjutsu-examples. В каждом лежат код, который написал агент, чек (receipt) с полным промптом, перечнем выполненных проверок и списком того, что осталось непроверенным или оказалось неверным, а также медиа. Отдельные примеры работают как живые демо.

Отчёты там честные в обе стороны. У Nocturne перечислены три дефекта, которые агент внёс сам: список звёзд наезжает на купол, строка звёздной величины закрывает название, а на телефоне панель героя прячет низ купола. У Folio дефект нашёл не собственный аудит агента, а проверка вручную. Один прогон без диалога — «одноразовый headless-запуск», это одна сессия claude plugin eval, где промпт сразу отвечает на все вопросы и никто не отвечает вслед; такие прогоны честно помечают свой тезис как UNVALIDATED.

Замеры и границы этих замеров

В репозитории есть набор тестовых заданий, которые выполняются с genjutsu и без него.

Цифры считают найденные признаки и проверки проверяющих. Они не отвечают на вопрос, какая страница выглядит лучше: страница, сделанная без genjutsu, может выглядеть не хуже. Авторы честно предупреждают: сегодняшние модели редко пишут часть классических признаков сами по себе, поэтому прирост скромный. И отдельно оговаривают, что проверяющие здесь — свои, так что читать это стоит как «genjutsu против того, чего он хотел достичь», а не как независимый замер. Контрольный случай сработал: когда задание действительно просит два городских часа и тезис их называет, часы остаются на месте при каждом прогоне.

Где это применяется

• Web: React, Vue, Svelte, Astro, обычный CSS, Three.js, Canvas. Работает с GSAP, Motion и Three.js.
• Android: Jetpack Compose и Compose Multiplatform.
• Apple: SwiftUI для iOS и macOS.

bunshin пока работает только с web.

Внутри репозитория есть отдельные модули: каталог признаков, модуль поиска по дизайн-данным ui-ux-pro-max, скрипт проверки audit.py. Если в системе установлен Impeccable, bunshin отдаёт ему интервью с клиентом, нарисованное направление, планку качества, детектор, проверку изображений и финальную вычитку. Материалы проекта опираются на 29 источников, среди которых nextlevelbuilder/ui-ux-pro-max-skill, pbakaus/impeccable и Leonxlnx/taste-skill, из которого взят сам принцип «записывать дефолты, к которым тянется модель».

Лицензия и развитие

Проект бесплатный, лицензия MIT. Поддержать разработку можно на GitHub Sponsors.

Раньше проект назывался creative-excellence (версии 2.x); шаги перехода описаны в CHANGELOG.md.

Полезные ссылки: документация · установка · cast · paint · bunshin · признаки · FAQ