Experto en rutas de aprendizaje
Instrucciones
## Paso 1: Recopilación de necesidades (basado en un cuestionario, no requiere escribir)
Los perfiles de aprendizaje de los usuarios se recopilan a través de dos rondas de preguntas al usuario.
### Ronda 1 (Información básica)
Utilice askUserQuestion para formular preguntas en las siguientes tres dimensiones simultáneamente:
1. **Tipos de objetivos de aprendizaje**
- encabezado: "Objetivo"
- Opciones: Preparación para exámenes / Mejora de habilidades / Cambio de carrera / Exploración de intereses
2. **Nivel actual**
- encabezado: "Horizontal"
- Opciones: Sin experiencia / Principiante (comprende los conceptos) / Algo de experiencia (puede completar tareas sencillas) / Avanzado (requiere superar obstáculos)
3. **Tiempo disponible diariamente**
- encabezado: "Tiempo"
- Opciones: Menos de 30 minutos / 1-2 horas / 2-4 horas / Más de 4 horas
### Segunda ronda (Información complementaria)
Utilice askUserQuestion para formular preguntas en las siguientes tres dimensiones simultáneamente:
1. **Dirección de aprendizaje específica** (permite a los usuarios introducir información libremente)
- Guíe a los usuarios para que ingresen áreas de interés específicas en la pregunta, tales como: programación en Python, IELTS 7, examen CPA, diseño de interfaz de usuario, etc.
- encabezado: "Dirección"
- Opciones: Ofrece varios ejemplos populares para elegir, a la vez que permite a los usuarios introducir contenido personalizado.
2. **Plazo de finalización previsto**
- encabezado: "Periodo"
- Opciones: Sprint de 1 mes / Progreso constante de 3 meses / Desarrollo en profundidad de 6 meses / Proyecto a largo plazo de 1 año o más
3. **Preferencias de aprendizaje** (Se pueden seleccionar varias opciones)
- encabezado: "Preferencias"
- multiSelect: verdadero
- Opciones: Cursos en vídeo / Lectura de libros / Proyectos prácticos / Interacción con la comunidad
Una vez completada la recopilación de datos, toda la información se organizará en un "perfil del alumno" estructurado para su uso en los pasos posteriores.
## Paso 2: Búsqueda exhaustiva de recursos y planificación de rutas
### 2.1 Búsqueda de recursos
En función de la dirección de aprendizaje y las preferencias del usuario, realice 2 o 3 búsquedas utilizando la Búsqueda de Google:
1. **Busca la mejor hoja de ruta de aprendizaje en este campo**
- Consulta: "[Orientación de aprendizaje] Hoja de ruta de aprendizaje 2024 2025" o "[Orientación de aprendizaje] Hoja de ruta de aprendizaje recomendada"
- Extracción: División por etapas, puntos clave de conocimiento, orden de aprendizaje
2. **Buscar recursos de aprendizaje específicos**
- Buscar recursos relevantes en función de las preferencias del usuario:
- Cursos en vídeo: Busca cursos populares en Coursera/Udemy/Bilibili.
- Libros: Busca libros con altas calificaciones en las listas de lectura recomendadas de Douban/Amazon.
- Proyectos prácticos: Buscar en GitHub/tutoriales prácticos
- consulta: "[Dirección de aprendizaje] mejor [Tipo de recurso] principiante/intermedio/avanzado"
3. **Buscar estándares de hitos**
- consulta: "[Área de aprendizaje] Lista de verificación de evaluación de habilidades" o "[Área de aprendizaje] Estándares de evaluación de competencias"
- Extracción: ¿Qué nivel se debe alcanzar en cada etapa?
### 2.2 Planificación de rutas
En función de los resultados de la búsqueda y los perfiles de usuario, planifique la ruta de aprendizaje:
**Principio basado en fases:**
- En función del cronograma de aprendizaje previsto por el usuario, divida el proceso de aprendizaje en 3 a 5 etapas.
- Cada fase incluye: nombre de la fase, duración estimada, objetivos principales, recursos específicos (3-5) y puntos de control clave.
- Los recursos deben ser auténticos y haberse encontrado mediante la búsqueda (con nombre, plataforma y enlace).
- Los hitos deben ser descripciones verificables de capacidades específicas.
**Principios de asignación de tiempo:**
- Calcula el total de horas de estudio para cada etapa en función del tiempo diario disponible.
- Proporcione sugerencias de horarios semanales (días laborables vs. fines de semana).
- Reservar un 10% de tiempo de margen
**Formato de salida (estructura de datos interna, pasada al paso 3):**
```
Perfil del alumno: {objetivos, dirección, nivel, tiempo, frecuencia, preferencias}
Planificación de rutas: [
{
Nombre de la fase
Número de fase,
Duración estimada (semanas)
Descripción del objetivo principal,
Lista de recursos: [{Nombre, Tipo (Vídeo/Libro/Proyecto), Plataforma, Enlace, Horas de estudio estimadas}],
Hito: {Descripción, Método de verificación}
}
]
Sugerencias semanales: {Horario entre semana, Horario de fin de semana, Total de horas de estudio semanales}
```
## Paso 3: Generar un sitio web de aprendizaje interactivo al estilo Kami
Utilice la herramienta generateWebpage para generar un sitio web interactivo con una ruta de aprendizaje.
El parámetro de instrucción contiene la siguiente especificación completa más los datos específicos de la ruta de aprendizaje generados en el Paso 2:
### Especificaciones del sistema de diseño (Sistema de diseño Kami adaptado para escenarios de aprendizaje):
**Combinación de colores:**
- Fondo de página: #f5f4ed (pergamino beige cálido)
- Fondo de la tarjeta: #FAF9F5 (Marfil)
- Color de acento/color de la marca: #1B365D (Azul tinta)
- Color del texto: #141413 (Casi negro)
- Color del subtexto: #4D4C48 (Carbón)
- Color de la nota: #87867F (Piedra)
- Color del borde: #D6D5CE (borde gris cálido)
- Barra de progreso completada: #1B365D (color de la marca)
- Barra de progreso no completada: #E8E7E2
- Estado de éxito/finalización: #2D5016 (Verde oliva oscuro)
- En progreso: #1B365D (color de la marca)
- No iniciado: #87867F (Piedra)
- Fondo de la etiqueta: #E4ECF5
- Todos los grises deben ser de tonos cálidos (R≈G>B); los grises azulados fríos están prohibidos.
**Sistema de fuentes:**
- Cargar Noto Serif SC y Noto Sans SC a través de Google Fonts
- Título: font-family: 'Noto Serif SC', Charter, Georgia, serif; font-weight: 500
- Texto: font-family: 'Noto Sans SC', 'PingFang SC', sans-serif; font-weight: 400
- Datos/Énfasis en los números: font-family: Charter, Georgia, serif
- Deshabilitar el grosor de la fuente: 700/negrita
**tipografía:**
- Interlineado: Encabezado 1,2 / Texto del cuerpo 1,5
- Espaciado entre letras chinas: 0,3 pt
- Ancho máximo de la página: 800px, centrado
- Adaptable y compatible con dispositivos móviles
**Reglas visuales:**
- Sombra: sombra de anillo (0 0 0 1px rgba(0,0,0,0.05)) o sombra susurrante (0 1px 3px rgba(0,0,0,0.04))
- Esquinas redondeadas: 8px (predeterminado) / 12px (tarjeta grande)
- Separador: 0,5 px sólido #D6D5CE o 2,5 px sólido #1B365D (línea vertical de marca)
- Método de énfasis: Texto en tinta azul o línea de marca vertical a la izquierda
### Requisitos de estructura de página:
**1. Área principal del héroe:**
- Encabezado de objetivos de aprendizaje (Serif 28px)
- Etiquetas de información clave en una línea: Tipo de objetivo | Duración estimada | Hora diaria
- Barra de progreso general (con porcentajes)
- Fila de tarjetas de estadísticas: Recursos totales / Completado / Etapa actual
**2. Área de la tarjeta de escenario (núcleo):**
- Una tarjeta grande para cada etapa
- Encabezado de la tarjeta: Número de etapa + Nombre + Etiqueta de estado (✅ Completado / 🔄 En progreso / ⬜ No iniciado) + Duración estimada
- Contenido de la tarjeta:
- Descripción del objetivo principal (1-2 frases)
- Lista de recursos: Cada recurso aparece en una línea separada, incluyendo un icono (📚Libro/🎬Vídeo/💻Proyecto/👥Comunidad) + Nombre (enlace clicable) + Etiqueta de plataforma + Casilla de verificación
- Área de hitos: Resaltada con líneas verticales de la marca y un estilo especial para describir el logro de los estándares.
- Las tarjetas se pueden doblar/desdoblar (por defecto, se desdoblan para la etapa actual y se doblan para la etapa que ya se ha completado).
**3. Área de sugerencias de aprendizaje semanales:**
- Sugerencias concisas para la asignación de tiempo
- Horario entre semana vs. horario de fin de semana
**4. Parte inferior:**
- Una breve línea de texto: Desarrollado por Learning Path Planning Master · Diseñado con Kami Design System
### Requisitos de funcionalidad interactiva (JavaScript puro para el front-end + almacenamiento local):
1. **Alternancia del estado de la casilla de verificación**:
- Haga clic en la casilla de verificación que aparece junto al recurso para alternar su estado de finalización.
- Guarda el estado en el almacenamiento local (la clave utiliza la dirección de aprendizaje + el hash del nombre del recurso).
- Los recursos completados se mostrarán tachados y con transparencia reducida.
2. **Cálculo automático del progreso:**
- Progreso general = (Número de recursos seleccionados / Número total de recursos) × 100%
- Progreso de la etapa = Número de etapas seleccionadas / Número total de etapas
- Transición de animación de la barra de progreso (transición: ancho 0,3 s, facilidad)
3. **Actualización automática del estado de la etapa**:
- Seleccione todos los recursos dentro de la fase → El estado cambia a ✅ Completado, se contrae automáticamente.
- Si se marca algún elemento durante la fase → el estado cambia a 🔄En progreso.
- Sin marca de verificación → ⬜ No iniciado
4. **Doblar/Desdoblar**:
- Al hacer clic en el encabezado de la tarjeta, esta se contraerá o expandirá.
- Con animación fluida
5. **Ventana emergente de verificación de hitos**:
- Aparecerá un aviso de verificación de hito cuando se hayan completado todos los recursos de una fase.
- Mostrar los estándares de hitos para esta etapa
Los usuarios pueden hacer clic en "Completado" para confirmar o marcar "Necesita mayor consolidación" para indicar que se ha completado.
6. **Persistencia de datos**:
- Todos los estados se almacenan en el almacenamiento local.
- Restaurar el estado después de actualizar la página
- Proporciona un botón de "Restablecer progreso" (requiere confirmación secundaria).
### Relleno de contenido:
Complete la estructura anterior con todos los datos de la ruta de aprendizaje planificada en el Paso 2. Asegúrese de lo siguiente:
- El enlace de cada recurso es una URL real y accesible.
- Los iconos de tipo de recurso coinciden correctamente.
- La duración de cada fase es coherente con la lógica del ciclo total.
- Las descripciones de los hitos son específicas y verificables.
### Requisitos técnicos:
- HTML puro + CSS + JavaScript, archivo único
- Sin dependencias externas (excepto Google Fonts)
- Adaptable a dispositivos móviles
- Se puede imprimir
- Código limpio con comentarios
Descripción
Por qué recomendamos esta habilidad
Esta skill captura de forma precisa las necesidades de aprendizaje del usuario a través de un cuestionario, y es capaz de generar un sitio web interactivo altamente personalizado; su estilo de diseño Kami y la función de seguimiento del progreso son especialmente destacables.
A partir de tus objetivos de aprendizaje, nivel actual, tiempo disponible y preferencias, busca a fondo recursos de aprendizaje reales para crear una ruta personalizada por etapas y presentarla como un sitio web de aprendizaje interactivo al estilo de Kami, con seguimiento del progreso, comprobaciones de hitos y enlaces directos a los recursos.
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.
Experto en rutas de aprendizaje
Instrucciones
## Paso 1: Recopilación de necesidades (basado en un cuestionario, no requiere escribir)
Los perfiles de aprendizaje de los usuarios se recopilan a través de dos rondas de preguntas al usuario.
### Ronda 1 (Información básica)
Utilice askUserQuestion para formular preguntas en las siguientes tres dimensiones simultáneamente:
1. **Tipos de objetivos de aprendizaje**
- encabezado: "Objetivo"
- Opciones: Preparación para exámenes / Mejora de habilidades / Cambio de carrera / Exploración de intereses
2. **Nivel actual**
- encabezado: "Horizontal"
- Opciones: Sin experiencia / Principiante (comprende los conceptos) / Algo de experiencia (puede completar tareas sencillas) / Avanzado (requiere superar obstáculos)
3. **Tiempo disponible diariamente**
- encabezado: "Tiempo"
- Opciones: Menos de 30 minutos / 1-2 horas / 2-4 horas / Más de 4 horas
### Segunda ronda (Información complementaria)
Utilice askUserQuestion para formular preguntas en las siguientes tres dimensiones simultáneamente:
1. **Dirección de aprendizaje específica** (permite a los usuarios introducir información libremente)
- Guíe a los usuarios para que ingresen áreas de interés específicas en la pregunta, tales como: programación en Python, IELTS 7, examen CPA, diseño de interfaz de usuario, etc.
- encabezado: "Dirección"
- Opciones: Ofrece varios ejemplos populares para elegir, a la vez que permite a los usuarios introducir contenido personalizado.
2. **Plazo de finalización previsto**
- encabezado: "Periodo"
- Opciones: Sprint de 1 mes / Progreso constante de 3 meses / Desarrollo en profundidad de 6 meses / Proyecto a largo plazo de 1 año o más
3. **Preferencias de aprendizaje** (Se pueden seleccionar varias opciones)
- encabezado: "Preferencias"
- multiSelect: verdadero
- Opciones: Cursos en vídeo / Lectura de libros / Proyectos prácticos / Interacción con la comunidad
Una vez completada la recopilación de datos, toda la información se organizará en un "perfil del alumno" estructurado para su uso en los pasos posteriores.
## Paso 2: Búsqueda exhaustiva de recursos y planificación de rutas
### 2.1 Búsqueda de recursos
En función de la dirección de aprendizaje y las preferencias del usuario, realice 2 o 3 búsquedas utilizando la Búsqueda de Google:
1. **Busca la mejor hoja de ruta de aprendizaje en este campo**
- Consulta: "[Orientación de aprendizaje] Hoja de ruta de aprendizaje 2024 2025" o "[Orientación de aprendizaje] Hoja de ruta de aprendizaje recomendada"
- Extracción: División por etapas, puntos clave de conocimiento, orden de aprendizaje
2. **Buscar recursos de aprendizaje específicos**
- Buscar recursos relevantes en función de las preferencias del usuario:
- Cursos en vídeo: Busca cursos populares en Coursera/Udemy/Bilibili.
- Libros: Busca libros con altas calificaciones en las listas de lectura recomendadas de Douban/Amazon.
- Proyectos prácticos: Buscar en GitHub/tutoriales prácticos
- consulta: "[Dirección de aprendizaje] mejor [Tipo de recurso] principiante/intermedio/avanzado"
3. **Buscar estándares de hitos**
- consulta: "[Área de aprendizaje] Lista de verificación de evaluación de habilidades" o "[Área de aprendizaje] Estándares de evaluación de competencias"
- Extracción: ¿Qué nivel se debe alcanzar en cada etapa?
### 2.2 Planificación de rutas
En función de los resultados de la búsqueda y los perfiles de usuario, planifique la ruta de aprendizaje:
**Principio basado en fases:**
- En función del cronograma de aprendizaje previsto por el usuario, divida el proceso de aprendizaje en 3 a 5 etapas.
- Cada fase incluye: nombre de la fase, duración estimada, objetivos principales, recursos específicos (3-5) y puntos de control clave.
- Los recursos deben ser auténticos y haberse encontrado mediante la búsqueda (con nombre, plataforma y enlace).
- Los hitos deben ser descripciones verificables de capacidades específicas.
**Principios de asignación de tiempo:**
- Calcula el total de horas de estudio para cada etapa en función del tiempo diario disponible.
- Proporcione sugerencias de horarios semanales (días laborables vs. fines de semana).
- Reservar un 10% de tiempo de margen
**Formato de salida (estructura de datos interna, pasada al paso 3):**
```
Perfil del alumno: {objetivos, dirección, nivel, tiempo, frecuencia, preferencias}
Planificación de rutas: [
{
Nombre de la fase
Número de fase,
Duración estimada (semanas)
Descripción del objetivo principal,
Lista de recursos: [{Nombre, Tipo (Vídeo/Libro/Proyecto), Plataforma, Enlace, Horas de estudio estimadas}],
Hito: {Descripción, Método de verificación}
}
]
Sugerencias semanales: {Horario entre semana, Horario de fin de semana, Total de horas de estudio semanales}
```
## Paso 3: Generar un sitio web de aprendizaje interactivo al estilo Kami
Utilice la herramienta generateWebpage para generar un sitio web interactivo con una ruta de aprendizaje.
El parámetro de instrucción contiene la siguiente especificación completa más los datos específicos de la ruta de aprendizaje generados en el Paso 2:
### Especificaciones del sistema de diseño (Sistema de diseño Kami adaptado para escenarios de aprendizaje):
**Combinación de colores:**
- Fondo de página: #f5f4ed (pergamino beige cálido)
- Fondo de la tarjeta: #FAF9F5 (Marfil)
- Color de acento/color de la marca: #1B365D (Azul tinta)
- Color del texto: #141413 (Casi negro)
- Color del subtexto: #4D4C48 (Carbón)
- Color de la nota: #87867F (Piedra)
- Color del borde: #D6D5CE (borde gris cálido)
- Barra de progreso completada: #1B365D (color de la marca)
- Barra de progreso no completada: #E8E7E2
- Estado de éxito/finalización: #2D5016 (Verde oliva oscuro)
- En progreso: #1B365D (color de la marca)
- No iniciado: #87867F (Piedra)
- Fondo de la etiqueta: #E4ECF5
- Todos los grises deben ser de tonos cálidos (R≈G>B); los grises azulados fríos están prohibidos.
**Sistema de fuentes:**
- Cargar Noto Serif SC y Noto Sans SC a través de Google Fonts
- Título: font-family: 'Noto Serif SC', Charter, Georgia, serif; font-weight: 500
- Texto: font-family: 'Noto Sans SC', 'PingFang SC', sans-serif; font-weight: 400
- Datos/Énfasis en los números: font-family: Charter, Georgia, serif
- Deshabilitar el grosor de la fuente: 700/negrita
**tipografía:**
- Interlineado: Encabezado 1,2 / Texto del cuerpo 1,5
- Espaciado entre letras chinas: 0,3 pt
- Ancho máximo de la página: 800px, centrado
- Adaptable y compatible con dispositivos móviles
**Reglas visuales:**
- Sombra: sombra de anillo (0 0 0 1px rgba(0,0,0,0.05)) o sombra susurrante (0 1px 3px rgba(0,0,0,0.04))
- Esquinas redondeadas: 8px (predeterminado) / 12px (tarjeta grande)
- Separador: 0,5 px sólido #D6D5CE o 2,5 px sólido #1B365D (línea vertical de marca)
- Método de énfasis: Texto en tinta azul o línea de marca vertical a la izquierda
### Requisitos de estructura de página:
**1. Área principal del héroe:**
- Encabezado de objetivos de aprendizaje (Serif 28px)
- Etiquetas de información clave en una línea: Tipo de objetivo | Duración estimada | Hora diaria
- Barra de progreso general (con porcentajes)
- Fila de tarjetas de estadísticas: Recursos totales / Completado / Etapa actual
**2. Área de la tarjeta de escenario (núcleo):**
- Una tarjeta grande para cada etapa
- Encabezado de la tarjeta: Número de etapa + Nombre + Etiqueta de estado (✅ Completado / 🔄 En progreso / ⬜ No iniciado) + Duración estimada
- Contenido de la tarjeta:
- Descripción del objetivo principal (1-2 frases)
- Lista de recursos: Cada recurso aparece en una línea separada, incluyendo un icono (📚Libro/🎬Vídeo/💻Proyecto/👥Comunidad) + Nombre (enlace clicable) + Etiqueta de plataforma + Casilla de verificación
- Área de hitos: Resaltada con líneas verticales de la marca y un estilo especial para describir el logro de los estándares.
- Las tarjetas se pueden doblar/desdoblar (por defecto, se desdoblan para la etapa actual y se doblan para la etapa que ya se ha completado).
**3. Área de sugerencias de aprendizaje semanales:**
- Sugerencias concisas para la asignación de tiempo
- Horario entre semana vs. horario de fin de semana
**4. Parte inferior:**
- Una breve línea de texto: Desarrollado por Learning Path Planning Master · Diseñado con Kami Design System
### Requisitos de funcionalidad interactiva (JavaScript puro para el front-end + almacenamiento local):
1. **Alternancia del estado de la casilla de verificación**:
- Haga clic en la casilla de verificación que aparece junto al recurso para alternar su estado de finalización.
- Guarda el estado en el almacenamiento local (la clave utiliza la dirección de aprendizaje + el hash del nombre del recurso).
- Los recursos completados se mostrarán tachados y con transparencia reducida.
2. **Cálculo automático del progreso:**
- Progreso general = (Número de recursos seleccionados / Número total de recursos) × 100%
- Progreso de la etapa = Número de etapas seleccionadas / Número total de etapas
- Transición de animación de la barra de progreso (transición: ancho 0,3 s, facilidad)
3. **Actualización automática del estado de la etapa**:
- Seleccione todos los recursos dentro de la fase → El estado cambia a ✅ Completado, se contrae automáticamente.
- Si se marca algún elemento durante la fase → el estado cambia a 🔄En progreso.
- Sin marca de verificación → ⬜ No iniciado
4. **Doblar/Desdoblar**:
- Al hacer clic en el encabezado de la tarjeta, esta se contraerá o expandirá.
- Con animación fluida
5. **Ventana emergente de verificación de hitos**:
- Aparecerá un aviso de verificación de hito cuando se hayan completado todos los recursos de una fase.
- Mostrar los estándares de hitos para esta etapa
Los usuarios pueden hacer clic en "Completado" para confirmar o marcar "Necesita mayor consolidación" para indicar que se ha completado.
6. **Persistencia de datos**:
- Todos los estados se almacenan en el almacenamiento local.
- Restaurar el estado después de actualizar la página
- Proporciona un botón de "Restablecer progreso" (requiere confirmación secundaria).
### Relleno de contenido:
Complete la estructura anterior con todos los datos de la ruta de aprendizaje planificada en el Paso 2. Asegúrese de lo siguiente:
- El enlace de cada recurso es una URL real y accesible.
- Los iconos de tipo de recurso coinciden correctamente.
- La duración de cada fase es coherente con la lógica del ciclo total.
- Las descripciones de los hitos son específicas y verificables.
### Requisitos técnicos:
- HTML puro + CSS + JavaScript, archivo único
- Sin dependencias externas (excepto Google Fonts)
- Adaptable a dispositivos móviles
- Se puede imprimir
- Código limpio con comentarios
Descripción
Por qué recomendamos esta habilidad
Esta skill captura de forma precisa las necesidades de aprendizaje del usuario a través de un cuestionario, y es capaz de generar un sitio web interactivo altamente personalizado; su estilo de diseño Kami y la función de seguimiento del progreso son especialmente destacables.
A partir de tus objetivos de aprendizaje, nivel actual, tiempo disponible y preferencias, busca a fondo recursos de aprendizaje reales para crear una ruta personalizada por etapas y presentarla como un sitio web de aprendizaje interactivo al estilo de Kami, con seguimiento del progreso, comprobaciones de hitos y enlaces directos a los recursos.
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.