«Сделай роботонутее». И одна модель справилась с работой 17 специалистов

Как три слова в чате превратили обычный лендинг в «сайт из будущего» — за один вечер, без дизайнеров, фронтенд-разработчиков и моушен-артистов.

Кофейня, которой ещё нет

Идея — от сотрудника банка, где мы проводили обучение: кофейня с роботом-бариста в центре Алматы. ЦА — молодёжь, Gen-Z. Без очередей. Один напиток — 45 секунд. Один вкус — всегда одинаковый. Название — ROBOCUP.

Кофейни пока нет: ни помещения, ни адреса, ни первого робота. Но уже нужен лендинг. Для подогрева в соцсетях, для демо партнёрам и инвесторам, для точки входа из таргета и блогерских постов.

Утром мы собрали MVP: тёмная тема, 7 секций, вейтлист-форма, hero с роботизированной рукой, 6 фото интерьера. Пара часов работы. Хостинг — Vercel, без собственного домена, robocup-almaty.vercel.app.

Сайт работает. Но я смотрю на него — и понимаю: обыденно. Кофейня-то про будущее, а сайт как любая другая кофейня. Неоновая вывеска «Coffee», кирпичная стена, деревянные столы. Всё на месте — и всё мимо.

Три слова — и Claude уходит работать

Я открываю Claude Code и пишу одну фразу:

сделай его более роботонутым, выглядел не обыденно, а футуристически, как сайт из будущего; если надо — поищи идеи в интернете, попробуй добиться ощущения, что этот сайт явно про будущее

И Claude уходит работать.

За следующий час — то, чего я не ждал

Сначала он идёт в интернет. Через поисковик Exa находит референсы с Awwwards 2026: terminal boot sequence у Orage (где сайт «компилируется» перед показом), CLI-inspired интерфейс Maxim Kich, cyberpunk glitch card от ahmodmusa, каталог Effect.Labs с 664 CSS-эффектами, темплейт Nexus Brew Cafe.

Отбирает топ-10 эффектов — из двадцати возможных. Пишет план на 250 строк в Markdown и просит меня одобрить. Плюс делает сам себе заметку: надо остаться в палитре бренда (лайм + фиолет + cyan), не уходить в ретро-розовый Cyberpunk 2077, иначе потеряем узнаваемость ROBOCUP.

Одобряю.

Дальше он переписывает лендинг с 540 строк до 1132. Без сторонних библиотек. Весь код — в одном HTML-файле. Деплоит на Vercel. Я в это время пью чай.

10 слоёв, которые обычный лендинг превратили в систему

Контент-слой не тронут — те же 7 секций, те же тексты, те же напитки. Но сверху накладывается второй слой — HUD, как будто ты смотришь не в сайт, а в экран системы:

• Boot-preloader — > BOOTING ROBOCUP.OS… CALIBRATING ROBOTIC ARM… READY_ — 2 секунды при первом заходе
• HUD в 4 углах экрана — координаты Алматы 43.25°N 76.95°E, живые часы, температура эспрессо 92.4°C с микро-дрейфом ±0.2°
• CRT-оверлей — сканлайны, плёночный grain, виньетка. Еле заметные, но задают вайб
• Ticker под навигацией — бегущая строка «ROBOCUP.STATUS :: ONLINE · CUPS TODAY 147 · TEMP 92.4°C»
• Text scramble на главном заголовке — при загрузке «Кофе готовит робот» декодируется из мусора по буквам
• Typewriter eyebrow — «> SYS.INIT :: ROBOCUP v1.0.0 // ALMATY // STATUS: PRE_LAUNCH_» печатается посимвольно
• Glitch RGB-split на бренде — cyan + magenta сдвиги при наведении мыши
• 3D-tilt и sci-fi-углы на карточках — наводишь курсор, карточка реально поворачивается, углы срезаны по диагонали
• Animated progress bars у напитков — BUILD TIME ▓▓▓▓ 45s прогоняется при hover
• System log в футере — «> 14:23:02 :: espresso.brew(cupId:147) [OK]» с новыми строками каждые 5 секунд

Плюс мелочи: радиальные лучи вместо обычной сетки в hero, HUD-рамка поверх фото робо-руки с таймкодом REC 00:00:42, magnetic-кнопки, ripple-эффект на клик, count-up на цифрах «45 / 100% / 24/7». JetBrains Mono заходит везде, где можно — на все лейблы, тайминги, цены.

17 ролей. Один процесс. Один час.

Когда я потом спросил Claude — сколько специалистов работало бы над таким лендингом, если делать его студией — он честно расписал по категориям:

• Дизайн (4 роли): Market Researcher, Art Director, UX Architect, UI Designer
• Разработка (4 роли): Frontend Developer, Animation Engineer, Accessibility Engineer, Performance Engineer
• Контент (3 роли): Copywriter, Image Curator, Image Reviewer
• QA и выпуск (3 роли): QA Engineer, DevOps Engineer, Screenshot Analyst
• Документация и управление (3 роли): Technical Writer, Project Manager, Task Tracker

Итого 17 специализаций. По рынку Алматы это примерно 3,35 млн ₸/мес фонда оплаты труда и 2–3 недели на такой MVP.

В нашем случае — одна модель Claude Opus 4.7. Один процесс. Один час. Три деплоя. 71 KB итогового HTML. Ноль внешних библиотек.

Это не про кофейню

Это про то, что любой MVP-лендинг теперь можно делать в один подход. Раньше нужна была команда — дизайнер, фронтендер, моушен, QA, девопс, копирайтер, пиэм. Теперь нужен владелец идеи, который умеет поставить задачу и отличить хороший результат от плохого.

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

И это — то, что мы называем вайб-кодингом. Не про код. Про способность разговаривать со своей невидимой командой.

Посмотреть можно прямо сейчас

Лендинг живой: robocup-almaty.vercel.app

Первый заход — будет boot-sequence. В углах увидишь живой HUD с температурой эспрессо, которая слегка подрагивает в районе 92,4°C. Под навигацией — бегущий ticker со «статусом системы». Наведи курсор на любую карточку меню или фишки — она повернётся в 3D. Пролистай до футера — в нижнем блоке увидишь system log с событиями, которые появляются каждые пять секунд.

Всё это — один HTML-файл, который загружается за полсекунды. И в нём 1132 строки, которые я не написал сам ни одной.

22 апреля 2026 · #вайбкодинг #кейс #AIдизайн #Claude #ROBOCUP #лендинги