Як створити сайт для бізнесу з нуля за допомогою штучного інтелекту Antigravity

Цей гайд демонструє повний цикл розробки вебсайту — від ідеї до деплою на хостинг — використовуючи інструмент Antigravity (на базі Google Gemini) та методологію вебкодингу. Ви навчитеся керувати агентом ШІ як архітектором, створювати модульні структури коду, генерувати дизайн та контент, а також переносити готовий продукт на WordPress.

Перед початком переконайтеся, що у вас є:

Крок 1: Підготовка інструментів та файлів контексту▶ 15:00

Завантажте та встановіть програму Antigravity з офіційного сайту. Після встановлення відкрийте програму та авторизуйтеся через акаунт з активною підпискою Gemini Pro. Це дозволить використовувати найновіші моделі (наприклад, Gemini 1.5 Pro/Flash) без обмежень.

Створіть нову папку для проекту. У цій папці створіть файл .gemini.md (або gemini.md). Цей файл слугує «пам’яттю» проекту: він фіксує правила, технологічний стек та поточний прогрес, що економить токени та покращує якість відповідей ШІ. Додайте туди базові інструкції щодо модульної архітектури (розбиття CSS на окремі файли для кожної сторінки/блоку) та вимоги до коду.

Крок 2: Налаштування «Скілів» (Skills) та планування▶ 22:30

«Скіли» — це готові набори інструкцій (best practices) для виконання специфічних завдань. Для початку роботи встановіть необхідні скіли через термінал в Antigravity. Використовуйте команди для встановлення скілів, таких як brainstorming (для планування структури), frontend-design (для візуальних рішень) та ux-pro-max (для користувацького досвіду).

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

Крок 3: Генерація дизайну та структури сайту▶ 30:00

Запустіть процес брейнштормінгу, використовуючи встановлений скіл. Опишіть ШІ деталі бізнесу (наприклад, логопед-дефектолог, затишна студія, цільова аудиторія — жінки 20-50 років). ШІ задасть уточнюючі питання щодо структури сторінок, кольорової палітри та функціоналу (формы запису, мультимовність).

На основі відповідей ШІ згенерує дизайн-документ та план імплементації. Перегляньте запропоновану структуру: головна сторінка, «Про мене», «Послуги» (з підкатегоріями), «Блог», «Контакти». Затвердьте план, і ШІ розпочне створення файлової структури, розбиваючи CSS на компоненти (header, hero, services тощо) для підтримки модульності.

Крок 4: Створення прототипів основних сторінок▶ 45:00

Доручіть ШІ створення HTML та CSS для кожної затвердженої сторінки. Почніть з головної сторінки, а потім перейдіть до внутрішніх. Використовуйте режим «Plan» (Планування), щоб ШІ спочатку описав дії, а потім виконав їх.

Для сторінки «Послуги» створіть систему категорій та підкатегорій. Використовуйте теги для навігації між підкатегоріями. Для сторінки «Про мене» згенеруйте шаблонний контент (біографія, освіта, сертифікати) та місця для фотографій. ШІ автоматично створить унікальні текстові блоки для кожної секції, дотримуючись стилю «Direct Response» (орієнтація на біль клієнта та рішення).

Крок 5: Візуальне покращення та адаптація дизайн-референсів▶ 67:30

Щоб уникнути шаблонного вигляду, знайдіть візуальні референси на платформах на кшталт Awwwards, Landbook або CodePen. Скопіюйте код або скріншоти бажаних блоків (наприклад, hero-секції, слайдерів відгуків, карток цін).

Надайте ці референси ШІ з проханням адаптувати їх під ваш проект, використовуючи тільки нативний HTML, CSS та JavaScript (без важких бібліотек на кшталт React, якщо це не потрібно). ШІ інтегрує стилі, анімації та структуру референсу у ваш код, зберігаючи узгодженість дизайну. Регулярно перевіряйте мобільну версію та вносьте правки (наприклад, заміна стрілок слайдера на жест гортання для мобільних).

Крок 6: Генерація унікального контенту для категорій▶ 82:30

Для великої кількості сторін (категорій та підкатегорій послуг) використовуйте автоматизацію. Створіть або використайте готовий скіл (наприклад, skill-creator), який генерує унікальний текст для кожної сторінки на основі шаблону.

Доручіть ШІ створити копії HTML-файлів для всіх категорій, замінивши заголовки, описи та ключові слова відповідно до тематики (наприклад, «Затримка мовленнєвого розвитку», «Алалія»). Переконайтеся, що для кожної сторінки згенеровано унікальний мета-опис та заголовок H1, що критично для SEO.

Крок 7: Оптимізація та підготовка медіафайлів▶ 97:30

Згенеровані ШІ зображення часто мають водяні знаки або великий розмір. Використовуйте локальні скрипти або інструменти для обробки зображень.

1. Видаліть водяні знаки (якщо є).

2. Зменшіть розмір файлів для вебу (оптимізуйте до 100-200 Кб, використовуючи формати WebP або JPG).

3. Транслітеруйте назви файлів англійською мовою (наприклад, logoped-detyam.jpg замість кирилиці).

Завантажте оптимізовані зображення у папку images проекту. Доручіть ШІ оновити шляхи до зображень у HTML-коді всіх сторінок, щоб вони відповідали новим назвам файлів. Додайте атрибути alt до всіх зображень для доступності та SEO.

Крок 8: Створення мультимовної версії▶ 112:30

Для підтримки двох мов (української та російської) створіть окремі папки або префікси в URL. Найпростіший шлях для статичного сайту, який планується перенести на WordPress — скопіювати всі HTML-файли в папку ru (або додати префікс /ru/).

Доручіть ШІ перекласти контент у копіях файлів. Використовуйте модель Gemini Flash для швидкого перекладу великих обсягів тексту. Перевірте, щоб усі посилання в меню та між сторінками вели на правильні мовні версії. Переконайтеся, що перемикач мов працює коректно.

[📷 Missing timestamp — image intended: 112:30:План імплементації та структура файлів для двомовного сайту]

Крок 9: Міграція на WordPress▶ 120:00

Підготуйте сайт до інтеграції з WordPress. Створіть тему WordPress з нуля:

1. Створіть папку теми та файли style.css, index.php, functions.php.

2. Розбийте HTML на частини: header.php, footer.php.

3. Для кожної унікальної сторінки створіть окремий шаблон (наприклад, page-about.php, page-services.php), вставивши відповідний HTML-код.

4. Замініть статичні шляхи до ресурсів (CSS, JS, зображення) на динамічні функції WordPress (get_template_directory_uri() тощо).

Використовуйте плагін Polylang для керування мультимовністю. Налаштуйте зв’язок між українськими та російськими версіями сторінок через адмін-панель WordPress.

[📷 Missing timestamp — image intended: 120:00:Код HTML та структура файлів підготовлена для інтеграції]

Крок 10: Локальне тестування та налаштування функціоналу▶ 75:00

Встановіть WordPress локально (через LocalWP). Імпортуйте створену тему. Створіть порожні сторінки в адмін-панелі та призначте їм відповідні шаблони. Налаштуйте меню та постійні посилання (Permalinks).

Встановіть плагін Contact Form 7 для обробки заявок. Створіть форму з полями (ім’я, телефон, вік дитини, коментар). Налаштуйте відправку листів на email та додайте маску для телефону. Інтегруйте форму у спливаюче вікно (popup) на головній сторінці та сторінках послуг. Перевірте роботу форми та відображення сайту на різних пристроях.

Крок 11: SEO-оптимізація та фінальні правки▶ 52:30

Встановіть SEO-плагін (наприклад, Rank Math або Yoast SEO). Заповніть унікальні Title та Description для кожної сторінки. Переконайтеся, що структура заголовків (H1-H6) логічна. Створіть файл robots.txt та карту сайту sitemap.xml.

Перевірте швидкість завантаження та відсутність помилок у консілі браузера. Виправте дрібні візуальні недоліки (відступи, шрифти, кольори). Зробіть фінальний бекап локальної версії сайту.

Крок 12: Деплой на хостинг▶ 60:00

Експортуйте локальний сайт за допомогою плагіну All-in-One WP Migration. На хостингу (наприклад, Hosting Ukraine, Hetzner, Vercel) встановіть чистий WordPress. Імпортуйте файл експорту.

Налаштуйте DNS-записи для вашого домену. Увімкніть SSL-сертифікат (HTTPS). Перезбережіть постійні посилання в налаштуваннях WordPress для оновлення структури URL. Перевірте роботу сайту на живому сервері: перемикач мов, форми зворотного зв’язку, відображення зображень.

Очікуваний результат

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

Поради щодо усунення неполадок: