Як я зробила свій сайт з AI — від ідеї до домену

01Задача

Що мені було потрібно — і чому не шаблон

GENTERRA пропонує три речі: маркетингову стратегію, AI-контент-завод і сайти. Сайт мав за секунди пояснити всі три і довести, що я працюю з AI щодня, а не просто про це говорю.

Тому кожна сторінка отримала власного живого персонажа, який реагує на скрол: молекула, що стає компасом на «Стратегії», гусінь, що стає метеликом на «Контент-заводі», хромована бджола на «Сайтах», око-павук на «Інсайтах». Їх об’єднує один матеріал: рідкий хром з янтарним і бірюзовим світлом на чорному.

02Мої інструменти

Шість інструментів, у кожного одна роль

03Крок 1 · Claude

Стратегія і структура — до першої картинки

Я працювала з Claude як із сеньйор-колегою: спершу позиціонування, оффери й карта сайту, потім кожна сторінка блок за блоком. Я затверджувала кожен блок перед наступним — і дивилася варіанти у вигляді зображень, перш ніж щось змінювалося на сайті.

Ти мій маркетинговий стратег і веб-дизайнер.
Я — [хто ви, років досвіду]. Я продаю [послуга 1, 2, 3]
для [аудиторія]. Мета сайту: [заявки / робота / обидва].

1. Запропонуй карту сайту: сторінки, мету кожної сторінки і
   ОДНУ дію, яку там має зробити відвідувач.
2. Для головної перелічи блоки по порядку — кожен блок
   рівно один екран — із заголовком, одним рядком тексту, CTA.
3. Запропонуй одну візуальну концепцію, що об’єднує всі сторінки.
Спершу покажи варіанти. Нічого не створюй, доки я не затверджу.

04Крок 2 · Референс

Один референс матеріалу для всього сайту

До будь-якого візуалу сторінок я створила одне зображення, що задає матеріал: хромовані медузи в напівтемряві з янтарними й бірюзовими відблисками. Воно стало референсом для всіх інших персонажів — тому робот, бджола й гусінь виглядають як одна родина.

05Крок 3 · Krea

Ключові кадри: референс-зображення + текст

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

• Чисто чорний фон — щоб персонаж зливався з темною сторінкою.
• Об’єкт у правій половині — зліва живе заголовок.
• Два кадри на сторінку — стартовий і фінальний для відео.

Зображення 1 — точний референс матеріалу, світла і
палітри: полірований рідкий хром, теплі янтарні вогні,
бірюзові відблиски, чисто чорний фон.
Об’єкт: [механічна гусінь / бджола / око на ніжках],
той самий матеріал, що на зображенні 1. Вигляд збоку, об’єкт заповнює
праву половину кадру 16:9, ліва половина порожня й чорна.
Фотореалізм, студійне світло, максимальна різкість, без тексту.

06Крок 4 · Kling

Рух: від стартового кадру до фінального

Kling отримує обидва кадри й домальовує трансформацію між ними. Ось початок промптів, які я реально використала:

Використай стартовий кадр як точний перший план, а
кадр з оком-компасом — як точну фінальну трансформацію…

Статична камера. Збережи три медузи точно як на
зображенні — той самий дизайн, хромовані й скляні куполи…

Футуристична механічна бджола природно злітає з 2–3
реалістичними помахами крил, трохи піднімаючись…

Оцінюйте відео за серединою, а не за краями

07Крок 5 · Claude

Відвідувач запускає відео скролом

Claude розрізав кожне відео на кадри (90 для павука, 121 для метелика, 246 для компаса), стиснув їх і прив’язав до скролу: перший екран закріплений, і кожен крок скролу показує наступний кадр.

08Крок 6 · Контроль якості

Стандарти й заморожена базова версія

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

• Один розмір заголовків на всіх сторінках; янтарний курсивний акцент — лише в hero та на поворотах заголовка.
• Один текст кнопки у шапці на кожній сторінці: «Співпраця».
• Мобільна версія: бургер-меню, ряди карток зі свайпом, нічого не ховається під шапкою.

09Крок 7 · Інструменти QA

Інструменти QA, які я використала б знову

«На моєму ноутбуці все нормально» — це не тест. Перевірку за мене зробили два безкоштовні інструменти: один тестує, як поводиться сайт, інший — наскільки він швидкий і помітний для пошуку.

Протестуй цей сайт за допомогою Playwright. Перевір десктоп 1440px,
планшет 768px і мобільний 375px. На кожній сторінці перевір:
- сторінка відкривається зверху і на кадрі анімації 0;
- навігація працює;
- мобільне меню відкривається і закривається;
- кнопки CTA клікабельні;
- немає горизонтального переповнення;
- жоден текст не ховається під шапкою;
- форми відправляються;
- скрол-анімації доходять до першого й останнього кадрів;
- перехід між сторінками скидає скрол і стан анімації;
- зроби скриншоти кожної помилки.
Не змінюй код. Спершу поверни список багів.

Перед запуском я перевіряю кожну сторінку за одним мінімумом:

• Немає битих посилань
• Title, meta description і canonical URL
• Open Graph-зображення для прев’ю посилань
• robots.txt і sitemap.xml
• Один H1 на сторінку, alt-текст на зображеннях
• Сторінки індексуються, нічого не заблоковано випадково
• Мобільна продуктивність і Core Web Vitals у Lighthouse

10Крок 8 · Запуск

Від файлів до genterra.pro

Зображення й відео виносяться зі сторінок в окремі файли, сайт іде в репозиторій GitHub, а хостинг публікує кожен новий коміт на домен. Форми надсилають заявки прямо мені в Telegram через n8n. Паролі від сервера не залишають людину, яка ним керує.

11Крок 9 · Пошук і SEO

Зробіть сайт помітним

Аналітика показує, хто прийшов. Search Console — це те, як Google взагалі знаходить сайт. Налаштуйте її в день запуску.

12Крок 10 · Google Analytics

Вимірюйте з першого дня

Сайт без аналітики — це здогадка. Google Analytics 4 показує, звідки приходять відвідувачі, які сторінки читають і які кнопки натискають — тож ви знаєте, яка сторінка послуги і яка стаття реально приносять заявки.

Підключи Google Analytics 4 до всіх сторінок мого сайту.
Measurement ID: G-XXXXXXXXXX.
1. Завантажуй тег лише після того, як відвідувач прийме cookies
   (Consent Mode v2, банер у стилі сайту, Прийняти / Відхилити).
2. Відстежуй як події: відправку форми, кліки на «Співпраця»,
   «Завантажити PDF» і зовнішні посилання на LinkedIn і Telegram.
3. Додай у футер посилання «Налаштування cookies», яке знову відкриває банер.
Перевір, що більше нічого на сторінках не змінюється.

13Крок 11 · QA після запуску

Тестуйте живий сайт, а не файли

Домен, сервер і реальна мережа дещо змінюють. У день запуску я повторюю перевірки на живій адресі:

• Playwright — той самий промпт, тепер на живому домені.
• PageSpeed Insights — кожна сторінка, мобільна і десктопна.
• Реальна заявка — надішліть форму самі й переконайтеся, що вона дійшла.
• GA4 Realtime — з’являються ваш візит і тестові події.

14Помилки

Що забрало найбільше часу

15Чекліст

Перед запуском

• Один референс матеріалу до кожного візуалу
• Об’єкти в правій половині, чисто чорний фон
• Кожна сторінка відкривається на першому екрані й першому кадрі
• Один розмір заголовків, одна кнопка в шапці, акценти дозовано
• Телефон, планшет і десктоп перевірені після кожної зміни
• Форми підключені, Impressum і політика конфіденційності у футері
• Google Analytics 4 працює лише після згоди на cookies; тестовий візит видно в Realtime
• Title, description і прев’ю-зображення для кожної сторінки
• sitemap.xml і robots.txt на сайті, домен підтверджено в Search Console
• Список багів Playwright порожній, PageSpeed перевірено на мобільному і десктопі