У новому покроковому туторіалі розробник і ютубер Tech With Tim показує, як побудувати персональну портфоліо‑лендінг сторінку, майже не торкаючись клавіатури для написання коду. Центральний інструмент — Claude Code, агент для розробки від Anthropic, інтегрований у редактор Cursor. На прикладі сайту «про себе» для Tech With Tim демонструється, як за допомогою AI спланувати проєкт, сформувати специфікацію, згенерувати Next.js‑додаток з Tailwind CSS і запустити його локально.
Цей матеріал зосереджується саме на етапі планування та побудови портфоліо‑додатка: від створення папки my site до першого MVP, який працює на localhost:3001. Питання встановлення інструментів і подальшого деплою розглядаються в інших частинах серії.
Від порожньої папки до кореня проєкту: чому «my site» має значення
Початок робочого процесу виглядає максимально приземлено: у Cursor створюється нова директорія з промовистою, але простою назвою my site. Саме ця папка стає коренем кодової бази — усі файли, які генеруватиме Claude Code, з’являтимуться саме тут.
Для початківців це важливий момент: Claude Code працює «прив’язано» до поточної директорії. Від того, яку папку відкрито в Cursor, залежить, куди агент створюватиме файли, де шукатиме специфікацію, конфігурації та вихідний код. Папка my site у цьому сценарії — не просто формальність, а чітко окреслений простір, у межах якого AI отримує право змінювати структуру проєкту.
Cursor, як безкоштовний форк Visual Studio Code з вбудованими AI‑функціями, використовується тут як основний редактор. У лівій панелі відображається дерево файлів, де згодом з’являться всі створені Claude Code компоненти, сторінки та конфігураційні файли Next.js. Для користувача це класична VS Code‑подібна навігація, але з додатковою AI‑панеллю праворуч.
Саме в такому вигляді — «порожня» папка my site у файловому дереві та відкритий редактор — починається планування майбутнього портфоліо.
Claude Code всередині Cursor: панель, сесії та режими роботи
Ключовий елемент робочого процесу — інтеграція Claude Code безпосередньо в Cursor через офіційне розширення. Після встановлення розширення в бічній панелі з’являється іконка Claude Code, натиснувши на яку, користувач відкриває окрему панель з кнопкою «new session».
Ця панель — по суті чат‑інтерфейс, але не абстрактний: він «бачить» файли в my site, може їх створювати, змінювати, запускати команди й будувати структуру проєкту. Кожна нова сесія — це окремий контекст роботи з поточним кодом, що дозволяє розділяти завдання: наприклад, одна сесія для планування, інша — для рефакторингу чи додавання нових фіч.
Усередині цієї панелі користувач отримує кілька критично важливих налаштувань, які визначають, наскільки агресивно AI буде втручатися в кодову базу.
По‑перше, режими редагування. Claude Code пропонує три варіанти поведінки:
- «Edit automatically» — агент самостійно вносить зміни у файли, не запитуючи підтвердження. Це найшвидший варіант, зручний для початкового scaffolding’у, коли проєкт ще не містить критичного коду.
- «Ask before edits» — кожна зміна вимагає схвалення користувача. Такий режим підходить, коли кодова база вже виросла, і важливо контролювати кожен рефакторинг чи правку.
- «Plan mode» — Claude спершу формує детальний план змін, а вже потім, за згодою користувача, виконує його. Це проміжний варіант між повною автоматизацією та ручним контролем, корисний для складних задач.
У туторіалі для старту обирається «edit automatically», що логічно: у порожньому проєкті ризики мінімальні, а швидкість важливіша за дрібний контроль.
По‑друге, рівень «effort». Це ще один повзунок, який безпосередньо впливає на швидкість і вартість генерацій. Вищий рівень означає, що модель витратить більше обчислювальних ресурсів, проаналізує більше контексту, може запропонувати детальніші рішення — але це дорожче в кредитах. Середній рівень, який обирається в прикладі, — компроміс між якістю та витратами, особливо актуальний для користувачів без максимального тарифу.
Усе це робить Claude Code не просто «чатом у редакторі», а керованим агентом, якого можна налаштувати під власний стиль розробки: від повної автономії до педантичного погодження кожної зміни.
Вибір моделі: Opus 4.7 за замовчуванням, Sonnet і Haiku для економії
Ще один важливий параметр у панелі Claude Code — вибір моделі. У туторіалі за замовчуванням використовується Claude 4.7 Opus, флагманська модель Anthropic, орієнтована на найвищу якість генерацій. Для завдань на кшталт планування архітектури сайту, формування специфікації, побудови компонентів і стилів це виправданий вибір: Opus краще тримає довгий контекст і точніше дотримується вимог.
Втім, автор одразу вказує на альтернативи: Sonnet і Haiku. Обидві моделі дешевші в роботі, а Haiku — найдоступніша за вартістю. Для багатьох ітерацій, дрібних правок або коли не потрібен максимально глибокий аналіз, перехід на Sonnet чи Haiku дозволяє суттєво знизити витрати.
У практичному сценарії це може виглядати так: Opus використовується для початкового планування, створення spec.md і першого великого генераційного кроку, а Sonnet — для подальших уточнень верстки, дрібних змін у компонентах чи текстах. Такий підхід особливо актуальний для користувачів без «Claude Max»‑плану, де кожна інтенсивна сесія з Opus відчутно впливає на бюджет.
Фактично, вибір моделі стає ще одним важелем керування компромісом між якістю, швидкістю та вартістю, так само як і налаштування «effort».
Спочатку план, потім код: чому spec.md — центральний артефакт
Попри те, що Claude Code здатен миттєво згенерувати десятки файлів Next.js‑додатка, туторіал наполягає: перед будь‑якою генерацією варто створити чітку специфікацію. Рекомендація звучить максимально конкретно — сформувати markdown‑файл з вимогами до сайту й покласти його в корінь проєкту.
Markdown обрано не випадково. По‑перше, це простий текстовий формат, який легко читати як людині, так і моделі. По‑друге, AI‑агенти добре працюють із структурованими заголовками, списками секцій і підсекцій, що дозволяє їм точніше «прив’язувати» вимоги до конкретних компонентів чи сторінок.
У сценарії з портфоліо Tech With Tim цей файл отримує назву spec.md. Claude Code прямо інструктують створити його й заповнити повною специфікацією сайту. Перед цим користувач у вільній формі описує свої побажання: це має бути персональний портфоліо‑сайт для Tech With Tim, з блоками про попередній досвід, навички, характеристики, причини, чому його варто найняти, а також секцією з проєктами з GitHub.
Далі AI отримує завдання поставити «купу запитань» про дизайн, структуру сторінок, кольорову схему, логотипи та інші деталі, які потрібні для повноцінного плану. Цей діалог — не просто збір тексту для майбутніх секцій, а формування чіткої карти сайту: які розділи будуть на головній, чи потрібні додаткові сторінки, як виглядатиме хедер і футер, які CTA‑елементи мають бути на лендінгу.
Результатом стає spec.md — документ, який:
описує цілі сайту (персональне портфоліо для найму чи брендингу),
перелічує ключові секції (про себе, досвід, навички, проєкти, контакти),
фіксує візуальні побажання (кольори, стилі, можливо, шрифти),
може містити текстові чернетки для блоків.
Надалі саме цей файл стає для Claude Code «джерелом правди». Коли агент генерує компоненти, сторінки чи стилі, він спирається на spec.md, а при змінах специфікації може оновлювати як сам документ, так і код. Для розробника це означає, що замість хаотичних промптів у чаті з’являється стабільний артефакт, який можна переглянути, відредагувати вручну, покласти в Git і використовувати як документацію.
Next.js і Tailwind як базовий стек для простих сайтів
Коли план готовий, постає питання вибору технологій. Туторіал пропонує чітку рекомендацію: для простих веб‑сайтів на кшталт лендінгів і портфоліо варто використовувати зв’язку Next.js і Tailwind CSS.
Next.js у цьому контексті виконує роль фреймворку для React‑додатків із вбудованим роутингом, рендерингом на стороні сервера та зручною структурою проєкту. Tailwind CSS додає утилітарну систему стилізації, що дозволяє швидко будувати адаптивні інтерфейси без написання великих кастомних CSS‑файлів.
Важливий нюанс: Claude Code потрібно явно сказати, що саме Next.js має бути використаний як основа. Рекомендація звучить однозначно — у промптах слід прямо вказувати, що для простих веб‑додатків слід застосовувати Next.js. Це знімає неоднозначність і не залишає моделі простору для вибору альтернативних стеків, які можуть бути менш зручними для подальшого деплою чи масштабування.
У практиці це може виглядати як промпт на кшталт: «Побудуй MVP портфоліо‑сайту згідно з spec.md, використовуючи Next.js і Tailwind CSS». Така конкретика допомагає Claude Code одразу ініціалізувати правильну структуру: створити package.json, налаштувати Next.js‑конфігурацію, додати Tailwind, згенерувати базові сторінки й компоненти.
Для початківця це означає, що складна частина налаштування стеку — від вибору фреймворку до конфігурації CSS — фактично делегується AI, але в межах чітко заданих рамок.
Спочатку MVP, потім фічі: як Claude Code збирає першу версію
Ще один принцип, на якому наголошує туторіал, — ітеративна побудова. Claude Code спершу отримує завдання створити MVP‑версію сайту, а вже потім — додавати нові можливості.
MVP у цьому контексті — це мінімально життєздатний варіант портфоліо‑лендінгу, який:
відповідає базовій структурі з spec.md,
має основні секції (про себе, досвід, навички, проєкти),
виглядає достатньо цілісно, щоб його можна було показати зовнішньому користувачу.
Такий підхід важливий з кількох причин. По‑перше, він дозволяє швидко отримати працюючий результат, який можна оцінити в браузері, а не в уяві. По‑друге, зменшує ризик «перепроєктування»: замість того, щоб одразу намагатися реалізувати всі можливі ідеї, розробник бачить, як виглядає базова версія, і вже від неї відштовхується.
Claude Code, працюючи в режимі «edit automatically», може самостійно:
ініціалізувати Next.js‑проєкт у папці my site,
налаштувати Tailwind CSS,
створити головну сторінку з секціями, описаними в spec.md,
додати базові стилі, шапку, футер, блоки з текстом і посиланнями.
Після цього користувач може запустити застосунок локально й побачити результат у браузері. У туторіалі Next.js‑додаток запускається на localhost з портом 3001, що дозволяє паралельно тримати відкритими інші проєкти на стандартному 3000‑му порту. Claude Code бере на себе й цю частину: він може виконати відповідні команди в терміналі, запустити dev‑сервер і повідомити, де саме доступний сайт.
Далі починається звична для фронтенд‑розробки рутина — але вже з AI‑асистентом: уточнення верстки, зміна кольорів, додавання нових блоків, інтеграція з GitHub‑проєктами, оптимізація адаптивності. Усе це можна робити через ті ж сесії Claude Code, посилаючись на spec.md як на джерело вимог.
Локальний запуск на 3001: чому це важливо для робочого циклу
Факт, що Next.js‑додаток у прикладі запускається на localhost:3001, може здатися дрібницею, але для реального робочого процесу це має практичне значення. Багато розробників уже мають інші проєкти, що працюють на стандартному порту 3000, і конфлікти портів — поширене джерело плутанини.
Виносячи новий проєкт на 3001, Claude Code дозволяє уникнути цих конфліктів і паралельно тримати відкритими кілька застосунків. Для початківців це також спрощує налагодження: у туторіалі можна буквально повторити адресу з екрану й отримати той самий результат.
Локальний запуск — критичний етап між генерацією коду й деплоєм. Саме тут виявляються помилки в конфігурації, проблеми з версткою, некоректні посилання чи стилі. Наявність AI‑агента, який не лише генерує код, а й запускає його, зменшує кількість ручних кроків і дозволяє швидше переходити від «ідеї в spec.md» до «живого сайту в браузері».
Висновок: AI як партнер у плануванні, а не лише в генерації коду
Приклад портфоліо‑лендінгу для Tech With Tim показує, що Claude Code в поєднанні з Cursor може виконувати роль не просто «автодоповнювача коду», а повноцінного партнера в розробці. Ключові елементи цього підходу — чітка структура проєкту з кореневою папкою my site, інтегрований чат‑інтерфейс у редакторі, керовані режими редагування й рівень «effort», усвідомлений вибір моделі (Opus, Sonnet, Haiku) та, головне, дисципліна планування через spec.md.
Рекомендація використовувати Next.js і Tailwind CSS як базовий стек для простих сайтів, а також будувати все ітеративно — спочатку MVP, потім розширення — робить процес зрозумілим навіть для тих, хто лише починає знайомство з веб‑розробкою. Локальний запуск на localhost:3001 завершує цикл: від голосового чи текстового опису ідеї — до працюючого портфоліо, яке можна побачити, протестувати й підготувати до деплою.
У такій моделі AI не замінює розробника, а бере на себе рутинні та структурні завдання, дозволяючи людині зосередитися на змісті: що саме має розповідати сайт, як позиціонувати себе як спеціаліста й які проєкти варто показати світу.
Джерело
How to Build an App With Claude Code – Full Tutorial for Beginners