## Основная задача

### Предыстория задачи

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

### Конкретные цели

1. **Структурирование информации**: Организация исходной информации в хронологическом порядке и извлечение ключевых событий, дат и источников.

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

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

4. **Интерактивный интерфейс**: Поддерживает прокрутку, фильтрацию событий (опционально) и адаптивный дизайн.

### Ключевые ограничения

- Стиль должен соответствовать визуальной эстетике журнала Wired (темный фон, высокий контраст, технологичный вид).

— Хронологическая последовательность событий должна быть четкой и понятной, а сами события должны быть логически выстроены во времени.

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

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

Перед началом работы уточните у пользователя желаемую тему исследования и сроки его проведения. Начинайте исследование только после получения этих сведений.

### Шаг 1: Активное исследование и сбор информации

**Цель:** На основе тем и временных рамок, предоставленных пользователями, объективно и всесторонне собрать актуальную информацию, имеющую значение в определенный момент времени, и извлечь данные о ключевых событиях посредством динамического анализа, многомерного поиска и комплексной самопроверки.

**действие**:

1. **Определите область исследования:**

— Подтвердите тему, указанную пользователем (например, «Глобальные этапы развития ИИ», «Динамика развития индустрии электромобилей», «Прогресс в области технологий Web3»).

— Укажите временной диапазон (например, «прошлый месяц», «январь 2026 года», «4 квартал 2025 года»). Если пользователь не указывает диапазон, по умолчанию используется «последние 30 дней».

— Подтвердите свои предпочтения в отношении источников информации (например, «авторитетные СМИ», «отраслевые отчеты», «официальные объявления»). По умолчанию выбраны авторитетные СМИ.

2. **Анализ динамических измерений**:

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

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

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

Например, в рамках темы «транспортные средства на новых источниках энергии» следует определить ведущих мировых автопроизводителей, поставщиков аккумуляторов и разработчиков решений для автономного вождения.

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

Например, в рамках темы «Искусственный интеллект» следует определить такие подразделы, как большие модели, агенты, роботы, ИИ для науки и приложения ИИ.

- **Определение географического распределения**: Проанализируйте и перечислите основные страны и регионы мира, участвующие в данной теме.

*Например, для темы «микросхемная индустрия» следует определить ключевые регионы, такие как США, Китай, Япония, Южная Корея и Европа.*

- **Определение типов событий**: Задает распространенные типы событий в рамках этой темы, такие как «Запуск продукта», «Технологический прорыв», «Финансирование и слияния и поглощения», «Регулирование политики», «Динамика рынка», «Кадровые изменения» и т. д.

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

3. **Разработать и выполнить многораундовый поиск**:

- **Цель:** На основе «многомерного списка поисковых запросов» разработать и выполнить серию поисковых запросов для обеспечения всестороннего охвата.

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

— Используйте инструмент `googleSearch` для составления как минимум 5-8 поисковых запросов с разных точек зрения, комбинируя ключевые слова из разных областей.

- **Комплексный поиск**: Проведите широкий поиск (1-2 раза), используя основные ключевые слова.

- **Поиск с отслеживанием игроков**: Проводите целенаправленный поиск (2-3 раза) по выявленным «ключевым игрокам».

- **Поиск по подполям**: Выполните конкретный поиск (1-2 раза) по указанному "подполю".

- **Региональный динамический поиск**: Объединение тем с учетом «географического распределения» для поиска различных региональных точек зрения (1-2 раза).

- Установка параметра `freshness` обеспечивает актуальность информации (например, `freshness="pm"` означает информацию за последний месяц).

4. **Фильтрация и извлечение информации**:

- Выявляйте подлинные «события» (новости/объявления/пресс-релизы с четко указанной хронологией) в результатах поиска.

— Отфильтровывайте статьи, выражающие исключительно субъективное мнение, аналитические отчеты, дублирующуюся информацию и нерелевантный контент.

- Для каждого действительного события извлеките основную информацию: **Дата**, **Название события**, **Описание события**, **Категорийный тег**, **Ссылка на источник** и **Ключевые данные** (если есть).

5. **Подготовка и сортировка данных**:

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

- Дедупликация: Если несколько источников сообщают об одном и том же событии, выберите наиболее авторитетный или полный источник и объедините ключевую информацию.

6. **Комплексная самопроверка и дополнительный поиск:**

- **Цель:** После первоначального сбора данных проверить наличие каких-либо расхождений и дополнить информацию для обеспечения объективности и полноты.

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

- **Проверка на предвзятость игроков:** Проанализируйте список событий, чтобы выявить чрезмерную концентрацию на 1-2 «ключевых игроках». Если более 50% событий проводится одной и той же компанией, необходимо провести дополнительный поиск других игроков, которых могли упустить из виду.

- **Проверка на региональную предвзятость:** Проверьте, охватывает ли мероприятие только один регион. Если тема глобальная, но результаты показывают только точку зрения США, поиск необходимо дополнить поиском по другим ключевым регионам (таким как Китай и Европа).

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

- **Результат**: Дополненный и сбалансированный, более полный список событий.

**Стандарты качества**:

- Соберите 8-15 высококачественных и актуальных событий.

- Список мероприятий равномерно распределен по ключевым участникам, географическому распределению и типам мероприятий, без существенного смещения.

- Каждое мероприятие должно включать как минимум: дату, название, описание и источник.

Вся информация получена из надежных источников (авторитетные СМИ, официальные заявления, отраслевые отчеты).

События расположены в обратном хронологическом порядке (сначала самые новые).

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

### Шаг 2: Проектирование информационной архитектуры

**Цель:** Спланировать иерархию контента и логику взаимодействия на веб-странице.

**действие**:

- Определите структуру страницы:

- **Основная область**: Заголовок (например, «Глобальные этапы развития ИИ в январе 2026 года») + Подзаголовок/Временной диапазон

- **Основная область:** Вертикальная временная шкала + карточки событий

- **Нижняя область:** Описание источника данных + Время обновления

- Структура временной шкалы проектирования:

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

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

- Планирование интерактивных функций:

— При прокрутке узлы временной шкалы подсвечиваются один за другим (эффект параллакса).

- Подсвечивается при наведении курсора мыши на карточки событий.

Нажмите на карточку, чтобы развернуть полное описание (если оно длинное).

- Дополнительно: Добавьте кнопку фильтра по категориям вверху (фильтрация событий по тегам).

— Подтвердите адаптивные контрольные точки: настольные компьютеры (>1024 пикселей), планшеты (768–1024 пикселей), мобильные устройства (<768 пикселей)

**Стандарты качества**:

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

— Логика взаимодействия интуитивно понятна и не требует обучения.

- Безупречный мобильный опыт

### Шаг 3: Определите стиль оформления журнала Wired

**Цель:** Четко определить все детальные параметры визуального оформления и обеспечить стилистическую согласованность.

**действие**:

- Разработать полное руководство по стилю, включающее следующие элементы:

**Цветовая схема**:

простой текст

Цвет фона: Космический черный #0D0D0D

Вторичный фон: темно-серый #1A1A1A (для фона открыток)

Основной цвет текста: Чисто белый #FFFFFF

Дополнительный цвет текста: серебристо-серый #B0B0B0

Акцентный цвет 1: Электрический синий #00D9FF (для хронологии, ссылок и выделений)

Дополнительный цвет 2: неоново-зеленый #39FF14 (для важных этикеток)

Акцентный цвет 3: Кибер-розовый #FF006E (для особо важных событий)

Граница/разделительная линия: темно-серый #2A2A2A

```

**Шрифтовая система**:

простой текст

Шрифт заголовка: Inter Black / Helvetica Neue Bold (жирный, современный)

Шрифт основного текста: Inter Regular / SF Pro Text (четкий и легко читаемый).

Шрифт Time/Data: JetBrains Mono / Courier New (моноширинный, в стиле технологичных шрифтов)

```

**Визуальные элементы**:

- Временная шкала: вертикальная линия шириной 2 пикселя, ярко-синего цвета, с точками-узлами шириной 12 пикселей.

- Карточка события:

- Фон: угольно-серый #1A1A1A, с темно-серой рамкой шириной 1 пиксель.

- Эффект парения: рамка становится ярко-синей, и карточка слегка парит (transform: translateY(-4px)).

- Внутренний отступ: 24 пикселя

- Закругленные углы: 8 пикселей

- Shadow: 0 4px 20px rgba(0, 217, 255, 0.15)

- Стиль тега:

- Небольшая капсулообразная форма, полупрозрачный фон, текст акцентного цвета.

Например, неоново-зеленый цвет используется для обозначения «запуска продукта», а ярко-розовый — для обозначения «регулирования политики».

- Стиль ссылки:

- По умолчанию: Электрический синий, подчеркнутый

— При наведении курсора цвет становится ярче, а подчеркивание — толще.

**Анимационные эффекты**:

- При загрузке страницы: Заголовок плавно появляется, а временная шкала анимируется сверху вниз (0,8 с).

- При прокрутке: карточки событий появляются одна за другой (эффект постепенного появления, каждая с задержкой в ​​0,1 секунды).

- При наведении курсора: карта поднимается, а тень расширяется (переход: плавный переход 0,3 с).

### Шаг 4: Создание содержимого веб-страницы

**Цель:** Использовать инструмент generateWebpage для создания интерактивной страницы презентации, соответствующей стилю Wired.

**действие**:

- Интегрируйте структурированную информацию, полученную на шаге 1, с рекомендациями по стилю, изложенными на шаге 3, в четкие инструкции.

— Вызовите инструмент generateWebpage, передав следующие параметры:

- `инструкция`: Подробно описывает требования к странице, включая:

- Заголовок и подзаголовок страницы

- Расположение временной шкалы (по центру по вертикали или со смещением)

- Поля данных для каждого события (дата, заголовок, описание, теги, ссылка)

— Полное руководство по стилю Wired (цвет, типографика, визуальные элементы, анимация)

— Требования к взаимодействию (эффект плавания, анимация прокрутки, дополнительная функция фильтрации)

- Соответствующие требованиям

- `references`: Если пользователь предоставляет `@references`, передайте его в качестве источника данных.

— Убедитесь, что в инструкции четко указано:

— «В стиле журнала Wired: темный фон (#0D0D0D), акцентный цвет ярко-синего цвета (#00D9FF), жирный шрифт заголовка Inter Black»

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

Каждая карточка события включает в себя: дату, название, описание, категорию и ссылку на источник.

— «При наведении курсора рамка карточки становится ярко-синей и слегка приподнимается».

— «При загрузке страницы временная шкала отображается сверху вниз, а карточки событий появляются одна за другой, плавно переходя от одной к другой».

**Стандарты качества**:

— Созданная веб-страница идеально соответствует визуальному стилю журнала Wired.

- Вся информация о мероприятии достоверна, а ссылки на источники являются активными.

- Плавное взаимодействие и плавная анимация.

## Стиль и оформление

### Руководство по стилю журнала Wired

**Философия дизайна**:

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

**Принципы использования цвета:**

**Фон:** Темные тона создают профессиональное и захватывающее впечатление; избегайте чисто черного цвета (#000000), используйте слегка сероватый темный цвет (#0D0D0D).

- **Акцентные цвета**: Используйте неоновые цвета (синий, зеленый, розовый) в качестве визуального акцента, но не злоупотребляйте ими; соблюдайте сдержанность.

- **Текст:** Для обеспечения читаемости используйте чисто белый цвет для основного текста и серебристо-серый для второстепенного.

- **Иерархия**: Используйте цвет для различения уровней информации (заголовок > основной текст > нижний колонтитул)

**Принципы компоновки**:

- **Сравнение шрифтов**: Заголовки используют жирный шрифт без засечек (Inter Black), основной текст — обычный шрифт (Inter Regular), а данные — моноширинный шрифт (JetBrains Mono).

- **Размер шрифта:** Заголовки 48-64 пикселя, Подзаголовки 24-32 пикселя, Основной текст 16-18 пикселей, Сноски 12-14 пикселей

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

- **Выравнивание**: Заголовок по центру или по левому краю, основной текст по левому краю, данные по правому краю.

**Принципы компоновки**:

- **Система сетки**: Использует 12-колоночную сетку, но допускает нетрадиционные подходы (например, смещение временной шкалы и чередование карточек).

- **Пробелы**: Большое количество свободного пространства создает ощущение свободы; расстояние между карточками должно составлять не менее 40 пикселей.

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

**Принципы взаимодействия**:

- **Мгновенная обратная связь:** При наведении курсора и щелчке мышью должна обеспечиваться четкая визуальная обратная связь (изменение цвета, смещение, тень).

- **Естественная анимация:** Используется функция плавного сглаживания с длительностью 0,2-0,4 секунды.

- **Постепенное улучшение**: основной контент может отображаться без JavaScript; интерактивность — это вишенка на торте.

**Пример для справки**:

- Макет страниц статей на официальном сайте WIRED

- Официальная страница продукта Stripe на сайте (темный режим)

- Страница запуска продукта Apple (раздел «Хронология»)

### Шаг 5: Проверка и оптимизация

**Цель:** Проверить, соответствует ли сгенерированная веб-страница требованиям, и внести необходимые корректировки.

**действие**:

— Просмотрите сгенерированную веб-страницу и проверьте каждый пункт:

- **Визуальный стиль**: Соответствуют ли цвет фона, акцентный цвет и шрифт стилю Wired?

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

- **Интерактивный опыт**: Работают ли эффект плавания и анимация прокрутки корректно?

- **Адаптивный дизайн:** Правильно ли отображается на устройствах разных размеров?

- **Доступность ссылки:** Правильно ли происходит перенаправление при переходе по ссылке на источник?

- В случае обнаружения проблем, зафиксируйте конкретные необходимые корректировки:

— Например: «Цвет временной шкалы недостаточно яркий и нуждается в настройке на #00D9FF».

— Например: «Внутренние поля карточки на мобильном устройстве слишком велики и должны быть уменьшены до 16 пикселей».

— Если потребуется внести корректировки, снова вызовите инструмент generateWebpage, передав параметр `webpage_id` для редактирования.

**Стандарты качества**:

- Визуальный стиль на 100% соответствует эстетике журнала Wired.

— Все интерактивные функции работают корректно.

- Отсутствуют очевидные ошибки в верстке или недостающая информация.

### Стандарты качества

- **Полнота**: Каждое событие включает дату, название, описание и источник.

- **Точность**: Вся информация соответствует оригинальному материалу, ссылки доступны.

- **Отслеживаемость:** Каждое событие имеет четко определенный источник.

- **Визуальная согласованность:** Все элементы строго соответствуют стилистическим рекомендациям Wired.

- **Плавное взаимодействие:** Анимации плавные и имеют быстрое время отклика (<100 мс).

- **Доступность:** Контрастность текста соответствует стандартам WCAG AA и совместима с мобильными устройствами.