Побудувати й розгорнути вебзастосунок сьогодні можна майже без ручного написання коду — за умови, що правильно налаштоване середовище. У новому туторіалі каналу Tech With Tim автор показує, як підготувати повноцінний AI‑first стек для розробки: від встановлення Claude Code до інтеграції з редактором Cursor і розширенням Hostinger Connector для подальшого деплою.
Цей матеріал зосереджується саме на першому етапі — налаштуванні інструментів. Йдеться не про сам застосунок, а про те, як підготувати робоче місце так, щоб штучний інтелект став центральним елементом процесу розробки.
Платний вхід у світ Claude Code: що потрібно знати перед стартом
Claude Code позиціонується як інструмент для розробників, який поєднує можливості великої мовної моделі з глибокою інтеграцією у файлову систему, термінал і git‑репозиторій. Однак перший практичний нюанс, з яким стикається користувач, — це платний доступ.
Для роботи Claude Code потрібна преміум‑підписка Claude. Без неї інструмент просто не запуститься. Це відрізняє його від багатьох «легких» AI‑чатів, які мають безкоштовні тарифи з обмеженнями. Тут модель орієнтована на серйозні робочі навантаження — від генерації коду до керування файлами та деплоєм, — тож вхідний бар’єр одразу прив’язаний до платної підписки.
Після оформлення підписки користувач отримує доступ до сторінки завантаження Claude Code на сайті Anthropic. Звідти доступні два основні варіанти:
по‑перше, десктопний застосунок із графічним інтерфейсом, який працює як окрема програма;
по‑друге, термінальна версія, що встановлюється через команду curl, скопійовану з офіційного сайту.
Саме другий варіант стає ключовим у демонстрованому робочому процесі. У терміналі відкривається більше можливостей для автоматизації, інтеграції з git і деплою, а також зручніше керувати командами, які Claude Code пропонує виконати.
Термінал чи десктоп: чому ставка робиться на командний рядок
Claude Code може працювати у двох режимах: як окремий десктопний застосунок і як термінальний інструмент, що запускається командою claude. Обидва варіанти використовують ті самі моделі, але відрізняються інтерфейсом і сценаріями використання.
Десктопна програма дає звичний для користувача інтерфейс: вікно, вкладки, окремий «код‑режим». У ньому зручно брейнштормити, обговорювати ідеї, формулювати завдання, не відволікаючись на структуру проєкту. Це радше «AI‑ноутбук» для мислення та планування.
Термінальна версія, навпаки, вбудовується безпосередньо в середовище розробника. Після встановлення через curl (команда на кшталт curl -fsSL ... із сайту Claude) інструмент запускається простою командою claude в будь‑якому каталозі. Далі користувач автентифікується у своєму акаунті, і Claude Code отримує доступ до локальних файлів, може пропонувати зміни, створювати нові файли, запускати команди, працювати з git.
У розглянутому робочому процесі саме термінальна версія обрана як основна. Причина — майбутній деплой. Коли AI‑агент має працювати з командами, що стосуються збирання, запуску й розгортання застосунку, термінал стає природним середовищем. Тут простіше:
керувати залежностями;
запускати скрипти;
виконувати команди, які Claude Code пропонує для деплою;
відслідковувати логи й помилки в реальному часі.
Водночас Claude Code не обмежується лише «чорним екраном». У поєднанні з редактором Cursor він може відкриватися як панель усередині IDE, зберігаючи можливість працювати і в терміналі, і в графічному інтерфейсі. Це дає розробнику гнучкість: для складних деплой‑сценаріїв — термінал, для щоденної роботи з кодом — інтегрований UI в редакторі.
Cursor як центр AI‑розробки: безкоштовний форк VS Code з вбудованим ШІ
Другий ключовий елемент середовища — редактор коду. У туторіалі використовується Cursor, безкоштовний форк Visual Studio Code з вбудованими AI‑функціями. Для розробника, знайомого з VS Code, поріг входу практично нульовий: інтерфейс, структура меню, робота з файлами — усе майже ідентичне.
Cursor доступний для Windows, macOS і Linux, завантажується безкоштовно з офіційного сайту і встановлюється як звичайний десктопний застосунок. Після першого запуску користувач бачить знайому панель із файловим деревом, вкладками редактора, терміналом і панеллю розширень.
У демонстраційному проєкті створюється нова директорія з промовистою назвою my site. Це окремий порожній каталог, відкритий у Cursor як робоча папка. Саме в ній згодом з’являться всі файли майбутнього застосунку — від конфігурацій до компонентів інтерфейсу.
На цьому етапі важливо, що Cursor виконує роль не лише текстового редактора, а й «вікна» у весь AI‑орієнтований стек. Через нього:
переглядаються й редагуються файли, які генерує Claude Code;
налаштовуються розширення, що відповідають за інтеграцію з Claude та Hostinger;
відкривається панель Claude Code безпосередньо в інтерфейсі редактора.
Фактично Cursor стає центральною точкою, де сходяться локальний код, AI‑агент і майбутня інфраструктура деплою.
Як інтегрувати Claude Code в Cursor: розширення, панелі та режими роботи
Щоб Claude Code працював безпосередньо з файлами проєкту в Cursor, потрібно встановити відповідне розширення. Це робиться через стандартний для VS Code механізм: у лівій панелі редактора відкривається розділ Extensions (іконка з «пазлами»), у пошуку вводиться «Claude Code», після чого розширення встановлюється одним кліком.
Після інсталяції в інтерфейсі Cursor з’являється іконка Claude Code. Натиснувши на неї, користувач відкриває окрему панель із можливістю створити «нову сесію». Саме в цій панелі AI‑агент спілкується з розробником, ставить уточнювальні запитання, пропонує зміни у файлах і виконує дії в проєкті.
У сесії доступні кілька важливих режимів роботи з кодом:
режим «edit automatically», коли Claude Code самостійно вносить зміни у файли без додаткового підтвердження;
режим «ask before edits», за якого кожна пропозиція змін потребує схвалення користувача;
«plan mode», орієнтований на попереднє планування й побудову кроків перед безпосереднім редагуванням.
Ці режими визначають ступінь автономності AI‑агента. Для початківців логічно залишити «edit automatically» у поєднанні з уважним переглядом змін у git або через диф‑інструменти редактора. Для складніших або критичних проєктів більш контрольований режим із підтвердженням кожної правки може бути безпечнішим.
Ще один параметр, який впливає на поведінку Claude Code, — рівень «effort». Його можна налаштувати в інтерфейсі сесії. Вищий рівень означає, що модель витратить більше обчислювальних ресурсів, працюватиме довше й коштуватиме дорожче в межах підписки, але потенційно видасть детальніший і продуманіший результат. У демонстраційному середовищі обирається середній рівень — компроміс між якістю, швидкістю й вартістю.
Окремо варто згадати вибір моделі. За замовчуванням використовується Claude 4.7 Opus — флагманська, найпотужніша й водночас найдорожча модель. У налаштуваннях сесії її можна змінити на Sonnet або Haiku. Sonnet зазвичай розглядається як більш доступний за ціною варіант із хорошим балансом продуктивності, а Haiku — як максимально економний режим для простіших завдань. Така гнучкість дозволяє адаптувати середовище під бюджет і характер проєкту.
Hostinger Connector: як підготувати редактор до деплою ще до написання коду
AI‑орієнтоване середовище розробки в цьому випадку не обмежується лише генерацією коду. Важливо, щоб той самий інтерфейс, у якому створюється застосунок, міг керувати й його розгортанням. Для цього в Cursor встановлюється ще одне розширення — Hostinger Connector.
Процес інсталяції аналогічний: у розділі Extensions користувач шукає «Hostinger», обирає «Hostinger Connector» і натискає «Install», підтверджуючи довіру до видавця. Після цього в редакторі з’являються інструменти, які дозволять пізніше підключити проєкт до хостинг‑акаунта й виконувати деплой безпосередньо з IDE.
У демонстраційному сценарії Hostinger згадується як платформа, на якій у підсумку буде розгорнуто застосунок. Важливий момент: розширення встановлюється ще до того, як написано перший рядок коду. Це підкреслює підхід, у якому деплой розглядається не як «останній крок», а як невід’ємна частина середовища розробки.
У поєднанні з Claude Code це відкриває перспективу, коли AI‑агент не лише генерує файли й структурує проєкт, а й допомагає налаштовувати деплой‑процес, працюючи через той самий редактор і ті самі розширення. Для розробника це означає менше контекстних перемикань між різними інструментами й панелями керування.
Планування замість хаосу: чому AI‑середовище починається зі spec.md
Після того як Claude Code інтегровано в Cursor, а розширення для деплою встановлено, середовище технічно готове до роботи. Однак наступний крок у продемонстрованому процесі — не миттєва генерація коду, а формування чіткого плану.
У прикладі створюється простий, але показовий проєкт: персональна портфоліо‑лендінг‑сторінка для Tech With Tim. Замість того щоб одразу просити Claude Code «зробити сайт», автор спершу формулює загальну ідею: сторінка має містити попередній досвід, навички, характеристики, причини, чому автора варто найняти, а також проєкти з GitHub.
Далі AI‑агенту пропонується поставити серію запитань щодо дизайну, структури сторінок, контенту й вимог. Ключова інструкція в цьому діалозі — створити markdown‑файл, який міститиме повну специфікацію сайту до початку генерації коду. Цей файл, умовно spec.md, стає джерелом правди для всього подальшого процесу.
Такий підхід має кілька практичних переваг у контексті AI‑орієнтованої розробки:
по‑перше, markdown добре підходить для структурованого опису вимог, а AI‑моделі вміють ефективно з ним працювати;
по‑друге, наявність явної специфікації зменшує ризик того, що модель «вигадуватиме» структуру сайту на ходу, змінюючи її від запиту до запиту;
по‑третє, spec.md зберігається в репозиторії разом із кодом, тож його можна версіонувати, оновлювати й використовувати як документацію.
У цьому ж контексті звучить рекомендація: чітко вказувати Claude Code, що для простих вебзастосунків варто використовувати Next.js і Tailwind CSS. Хоча детальна реалізація цього стеку виходить за межі даного матеріалу, важливий сам принцип: AI‑агенту потрібно явно задавати технологічні рамки, а не покладатися на його «здогадки».
Висновки: AI‑first середовище як новий стандарт для веброзробки
Налаштування середовища, описане в туторіалі Tech With Tim, показує, як змінюється роль інструментів у сучасній веброзробці. Claude Code із платною підпискою стає не просто «розумним автодоповненням», а центральним агентом, який:
працює як у десктопному застосунку, так і в терміналі;
інтегрується безпосередньо в редактор коду через розширення;
отримує контроль над файлами, плануванням і, потенційно, деплоєм.
Cursor, у свою чергу, виступає як безкоштовний, знайомий за VS Code інтерфейс, у якому сходяться всі ці можливості. Через нього створюється робоча папка my site, встановлюються розширення Claude Code і Hostinger Connector, відкривається панель AI‑агента, налаштовуються режими редагування, рівень «effort» і модель (від Opus до Sonnet чи Haiku).
Ключовий меседж цього підходу: AI‑орієнтоване середовище варто будувати цілісно. Не як набір розрізнених інструментів, а як єдину систему, де:
термінал і десктоп доповнюють одне одного;
редактор стає центром інтеграції;
деплой планується ще до написання першого рядка коду;
а специфікація проєкту фіксується в окремому markdown‑файлі, з яким працює як людина, так і модель.
У такій конфігурації штучний інтелект перестає бути «допоміжним віджетом» і перетворюється на повноцінного учасника розробки — від першої ідеї до готового застосунку на продакшені.
Джерело
How to Build an App With Claude Code – Full Tutorial for Beginners