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://youmind.club/__ext/unpkg.com/viz.js@2.1.2/viz.js
https://youmind.club/__ext/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 y de múltiples capas, presentados en un único archivo HTML autocontenido. Esta habilidad ofrece exclusivamente dos temas visuales intercambiables: Tecnología Oscura y Alto Contraste Claro, permitiendo la exploración dinámica de 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 grafos de conocimiento interactivos y de múltiples capas. Visualiza ideas principales con temas dinámicos y cadenas causales, todo en un único HTML compartible.
Habilidades relacionadas
Ver todo
InvestigaciónChispa | Desglose de hooks
Cuando nos disponemos a crear un vídeo, a menudo nos encontramos con esta situación: vemos claramente que un vídeo de referencia «sabe contar las cosas», pero cuando nos toca hacerlo a nosotros, solo podemos imitarlo por intuición. «Chispa | Desglose de hooks» está pensada para este paso. Dale un vídeo concreto de YouTube y primero confirmará cuál es el vídeo y leerá los subtítulos verificables. Después separará tres elementos que suelen mezclarse: Literal 30s: qué ocurre realmente entre 0:00 y 0:30 del vídeo. Intro: toda la apertura antes de entrar en el tema principal. Hook / Re-hook: uno o varios puntos estructurales que realmente se encargan de retener a la audiencia. Por eso, no interpretará automáticamente los primeros 30 segundos de todos los vídeos como Hook solo porque «todo el mundo dice que son los más importantes». Si el verdadero Hook aparece después del primer minuto, te lo indicará tal cual; y si faltan subtítulos o marcas de tiempo, señalará claramente la falta de pruebas en lugar de inventar una respuesta que parezca profesional. Una vez terminado el desglose de la apertura, continuará reconstruyendo con un esquema la estructura de contenido del vídeo completo: ¿avanza mediante una línea temporal, un experimento, pasos, comparaciones, una historia, una cadena de preguntas u otro recurso de organización? Por último, abstraerá estas estructuras en plantillas con [espacios]. La plantilla conserva el orden y la función de la estructura, no las experiencias, palabras, marcas, cifras, opiniones ni la autoridad del autor original. El resultado final no es un resumen del vídeo, sino un Hook Outline y una plantilla de estructura del vídeo completo que puedes entregar al siguiente paso del proceso creativo. Lo que no hace No hace lo siguiente: Escribir directamente un Hook nuevo final por ti; Puntuar o reescribir tu apertura con BRENS; Buscar a gran escala en todo un nicho o canal; Generar un guion completo; Generar diagramas, recursos, animaciones ni miniaturas. La búsqueda masiva de muestras de referencia corresponde a la Skill anterior «Chispa | Investigador de contenido de YouTube»; el perfeccionamiento de tu propio Hook corresponde a la Skill posterior adecuada.
InvestigaciónChispa｜Investigador YouTube
¿Te dispones a hacer un vídeo, pero no sabes cómo han abordado ya ese tema?\n\n«Chispa｜Investigador YouTube» entra realmente en YouTube para investigar: encuentra vídeos relevantes, lee sus subtítulos, analiza sus títulos y los primeros 30 segundos, reconstruye su estructura de contenido y detecta, a partir de varias muestras, los recursos que se repiten, las diferencias claras y los aspectos que todavía nadie ha resuelto bien.\n\nPuedes usarlo para:\n\nInvestigar qué contenidos sobre un tema se están utilizando repetidamente\nAnalizar en profundidad cómo está contado un vídeo\nRevisar los temas, títulos y hábitos de contenido de un canal\nDesglosar el Hook de los primeros 30 segundos y la estructura del vídeo completo\nEncontrar nuevos enfoques creativos en vídeos existentes\nInvestigar cómo volver a presentar tu propio vídeo terminado\n\nNo te dirá categóricamente que «este título funcionará seguro» solo porque un vídeo tenga muchas reproducciones. Si no se pueden obtener los subtítulos, las marcas de tiempo o los datos de rendimiento, también indicará claramente qué evidencias faltan.\n\nLo que recibirás no será una colección de resúmenes de vídeos, sino un informe de investigación de YouTube que puedes entregar directamente para trabajar en el siguiente paso: el tema, el Hook o el guion.\n\nIdeal para creadores de YouTube, responsables de planificación de vídeos, profesionales de medios propios y cualquier persona que, antes de grabar, quiera comprobar hasta dónde han llegado otros con ese tema.
Memoriza palabras con humor
Introduce una palabra inglesa y crea una tarjeta de memoria estilo cómic: la pronunciación aproximada, el significado y un ejemplo quedan dibujados en una misma escena continua (bocadillos de diálogo, letreros y onomatopeyas). Fuera de la imagen solo quedan una línea de información superior y una línea de pista para recordar. Se prioriza el impacto visual sobre el acabado refinado, siempre con contenido seguro para niños.
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://youmind.club/__ext/unpkg.com/viz.js@2.1.2/viz.js
https://youmind.club/__ext/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 y de múltiples capas, presentados en un único archivo HTML autocontenido. Esta habilidad ofrece exclusivamente dos temas visuales intercambiables: Tecnología Oscura y Alto Contraste Claro, permitiendo la exploración dinámica de 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 grafos de conocimiento interactivos y de múltiples capas. Visualiza ideas principales con temas dinámicos y cadenas causales, todo en un único HTML compartible.
Habilidades relacionadas
Ver todoInvestigaciónChispa | Desglose de hooks
Cuando nos disponemos a crear un vídeo, a menudo nos encontramos con esta situación: vemos claramente que un vídeo de referencia «sabe contar las cosas», pero cuando nos toca hacerlo a nosotros, solo podemos imitarlo por intuición. «Chispa | Desglose de hooks» está pensada para este paso. Dale un vídeo concreto de YouTube y primero confirmará cuál es el vídeo y leerá los subtítulos verificables. Después separará tres elementos que suelen mezclarse: Literal 30s: qué ocurre realmente entre 0:00 y 0:30 del vídeo. Intro: toda la apertura antes de entrar en el tema principal. Hook / Re-hook: uno o varios puntos estructurales que realmente se encargan de retener a la audiencia. Por eso, no interpretará automáticamente los primeros 30 segundos de todos los vídeos como Hook solo porque «todo el mundo dice que son los más importantes». Si el verdadero Hook aparece después del primer minuto, te lo indicará tal cual; y si faltan subtítulos o marcas de tiempo, señalará claramente la falta de pruebas en lugar de inventar una respuesta que parezca profesional. Una vez terminado el desglose de la apertura, continuará reconstruyendo con un esquema la estructura de contenido del vídeo completo: ¿avanza mediante una línea temporal, un experimento, pasos, comparaciones, una historia, una cadena de preguntas u otro recurso de organización? Por último, abstraerá estas estructuras en plantillas con [espacios]. La plantilla conserva el orden y la función de la estructura, no las experiencias, palabras, marcas, cifras, opiniones ni la autoridad del autor original. El resultado final no es un resumen del vídeo, sino un Hook Outline y una plantilla de estructura del vídeo completo que puedes entregar al siguiente paso del proceso creativo. Lo que no hace No hace lo siguiente: Escribir directamente un Hook nuevo final por ti; Puntuar o reescribir tu apertura con BRENS; Buscar a gran escala en todo un nicho o canal; Generar un guion completo; Generar diagramas, recursos, animaciones ni miniaturas. La búsqueda masiva de muestras de referencia corresponde a la Skill anterior «Chispa | Investigador de contenido de YouTube»; el perfeccionamiento de tu propio Hook corresponde a la Skill posterior adecuada.
InvestigaciónChispa｜Investigador YouTube
¿Te dispones a hacer un vídeo, pero no sabes cómo han abordado ya ese tema?\n\n«Chispa｜Investigador YouTube» entra realmente en YouTube para investigar: encuentra vídeos relevantes, lee sus subtítulos, analiza sus títulos y los primeros 30 segundos, reconstruye su estructura de contenido y detecta, a partir de varias muestras, los recursos que se repiten, las diferencias claras y los aspectos que todavía nadie ha resuelto bien.\n\nPuedes usarlo para:\n\nInvestigar qué contenidos sobre un tema se están utilizando repetidamente\nAnalizar en profundidad cómo está contado un vídeo\nRevisar los temas, títulos y hábitos de contenido de un canal\nDesglosar el Hook de los primeros 30 segundos y la estructura del vídeo completo\nEncontrar nuevos enfoques creativos en vídeos existentes\nInvestigar cómo volver a presentar tu propio vídeo terminado\n\nNo te dirá categóricamente que «este título funcionará seguro» solo porque un vídeo tenga muchas reproducciones. Si no se pueden obtener los subtítulos, las marcas de tiempo o los datos de rendimiento, también indicará claramente qué evidencias faltan.\n\nLo que recibirás no será una colección de resúmenes de vídeos, sino un informe de investigación de YouTube que puedes entregar directamente para trabajar en el siguiente paso: el tema, el Hook o el guion.\n\nIdeal para creadores de YouTube, responsables de planificación de vídeos, profesionales de medios propios y cualquier persona que, antes de grabar, quiera comprobar hasta dónde han llegado otros con ese tema.
Memoriza palabras con humor
Introduce una palabra inglesa y crea una tarjeta de memoria estilo cómic: la pronunciación aproximada, el significado y un ejemplo quedan dibujados en una misma escena continua (bocadillos de diálogo, letreros y onomatopeyas). Fuera de la imagen solo quedan una línea de información superior y una línea de pista para recordar. Se prioriza el impacto visual sobre el acabado refinado, siempre con contenido seguro para niños.
Encuentra tu próxima habilidad favorita
Explora más habilidades de IA seleccionadas para investigación, creación y trabajo cotidiano.