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