Вайбкодинг
Як змусити нейромережу писати тобі код і не скотитися в хаос. Наш флагман, побудований на базі ECC.
0 Що таке вайбкодинг
Що таке вайбкодинг: як створювати сайти без коду
Вайбкодинг простими словами: ти пояснюєш задачу словами, а ШІ пише код. Хто такий вайбкодер, чим він відрізняється від програміста і як почати вже сьогодні.
1 Швидкий фіксер
ШІ-агент проти чат-бота: у чому різниця простими словами
Чим ШІ-агент відрізняється від чат-бота: чат-бот говорить, агент діє руками - створює файли, запускає код, лагодить помилки. Розберися - і вайбкодинг стане зрозумілим.
1 Швидкий фіксер 2 Сайт в один клік
Інструменти вайбкодингу: чим писати код з ШІ новачку
Чат-боти, редактори з ШІ, агенти в терміналі та конструктори сайтів - який інструмент вайбкодингу обрати новачку і чим вони реально відрізняються. Без води.
1 Швидкий фіксер 2 Сайт в один клік
1 Як думає агент
Як працює ШІ-агент простими словами: харнес, контекст і памʼять
Як влаштований ШІ-агент зсередини: харнес, контекстне вікно, токени та памʼять. Зрозумілий розбір для вайбкодерів - щоб Claude і GPT слухалися з першого разу, а не з десятого.
3 Годувальник доками 4 Гід-напрямний 5 Майже архітектор
Токени й ціна ШІ: як не розоритися на нейромережі
Що таке токени, скільки коштує ШІ і як платити за нейромережу копійки: обираємо глибину відповіді, рахуємо токени, ловимо витоки бюджету та підбираємо модель під задачу.
2 Сайт в один клік 3 Годувальник доками 4 Гід-напрямний
Памʼять ШІ-агента: як Claude запамʼятовує тебе між сесіями
Як працює памʼять ШІ-агента: що таке інстинкти, впевненість і область памʼяті, чому довга памʼять агента живе у файлах, а не в моделі, і як її налаштувати.
4 Гід-напрямний 5 Майже архітектор
Компакт памʼяті агента: коли чистити контекст і нічого не втратити
Компакт памʼяті агента простими словами: що стискається й губиться, що виживає, і в який момент чистити контекст безпечно, а в який - постріл собі в ногу.
3 Годувальник доками 4 Гід-напрямний
Агент затупив: як знайти причину і полагодити ШІ-агента
Агент зациклився, ходить по колу чи меле дурниці? Розбираємо за чек-листом, чому тупить ШІ-агент, і лагодимо причину - спокійно, як механік, а не панікер.
4 Гід-напрямний 5 Майже архітектор
Автономні цикли агента: як ШІ працює сам
Автономні цикли ШІ-агента простими словами: конвеєр із кроків, файл-місток для памʼяті, стоп-кран від зайвих витрат і крок-прибирання. Запусти агента на ніч без сюрпризів.
4 Гід-напрямний 5 Майже архітектор
2 Як правильно просити
Як написати промпт для ШІ-агента з першого разу
Чому ШІ-агент робить не те, що просили? Вчимося писати промпт за схемою ЩО-ДЕ-ГОТОВО-НЕ МОЖНА й отримувати результат з першого разу, а не з десятого.
1 Швидкий фіксер 2 Сайт в один клік
Спершу шукай, потім пиши: промпт, який економить години
Звичка вайбкодера «спершу шукай, потім пиши»: як змусити ШІ-агента шукати готові бібліотеки та рішення до написання коду - і економити години, гроші та нерви.
1 Швидкий фіксер 2 Сайт в один клік
Regex чи нейромережа: як розібрати текст і не злити бюджет
Regex чи нейромережа для розбору тексту? Вчимося обирати: дешеві правила для рівних рядків, нейромережа для хаосу і гібрид, який ріже витрати на 95%.
3 Годувальник доками 4 Гід-напрямний
Blueprint у вайбкодингу: від ідеї до плану за один промпт
Blueprint у вайбкодингу - це план проєкту з однієї фрази-ідеї. Вчимося різати задачу на кроки, бачити залежності й просити агента так, щоб він не зліпив кашу.
2 Сайт в один клік 3 Годувальник доками
3 Робимо красиво
Дизайн без шаблону ШІ: як прибрати нейро-вигляд сайту
Чому ШІ малює однакові фіолетові сайти з гігантськими літерами і як одним брифом - дизайн-напрямом - отримати дизайн із характером, а не шаблон.
2 Сайт в один клік 3 Годувальник доками 4 Гід-напрямний
Як зробити інтерфейс приємним: дрібниці, що вирішують усе
З чого складається відчуття «дорого» в інтерфейсі: відступи, тіні, скруглення, відгук кнопок, зона натискання. І як попросити все це в ШІ простими словами.
2 Сайт в один клік 3 Годувальник доками
Анімації на сайті: які допомагають, а не бісять
Навіщо сайту анімації і які реально допомагають, а які бісять і гальмують. Тривалість, плавність, доступність - і як попросити ШІ зробити рух правильно.
3 Годувальник доками 4 Гід-напрямний
React і Next.js простими словами: компоненти, пропси, стан
React і Next.js на пальцях для вайбкодера: що таке компоненти, пропси і стан, чим сервер відрізняється від браузера і якими промптами просити в агента акуратний сайт.
3 Годувальник доками 4 Гід-напрямний 5 Майже архітектор
Liquid glass: скляні кнопки iOS 26 через промпт агенту
Liquid glass з iOS 26 простими словами: з чого зібрана скляна кнопка-скло і як попросити ШІ-агента зробити такі напівпрозорі кнопки та панелі без перебору.
3 Годувальник доками 4 Гід-напрямний
SEO для новачків: як тебе почнуть знаходити в Google
SEO простими словами: чому сайт без оптимізації не знаходять у Google, як налаштувати title, швидкість і структуру сторінок та підняти сайт у пошуку.
2 Сайт в один клік 3 Годувальник доками
4 Щоб не зламалося
Зрозумілий код для вайбкодера: імена, DRY, KISS
Як просити в ШІ-агента зрозумілий код: промовисті імена, принципи DRY і KISS, без магічних чисел. Простіше читати, дешевше змінювати, рідше щось ламається.
2 Сайт в один клік 3 Годувальник доками
Обробка помилок у коді: щоб нічого не падало мовчки
Обробка помилок для вайбкодерів: зрозуміле повідомлення людям, повний лог тобі, розумні повтори запитів і готовий промпт, щоб агент не ховав збої.
3 Годувальник доками 4 Гід-напрямний
Що таке тести і TDD простими словами
Тести і TDD простими словами: навіщо писати перевірку до коду, як працює цикл червоний-зелений і чому тести ловлять баги раніше, ніж їх побачить користувач.
3 Годувальник доками 4 Гід-напрямний 5 Майже архітектор
Перевірка перед запуском сайту: цикл верифікації агента
Перевірка перед запуском сайту: цикл верифікації з 6 кроків - збірка, типи, лінтер, тести, безпека, перегляд змін. Щоб сайт не падав на першому ж кліку.
3 Годувальник доками 4 Гід-напрямний
E2E-тести простими словами: робот тестує сайт замість тебе
E2E-тести простими словами: навіщо вайбкодеру робот, що сам тицяє кнопки на сайті, як написати E2E на Playwright через Claude і нічого не зламати перед запуском.
3 Годувальник доками 4 Гід-напрямний
Регресія у вайбкодингу: тест на баг, щоб ШІ не ламав
ШІ лагодить баг, за годину ламає знову, і так по колу. Як один автотест на регресію ловить те, чого сам ШІ впритул не бачить. Гайд для вайбкодерів.
3 Годувальник доками 4 Гід-напрямний
Production-аудит: чи готовий проєкт до реальних користувачів
Production-аудит для вайбкодера: чим «працює в мене» відрізняється від «працює у всіх», які зони бʼють першими і як змусити ШІ дати вердикт можна/не можна.
3 Годувальник доками 4 Гід-напрямний 5 Майже архітектор
Деплой сайту: як викласти в інтернет без збоїв
Деплой простими словами: як викочувати оновлення без падінь, ховати секрети у змінних оточення, робити health-check і відкочуватися назад за секунди.
3 Годувальник доками 4 Гід-напрямний
5 Безпека
Безпека сайту для вайбкодера: 4 діри, які треба закрити
Як захистити сайт від злому, якщо ти не програміст. Секрети в .env, перевірка вводу й файлів, права доступу на сервері, безпечні логи - і промпт для security-review.
3 Годувальник доками 4 Гід-напрямний 5 Майже архітектор
Безпека ШІ-агента: як просканувати налаштування на дірки
Сам ШІ-агент може стати діркою в безпеці: паролі, зайві права, prompt injection. Покажу, як однією командою просканувати його налаштування і закрити ризики.
2 Сайт в один клік 3 Годувальник доками
Хуки для ШІ-агента: захист від небезпечних команд і витоків
Хуки і hookify-правила простими словами: як поставити агенту автоматичного охоронця, який ловить rm -rf, витік секретів і небезпечні команди ще до виконання.
3 Годувальник доками 4 Гід-напрямний
6 Рої та автоматизація
Команда ШІ-агентів: як запустити кілька агентів одразу
Команда ШІ-агентів простими словами: як запустити кілька агентів паралельно, роздати їм ролі, звести звіти в один результат і не потонути в шумі.
4 Гід-напрямний 5 Майже архітектор
Паралельна робота з ШІ-агентом: як прискорити вайбкодинг
Паралельне виконання задач зі ШІ-агентом: які шматки коду можна робити разом, що строго по черзі і як не зловити конфлікт двох агентів в одному файлі.
4 Гід-напрямний 5 Майже архітектор
Рій ШІ-агентів: як запустити кілька агентів одразу
Рій ШІ-агентів: як запустити кілька агентів на один проєкт паралельно. Git worktree, панелі dmux і бригадир DevFleet - без каші та бійок за файли.
5 Майже архітектор 6 Рефакторер
Рада з чотирьох ШІ: як ухвалити складне рішення
Прийом «рада» (council): як змусити ШІ сперечатися сам із собою з чотирьох ролей і ухвалити складне рішення усвідомлено, а не схопити перший-ліпший варіант.
3 Годувальник доками 4 Гід-напрямний
Особиста ШІ-ОС на Claude Code: памʼять і розклад
Особиста ШІ-ОС на Claude Code: памʼять у файлах, команда агентів-спеціалістів і завдання за розкладом. Як зібрати з чотирьох папок без баз і серверів.
5 Майже архітектор 6 Рефакторер
Eval-first: спершу перевірки, потім код з ШІ
Eval-first простими словами: чому сильні вайбкодери спершу пишуть перевірки, а потім кличуть ШІ. Capability і regression, метрика pass@k, шматки по 15 хвилин.
4 Гід-напрямний 5 Майже архітектор
7 Суперсили
Глибоке дослідження інтернету: як ШІ шукає факти
Глибоке дослідження (deep research): як змусити ШІ шукати десятки джерел, читати їх повністю, перевіряти факти й приносити звіт із посиланнями та датами.
1 Швидкий фіксер 2 Сайт в один клік 3 Годувальник доками
Розумний пошук для ШІ-агента: нейропошук Exa та перевірка фактів
Розумний пошук для ШІ-агента: підключаємо нейропошук Exa та ітеративний пошук, щоб агент перевіряв факти, шукав свіжий код і не фантазував, а посилався на джерела.
3 Годувальник доками 4 Гід-напрямний
Скрапер на ШІ: бот сам збирає дані із сайтів
Як зібрати бота-скрапера, який сам обходить сайти, тягне дані, ШІ їх сортує і складає в таблицю - безкоштовно, на Gemini Flash та GitHub Actions.
3 Годувальник доками 4 Гід-напрямний
Бази даних для новачка: таблиці, індекси та міграції
Що таке база даних простими словами: таблиці, індекси, міграції та типи колонок. Розбираємо головні граблі вайбкодера - і як їх обійти заздалегідь.
3 Годувальник доками 4 Гід-напрямний 5 Майже архітектор
Генерація картинок, відео та звуку через ШІ і fal.ai
Як генерувати картинки, відео та звук нейромережею через fal.ai прямо в чаті з агентом. Які моделі обрати, як писати промпт і не спалити бюджет.
1 Швидкий фіксер 2 Сайт в один клік 3 Годувальник доками
HTML-презентація в браузері: слайди без PowerPoint
Як зробити презентацію в браузері без PowerPoint і дизайнера: один HTML-файл, анімації, гортається стрілками, не розвалюється на проєкторі. Промпт усередині.
2 Сайт в один клік 3 Годувальник доками
MCP для агента: що це і як підключити інструменти
MCP простими словами: єдиний розʼєм, через який ШІ-агент отримує інструменти, дані та шаблони. Навіщо це вайбкодеру, як підключити сервер і не вскочити в халепу.
4 Гід-напрямний 5 Майже архітектор 6 Рефакторер
Гарний код на Python: зрозумілі імена, типи, помилки
Що таке гарний код на Python для вайбкодера: зрозумілі імена, підказки типів, чесна обробка помилок і пітонічний стиль. І чому гарний код агент лагодить легко, а потворний ламає.
2 Сайт в один клік 3 Годувальник доками 4 Гід-напрямний
Як писати тексти для сайту живою мовою (а не як робот)
Як писати тексти для сайту живою мовою: з чого почати абзац, які слова - сміття, як змусити ШІ писати по-людськи й не вигадувати факти. На пальцях.
1 Швидкий фіксер 2 Сайт в один клік
База знань для ШІ-агента: як дати йому памʼять
Як зібрати ШІ-агенту робочу базу знань: де зберігати факти, рішення та нотатки, щоб він памʼятав їх після перезапуску й не перетворював памʼять на смітник.
3 Годувальник доками 4 Гід-напрямний
План курсу
- Глава 0. Що таке вайбкодинг
- Глава 1. Як думає агент
- Глава 2. Як правильно просити
- Глава 3. Робимо красиво
- Глава 4. Щоб не зламалося
- Глава 5. Безпека
- Глава 6. Рої та автоматизація
- Глава 7. Суперсили