Blueprint у вайбкодингу: від ідеї до плану за один промпт

Що таке blueprint простими словами

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

А тепер нормальний підхід. Спершу креслення. На папері вирішили: де фундамент, де стіни, що будуємо першим, що від чого залежить. І тільки потім - молотки. Оце саме креслення для коду й називається blueprint Blueprint (англ. «креслення, синька») - покроковий план проєкту: одна фраза-ідея розбивається на маленькі зрозумілі кроки, кожен зі своєю інструкцією. Спершу план - потім код. .

Навіщо вайбкодеру blueprint

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

Blueprint лікує це так:

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

Різниця між «ШІ зліпив мені незрозумілу кашу» і «ШІ зібрав мені робочий застосунок» - це часто різниця між «я попросив усе одразу» і «у нас було креслення». План - це і є мистецтво правильно просити.

Як Claude будує план: 5 кроків кресляра

Запускаєш blueprint - і Claude не кидається писати код. Він проходить пʼять етапів, як нормальний архітектор перед будівництвом. По черзі.

1. Розвідка ділянки

Спершу агент оглядає «ділянку»: що вже є в проєкті, які файли, які нотатки й правила. Креслити дім, не знаючи ґрунту? Так собі ідея.

2. Дизайн: ріжемо ідею на шматки

Ідею розбивають на кроки розміром з один шматок роботи (зазвичай їх 3-12). Для кожного кроку вирішують: що від чого залежить, що можна робити паралельно, а що строго по черзі, і як відкотитися назад, якщо щось піде не так.

3. Чернетка плану й контекст-бриф на кожен крок

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

4. Перевірка другим агентом

Готовий план віддають іншому, прискіпливішому агенту. Він читає вʼїдливо: чи все врахували, чи правильний порядок, чи немає знайомих грабель. Критичні діри лагодять до початку будівництва, а не після.

5. Реєстрація плану в проєкті

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

Залежності й паралель: чому порядок кроків вирішує

Головна сила плану - він бачить залежності Залежність - це «А не можна зробити раніше за Б». Наприклад, не можна фарбувати стіни, яких ще немає. План вибудовує кроки в правильному порядку. . Двері не навісиш, поки немає стіни. Оплату не прикрутиш, поки немає кошика. Порядок тут не примха - це фізика будівництва.

А ще план помічає, що деякі кроки одне одному не заважають, і пускає їх паралельно. Сторінка «Про нас» і сторінка «Контакти» ніде не перетинаються - отже, можна робити разом. Менше очікування, більше діла.

Приклад із життя: магазин стикерів без плану

Ти пишеш агенту: «зроби мені магазин з продажу стикерів». Він бадьоро стартує й сипле файлами на все одразу: каталог, кошик, оплата, адмінка. Через годину - сюрприз. Кошик не дружить із каталогом, оплату приробили раніше за вхід, половину вже треба переписувати. Будова стала.

Що пішло не так? Ти попросив весь дім однією фразою, без креслення.

А ось вайбкодер, який уже обпікся, діє інакше - спершу просить план:

Не пиши поки код. Спершу склади покроковий план проєкту - інтернет-магазин стикерів.
Вимоги до плану:

Розбий усе на маленькі кроки, кожен розміром з один зрозумілий шматок роботи.
Для кожного кроку напиши: що зробити, що від чого залежить і як перевірити, що крок готовий.
Вкажи, які кроки можна робити паралельно, а які строго по черзі.
Збережи план у файл PLAN.md, щоб я міг повернутися до нього завтра.
Покажи план і зупинись - чекай мого «ок», і тільки потім починай перший крок.

Що робити, коли план змінюється в процесі

План - не догма. У процесі будівництва зʼясовується: крок треба розбити надвоє, вставити новий, пропустити або поміняти місцями. І це нормально. Гарний план змінюється акуратно - з поміткою «що і чому виправили», щоб ти не загубив нитку.

Часті помилки в роботі з blueprint

• Просити весь проєкт однією фразою. Агент захлинеться. Спершу попроси план.
• Кидатися в код без креслення. Переробка збудованого - це години, правка плану - хвилини.
• Робити blueprint для дрібниці. Колір кнопки планувати не треба - це довше, ніж просто його змінити.
• Кроки-велетні. «Зроби весь магазин» перевірити не можна. Ріж на кроки розміром з один зрозумілий шматок роботи.
• Тримати план лише в чаті. План має лежати у файлі (PLAN.md), інакше після перезапуску його просто немає.
• Ігнорувати залежності. Приробив оплату раніше за кошик - готуй час на переробку. Порядок вирішує.