Вайб-кодинг for dummies: або як зробити до*уя складний проект не заглянувши в код жодного разу

До речі, у Cowork є рідний брат — розширення Claude для Chrome. Воно може робити все що попросите в межах браузеру, причому повністю у фоні — ви можете продовжувати роботу поки Клод шуршить на фонових вкладках, сам клікає де потрібно, гуляє по сайтах та веб-сервісах, ну або можна підглядати за ним, ваші рухи курсору не вплинуть на окремий курсор Клода

Банальний приклад з PPC — він може погуляти по кабінетам GA4 та GTM і наклацати там все що ви йому сказали, причому йому не треба зайвих уточнень, лише озвучити кінцеву мету

Що вміє і чого не вміє розширення для хрома:

⚠️ Розширення бачить усі ваші відкриті вкладки та має доступ до акаунтів, у які ви залогінені

2.2 Plan mode в середовищі Code

Це банальне «думай, а потім роби» у вигляді окремого режиму спілкування з ШІ. Клод спочатку пропонує варіанти реалізації вашої ідеї у вигляді короткого плану і лише потім щось робить

Головна економія в тому, що він не починає робити важку та довгу роботу не уточнивши ключові моменти — і тоді не доводиться переробляти по 10 разів і витрачати на це токени

Ще одна зручна фіча — можна виділити мишкою шматок тексту з плану і конкретно до цього шматка додати уточнення або поставити запитання перед виконанням. Буває що щось забув чи треба переконатись що залізяка тебе зрозуміла — і ось тут це дуже виручає

2.3 Модель

2.4 Глибина аналізу

Окрім моделі, можна окремо регулювати наскільки глибоко Claude думає перед відповіддю. Це не впливає на те яка модель працює — це параметр зусилля, які вона докладає

Рівень зусилля можна додавати командою через слеш до кожного промпта, є прості елементарні питання, а є важкі речі де треба в кінці запиту написати команду ultrathink щоб мозок кипів не у вас, а у Клода

3. Безпека

Оскільки Клод матиме доступ до файлів та командного рядка — він по суті не має глобальних обмежень і теоретично може начудити все що завгодно. Тому потрібно подбати про безпеку ще до початку постановки робочих задач.

Обмеження Claude можна задати вручну — промптом попросити його зарубати собі на носі якісь правила та заборонені дії з вашим проєктом та ПК загалом. Окремо можна розпитати його про безпеку проєкту, щоб планувати його безпечним з самого початку

Наприклад, в проєктах де є чутливі дані, логіни, паролі, особиста інформація — ці дані завжди десь зберігаються. Відповідно потрібно на старті унеможливити несанкціонований доступ до цих даних та максимально їх захистити. Головне — поставити перед ШІ цю задачу і перепровірити все самостійно

4. Розуміння обмежень

Знання ≠ абсолютна можливість реалізувати задумане

На етапі реалізації все завжди впирається в якісь обмеження, тому важливо розуміти їх на самому старті

Ця порада може зекономити вам години або дні часу які б ви могли помилково витратити на реалізацію задач, які чисто технічно неможливо реалізувати. І навіть якщо сам ШІ пропонує вам якісь варіанти рішень на старті — він може навіть не підозрювати про наявність обмежень. Тому наша задача — витягнути їх на поверхню і вбудувати в пайплайн

Банальний приклад: я 4 години будував інструмент який буде обробляти потрібні мені дані, а в підсумку виявилось що ці дані в принципі неможливо витягнути тим способом на який я розраховував. Після цього я знайшов інший спосіб і реалізував задумане за 10 хвилин, набагато простіше та швидше — думав роз*бу монітор

5. Архітектура та модульність

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

Важливо попросити ШІ описати всі плюси та мінуси запропонованих ним архітектур та їх обмеження. В ідеалі використовувати модульний підхід, щоб одна частина мінімально впливала на іншу — це дозволить ШІ не перелопачувати тонни коду, а одразу розуміти де може лежати потрібна частина і працювати лише з нею

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

6. Змінні та команди

На старті має сенс проіндексувати собі ключові поняття і дати їм короткі назви/змінні, щоб при спілкуванні з ШІ замість довгих фраз оперувати короткими термінами

Наприклад, замість фрази «візьми ключові слова з трафіку у основній робочій області та перенеси їх до області мінус-слів» я можу написати «перенеси KW з main у BL» — і система зрозуміє мене, тому що я домовився з нею про це раніше

Це схоже на власну мову програмування з абсолютно вільним синтаксисом в якому неможливо помилитись (лол, гуманітарії перевинайшли для себе програмування)

Другий аспект це створення команд — наборів інструкцій, щоб не писати їх кожен раз. Одна кодова фраза може замінити інструкцію розміром з лист А4

7. Логування та дебаг

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

Звісно, він вміє все це і без логів — але чим більше він буде думати та шукати, тим більше токенів він спалить, тому це чисто питання економії часу та токенів

8. Делегування або “автоматизуй автоматизацію”

Ок, а якщо взагалі не ясно з чого почати і є лише мета?

Делегуйте це AI

Це в самурая немає цілі, а в нас скоріше за все вона є. Просто спитайте Клода які варіанти досягнення цілі є та які обмеження для цього існують

Я тепер майже завжди прошу його самостійно написати майстер-промпт під велику задачу. Кінцеве ТЗ формую не я, а ШІ — сам для себе, і робить це ідеально — я лише накидую ідеї, побажання та описую ключові моменти

Якщо ви згодували Клоду вашу ідею, уточнили в нього всі обмеження, він видав план і вас все влаштовує — приймайте план і хай воно робе

9. Правки

Вірогідність того що Клод зробить все ідеально з першого разу реально висока, в більшості випадків він зробить щось ідеально-середнє по палаті. Але часто бувають ситуації коли хочеться внести правки, додати щось нове чи покращити існуюче.

Часто бачив пораду що ШІ не варто давати задачі пачками — начебто це не економно витрачає токени і загалом поганий підхід в розробці. Але є нюанс – мова саме про великі логічні блоки

Ясно що немає сенсу скакати одразу по всьому функціоналу намагаючись за один раз переписати логіку всіх функцій. Але якщо ми чітко знаємо що область застосування правок це умовний один екран додатку/сайту і на цьому екрані ми працюємо з конкретною функцією — ми можемо накидати всі задачі одним повідомленням, не дроблячи кожну дрібну правку на окремий діалог який буде жерти токени на відповіді

Якщо правки дрібні і стосуються одного логічного модуля — давайте їх пачками. Якщо правка стосується різних модулів одного великого рішення — краще робити їх послідовно

Ще раз, але коротко:

✅ Середовище — Code
✅ Вмикаємо Plan mode перед виконанням
✅ Модель — Sonnet (Opus лише якщо Sonnet не впорався)
✅ З’ясовуємо оптимальну архітектуру та дізнаємось всі обмеження до старту
✅ Готуємо пам’ять в межах проєкту + власні команди + прописуємо правила безпеки
✅ Просимо клода написати ідеальне ТЗ
✅ Поїхали робити магію

По ходу спілкування з Клодом ви почнете дізнаватись нові терміни з програмування, почнєте розуміти архітектуру, технології і т.п. — якщо вам цікаві ці речі, життя повинно заграти новими фарбами

Погодьтесь, наявність власного розробника який майже цілодобово працює на вас за 20$/місяць відкриває дійсно великі можливості

В наступних статтях постараюсь описати реальні прикладні кейси використання ШІ в PPC

Якщо сподобалась стаття, буду вдячний за зворотній зв’язок в моєму тг-каналі t.me/keyword_digital