Проєктування і чорнова версія

Генерація та фіксація чорнової версії

Створення проєкту в AI-середовищі, конструювання першого системного промпту, генерація чорнової версії, верифікація через Live Preview та збереження знімка стану

Генерація та фіксація чорнової версії

🎯 Мета розділу

Навчитися створювати чистий робочий простір для нового проєкту в AI-середовищі.
Сконструювати системний первинний промпт, що містить повний контекст, бізнес-правила та обмеження.
Здійснити першу керовану генерацію чорнової версії (Draft Version).
Провести зіставлення отриманого інтерфейсу з початковим архітектурним планом і зафіксувати перший знімок стану проєкту.

🔑 Ключові терміни

Чорнова версія (Draft Version): базовий прототип застосунку, що містить каркас інтерфейсу та заготовки елементів введення, але ще може мати функціональні недоліки.
Первинний системний промпт (Initial System Prompt): установчий запит до AI, який задає роль, контекст продукту, технологічні межі та правила поведінки асистента.
Невідповідність вимогам (Discrepancy / Gap): розбіжність між запланованою в архітектурі логікою та фактичним результатом кодогенерації.
Знімок стану (Snapshot): точка відновлення проєкту в хмарній IDE, що фіксує поточний вміст усіх файлів.

Підготовка робочого простору проєкту

Початок роботи над новим цифровим продуктом вимагає створення ізольованого робочого простору. Незалежно від того, яку платформу ви використовуєте (Bolt.new, Replit або подібні), першим кроком є ініціалізація порожнього веб-проєкту без зайвих шаблонів.

Вкрай важливо перевірити, щоб у створеному проєкті були відсутні сторонні непотрібні файли: конфігурації бекенд-серверів, бази даних чи важкі сторонні залежності. Чистий старт гарантує, що AI зосередиться виключно на коді вашого продукту, а не витрачатиме токени контекстного вікна на аналіз стороннього коду.

Обирайте простий клієнтський стек: стандартний HTML5, модульний JavaScript (або чистий TypeScript) та Vanilla CSS. Це забезпечить миттєве завантаження в Live Preview та абсолютну автономність вашого застосунку.

Конструювання первинного системного промпту

Перше повідомлення, яке ви надсилаєте у вікно діалогу з AI, є найважливішим у житті проєкту. Воно закладає фундамент, визначає правила та створює ментальну модель для мовної моделі.

Професійний системний промпт повинен містити п'ять обов'язкових блоків:

Роль і контекст: ким виступає AI (досвідчений фронтенд-інженер) та яку задачу ми розв'язуємо.
Опис продукту: назва застосунку, користувач та ключова цінність.
Функціональний обсяг першої версії: точний перелік елементів введення, кнопки та блок результату.
Технологічні обмеження (Non-Goals): категорична заборона серверної частини, БД, авторизації та сторонніх API.
Вимога до виконання: прохання згенерувати спершу зрозумілу статичну верстку з базовою стилізацією без надмірної складності.

Ти досвідчений frontend-розробник. Ми створюємо клієнтський веб-додаток: 
«Калькулятор часу фокусованого читання для студентів».

Функціональні вимоги першої версії:
1. Одне поле числового введення: кількість сторінок навчального матеріалу.
2. Випадний список зі складністю тексту: «Легкий (художній)», «Середній (стаття)», «Високий (підручник/монографія)».
3. Контрастна кнопка «Розрахувати час».
4. Блок відображення результату з акцентним числом хвилин та рекомендацією щодо перерв.
5. Блок помилки, якщо користувач залишив поле порожнім або ввів число менше 1.

Технічні обмеження:
- Суто клієнтська розробка (HTML, CSS, JavaScript).
- Жодного бекенду, бази даних чи авторизації.
- Акуратний сучасний дизайн на світлому фоні з хорошою читабельністю.

Згенеруй базову чорнову версію застосунку.

Послідовність генерації та перевірки чорновика

Процес створення чорнової версії розгортається за чіткою послідовністю дій між розробником, асистентом та середовищем виконання:

Генерація та фіксація чорнової версії

Loading diagram...

Зіставлення результату з планом: фіксація розбіжностей

Після того як AI згенерував код і в Live Preview з'явився інтерфейс, категорично забороняється одразу приймати результат як готовий. Необхідно провести формальне зіставлення фактичного результату з вашим початковим планом.

Типові розбіжності, які виникають на етапі чорновика:

Зайві елементи: AI додав додаткові кнопки, поля або посилання, про які ви не просили.
Відсутність валідації: форма дозволяє натискати кнопку при порожніх полях і виводить NaN хвилин.
Проблеми зі шрифтами чи відступами: текст на кнопках прилипає до меж або елементи зміщуються на вузьких екранах.
Стани інтерфейсу: блок результату видно від самого початку з нулями замість того, щоб бути прихованим.

Зафіксуйте всі виявлені розбіжності у вигляді простого текстового списку в окремому блокноті чи файлі нотаток. Не намагайтеся виправити їх усі в одному наступному запиті. У Модулі 2 ми розберемо, як поетапно усувати ці дефекти через ітеративну стратегію завдань.

Збереження контрольної точки (Snapshot)

Завершальним обов'язковим кроком першого модуля є створення знімка стану (Snapshot або Commit).

Більшість хмарних середовищ мають спеціальну кнопку в інтерфейсі («Save Version», «Create Snapshot» або інтеграцію з Git). Дайте цьому знімку зрозумілу назву, наприклад: v0.1-draft-created. Тепер ви маєте безпечну точку відліку: хоч би які експерименти проводилися на наступних заняттях, ви завжди зможете повернутися до цього стабільного чорновика за один клік.

Практичні завдання та запитання для самоконтролю

Edit this pageorReport an issue

Архітектура інтерфейсу та стани застосунку

Проєктування екранів, елементів взаємодії, моделі станів інтерфейсу (Initial, Success, Error) та декомпозиція розробки на ізольовані ітерації

Уточнення контексту проєкту для AI

Аналіз результатів чорнової версії, фіксація незмінних компонентів коду, формалізація обмежень та критерії готовності першої робочої версії