Шаманство в 15 минут: два лэндинга с нуля на демо в банке

Это полевая запись из тренинга в крупном казахстанском банке. Мы проводим корпоративное AI-обучение, и в конце каждого блока — живая демонстрация. Два потока, два разных участника, две короткие фразы вслух — и на выходе два работающих лэндинга на проде за ~15 минут каждый. Этот пост — как и зачем.

🎪 Контекст: день 1 в Altyn Banka

Сегодня стартовало крупнейшее наше корпоративное обучение в 2026 году: Altyn Banka, 400 сотрудников, 5 групп, 4 дня подряд. Мы проводим ~2 часа на группу в смешанном формате: базовая часть (как думают нейросети, как писать промты, как устроен Claude Code) + Q&A-демо под реальные сценарии банка.

Сегодня прошли две первые группы. И в обеих — после теории участники спросили «а как бы вы сами собрали у себя X?» и мы ответили: «давайте и соберём прямо сейчас». Что получилось — ниже.

🧩 Эпизод: два лэндинга за 15 минут каждый

Каждый прототип родился из одной короткой фразы участника, прозвучавшей вслух в зале. Никакого брифа, макета, ТЗ — только слова и Claude Code.

1-й поток — консалтинг в стиле Big4. Участник попросил «сайт консалтинговой компании, основные услуги — бухгалтерское сопровождение, аудит, аналитические отчёты, оценка эффективности. Сделай в стиле Big4». → открыть consulting-meridian

2-й поток — ещё интереснее. «Сайт, адаптированный под мобильное устройство, который анализирует курс валют банков Казахстана и выводит актуальные данные. Сортировка по валюте и лучшему курсу». Это уже не статичный лэндинг — это гибрид сайта и парсера с живыми данными. → открыть bank-rates-kz

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

🛠 Что под капотом Claude Code (кто трудился)

На демо я сказал: «под капотом одновременно работала команда из нескольких специалистов». Это ощущение — правда. Расшифровываю честно: внутри Claude Code во время вайб-кодинга параллельно запускаются субагенты с разными зонами ответственности. На обеих демо-сессиях задействовались:

• Plan-агент — разворачивает однострочник участника в архитектурный план: структура секций, визуальная система (для Big4 — тёмно-навигационная палитра + Cormorant Garamond + Inter + муат-золото #C9A961; для валют — mobile-first тёмная тема), файловая структура, критерии приёмки. Артефакт плана остаётся на диске — его можно перечитать позже.
• Explore-агент — сканирует репозиторий и находит переиспользуемые паттерны. Перед тем как писать с нуля, он проверил наши же проекты (например, ikigai-vibe-coding-intensive-1) и вытащил оттуда готовые CSS-переменные, sticky-header, IntersectionObserver для fade-up-анимаций. Это экономит 60–70% времени.
• Основной кодер (general-purpose) — генерирует index.html, css/styles.css, js/main.js, контент-файлы data/*.js (services / cases / team / faq), vercel.json с security-заголовками, README на русском. Разметка и стиль пишутся сразу чистыми, без лишних зависимостей — vanilla HTML/CSS/JS, чтобы показать, что можно без React.
• Backend-шаг (только для bank-rates-kz) — написал Vercel Function api/rates.js: параллельный Promise.allSettled на два внешних источника, in-memory кэш 10 минут внутри функции + CDN-кэш s-maxage=600, stale-while-revalidate=1800, fallback-цикл «сегодня → вчера → позавчера» для курса Нацбанка (в выходные он не публикует).
• Deploy-шаг — vercel --prod из CLI. Результат — публичный URL за секунды. Security-заголовки уже в vercel.json: X-Frame-Options, CSP: frame-ancestors 'self', HSTS preload, Permissions-Policy с запретом камеры/микрофона/геолокации.

Важная оговорка честности: это не «пять живых специалистов в удалёнке». Это пять зон ответственности внутри одного LLM-оркестратора, которые исполняются параллельно. Метафора «команды» точна по ощущению — каждый шаг занимается своим делом и не лезет в чужое — но физически всё это один Claude Code у меня в ноутбуке.

🔍 Как из «анализирует курс валют» получился парсер

Это самая интересная часть, потому что участник не сказал «напиши парсер». Он сказал «сайт, который анализирует курс валют». Дальше — цепочка рассуждений Claude Code и как из неё выросло конкретное решение.

Шаг 1 — интерпретация запроса. «Анализирует курс валют банков Казахстана» = агрегатор, у которого нет собственной базы данных. Значит, данные должны приходить извне. Значит, нужен источник.

Шаг 2 — поиск API. У Национального банка Казахстана есть официальный XML-фид: nationalbank.kz/rss/get_rates.cfm?fdate=dd.mm.yyyy. Стабильный, документированный, отдаёт справочный курс НБ РК. Хороший источник — но там только официальный курс, а не реальные buy/sell по обменникам и банкам. Именно последнее участник и просил.

Шаг 3 — почему парсер. Реальные курсы по 130+ обменникам и банкам Казахстана агрегируются на kurs.kz, и у них нет публичного JSON-API. Но это не тупик. На главной странице в HTML-коде есть inline-скрипт, где объявлена переменная var punkts = [...] — массив всех точек с полями name / city / address / bank / date / data: {USD:[buy,sell], EUR:[...]}. Этого достаточно. Классика: View Source → видишь готовый JSON → достаёшь его регуляркой.

Шаг 4 — подключение. Написали Vercel Function api/rates.js:

• fetch('https://kurs.kz/') с User-Agent, парсинг через regex /var\s+punkts\s*=\s*(\[[\s\S]*?\]);/, дальше JSON.parse.
• Параллельно fetch XML-фида Нацбанка: цикл «сегодня → вчера → позавчера», пока не придёт XML с элементами <item> (в выходные/праздники НБ РК не публикует, фолбэк обязателен).
• Фильтр: 8 валют (USD / EUR / RUB / CNY / GBP / KGS / TRY / AED), только точки с валидной парой [buy, sell].
• Агрегаты считаются на сервере: bestBuy = Math.max(buys) (клиенту выгодно продать валюту максимально дорого), bestSell = Math.min(sells) (купить максимально дешёво), средние, количество источников.
• Кэширование в два слоя: in-memory cache внутри функции на 10 минут + CDN-кэш s-maxage=600, stale-while-revalidate=1800. Чтобы не долбить kurs.kz на каждый заход пользователя.
• Promise.allSettled([kurs, nbk]) — если упадёт один источник, второй всё равно отдаст данные. Клиенту уходит поле sources.kurs.ok = false — UI покажет понятное состояние вместо 500-ошибки.

Шаг 5 — клиент. Обычный app.js: fetch('/api/rates'), fallback на localStorage при отсутствии сети, сортировка и фильтры целиком на клиенте (без повторных запросов), автообновление раз в 10 минут при активной вкладке и при возврате фокуса в браузер.

Оговорка. kurs.kz может в любой момент поменять разметку — и наш regex на var punkts сломается. Это нормальный режим деградации: функция отдаст пустой points: [] с sources.kurs.ok = false, клиент покажет только официальный курс НБ РК. Ни одной 500-ошибки пользователь не увидит. В production-версии сюда добавляют мониторинг и алерт, но для прототипа за 15 минут нас устраивает мягкое падение.

🪄 Современное шаманство

Недавно мне сказали: «Сергей, ты шаман». И это в точку. Я как будто молюсь Богам, чтобы пошёл дождь. Только вместо молитвы — вайб (голосом или текстом), вместо Бога — Claude Code, а вместо дождя — лэндинг, приложение, CRM-автоматизация. Этой аналогией я не сравниваю Claude Code с Творцом. Я про механику ощущения: формулируешь желание словами — через минуты получаешь результат, который раньше занимал недели у команды экспертов.

И важная оговорка: я не противопоставляю вайб-кодинг живым экспертам. Я делаю выбор как руководитель. В IKIGAI мы теперь нанимаем и делаем партнёрами только тех, кто владеет вайб-кодингом. Не потому что «AI заменит людей», а потому что живой эксперт + вайб-кодинг = умножение в 10 раз. Вайб-кодинг — маст-хэв 2026 года для нашей команды.

💡 Что из этого забрать

• Это может быть не только сайт. Что угодно в диджитал: приложение, CRM, внутренний инструмент, парсер, Telegram-бот, автоматизация процессов.
• Чтобы получить результат, не обязательно разбираться в коде. Как в жизни ты обращаешься к экспертам — только теперь экспертами могут быть AI-агенты, живущие внутри Claude Code у тебя в ноутбуке.
• Чем больше контекста вы даёте агенту (аудит рынка, референсы конкурентов, чёткий стиль, целевая аудитория) — тем на порядки лучше результат. 15 минут — это нижняя планка без контекста. С контекстом и итерациями — пара часов до продукта, который не стыдно выпускать.
• Вайб-кодинг — это не замена мышлению, это усилитель. Тот, кто умеет чётко формулировать задачу и видеть пользователя — выигрывает 10× больше, чем раньше.

21 апреля 2026

#вайбкодинг #AI #бизнес #предпринимательство #операционнаясистема #IKIGAIpromotion

Сергей Конев · Со-основатель IKIGAI PROMOTION · Победители Digital Qazaqstan Awards 2026