Дизайн власного сайту з AI · Сем Черкасов
9 жовтня 2026

Заповни поля у квадратних дужках перед використанням. Приклад із рілсу збережено без редагування.

1. Повідомлення з рілсу

Референс: https://www.getquoti.ai/

Мені подобається яскравий стиль та гучний шрифт. Я наче дивлюся комікс, а не сайт клінінг-сервісу!

2. Контекст твого сайту

Референс: [посилання на сайт]
Що мені подобається: [2–3 конкретні риси й чому]
Що не хочу переносити: [елементи, які не підходять]

Мій сайт:
- Назва продукту або бізнесу: [назва]
- Що він робить: [одне просте речення]
- Для кого: [хто зайде на сайт і з якою потребою]
- Головна дія: [наприклад, записатися на консультацію]
- Мова сайту: [мова]
- Тип сторінки: [наприклад, односторінковий сайт]
- Потрібні секції: [пропозиція, послуги, як працюю, питання, контакт]
- Матеріали: [мої тексти, логотип, фото, реальні відгуки або «поки немає»]
- Обмеження: [бренд-кольори, стиль, важливі вимоги або «немає»]

Використовуй мої дані. Не вигадуй відгуки, клієнтів або цифри.

3. Оригінальна інструкція для дизайн-промпта

На основі посилання на сайт і моїх коментарів вище підготуй один детальний промпт для Claude Design, який я зможу скопіювати й використати для дизайну власного сайту.

Спочатку відкрий референс у браузері та досліди його візуальний дизайн. Відокрем те, що справді бачиш, від своїх припущень. Якщо не можеш переглянути візуальний дизайн сайту, попроси скриншоти, перш ніж писати промпт. Не вигадуй деталі.

Перетвори мої враження на конкретні дизайнерські рішення. Наприклад, «наче комікс» має означати певну типографіку, контури, композицію, ілюстрації та ритм, а не просто слово «комікс» у промпті. Пріоритет мають саме ті риси, які я відзначив.

У готовому промпті опиши:
1. Загальний стиль, настрій і враження, яке має отримати відвідувач.
2. Палітру з HEX-кодами та ролями кольорів: фон, текст, акценти, кнопки. Орієнтовні кольори познач як рекомендовані.
3. Типографіку: характер шрифтів, доступні аналоги, розміри й вагу заголовків, читабельність основного тексту.
4. Композицію: сітку, ширину контенту, відступи, щільність і чергування секцій.
5. Перший екран: навігацію, головний заголовок, короткий опис, основну дію та ключовий візуал.
6. Структуру сторінки й оформлення кожної секції. Адаптуй зміст під мій продукт, а не під бізнес із референсу.
7. Кнопки, картки, форми, контури, тіні, ілюстрації та інші характерні елементи.
8. Доречні анімації, стани при наведенні та поведінку на мобільному. Врахуй контраст, видимий фокус і зменшення руху.
9. Чого уникати, щоб зберегти обраний характер дизайну.

Використовуй референс як джерело візуальних принципів. Не копіюй його логотип, тексти, персонажів чи фірмові зображення. Якщо інформації про мій продукт у чаті немає, залиш зрозумілі поля [Назва продукту], [Що він робить], [Для кого], [Головна дія] та [Мова сайту]. Не вигадуй відгуки, клієнтів або цифри.

Промпт має бути самодостатнім: включи посилання на референс і потрібний контекст, не пиши «як ми обговорювали вище». Напиши його українською як пряму інструкцію для створення дизайну, з конкретними вимогами замість загальних слів на кшталт «сучасно» чи «красиво». Попроси створити дизайн сторінки для десктопа й мобільного, без написання коду на цьому етапі.

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

4. Адаптація готового прикладу

Адаптуй готовий дизайн-промпт під мій контекст нижче: [встав заповнений опис свого сайту].

Збережи вибрані візуальні принципи, але зміни структуру, тексти й головну дію під мою аудиторію. Прибери всі незаповнені поля, для яких я вже дав дані. Якщо важливої інформації бракує, постав короткі запитання. Не вигадуй факти. Перевір, що запропоновані шрифти підтримують мову мого сайту.

Поверни лише оновлений самодостатній промпт в одному кодовому блоці.

5. Точні правки до дизайну

Збережи загальний стиль. Виправ лише такі речі:
1. Де: [конкретна секція й десктоп або мобільний].
   Проблема: [що заважає читати або зрозуміти сайт].
   Зміна: [який результат хочу отримати].
2. Де: [секція]. Проблема: [опис]. Зміна: [опис].
3. Де: [секція]. Проблема: [опис]. Зміна: [опис].

Покажи оновлений дизайн для десктопа й мобільного. Решту секцій залиш без змін. Не додавай вигаданих даних.

6. Передача дизайну на реалізацію

Реалізуй сайт за доданими файлами дизайну й скриншотами фінальної версії.

Контекст: [встав заповнений опис свого сайту].
Папка з дизайном і матеріалами: [назва або шлях до папки].
Головна дія та її адреса: [текст кнопки й реальне посилання].
Поведінка форми, якщо вона є: [куди надсилати дані або «поки лише макет»].
Сайт створюємо: [з нуля / у наявному проєкті, вкажи папку].

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

Збережи характер дизайну, але зроби справжні адаптивні сторінки, а не одне зображення. Використовуй надані тексти й матеріали. Не вигадуй відгуки, цифри або логотипи клієнтів. Перевір підтримку українських літер ґ, є, і, ї та символу ₴ обраними шрифтами.

Перевір сторінку в браузері на ширинах 390 і 1440 px, а також на вузькому екрані 320 px: переноси заголовків, відсутність горизонтальної прокрутки, контраст, видимий фокус, меню, кнопки, посилання, форми та завантаження зображень. Поясни, що справді працює, а що потребує підключення. Якщо бракує адреси кнопки або налаштування форми, познач це й запитай, не показуй вигадане підтвердження успіху.

Підготуй локальний перегляд і файли проєкту. Додай коротку інструкцію, як відкрити сайт. Не публікуй сайт, не купуй домен і не підключай платні сервіси без мого окремого дозволу.

Додаток: повний оригінальний приклад із рілсу

Ти - арт-директор і веб-дизайнер. Створи дизайн односторінкового сайту для мого продукту у вказаному нижче стилі. Результат - макети сторінки для десктопа (ширина 1440 px) і мобільного (ширина 390 px), а також короткий зведений аркуш стилів (кольори, шрифти, радіуси, тіні, кнопки). Код писати не потрібно, лише дизайн.
ПРОДУКТ (заповнено мною, нічого не вигадуй)
- Назва: [Назва продукту]
- Що він робить: [Що він робить]
- Для кого: [Для кого]
- Головна дія на сайті: [Головна дія]
- Мова сайту: [Мова сайту]
Не вигадуй відгуки, клієнтів, логотипи партнерів, кількість користувачів чи інші цифри. Де потрібне соціальне підтвердження, а даних немає, залиш чітко позначений порожній блок "[Реальний відгук / цифра, якщо є]" або пропусти секцію.
РЕФЕРЕНС (джерело візуальних принципів)
https://www.getquoti.ai/ - сайт застосунку для бронювання послуг. Не копіюй його логотип, тексти, фотографії, персонажів, ілюстрації та композицію дослівно. Бери з нього лише принципи, описані нижче. У цьому промпті позначено [СПОСТЕРЕЖЕНО] - те, що я виміряв на живій сторінці референсу, і [РЕКОМЕНДОВАНО] - мої рішення для нового дизайну.
БАЖАНЕ ВРАЖЕННЯ
Замовнику подобається яскравий стиль і "гучний" шрифт, ніби дивишся комікс, а не типовий сайт. Це має відчуватися за 2 секунди на першому екрані. Тон - впевнений, прямий, трохи дерзкий, але зрозумілий і придатний для довіри до продукту. Не "стартап-корпоративний".
Як слово "комікс" перетворюється на конкретні рішення (дотримуйся їх, а не просто натякай на комікс):
- Типографіка: величезні заголовки суцільними великими літерами, надщільний міжрядковий інтервал.
- Контур: товсті темні обводки (1.5-3 px) на картках і великих контейнерах.
- Жорстка зміщена тінь без розмиття, як "наклейка" або панель коміксу.
- Нахилені елементи (картки, фото-плитки) з поворотом до ~15 градусів, щоб порушити строгу сітку.
- Рвані паперові краї як розділювачі секцій і рамки для фото.
- Рукописні намальовані "дудли" навколо заголовків (зигзаги, корона, місяць із Zzz, контурні стрілки).
- Різка зміна фону між секціями (темна, світла, кольорова), без плавних градієнтів.
1. ЗАГАЛЬНИЙ СТИЛЬ І НАСТРІЙ
Тепла паперова основа, майже чорні блоки, один гарячий акцент і один вторинний колір. Плоский, без градієнтів і скляних ефектів. Усе "розкладене" як наклейки на столі: контури, жорсткі тіні, легкі нахили. Дудли тільки як акценти біля заголовків, не як фон. Гумор у копірайтингу допустимий, якщо він не заважає зрозуміти продукт.
2. ПАЛІТРА
[СПОСТЕРЕЖЕНО на референсі, для довідки, не копіюй]: темний #252322, тепле світле тло #f0ece8, вторинне тло #dbdbd3, помаранчевий акцент #fd5b2c, фіолетовий #7d5ba6, зелений #8ba02c, біла.
[РЕКОМЕНДОВАНО для мого сайту] (якщо в мене є бренд-колір - заміни акцент на нього):
- Чорнильний (текст, контури, тіні, темні секції): #1E1B1A
- Папір (основне тло): #F4EFE6
- Папір-2 (чергові секції, великі контейнери): #E3DDD0
- Гарячий акцент (головні кнопки, ключові слова в заголовках): #FFD23F, текст на ньому #1E1B1A
- Вторинний (картки болів, кольорова секція "як працює"): #5B3FE8, текст білий
- Дудли і дрібні акценти: #FF5A5F
- Успіх або позитивні мітки: #2DBE7E
Правила контрасту: білий на #5B3FE8 - приблизно 6.8:1, нормально. Білий текст на помаранчевих або жовтих кнопках не використовуй. Дрібний текст не роби напівпрозорим на кольорових тлах.
3. ТИПОГРАФІКА
[СПОСТЕРЕЖЕНО]: заголовки - важкий широкий гротеск Obviously, вага 900, великі літери, міжрядковий інтервал 0.85, трекінг -1%. Розміри на екрані 1280 px: перший екран 105 px, великі заяви 149 px, заголовки секцій 59-78 px, заголовки карток 36 px, малі мітки 22 px з трекінгом +2%. Основний текст - гротеск Switzer, вага 500, 19 px, інтервал 1.4, трекінг -1%. Кнопки і підвал - тим самим display-шрифтом, великі літери.
[РЕКОМЕНДОВАНО] безкоштовні аналоги (Google Fonts): заголовки - Archivo (змінний, ширина 100-125, вага 900) або Anton, лише великі літери; основний текст - DM Sans або Inter, вага 500, 18-20 px на десктопі, 17-18 px на мобільному. Заголовки з clamp(): перший екран 64-120 px на десктопі, 44-56 px на мобільному; великі заяви 56-140 px / 40-56 px; заголовки секцій 40-72 px / 32-40 px. Міжрядковий 0.85-0.9 лише для заголовків, не більше 3-4 рядків. Основний текст не коротший за 17 px, ширина рядка до 65 символів.
4. КОМПОЗИЦІЯ
[СПОСТЕРЕЖЕНО]: 12-колонкова сітка, плаваюча навігація-"пігулка", секції чергуються за фоном: темна, сірувата, світла, кольорова, світла, темна. Заголовки величезні й часто по центру, текст займає менше половини ширини. Простору багато.
[РЕКОМЕНДОВАНО]: максимальна ширина контенту 1280 px, бічні відступи 24 px на десктопі й 16 px на мобільному, вертикальні відступи між секціями 96-160 px / 56-80 px. Один головний акцент на екран, не більше двох ідей в одній секції. Фон секцій чергуй: Папір, чорнильний, Папір-2, вторинний, Папір, чорнильний. Між секціями - рвана паперова лінія (намалюй оригінальну SVG-смужку з нерівним краєм).
5. ПЕРШИЙ ЕКРАН
- Навігація (плаваюча "пігулка", [СПОСТЕРЕЖЕНО]: фон тепло-світлий, контур 1 px, радіус 16 px, внутрішній відступ 4 px, висота 64 px, зліва логотип, посередині 3-4 посилання, праворуч темна кнопка "Вхід" і акцентна кнопка основної дії). На мобільному - логотип і іконка гамбургера в тій самій "пігулці".
- Заголовок: дві короткі паралельні фрази великими літерами, у структурі "Результат. Менше болю." Приклад структури, не текст: "[Бажаний результат]. [Менше того, що дратує]." Розмір максимальний, ліворуч або по центру, ключове слово на жовтій "маркерній" плашці з легким нахилом.
- Опис: 1-2 речення, що саме робить [Назва продукту] для [Для кого], не більше 25 слів.
- Основна дія: одна велика кнопка з текстом [Головна дія]; поруч або під нею 2-3 короткі мітки переваг із іконками-галочками.
- Ключовий візуал: знімок інтерфейсу продукту у нахиленій рамці з контуром і жорсткою тінню, поруч 1-2 дудли. Не використовуй стокові фото й вигадані обличчя.
6. СТРУКТУРА СТОРІНКИ (адаптуй під мій продукт)
1. Перший екран (чорнильний або Папір).
2. Біль: заголовок плюс 3 нахилені картки #5B3FE8 з контуром 1.5 px, радіусом 24 px, тінню 6 px 6 px 0 #1E1B1A, у кожній короткий заголовок 36 px і 1-2 речення про реальну проблему [Для кого]; тексти пиши з даних, які я дам, без вигаданих статистик.
3. Велика заява: один гігантський центрований заголовок (до 3 рядків) із двома дудлами навколо; під ним 1-2 речення і кнопка.
4. Як це працює: 3-4 кроки в кольоровій секції, кожен крок - нумерація великим шрифтом, заголовок, короткий опис, темна заокруглена панель із знімком продукту, трохи нахилена.
5. Можливості: сітка 2x3 або чергування "зображення зліва/справа" у картках з контуром.
6. Соціальне підтвердження: тільки реальні дані; рамка-"паперова наклейка" для фото, стрілки навігації контурні.
7. Часті питання: акордеон на чорнильному тлі, питання великими літерами.
8. Фінальний заклик: велика контурна панель із рваним краєм усередині, заголовок, текст і одна кнопка.
9. Підвал: посилання великими літерами display-шрифтом, юридичні посилання, без перевантаження.
7. КНОПКИ, КАРТКИ, ФОРМИ, ЕЛЕМЕНТИ
- Кнопки [СПОСТЕРЕЖЕНО]: радіус 12 px, відступи 20 px 24 px, контур 1.5 px тим самим кольором, що й заливка, великі літери display-шрифтом. Для мого сайту: основна - жовта заливка #FFD23F, текст #1E1B1A, контур 2 px #1E1B1A, жорстка тінь 4 px 4 px 0 #1E1B1A; вторинна - чорнильна заливка з білим текстом; мінімальний розмір 48 px.
- Картки: радіус 24 px, контур 1.5-2 px #1E1B1A, тінь 6 px 6 px 0 #1E1B1A, відступи 32-48 px, нахил від -4 до 6 градусів.
- Великі контейнери: радіус 32 px, контур 3 px, тінь 8 px 8 px 0.
- Поля форм (якщо є): висота 56 px, радіус 12 px, контур 2 px, фокус - товстіший контур і жовта тінь.
- Іконки: контурні, товщина 2 px, без заливки.
- Дудли: 4-6 штук на всю сторінку, намальовані від руки, контурні, кольори #FF5A5F та #5B3FE8. Вигадай оригінальні, пов'язані з моїм продуктом (не повторюй корону, місяць Zzz чи зигзаг референсу).
- Зображення: знімки інтерфейсу в нахилених рамках; фото з рваним краєм тільки якщо в мене є реальні фото.
8. АНІМАЦІЇ, СТАНИ, МОБІЛЬНА ВЕРСІЯ, ДОСТУПНІСТЬ
- [СПОСТЕРЕЖЕНО]: на референсі заголовок першого екрана з'являється з маскуванням по рядках, картки болю рухаються горизонтально й повертаються під час прокрутки, плитки послуг нахилені віялом. Hover-стани я не перевіряв.
- [РЕКОМЕНДОВАНО]: показуй у макетах стани hover, focus, active для кнопок і карток. Hover кнопки: зсув на 2 px вгору-ліворуч, тінь збільшується до 6 px. Active: кнопка "втискається", тінь зникає. Картки при hover випрямляються до 0 градусів за 200 мс. Поява секцій - зсув знизу 24 px і прозорість, 300-400 мс.
- Обов'язково: видимий фокус - контур 3 px #5B3FE8 із відступом 3 px; режим prefers-reduced-motion вимикає нахили в русі, паралакс і автоматичні каруселі (статичний нахил залишається); контраст тексту не менше 4.5:1, великого не менше 3:1; цілі натискання не менше 44 px.
- Мобільна версія: однокольонкова, нахили зменшені до 2-4 градусів, картки розташовані вертикально або у свайп-карусель з видимою підказкою, навігація "пігулка" з гамбургером, кнопка основної дії фіксована внизу екрана або повторюється після кожних 2 секцій, заголовки не більше 3 рядків.
9. ЧОГО УНИКАТИ
- Градієнтів, розмитих тіней, скляного ефекту, стокових фото й вигаданих облич.
- Звичайного SaaS-вигляду: сірі картки зі слабкою тінню, дрібні заголовки, симетричні "три колонки з іконками" без характеру.
- Дрібного або слабкого тексту; білого тексту на жовтому чи помаранчевому.
- Більш ніж двох акцентних кольорів на одному екрані, більш ніж 6 дудлів, нахилу сильніше 15 градусів.
- Дитячого вигляду: дудли лише як акцент, продукт має виглядати надійним.
- Копіювання логотипа, текстів, фото, персонажів чи точної композиції референсу.
- Вигаданих цифр, відгуків, логотипів клієнтів.
ЩО ПОВЕРНУТИ: макет сторінки (десктоп 1440 і мобільний 390) з усіма секціями, макети станів hover/focus для кнопки й картки, зведений аркуш стилів. Якщо чогось із даних про продукт бракує, залиш позначені поля замість вигадування.