## Инструкции

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

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

**Конкретные цели:**

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

- Визуальный стиль в значительной степени соответствует эстетическим взглядам и творческому темпераменту создателя.

- Плавный интерактивный интерфейс, поддерживающий различные способы просмотра (сетка/кирпичная кладка/карусель и т. д.)

- Адаптивный дизайн, адаптированный для настольных компьютеров и мобильных устройств.

- Необязательно: укажите личную биографию, контактную информацию и другие вспомогательные модули.

**Основные ограничения:**

— Эстетика является ключевым конкурентным преимуществом; необходимо избегать шаблонного, посредственного дизайна.

- Методы презентации работы должны акцентировать внимание на самой работе, избегая излишнего дизайна, затмевающего содержание.

- Скорость загрузки и удобство просмотра должны быть обеспечены.

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

### Шаг 1: Понимание позиционирования создателя и его эстетических предпочтений

**Цель:** Глубоко понять позиционирование стиля создателя, целевую аудиторию и эстетические предпочтения, чтобы определить четкое направление для дальнейшего дизайна.

**Действия:**

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

- Внимательно прочтите предоставленное пользователем описание эстетических предпочтений, выделив ключевые слова:

- Общая атмосфера (например, минималистичная, винтажная, авангардная, теплая, холодная, художественная, коммерческая и т. д.)

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

- Цветовые тенденции (например, черно-бело-серый, цвета Моранди, высокая насыщенность, градиенты и т. д.)

- Предпочтения по компоновке (например, большое количество свободного пространства, плотный коллаж, симметричная, неправильная и т. д.)

- Если пользователь предоставляет ссылки на **{reference website links}**, посетите и проанализируйте их дизайн, методы взаимодействия и особенности компоновки.

- Провести всестороннюю оценку целевой аудитории (потенциальные клиенты, художественные учреждения, ценители искусства и т. д.), определив баланс между профессионализмом и доступностью.

**Результат:** Внутри компании сформировать четкий «эстетический профиль», содержащий 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 изображения или ссылка на видео (из **"{образцы работ}"**)

- **Название работы:** Используйте **"{список названий работ}", если он указан, в противном случае создайте краткие описательные названия.

- **Категория работы:** Метка в соответствии с **"{категории работы}"** (поддерживает несколько тегов)

- **Описание работы (необязательно):** Используйте поле **"{описание работы}", если оно указано, в противном случае оставьте его пустым или создайте краткое описание.

- **Информация о времени создания/проекте (необязательно):** Добавить, если пользователь предоставит

— Расположите работы по категориям или в хронологическом порядке, определив приоритет отображения (какие работы следует выделить на главной странице).

- Если объем работы большой (>20 единиц), предложите использовать постраничную загрузку или отложенную загрузку, чтобы избежать медленной первоначальной загрузки.

- Подготовьте содержание своей личной биографии:

- Имя автора/сценическое имя (из **"{личная информация}"**)

- Личное заявление/творческая философия (из **"{личная биография}"**, предложите дополнение от пользователя, если оно не предоставлено)

- Контактная информация (электронная почта, Instagram, Behance и т. д., от **"{контактная информация}"**)

**Результат:** Структурированный список рабочих данных (в формате 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 мс, с использованием анимационного сглаживания ease-in-out.

- Прокрутка должна быть плавной, можно добавить эффект параллакса для создания эффекта глубины.

— Анимация загрузки должна быть простой и элегантной, без броских значков загрузки.

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

- **Настольный режим:** В полной мере используйте преимущества широкоэкранного формата, многоколоночной сетки или отображения больших изображений.

- **Планшет:** Отрегулируйте отображение на 2-3 столбца, сохраняя визуальный баланс.

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

— Ключевая информация (заголовок, навигация, контакты) должна быть четко видна на всех устройствах.

### Общие стилистические ссылки

- **Минимализм:** Обилие свободного пространства, основные цвета: черный/белый/серый, шрифты без засечек, простые иконки, отсутствие всех декоративных элементов.

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

- **Модная фотосессия:** Высокий контраст, жирные шрифты, асимметричная компоновка, черно-белый стиль фотографии.

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

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

- **Художественная галерея:** Чисто белый фон, очень большое пустое пространство, центрированное отображение работ, минимальная навигация, имитирующая атмосферу реальной галереи.

### Ошибки проектирования, которых следует избегать

- ❌ Чрезмерное использование градиентов, теней, эффектов, создающее впечатление дешевизны.

- ❌ Слишком много или чрезмерно вычурных шрифтов, ухудшающих читаемость

- ❌ Цветовые конфликты или чрезмерная насыщенность, зрительная усталость

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

- ❌ Слишком сложные или медленные анимации ухудшают игровой процесс

- ❌ Плохая адаптация для мобильных устройств, слишком мелкий текст или трудно нажимаемые кнопки.

- ❌ Избыточное внимание к дизайну, когда дизайн отвлекает внимание от работы