Анимация интерфейса как на Dribbble: промпт для Claude Code
Опубликовано 26 сентября 2026.
Чтобы Claude Code собрал анимацию интерфейса уровня Dribbble, скопируйте промпт ниже и ответьте агенту на три вопроса: какие состояния интерфейса показать, в каком цвете и под какую музыку. Дальше агент сам собирает квадратный ролик на 14 секунд: одна фигура без единой склейки становится кнопкой, лоадером, плеером, слайдером, табами, графиком, палитрой ⌘K и тостом, и каждое событие попадает в долю 120 BPM. Наш прогон занял полтора часа.
Такую анимацию интерфейса обычно делают в After Effects или прототипируют в Figma. Здесь её пишет Claude Code: HTML-страница, где каждый кадр считается из времени, а в видео её переводят Playwright и ffmpeg.
Промпт для Claude Code: скопируйте целиком
Промпт написан по-английски, в таком виде мы его и запускали. Отвечать агенту можно по-русски.
<inputs>
Ask me for: 8 to 12 UI states I want the shape to become (e.g. button, loader, player, slider, toggle, tabs, chart, command palette, toast), pure black and white or one accent color, and a royalty-free song around 120 BPM (e.g. Mixkit, free for commercial use).
</inputs>
<direction>
Dribbble-level UI motion. One shape, never cut: every state is the same element morphing its size, radius and color while its content swaps with a short blur. A cursor drives every change with real clicks and drags. Light warm-gray canvas, black and white components, one clean UI font (Geist). Springs everywhere, a tiny overshoot at most. The camera zooms so each state fills the frame. The last frame is the first frame, so it loops.
Banned: bouncy easing, particle bursts, glows, gradients on UI chrome, mismatched icon strokes, dead time, anything that looks like a template.
</direction>
<structure>
120 BPM, 7 bars, something happens on every beat.
Button → loader → check → dynamic island → music player with a play/pause morph → scrub the progress bar → it becomes a volume slider that stretches when dragged past max → a toggle flips on the beat → the knob becomes a liquid tab indicator → the tabs open into a chart that draws itself, with a tooltip on hover → it collapses into ⌘K → type to filter → enter → toast → back to the button.
</structure>
<build>
1. One HTML file, square 1440x1440. Every style is computed from time inside seek(t): no CSS transitions, no timers, no state carried between frames.
2. Springs are closed-form step responses. A value that changes target many times is the sum of one spring per change, so it stays a pure function of time.
3. The tab indicator's two edges ride different springs, so the leading edge stretches ahead of the trailing one. Same trick for the toggle knob.
4. Drags are direct manipulation: while the cursor is held, the value is computed from its position. On release it springs back from wherever it was.
5. Analyze the song with numpy for the beat grid and start on a downbeat. Place every UI sound by its measured peak.
6. Render with Playwright: 4 subframes per frame, blended with ffmpeg tmix for motion blur at 60fps.
7. Render one frame per beat before the full render. Fix anything off the grid, cramped or hard to read.
</build>
<gotchas>
Never put will-change on anything the camera scales or the text renders blurry. Text that swaps inside a morphing container needs its own enter and exit timing or it overlaps. Make the last frame identical to the first, cursor position and speed included, or the loop stutters.
</gotchas>
<start>
Ask me for the inputs, then show me the state list on the beat grid before you write any code.
</start>Каждый блок промпта закрывает одну причину, по которой UI-анимация от нейросети обычно выглядит дёшево:
| Блок | Что требует | Что будет без него |
|---|---|---|
<direction> | одна фигура без склеек, пружины, один шрифт; запрет на «прыгучие» кривые, частицы, свечения и градиенты | ролик собирается из стоковых приёмов и выглядит шаблоном |
<structure> | 7 тактов по 120 BPM, событие на каждую долю | движение живёт отдельно от музыки, и в ролике появляются пустые секунды |
<build> | каждый стиль считается из времени внутри seek(t), без CSS-переходов, таймеров и состояния между кадрами | браузер снимает кадры медленнее реального времени, и CSS-переход на записи дёргается |
<gotchas> | никакого will-change на том, что масштабирует камера; у текста внутри морфа свой тайминг; последний кадр равен первому | мыльный текст на зуме, надписи наезжают друг на друга, петля дёргается на стыке |
<start> | сначала список состояний на сетке долей, код потом | ошибку в сценарии исправляют пересборкой ролика, а не одной фразой |
Требование seek(t) окупается и на рендере: кадр не зависит от предыдущего, поэтому наш ролик снимался в шести вкладках браузера параллельно.
Что установить перед запуском
Промпту нужен агент с доступом к файлам и терминалу, например Claude Code. В чате claude.ai он не сработает: рендер идёт через браузер и ffmpeg на вашей машине. Кроме самого Claude Code понадобятся Node.js, Python с numpy и scipy, ffmpeg и Playwright с Chromium. На macOS всё ставится так:
brew install node python ffmpeg numpy scipy
mkdir ui-loop && cd ui-loop
npm init -y && npm install playwright
npx playwright install chromiumНа Linux вместо brew берите пакетный менеджер дистрибутива. Недостающее агент поставит и сам, но потратит на это лишние запросы.
Как запустить: по подписке Claude или через go2llm
Запустите Claude Code из папки ui-loop и вставьте промпт одним сообщением. Ролик мы собирали на Claude Opus 5.5, на других моделях этот промпт не проверяли.
По подписке Claude
С подпиской Claude Pro или Max наберите в Claude Code /login, чтобы войти в подписку, затем /model, чтобы выбрать Opus, и вставьте промпт.
Через go2llm
Шлюз go2llm подключает Claude Code без зарубежной карты: баланс пополняется рублями через СБП, при регистрации go2llm начисляет на него $1, ключ вы создаёте в кабинете. Для подключения хватит трёх переменных окружения, а unset убирает ANTHROPIC_API_KEY, если он остался в окружении: иначе авторизация может уйти мимо шлюза. Подробный разбор есть в статье Claude Code упирается в оплату и регион.
export ANTHROPIC_BASE_URL=https://go2llm.tech
export ANTHROPIC_AUTH_TOKEN=gk_sk_ВАШ_КЛЮЧ
export ANTHROPIC_MODEL=claude-opus-5-5
unset ANTHROPIC_API_KEY
claudeЧерез go2llm модели Claude работают с текстом, а промпт просит агента смотреть на отрендеренные кадры. Поэтому допишите в конец промпта:
The API gateway I use accepts text only and rejects image input. Never open PNG, JPG or any screenshot. Check every beat frame numerically instead: use getBoundingClientRect to confirm that each text fits its container, nothing overlaps and nothing leaves the 1440x1440 canvas, print one line per beat, and give me the path of the contact sheet so I can look at it myself.Агент будет проверять раскладку числами, а лист кадров посмотрите сами: у нас именно такие листы поймали половину промахов агента.
Что ответить агенту на первый вопрос
Первым делом агент спросит про 8–12 состояний, цвет и трек около 120 BPM. Наш набор выглядел так:
- 12 состояний: кнопка «Get API key», лоадер, галочка, Dynamic Island, плеер, слайдер, тоггл, табы, график с подсказкой, ⌘K, палитра моделей и тост.
- Цвет: чёрный и белый плюс один акцент, мятный
#45FFAAиз фирменных цветов go2llm. Фон тёплый серый#ECE9E4, шрифт Geist. - Музыка: трек, который агент синтезировал сам на numpy, 120 BPM, ля минор.
Музыку лучше попросить синтезировать. Семь тактов чужой песни почти никогда не замыкаются в петлю: фраза в поп-музыке обычно длится 4 или 8 тактов и на стыке обрывается посередине. В нашем треке седьмой такт кончается аккордом E7sus4, который разрешается в Am9 первого такта, поэтому стыка не слышно. Лицензия такому треку не нужна.
Подписи в кадре меняйте под свой продукт. У нас в плеере «играет» Claude Opus 5.5, а слайдер громкости стал слайдером Temperature.
Сетка по долям: что агент покажет до кода
До первой строчки кода агент показывает таблицу: что происходит на каждой из 28 долей. Правка сценария на этом шаге стоит одной фразы, после рендера она стоит пересборки. Наша сетка:
| Такт | Доля 1 | Доля 2 | Доля 3 | Доля 4 |
|---|---|---|---|---|
| 1 | клик «Get API key», пилюля сжимается в лоадер | дуга растёт | дуга замыкается в галочку | Dynamic Island «Key ready +$1.00» |
| 2 | остров раскрывается в плеер | play превращается в pause | курсор хватает плейхед | отпускает |
| 3 | полоса прогресса становится слайдером | курсор тянет вправо | упор в 1.0, слайдер растягивается | отпускает, слайдер пружинит назад |
| 4 | слайдер становится тогглом | тоггл включается | кнопка тоггла становится индикатором табов | клик «Tokens», индикатор перетекает |
| 5 | табы раскрываются в график, линия рисуется | точка на конце линии | подсказка «Thu · 1.28M» | подсказка «Sat · 1.46M» |
| 6 | график схлопывается в ⌘K | открывается палитра моделей | набор «op» | набор «us», остаётся Claude Opus |
| 7 | Enter, палитра сжимается в тост | галочка в тосте | тост снова становится кнопкой | ховер, петля к началу |
Перед полным рендером агент снимает по кадру на каждую долю и складывает их в один лист. На листе сразу видно, где надпись не влезла или событие съехало с доли:
Попросите и второй лист, сдвинутый на 0,3 секунды после каждой доли. На самих долях всё стоит на месте, а наезды текста и дёрганые переходы видно только в полёте.
Где агент ошибается и как это ловить
В нашем прогоне агент промахнулся шесть раз, и каждый промах нашла отдельная проверка:
| Что пошло не так | Как поймали | Что исправили |
|---|---|---|
| При смене чёрного на белый фигура на несколько кадров становилась грязно-серой | лист кадров между долями | цвет переключается быстрее, чем меняется форма |
| Полоса прогресса при переходе плеера в слайдер читалась как чёрная плита | лист кадров между долями | полоса утолщается только в конце перехода |
| На паузе эквалайзер в плеере складывался в многоточие | покадровая лента перехода | на паузе столбики замирают на разной высоте |
| Щелчок звучал раньше удара: библиотечный клик набирал пик к 133-й миллисекунде, 96% его энергии звучало до пика | замер огибающей каждого звука | клики синтезированы с пиком в первые 5 мс |
| Музыка ушла в суббас: 91% энергии трека приходилось на частоты ниже 160 Гц, которые динамик телефона почти не воспроизводит | спектр по октавам | баланс перестроен, музыка сведена к −15 LUFS |
| Проверочный файл «три петли подряд» зацикливал исходный WAV, а не звук из готового MP4 | ревью кода моделью GPT-6 Sol | проверка шва собирается из того же файла, который получит зритель |
Правило из промпта ставить каждый звук по измеренному пику работает только для звуков с резкой атакой. Если берёте свою библиотеку кликов, сначала проверьте, где у каждого пик.
После исправлений кадры на 0-й и 14-й секунде совпадают до пикселя, смешанный кадр отличается от среднего своих четырёх подкадров не больше чем на 1 из 255, а пики звуков стоят на событиях с точностью 0,02 мс. Ролик сведён к −14,4 LUFS при пике −1,0 dBTP. Полный рендер, 3 360 снимков по 4 на каждый из 840 кадров, занял около полутора минут на Mac с Apple Silicon.
Когда этот промпт не подойдёт
- Чтобы показать ваше настоящее приложение. Агент рисует интерфейс заново в HTML, реальный продукт показывают записью экрана.
- С чужой песней без правок. Сетку агент найдёт, но семь тактов чужого трека редко замыкаются в петлю без шва.
- Для ролика длиннее 14 секунд без правки промпта. Блок
<structure>рассчитан на 7 тактов: для 30 секунд перепишите число тактов и список событий.
Скопируйте промпт, откройте Claude Code в папке ui-loop и вставьте его. Подключение к go2llm описано в документации, условия оплаты — на странице цен.