Цей гайд 100%
для тебе, якщо ти:
01
Малюєш в Figma,
але не вмієш верстати
Клієнти просять готовий сайт, а не тільки макет. Після гайду ти навчишся переносити дизайни в код — і піднімеш ціну.
02
75% часу іде на рутину
AI допомагає закрити рутину, прискорити процеси й прибрати зайву механічну роботу, щоб у тебе залишалося більше часу на дизайн.
03
Пробував AI,
але отримав "не те"
Claude вигадує замість того щоб переносити твій дизайн. Тут — промпти які читають Figma і переносять 1:1.
Усередині гайду — логіка, послідовність і промпти, які допомагають ставити задачі точніше, контролювати результат і доводити сайт до вигляду, який не соромно показати клієнту.
-
01.Встановлення та налаштування
Налаштувати три інструменти — Claude Desktop, VS Code і Figma — так, щоб вони працювали разом. Після цього модуля ти зможеш запитати Claude про свій Figma-файл і отримати відповідь прямо в чаті.
-
02.Figma-макет під AI
Навчишся готувати Figma-файл так, щоб Claude міг читати його без питань — і генерувати точний код з першого разу.
-
03.Компоненти:
їмо слона по шматочках
Навчишся переносити компоненти з Figma в код точно — не "схоже", а ідентично. Claude читає твій дизайн через MCP і не вигадує нічого від себе.
-
04.Підготовка медіа
Підготуєш всі медіа-файли, поговоримо про оптимізацію та як не заповільняти сайт картинками та відео
-
05.Розмова з AI
Дізнаєшся точну структуру запиту до Claude, як переносити сайт та адаптивити його за правильними промптами, і вміти вносити правки так щоб нічого не ламалось.
-
06.Анімація сайту
Навчишся описувати рух словами так, щоб Claude додав потрібні анімації — без хаосу і без гальмування на мобільному.
-
07. Деплой проєкту
Навчишся запускати власний сайт: деплой, хостинг, репозиторій, налаштування форм — більше не щось зі світу магії.
-
08. Адмін-панель до Vibe-code сайту
Навчишся додавати до сайту адмін-панель, де клієнт сам змінює тексти, фото й ціни — без тебе і без коду. Підключиш базу даних і віддаси проєкт під ключ.
-
Бонусний: Базова SEO-оптимізація
Навчишся налаштовувати базове SEO, щоб сайт мав шанс з’являтися в Google, а не просто красиво лежав у посиланні. Клієнти дуже цінують такі навички, бо це показує: ти думаєш не тільки про дизайн, а й про результат після запуску.
Чи можна сайти моїх клієнтів назвати “AI сайтом як у всіх”?
А вони всі реалізовані за допомогою Claude Code
$700
від макету до запуску — 50 хв
$1100
від макету до запуску — 35 хв
моє портфоліо
від макету до запуску — 40 хв