## Інструкції

### Основна місія

**Передумови:** Творцям (фотографам, ілюстраторам, дизайнерам, художникам тощо) потрібне професійне онлайн-портфоліо, щоб демонструвати свої роботи та залучати потенційних клієнтів або роботодавців. Традиційні веб-сайти-портфоліо є дорогими, трудомісткими для створення та їх важко налаштувати відповідно до особистих естетичних особливостей. Ця навичка спрямована на швидке створення веб-сайту-портфоліо, який поєднує візуальну красу з функціональною повнотою.

**Конкретні цілі:**

- Створіть повноцінний веб-сайт портфоліо з відображенням робіт, фільтрацією за категоріями та детальною інформацією про роботи

- Візуальний стиль, що тісно пов'язаний з естетичною позицією та творчим темпераментом автора

- Плавний інтерактивний досвід, підтримка кількох методів перегляду (сітка/кладка/карусель тощо)

- Адаптивний дизайн, адаптований для десктопів та мобільних пристроїв

- Додатково: додайте особисту біографію, контактну інформацію та інші допоміжні модулі

**Ключові обмеження:**

- Естетика є основною конкурентною перевагою; слід уникати шаблонного, посереднього дизайну

- Методи презентації роботи повинні підкреслювати саму роботу, уникаючи надмірного дизайну, який затьмарює зміст

- Швидкість завантаження та перегляд веб-сторінок мають бути плавними

**Перш ніж офіційно розпочати завдання, спочатку перевірте у користувача, чи надав він зразки своїх робіт. Продовжуйте виконання завдання лише після підтвердження наявності матеріалів.**

### Крок 1: Розуміння позиціонування та естетичних уподобань автора

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

**Дії:**

- Проаналізуйте надані користувачем **"{зразки робіт}"** (посилання на зображення/відео або файли), визначивши характеристики візуального стилю (колірний тон, композицію, настрій, тематику тощо)

- Уважно прочитайте наданий користувачем **"{опис естетичних уподобань}"**, видобувши ключові слова:

- Загальна атмосфера (наприклад, мінімалістична, вінтажна, авангардна, тепла, прохолодна, художня, комерційна тощо)

- Орієнтовні стилі (наприклад, японський свіжий стиль, європейська/американська мода, Баухаус, фовізм, кіберпанк тощо)

- Тенденції кольорів (наприклад, чорний/білий/сірий, кольори Моранді, висока насиченість, градієнти тощо)

- Параметри макета (наприклад, достатньо білого простору, щільний колаж, симетричність, нерегулярність тощо)

- Якщо користувач надає **"{посилання на веб-сайт}"**, відвідайте та проаналізуйте його мову дизайну, методи взаємодії та характеристики макета

- Комплексно оцінити тип цільової аудиторії (потенційні клієнти, мистецькі установи, загальні поціновувачі тощо), визначивши точку балансу між професіоналізмом та доступністю

**Результат:** Внутрішньо сформуйте чіткий «естетичний профіль», що містить 3-5 основних ключових слів дизайну та конкретні описи візуального напрямку.

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

### Крок 2: Планування структури портфоліо та методів взаємодії

**Мета:** Розробити найвідповіднішу інформаційну архітектуру та зручність перегляду веб-сторінок на основі обсягу, типу роботи та потреб користувачів.

**Дії:**

- Підрахуйте кількість робіт та сплануйте систему класифікації відповідно до **"{категорій робіт}"** (наприклад, портрет/пейзаж/натюрморт або за проектом/серією/роком тощо)

- Визначте метод макета головної сторінки:

- **Сітчасте розташування:** Підходить для однакових розмірів робіт, що вимагають акуратного порядку

- **Розкладка кладки (водоспад):** Підходить для робіт різних розмірів, підкреслюючи візуальну насиченість

- **Повноекранна карусель**: підходить для меншої кількості робіт, кожна з яких потребує захопливого відображення

- **Гібридний макет:** Поєднання кількох методів, таких як головне зображення + сітка нижче

- Взаємодія фільтрації категорій дизайну:

- Верхня/бічна панель навігації для перемикання категорій

- Фільтрація кліків хмари тегів

- Вибір у випадаючому меню

- Спосіб відображення сторінки з детальною інформацією про планування робіт:

- **Модальне вікно** відображення без навігації сторінками

- **Окрема сторінка з деталями** з підтримкою навігації ліворуч/праворуч

- Вкажіть інформацію: назву роботи, опис твору, технічні параметри (необов'язково), рекомендації щодо пов'язаної роботи (необов'язково)

- Визначте допоміжні модулі:

- **Сторінка «Про нас»:** Фотографія автора, особиста заява, досвід

- **Модуль контактів:** Електронна пошта, посилання на соціальні мережі, форма запиту на співпрацю (необов'язково)

**Вихід:** Чітка схема структури веб-сайту (включно зі списком сторінок/модулів) та опис процесу взаємодії

### Крок 3: Розробка візуальної системи (основний крок)

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

**Дії:**

**Дизайн кольорової системи:**

- Визначте основний колір, акцентний колір, колір фону та колір тексту на основі **"{естетичних уподобань}"** та робочих кольорових тонів

- Якщо сама робота барвиста, фон має бути нейтрального кольору (білий/сірий/чорний), щоб виділити її

- Якщо робота чорно-біла або виконана в холодних тонах, розгляньте теплі фонові кольори або акцентні кольори, щоб додати глибини

- Надайте конкретні колірні коди (шістнадцяткові) та описи сценаріїв використання

**Дизайн типографської системи:**

- Виберіть комбінації шрифтів, що відповідають стилю:

- **Шрифт заголовка:** Може бути більш виразним, що відображає стильовий тон (наприклад, шрифт із засічками демонструє елегантність, беззасічковий – сучасність, рукописний – теплоту)

- **Шрифт основного тексту:** Надавайте пріоритет читабельності, зазвичай вибирайте чистий шрифт без засічок

- Вкажіть точні назви шрифтів (наприклад, Playfair Display, Helvetica Neue, Noto Serif SC тощо)

- Визначити ієрархію розмірів шрифтів (наприклад, заголовки 32-48 пікселів, субтитри 18-24 пікселів, основний текст 14-16 пікселів)

**Принципи макета та пробілів:**

- Визначте співвідношення пробілів на основі естетичних уподобань:

- **Мінімалістичний стиль**: Велика кількість білого простору, менше робіт на екрані (2-4)

- **Багатий стиль**: Компактне розташування, більше робіт на екрані (6-12)

- Визначте конкретні значення для полів та інтервалів (наприклад, поле сторінки 80 пікселів, робочий інтервал 24 пікселі)

- Визначити метод вирівнювання (по центру, по лівому краю, з нерівномірним зміщенням тощо)

**Дизайн візуальних деталей:**

- Стиль робочої картки: закруглені/гострі кути, тінь/без тіні, рамка/без рамки

- Ефекти наведення курсора: масштабування, накладання, поява інформації, зміна кольору тощо.

- Анімація переходів: поступове поява/зникнення, ковзання, швидкість масштабування та криві поетапного посилення

- Стиль панелі навігації: фіксований/прихований, прозорий/суцільний, підкреслений/блоковий

**Загальне створення атмосфери:**

- **Якщо ви використовуєте художній стиль:** додайте ледь помітні текстури, нерівні елементи, креативну типографіку

- **Якщо ви використовуєте комерційний стиль:** Зберігайте стриманість, професіоналізм, наголошуючи на якості роботи та чіткості інформації

- **Якщо у вас особистий стиль:** Додайте намальовані від руки елементи, унікальні значки, характерні інтерактивні пасхальні яйця

**Стандарти якості:**

- Гармонійне поєднання кольорів, не більше 4 основних кольорів

- Комбінації шрифтів не більше 2-3 типів, чітка ієрархія

- Візуальні елементи об'єднані за стилем, уникаючи відчуття печворку

- Загальний дизайн повинен мати «пам'ятні моменти», але не надмірно красти враження

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

### Крок 4: Упорядкування робочого контенту та метаданих

**Мета:** Упорядкувати надані користувачами зразки робіт у структуровані дані, готуючи контент для створення веб-сайту.

**Дії:**

- Витягніть/упорядкуйте наступну інформацію для кожної роботи:

- **Робочий файл:** URL-адреса зображення або посилання на відео (з **"{work samples}"**)

- **Назва твору:** Використовуйте **"{список назв творів}"**, якщо вказано, інакше створіть стиглі описові назви

- **Категорія роботи:** Мітка відповідно до **"{категорій роботи}"** (підтримує кілька тегів)

- **Опис роботи (необов'язково):** Використовуйте **"{опис роботи}"**, якщо вказано, інакше залиште порожнім або згенеруйте короткий опис

- **Час створення/інформація про проект (необов'язково):** Додайте, якщо користувач надає інформацію

- Упорядкувати роботи за категоріями або хронологічним порядком, визначивши пріоритет відображення (що працює для виділення на головній сторінці)

- Якщо обсяг роботи великий (>20 частин), запропонуйте пагінацію або відкладене завантаження, щоб уникнути повільного початкового завантаження.

- Підготуйте особистий біографічний контент:

- Ім'я автора/сценічний псевдонім (з **"{personal information}"**)

- Особиста заява/творча філософія (з **"{personal bio}"**, запропонуйте доповнення користувача, якщо не надано)

- Контактна інформація (електронна пошта, Instagram, Behance тощо, з **"{contact information}"**)

**Вивід:** Структурований список робочих даних (у форматі JSON або таблиці), що містить усі обов’язкові поля.

---

###

### Крок 5: Створення веб-сайту портфоліо

**Мета:** Перетворити візуальний дизайн та контент на інтерактивний вебсайт.

**Дії:**

- Напишіть детальну інструкцію зі створення веб-сайту, включаючи:

- **Загальна структура:** Макет сторінки (головна сторінка, Про нас, Контакти тощо) та спосіб навігації

- **Візуальна система:** Повністю враховуйте параметри кольору, шрифту, макета та деталізації, розроблені на кроці 3

- **Логіка взаємодії:**

- Реалізація фільтрації за категоріями (фільтрація працює за допомогою кліків по тегах)

- Спосіб відображення деталей роботи після кліку (модальний або навігаційний)

- Ефекти та деталі анімації наведення курсора

- Правила адаптації до адаптивних елементів (як мобільні пристрої налаштовують макет)

- **Заповнення контентом:** Довідковий крок 4, організовані робочі дані та особиста інформація

- **Оптимізація продуктивності**: ліниве завантаження зображень, плавне прокручування, анімація завантаження тощо.

- Чітко визначте естетичні вимоги в інструкції, наприклад:

- «Загальна атмосфера повинна втілювати {естетичні ключові слова}, уникаючи шаблонного дизайну»

- «Ефекти наведення на робочу картку мають бути ледь помітними та витонченими, а не надмірно перебільшеними»

- «Переходи кольорів мають бути природними, анімація має бути плавною (рекомендується затримка 300-500 мс)»

- Виклик інструменту generateWebpage, передаючи:

- **інструкція:** Вище наведено детальні інструкції

- **посилання:** Якщо є ідентифікатори ремесел/матеріалів, передайте їх для надання контексту

**Стандарти якості:**

- Вебсайт завантажується та взаємодіє нормально

- Візуальна презентація відповідає дизайнерським вимогам, без очевидних стилістичних помилок

- Відображення роботи завершено, фільтрація категорій працює нормально

- Хороша адаптація до мобільних пристроїв

**Вихід:** Згенерований веб-сайт портфоліо (автоматично відображається в розмові).

---

## Вихідні характеристики

**Результати:**

1. **Вебсайт персонального портфоліо (основний результат):**

- Включає відображення роботи на головній сторінці, фільтрацію за категоріями, деталі роботи, особисту біографію, контактну інформацію та інші модулі

- Візуальний стиль тісно узгоджений з естетичними вподобаннями користувача

- Плавна взаємодія, адаптивний дизайн

- Посилання на веб-сторінку, яким можна безпосередньо поділитися

2. **Пояснення візуального дизайну (допоміжне):**

- Коротке пояснення дизайн-мислення: чому було обрано саме ці кольори, шрифти, макети

- Перелічіть основні параметри дизайну (кольорові коди, назви шрифтів, ключові розміри)

- Допомагає користувачам зрозуміти логіку дизайну або внести корективи в майбутньому

**Вимоги до формату:**

- Вебсайт — це інтерактивна HTML-сторінка, яка автоматично відображається в розмові

- Пояснення конструкції, представлене у стислому текстовому форматі, може містити перелік ключових параметрів

**Стандарти якості:**

- **Естетичний рівень:** Вебсайт представляє професійні, вишукані, запам'ятовувані візуальні ефекти, уникаючи шаблонного та посереднього вигляду

- **Функціональна повнота:** Основні функції, такі як відображення роботи, фільтрація за категоріями, перегляд деталей, працюють нормально

- **Досвід користувача:** Плавне завантаження, природна взаємодія, хороша адаптація до мобільних пристроїв

- **Точність змісту:** Усі роботи та текстова інформація є точними, без пропусків чи помилок

---

## Стиль та презентація (основний розділ)

### Естетична філософія

Дизайн веб-сайту портфоліо повинен відповідати принципу «робота – король, дизайн – допоміжний». Усі елементи дизайну (колір, шрифт, макет, анімація) повинні служити презентації роботи, а не затьмарювати її. Водночас, сам дизайн повинен мати достатній смак та деталізацію, що відображають професійні стандарти творця.

### Очки візуального дизайну

**Нанесення кольору:**

- Кольори фону зазвичай використовуються нейтральними (білий/світло-сірий/темно-сірий/чорний), що робить робочі кольори головними

- Акцентні кольори (кнопки, посилання, виділення) слід використовувати стримано, гармоніюючи з тонами робочих кольорів

- Уникайте надто яскравих або конфліктуючих колірних поєднань

- Може динамічно налаштовувати кольори інтерфейсу на основі основних кольорів роботи (розширена техніка)

**Вибір шрифту:**

- Надавайте пріоритет шрифтам з дизайнерським чуттям, але не надто показним

- **Рекомендації щодо англійських шрифтів**: Playfair Display (елегантний), Montserrat (сучасний), Lora (класичний), Raleway (чистий)

- **Рекомендації щодо китайських шрифтів:** Source Han Serif (елегантний), Source Han Sans (сучасний), LXGW WenKai (теплий), Zcool QingKe HuangYou (потужний)

- Комбінації шрифтів повинні бути контрастними (засічковий + беззасічковий або жирний + тонкий), але не більше 3 типів

**Естетика макета:**

- **Мінімалістичний стиль**: Велика кількість білого простору, 2-4 роботи на екрані, вирівнювання по центру, підкреслення простору для дихання

- **Стиль журналу**: сітка, однакові розміри робіт, акуратність та порядок, що підкреслює професіоналізм

- **Художній стиль**: нерегулярне розташування, різноманітні розміри робіт, може порушувати сітку, підкреслюючи креативність

- **Імерсивний стиль:** Повноекранна карусель, показуйте по одній роботі за раз, підкреслюючи вплив

- Незалежно від стилю, дотримуйтесь візуального балансу та ритму

**Деталі взаємодії:**

- **Ефекти наведення курсора мають бути ледь помітними та витонченими:**

- Невелике збільшення зображення (масштаб: 1.05) + напівпрозоре накладання + поступове поява заголовка

- Або: зміна насиченості/яскравості + виділення межі

- Уникайте надмірно перебільшеної анімації (обертання, перевертання, мерехтіння)

- Рекомендована тривалість анімації переходу 300-500 мс, з використанням плавного переходу з наростанням/згасанням.

- Прокручування має бути плавним, можна додавати ефекти паралакса для глибини

- Анімація завантаження має бути простою та елегантною, уникаючи яскравих значків завантаження

**Адаптивний дизайн:**

- **Настільний комп’ютер:** Повністю використовуйте переваги широкоекранного режиму, багатоколонкової сітки або відображення великих зображень

- **Планшет:** Розмістіть 2-3 колонки, зберігаючи візуальний баланс

- **Мобільні пристрої:** Одна або дві колонки, збільшення області для натискання, спрощення навігації

- Ключова інформація (титул, навігація, контакти) має бути чітко видимою на всіх пристроях

### Посилання на поширений стиль

- **Мінімалізм**: Велика кількість білого простору, чорний/білий/сірий основні кольори, шрифти без засічок, прості значки, видалення всіх декоративних елементів

- **Японська свіжість**: М'які тони (біла, світла деревина, матово-блакитний), рукописні шрифти, теплі ніжні деталі

- **Модний редагуючий матеріал**: Висока контрастність, жирні шрифти, асиметричне розташування, стиль чорно-білої фотографії

- **Вінтаж:** Старі текстури, теплі жовті тони, шрифти із засічками, зернистість, плівкова якість

- **Технологія/Футуризм**: Темний фон, флуоресцентні акцентні кольори, геометричні фігури, динамічні ефекти, елементи кіберпанку

- **Художня галерея**: Чисто білий фон, надвеликий білий простір, центроване відображення робіт, мінімальна навігація, імітація фізичного досвіду галереї

### Підводні камені дизайну, яких слід уникати

- ❌ Надмірне використання градієнтів, тіней, ефектів, що виглядає дешево

- ❌ Занадто багато або надто вигадливі шрифти, що впливають на читабельність

- ❌ Конфлікти кольорів або надмірна насиченість, зорова втома

- ❌ Заповнене приміщення, брак простору для дихання між роботами

- ❌ Анімації занадто складні або повільні, що впливає на враження

- ❌ Погана адаптація до мобільних пристроїв, занадто малий текст або кнопки важко натискати

- ❌ Надмірне проектування, коли дизайн перевертає всю увагу з роботи