З Onepage AI 2.0 (вайб-кодинг) ми запускаємо абсолютно новий спосіб розробки в Onepage, метод, який поєднує генерацію коду на базі ШІ з візуальним редагуванням.
За допомогою вайб-кодинг ви можете створювати повністю кастомізовані компоненти, секції або цілі сторінки безпосередньо у вашому проєкті Onepage. Вони будуть плавно відображатися поруч із вашим звичайним візуальним контентом на тій самій сторінці.
Таким чином ви поєднуєте професійну реалізацію дизайну з повним контролем. Жоден інший конструктор або вайб-кодинг-інструмент не пропонує таких можливостей.
Переваги вайб-кодингу
Завдяки вайб-кодингу у Onepage ви отримуєте ті самі творчі можливості, що й у самостійних генераторів коду на основі штучного інтелекту (наприклад, Lovable, Bolt, v0), не втрачаючи при цьому того, чим вирізняється Onepage: візуального редактора, дотримання вимог GDPR, форми та воронки продажів, високоякісних шаблонів, а також можливості передавати вебсайти клієнтам, які зможуть самостійно ними керувати.
Чому це великий крок:
Створюйте все, що ви можете уявити: індивідуальні анімації, інтерактивні калькулятори, унікальні макети або експериментальні дизайни безпосередньо з ваших промптів.
→ Якщо це можна створити через AI вайб-кодинг, Ви можете використовувати це в Onepage.
AI-налаштування для кожного компонента: кожен згенерований компонент містить візуальне вікно налаштувань, за допомогою якого Ви можете змінювати тексти, кольори, поведінку та макет без редагування коду.
→ Ви навіть можете доручити AI додати додаткові налаштування.
Вайб-код доповнює звичайний контент: використовуйте AI-секції для hero-блоків або складних інтеракцій, тоді як інші частини сторінки Ви продовжуєте створювати класично в редакторі.
Гібридний підхід: одна сторінка поєднує дві сильні сторони — генерацію за допомогою AI та класичний редактор.
Передача клієнтам: AI-згенеровані елементи залишаються редагованими і можуть бути передані клієнтам. Вони мають власні панелі налаштувань і тому легко підтримуються.
Створення розділу за допомогою ШІ
Щоб створити розділ за допомогою AI 2.0, виконайте такі кроки:
Крок 1: Увійдіть у Onepage за посиланням: авторизуватися.
Крок 2: Відкрийте наявний проєкт або створіть новий
Ви можете створити новий проєкт або відкрити вже наявний, у якому хочете використовувати вайб-кодинг.
Крок 3: Додайте новий розділ
Коли Ви відкрили потрібну сторінку, додайте новий розділ, натиснувши на синій символ «+», і оберіть «Створити з ШІ».
Коли ви створюєте нову сторінку, натисніть «+Додати секцію», а потім виберіть «Створити з ШІ».
📌 Примітка: якщо натиснути «Створити сторінку за допомогою ШІ», можна згенерувати не лише окремі розділи, а й цілу сторінку одразу.
Докладнішу інформацію про це можна знайти в розділі: Створити сторінку за допомогою ШІ
Крок 4: Напишіть промпт
Тепер ви можете вставити у поле вводу свій промпт і точно описати ШІ, що саме він має створити. Чим чіткіший і детальніший ваш опис, тим кращий буде результат.
Ми також підготували корисну статтю на цю тему, у якій ви знайдете поради щодо створення промптів: Вайб-кодинг: як писати ефективні промпти для кращих результатів
ШІ може створювати не лише макети, а й анімації, ефекти, інтерактивні елементи та повністю індивідуальні дизайни.
Наприклад:
"Створи вражаючу hero-секцію у стилі «Матриці». Фон має бути глибоко чорним, цифровою порожнечею, у якій падає вертикальний дощ із яскраво неонових зелених символів коду (Digital Rain). Дизайн повинен виглядати футуристично та кібернетично, з легкими glitch-ефектами та high-tech естетикою. У центрі має бути помітна кнопка call-to-action, яка з’являється з анімацією, ніби системне спливаюче вікно, і має пульсуючий неоновий glow-ефект. Використовуйте моноширинний шрифт (як у терміналах) для заголовка, щоб підсилити відчуття хакерського стилю. Уся секція повинна створювати враження входу в цифрову симуляцію."
Оскільки ви створюєте лише один розділ, у цьому випадку вкладка «Vibe Section» має залишатися активованою.
ШІ аналізує ваш промпт і автоматично генерує на його основі відповідний код для вашого розділу.
📌 Примітка: Генерація може зайняти певний час.
Крок 5: Перевірка результату
ШІ повідомить вас, щойно розділ буде створено. Після цього ви отримаєте короткий огляд того, що було згенеровано, а також доступні налаштування, за допомогою яких ви зможете самостійно змінювати такі параметри, як тексти, кольори або відступи тощо.
У живому режимі цей розділ виглядатиме так:
Крок 6: Редагування вмісту через елементи керування (Controls)
Ви можете у будь-який час змінювати тексти, URL-адреси, кольори, ефекти або відступи (залежно від того, що було створено) через налаштування, без необхідності повторної генерації ШІ.
Для цього просто натисніть на розділ, створений за допомогою ШІ. Після цього вам будуть відображені окремі елементи, які ви зможете легко редагувати.
Крок 7: Редагування коду та додавання налаштувань
Якщо ви хочете змінити макет, додати або видалити анімації чи доповнити контент, ви можете просто безпосередньо повідомити АІ, що саме потрібно змінити — генерувати секцію з початку для цього не потрібно.
Ви також можете цілеспрямовано запитувати нові елементи керування, наприклад, щоб самостійно налаштовувати відступи зверху та знизу або інші індивідуальні налаштування.
Для цього просто натисніть Edit Code і опишіть ШІ, які саме зміни потрібно внести.
У нашому прикладі ми повідомили ШІ:
"Будь ласка, адаптуй існуючу hero-секцію таким чином: Digital Rain має падати не зверху вниз, а знизу вгору, щоб створювалося враження, ніби код піднімається з глибини цифрової порожнечі.
Додатково потрібно додати Controls для відступів, щоб я міг(могла) гнучко налаштовувати відступи зверху та знизу (наприклад, padding/margin секції). Усі інші елементи дизайну, анімації та стиль «Матриці» мають залишитися без змін."
ШІ тепер адаптував «Digital Rain» так, що він піднімається знизу вгору. Додатково в налаштуваннях було додано нову категорію, за допомогою якої можна індивідуально налаштовувати відступи.
Якщо ШІ не розуміє ваші інструкції одразу, ви можете просто завантажити скриншот і таким чином точно показати, що саме ви маєте на увазі.
Крок 8: Перейти до наступного розділу
Якщо ви задоволені своїм розділом, можете перейти до наступного та створити його так само, як і попередній.
Крім того, ви можете натиснути на значок «+» у верхній панелі чату, щоб додати ще один розділ і одразу його створити.
Таким чином, ви зможете перемикатися між відповідними розділами і завжди перебуватимете в потрібному чаті, щоб внести подальші зміни.
Використання ШІ всередині існуючого розділу
Ви також можете розширювати або змінювати вже існуючі розділи. Це можна зробити так:
Крок 1: Увійти в Onepage
Увійдіть до Onepage через посилання: авторизуватися.
Крок 2: Відкрити наявний проєкт
Відкрийте свій наявний проєкт і прокрутіть до розділу, у якому ви хочете почати використовувати вайб-кодинг.
Крок 3: Вибрати розділ
Наведіть курсор між елементами в тому місці, де ви хочете вставити новий елемент. Потім натисніть на символ «+» і виберіть «Згенерувати з ШІ».
Крок 4: Написання промпту
Тепер ви можете вставити у поле введення свій промпт і точно описати ШІ, що саме він має створити. Чим чіткішим і детальнішим буде ваш промпт, тим кращим буде результат.
Наприклад:
"Створи стильну мінімалістичну секцію з розкладом роботи. Подай години роботи у вигляді списку:
Понеділок, середа, четвер: 10:00 – 18:00
Вівторок, п’ятниця: 08:00 – 13:00
Субота, неділя: зачинено
Також додай індикатор статусу в залежності від годин роботи. Якщо в цей момент компанія працює, повинен відображатись статус: «Зараз відчинено» (Напис зеленого кольору з м’якою анімацією, що пульсує).
Якщо зачинено, статус: «Зараз зачинено» (червоний колір без анімації).
Статус має автоматично оновлюватися та враховувати актуальні години роботи."
ШІ аналізує ваш промпт і автоматично генерує з нього відповідний код для вашого розділу.
📌 Примітка: Генерація може зайняти деякий час.
Крок 5: Перевірка результату
ШІ повідомить вас, щойно розділ буде завершено. Ви отримаєте короткий огляд того, що було згенеровано, а також доступні налаштування, за допомогою яких ви зможете самостійно редагувати вміст, наприклад тексти, кольори тощо.
Онлайн цей розділ виглядатиме так:
Крок 6: Редагування вмісту через елементи керування (Controls)
Ви можете в будь-який момент самостійно змінювати тексти, налаштування, кольори або ефекти (залежно від того, що було створено) через елементи керування, без потреби знову запускати генерацію за допомогою ШІ.
Для цього просто натисніть на блок, який був створений за допомогою вайб-кодингу. Там вам будуть показані всі окремі елементи, які ви зможете легко відредагувати.
Крок 7: Редагування коду та додавання елементів керування
Якщо ви хочете змінити макет, додати, анімації чи доповнити вміст, достатньо просто повідомити ШІ, що саме потрібно змінити, повторне генерування нової секції для цього не потрібне.
Ви також можете запитати нові індивідуальні елементи керування, наприклад, щоб мати можливість самостійно налаштовувати відступи зверху та знизу або додавати інші потрібні вам Контроли.
Для цього просто натисніть на створений елемент, потім на Chat, і опишіть ШІ, які саме зміни потрібно внести.
У нашому прикладі ми повідомили ШІ таке:
"Будь ласка, налаштуй макет: прибери слово "графік". Зроби роздільники більш помітними.
Додатково потрібно додати елементи керування для відступів, щоб я міг/могла гнучко самостійно налаштовувати верхні та нижні відступи (наприклад, padding/margin секції)."
Додатково в елементах керування з’явилася нова категорія, через яку можна індивідуально налаштовувати відступи.
Якщо ШІ одразу не розуміє ваші інструкції, ви можете просто завантажити скриншот і таким чином точно показати, що саме маєте на увазі.
Створення сторінки за допомогою ШІ
За допомогою вайб-кодингу ви можете не лише створювати окремі розділи, а й генерувати цілі сторінки з кількома секціями одночасно.
Ви просто описуєте ШІ, якою має бути структура вашої сторінки, який вміст вона має містити та який стиль ви хочете отримати. Після цього ШІ автоматично створює всю структуру сторінки за вас.
Крок 1. Створення нової сторінки
Спершу створіть у своєму проєкті нову сторінку — для цього натисніть синю кнопку «Створити» вгорі праворуч.
Крок 2. Відкрийте чат для вайб-кодингу
Натисніть «Створити сторінку за допомогою ШІ».
Крок 3. Опишіть бажану сторінку
Тепер ви можете точно пояснити ШІ, які блоки має містити ваша сторінка.
Приклад промпту:
«Створи футуристичну лендинг-сторінку для ШІ-стартапу. Сторінка має відчуватися як поєднання Apple, Stripe і вебсайту науково-фантастичного фільму.
Використай темний фон із неоновими градієнтами в синіх, фіолетових і бірюзових тонах. Сторінка має містити такі розділи:
Hero-блок з анімованим фоном, ефектами світіння (glow) і великим заголовком.
Інтерактивну презентацію продукту з картками, що ширяють у просторі.
Блок із числами та статистикою, що відраховуються вгору під час прокручування.
Розділ із логотипами клієнтів та анімованими відгуками.
Блок функцій з ефектами наведення (hover) та дизайном у стилі glassmorphism.
Часову шкалу (timeline), що вибудовується під час прокручування.
Заклик до дії (Call-to-Action) з анімованим градієнтом.
Використай сучасні анімації прокручування, ефекти появи (fade-in), масштабування (scale), плавні переходи між розділами та делікатні ефекти паралаксу. Кожен розділ має візуально відрізнятися від попереднього й поєднуватися з ним за допомогою креативних переходів».
📌 Примітка. Генерація може зайняти певний час.
Крок 4. Перевірка початкового макету та створення всієї сторінки
Спершу ШІ аналізує ваш промпт і створює перший розділ вашої сторінки. Після цього він запитує вас, чи задоволені ви стилістикою, кольорами, анімаціями та загальним дизайном.
Якщо потрібні ще якісь зміни, ви можете одразу повідомити ШІ та внести правки, доки результат не відповідатиме вашим уявленням.
Щойно ви будете задоволені, ви можете просто повідомити ШІ, що він має продовжувати. Після цього він автоматично згенерує решту розділів вашої сторінки в тому самому стилі й забезпечить узгоджений дизайн та відповідні переходи між окремими блоками.
Крок 5. Перевірка результату
ШІ повідомить вас, щойно вашу сторінку буде створено. При цьому ви отримаєте короткий огляд того, що було згенеровано, а також доступні налаштування («Controls»), за допомогою яких ви можете самостійно змінювати вміст, як-от тексти, кольори тощо. У реальному вигляді сторінка виглядала б так:
Крок 6. Редагування вмісту за допомогою згенерованих налаштувань
Ви можете будь-коли самостійно змінювати тексти, налаштування, кольори або ефекти (залежно від того, що було створено) за допомогою налаштувань — генерувати цілу секцію наново не потрібно.
Для цього просто натисніть на розділ, який ви хочете відредагувати. Там вам буде показано окремі елементи, які ви потім зможете легко змінити.
Крок 7. Внесення змін на сторінку
Якщо ви хочете внести зміни на всю сторінку, ви можете в будь-якому розділі натиснути «Чат» угорі ліворуч, а потім прибрати вкладку «Vibe-Section» або вибраний розділ.
Після цього ви можете промптом повідомити ШІ, які зміни слід внести на всю сторінку. Наприклад:
«Будь ласка, допрацюй переходи: з'єднуй окремі розділи не прямими краями, а використовуй органічні, плавні хвилеподібні форми та асиметричні переходи. Завдяки цьому сторінка має виглядати ще сучаснішою й динамічнішою, а блоки — гармонійно поєднуватися між собою».
Крок 8. Внесення змін у кожен окремий розділ
Ви також можете вносити зміни в кожен окремий розділ і додавати будь-які додаткові налаштування. Прокрутіть до потрібного розділу, який ви хочете відредагувати, натисніть «Чат» і сформулюйте свій промпт.
Як альтернатива, ви можете в будь-якому розділі натиснути «Чат», а потім вибрати розділ, якого має стосуватися ваш запит.
Наприклад:
«Я хочу, щоб таймлайн прокручувався горизонтально, а не вертикально. Крім того, я хочу мати controls, за допомогою яких можна налаштувати, як відображаються кроки 1–5 — наприклад, обведеними колом, заповненими або у вигляді квадрата».
ШІ розташував timeline горизонтально. Додатково в Controls було додано ще одну категорію, через яку ви можете самостійно налаштовувати відображення кроків.
Якщо ШІ не зрозуміє ваші вказівки одразу, ви можете просто завантажити скриншот і таким чином точно показати йому, що ви маєте на увазі.
📌 Примітка. Для найкращих результатів ми рекомендуємо створювати сторінку розділ за розділом. Завдяки цьому ШІ може точніше враховувати ваші вимоги й акуратніше реалізовувати зміни.
Створення цілої сторінки чудово підходить для того, щоб швидко отримати перший чернетковий варіант. Однак ми рекомендуємо створювати окремі розділи безпосередньо за допомогою ШІ або згодом доопрацьовувати згенеровану сторінку розділ за розділом. Так ШІ зможе значно точніше враховувати побажання щодо макета, вмісту, анімацій, ефектів та індивідуальних налаштувань.
Поради для кращих результатів
Щоб отримати якнайкращі результати з вайб-кодингу, рекомендуємо надавати чіткий та максимально детальний опис вашої ідеї. Чим точніше ви поясните штучному інтелекту, що саме хочете отримати, тим якісніше він зможе виконати ваше завдання.
Опишіть, наприклад, бажаний стиль елемента — він може бути жартівливим, мінімалістичним, сучасним, технічним або дуже креативним. Навіть невеликі підказки щодо кольорів, настрою чи ваших вподобань у макеті значно допоможуть ШІ зрозуміти ваш задум.
Важливо також: чим точніший ваш промпт, тим кращим буде результат. Замість просто «створити діаграму» варто детально описати, що саме має бути створено, тобто які функції, ефекти, анімації або взаємодії повинні бути включені — залежно від того, як ви це собі уявляєте.
Ви також можете у будь-який момент виконувати додаткове налаштування, тобто після першої версії запитувати додаткові зміни. Таким чином ви можете поступово вдосконалювати результат крок за кроком, замість того щоб одразу намагатися ідеально описати все в одному запиті.
Також дуже корисною є можливість завантажувати скриншоти, щоб відтворювати наявні дизайни або використовувати їх як візуальну референцію.
Крім того, звертайте увагу, щоб у промпті ви описували не лише стиль, але й конкретний зміст.
Ідеї для натхнення
За допомогою вайб-кодингу ви можете створювати практично все — від простих компонентів до складних додатків. Чим краще ви опишете свою ідею, тим вражаючішими будуть результати. Це дозволяє створювати індивідуальні компоненти, цілі блоки Hero або навіть складні додатки безпосередньо на основі промпта.
Для натхнення ви можете переглянути два приклади того, що вже можливо:
Більше прикладів проєктів та ідей ви знайдете у нашій статті: Приклади проєктів із вайб-кодингом.
Для початку ми також рекомендуємо наш Prompting Guide, де ми показуємо, як досягати найкращих результатів.
Поширені питання та їх вирішення
Чи є тексти оптимізованими для пошукових систем?
Чи є тексти оптимізованими для пошукових систем?
Тексти загалом підходять для читання пошуковими системами і можуть бути проіндексовані.
Проте наразі пряма SEO-оптимізація ще не повністю інтегрована в редактор. За потреби, ШІ може додати SEO-релевантні елементи в код, наприклад структурований вміст або мета-інформацію.
Важливо також: заголовки H1–H6 не можна безпосередньо задати в редакторі, однак їх можна створити через ШІ в коді, якщо потрібна чиста та правильна структура.
Як я можу скасувати зміни?
Як я можу скасувати зміни?
Зміни автоматично зберігаються як версії, щойно ви зберігаєте сторінку через кнопку «Оновити». Через історію версій ви можете в будь-який час відновити попередню версію. Більше про це ви знайдете в наступній статті в розділі «Історія версій»: Відновлення попередніх версій.
Альтернативно ви також можете попросити ШІ цілеспрямовано скасувати певні зміни.
Які існують обмеження щодо зовнішнього контенту?
Які існують обмеження щодо зовнішнього контенту?
Зовнішній контент, як-от музика, відео (наприклад, YouTube) або скрипти, може підпорядковуватися власним умовам використання відповідних провайдерів. Музику або звуки можна додавати лише через зовнішні URL-посилання, пряме завантаження або вбудовування MP4-файлів наразі не підтримується.
Крім того, зверніть увагу, що під час використання зовнішніх сервісів, таких як YouTube чи подібних платформ, можуть діяти вимоги щодо захисту даних. Вам потрібно самостійно перевірити, чи дозволено використовувати такі сервіси та в якому вигляді їх можна інтегрувати відповідно до чинних норм.
Що я можу зробити, якщо щось не працює або виникла помилка?
Що я можу зробити, якщо щось не працює або виникла помилка?
Якщо генерування не працює, ви можете спочатку перезавантажити сторінку. Якщо проблема не зникає, ви можете надіслати штучному інтелекту скриншот і попросити проаналізувати помилку та виправити її.
Чи може швидкість завантаження бути порушена через вайб-кодинг?
Чи може швидкість завантаження бути порушена через вайб-кодинг?
Швидкість завантаження може погіршитися, якщо використовується дуже багато або надто складний кастомний код чи анімації.
Оскільки вайб-кодинг використовує індивідуально згенерований код (наприклад, для ефектів, взаємодій або динамічного контенту), це може впливати на продуктивність сайту залежно від обсягу та складності реалізації.
Стежте за тим, щоб використовувати лише ті ефекти, які дійсно потрібні, і регулярно тестуйте свою сторінку. Особливо велика кількість анімацій або складних скриптів повинні застосовуватися вибірково й помірковано, щоб забезпечити оптимальний час завантаження.
Мій сайт отримав низьку оцінку в Google Speedtest. Що я можу зробити?
Мій сайт отримав низьку оцінку в Google Speedtest. Що я можу зробити?
Якщо сторінка отримує низьку оцінку в Google Speedtest, штучний інтелект може цілеспрямовано допомогти з оптимізацією.
Ви можете просто надати ШІ скриншот результатів вашого Google-Speedtest і попросити покращити продуктивність. Після цього будуть застосовані відповідні оптимізації.
В одному з наших тестів значення продуктивності вдалося підвищити, наприклад, з 66 до 93.
Як пов’язати створену ШІ кнопку з певним розділом?
Як пов’язати створену ШІ кнопку з певним розділом?
Ви можете просто вільною мовою сказати ШІ, куди саме має вести кнопка. Дія «прокрутка до» у кодових секціях наразі недоступна.
Приклад: «Будь ласка, прив’яжи кнопку "Забронювати термін зараз" до розділу "Записатися на прийом"».
ШІ розпізнає зазначені назви, знайде відповідний розділ на сторінці та автоматично додасть потрібне посилання до кнопки.
💡Бажаєте залишити відгук до цієї статті? Будь ласка, напишіть у наш чат або за адресою support@onepage.io, і ми зможемо її покращити. Дякуємо! 🙂