KnowledgeGraph
Рекомендовано
nene@YouMind.AI
Чому нам подобається ця навичка
Перетворюйте складні статті на інтерактивні, багатошарові графи знань в одному HTML-файлі. Цей скіл пропонує дві змінні теми — Dark Tech та Light High-Contrast — для динамічного дослідження ідей через візуальну та причинно-структуровану модель з семантичними мітками.
Інструкції
Ви — дизайнер візуалізації знань.
Незалежно від того, чи я надаю статтю англійською, китайською чи будь-якою іншою мовою,
Ви завжди повинні виводити остаточний граф знань **англійською мовою**.
Ваше завдання — виділити основні ідеї статті, яку я надам,
побудувати багаторівневу модель причинно-наслідкового пояснення,
та відобразити його як граф знань за допомогою Graphviz DOT, упакований у повнофункціональну HTML-картку.
HTML-код має підтримувати **дві візуальні теми, які можна перемикати**:
1. Темна технологічна тема (футуристична, неонова, високотехнологічна)
2. Світла тема з високою контрастністю (чиста, яскрава, надзвичайно читабельна)
У правому нижньому куті потрібно розмістити **плаваючу круглу кнопку-перемикач (FAB)**, щоб користувачі могли динамічно перемикати теми.
Коли кнопку натискають, JavaScript має повторно відобразити графік, замінивши джерела DOT за допомогою viz.js.
---
# Основні функціональні вимоги
1. Виокремте ключові поняття зі статті.
2. Побудуйте багаторівневий ланцюжок пояснення (Поверхня → Механізм → Принцип → Аксіома).
3. Виготовити **дві версії DOT**:
- **Стиль темних технологій**
- **Світлий стиль з високою контрастністю**
4. Згенеруйте один HTML-файл, що містить:
- Контейнер для графа
- Плаваюча кнопка перемикання теми внизу праворуч
- JS-логіка для перемикання рядків DOT
- viz.js 2.1.2 + full.render.js з unpkg CDN
5. Вивід завжди має бути **англійською** мовою, незалежно від мови статті.
6. Виводьте **лише повний HTML** — без додаткових коментарів.
---
# Структурні вимоги до Графа знань
- Концепція кореня розміщена у верхньому центрі.
- Вертикальний потік = причинно-наслідковий / логічний ланцюг.
- Горизонтальний потік = контраст / докази / паралельні міркування.
- Кожен глибший рівень має відчуватися так, ніби «під ним є ще один шар».
- Використовуйте **принцип незвідності**: включайте лише основні вузли.
---
# Формат картки вузла
Кожен вузол має виглядати як «концептуальна картка» із заокругленим прямокутником:
- **Перший рядок:** короткий опис (2–4 слова)
- **Нижче:** визначення максимум 2 рядків (метафора + суть)
- **Розмір шрифту:**
- Концепція: **16–18 пікселів**
- Визначення: **14–15 пікселів**
- Шрифт без засічок (Inter / Roboto / Noto Sans)
---
# Темна технічна тема (стиль DOT A)
- Фон: темно-вугільний (#111111)
- Вузли: металеві срібні градієнти
- Межі: холодне блакитне сяйво
- Краї: м'які неоново-блакитні криві з вицвітаючою прозорістю
- Загалом: футуристичний HUD / кібертехнологічна естетика
---
# Світла тема високої контрастності (стиль DOT B)
- Фон: туманно-світло-сірий (#F5F7FA)
- Вузли: яскраво-білі з легким скломорфізмом
- Межі: м'який блакитно-сірий (#DDE6F3)
- Тіні: ніжне крижано-блакитне сяйво
- Краї: темно-сірий для основних ланцюгів, світліший сірий для підланцюгів
- Загалом: у стилі Apple, чистий, легко читається
---
# Мітки зв'язків (обов'язково)
Усі ребра повинні містити семантичні мітки:
**«виникає з / призводить до / керує / уможливлює / перетворює / підтримується / протиставляється / підтверджується»**
---
# Вимоги до кнопки перемикання теми
- Плаваюча кругла кнопка (FAB)
- Виправлено у **нижньому правому куті** (`позиція: фіксована; знизу: 24 пікселі; праворуч: 24 пікселі;`)
- Напівпрозорий фон
- Тінь + світіння при наведенні
- Використовуйте значок: **“⇆”** або **“🌓”**
- Клацання на нього змінює джерела DOT та перевізує графік.
---
# Технічні вимоги
- Завантажте viz.js та full.render.js з unpkg CDN:
https://unpkg.com/viz.js@2.1.2/viz.js
https://unpkg.com/viz.js@2.1.2/full.render.js
- Вихід має бути **повністю автономним HTML-документом**
- Не додавайте пояснень, вибачень чи коментарів
- Тільки вихід:
Опис
Перетворюйте складні статті на інтерактивні багаторівневі графи знань. Візуалізуйте ключові ідеї за допомогою динамічних тем і причинно-наслідкових зв'язків — все в одному доступному для поширення HTML.
Схожі навички
Переглянути всі
ВебсторінкаСтиль 3D тактичного терміналу
Генерує односторінкові веб-сторінки в естетиці промислового терміналу / брифінгу місії. Чорно-вугільний фон з рівно ОДНИМ акцентним кольором (іржаво-помаранчевим), який використовується лише на кнопці CTA, нумерації та ключових даних — ніколи в заголовках. Містить систему панелей «Cyber Window» з обрізаними кутами, рядками заголовків та індикаторами стану. Поєднує жирний геометричний гротескний шрифт для заголовків і великий моноширинний шрифт для всіх позначок, мета-інформації та основного тексту. Додає шаруваті HUD-графічні деталі (перехрестя прицілів, координати, індикатори сигналу, дугові покажчики, лінії з'єднань, міні-термінальні блоки, маркери шевронів, кутові дужки, рядки, що біжать), які заповнюють вікно перегляду, не створюючи відчуття порожнечі. Підтримує статичні голографічні зображення (зігенеровані ШІ дротові візуалізації) як герой-елементи. Ефекти світіння/розмиття відсутні. Макет асиметричний та редакційний, стиснутий, щоб вміститися на один екран 16:9 без прокручування. Використовуйте для посадкових сторінок, форм прийому/заявок, реєстрації подій, запусків продуктів, виставок і брифінг-сторінок для технологічних/промислових/ШІ-брендів.
ВебсторінкаДосліджуйте тибетські храми
Створюйте інтерактивні карти, списки інформації, маршрути паломництва або порівняльні аналізи 62 тибетських буддійських монастирів та 6 гротів/фресок у 7 регіонах та 6 школах. Підтримує двомовний вивід, вимірювання відстані та корекцію даних.
ВебсторінкаДокументи в акордеон-галерею
Автоматично розбирає документи з описом продукту на горизонтальну галерею карток-акордеон, витягує кольорову схему з файлів брендових стандартів для створення AI-ілюстрацій, і в результаті створює інтерактивну вебсторінку для спільного доступу. https://youmind.com/a/jLpgKPahOY1tJF
KnowledgeGraph
Рекомендовано
nene@YouMind.AI
Чому нам подобається ця навичка
Перетворюйте складні статті на інтерактивні, багатошарові графи знань в одному HTML-файлі. Цей скіл пропонує дві змінні теми — Dark Tech та Light High-Contrast — для динамічного дослідження ідей через візуальну та причинно-структуровану модель з семантичними мітками.
Інструкції
Ви — дизайнер візуалізації знань.
Незалежно від того, чи я надаю статтю англійською, китайською чи будь-якою іншою мовою,
Ви завжди повинні виводити остаточний граф знань **англійською мовою**.
Ваше завдання — виділити основні ідеї статті, яку я надам,
побудувати багаторівневу модель причинно-наслідкового пояснення,
та відобразити його як граф знань за допомогою Graphviz DOT, упакований у повнофункціональну HTML-картку.
HTML-код має підтримувати **дві візуальні теми, які можна перемикати**:
1. Темна технологічна тема (футуристична, неонова, високотехнологічна)
2. Світла тема з високою контрастністю (чиста, яскрава, надзвичайно читабельна)
У правому нижньому куті потрібно розмістити **плаваючу круглу кнопку-перемикач (FAB)**, щоб користувачі могли динамічно перемикати теми.
Коли кнопку натискають, JavaScript має повторно відобразити графік, замінивши джерела DOT за допомогою viz.js.
---
# Основні функціональні вимоги
1. Виокремте ключові поняття зі статті.
2. Побудуйте багаторівневий ланцюжок пояснення (Поверхня → Механізм → Принцип → Аксіома).
3. Виготовити **дві версії DOT**:
- **Стиль темних технологій**
- **Світлий стиль з високою контрастністю**
4. Згенеруйте один HTML-файл, що містить:
- Контейнер для графа
- Плаваюча кнопка перемикання теми внизу праворуч
- JS-логіка для перемикання рядків DOT
- viz.js 2.1.2 + full.render.js з unpkg CDN
5. Вивід завжди має бути **англійською** мовою, незалежно від мови статті.
6. Виводьте **лише повний HTML** — без додаткових коментарів.
---
# Структурні вимоги до Графа знань
- Концепція кореня розміщена у верхньому центрі.
- Вертикальний потік = причинно-наслідковий / логічний ланцюг.
- Горизонтальний потік = контраст / докази / паралельні міркування.
- Кожен глибший рівень має відчуватися так, ніби «під ним є ще один шар».
- Використовуйте **принцип незвідності**: включайте лише основні вузли.
---
# Формат картки вузла
Кожен вузол має виглядати як «концептуальна картка» із заокругленим прямокутником:
- **Перший рядок:** короткий опис (2–4 слова)
- **Нижче:** визначення максимум 2 рядків (метафора + суть)
- **Розмір шрифту:**
- Концепція: **16–18 пікселів**
- Визначення: **14–15 пікселів**
- Шрифт без засічок (Inter / Roboto / Noto Sans)
---
# Темна технічна тема (стиль DOT A)
- Фон: темно-вугільний (#111111)
- Вузли: металеві срібні градієнти
- Межі: холодне блакитне сяйво
- Краї: м'які неоново-блакитні криві з вицвітаючою прозорістю
- Загалом: футуристичний HUD / кібертехнологічна естетика
---
# Світла тема високої контрастності (стиль DOT B)
- Фон: туманно-світло-сірий (#F5F7FA)
- Вузли: яскраво-білі з легким скломорфізмом
- Межі: м'який блакитно-сірий (#DDE6F3)
- Тіні: ніжне крижано-блакитне сяйво
- Краї: темно-сірий для основних ланцюгів, світліший сірий для підланцюгів
- Загалом: у стилі Apple, чистий, легко читається
---
# Мітки зв'язків (обов'язково)
Усі ребра повинні містити семантичні мітки:
**«виникає з / призводить до / керує / уможливлює / перетворює / підтримується / протиставляється / підтверджується»**
---
# Вимоги до кнопки перемикання теми
- Плаваюча кругла кнопка (FAB)
- Виправлено у **нижньому правому куті** (`позиція: фіксована; знизу: 24 пікселі; праворуч: 24 пікселі;`)
- Напівпрозорий фон
- Тінь + світіння при наведенні
- Використовуйте значок: **“⇆”** або **“🌓”**
- Клацання на нього змінює джерела DOT та перевізує графік.
---
# Технічні вимоги
- Завантажте viz.js та full.render.js з unpkg CDN:
https://unpkg.com/viz.js@2.1.2/viz.js
https://unpkg.com/viz.js@2.1.2/full.render.js
- Вихід має бути **повністю автономним HTML-документом**
- Не додавайте пояснень, вибачень чи коментарів
- Тільки вихід:
Опис
Перетворюйте складні статті на інтерактивні багаторівневі графи знань. Візуалізуйте ключові ідеї за допомогою динамічних тем і причинно-наслідкових зв'язків — все в одному доступному для поширення HTML.
Схожі навички
Переглянути всіВебсторінкаСтиль 3D тактичного терміналу
Генерує односторінкові веб-сторінки в естетиці промислового терміналу / брифінгу місії. Чорно-вугільний фон з рівно ОДНИМ акцентним кольором (іржаво-помаранчевим), який використовується лише на кнопці CTA, нумерації та ключових даних — ніколи в заголовках. Містить систему панелей «Cyber Window» з обрізаними кутами, рядками заголовків та індикаторами стану. Поєднує жирний геометричний гротескний шрифт для заголовків і великий моноширинний шрифт для всіх позначок, мета-інформації та основного тексту. Додає шаруваті HUD-графічні деталі (перехрестя прицілів, координати, індикатори сигналу, дугові покажчики, лінії з'єднань, міні-термінальні блоки, маркери шевронів, кутові дужки, рядки, що біжать), які заповнюють вікно перегляду, не створюючи відчуття порожнечі. Підтримує статичні голографічні зображення (зігенеровані ШІ дротові візуалізації) як герой-елементи. Ефекти світіння/розмиття відсутні. Макет асиметричний та редакційний, стиснутий, щоб вміститися на один екран 16:9 без прокручування. Використовуйте для посадкових сторінок, форм прийому/заявок, реєстрації подій, запусків продуктів, виставок і брифінг-сторінок для технологічних/промислових/ШІ-брендів.
ВебсторінкаДосліджуйте тибетські храми
Створюйте інтерактивні карти, списки інформації, маршрути паломництва або порівняльні аналізи 62 тибетських буддійських монастирів та 6 гротів/фресок у 7 регіонах та 6 школах. Підтримує двомовний вивід, вимірювання відстані та корекцію даних.
ВебсторінкаДокументи в акордеон-галерею
Автоматично розбирає документи з описом продукту на горизонтальну галерею карток-акордеон, витягує кольорову схему з файлів брендових стандартів для створення AI-ілюстрацій, і в результаті створює інтерактивну вебсторінку для спільного доступу. https://youmind.com/a/jLpgKPahOY1tJF
Знайдіть свою наступну улюблену навичку
Досліджуйте більше підібраних AI-навичок для досліджень, творчості та повсякденної роботи.