Сайт, який побудували троє, і жоден із них не людина

Раніше будь-який сайт працював за простою схемою. Я пишу, чого хочу. Віддаю людям, які вміють. Чекаю. Прошу посунути кнопку на двадцять пікселів. Мене питають, чи це терміново. Я кажу, що так. Ми обидва знаємо, що це неправда, але так заведено.

Цього разу я вирішив зробити сайт сам. Ну майже.

Для дебюту вибрав щось легеньке: B2B-сайт для дорогого косметологічного обладнання. Аудиторія тут не випадкові перехожі, а власники клінік і лікарі-дерматологи. Люди, які твою помилку не пробачать мовчки, а пояснять вголос і з посиланням на протокол.

Результат живий за адресою sylfirmx.com.ua. Нижче те, що я з цього виніс, і кілька речей, які можна забрати собі, навіть якщо ви ніколи не збиралися робити сайт.

Що за проєкт

Продукт: Sylfirm X, апарат RF-мікронідлінгу корейського виробництва. Преміальний сегмент, для клініки це серйозна інвестиція, а не покупка між справами.

Це не сторінка для імпульсного рішення. Це digital-актив для угоди з циклом у кілька місяців, де на шляху до підпису стоять кілька людей, і кожен ставить свої незручні питання.

Стек: Next.js 14, TypeScript, Tailwind, статичний експорт, інтеграція з CRM через PHP-проксі. Я не вмію писати на жодній із цих технологій і після цього проєкту не навчився.

Від старту до запуску пройшло півтора-два місяці. Але це не був виділений проєкт. Робота йшла уривками, переважно ввечері, між іншими задачами. Тобто це не «півтора місяця по вісім годин», а півтора місяця, з яких реальної роботи набралося б значно менше.

Команда була. Просто в ній була одна людина

Над сайтом працювали троє.

Я: постановка задач, структура, всі тексти, рішення й приймання роботи. Клод у чаті: обговорення архітектури, формулювань і спірних рішень до того, як щось пишеться. Claude Code: виконання, тобто код, збірка, правки у файлах. На фінальному рев’ю до процесу підключився ще й ChatGPT у ролі зовнішнього перевіряльника.

Троє з чотирьох не потребували ні кави, ні вихідних, ні пояснень, чому дедлайн учора.

Найдивніше було не те, що вони працюють. А те, що ловлять одне одного на помилках. Причому більшість зауважень виконавець приймав як доречні. Це не «моделі посварилися», а нормальний робочий розбір, після якого щось виправлялось. Я був тімлідом і, за сумісництвом, єдиним, хто міг помилитися по-справжньому.

Найчесніша формула моєї ролі звучить так: я не писав код, я писав технічні завдання, приймав роботу і відповідав за результат. Просто виконавцем був не підрядник, а ШІ-агент.

Урок 1. Найважливіша секція технічного завдання називається «Чого НЕ робити»

Люди думають, ніби промпт про те, що просити. Насправді половина якості в тому, що заборонити.

Виглядало це так. Я пишу: «поправ відступ у кнопці в секції контактів». Отримую відповідь: «Готово. Заодно я перейменував змінні для консистентності, оптимізував сусідній компонент, виніс стилі в окремий файл і оновив структуру папок».

Звітують про це з гордістю. Я просив одну кнопку. Переписано пів сторінки, і тепер я маю перевіряти те, чого не замовляв.

Те саме завдання, плюс один блок:

Поправ відступ у кнопці в секції контактів.

ЧОГО НЕ РОБИТИ: не чіпати інші компоненти; не перейменовувати змінні; не міняти структуру файлів; не рефакторити нічого поза цим блоком.

Відповідь: «Готово. Змінено один рядок у ContactSection.tsx».

Все.

Робоче ТЗ у мене врешті виглядало так: точні шляхи до файлів і приблизні номери рядків, команди для самоперевірки, структурований формат звіту про виконане і секція «Чого НЕ робити».

І ще одне контрінтуїтивне. Короткі прямі завдання працювали краще за детальні покрокові схеми з чекпоінтами. Складна інструкція дає складну поведінку.

Що забрати собі: це працює не тільки з ШІ. Спробуйте додати блок «чого не робити» в наступне ТЗ живому підряднику. Кількість зайвої ініціативи впаде вдвічі.

Урок 2. Зміст затверджується до коду

Тексти кнопок, структура футера, копірайт кожної секції: усе узгоджувалось до того, як писався хоч рядок коду.

Причина неромантична. Правка в тексті тягне за собою правку в коді. Якщо ви міняєте формулювання після верстки, цикл множиться. Один абзац, і поїхала вся сітка секції.

Що забрати собі: зміст це не «наповнення». Це креслення. Спочатку домовтеся, що ви говорите, і тільки потім вирішуйте, як це виглядає.

Урок 3. Один ШІ має перевіряти іншого

Модель, яка написала код, найгірше підходить на роль його рецензента. Вона перевіряє себе в тій самій логіці, в якій помилилась.

Тому в проєкті було розділення: одна модель обговорює й формулює, друга виконує, а третя на фінальному рев’ю приходить збоку й дивиться свіжим оком.

Це працює не тому, що якась модель розумніша. А тому, що в неї немає в контексті всієї історії проєкту і немає інерції «ми ж домовились так». Вона просто бачить результат і каже, що в ньому не так.

Що забрати собі: якщо ви питаєте ШІ «перевір, будь ласка, що ти щойно зробив», ви отримаєте ввічливе «все чудово». Відкрийте другий чат, бажано в іншого провайдера, дайте туди результат без передісторії й попросіть знайти слабкі місця. Це найдешевший спосіб підняти якість, який узагалі існує.

Урок 4. Я прибрав з таблиці порівняння всі хрестики, і вона стала продавати краще

Це та частина, у яку вкладено найбільше годин, а видно її найменше.

На сайті є таблиця порівняння з чотирма конкурентами: Morpheus8, Secret RF, Vivace, Virtue RF. Тринадцять параметрів. Тобто десятки клітинок, кожну з яких треба чимось обґрунтувати.

Стандартний підхід виглядає так: у нас галочки, у них хрестики. Я зробив інакше, три позначки замість двох.

Позначка	Значення
● ✓	Застосування підтверджене протоколом виробника
○ ✓*	Технічно можливо, але off-label, відповідальність на лікарі
прочерк	Функції немає

Ніде не написано «конкурент не вміє». Написано, де є протокол виробника, а де лікар бере відповідальність на себе.

Різниця здається косметичною. Вона не косметична.

Щоб заповнити таблицю в такій логіці, не можна взяти маркетингові сайти конкурентів і переписати з них. Треба піти в офіційну документацію виробників, у зареєстровані показання, у клінічні протоколи, і на кожну клітинку відповісти на питання «а звідки я це знаю». Там, де протокол є, ставиться перша позначка. Де апарат фізично може, але виробник цього не заявляє, друга. Де не може, прочерк.

Це довго. Це найнудніша частина проєкту. І це єдина частина, яку я не став би скорочувати.

Чому воно працює: сайт читають лікарі. Що вища кваліфікація людини, то гірше на неї діє категоричність. Агресивне порівняння викликає не довіру, а бажання перевірити. А таблицю, у якій немає жодного оцінного судження, не соромно показати юристу клієнта.

Що забрати собі: чесне порівняння продає краще за виграшне. І це переноситься на будь-який бізнес, не тільки на медтех.

Романтики не було

Щоб не створювати враження, ніби це був рівний політ.

По три рази я пояснював те, що вважав очевидним, і щоразу виявлялося, що очевидним воно було тільки мені. Одного вечора довго шукав, чому замість м’якого світіння по краю картинки вилазить сірий прямокутник. Винним був один зайвий рядок. Тепер я знаю про прозорі краї більше, ніж знадобиться мені до кінця життя.

Приблизно в такі моменти нормальна людина замовляє сайт нормальним людям.

Але сайт відкрився. Живий, за своєю адресою, з телефона. Ніякого технічного досягнення тут немає, код писав не я. Просто вперше між ідеєю і результатом не стояла черга.

Аудит робив ChatGPT. Вийшло 7,2 з 10

Після запуску я попросив ChatGPT рознести готовий сайт у п’яти ролях: маркетолог, UI/UX, SEO, продажник і лікар. Він зробив це з ентузіазмом, якого я від нього не очікував.

Роль рецензента	Оцінка
Маркетолог	8/10
UI/UX	7/10
SEO	6/10
Продажі	7/10
Погляд лікаря	7/10
Загалом	7,2/10

Вердикт: переробляти з нуля не треба, каркас і позиціонування сильні. Основні зауваження стосувались не дизайну, а надлишку інформації й надто категоричних формулювань в окремих місцях.

Частину правок я прийняв. Частину свідомо відхилив, бо не кожна рекомендація підходить конкретному бізнесу, і це нормально.

Одразу зніму очевидне питання: це не заміна аудиту від живого фахівця. Модель не знає вашого ринку, не бачила ваших клієнтів і не несе відповідальності за пораду. Але як перший прохід це працює несподівано добре, і рівно з тієї причини, про яку йшлося вище. Сайт будувався в одному сімействі моделей, а перевіряло його інше. У перевіряльника не було в контексті ні наших домовленостей, ні історії компромісів, тільки готовий результат. Тому він спокійно тицяв туди, куди я вже дивитися не міг.

Цифру публікую як є. Кейс без слабких місць перестає бути кейсом і стає рекламою.

Скільки це коштувало

Щоб назвати цифру чесно, спершу треба визначити, до якої категорії належить цей сайт.

За опублікованими прайсами українських студій лендінг це одна сторінка з формою заявки й мінімумом контенту, і коштує він від 15 до 25 тисяч гривень. Фрілансер візьме менше, від 3 до 10 тисяч, агенція під ключ від 7 до 20. Хостер HOSTiQ називає орієнтир від $500 за лендінг у веб-студії.

Мій сайт це теж лендінг. Одна сторінка, хай і на одинадцять секцій. Багатосторінковим корпоративним сайтом він не є, і вдавати інше було б натяжкою.

Але прайси влаштовані так, що вони рахують сторінки й блоки, а найдорожче в цьому проєкті було не там. Інтеграція з CRM у стандартний лендінг не входить. Унікальні тексти в технічній ніші не входять теж: у прайсах копірайтинг або окрема позиція, або взагалі за замовчуванням шаблонний. А таблиця порівняння з чотирма конкурентами по тринадцяти параметрах, зібрана з документації виробників, не входить нікуди, бо такої позиції в прайсах просто немає.

Тому чесний орієнтир звучить так: верхня межа лендінгової вилки, тобто ближче до 25 тисяч гривень за розробку, плюс окрема сума за тексти, яку я назвати не можу, бо ставок на технічний копірайтинг для медичної ніші в опублікованих прайсах не знайшов.

Мої витрати: підписка на інструмент, хостинг і домен.

Зауважу одразу, бо інакше цей кейс прочитається неправильно. Це не історія про те, що студії більше не потрібні. Дані показують радше протилежне: попит на веброзробку не падає, а на фриланс-майданчиках замовлень на веб-дизайн після появи ChatGPT стало навіть трохи більше. Змінилося інше, і зміна стосується не всієї розробки, а конкретного її шматка. Поріг входу для простого сайту обвалився, і першими це відчувають ті, хто продає базові візитки без унікального змісту. Мій проєкт саме звідти: обсяг великий, але жодної нетривіальної інженерії в ньому немає. Складність була в змісті, а не в коді.

Тут чесно варто назвати й третій варіант, бо я сам ним колись користувався. Це зібрати на WordPress. Компроміс: дешевше за повну розробку, швидше на старті, є кому підхопити. Але за це платиш чужим кодом, який не контролюєш, стосом плагінів, кожен з яких колись зламається або оновиться не вчасно, і головне, платиш швидкістю завантаження.

Для B2B це не косметика. Власник клініки відкриває ваш сайт із телефона між пацієнтами. Якщо сторінка думає три секунди, він її вже закрив, і жодна ваша аргументація не спрацювала, бо він її просто не побачив.

Але грошова різниця тут узагалі не найцікавіше. У 2020 році такий самий сайт у студії коштував би приблизно стільки ж. Різниця не в ціні. Різниця в тому, що тоді варіанта «зробити самому нормально» не існувало за жодні гроші. Або платиш підряднику, або збираєш конструктор і миришся з його обмеженнями. Третьої опції не було.

Зараз вона є. І головний виграш тут не економія, а контроль: правка вноситься тоді, коли вона потрібна, а не тоді, коли в підрядника звільнився розробник.

І ще одне, що варто тримати в голові, читаючи цей кейс. Сайт зроблений моделями, які на момент публікації вже застаріли. Поки я писав цей текст, вийшло наступне покоління, і виробники прямо заявляють про автономне створення сайтів. Тому всі висновки про кількість зусиль тут прив’язані до дати, а не до технології взагалі. Через рік той самий обсяг роботи, найімовірніше, коштуватиме менше часу, ніж коштував мені.

Сайт має другого читача, і це ваш відділ продажів

Що забрати собі: спитайте своїх менеджерів, чи відкривають вони сайт на дзвінках. Якщо ні, ви оплатили половину активу.

Що я з цього зрозумів

Не «ШІ зробив сайт замість людини». Це неправда, і будь-хто, хто пробував, це знає.

ШІ забрав виконання. Він не забрав постановку задачі, знання предметної області, смак і відповідальність за те, що вийшло. Тобто все, за що насправді платять.

Розробником я так і не став. Але мене більше ніхто не питає, чи це терміново.