Пять концептов одной идеи за один вечер. Вайб-кодинг как инструмент проверки гипотез

Одна идея клиента. Пять концептов за вечер. Ноль Figma, ноль дизайнеров, ноль ТЗ. Один финальный сайт, задеплоенный в 17 секунд — одной моделью Claude Opus 4.7.

Шестилапые плюшки и банк — странный бриф

Идея пришла от клиента одной строчкой: «сайт по продаже плюшевых роботизированных котиков с шестью лапками из переработанных материалов — чтобы было экологично; подтяни логотип Altyn Bank и найди все необходимые картинки, или создай, если нет».

Распаковать это в понятный продукт — уже задача. Тут всё в куче: эко-миссия (переработанные материалы), тактильность (плюш), роботизация (шесть лап вместо четырёх), банковский партнёр (Altyn Bank), ещё и торговля или благотворительность — непонятно.

В классической студии такой бриф ушёл бы на три дня в ресерч: арт-директор читает тренды, копирайтер пишет tone-of-voice, UX делает мудборд, проджект согласовывает. Я открываю Claude Code и иду делать — первый вариант просто чтобы что-то было.

Попытка №1 — сайт как у кафе. Разнос

Первая версия собралась быстро. Я переиспользовал визуальную систему предыдущего проекта — кофейни с роботом-бариста robocup-almaty.vercel.app, которую мы делали пару дней назад. Там был cyber-cottagecore: светлая палитра, cyan #00D4FF, boot-sequence preloader, HUD в углах. Шесть SVG-котиков с антеннками-сенсорами, каталог карточек «PURR-001 / EARLY BATCH / READY», «эко-студия» тон.

Клиент посмотрел и сказал одной фразой:

Ты зачем-то взял и чуть-чуть доработал robocup-almaty и сделал про котиков из будущего похожим. А я хотел, чтобы это был иной сайт, не похожий на то что ты делал до этого, а что-то новое.

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

Попытка №2 — приют странных плюшек из 70-х

Начал с нуля. Запустил скилл superpowers:brainstorming — он заставляет задать клиенту три вопроса через визуальный чекбокс до того, как написать хоть строчку. Три направления (Приют / Дневник одного котика / Kawaii Big-Eye), три ASCII-мокапа, три описания с трейдоффами.

Клиент выбрал «Приют странных плюшек». Полностью переписал лендинг — 858 строк, новая палитра (терракота, пыльно-зелёный, крем, бордо), новые шрифты (Unbounded + Caveat + Manrope), без единого моно-шрифта. Hero — огромное фото ретро-гостиной с шестью котиками как polaroid с жёлтой washi-tape. Шесть карточек с рукописными биографиями: «сшит из 37 бутылок Каспия», «найден на свалке у Капшагая». Манифест на терракотовом блоке: «Мы не бренд. Мы не фабрика. Мы приют».

Клиент сказал — концептуально ближе, но недостаточно иное, плюс совершенно нет связки с банком. Концепт живой — исполнение не дотягивает. Пошёл в ресерч.

Попытка №3 — годовой отчёт. Слишком холодно

Через WebFetch посмотрел altynbank.kz — собрал продукты банка: Резерв+ 20%, Ипотека 7-20-25, Кэшбэк 5%, детский вклад Балапан, Private Vault. Через Python + PyMuPDF отрендерил 11 ключевых страниц презентации «AI for Banking — Altyn Bank» в PNG (pdftoppm на машине не стоял — обошёлся своим скриптом). Через WebSearch пробежался по Awwwards 2026, Brutalist Magazine, Bread Zine от Cash App — искал формат «document-as-landing».

Родилась концепция: сайт = корпоративный годовой отчёт благотворительного фонда «ALTYN × PURRSIX: Депозит Дружбы». Семь параграфов по номерам §, обложка с № PRS/2026/A23 и крутящейся восковой печатью, банковская выписка в формате TIME / TX ID / OPERATION / AMOUNT / BALANCE. Каждый из шести котиков получил банковский продукт-метафору. Форма с canvas-подписью и генерируемым certificate №. Палитра ушла в deep charcoal, altyn-red, gold. Bodoni Moda + Space Mono. 1628 строк.

Получился действительно документ. Только без плюша. И без явных шестилапок — они потерялись в маленьких паспортах. Логотип я вставил как SVG вместо реальных PNG клиента. Клиент сказал:

Концепт сам интересный — депозит дружбы, но какой-то он совсем не плюшевый, и идея шестилапого кота совсем затёрлась, и нет ни плюшевости, ни шестилаповости.

Попытка №4 — Плюшевый Банк Дружбы

Клиент прислал 7 новых AI-рендеров: чёрный директор-котик в пиджаке, жёлтый с пропеллером, чёрный мистик с рунами, голубой плакса с USB-хвостом, оранжевый cyberpunk с баллончиком-хвостом, малыш в комбезе и банда в cyberpunk-лаборатории для hero. На каждой картинке — реальные шесть металлических лап. Плюшевый мех. Выраженные характеры.

Я взял концепт v3 (банковский) и целиком переодел его в v2-плюшевость. Скопировал три реальных PNG/JPG/WebP-лого Altyn Bank в папку assets/. Палитра вернулась в тёплые тона: paper, wool, moss, ochre, gold, altyn-red. Altyn-красный и золото остались, но только как акценты — на бейджах ×6, на CTA, на восковой печати. Основа — бумага, а не антрацит. Добавил custom cursor-лапку. SVG-pattern из мини-лапок на фоне как водяной знак.

Шесть подопечных → шесть продуктов Altyn Bank:

• Пельмень (чёрный директор в пиджаке) → Депозит «Резерв+» 20%
• Кекс (жёлтый пропеллер) → Express Transfer · моментальный перевод
• Барсик (мистик с рунами) → Private Vault · хранение ценного
• Гуля (голубой плакса с USB) → Кредит на чёрный день
• Шалапай (оранжевый cyberpunk) → Молодёжная карта · Кэшбэк 5%
• Мини (малыш) → Детский депозит «Балапан»

Клиент одобрил и попросил точечно докрутить. Я добавил soft-shadow на h1 (плюшевая глубина), увеличил шесть лапок в hero с 28 до 38 пикселей и сделал их клик-подпрыгивающими, поставил stitch-разделители с шестью маленькими лапками между секциями. И главный гвоздь — Плюшевая Карта Altyn как сувенир: физическая банковская карта в altyn-wine градиенте с реальным логотипом, золотым чипом, номером, стежковыми шестью лапками на обороте и live-подстановкой имени владельца из формы. Пока набираешь «Сергей» в поле — имя появляется на карте золотом. Итого 2111 строк HTML+CSS+JS в одном файле. Деплой через npx vercel — 17 секунд, без установки CLI.

Что под капотом: агенты, скиллы, tools

• 0 специализированных sub-agent вызовов. Вся работа — одной моделью Claude Opus 4.7 в одном окне чата.
• 2 активных скилла из 250+ доступных: superpowers:brainstorming для фазы концепции и superpowers:using-superpowers для старта сессии. Плюс фоновые рекомендации от Vercel-плагина (обе отмечены неприменимыми для статического HTML-лендинга).
• ~155 tool-calls за сессию: Read (~40), Write (~10), Edit (~25), Bash (~30), Grep (~12), WebFetch (3), WebSearch (2), AskUserQuestion (3), TaskCreate+TaskUpdate (~40), ToolSearch (~4), Skill (2).
• Ресерч: altynbank.kz + PDF-презентация 33 страницы + Awwwards + Brutalist Magazine + Bread Zine Cash App. PyMuPDF конвертнул презентацию клиента в PNG, чтобы визуально разобрать структуру без установки ImageMagick/pdftoppm.
• npx vercel@latest deploy --prod --yes — деплой без установки CLI. 17 секунд build в регионе Washington, 72 KB результат, HTTP 200. Security-headers из vercel.json применены на проде. Ноль аналитики — правило для демо-лендингов.
• MCP Notion — эту статью вы сейчас читаете, она опубликована через него тем же Claude, что писал лендинг.

Что даёт вайб-кодинг в этом режиме

Пять полных концептуальных переосмыслений одной идеи за один вечер. В классической студии на MVP обычно берут дизайнера, фронтендера, копирайтера, моушена, PM — и две-три недели. Здесь цикл «клиент сказал → я переписал с нуля → клиент посмотрел → сказал снова» повторился пять раз. Каждая итерация была полной заменой дизайн-системы: шрифты, палитра, структура, тон, hero, карточки, формы. От 858 до 2111 строк за один подход.

Цена ошибки в концепте ≈ 0. В классике — три дня ресерча, недели вёрстки, месяц согласований, потом «давайте переделаем». Здесь каждая «неудачная» итерация — это валидированная гипотеза, которая помогает следующей. v1 провалилась — я понял, что нельзя наследовать стилистику другого проекта. v2 не зашла полностью — я понял, что клиент хочет связку с банком. v3 не плюшевая — значит сериф и антрацит убивают мягкость. v4 синтез — в нём сошлось всё.

Фидбек клиента был в чате одной-двумя фразами. Никаких брифов, мудбордов, ТЗ. Ты описываешь ощущение — AI переводит его в 2000 строк кода, подбирает палитру, шрифты, структуру, пишет копирайт, ходит в интернет за ресерчем, деплоит. Ты смотришь и говоришь дальше. Это не про замену специалистов — это про скорость гипотезы. Тест одной идеи стал занимать 25 минут вместо трёх недель.

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

Живое: purrsix-six-paw-kitten.vercel.app

Пройдитесь мышью — курсор станет плюшевой лапкой. Кликните любую из шести лапок в hero — она подпрыгнет. На карточке подопечного наведите курсор — карточка приподнимется, бейдж ×6 повернётся. Долистайте до формы «Заявление на усыновление» — начните вводить имя и смотрите, как оно в реальном времени появляется на Плюшевой Карте Altyn золотом, с шестью стежковыми лапками на обороте. Распишитесь мышью на canvas-подписи — чернила красные, как у Altyn.

Всё это — одна HTML-страница, 72 KB, без фреймворков и внешних библиотек. Ноль аналитики, ноль счётчиков — это демо-лендинг, а не воронка. И 2111 строк кода, которые я не написал сам ни одной.

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