Мій навчальний сайт ⋯
📄 README_ПРОСТО.mdВідкрити ▾
📄 CODEX_ПРОМПТ.mdВідкрити ▾
± Змінено 4 файли +236 -125
Скасувати ↺4Перевірити
VIBECODING: створи своє
Не просто грай. Створи власний світ! 😎
Це твоя місія. Тисни «Далі →», щоб почати пригоду 🚀
VIBECODING: створи своє
Захисти фокус: 0/46Пропущено: 0/3
GAMING
WINS!
WINS!
Геймінг переміг(((
Перевір свій фокус: гра чи вайбкодинг?
Натисни кнопку й не дай ігровим закликам долетіти до хлопця.
INTRO · Як користуватись
Твій короткий старт у вайбкодинг
Це маленький INTRO-курс: кілька екранів, перший prompt і перші кроки, щоб відчути себе вайбкодером-початківцем.
Спробуй прямо тут
Наведи мишку. Якщо об’єкт оживає або курсор змінюється — його можна натиснути, потягнути або навіть швирнути.
🖱️
На екранах є статичні й інтерактивні деталі. Досліджуй мишкою, як у грі.
📋
Коли бачиш кнопку «Скопіювати», текст піде в буфер пам’яті для вставки у Codex.
Після натискання з’явиться підказка, що prompt готовий для Codex.
Далі буде короткий опитувальник про твої інтереси. Відповіді збережуться і перетворяться на твій перший prompt для Codex.
Навігація · Зміст
Обери, куди перейти
Це карта всього INTRO. З будь-якого слайду ти зможеш повернутися сюди через кнопку ☰ Зміст у нижньому барі.
Порада: проходь по порядку, але повертайся сюди, коли хочеш швидко стрибнути в потрібний розділ.
Відео · Prompt до ChatGPT
![Стартова картинка Vibecoding]()
Перша картинка почалась із prompt
Prompt до ChatGPT
Намалюй світлу дитячу кімнату вдень. Є два комп'ютерні столи біля вікна.
Ліворуч сидить хлопець років 12-14, видно його зі спини. Він повністю захоплений своїм монітором і навіть не дивиться в бік другого столу. На екрані великими красивими плитками показано, що він робить за допомогою Vibecoding: свій сайт, свою гру, застосунок для телефона, програму для навчання, AI-помічника. Десь ненав'язливо видно Claude і Codex.
Праворуч стоїть другий стіл без людини. На моніторі відкриті Counter-Strike, Roblox і Minecraft. Поруч навушники та мікрофон. Із мікрофона вилітають повідомлення від друзів: «Пішли в Roblox!», «Заходь у Minecraft!», «Ми вже в Counter-Strike!».
Біля хлопця невелика репліка: «Не можу. У мене тут цікавіше 😎».
Атмосфера має бути не про "ігри погані", а про те, що створювати своє ще цікавіше. Теплі кольори, сонячне світло, затишна кімната, сучасний комп'ютер, відчуття творчості, майбутнього і натхнення.
Формат широкий 16:9, як заставка для ноутбука або перший слайд презентації.
Клік по prompt або кнопці копіює текст у буфер для Codex. Справа з'являється картинка-результат.
Відео · Сторінки та структура
Prompt до Codex
Допоможи перетворити мою ідею на план сайту.
Ідея: я хочу зробити INTRO-курс про vibecoding для підлітків.
Склади структуру сайту:
- придумай назву;
- зроби 6 простих сторінок;
- для кожної сторінки дай короткий зміст;
- додай нагадування, що сторінки можна потім прибирати, додавати або міняти місцями;
- покажи це як акуратний макет із блоками.
Поки що це має бути тільки план і wireframe, без фінального дизайну.
Зміст майбутнього сайту
Це тільки перший план: потім можна прибирати, додавати і міняти як захочеш.
📁01 Ідея сайту
📁02 План сторінок
📁03 Як користуватись
📁04 Мої інтереси
📁05 Prompt до Codex
📁06 Перший результат
01 Ідея сайту
02 План сторінок
03 Як користуватись
04 Мої інтереси
05 Prompt до Codex
06 Перший результат
💡 ДУМКА ІДЕЯ → ПЛАН → ЗМІСТ
Спочатку Codex допомагає з думкою: ідея, план сторінок і зміст.
Відео · Об’єкти
Додаю форму, колір і значення
Prompt до Codex
Створи для мого INTRO статичний snapshot у темному космічному стилі.
На великій панелі покажи:
- два кольорові промінчики;
- маленьку ракету;
- маленьку клавіатуру;
- три підписані картки: «Форма», «Колір», «Значення».
Зроби так, ніби це вже частина майбутнього сайту, але ще без руху й анімації.
🚀⌨️
Форма
Колір
Значення
Це snapshot: виглядає як INTRO, але ще не рухається.
Відео · Prompt → результат
А тепер прошу Codex додати рух
Prompt до Codex
Додай до мого INTRO рух:
- хай літають промінчики і кораблики;
- об’єкти мають м’яко оживати;
- стиль залиш темний, космічний і ігровий.
🚀🛸
Зліва prompt, справа результат, який він створює.
Відео · Новий об’єкт
Створюємо об'єкт
Prompt до Codex
Створи один новий об'єкт для мого INTRO:
- велику фігурку клавіатури;
- світлу, неонову, у стилі сайту;
- розмісти її в центрі результату;
- зроби так, ніби вона м'яко левітує.
⌨️
Один prompt може створити новий живий елемент.
Відео · Інтерактивність
Тепер об’єкти дихають, рухаються і вибухають
Prompt до Codex
Створи 4 живі фігури у стилі цього INTRO:
- клавіатура: світло-сіра rounded rectangle, 3 ряди маленьких темних клавіш і довга spacebar;
- ракета: червоний носик, білий корпус, круглий синій ілюмінатор, маленькі плавники і помаранчеве полум’я;
- геймпад: темно-фіолетовий корпус з двома ручками, хрестик D-pad зліва і кольорові кнопки справа;
- кристал: бірюзово-фіолетовий gem з гострими гранями, бликом і неоновим glow.
Для кожної зроби однакову поведінку:
- фігура дихає на екрані;
- її можна тягати мишею;
- її можна кинути, і вона летить з інерцією поверх слайда;
- якщо натиснути — вона вибухає лазерами та феєрверками.
Додай кнопку, яка відкриває prompt-popup.
⌨️
🚀
🎮
💎
Це останній кадр демо. Натисни “Далі”, щоб побачити готовий слайд-зміст.
Результат · Зміст INTRO
Ось результат: слайд-зміст INTRO у програмі навчання
Ми почали з ідеї, плану і prompt. А тепер бачимо готовий слайд-зміст, з якого можна переходити до частин навчання.
Цей слайд показує, що зі звичайного prompt може народитися навігація цілої програми навчання.
Розділ 1 · Що це
🪴
</>VIBECODING
⚡CODE IS MY SUPER POWER
AI Чат
🧑Хочу простий сайт про космос 🚀
🤖Окей! Створюю index.html, style.css, script.js…
🧑Додай кнопку «Почати» і зорі ✨
🤖Готово! Натисни / click, щоб подивитись 👀
1Ти пишеш AI простими словами.
2AI створює код за тебе.
3Ти натискаєш і дивишся результат.
4Просиш покращити 🔁
Vibecoding — ти пояснюєш ідею, а AI пише код 😎
Розділ 2 · Можливості
Що ти зможеш зробити
🖥️ My Projects
🌐
Я створюю свій сайт
🎮
Я роблю свою гру
📱
Застосунок для телефона
📚
Програма для навчання
🤖
Власний AI-помічник
📊
Дашборд моїх цілей
💡ТВОЇ ІДЕЇ
</>ТВІЙ КОД
🚀ТВОЄ МАЙБУТНЄ
👑ТВОЇ ПРАВИЛА
ПОЧНИ СВІЙ ШЛЯХ СЬОГОДНІ 🚀
🎯 Анкета героя
Спершу — познайомимось!
Дай відповіді на 5 простих питань.
AI підбере навчання саме під тебе 💪
AI підбере навчання саме під тебе 💪
5 ПИТАНЬ · ТВІЙ ПРОФІЛЬ 🦸
Можна обирати кілька варіантів. За кожну відповідь — XP ⭐
Питання 1 / 5
👆 обери все, що подобається
Що в комп'ютері тобі найцікавіше?
🎮
Ігри
🌐
Інтернет
📊
MS Office
🐍
Python / код
🟥
Roblox
🟩
Minecraft
📱
YouTube / TikTok
🎨🖌️
Графіка / графіті
Питання 2 / 5
Які в тебе фізичні хобі?
👆 обери кілька⚽
Футбол
🏸
Бадмінтон
🚴
Велосипед
🏊
Плавання
💃
Танці
🛹
Скейт
🥋
Єдиноборства
🏓
Теніс
Питання 3 / 5
Улюблені теми у школі?
👆 обери кілька➗
Математика
🌍
Мови
🎨
Мистецтво
📜
Історія
🔬
Наука
🎵
Музика
Питання 4 / 5
У якому стилі ти хочеш створити свій власний сайт навчання Вайбкодингу?
👆 обери один улюблений стиль🕹️
Геймінг
📓
Навчання
💥
Мультики
🎬
Кіно
🐉
Фольклор
Кожен стиль — свій дизайн і подача уроків ✨
Питання 5 / 5
Які теми цікаві для навчання?
👆 обери кілька🇺🇦 🇬🇧 🇩🇪
Мови UKR / ENG / DEU
🤖
Штучний інтелект та IT
⚔️
Фентезі
🤖
Роботи
🐾
Тварини
🌍
Як влаштований світ
⚽
Спорт
🧊
3D простір
✅ Профіль готовий
Ось твій профіль героя!
Повернись і обери відповіді 🙂
Ці відповіді AI використає, щоб підібрати навчання саме під тебе 🎯
Розділ 3 · Чеклист
Що потрібно
Натисни кожен пункт ✓ (за кожен +5 XP)
💻 Комп'ютер Windows
🌐 Інтернет
🧭 Браузер (відкрити / open сайти)
📁 Папка / folder для проєктів
✨ Codex або Claude
🙌 Бажання натискати кнопки
Розділ 4 · Папка та файл
Створи папку для проєкту
Готово до старту: натискай кроки зверху або створи папки руками.
📁
Папка / folder
Відкрити змонтовану коробку LEGO.
📄
Файл / file
Це деталь у коробці.
Розділ 5 · Інструмент
Встанови або відкрий інструмент
🆎
Варіант C
Інший AI coding assistant
Підійде будь-який. Обери один 🙂
Розділ 6 · Перший запуск
Запуск і що таке промпт
1Відкрий Codex / Claude, обери папку проєкту.
2Не бійся багатьох кнопок 😅 Нам треба поле для промпта.
Промпт / prompt — це завдання для AI. Ти пишеш, що хочеш отримати 💬➡️🤖
Розділ 6 · Як виглядає Codex
Відкрив Codex — куди натискати?
👇 натискай по порядку 1 → 2 → 3 → 4
ФайлПравкаВиглядДовідка
1➕ Новий чат
🔍 Пошук
＠ Плагіни
⚡ Автоматизації
📱 Мобільний Codex
📁 My Vibecoding
1 Натисни «Новий чат» і обери папку проєкту 📁
2 Встав / paste промпт у поле внизу
3 Натисни стрілку ↑, щоб надіслати
4 Натисни «Перевірити» → «Прийняти», і AI створить файли ✅
🔥 Розділ 7 · Великий промпт
ТВІЙ ПЕРШІЙ ПРОМТ, ПРОСТО СКОПІЮЙ ДЛЯ КОДЕКСУ
Промпт уже зібрав ТВОЇ відповіді з анкети. Натисни «Скопіювати» і встав / paste в AI 👇
⬇ Твій персональний промпт
🧭
10–15 напрямків
AI підбере, що вчити саме тобі.
📝
20 питань → план
Персональний план у твоєму стилі.
Розділ 8 · Після промпта
Що має з'явитися
✓AI може створити файли та показати код.
✓Може попросити підтвердження.
✓Тисни: «accept», «apply», «create file» або схоже ✅
📄
index.htmlголовна сторінка🎨
style.cssзовнішній вигляд⚙️
script.jsкнопки
Розділ 9 · Відкрий сайт
Як відкрити свій сайт
1Знайди файл index.html у своїй папці.
2Двічі натисни / double click по ньому.
3Сайт відкриється у браузері 🎉
▸🆘 Сайт не відкрився?
Правий клік по index.html → «Відкрити за допомогою» → твій браузер.
🏆 Чекпоінт
🏆
Перша перемога!
Ти щойно створив свій перший сайт. Це вже не гра — це твій світ!
Розділ 10 · Прокачка
Зроби навчання як гру
Тисни картку, щоб скопіювати промпт-покращення
🌗
Теми
🧑🚀
Аватар
🗺️
Карта
⭐
XP
🏅
Рівні
🔆
Стиль
Головне правило: не треба знати все. Треба пояснити, що хочеш — AI допоможе з кодом 🧠
🚀 Фінал · Челендж
Ти можеш грати в чужі світи.
Ти можеш грати в чужі світи.
А можеш створити свій.
За 30 хвилин зроби першу версію того, що хочеш:
⬇ Готовий промпт для Codex
▸ 🆘 Щось не виходить? Тисни сюди
▸«Не бачу папку»
Відкрий «Документи / Documents» зліва. Немає — «Цей комп'ютер» → «Документи».
▸«Не знаю, куди натиснути»
Велике поле для тексту знизу — туди вставляєш промпт. Надіслати — стрілка ↑ / «Send».
▸«AI показав код»
Не лякайся! Шукай «accept» / «apply» / «create file» і тисни. Код збережеться сам.