Портфоліо дизайнера з кодом: сайт за вечір з Claude і деплой на свій домен

Коротка відповідь: сайт-портфоліо дизайнер може зібрати з Claude за один вечір, якщо контент підготовлений заздалегідь. Порядок такий: тексти і зображення трьох кейсів, структура сайту, файл зі стилем (кольори, шрифти, відступи), збірка сторінок з Claude, перевірка адаптиву, деплой через GitHub на Cloudflare Pages і підключення свого домену. Хостинг безкоштовний, платите лише за домен, якщо він потрібен.

Я Дмитро Ніколаєнко, 15 років у продуктовому дизайні, і сайт UX Hero, який ви зараз читаєте, зібраний з Claude Code. На курсі «Сайти з AI» студенти роблять те саме зі своїми проєктами. Наприклад, Аліна після курсу зібрала з Claude свій сайт-портфоліо. Нижче процес, який працює для більшості дизайнерів.

Навіщо дизайнеру свій сайт, а не Behance чи Notion?

Behance, Dribbble і Notion добрі для старту, але мають три обмеження. Ви не контролюєте, як виглядає сторінка. Ви не показуєте, що вмієте доводити дизайн до робочого продукту. І ваше портфоліо виглядає так само, як тисячі інших.

Власний сайт на своєму домені - це вже кейс сам по собі. Він показує типографіку, сітку, адаптив і увагу до деталей у живому середовищі, а не на картинці. А якщо ви додаєте посилання на репозиторій, наймач бачить ще й те, що ви не боїтесь коду. Для ролей на стику дизайну і фронтенду це великий плюс, детальніше в статті Портфоліо Design Engineer: 4 артефакти.

Що підготувати до вечора збірки?

Найдовша частина роботи над портфоліо - це не код, а контент. Якщо почати збирати сайт без нього, вечір перетвориться на тиждень. Підготуйте:

• 2-4 кейси. Для кожного: задача, ваша роль, процес, результат, що зробили б інакше. Якість кейсів важливіша за кількість. Як їх писати, є в матеріалі Портфоліо UX-дизайнера: що показати, щоб взяли.
• Зображення. Експортовані з Figma у WebP або JPG, нормального розміру. Обкладинка для кожного кейса і 3-6 зображень всередині.
• Текст «про мене». 3-5 речень: хто ви, з чим працюєте, що шукаєте.
• Контакти. Пошта, LinkedIn, Telegram, резюме в PDF.
• Візуальний напрямок. 2-3 референси сайтів, які вам подобаються, і ваші кольори та шрифти.

Крок 1. Структура сайту

Для портфоліо дизайнера вистачає простої структури:

• Головна: одне речення про вас, сітка кейсів з обкладинками, контакти внизу.
• Сторінка кейса: одна шаблонна сторінка, яка повторюється для кожного проєкту.
• Про мене: текст, фото, досвід, резюме.

Попросіть Claude прочитати ваші тексти і запропонувати структуру. Часто він помічає, що два кейси краще об'єднати або що бракує блоку з результатами.

Крок 2. Файл зі стилем, щоб сайт не виглядав як шаблон

Найчастіша проблема сайтів з AI - вони схожі один на одного. Рішення: перш ніж збирати сторінки, опишіть свій стиль у файлі. Кольори як токени, шрифти, шкала відступів, радіуси, характер (строгий, грайливий, редакційний), що не можна робити. Цей файл Claude читатиме при кожній задачі. Про такий підхід детально розказано в статті Як зробити сайт з AI у 2026.

Стиль сайту-портфоліо.
Кольори: фон #F5F4EF, текст #111110, акцент #2B50FF.
Шрифти: Onest для тексту, JetBrains Mono для підписів.
Відступи: шкала 4px. Радіуси: 0, без тіней.
Характер: редакційний, багато повітря, великі заголовки.
Не можна: градієнти, емодзі, кнопки-пілюлі.

Крок 3. Збірка з Claude

Відкрийте папку проєкту в Claude Code (можна через застосунок, без терміналу) і поставте першу задачу:

Прочитай style.md і content/ з текстами кейсів.
Зроби статичний сайт-портфоліо на HTML і CSS
без фреймворків: головна, about і шаблон сторінки кейса.
Сторінки кейсів згенеруй для кожного файлу в content/.
Адаптив від 360px. Покажи, як відкрити локально.

Статичний HTML без фреймворків для портфоліо - найкращий вибір: швидко завантажується, нічого не ламається через рік, легко правити. Далі працюйте ітераціями: дивіться в браузері, давайте конкретні правки, як на дизайн-рев'ю.

Крок 4. Шаблон сторінки кейса

Сторінка кейса - найважливіша на сайті. Наймач відкриє 1-2 кейси і вирішить за кілька хвилин. Структура, яка працює:

1. Назва і одне речення про результат.
2. Контекст: компанія або тип продукту, ваша роль, команда, терміни.
3. Проблема: що було не так і як ви це зрозуміли.
4. Процес: 2-3 ключові рішення з візуалами, а не весь шлях.
5. Результат: що змінилося після запуску, без вигаданих цифр.
6. Що б ви зробили інакше.

Якщо проєкт під NDA, покажіть процес на знеособлених макетах і прямо напишіть, що деталі закриті. Це нормальна практика.

Крок 5. Перевірка перед публікацією

• Перегляд на телефоні, планшеті і ноутбуці.
• Зображення стиснуті і мають alt-текст.
• Всі посилання працюють, резюме відкривається.
• Title і description для кожної сторінки, OG-зображення для красивого прев'ю в месенджерах.
• Контраст тексту і видимий фокус для навігації з клавіатури.

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

Крок 6. Деплой на свій домен

Найпростіший безкоштовний шлях: Claude Code створює репозиторій на GitHub, ви підключаєте його до Cloudflare Pages, і кожна зміна в коді автоматично публікується. Потім додаєте свій домен у налаштуваннях проєкту. Повна інструкція з усіма кліками є в статті Як задеплоїти сайт на Cloudflare Pages з Claude Code.

Після публікації додайте сайт у Google Search Console і підключіть просту аналітику, щоб бачити, чи відкривають ваші кейси.

Скільки це займає насправді?

Етап	Час
Тексти і зображення кейсів	від кількох днів до тижня, залежно від готовності
Структура і файл стилю	близько години
Збірка і правки з Claude	2-3 години
Перевірка і деплой	близько години

Тобто «сайт за вечір» - чесно, але тільки якщо контент вже готовий. Не економте на ньому: гарний сайт з слабкими кейсами програє простому сайту з сильними.

Типові помилки в сайтах-портфоліо

• Анімації заради анімацій. Ефектний скрол, який заважає читати кейс, працює проти вас. Наймач прийшов за змістом.
• Важкі зображення. Скріншоти по кілька мегабайт роблять сайт повільним на мобільному. Попросіть Claude стиснути все у WebP і додати lazy loading.
• Кейс без вашої ролі. Якщо незрозуміло, що саме зробили ви, а що команда, кейс не працює.
• Сайт, який ніхто не оновлює. Залиште собі простий спосіб додати новий кейс: одна папка з текстом і зображеннями, і Claude збирає сторінку за шаблоном.
• Немає посилання на код. Якщо ви шукаєте роль на стику з фронтендом, посилання на публічний репозиторій сайту - простий доказ, що ви працюєте з кодом.

Типові помилки в сайтах-портфоліо

• Анімації заради анімацій. Ефектний скрол, який заважає читати кейс, працює проти вас. Наймач прийшов за змістом.
• Важкі зображення. Скріншоти по кілька мегабайт роблять сайт повільним на мобільному. Попросіть Claude стиснути все у WebP і додати lazy loading.
• Кейс без вашої ролі. Якщо незрозуміло, що саме зробили ви, а що команда, кейс не працює.
• Сайт, який ніхто не оновлює. Залиште собі простий спосіб додати новий кейс: одна папка з текстом і зображеннями, і Claude збирає сторінку за шаблоном.
• Немає посилання на код. Якщо ви шукаєте роль на стику з фронтендом, посилання на публічний репозиторій сайту - простий доказ, що ви працюєте з кодом.

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

Часті питання

Чи можна зробити сайт-портфоліо з Claude без знання коду?

Так. Claude Code збирає HTML і CSS за вашим описом, а ви даєте правки, як на дизайн-рев'ю. Важливо заздалегідь підготувати тексти кейсів і зображення та описати свій стиль у файлі, щоб сайт не виглядав як шаблон.

Де безкоштовно розмістити портфоліо дизайнера?

Статичний сайт-портфоліо можна безкоштовно розмістити на Cloudflare Pages, Vercel або Netlify з автоматичною публікацією з GitHub. Платити доведеться лише за власний домен, якщо він потрібен.

Що краще для портфоліо: свій сайт чи Behance?

Behance і Notion зручні для старту, але свій сайт на домені показує типографіку, сітку і адаптив у живому середовищі та вміння доводити дизайн до продукту. Для ролей на стику дизайну і фронтенду власний сайт з посиланням на репозиторій особливо цінний.

Скільки кейсів має бути в портфоліо дизайнера?

Зазвичай 2-4 сильні кейси краще, ніж 10 слабких. Наймач відкриває 1-2 кейси, тому кожен має чітко показувати задачу, вашу роль, ключові рішення і результат.

---

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