KnowledgeGraph
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. Construye 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
Recomendado por
nene@YouMind
Por qué recomendamos esta habilidad
Transforma artículos complejos en gráficos de conocimiento interactivos de múltiples capas, presentados en un único archivo HTML autónomo. Esta habilidad ofrece de forma única dos temas visuales intercambiables: Tecnología Oscura y Alto Contraste Claro, permitiendo una exploración dinámica de las ideas centrales a través de un modelo de explicación visualmente impactante y estructurado causalmente, completo con etiquetas de relaciones semánticas.
Transforma artículos complejos en gráficos de conocimiento interactivos y de múltiples capas. Visualiza ideas centrales con temas dinámicos y cadenas causales, todo en un único HTML compartible.
Habilidades relacionadas
Ver todo
InvestigaciónMapa mental
Transforma cualquier contenido complejo (artículos, videos, PDFs) en mapas mentales jerárquicos y claros. Visualiza información al instante, comprende conceptos clave y acelera tu aprendizaje sin esfuerzo.
Página webPresentación estilo TED
Transforma tus ideas en cautivadoras presentaciones estilo TED. Crea narrativas convincentes y visuales impactantes que inspiren y enganchen, todo con solo hacer clic en un botón.
Página webCreador de páginas explorables
Un informe explica. Una página permite que la gente averigüe por sí misma. YouMind ya puede crear páginas web. El Creador de Páginas Explorables decide qué construir: convierte un estudio, un conjunto de datos o un tema en una única página interactiva en la tradición de los gráficos de redacción y las explicaciones explorables: narrativa guiada por el desplazamiento, gráficos reales, controles que se pueden mover, fuentes que se pueden consultar. Planifica antes de codificar. Primero apruebas un plan de construcción: la pregunta única que responde la página, el momento revelador — el instante en que el lector debería sentir "oh" — un eje de desplazamiento de cinco a ocho secciones, de dos a cuatro interacciones cada una justificada por lo que el lector aprende al moverla, y un contrato de datos que enumera cada número y su origen. Luego crea un único archivo HTML autocontenido sin paso de compilación. Marcado semántico. Todos los números en una única constante DATA editable al principio. Revelaciones de desplazamiento que no se rompen en un teléfono. Cada control es un elemento de formulario real y operativo con teclado, con texto en vivo que describe su valor actual. La accesibilidad está integrada, no añadida: contraste 4.5:1, anillos de foco visibles, texto alternativo en todas partes, ningún significado se transmite solo con el color, se respeta el movimiento reducido, responsivo desde 360px. Antes de entregar, ejecuta una autoevaluación de cinco puntos e informa los resultados honestamente: ¿el momento revelador realmente impacta?, ¿la página sigue siendo legible con JavaScript desactivado?, ¿el orden de tabulación es sensato?, ¿cada número es rastreable?, ¿hay algo animado que el lector quiera detener. Dos reglas que no romperá: nunca inventa datos para hacer que un gráfico se vea bien, y te avisa cuando tus números contradicen tu borrador. Para investigadores, analistas, periodistas, educadores, fundadores independientes y consultores que quieren que su trabajo sea explorado en lugar de ser leído por encima.
KnowledgeGraph
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. Construye 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
Recomendado por
nene@YouMind
Por qué recomendamos esta habilidad
Transforma artículos complejos en gráficos de conocimiento interactivos de múltiples capas, presentados en un único archivo HTML autónomo. Esta habilidad ofrece de forma única dos temas visuales intercambiables: Tecnología Oscura y Alto Contraste Claro, permitiendo una exploración dinámica de las ideas centrales a través de un modelo de explicación visualmente impactante y estructurado causalmente, completo con etiquetas de relaciones semánticas.
Transforma artículos complejos en gráficos de conocimiento interactivos y de múltiples capas. Visualiza ideas centrales con temas dinámicos y cadenas causales, todo en un único HTML compartible.
Habilidades relacionadas
Ver todoInvestigaciónMapa mental
Transforma cualquier contenido complejo (artículos, videos, PDFs) en mapas mentales jerárquicos y claros. Visualiza información al instante, comprende conceptos clave y acelera tu aprendizaje sin esfuerzo.
Página webPresentación estilo TED
Transforma tus ideas en cautivadoras presentaciones estilo TED. Crea narrativas convincentes y visuales impactantes que inspiren y enganchen, todo con solo hacer clic en un botón.
Página webCreador de páginas explorables
Un informe explica. Una página permite que la gente averigüe por sí misma. YouMind ya puede crear páginas web. El Creador de Páginas Explorables decide qué construir: convierte un estudio, un conjunto de datos o un tema en una única página interactiva en la tradición de los gráficos de redacción y las explicaciones explorables: narrativa guiada por el desplazamiento, gráficos reales, controles que se pueden mover, fuentes que se pueden consultar. Planifica antes de codificar. Primero apruebas un plan de construcción: la pregunta única que responde la página, el momento revelador — el instante en que el lector debería sentir "oh" — un eje de desplazamiento de cinco a ocho secciones, de dos a cuatro interacciones cada una justificada por lo que el lector aprende al moverla, y un contrato de datos que enumera cada número y su origen. Luego crea un único archivo HTML autocontenido sin paso de compilación. Marcado semántico. Todos los números en una única constante DATA editable al principio. Revelaciones de desplazamiento que no se rompen en un teléfono. Cada control es un elemento de formulario real y operativo con teclado, con texto en vivo que describe su valor actual. La accesibilidad está integrada, no añadida: contraste 4.5:1, anillos de foco visibles, texto alternativo en todas partes, ningún significado se transmite solo con el color, se respeta el movimiento reducido, responsivo desde 360px. Antes de entregar, ejecuta una autoevaluación de cinco puntos e informa los resultados honestamente: ¿el momento revelador realmente impacta?, ¿la página sigue siendo legible con JavaScript desactivado?, ¿el orden de tabulación es sensato?, ¿cada número es rastreable?, ¿hay algo animado que el lector quiera detener. Dos reglas que no romperá: nunca inventa datos para hacer que un gráfico se vea bien, y te avisa cuando tus números contradicen tu borrador. Para investigadores, analistas, periodistas, educadores, fundadores independientes y consultores que quieren que su trabajo sea explorado en lugar de ser leído por encima.
Encuentra tu próxima habilidad favorita
Explora más habilidades de IA seleccionadas para investigación, creación y trabajo cotidiano.