Огляд подій у стилі Wired
Інструкції
## Основне завдання
### Фон завдання
Користувачам необхідно організувати своєчасну інформацію (наприклад, новини галузі, технологічні події, запуски продуктів тощо) на професійних та візуально вражаючих сторінках презентацій для спільного використання, відображення або особистого архівування. Традиційним форматам документів або PPT бракує інтерактивності та сучасного вигляду, тоді як веб-сторінки в стилі технологічних журналів можуть краще відображати часову шкалу та ієрархію інформації.
### Конкретні цілі
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 року») + Підзаголовок/Часовий діапазон
- **Основна область:** Вертикальна часова шкала + картки подій
- **Нижня область:** Пояснення джерела даних + час оновлення
- Макет часової шкали дизайну:
- Використовується вертикально центрована часова шкала, з вузлами дат, що відображаються ліворуч, та картками подій праворуч.
- Як варіант, можна використовувати чергування розташування (картки подій відображаються по черзі зліва направо, створюючи візуально більш динамічний ефект).
- Плануйте інтерактивні функції:
- Під час прокручування вузли часової шкали підсвічуються один за одним (ефект паралакса).
- Підсвічування при наведенні курсора миші на картки подій
Натисніть на картку, щоб розгорнути повний опис (якщо вміст довгий).
- Додатково: додайте кнопку фільтра категорії вгорі (фільтрувати події за тегом)
- Підтвердити адаптивні точки зупинки: настільний комп'ютер (>1024px), планшет (768-1024px), мобільний телефон (<768px)
**Стандарти якості**:
- Інформація чітко структурована, що дозволяє користувачам швидко знаходити ключові події.
- Логіка взаємодії інтуїтивно зрозуміла та не вимагає навчання.
- Безкомпромісний мобільний досвід
### Крок 3: Визначте стильові рекомендації журналу Wired
**Мета:** Чітко визначити всі детальні параметри візуального дизайну та забезпечити стилістичну узгодженість.
**дія**:
- Розробіть повний посібник зі стилю, що включає такі елементи:
**Кольорова схема**:
відкритий текст
Колір фону: космічний чорний #0D0D0D
Додатковий фон: вугільно-сірий #1A1A1A (для фонів листівок)
Основний колір тексту: чисто білий #FFFFFF
Колір додаткового тексту: сріблясто-сірий #B0B0B0
Акцентний колір 1: Електричний синій #00D9FF (для часової шкали, посилань та виділень)
Акцентний колір 2: неоново-зелений #39FF14 (для важливих етикеток)
Акцентний колір 3: Кібер-рожевий #FF006E (для особливо важливих подій)
Лінія межі/роздільника: темно-сірий #2A2A2A
```
**Система шрифтів**:
відкритий текст
Шрифт заголовка: Inter Black / Helvetica Neue Bold (жирний, сучасний)
Шрифт основного тексту: Inter Regular / SF Pro Text (чіткий та легкий для читання)
Шрифт часу/даних: JetBrains Mono / Courier New (моноширинний, технологічно натхненний)
```
**Візуальні елементи**:
- Часова шкала: Вертикальна лінія шириною 2 пікселі, електрично-синього кольору, з точками розміром 12 пікселів як вузлами.
- Картка події:
- Фон: вугільно-сірий #1A1A1A, з темно-сірою рамкою 1 піксель
- Ефект плавання: рамка стає електрично-блакитною, а картка трохи плаває (трансформація: translateY(-4px)).
- Внутрішнє поле: 24 пікселів
- Закруглені кути: 8 пікселів
- Тінь: 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
Інструкції
## Основне завдання
### Фон завдання
Користувачам необхідно організувати своєчасну інформацію (наприклад, новини галузі, технологічні події, запуски продуктів тощо) на професійних та візуально вражаючих сторінках презентацій для спільного використання, відображення або особистого архівування. Традиційним форматам документів або PPT бракує інтерактивності та сучасного вигляду, тоді як веб-сторінки в стилі технологічних журналів можуть краще відображати часову шкалу та ієрархію інформації.
### Конкретні цілі
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 року») + Підзаголовок/Часовий діапазон
- **Основна область:** Вертикальна часова шкала + картки подій
- **Нижня область:** Пояснення джерела даних + час оновлення
- Макет часової шкали дизайну:
- Використовується вертикально центрована часова шкала, з вузлами дат, що відображаються ліворуч, та картками подій праворуч.
- Як варіант, можна використовувати чергування розташування (картки подій відображаються по черзі зліва направо, створюючи візуально більш динамічний ефект).
- Плануйте інтерактивні функції:
- Під час прокручування вузли часової шкали підсвічуються один за одним (ефект паралакса).
- Підсвічування при наведенні курсора миші на картки подій
Натисніть на картку, щоб розгорнути повний опис (якщо вміст довгий).
- Додатково: додайте кнопку фільтра категорії вгорі (фільтрувати події за тегом)
- Підтвердити адаптивні точки зупинки: настільний комп'ютер (>1024px), планшет (768-1024px), мобільний телефон (<768px)
**Стандарти якості**:
- Інформація чітко структурована, що дозволяє користувачам швидко знаходити ключові події.
- Логіка взаємодії інтуїтивно зрозуміла та не вимагає навчання.
- Безкомпромісний мобільний досвід
### Крок 3: Визначте стильові рекомендації журналу Wired
**Мета:** Чітко визначити всі детальні параметри візуального дизайну та забезпечити стилістичну узгодженість.
**дія**:
- Розробіть повний посібник зі стилю, що включає такі елементи:
**Кольорова схема**:
відкритий текст
Колір фону: космічний чорний #0D0D0D
Додатковий фон: вугільно-сірий #1A1A1A (для фонів листівок)
Основний колір тексту: чисто білий #FFFFFF
Колір додаткового тексту: сріблясто-сірий #B0B0B0
Акцентний колір 1: Електричний синій #00D9FF (для часової шкали, посилань та виділень)
Акцентний колір 2: неоново-зелений #39FF14 (для важливих етикеток)
Акцентний колір 3: Кібер-рожевий #FF006E (для особливо важливих подій)
Лінія межі/роздільника: темно-сірий #2A2A2A
```
**Система шрифтів**:
відкритий текст
Шрифт заголовка: Inter Black / Helvetica Neue Bold (жирний, сучасний)
Шрифт основного тексту: Inter Regular / SF Pro Text (чіткий та легкий для читання)
Шрифт часу/даних: JetBrains Mono / Courier New (моноширинний, технологічно натхненний)
```
**Візуальні елементи**:
- Часова шкала: Вертикальна лінія шириною 2 пікселі, електрично-синього кольору, з точками розміром 12 пікселів як вузлами.
- Картка події:
- Фон: вугільно-сірий #1A1A1A, з темно-сірою рамкою 1 піксель
- Ефект плавання: рамка стає електрично-блакитною, а картка трохи плаває (трансформація: translateY(-4px)).
- Внутрішнє поле: 24 пікселів
- Закруглені кути: 8 пікселів
- Тінь: 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-навичок для досліджень, творчості та повсякденної роботи.