Створюємо реальний сайт з AI: React, Tailwind, GPT і Claude Code

AI може написати код, але він не здогадається, який саме сайт вам потрібен. Запит на кшталт «зроби інтернет-магазин» залишає надто багато невідомого: від технологій і структури до кольорів, товарів та оформлення замовлення.

У цьому відео на прикладі реального магазину розбираємо підготовку проєкту до розробки. Визначаємо стек, збираємо дизайн-референси й перетворюємо загальну ідею на зрозуміле технічне завдання для GPT і Claude Code.

Що буде у відео

• чому короткий промпт рідко дає професійний результат;
• як розподілити роботу між GPT і Claude Code;
• навіщо заздалегідь указувати React, Tailwind CSS, Vite та UI-компоненти;
• як визначити сторінки й основні функції інтернет-магазину;
• де шукати приклади першого екрана, категорій, карток товарів і форм;
• як передавати AI скриншоти з поясненням потрібних елементів;
• чому спочатку варто створити технічне завдання, а вже потім генерувати код.

Окремо розглядаємо важливість першого екрана на прикладі сайту «Баба Яга». Користувач має одразу зрозуміти пропозицію та побачити основну дію, яку від нього очікують.

Для кого цей матеріал

Матеріал підійде початківцям і frontend-розробникам, які хочуть використовувати AI для реальних проєктів, але поки не знають, як підготувати вимоги та скласти точний промпт.

Що зробити після перегляду

1. Опишіть бізнес і головну задачу сайту.
2. Випишіть необхідні сторінки та функції.
3. Визначте стек розробки.
4. Знайдіть декілька вдалих дизайн-референсів.
5. Окремо продумайте перший екран і мобільну версію.
6. Передайте матеріали GPT та попросіть сформувати технічне завдання.
7. Перевірте й доповніть план перед передаванням у Claude Code.

Наступний крок

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