Тижнями малюєш макети,
а клієнт хоче сайт уже
Макет → правки → передача розробнику → ще правки. Тут дизайн одразу народжується в браузері, і на першу зустріч ти приходиш із живою сторінкою.
0модулів
0готових промптів
0фреймів у Figma
Цей гайд для тебе, якщо ти
[ код писати не треба ]Тижнями малюєш макети,
Застрягаєш
на чистому аркуші
Порожній фрейм забирає години. Claude дає три різні напрямки за пів години — ти обираєш, міксуєш і доводиш до свого смаку.
Пробував AI, але вийшло
«як у всіх»
Фіолетові градієнти, однакові картки, шаблонний hero. Покажу, як задати арт‑дирекцію і правила смаку, щоб результат виглядав як твій.
Що отримаєш
-
Процес: ідея → бриф → дизайн у коді → живий сайт
Не «попроси AI зробити сайт», а послідовність кроків, яку можна повторити на кожному проєкті.
-
Арт-дирекція словами, а не пікселями
Як описати стиль, сітку, шрифти й настрій так, щоб Claude тримав їх на кожній секції і не скочувався в шаблон.
-
Сайт, який не треба нікому передавати
Токени, компоненти й мобільний адаптив з першого дня. Те, що бачить клієнт, і є готовий продукт.
-
Готовий набір скілів, плагінів та інструкцій
Усі скіли, плагіни й інструкції для Claude, з якими я сам роблю якісний дизайн. Ставиш їх, і Claude з першого запиту працює за правилами доброго дизайну, а не навмання.
> Лендинг для гайду. Чорний + помаранчевий, моє фото в hero, mobile-first.
● Збираю три напрямки для hero…
● tokens.css готово
● index.html готово
● адаптив 375–1440 готово
✦ Дизайн зібрано. Відкрити в браузері? (y/n)
> y — і жодного фрейму в Figma.
Показуй клієнту живий сайт, а не картинку
Встигни взяти гайд зі знижкою і отримай бонусний модуль «Коли клієнт усе ж просить Figma»
бонус
до гайдусайт → figma
одним промптом
до гайдусайт → figma
одним промптом
Коли клієнт усе ж просить Figma
До кінця знижки
00:15:00
$99замість $198-50%
Придбати гайд
Усередині — логіка, послідовність і промпти, з якими дизайн перестає бути картинкою. Ти задаєш смак і рішення, Claude збирає їх у живу сторінку, а ти доводиш її до рівня, який не соромно показати клієнту.
Робоче місце за вечір
Claude, Claude Code і браузер для перевірки — налаштовуємо так, щоб уже наприкінці модуля на екрані була твоя перша сторінка.
Бриф і референси
Як зібрати мудборд зі скриншотів і слів, розкласти референс на прийоми і пояснити Claude, що саме тобі в ньому подобається.
Арт-дирекція в одному файлі
Кольори, шрифти, сітка, відступи і заборони — дизайн-правила, які Claude читає перед кожною правкою. Так стиль не розповзається.
Структура і тексти
Секції, оффер, заголовки. Claude пише чернетку, ти редагуєш голосом бренду — і текст живе в дизайні з першого дня, а не «lorem ipsum».
Дизайн прямо в браузері
Hero, картки, акценти. Три варіанти секції поруч, порівняння і ітерації за хвилини — як у Figma, тільки одразу живе.
Мобільний адаптив
Від 375 до 1440. Як перевіряти кожну ширину, ловити переноси, що «пливуть», і робити мобільну версію не гіршою за десктоп.
Анімації і деталі
Появи на скролі, hover, лічильники, мікровзаємодії. Описуєш рух словами — отримуєш плавність без гальмування на телефоні.
Запуск
Хостинг, домен, форми, базове SEO і швидкість. Сайт живе за твоїм посиланням, а не в папці на ноутбуці.
Коли клієнт усе ж просить Figma
Як перенести готовий сайт у Figma‑файл шарами — для команди, яка звикла працювати з макетами. Без перемальовування вручну.
Product-дизайнер,
8+ років у дизайні
За ці роки — понад 50 запущених продуктів: SaaS, CRM, мобільні застосунки, сайти. І за останній рік я майже перестав відкривати Figma на старті проєкту.
Тому я зібрав гайд про те, як проєктувати сайти з Claude без проміжного макета
Так зроблені мої продукти Startlek і Wayly, два десятки концептів редизайну сайтів змагань і мій власний сайт. AI не замінює смак дизайнера. Він прибирає зайвий крок — малювання статичних картинок, які потім усе одно хтось переносить у код.
andrii-designer.comТвої навички після гайду
Показуєш живий сайт
на першій зустрічі
Клієнт клікає, скролить і дивиться з телефона — а не уявляє, як «воно буде працювати».
Робиш три напрямки
замість одного
Варіанти коштують хвилини, а не дні. Можна сміливо пробувати і обирати найкраще.
Продаєш готовий сайт,
а не макет
Закриваєш і дизайн, і реалізацію — і береш за проєкт відповідно більше.
Як виглядає гайд і робота з ним?
Усі модулі одразу після оплати
Без очікування відкриття потоку — проходиш у своєму темпі.
Відеоуроки і закритий Telegram-чат
Записи екрана з реальних проєктів і чат для питань, ідей та розборів.
Скіли, плагіни й інструкції для Claude
Повний набір, з яким я працюю сам. Інструкція з встановлення крок за кроком, тож за вечір усе готово.
База промптів у Notion
Усі промпти й чек-листи з уроків — щоб копіювати і повторювати на своїх проєктах.
Підтримка
Якщо щось пішло не так — пиши в чат, розберемо на твоєму сайті.
Стань дизайнером, якому не потрібен посередник
Встигни взяти гайд зі знижкою і отримай бонусний модуль «Коли клієнт усе ж просить Figma»
До кінця знижки
00:15:00
$99замість $198-50%
Придбати гайд
Відповіді на питання
Чи потрібні платні підписки?
Так, підписка Claude Pro за $20 на місяць — цього достатньо для старту. Figma не потрібна взагалі, навіть безкоштовна.
Мені треба вміти програмувати?
Ні. Ти керуєш дизайном словами, код пише Claude. Але я покажу, як читати його настільки, щоб розуміти, що відбувається, і не боятися правок.
Я працюю у Figma. Це не кінець моєї професії?
Ні. Смак, структура і рішення лишаються за тобою — змінюється інструмент. Figma-навички якраз допомагають: ти вже знаєш, як має виглядати добрий інтерфейс.
Чи не вийде сайт, схожий на AI‑шаблон?
Саме цьому присвячені модулі про референси та арт-дирекцію: як задати правила і заборони, щоб кожен проєкт мав свій характер.
Можна працювати з телефона?
Для роботи потрібен ноутбук або комп'ютер. А от перевіряти мобільну версію на телефоні — обов'язково.
Скільки триває доступ?
Без обмежень — разом з усіма оновленнями гайду.