Как три слова в чате превратили обычный лендинг в «сайт из будущего» — за один вечер, без дизайнеров, фронтенд-разработчиков и моушен-артистов.
Кофейня, которой ещё нет
Идея — от сотрудника банка, где мы проводили обучение: кофейня с роботом-бариста в центре Алматы. ЦА — молодёжь, 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 #лендинги
Мы проводим AI-интенсив за 1 день — 8 часов практики, после которых у вас уже работает Claude Code, подключены Telegram, Gmail, Notion, настроены агенты и автоматизации.
88 000 ₸ · Кол-во мест ограничено · Узнать подробности и записаться →
Хотите глубже? Полное погружение за 23 дня: Программа курса →