Завдання
У нас уже був бот-консультант, який рік відповідає покупцям у справжньому магазині техніки, і другий бот, який веде запис до майстрів манікюру і стрижок. Не було сторінки, куди відправляти людину з холодного листа. Власник магазину або майстер не хоче читати про «AI». Йому треба за хвилину зрозуміти три речі: що бот робить, скільки коштує і де його помацати.
Окрема умова: два дуже різні продукти, бот за $1 200 для магазину і бот за $10 на місяць для майстра, не повинні змішуватися на одній сторінці. Звідси жорсткий перемикач зверху, «Для магазинів / Для майстрів», і дві мови, українська за замовчуванням і англійська.
Навіщо і яка ідея
На кожній сторінці є жива кнопка в справжнього бота, приклад діалогу і тарифи без зірочок. Для магазину це діалог про пральну машину Bosch до 18 000 грн із запереченням «на Rozetka дешевше». Для майстра це кнопковий запис: послуга, день, час, підтвердження, рівно так, як працює реальний бот.
Стиль шукали довго. Dark Tech, Minimalism, Bento, Neobrutalism, Editorial, Neon Glass: усі макети відхилені, бо виглядали як типовий AI-шаблон. Напрямок знайшовся тільки через реальні референси: редакційні засічки Kove, кольорові картки Cargoscope, тепле свічення на темному тлі в лендингу Obsidian на Saaspo. Так зʼявився Premium Dark Editorial: тло майже чорне, помаранчева куля-свічення, яка дихає через CSS-анімацію і зсувається за мишею, заголовки Fraunces, текст Inter, приглушені картки. Пізніший 3D-редизайн із підводним світом теж відхилили.
Друга ідея прийшла пізніше і виявилася головною: сайт має обіцяти рівно те, що продукт робить. Корпоративний читач ловить нестиковки одразу, і будь-яка цифра, яку не можна показати в логах, на зустрічі працює проти нас.
Хід роботи
| Коли | Що відбувалося |
|---|---|
| Етап 1 | Тарифи: перемикач «Купівля / Підписка», порівняння трьох моделей, близько 70 нових ключів у словнику перекладів, іконка сайту |
| Етап 2, через тиждень | Консиліум по тарифах: клієнт не бачив різниці між підпискою $89 і покупкою за $1 200. Додано тариф «Пріоритет» із відмінностями |
| Етап 3, через десять днів | Редизайн. Кілька раундів макетів відхилено, стиль знайдено через референси. Повністю замінили блок стилів, а 770 рядків контенту і словники лишили як є |
| Етап 3, той самий день | Нова сторінка /masters. Три раунди консиліуму на тестовому посиланні, потім викатка на бойовий домен |
| Етап 4, наступного дня | Чисті адреси без .html і лагодження «обрізаного» сайту на широких моніторах |
| Етап 5, через півтора місяця | Прибрано обіцянки, яких продукт не виконує: безліміт, «3 магазини в одному боті», CRM, Enterprise з передачею коду |
| Етап 6, ще через місяць | Клієнт знайшов мертве демо, полагоджено того ж дня. Потім велика чистка за консиліумом: тарифи в один шлях, блок «Безпека» на правду, зламана англійська полагоджена |
Як приймали рішення. На спірних місцях збирали консиліум: пʼять AI-радників (скептик, архітектор, візіонер, людина збоку, прагматик) розбирають роботу незалежно, потім рецензують одне одного. На редизайні було три раунди. Перший знайшов 7 проблем: перемикач продуктів дрібний, на /masters одна картка тарифу висіла в порожнечі, куля на першому екрані мертва, анімації появи не працювали, картки тарифів різної висоти. У другому раунді 4 з 5 сказали «задоволений» одразу, пʼятий не зміг перевірити рух кулі за мишею. Перевірили вручну через dispatchEvent('mousemove'): працює, це було обмеження інструмента. Третій раунд ішов уже за прямими зауваженнями.
Чим робили
Без фреймворка. Кожна сторінка це один самодостатній HTML-файл із розміткою, стилями, скриптами і словниками перекладів усередині, плюс спільний styles.css. Головна близько 100 КБ, сторінка майстрів близько 41 КБ. Кожен напис живе у двох місцях: у HTML і в словнику window.__i18n з ключами uk і en, елементи помічені data-i18n, при завантаженні словник перезаписує HTML.
Хостинг Vercel, свій домен, викатка командою vercel --prod з теки. vercel.json вмикає чисті адреси, .vercelignore не пускає у викатку бекапи і чернетки. Ключів і грошей на сайті немає: це вітрина, жодних викликів API зі сторінки, усі кнопки ведуть у Telegram або в контакти.
Перевірки до викатки: скрипти сторінки витягуються і проганяються через node --check, теги звіряються на парність. Після викатки: curl бойового домену і підрахунок за списком фраз, нове зʼявилося, старе зникло, бекапи віддають 404. Окремо перевіряли, що обидва боти живі: служба працює, getMe відповідає, черга порожня.
Результат
Головна, для магазинів. Перший екран: «AI-консультант, який продає замість вас, 24/7», кнопка в живого бота і чотири цифри: відповідь 10-20 секунд, 24/7, 0 живих операторів, 1 рік у бойовому магазині. Далі: чому магазини втрачають клієнтів, що вміє бот, приклад діалогу, як іде підключення, безпека, тарифи, з чого складається ціна, бот проти живого оператора, FAQ, контакти.
Тарифи магазину після чистки: один шлях без вибору. Пілот $200 на 14 днів на каталозі магазину, до 300 діалогів. Якщо все влаштовує, доплата $1 000 до повного підключення, далі $250 на місяць. Пілот не влаштував, не доплачуєш нічого. Нижче прозора розбивка, куди йдуть гроші: Claude API, сервер, налаштування, підтримка.
Сторінка для майстрів. Біль майстра (дзвінки о 23:00, пропущені записи), що робить бот, підключення за 5 хвилин, як це виглядає в Telegram, тариф $10 на місяць і перший місяць безкоштовно. Поруч картка «Салон із кількома майстрами?» з чесним «формат у розробці».
Що це дало. Перший корпоративний запит прийшов саме через сайт: людина отримала лист, зайшла на сторінку, взяла контакт звідти і поставила питання по суті: за який період, за якими критеріями, чи є API для історії діалогів. Пізніше відповіла, що детально вивчає матеріали.
Чого ми не знаємо і що ще не зроблено. Конверсію сайту не міряли, аналітики на сторінках немає, заявок із сайту не рахували. Платних клієнтів зі сторінки майстрів поки нуль: у базі бота 5 майстрів, оплат 0. Перший екран головної досі обіцяє «віджет на вашому сайті», хоча віджет із обіцянок прибирали, рішення за власником. На телефоні підзаголовок першого екрана лягає на яскраве свічення, контраст слабкий.
Помилки і що винесли
