make-it-learnable: la skill que crea lecciones interactivas

¿Quieres conseguir algo como esto para aprender cualquier cosa?

Cualquier cosa. El DNS, el repo que heredas el lunes, ese paper que llevas semanas aplazando o por qué hay estaciones.

Pruébalo antes de seguir leyendo. Contesta la primera pregunta, di cómo de seguro estás y baja con el scroll dentro del recuadro:

Si la quieres a pantalla completa, ábrela en una pestaña aparte.

Esa lección no la he escrito yo. La generó un agente con make-it-learnable, una skill que he creado para que cualquier agente de IA convierta un documento, un repo, una URL o un tema en una lección interactiva en un único fichero HTML. Sin build, sin dependencias, sin red.

La primera vez que la abrí fallé esa misma pregunta. Con mucha seguridad.

Y la página no se limitó a decirme «incorrecto»: me enseñó lo que yo esperaba frente a lo que pasa de verdad, el error concreto que había cometido y una nota sobre mi confianza. Luego, al hacer scroll, la Tierra recorría su órbita con el eje siempre apuntando al mismo sitio del espacio.

Esto es lo que te cuento aquí:

• Qué es make-it-learnable y de dónde sale la idea (spoiler: de Bret Victor, en 2011)
• Cómo se instala en Claude Code, OpenCode y cualquier agente que lea skills
• Qué hace el agente por dentro: blueprint, contratos y un motor de puntuación
• Lo que salió de las pruebas con ocho modelos, con capturas y otra lección más para tocar
• Cuántos tokens cuesta una lección y qué fue corrigiéndose ronda a ronda

¿Qué es make-it-learnable? ¶

make-it-learnable es una Agent Skill que convierte cualquier material en una lección interactiva autocontenida: un solo .html que abres con doble clic, mandas por correo o cuelgas donde quieras. Funciona con Claude Code, OpenCode, Cursor o cualquier agente compatible con el estándar de skills.

La lección no es un artículo con dibujos ni un slide deck con un test pegado al final. Tiene cuatro piezas que se repiten en todas:

• Predices antes de que te expliquen. La lección abre con una pregunta y te pide que digas cómo de seguro estás.
• Un dibujo grande cuenta el mecanismo. Cambia a medida que haces scroll, en vez de sustituirse por otro.
• Los checks te dicen por qué fallaste, no solo si acertaste.
• Al final hay una lectura de tu calibración: dónde estabas seguro y te equivocaste.

Lo que más me gusta de cómo ha quedado es que la skill no contiene ni una línea de HTML ni de CSS. Describe qué construir y cómo debe comportarse cada pieza, y deja el cómo se ve en manos del agente. Por eso cada lección sale con un aspecto distinto, en claro y en oscuro.

🔑 make-it-learnable no es una plantilla. Es una especificación: el agente escribe la página a su manera, pero todas las lecciones se comportan igual para quien las lee.

Si todavía no tienes claro qué es una skill y en qué se diferencia de un prompt o un MCP, empieza por la guía de Agent Skills para Claude Code, Codex, Cursor y OpenCode y vuelve aquí.

Curso gratis por email

Instala tus primeras skills y acaba escribiendo la tuya

Si make-it-learnable va a ser tu primera skill, este minicurso por email, a tu ritmo, te enseña a instalarlas en tu agente y a crear una propia para dejar de repetirle lo mismo.

Apúntate al minicurso →

De dónde sale la idea: las explorable explanations ¶

En 2011 Bret Victor publicó un ensayo titulado Explorable Explanations. Proponía tratar un documento no como texto que se consume, sino como «un entorno en el que pensar», para «permitir y fomentar una lectura verdaderamente activa».

La definición que cuajó después es más concreta: una explorable explanation es una simulación interactiva de un concepto, acompañada de una guía en prosa, en la que el lector descubre cosas por su cuenta y contrasta lo que esperaba con lo que pasa de verdad.

Seguro que has visto alguna sin saber que tenía nombre. Parable of the Polygons y The Evolution of Trust de Nicky Case, los artículos de Bartosz Ciechanowski sobre mecánica o GPS, los papers de Distill. Detrás de cada una hay semanas de trabajo de alguien.

Lo que quería saber era si un agente podía hacer una decente en diez minutos.

De esa definición salen las tres reglas que la skill convierte en diseño:

1. La prosa no es opcional. Un montón de widgets sin un argumento que los recorra es un juguete. Pero guiar no es escribir mucho: una frase exacta junto a un dibujo grande guía mejor que un párrafo junto a uno pequeño.
2. Primero la expectativa, luego la realidad. Si el lector nunca dice qué espera, no hay nada que la realidad pueda corregir. Por eso cada lección abre con una predicción.
3. El modelo tiene que ser honesto. Un lector que mueve un número e infiere una relación falsa sale peor informado que con cualquier párrafo. Simplificar sí; inventar, nunca.

Si no hay una fórmula defendible detrás de un tema, la skill le pide al agente que no monte un simulador y que tire de comparaciones, analogías o clasificaciones. Las explorables tienen un sesgo conocido hacia las matemáticas y la informática, porque necesitan un modelo programable. La skill lo nombra para poder resistirse.

Cómo instalar make-it-learnable ¶

Hay tres formas, y las tres dejan la misma carpeta make-it-learnable/ en la carpeta de skills de tu agente.

Con el CLI de skills ¶

Es la más rápida. Desde la raíz de tu proyecto:

npx skills add webreactiva/make-it-learnable-skill --skill make-it-learnable

¿La quieres en todos tus proyectos? Añade -g y se instala global, en ~/.agents/skills (o en ~/.claude/skills si usas Claude Code):

npx skills add webreactiva/make-it-learnable-skill --skill make-it-learnable -g

Si no conoces este CLI, en qué es skills.sh y cómo usar npx skills lo tienes explicado paso a paso.

Con el zip de la release ¶

Descarga make-it-learnable.zip de la release v1.0.0 y descomprímelo en la carpeta de skills del proyecto:

unzip make-it-learnable.zip -d .claude/skills/   # Claude Code
unzip make-it-learnable.zip -d .agents/skills/   # OpenCode y otros agentes

También puedes adjuntarle el zip a tu agente y pedírselo en lenguaje normal: «Instala esta skill en este proyecto para poder usarla». Te la deja en la carpeta correcta.

Copiando la carpeta ¶

Si te has clonado el repo de GitHub, la carpeta que tienes que copiar es skills/make-it-learnable/. Va a ~/.claude/skills/ o ~/.agents/skills/ para tenerla en todos los proyectos.

💡 Mi consejo: instálala primero en un proyecto, genera un par de lecciones y, si te convence, pásala a global.

No tienes que instalar nada más. La skill no trae runtime, ni script de build, ni dependencias de npm. Necesitas un agente que pueda escribir ficheros y un navegador actual para abrir el resultado.

¿Cómo se pide una lección? ¶

Escribe /make-it-learnable y, detrás, lo que quieras convertir en lección. En el hueco cabe casi cualquier cosa:

/make-it-learnable https://es.wikipedia.org/wiki/Teorema_CAP
/make-it-learnable docs/arquitectura.md
/make-it-learnable src/scheduler.ts — para alguien que acaba de entrar en backend
/make-it-learnable este repo entero, para quien se incorpora el lunes
/make-it-learnable por qué el consenso Raft necesita un líder

Una URL, un fichero, una carpeta, la base de código entera, un paper, una transcripción o un tema contado con palabras. Si no le pasas nada, te pregunta: no tiene tema por defecto, porque adivinarlo te costaría una lección entera tirada.

También se activa sola si se lo pides en lenguaje natural. En las pruebas usé prompts de este estilo:

Usa la skill make-it-learnable para crear una lección interactiva de unos 8 minutos, en español, sobre cómo funciona el DNS: qué pasa desde que escribes webreactiva.com en el navegador hasta que tienes la IP. Audiencia: desarrolladores web junior. No me hagas preguntas: toma tú las decisiones que la skill te pide tomar.

Conviene que digas tema, audiencia, duración, idioma y fuente. La audiencia decide cuál es la idea equivocada de partida contra la que se construye la lección. No hace falta que pidas que sea visual; la skill ya lo exige.

Qué hace el agente por dentro ¶

El agente sigue cinco pasos, y en ninguno de ellos copia una plantilla.

1. Lee la fuente y decide qué idea errónea trae la audiencia. La lección se construye contra esa idea.
2. Elige entre 4 y 7 componentes de un catálogo (Story, Picture, Analogy, Panels, WhatIf, Compare…) y los checks que van a interrumpir la lectura.
3. Escribe el blueprint: un fichero YAML con las secciones, los dibujos descritos con palabras, las escenas, los checks con sus respuestas, los fallos típicos y la explicación de cada uno.
4. Construye la página desde el blueprint, con su propio diseño.
5. Verifica: consola limpia, checks que funcionan, móvil y modo oscuro.

Recibes dos ficheros: el blueprint, que puedes revisar y versionar, y el HTML final.

El blueprint: decidir antes de programar ¶

El blueprint es el contrato entre decidir y construir. Este es un trozo real del que escribió Sonnet 5.5 para la lección de las estaciones:

sections:
  - id: distancia
    title: ¿Cuándo está la Tierra más cerca del Sol?
    goal: Romper la creencia "verano = más cerca" antes de explicar nada
    body:
      - Check:
          mode: prediction
          id: p-dist
          confidence: true
          prompt: ¿Cuándo está la Tierra más cerca del Sol?
          options:
            a: A principios de julio, en pleno verano del hemisferio norte
            b: A principios de enero, en pleno invierno del hemisferio norte
            c: En los equinoccios, a medio camino entre los dos extremos
          answer: b
          miss:
            a: "Es la intuición más común: más cerca, más calor. Pero en julio la Tierra pasa por el afelio, su punto más lejano."

Fíjate en el campo miss. Cada respuesta incorrecta lleva su propia explicación, escrita antes de que exista una sola línea de código. Ahí está la diferencia entre un check que te dice «no» y uno que te dice por qué pensabas lo que pensabas.

Los dibujos también se describen con palabras, no con coordenadas. La Tierra de esa lección es un elemento con cuatro posiciones (junio, septiembre, diciembre, marzo) que viaja por la órbita. Cada escena le dice a qué posición moverse.

Lo que sí trae la skill ¶

Aunque no hay HTML, sí hay tres piezas de apoyo:

Sobre los colores, la skill solo dice qué tiene que significar cada uno (acierto, error, accionable, lo que se está explicando), nunca qué valor usar. El agente elige la paleta.

Lo que salió de las pruebas ¶

Entre el 15 y el 16 de octubre de 2026 la probé con ocho modelos: Claude Opus 5.5, Sonnet 5.5 y Haiku 5.5 como subagentes de Claude Code, y Muse Spark Open, DeepSeek V4 Pro, MiniMax M3, GLM 5.3 y Kimi K3 a través de OpenCode con Ollama Cloud. Los temas fueron de astronomía de bachillerato a la caché de tokens de tres proveedores.

Estas son las lecciones que más me gustaron.

Una sola Tierra que recorre la órbita ¶

El escenario se queda fijo a pantalla completa y cada escena mueve la Tierra por su camino. Si subes, vuelve por el mismo sitio. Es el componente que más costó: en las primeras rondas los modelos dibujaban cuatro Tierras y encendían una.

Es la lección con la que abre este post. Son unos 80 KB en un único fichero, sin nada que cargar de fuera, y la versión que más rondas de correcciones aguantó.

El DNS como un sobre que viaja ¶

Muse Spark Open generó una lección sobre el DNS que abre con un dibujo de borde a borde: tu navegador, un interrogante y la IP al otro lado. Luego cuenta la cadena raíz → TLD → autoritativo con una analogía de vecinos que solo conocen el barrio, la calle o la dirección, y con una story en la que un sobre va de servidor en servidor.

Fue la más barata de todas las que salieron bien: 3 minutos y unos 0,30 $ estimados por OpenCode.

La ventana de contexto y la caché de tokens ¶

Sonnet 5.5 hizo dos lecciones sobre temas que nos tocan a quienes programamos con agentes. En la de la ventana de contexto, una barra crece con cada cosa que entra en la sesión: sistema, herramientas, historial, resultados y ficheros, hasta llegar al límite.

En la de la caché de tokens, un cursor recorre el prompt. Al llegar a la hora que cambia dentro del system prompt, todo lo que va detrás se recalcula, aunque no haya cambiado. Si quieres el tema contado en prosa, lo tienes en el post sobre prompt caching.

Esa lección consultó la documentación de Anthropic, OpenAI y Gemini, y marca como no verificados los datos que no pudo confirmar.

La deuda cognitiva, con contenido de Web Reactiva ¶

Para esta le pedí a Sonnet que se alimentara del buscador de Web Reactiva y del blog. El resultado marca con «WR» cada idea que viene de aquí, y su gráfico se etiqueta como «esquema ilustrativo, sin datos reales». Esa honestidad la pide la skill.

Esta también la puedes probar con tus propios fallos. Otro diseño, otra paleta y otro tema, todo salido de la misma skill:

Si te interesa el concepto en prosa, está desarrollado en deuda cognitiva con IA: qué es y cómo evitarla, y la lección completa la tienes en una pestaña aparte.

El event loop, con un modelo que no es de Anthropic ¶

DeepSeek V4 Pro, a través de OpenCode, montó una lección del event loop de JavaScript con la pila de llamadas, las colas de microtareas y macrotareas y el bucle que las conecta. Misma skill, otro modelo, otra estética.

¿Por qué hay puntos si las explorables odian la gamificación? ¶

Las explorable explanations se definen en contra de la gamificación: son divulgación con interactividad, no un juego con divulgación. Aun así, make-it-learnable mantiene una capa ligera de puntos por una sola razón: hace visible el caso «estaba seguro y me equivoqué», que es el más valioso para aprender.

Solo se pagan tres gestos: comprometerte con una respuesta antes de ver la explicación, ser honesto con tu confianza y tocar el modelo. Nunca hacer clic por hacer clic.

La regla interna es tajante: si la lección fuera peor sin el marcador, el problema es la lección.

El momento que más enseña es cuando respondes mal con mucha confianza. La lección te pone lado a lado lo que esperabas y lo que ocurre, el error concreto y una nota de calibración: «Estabas convencido y no se sostuvo: eso suele significar que una regla en la que confías tiene un caso límite que no habías visto».

El final es lo más útil de la página. Te da el porcentaje, una lectura de tu calibración, insignias y los checks que merecen una segunda pasada, enlazados. Y dice qué dejó fuera la lección.

Si recargas, empiezas de cero. Solo sobrevive tu mejor marca, guardada en tu navegador, para que al volver tengas algo contra lo que competir. No hay servidor ni datos que salgan de tu máquina.

⚠️ Lo que no he medido es el efecto en el aprendizaje real. Las pruebas comprobaron que la mecánica funciona (puntos, notas, insignias, récord), no que la gente aprenda más. Eso pide una prueba con lectores de verdad.

Cómo se fue corrigiendo la skill ronda a ronda ¶

La primera versión de make-it-learnable traía una implementación de referencia en HTML. Funcionaba demasiado bien: todas las lecciones salían clavadas a ella, con la misma maqueta y los mismos colores. Cuando lancé las primeras pruebas en OpenCode, todas tenían el mismo HTML de referencia.

Así que me puse un objetivo: que en la skill no quedara ni rastro de HTML crudo. A cambio, un sistema que le dijera al agente qué montar para que lo construyera a su manera, y que el resultado se comportara como los componentes que ya teníamos. De ahí salieron el blueprint y los contratos.

Luego vino lo divertido. Cada ronda de pruebas destapaba un fallo, y lo corregía en el punto exacto de la skill:

La regla big pictures, few words la tomé prestada de la skill eli5, que explica cosas a un niño de cinco años con dibujos grandes y pocas palabras. Las lecciones salían correctas, pero aburridas, y esa fue la corrección que más cambió el resultado.

Este es el antes y el después, con el mismo tema. En la ronda 2: dibujo pequeño en una columna, un «Objetivo —» delante de cada sección y un undefined en el marcador.

Y la portada de la lección final de Sonnet, que abre directamente con la pregunta:

En el móvil pasaba algo parecido. Las stories se encogían en una franja en mitad de la pantalla, hasta que la skill obligó a rehacerlas en vertical:

Algunos de estos fallos los señalaron los propios subagentes al terminar: ambigüedades en el texto de la skill que les habían obligado a adivinar. De ese feedback salió la última tanda de correcciones: el orden entre el título y el dibujo, qué cuenta en los 4–7 componentes y el teclado en las analogías.

Lleva tus skills al siguiente nivel

Escribe skills que tu agente siga al pie de la letra

Verás cómo se monta un SKILL.md que el agente carga solo cuando hace falta, cómo redactar la descripción para que se active sola y cómo validarla antes de compartirla.

Abrir la guía →

Incluida en la suscripción a Web Reactiva Premium

¿Funciona con modelos que no son de Claude? ¶

Sí. Lancé las pruebas de OpenCode desde tmux, con modelos de Ollama Cloud, dos sesiones a la vez para no esperar.

Los ocho modelos entregaron su lección, pero no todos con la misma soltura. GLM 5.3 y DeepSeek V4 Pro se quedaron alguna vez planificando sin escribir y necesitaron un empujón. MiniMax M3 dio vueltas durante 30 minutos en una ronda. Kimi K3 lo saqué de las pruebas a partir de la ronda 2.

Lo que sí medí en todos es el coste y el tiempo, y ahí las diferencias son enormes.

¿Cuántos tokens cuesta generar una lección? ¶

Una lección cuesta, sea cual sea el modelo, unos 100.000–250.000 tokens de entrada nueva y 30.000–110.000 de salida. Lo que varía muchísimo es la lectura de caché, que crece con cada vuelta que el modelo da releyendo su propio contexto.

Los costes de OpenCode son la estimación que hace la propia herramienta a precio de lista. Yo usaba Ollama Cloud con tarifa plana, así que no los pagué tal cual. En los subagentes de Claude no traduzco tokens a dólares: los datos son los que registra cada transcripción.

Dos patrones salen claros de los datos:

• Las lecciones que consultan la web leen el doble de caché que las que parten de un texto dado. Las de caché, contexto y deuda cognitiva rondaron los 5 millones de tokens de lectura de caché; las de estaciones con Sonnet, entre 1,5 y 2,6 millones. Cada página consultada se arrastra en el contexto.
• Las ejecuciones baratas escriben el blueprint primero y la página de una vez. Las caras se quedan planificando o reescriben.

💡 Si quieres una lección barata, dale tú la fuente. En las pruebas, partir de un texto dado leyó la mitad de caché que «busca en la web».

Las tablas completas, con cada ronda y cada modelo, están en el README del repo.

Para qué puedes usar make-it-learnable ¶

Lo he probado con astronomía, redes, criptografía, el runtime de JavaScript, infraestructura de LLM y un tema blando como la deuda cognitiva. La skill trae una tabla que relaciona la forma de la fuente (proceso, estructura, decisión, relación cuantitativa, código, arquitectura) con los componentes que mejor le encajan.

Donde más partido le veo es en el onboarding. Apuntas la skill a tu repo y la persona que entra el lunes tiene una lección que le obliga a predecir cómo fluye una petición antes de enseñársela. También sirve para formación interna, workshops, contenido de curso o newsletter, y para explicar una decisión técnica a quien no estuvo en la reunión.

El idioma tampoco es un problema. Los textos de la interfaz viven en strings.yaml, y añadir uno nuevo es añadir un bloque. Manda el idioma que pidas; si no pides ninguno, el de tu petición y, por último, el de la fuente.

Lo que todavía no hace ¶

Prefiero que lo sepas antes de instalarla:

• No está medido el aprendizaje. La mecánica funciona; falta una prueba con lectores reales.
• Las cifras caducan. Las lecciones sobre precios o límites de proveedores llevan fecha y fuente, pero envejecen.
• Algunos modelos se atascan en la fase de planificación y necesitan un empujón.
• El componente Sandbox no funciona si abres el fichero en local con file://. Hay que servirlo por HTTP o no usarlo.
• Quedan detalles abiertos: la sintaxis de regiones [[id: texto]] falla si el código contiene ]], y no he probado la tolerancia a barras de scroll clásicas en Windows.

Si encuentras otro, abre un issue en el repo. Así es como ha mejorado hasta ahora.

TL;DR ¶

• 🎓 make-it-learnable es una skill que convierte un doc, un repo, una URL o un tema en una lección interactiva en un solo HTML, sin build ni dependencias.
• 📦 Se instala con npx skills add webreactiva/make-it-learnable-skill --skill make-it-learnable o con el zip de la release.
• 🧩 No trae HTML ni CSS: un blueprint en YAML y contratos de comportamiento dejan el diseño al agente.
• 🎯 Cada lección te hace predecir antes de explicar y te enseña dónde estabas seguro y te equivocaste.
• ⚡ Funciona con ocho modelos probados; una lección cuesta unos 100.000–250.000 tokens de entrada nueva, y la lectura de caché se dispara si consulta la web.

Preguntas frecuentes ¶

¿Qué es make-it-learnable? ¶

Es una Agent Skill de código abierto que hace que tu agente de IA convierta un documento, un repo, una función, un paper, una URL o un tema en una lección interactiva. El resultado es un único fichero HTML con predicciones, dibujos que cambian con el scroll, checks con feedback y un final con tu calibración.

¿Cómo instalo make-it-learnable en Claude Code? ¶

Ejecuta npx skills add webreactiva/make-it-learnable-skill --skill make-it-learnable desde la raíz del proyecto, o añade -g para instalarla global. También puedes descomprimir el zip de la release en .claude/skills/ o copiar la carpeta skills/make-it-learnable/ del repo a ~/.claude/skills/.

¿Funciona con OpenCode, Cursor u otros agentes? ¶

Sí. Funciona con cualquier agente que lea Agent Skills y pueda escribir ficheros. Se probó en OpenCode con Muse Spark Open, DeepSeek V4 Pro, MiniMax M3, GLM 5.3 y Kimi K3, además de Claude Opus, Sonnet y Haiku.

¿Qué es una explorable explanation? ¶

Es una simulación interactiva de un concepto acompañada de una guía en prosa, en la que el lector contrasta lo que esperaba con lo que pasa de verdad. El término lo popularizó Bret Victor en un ensayo de 2011.

¿Necesito instalar dependencias o un servidor para abrir las lecciones? ¶

No. Cada lección es un único .html sin build, sin red y sin dependencias. Lo abres con doble clic en cualquier navegador actual. La única excepción es el componente Sandbox, que necesita servirse por HTTP.

¿Cuánto cuesta generar una lección? ¶

Entre 100.000 y 250.000 tokens de entrada nueva y entre 30.000 y 110.000 de salida, según las pruebas. En OpenCode con modelos de Ollama Cloud, la estimación a precio de lista fue de 0,20 $ a 3,47 $ por lección. La lectura de caché crece mucho si la lección consulta la web.

¿Por qué cada lección tiene un aspecto distinto? ¶

Porque la skill no contiene HTML, CSS ni plantillas. Describe qué construir y cómo debe comportarse cada pieza, y solo define qué significa cada color. El agente decide cómo se ve.

¿En qué idiomas genera las lecciones? ¶

En el que le pidas. Los textos de la interfaz están definidos en strings.yaml por clave, hoy en español e inglés, y añadir un idioma consiste en añadir un bloque a ese fichero.

¿Puedo usarla para el onboarding de un repositorio? ¶

Sí. Puedes pedirle /make-it-learnable este repo entero, para quien se incorpora el lunes y el agente leerá el código para montar una lección con el mapa de módulos y una ejecución paso a paso.

¿Las lecciones envían datos a algún servidor? ¶

No. La puntuación vive en la página y solo se guarda tu mejor marca en el almacenamiento local del navegador. No hay servidor ni datos que salgan de tu máquina.

Fuentes ¶

• Repositorio de make-it-learnable en GitHub
• Release v1.0.0 de make-it-learnable
• Bret Victor, Explorable Explanations (2011)
• Explorable explanation, en Wikipedia

🧨 Última oprtunidad para recibir la dinamita que mereces sobre programación con IA el próximo domingo: Suscríbete gratis a Web Reactiva en https://webreactiva.com/newsletter