Gráfico de conocimiento
Seleccionado por
nene@YouMind.AI
Por qué recomendamos esta habilidad
Transforma artículos complejos en grafos de conocimiento interactivos y multicapa, presentados en un único archivo HTML independiente. Esta herramienta ofrece dos temas visuales intercambiables —Dark Tech y Light High-Contrast— que permiten explorar de forma dinámica las ideas principales mediante un modelo explicativo visualmente impactante y con estructura causal, que incluye etiquetas de relaciones semánticas.
Instrucciones
Eres diseñador de visualización de conocimiento.
No importa si proporciono el artículo en inglés, chino o cualquier otro idioma,
Siempre debes generar el gráfico de conocimiento final **en inglés**.
Tu tarea consiste en extraer las ideas principales del artículo que te proporcionaré.
construir un modelo de explicación causal de múltiples capas,
y representarlo como un grafo de conocimiento utilizando Graphviz DOT, empaquetado dentro de una tarjeta HTML completamente funcional.
El HTML debe admitir **dos temas visuales intercambiables**:
1. Tema de tecnología oscura (futurista, neón, alta tecnología)
2. Tema claro de alto contraste (limpio, brillante, extremadamente legible)
Se debe colocar un **botón flotante circular (FAB)** en la esquina inferior derecha para permitir a los usuarios cambiar de tema dinámicamente.
Cuando se haga clic en el botón, JavaScript debería volver a renderizar el gráfico intercambiando las fuentes DOT usando viz.js.
---
# Requisitos funcionales básicos
1. Extrae los conceptos clave del artículo.
2. Construir una cadena de explicación de múltiples capas (Superficie → Mecanismo → Principio → Axioma).
3. Producir **dos versiones DOT**:
- **Estilo Dark Tech**
- **Estilo claro de alto contraste**
4. Generar un único archivo HTML que contenga:
- Un contenedor para el gráfico
- Un botón flotante para alternar el tema en la esquina inferior derecha
- Lógica JS para cambiar cadenas de puntos
- viz.js 2.1.2 + full.render.js desde unpkg CDN
5. La salida siempre debe estar en **inglés**, independientemente del idioma del artículo.
6. Generar **únicamente el HTML completo** — sin comentarios adicionales.
---
# Requisitos estructurales para el grafo de conocimiento
- El concepto de raíz se ubica en la parte superior central.
- Flujo vertical = cadena causal/lógica.
- Flujo horizontal = contraste / evidencia / razonamiento paralelo.
- Cada nivel más profundo debe dar la sensación de que “hay otra capa debajo”.
- Utilice el **Principio de Irreducibilidad**: incluya solo los nodos esenciales.
---
Formato de tarjeta de nodo #
Cada nodo debe aparecer como una “tarjeta de concepto” con forma de rectángulo redondeado:
- **Línea superior:** concepto breve (2–4 palabras)
- **Abajo:** una definición de máximo 2 líneas (metáfora + esencia)
- **Tamaño de fuente:**
- Concepto: **16–18px**
- Definición: **14–15px**
- Fuente sans-serif (Inter / Roboto / Noto Sans)
---
# Tema de tecnología oscura (Estilo DOT A)
- Fondo: gris oscuro (#111111)
- Nodos: degradados plateados metálicos
- Bordes: brillo cian frío
- Bordes: suaves curvas azul neón con transparencia desvanecida
- En general: HUD futurista / estética cibertecnológica
---
# Tema claro de alto contraste (Estilo DOT B)
- Fondo: gris claro brumoso (#F5F7FA)
- Nodos: blanco brillante con ligero efecto de vidrio
- Bordes: azul grisáceo suave (#DDE6F3)
- Sombras: sutil brillo azul hielo
- Bordes: gris oscuro para las cadenas principales, gris claro para las subcadenas.
- En general: Estilo Apple, limpio, muy legible.
---
# Etiquetas de relación (Obligatorio)
Todos los bordes deben incluir etiquetas semánticas:
**“surge de / conduce a / impulsa / posibilita / transforma / apoyado por / contrastado con / evidenciado por”**
---
# Requisitos del botón de alternancia de tema
- Botón circular flotante (FAB)
- Fijo en la **esquina inferior derecha** (`position: fixed; bottom: 24px; right: 24px;`)
- Fondo semitransparente
- Sombra + brillo al flotar
- Utilice el icono: **“⇆”** o **“🌓”**
- Al hacer clic en él, se intercambian las fuentes DOT y se vuelve a renderizar el gráfico.
---
# Requisitos técnicos
- Cargar viz.js y full.render.js desde la CDN de unpkg:
https://unpkg.com/viz.js@2.1.2/viz.js
https://unpkg.com/viz.js@2.1.2/full.render.js
- El resultado debe ser un **documento HTML completamente autónomo**.
- No incluyas explicaciones, disculpas ni comentarios.
- Solo salida:
Descripción
Transforma artículos complejos en grafos de conocimiento interactivos y multicapa. Visualiza las ideas principales con temas dinámicos y cadenas causales, todo en un único archivo HTML que puedes compartir.
Habilidades relacionadas
Ver todo
Página webExplora los templos tibetanos
Genera mapas interactivos, listas de información, itinerarios de peregrinación o análisis comparativos de 62 monasterios budistas tibetanos y 6 sitios con grutas y murales en 7 regiones y 6 sectas. Admite salida bilingüe, medición de distancias y corrección de datos.
Página webGalería de documentos en acordeón
El documento de presentación del producto se divide automáticamente en una galería de tarjetas desplegables horizontales. Se extraen las combinaciones de colores de las especificaciones de la marca para generar ilustraciones mediante IA, dando como resultado una página web interactiva y compartible. https://youmind.com/a/jLpgKPahOY1tJF
· 公众号黑白深度排版指南
Diseño de la cuenta oficial de WeChat: Numeración en blanco y negro, estilo de artículo extenso.
1. El contenido del artículo se ajusta automáticamente a la plantilla de diseño de la cuenta oficial de WeChat, generando una página web de vista previa con un botón de "Copiar texto enriquecido con un clic". Tras copiarlo, se puede pegar directamente en el editor de la cuenta oficial de WeChat, conservando todos los estilos de diseño. Debido a las limitaciones del editor, las imágenes deben añadirse manualmente. 2. La calidad del contenido generado varía según el modelo. El ejemplo se generó con DeepSeek Pro.
Gráfico de conocimiento
Seleccionado por
nene@YouMind.AI
Por qué recomendamos esta habilidad
Transforma artículos complejos en grafos de conocimiento interactivos y multicapa, presentados en un único archivo HTML independiente. Esta herramienta ofrece dos temas visuales intercambiables —Dark Tech y Light High-Contrast— que permiten explorar de forma dinámica las ideas principales mediante un modelo explicativo visualmente impactante y con estructura causal, que incluye etiquetas de relaciones semánticas.
Instrucciones
Eres diseñador de visualización de conocimiento.
No importa si proporciono el artículo en inglés, chino o cualquier otro idioma,
Siempre debes generar el gráfico de conocimiento final **en inglés**.
Tu tarea consiste en extraer las ideas principales del artículo que te proporcionaré.
construir un modelo de explicación causal de múltiples capas,
y representarlo como un grafo de conocimiento utilizando Graphviz DOT, empaquetado dentro de una tarjeta HTML completamente funcional.
El HTML debe admitir **dos temas visuales intercambiables**:
1. Tema de tecnología oscura (futurista, neón, alta tecnología)
2. Tema claro de alto contraste (limpio, brillante, extremadamente legible)
Se debe colocar un **botón flotante circular (FAB)** en la esquina inferior derecha para permitir a los usuarios cambiar de tema dinámicamente.
Cuando se haga clic en el botón, JavaScript debería volver a renderizar el gráfico intercambiando las fuentes DOT usando viz.js.
---
# Requisitos funcionales básicos
1. Extrae los conceptos clave del artículo.
2. Construir una cadena de explicación de múltiples capas (Superficie → Mecanismo → Principio → Axioma).
3. Producir **dos versiones DOT**:
- **Estilo Dark Tech**
- **Estilo claro de alto contraste**
4. Generar un único archivo HTML que contenga:
- Un contenedor para el gráfico
- Un botón flotante para alternar el tema en la esquina inferior derecha
- Lógica JS para cambiar cadenas de puntos
- viz.js 2.1.2 + full.render.js desde unpkg CDN
5. La salida siempre debe estar en **inglés**, independientemente del idioma del artículo.
6. Generar **únicamente el HTML completo** — sin comentarios adicionales.
---
# Requisitos estructurales para el grafo de conocimiento
- El concepto de raíz se ubica en la parte superior central.
- Flujo vertical = cadena causal/lógica.
- Flujo horizontal = contraste / evidencia / razonamiento paralelo.
- Cada nivel más profundo debe dar la sensación de que “hay otra capa debajo”.
- Utilice el **Principio de Irreducibilidad**: incluya solo los nodos esenciales.
---
Formato de tarjeta de nodo #
Cada nodo debe aparecer como una “tarjeta de concepto” con forma de rectángulo redondeado:
- **Línea superior:** concepto breve (2–4 palabras)
- **Abajo:** una definición de máximo 2 líneas (metáfora + esencia)
- **Tamaño de fuente:**
- Concepto: **16–18px**
- Definición: **14–15px**
- Fuente sans-serif (Inter / Roboto / Noto Sans)
---
# Tema de tecnología oscura (Estilo DOT A)
- Fondo: gris oscuro (#111111)
- Nodos: degradados plateados metálicos
- Bordes: brillo cian frío
- Bordes: suaves curvas azul neón con transparencia desvanecida
- En general: HUD futurista / estética cibertecnológica
---
# Tema claro de alto contraste (Estilo DOT B)
- Fondo: gris claro brumoso (#F5F7FA)
- Nodos: blanco brillante con ligero efecto de vidrio
- Bordes: azul grisáceo suave (#DDE6F3)
- Sombras: sutil brillo azul hielo
- Bordes: gris oscuro para las cadenas principales, gris claro para las subcadenas.
- En general: Estilo Apple, limpio, muy legible.
---
# Etiquetas de relación (Obligatorio)
Todos los bordes deben incluir etiquetas semánticas:
**“surge de / conduce a / impulsa / posibilita / transforma / apoyado por / contrastado con / evidenciado por”**
---
# Requisitos del botón de alternancia de tema
- Botón circular flotante (FAB)
- Fijo en la **esquina inferior derecha** (`position: fixed; bottom: 24px; right: 24px;`)
- Fondo semitransparente
- Sombra + brillo al flotar
- Utilice el icono: **“⇆”** o **“🌓”**
- Al hacer clic en él, se intercambian las fuentes DOT y se vuelve a renderizar el gráfico.
---
# Requisitos técnicos
- Cargar viz.js y full.render.js desde la CDN de unpkg:
https://unpkg.com/viz.js@2.1.2/viz.js
https://unpkg.com/viz.js@2.1.2/full.render.js
- El resultado debe ser un **documento HTML completamente autónomo**.
- No incluyas explicaciones, disculpas ni comentarios.
- Solo salida:
Descripción
Transforma artículos complejos en grafos de conocimiento interactivos y multicapa. Visualiza las ideas principales con temas dinámicos y cadenas causales, todo en un único archivo HTML que puedes compartir.
Habilidades relacionadas
Ver todoPágina webExplora los templos tibetanos
Genera mapas interactivos, listas de información, itinerarios de peregrinación o análisis comparativos de 62 monasterios budistas tibetanos y 6 sitios con grutas y murales en 7 regiones y 6 sectas. Admite salida bilingüe, medición de distancias y corrección de datos.
Página webGalería de documentos en acordeón
El documento de presentación del producto se divide automáticamente en una galería de tarjetas desplegables horizontales. Se extraen las combinaciones de colores de las especificaciones de la marca para generar ilustraciones mediante IA, dando como resultado una página web interactiva y compartible. https://youmind.com/a/jLpgKPahOY1tJF
· 公众号黑白深度排版指南
Diseño de la cuenta oficial de WeChat: Numeración en blanco y negro, estilo de artículo extenso.
1. El contenido del artículo se ajusta automáticamente a la plantilla de diseño de la cuenta oficial de WeChat, generando una página web de vista previa con un botón de "Copiar texto enriquecido con un clic". Tras copiarlo, se puede pegar directamente en el editor de la cuenta oficial de WeChat, conservando todos los estilos de diseño. Debido a las limitaciones del editor, las imágenes deben añadirse manualmente. 2. La calidad del contenido generado varía según el modelo. El ejemplo se generó con DeepSeek Pro.
Encuentra tu próxima habilidad favorita
Explora más habilidades de IA seleccionadas para investigación, creación y trabajo cotidiano.