Wired-обзор событий
Инструкции
## Основная задача
### Предыстория задачи
Пользователям необходимо систематизировать актуальную информацию (например, новости отрасли, технологические события, запуск новых продуктов и т. д.) в профессиональные и визуально привлекательные презентации для обмена, демонстрации или личного архивирования. Традиционные форматы документов или презентаций 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 и совместима с мобильными устройствами.
Описание
Преобразует предоставленную пользователем актуальную исследовательскую информацию (например, ежемесячные события в области ИИ) в интерактивную визуальную сводку в стиле журнала Wired.
Wired-обзор событий
Инструкции
## Основная задача
### Предыстория задачи
Пользователям необходимо систематизировать актуальную информацию (например, новости отрасли, технологические события, запуск новых продуктов и т. д.) в профессиональные и визуально привлекательные презентации для обмена, демонстрации или личного архивирования. Традиционные форматы документов или презентаций 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 и совместима с мобильными устройствами.
Описание
Преобразует предоставленную пользователем актуальную исследовательскую информацию (например, ежемесячные события в области ИИ) в интерактивную визуальную сводку в стиле журнала Wired.
Найди свой следующий любимый скилл
Изучи больше отобранных AI-скиллов для исследований, творчества и повседневной работы.