Markdown entra, HTML sale: un curso intensivo
Escribe en Markdown. Lee en HTML. Los dos lenguajes de documentos para trabajar con agentes.
La mayoría de las personas escriben una solicitud vaga en una IA y reciben de vuelta un largo muro de texto. La solicitud era vaga, así que la IA tuvo que adivinar a qué se referían. La respuesta es demasiado larga para leerla, así que la hojean. Algo se pierde en ambas direcciones: la IA nunca los entendió de verdad y ellos nunca leyeron de verdad su respuesta.
Este curso arregla ambas direcciones, con un lenguaje para cada una. Es posible que ambos nombres sean nuevos para ti. Markdown es texto sin formato con unas pocas marcas adicionales que muestran la estructura: un # antes de un título, un - antes de cada elemento de una lista. Ya lo has visto sin saber su nombre: cuando Claude o ChatGPT pone una palabra en negrita o te da una lista con viñetas, está escribiendo Markdown. Lo escribes directamente en el mismo cuadro de chat que ya usas; no hay nada que instalar. HTML es el lenguaje con el que se construyen las páginas web: cada página que has abierto en un navegador, incluida esta, es HTML por debajo. Ninguno de los dos es programación. Ambos son texto corriente. La habilidad está en saber cuál usar y en qué dirección.
Los usuarios avanzados dividen la conversación por dirección. Escriben a la IA en Markdown (encabezados, listas, bloques de código), porque la estructura no le deja nada que adivinar. Y piden a la IA que responda en HTML (diagramas, tablas, color, interactividad), porque una página diseñada es la única respuesta larga que una persona ocupada lee de verdad. El primer lenguaje tarda una hora en aprenderse. El segundo nunca lo escribes; solo aprendes a exigirlo. (Una palabra antes de continuar: este libro dice agente para referirse a una IA que realiza un trabajo de varios pasos en tu nombre. Hoy eso es solo Claude en una pestaña del navegador. Más adelante en el libro consigue una terminal y tus archivos. Las reglas de formato que aprendes aquí son las mismas de cualquier manera).
Todo el curso, en una imagen:
Detrás de la imagen hay una sola pregunta, y resuelve toda decisión de formato de este curso: ¿quién lee esto al final? Si una persona lo lee en un navegador, pide HTML. Si lo lee una IA, o si se lo vas a dar a una IA más tarde, mantenlo en Markdown. Si va a una red social, texto sin formato. "Markdown entra, HTML sale" es solo el par de respuestas más común. Quédate con la pregunta; el resto de esta página son los detalles.
Pruébalo en dos minutos
Antes de cualquier teoría, ejecuta todo el curso una vez. Abre Claude.ai (una cuenta gratuita tarda un minuto; ChatGPT o Gemini también funcionan) y pega:
Hazme una pequeña página web como artefacto HTML: una tarjeta de bienvenida para un centro de tutorías de barrio. Un colorido banner de aviso navideño arriba, tres cursos de ejemplo con sus tarifas mensuales en una tabla ordenada y un botón de contacto de WhatsApp. Que se lea bien en un teléfono.
Claude piensa un momento, luego abre un panel junto al chat y construye en él una página real y con estilo: banner, tabla, botón. Ese panel es un artefacto: un documento vivo que la IA construye junto a la conversación en lugar de dentro de ella. (ChatGPT y Gemini llaman al suyo Canvas; la misma idea). Si recibiste un muro de código en lugar de una página renderizada, di show it to me as a rendered artifact y cambiará. Ahora busca el control para compartir o publicar en el panel del artefacto, tócalo y abre el enlace resultante en tu teléfono.
Dos minutos, y ya has hecho todo lo que este curso enseña, una vez, sin querer: entraron unas pocas líneas estructuradas, salió una página diseñada y un enlace la hizo compartible. Los catorce conceptos siguientes hacen que cada uno de esos pasos sea deliberado, para que sigan funcionando cuando hay más en juego que una demostración. La Parte 1 plantea la división. La Parte 2 enseña el puñado de Markdown que escribes a mano. La Parte 3 te enseña a exigir, juzgar y publicar HTML que nunca escribes. La Parte 4 ejecuta un ejercicio a través de las tres formas en que conocerás a los agentes en este libro. Al final podrás escribir una especificación Markdown limpia, convertirla en un artefacto HTML legible que otra persona pueda abrir desde un enlace y decidir, para cualquier resultado, si debe ser Markdown, HTML o texto sin formato para una red social.
📚 Material de apoyo docente
Ver presentación completa — Markdown entra, HTML sale
Este curso intensivo asume los fundamentos anteriores: Qué es realmente la IA para el modelo mental de la máquina, y Prompting con IA en 2026 para los hábitos. Esos hábitos (cargar el contexto correcto, hacer una lluvia de ideas y luego iterar, calificar el resultado sobre 10) reaparecen todos aquí; este curso les da un formato de archivo en el que vivir. Los recorridos de herramientas más profundos están en el Curso intensivo de programación con agentes y el Curso intensivo de Cowork y OpenWork; no necesitas ninguno para terminar esta página.
- Una cuenta de chat gratuita. Claude.ai es la que usan los ejemplos; ChatGPT o Gemini ejecutan aquí cada prompt de chat sin cambios. Donde un prompt diga "artefacto", di "Canvas" en esos dos; en cualquier otra herramienta, pide "un solo archivo HTML" y funciona igual.
- Acceso web activado en la herramienta, para que la IA pueda recuperar los enlaces que incluyas. En la mayoría de las herramientas está activado por defecto; si un ejemplo de enlace no funciona, revisa la configuración de búsqueda web.
- Un teléfono, para juzgar lo que haces tal como lo verán de verdad tus lectores.
La lectura toma alrededor de una hora; los siete prompts finales suman unos treinta minutos. Ejecuta los prompts a medida que avanzas: leer te da el vocabulario, ejecutarlos te da la habilidad.
Parte 1: Los dos lenguajes
1. Por qué los agentes necesitan estructura
Aquí está la misma solicitud, escrita dos veces.
Sin estructura:
I want a page for my tuition center, it should look professional
and have our courses and timings and a way for parents to contact
us, also fees, and it should work on phones since most parents
use phones, oh and put the Eid holiday notice somewhere visible.
Con estructura:
# Tuition Center Landing Page Specification
## Goal
A single-page site parents visit from their phones to check
courses, timings, fees, and contact info.
## Requirements
- Mobile-first layout (most visitors are on phones)
- Course list with timings and monthly fees
- Contact section: phone, WhatsApp link, location
- Holiday notice banner at the top (currently: Eid holidays,
center closed June 6-9)
## Out of scope
- Online payments
- Student login
Ambas contienen la misma información. Pero la primera obliga al agente a inferir la estructura: ¿es el aviso de vacaciones más importante que las tarifas? ¿"Profesional" es una restricción o una sensación? ¿"Una forma de contactarnos" es un formulario o un número de teléfono? Cada inferencia es un lugar donde el agente puede adivinar mal, y un agente que adivina mal no parece equivocado. Parece seguro.
La segunda versión hace explícita la estructura. Los encabezados declaran qué tipo de información es cada bloque. Las viñetas declaran que los requisitos son un conjunto, cada uno verificable de forma independiente. Y la sección "Fuera del alcance" hace algo que la prosa casi nunca hace: declara lo que no quieres, que es la mitad de toda buena especificación.
Por eso Markdown es el lenguaje de especificación del trabajo con agentes. Los agentes se entrenan con enormes cantidades de Markdown (la mayor parte de la documentación de internet está escrita en él), así que analizan su estructura de forma nativa: para ellos un encabezado # no es decoración, es una señal de jerarquía e importancia. (Capítulos posteriores llaman al lugar donde viven estas intenciones escritas la Capa de intención: la intención humana, escrita con suficiente precisión para que un agente actúe sobre ella. Ahora estás aprendiendo a escribirla).
Un ejemplo sin software. Una administradora escolar le pidió a un agente que "redactara el plan anual del día deportivo, los eventos de siempre, y se asegurara de que los niños más pequeños no estuvieran en el calor de la tarde". El borrador programó las carreras de menores de 8 años a las 2 p. m. de todos modos: la restricción quedó enterrada a mitad de frase en la prosa, y el agente la ponderó como una preferencia. Ella reescribió la solicitud con un encabezado ## Hard constraints que contenía una sola viñeta: "Todos los eventos de menores de 8 años deben terminar antes de las 11:30 a. m.". El siguiente borrador cumplió a la perfección. La restricción no cambió. Lo que cambió fue su visibilidad en la estructura.
El hábito, dicho una vez: cualquier cosa que un agente no deba equivocar pertenece a su propio encabezado o a su propia viñeta, nunca dentro de una frase.
2. La asimetría: Markdown entra, HTML sale
Entonces Markdown es el lenguaje de entrada. ¿Es también el lenguaje de salida? Hasta hace poco, sí: los agentes responden en Markdown por defecto, y para respuestas cortas eso está bien.
Pero si tu imagen mental de la salida de una IA son muros de texto con viñetas, esa imagen ya está desactualizada. En un ensayo muy difundido, Thariq Shihipar, del equipo de Claude Code de Anthropic, describió por qué él y otros del equipo dejaron de pedir salidas en Markdown y empezaron a pedir HTML. Su razonamiento, parafraseado:
- El Markdown largo es ilegible. Pasadas unas cien líneas, las personas dejan de leer archivos Markdown, y a medida que los agentes asumen tareas más grandes, sus planes e informes se hacen más largos. Las cien no son un número mágico; la prueba honesta es si tú leerías el documento de arriba abajo, y a cierta extensión la respuesta pasa a ser no. Un plan no leído es un plan que en realidad no aprobaste.
- El techo de Markdown es bajo. Encabezados, listas, tablas y poco más. Cuando un agente necesita mostrarte un flujo de trabajo, una paleta de colores o una maqueta, Markdown recurre al arte ASCII: encantador, pero un apaño.
- El HTML casi no tiene techo. Tablas con estilo, diagramas, código anotado, controles interactivos. Hay muy poco que un agente pueda saber y que el HTML no pueda mostrar a una persona de forma eficiente.
- El HTML se comparte fácil. Los navegadores lo muestran de forma nativa. Un colega hace clic en un enlace; nadie instala nada. La gente lee de verdad una página diseñada; ignora cortésmente un archivo de texto sin formato.
- La característica estrella de Markdown se está desvaneciendo. Markdown era genial porque las personas podían editarlo a mano con facilidad. Pero cada vez más no editas a mano la salida del agente; le pides al agente que la edite. Una vez que el agente hace la edición, el formato solo tiene que adaptarse al lector.
El resultado es una asimetría limpia, y es la columna vertebral de todo este curso:
| Dirección | Formato | Por qué |
|---|---|---|
| Tú → agente | Markdown | La estructura elimina la ambigüedad. Rápido de escribir. Los agentes lo analizan de forma nativa. |
| Agente → tú | HTML | Rico, legible, compartible, interactivo. Un plan de 500 líneas que de verdad leerás. |
| Agente → agente | Markdown | Especificaciones, notas y contexto que pasan entre sesiones de IA se mantienen compactos y precisos. |
La primera fila la escribes a mano, por eso la Parte 2 la enseña como es debido. Nunca escribes la segunda fila; la pides con un prompt, por eso la Parte 3 enseña los prompts en lugar de las etiquetas.
Cada ventaja del HTML es una ventaja para los ojos y los navegadores. Para una IA, el mismo archivo es ruido alrededor del significado: etiquetas, estilos y código de maqueta que gastan miles de palabras para decir lo que Markdown dice en cincuenta. Así que cualquier cosa que se guarde para una IA se queda en Markdown. Eso incluye más de lo que crees: un chat nuevo no recuerda nada, así que las notas que guardas hoy y pegas en la conversación de mañana también son "agente → agente", aunque ambos agentes te estén hablando a ti. Hazte la única pregunta: ¿quién lee esto al final?
- Una persona lo lee al final → HTML.
- Una IA lo lee al final (incluido un chat futuro) → Markdown.
- No estás seguro de verdad → Markdown. Una persona puede leer Markdown bastante bien; una IA lee mal el HTML. Y siempre puedes renderizar Markdown a HTML en el momento en que una persona lo necesite.
Cada capítulo de este libro está escrito en Markdown (los archivos fuente terminan en .md) y los diagramas que ves son en su mayoría SVG, que es el lenguaje de ilustración del HTML. El libro practica la asimetría que predica: Markdown donde importa la precisión, imágenes ricas donde importa la lectura humana.
Parte 2: Markdown, el lenguaje de escritura
Markdown tiene docenas de funciones. Necesitas cinco. Las cinco siguientes cubren prácticamente toda especificación, resumen y archivo de contexto que escribirás en este libro, y el concepto final de esta parte las reúne en tu primera especificación completa.
Cómo practicar: cada ejemplo de esta parte es un prompt que puedes pegar en Claude.ai ahora mismo. La estructura que escribes es la lección.
3. Encabezados: dile a la IA qué importa más
Un # crea un encabezado. Más símbolos # crean niveles más profundos:
# Document title (one per document)
## Major section
### Subsection
Esa es toda la sintaxis. Lo que importa es lo que los encabezados hacen por la IA: muestran qué información es más importante y qué detalles pertenecen a cada sección. Todo lo que está bajo ## Hard constraints es una restricción que la IA debe seguir. Todo lo que está bajo ## Nice to have es opcional. Sin encabezados, la IA tiene que adivinar qué importa. Con encabezados, se lo dices directamente.
Tres reglas que evitan el 90 % de los errores de encabezados:
| Regla | Por qué le importa a un agente |
|---|---|
Un título # por documento | Dos títulos significan dos documentos fundidos; el agente puede tratarlos como tareas separadas. |
Nunca saltes niveles (# → ###) | Un nivel saltado rompe el árbol; el agente puede asociar una subsección al padre equivocado. |
| Haz que los encabezados sean afirmaciones, no etiquetas | ## Budget dice menos que ## Budget: PKR 50,000 hard ceiling. El propio encabezado carga la restricción. |
Pruébalo ahora. Pega esto en Claude.ai:
Aquí están mis notas para una cena familiar de Eid, en un párrafo desordenado:
"unos 20 invitados, tres son vegetarianos, presupuesto de unas 25 mil rupias, mi madre se encarga del biryani así que no planees un plato principal de arroz, hace falta una mesa para niños, cena a las 8 p. m., alquilamos 4 sillas extra."
Reestructura estas notas como un documento Markdown con encabezados para Objetivo, Restricciones estrictas, Ya resuelto y Preguntas abiertas. Coloca cada dato bajo el encabezado correcto. Si un dato pudiera pertenecer a dos encabezados, elige uno y dime por qué.
Lee lo que vuelve. El agente tomará una decisión o dos (¿"cena a las 8 p. m." es una restricción o un objetivo?), y verlo explicar la decisión te enseña cómo leen los agentes tu estructura.
4. Listas: viñetas para conjuntos, números para secuencias
Dos tipos de lista, una distinción que los agentes se toman en serio:
Features the page must have: Steps to publish:
- Course list with fees 1. Review the draft
- WhatsApp contact button 2. Fix the timings table
- Holiday banner 3. Publish
- Urdu/English toggle 4. Send the link to parents
- Las viñetas (
-) dicen: estos elementos son un conjunto; el orden no importa; cada uno es verdadero de forma independiente. Úsalas para características, requisitos, restricciones, opciones. - Los números (
1.) dicen: estos elementos son una secuencia; el orden es el punto; el paso 3 supone que el paso 2 ya ocurrió. Úsalos para procedimientos, flujos de trabajo, cualquier cosa que se rompa si la haces al revés.
Esto suena cosmético. No lo es. Dale a un agente una lista numerada y tratará el orden como parte de la instrucción; casi nunca empezará el paso 4 antes del paso 1. Dale viñetas y se sentirá libre de abordar los elementos en el orden que sea más eficiente. Elegir el tipo de lista equivocado envía la señal equivocada sobre tu intención.
El anidamiento añade una dimensión más: los subelementos pertenecen a su elemento padre.
- Contact section
- Phone number (clickable on mobile)
- WhatsApp link (tapping it opens a chat)
- Map pin, not a full embedded map
El hábito de la viñeta verificable. Las mejores viñetas de requisitos son las que un revisor podría marcar ✅ o ❌ sin discusión. "La página debe ser rápida" no es verificable. "La página carga en menos de 3 segundos en una conexión 3G" sí lo es. Cuando escribas una especificación, vuelve a leer cada viñeta y pregúntate: ¿podría el agente, o yo, verificar esto de forma objetiva? Esta es la disciplina de calificar sobre 10 de Prompting con IA en 2026, aplicada una viñeta a la vez.
5. Bloques de código: mostrarle a la IA exactamente lo que quieres decir
A veces necesitas incluir en tu prompt un fragmento de texto que la IA debe mirar pero no actuar sobre él: un mensaje de error, un ejemplo del formato de salida que quieres o una cita de otra persona. Envolverlo en comillas invertidas triples (```) le dice a la IA: "esto son datos, no una instrucción". (La comilla invertida ` está encima de la tecla Tab en la mayoría de los teclados de portátil; en el teclado de un teléfono, mantén pulsado el apóstrofo).
```python
def greet(name):
return f"Assalam-o-Alaikum, {name}!"
```
La etiqueta de lenguaje tras la valla de apertura (python, bash, text, html) le dice tanto a las personas como a los agentes cómo interpretar el bloque. Las comillas invertidas simples hacen el mismo trabajo en línea: escribe `npm install` cuando te refieres al comando literal, no al concepto de instalar.
¿Por qué importa esto? Sin la valla de comillas invertidas, la IA lee todo como instrucciones que debe seguir. Con la valla, lee el texto envuelto como algo que analizar o copiar. Tres situaciones en las que esto te salva:
| Situación | Sin vallas | Con vallas |
|---|---|---|
| Mostrar un mensaje de error que quieres diagnosticar | El agente puede actuar "servicialmente" sobre las palabras dentro del error | El agente analiza el error como un artefacto literal |
| Incluir una salida de ejemplo que quieres replicar | El agente parafrasea el formato | El agente reproduce el formato exactamente |
| Citar el texto de otra persona dentro de tu prompt | El agente puede confundir su voz con tus instrucciones | Límite limpio entre el texto citado y tu petición |
Y el truco más útil: muéstrale a la IA un ejemplo de cómo se ve la salida correcta. En lugar de describir el formato que quieres en tres párrafos, simplemente muestra una fila de ejemplo dentro de una valla:
The timings table must look exactly like this:
| Course | Days | Time | Monthly fee |
| ------------- | -------- | ------------- | ----------- |
| Matric Math | Mon-Wed | 4:00-5:30 pm | PKR 3,500 |
Same columns, same order, same fee format.
Una sola fila de ejemplo como esta le dice a la IA exactamente lo que quieres. No puede malinterpretar un ejemplo concreto como sí puede malinterpretar una descripción escrita.
6. Enlaces e imágenes: apuntar al mundo
Las dos últimas piezas de sintaxis:
[link text](https://example.com)
Por qué importan los enlaces: cuando incluyes un enlace en tu prompt, la IA puede visitar esa página y leerla. Así que en lugar de resumir de memoria la política de tarifas de tu escuela (y equivocarte), simplemente enlaza la página y escribe "las tarifas deben coincidir con esto". La IA lee la página real. Reemplazaste un párrafo de información posiblemente errónea por la fuente real. Claude.ai hace esto cuando el acceso web está activado, y las herramientas de lectura de archivos que conocerás en la Parte 4 hacen lo mismo con los archivos de tu equipo.
Por qué importan las imágenes: añadir ! antes de los corchetes inserta la imagen directamente en tu documento en lugar de solo enlazarla. La descripción que escribes dentro de los corchetes es importante porque es lo que la IA lee cuando mira tu imagen. Piénsala como una leyenda que le dice a la IA a qué prestar atención. Por ejemplo, si tu especificación incluye una captura de pantalla del diseño de una página, una buena descripción sería: ![Maqueta: banner arriba, tabla de cursos en el medio, botones de contacto fijados abajo]. Eso le dice a la IA exactamente qué importa en la imagen.
7. Tu primera especificación completa
Todo lo anterior se ensambla en un solo artefacto: la especificación. Esta es la forma de documento que escribirás cientos de veces en este libro: para páginas web ahora y, más adelante en el libro, para ETC digitales (Equivalentes a Tiempo Completo), agentes de IA construidos para desempeñar un rol completo como lo haría un empleado (un "equivalente digital a tiempo completo"). Una especificación así es como se le encarga uno. El esqueleto:
# [What you are building] Specification
## Goal
One paragraph: what this is and who it serves.
## Context
Links and facts the agent needs. Attach files; link sources.
## Requirements
- Checkable bullet
- Checkable bullet
- Checkable bullet
## Hard constraints
- Things that must not be violated (budget, deadline, platform)
## Out of scope
- Things you are explicitly NOT asking for
## Expected output
A fenced example, a format description, or a mockup image.
Dos secciones de este esqueleto hacen un trabajo desproporcionado. Fuera del alcance mata el fallo más común del agente: la entrega excesiva y entusiasta, el sistema de inicio de sesión que nunca pediste, las diecisiete características que entierran las tres que querías. Resultado esperado mata el segundo más común: la deriva de formato.
Y luego, el movimiento que separa una especificación de un deseo: valida la especificación antes de ejecutarla. No le entregues tu primer borrador a un agente y esperes. Entrégaselo a un agente y pídele que lo ataque:
Aquí está mi especificación: [pega la especificación]
No construyas nada todavía. Primero, revisa la especificación en sí:
- Enumera cada ambigüedad: cada lugar donde dos lectores razonables construirían dos cosas distintas.
- Enumera cada restricción faltante que tendrías que adivinar.
- Califica la especificación sobre 10 en claridad, completitud y verificabilidad, con una justificación de una frase para cada una.
- Sugiere el único cambio que más subiría la calificación.
Este es el bucle de calificar e iterar de Prompting con IA en 2026, apuntado a tu especificación en lugar de a la salida del agente. Dos o tres rondas suelen llevar una especificación de 6 a 9, y una especificación de 9/10 es la mejora de calidad más barata de todo el trabajo con agentes, porque cada artefacto posterior hereda su claridad. Arreglar una viñeta ambigua en una especificación cuesta un minuto. Arreglar lo equivocado que el agente construyó a partir de esa viñeta cuesta una tarde.
Un cambio de mentalidad que este libro seguirá reforzando: en el trabajo nativo de IA, la especificación no es papeleo previo al trabajo real. Es el trabajo real. La salida del agente es una función de tu especificación; mejora la especificación y cada regeneración mejora con ella. El libro llama a construir de esta forma desarrollo basado en especificaciones, y la Parte 1 del libro lo desarrolla por completo. Este esqueleto es su semilla.
Parte 3: HTML, el lenguaje de lectura
Ahora escribes una entrada estructurada. La segunda mitad de la habilidad es exigir una salida estructurada, y aquí la regla se invierte por completo. No aprenderás etiquetas HTML aquí, porque no las escribirás. El agente las escribe. Tu trabajo es saber cuándo pedir HTML, qué pedir y cómo juzgar lo que vuelve.
8. Por qué pedir HTML siquiera
Ejecuta este experimento una vez y no volverás a necesitar que te convenzan. Toma cualquier plan o informe que un agente haya producido para ti en Markdown, algo más largo que una pantalla. (¿Todavía no tienes una respuesta larga en tu historial? Pide un plan de estudio detallado de dos semanas sobre cualquier cosa que estés aprendiendo, y luego usa eso.) Después pide:
Convierte esto en un único archivo HTML diseñado para la lectura: jerarquía visual clara, una pequeña tabla de contenidos, los números clave como una tabla con estilo y un diagrama SVG del flujo general. Optimízalo para alguien que lo lee una vez en un teléfono.
Lo que recibes es la misma información, pero esta vez la leerás de verdad. Esa diferencia, leída frente a hojeada, es todo el argumento. Sentiste una versión pequeña en la prueba de dos minutos del inicio; el apéndice lo muestra de principio a fin con una especificación real. Desglosando la diferencia en sus partes:
| Lo que añade el HTML | Cómo se ve en la práctica |
|---|---|
| Densidad de información | Tablas, codificación por color, diagramas SVG, código anotado, en lugar de arte ASCII y muros de viñetas |
| Navegabilidad | Pestañas, una tabla de contenidos, secciones plegables: un plan de 500 líneas por el que puedes moverte |
| Compartibilidad | Se abre en cualquier navegador; publicas un enlace del artefacto y un padre, estudiante o colega hace clic en él, sin aplicación ni cuenta |
| Interactividad | Deslizadores, interruptores, tarjetas arrastrables, vistas previas en vivo: el documento se vuelve un instrumento, no una copia impresa |
| Un bucle de "copiar de vuelta" | Un botón que exporta tus elecciones como texto que pegas de vuelta al agente: tú ajustas visualmente, el agente recibe con precisión |
Esa última fila merece una mirada más cercana, porque es la menos obvia y la más poderosa. Algunas preferencias son una tortura de expresar con palabras: un color, una velocidad de animación, el orden de prioridad de treinta elementos. Pedirle al agente que construya controles para ellas, más un botón de copiar como texto, convierte "hazlo un poco más cálido, no, menos naranja" en treinta segundos de arrastrar un deslizador y un pegado. Te mantienes en el bucle; el bucle se hace más estrecho.
Un ejemplo sin software. Una directora le pidió a un agente un informe sobre tres años de tendencias de admisión. La versión en Markdown eran nueve pantallas de viñetas; leyó dos. Vuelta a pedir como HTML (líneas de tendencia como gráficos SVG, un color por sede, una tabla de hallazgos arriba, los detalles plegados abajo), el mismo informe tardó cuatro minutos en asimilarse, y ella reenvió el enlace publicado a su junta esa misma noche. Nadie de la junta habría abierto un adjunto .md. Todo el mundo hace clic en un enlace.
La salida en HTML usa más tokens que Markdown, y para una respuesta de tres líneas es pura sobrecarga. El intercambio vale la pena justo cuando la salida es larga, visual, compartida o revisitada. A medida que tus tareas crecen, eso se vuelve la mayoría de las salidas que importan. Para el ida y vuelta rápido en el chat, las respuestas sencillas siguen siendo el valor predeterminado correcto. Ajusta el formato a la lectura, no a la moda.
Un costo más que muerde en los datos móviles: un artefacto interactivo pesado (fuentes externas, imágenes incrustadas grandes, bibliotecas grandes) puede inflarse a varios megabytes, lo cual es un problema real para un lector que lo abre en un teléfono con una conexión lenta. Cuando el ancho de banda importe, dilo en el encargo: "ligero, un solo archivo, sin fuentes ni bibliotecas externas, que se mantenga por debajo de 200 KB". El agente incorporará lo que necesite y omitirá lo que no.
9. No escribes HTML; lo pides
Sacar HTML de un agente no requiere ninguna sintaxis especial. En Claude.ai (o ChatGPT o Gemini), di "crea un artefacto HTML" y la IA construye una página en vivo en un panel lateral justo al lado de tu chat. Puedes verla, hacer clic en ella e interactuar con ella al instante. Más adelante, en la Parte 4, conocerás herramientas de terminal como Claude Code y OpenCode, que se ejecutan en tu equipo en lugar de en un navegador. Esas herramientas no tienen panel lateral; en cambio, escriben archivos reales directamente en tu equipo. Allí dices "escribe esto como un archivo HTML" y la IA crea un archivo como report.html en tu disco que abres en tu navegador. Distintas herramientas, el mismo disparador sencillo.
Pedir HTML es la parte fácil. Conseguir buen HTML es donde está la habilidad. La diferencia entre una página mediocre y una excelente no es la palabra disparadora ("artefacto" o "archivo HTML") sino el encargo que escribes a su alrededor. Piénsalo así: "hazme una página" es como decirle a un chef "hazme comida". Conseguirás algo, pero probablemente no será lo que querías. Cuanto más le digas a la IA sobre quién la leerá, qué debe contener y cómo debe sentirse, mejor será el resultado.
Cuatro cosas que incluir en cada solicitud de HTML:
- Quién la leerá. Una página diseñada para que la directora de una escuela la revise una vez en su teléfono se ve completamente distinta de una página diseñada para ti como referencia de trabajo que abrirás diez veces. Dile a la IA quién es el lector y cómo lo verá. Ejemplo: "Para mis dos cofundadores, leída una vez en sus portátiles".
- Qué debe contener. Nombra las piezas concretas que quieres: un diagrama de X, una tabla de Y, una franja de resumen con tres números clave arriba, una sección de "trampas" abajo. Los agentes son excelentes construyendo los componentes que nombras y mediocres adivinando cuáles querías. Si no lo nombras, probablemente no aparecerá.
- Si debe ser interactivo. ¿El lector solo lo lee, o debería poder hacer algo? ¿Deslizadores para ajustar un número? ¿Un botón que copia sus elecciones como texto? ¿Un conjunto de pestañas para cambiar de vista? Si no necesitas ninguna interacción, omite esto. Si la necesitas, nombra qué hacen los controles.
- Cómo debe leerse. "Optimízalo para leerlo una vez" produce una página limpia y lineal. "Optimízalo como una referencia que revisitaré" produce una tabla de contenidos y secciones plegables. "Hazlo presentable para un cliente" produce algo lo bastante pulido para reenviarlo. Cada frase tira del diseño en una dirección distinta. Elige una.
Compara:
Weak: Make an HTML report about my sales data.
Strong: Read the attached sales CSV. Produce one HTML file for
my two co-founders, reading once on laptops: a headline
findings strip on top (3 numbers, large), one SVG chart
of monthly revenue by product, a table of the 5 fastest
growers, and a short "what I'd do next" section. No
scrolling past 3 screens.
Mira la versión fuerte una vez más. Responde a las cuatro preguntas de arriba: quién la lee (mis dos cofundadores, en portátiles), qué debe contener (números destacados, un gráfico, una tabla, una sección de recomendaciones), cualquier interacción (ninguna necesaria aquí, así que se omite) y cómo debe leerse (leída una vez, sin desplazarse más de 3 pantallas). Eso es todo lo que hace falta. Estás escribiendo el mismo tipo de encargo estructurado que aprendiste en la Parte 2, solo que esta vez lo que pides es una página diseñada en lugar de una respuesta de texto.
Juzgar lo que vuelve. La disciplina de calificación se transfiere directamente. Una rúbrica útil para cualquier artefacto HTML, sobre 10 cada una: ¿Está representado cada dato de mi fuente? ¿Puedo encontrar lo más importante en 10 segundos? ¿Se lee en un teléfono? ¿Reenviaría este enlace? Cualquier cosa por debajo de 9, nombra la carencia y regenera. Iterar un artefacto es barato; el agente lo edita en el sitio.
10. Los cinco patrones de HTML
Ahora que sabes cómo pedir HTML, ¿qué deberías pedir en realidad? En la práctica, la mayoría de las salidas en HTML caen en cinco formas comunes. El equipo detrás de Claude Code en Anthropic usa estos patrones a diario, y tú también lo harás. Cada patrón de abajo explica qué es, cuándo usarlo y te da un prompt listo para pegar que puedes probar ahora mismo.
Patrón 1: planes y exploraciones. Cuando necesites tomar una decisión, no le pidas a la IA una sola respuesta. Pídele que disponga varias opciones una al lado de la otra como una cuadrícula visual, para que puedas compararlas de un vistazo. Cada opción tiene su propia tarjeta que muestra lo que ganas y lo que cedes. Miras primero, eliges la que te gusta, y solo entonces le pides a la IA que la desarrolle en detalle. Este es el bucle de lluvia de ideas e iteración del curso de Prompting con IA, pero ahora las opciones son una página diseñada que de verdad puedes ver, no un muro de viñetas que tienes que leer.
Estoy decidiendo cómo estructurar [algo]. Genera 5 enfoques claramente distintos y disponlos en un archivo HTML como una cuadrícula que pueda comparar una al lado de la otra. Etiqueta cada tarjeta con la compensación que hace. No recomiendes todavía. Déjame mirar primero.
Patrón 2: explicadores e informes. Tienes un documento largo, un archivo de datos o una pila de notas de reuniones que nunca leerás línea por línea. Pídele a la IA que lo lea por ti y produzca un resumen HTML de una página: un diagrama de cómo funciona el proceso principal, los datos clave reunidos en una tabla con estilo y una sección de "trampas" abajo para cualquier cosa sorprendente. Este es el patrón que usó la directora antes en este curso para convertir tres años de datos de admisiones en un informe que su junta sí leyó.
Read [source]. Produce a one-page HTML explainer: an SVG
diagram of how [system/process] works, the 4 key facts
annotated, and a "gotchas" section at the bottom. Optimize
for someone reading it exactly once.
Patrón 3: revisión y comprensión de código. Si trabajas con código (o lo harás más adelante en este libro), mostrar qué cambió y por qué es doloroso en texto plano. En HTML, la IA puede producir diffs codificados por color, código anotado con explicaciones en los márgenes y diagramas de flujo de cómo se conectan las piezas. Este patrón se desarrolla por completo en el Curso intensivo de programación con agentes; por ahora, solo debes saber que existe y que el HTML es la razón por la que las revisiones de código se vuelven legibles.
Patrón 4: prototipos de diseño. Algunas cosas son imposibles de describir con palabras. ¿Qué tono de azul? ¿Cuán redondeadas deben ser las esquinas? ¿Cuán grande debe ser el título? En lugar de ir y volver con la IA en texto ("un poco más cálido, no, menos naranja, no, ese naranja no"), pídele que construya una página con controles en vivo: deslizadores, muestras de color, interruptores de tamaño de fuente. Arrastras y ajustas hasta que se ve bien, luego haces clic en un botón de "copiar mis elecciones" que exporta tu configuración como texto que pegas de vuelta a la IA. Diez segundos de arrastre reemplazan diez rondas de "inténtalo de nuevo".
Estoy eligiendo el aspecto de [algo] y no puedo describir lo que quiero con palabras. Construye un artefacto HTML con una tarjeta de muestra y controles en vivo para ella: deslizadores para la calidez del fondo y la redondez de las esquinas, unas pocas muestras de color de acento, un interruptor de tamaño de fuente y un botón de "copiar parámetros" que exporte mis elecciones finales como texto que pueda pegarte de vuelta.
Patrón 5: editores desechables. El patrón más subestimado. A veces necesitas una pequeña herramienta a medida para un solo trabajo: priorizar 30 tareas, clasificar 20 ideas en categorías, ordenar 15 candidatos. En lugar de hacerlo en tu cabeza o en papel, pídele a la IA que construya una página rápida de arrastrar y soltar: tarjetas que puedes arrastrar entre columnas como "Ahora", "Después" y "Más tarde", con un botón abajo que copia tu disposición final como texto. Úsala diez minutos, haz clic en el botón de copiar, pega el resultado de vuelta a la IA y no vuelvas a abrir la página. La página es desechable; el texto que exporta es lo que conservas. Ese botón de exportar es lo que hace funcionar al patrón: convierte una decisión visual de vuelta en texto preciso sobre el que la IA puede actuar.
Fíjate en el hilo conductor: en cada patrón, el Markdown (o tus datos) entra, el HTML sale, y cualquier cosa que necesite continuar la conversación vuelve como texto. La asimetría del Concepto 2, ahora como un ritmo de trabajo.
11. Cuando el destino es una red social, no un navegador
Hay una excepción importante a la regla de "HTML sale", y si usas WhatsApp, LinkedIn o Facebook, la encontrarás de inmediato. La regla funciona cuando alguien abre tu página en un navegador, porque un navegador sabe cómo mostrar HTML. Pero una red social no es un navegador. Cuando publicas en WhatsApp o LinkedIn, la aplicación ignora tu formato y muestra tu contenido usando su propio diseño. No puedes controlar cómo se ve. Así que la pregunta cambia: en lugar de preguntar "¿quién lee esto al final?" tienes que preguntar "¿qué muestra realmente el destino?"
Esto es lo que cada plataforma muestra en realidad cuando publicas:
- WhatsApp elimina casi todo el formato. Puedes poner texto en negrita con
*asteriscos*y en cursiva con_guiones bajos_, pero eso es todo. Encabezados, tablas, diseños con estilo: WhatsApp lo ignora todo. Así que cuando le pidas a la IA que escriba algo para WhatsApp, pide texto sin formato con líneas cortas, una idea por línea, quizá un emoji para marcar cada punto y un enlace pelado al final si compartes una URL. - LinkedIn y Facebook funcionan igual: el cuerpo de la publicación es texto sin formato. No puedes poner una palabra en negrita, añadir un encabezado ni insertar una tabla. (Algunas personas fingen la negrita en LinkedIn copiando caracteres especiales que parecen negrita, pero eso es un apaño, no una función). Cuando le pidas a la IA que escriba una publicación de LinkedIn, lo más importante es que la primera línea capte la atención, porque LinkedIn oculta todo lo que va después de las primeras líneas detrás de un botón "…ver más". Para Facebook, sé breve. Para ambos, pide texto sin formato escrito para esa plataforma concreta.
Pegar HTML en bruto como cuerpo de una publicación es el único movimiento que siempre está mal; cae como un muro de corchetes angulares.
Entonces, ¿el HTML se vuelve inútil en las redes sociales? No. Sigue importando en dos lugares:
- La tarjeta de vista previa del enlace. ¿Conoces esas pequeñas tarjetas que aparecen cuando alguien comparte un enlace en WhatsApp, LinkedIn o Facebook? ¿Las que tienen un título, una breve descripción y a veces una imagen? Esas tarjetas las construye la plataforma de forma automática. Visita la página que enlazaste, busca etiquetas ocultas específicas dentro del HTML (llamadas etiquetas Open Graph) y las usa para construir la tarjeta. Si esas etiquetas faltan, recibes una vista previa fea y en blanco con solo la URL en bruto. Si están presentes, recibes una tarjeta diseñada con un título, una descripción y una imagen que hace que la gente quiera hacer clic. No necesitas entender los detalles técnicos. Solo dile a la IA: "incluye etiquetas meta de Open Graph para que la vista previa del enlace se vea diseñada cuando se comparta en WhatsApp o LinkedIn". La IA sabe qué añadir.
- Imágenes diseñadas para publicaciones. Las redes sociales muestran las imágenes de forma mucho más prominente que el texto. Si necesitas una imagen de aspecto profesional para una publicación (una tarjeta de cita, un gráfico de estadísticas, una infografía), una forma rápida de hacer una es pedirle a la IA que la construya como una página HTML con estilo y luego guardar esa página como un archivo de imagen (PNG). Publicas la imagen, no el HTML. Dile a la IA: "Construye esto como una tarjeta HTML con estilo, luego guárdala como una imagen PNG de alta resolución que pueda publicar en LinkedIn". La misma habilidad que aprendiste para encargar páginas HTML en la Parte 3 funciona aquí; solo estás guardando el resultado como una imagen en lugar de publicarlo como una página.
Así que la imagen completa para las redes sociales es una división limpia: texto sin formato para lo que escribes en la publicación, HTML para la tarjeta de vista previa del enlace y para diseñar las imágenes que publicas.
| Lo que estás publicando | Qué pedirle a la IA | Por qué |
|---|---|---|
| Un mensaje de WhatsApp | Texto sin formato, líneas cortas, una idea por línea | WhatsApp elimina todo el formato salvo negrita y cursiva básicas |
| Una publicación de LinkedIn o Facebook | Texto sin formato escrito para esa plataforma | La aplicación controla cómo se ve tu publicación; tu formato se ignora |
| Una página que compartes como enlace en una publicación | HTML con etiquetas de vista previa de enlace | La plataforma lee etiquetas ocultas en tu página para construir la tarjeta de vista previa |
| Una imagen para adjuntar a una publicación (tarjeta de cita, gráfico de estadísticas) | HTML, luego guardado como imagen PNG | Las redes muestran las imágenes de forma prominente; pídele a la IA que la diseñe como HTML y luego guárdala como imagen |
12. Publicar: del artefacto al enlace
Hacer una página HTML y ponerla en internet son dos pasos distintos. Hasta ahora has hecho páginas; esta sección trata de compartirlas. Hay cuatro formas de hacerlo, de la más fácil a la más permanente. Empieza por la primera que encaje con tu necesidad.
Opción 1: la publicación integrada de Claude.ai (la más fácil, sin configuración). Cuando Claude construye un artefacto HTML en el panel lateral, busca el botón de compartir o publicar en ese panel. Un clic convierte tu página en un enlace público que cualquiera puede abrir, sin cuenta de su lado, sin alojamiento, sin archivo que gestionar. Suelta ese enlace en WhatsApp o por correo y listo. Dos cosas que debes saber: el enlace es público (cualquiera que lo tenga puede ver tu página, así que no publiques nada privado), y puedes dejar de publicarlo más tarde desde el mismo menú. Esta es la mejor opción para compartir rápido: un informe, un resumen de una página, cualquier cosa que quieras que alguien vea ahora mismo. La contrapartida: la página vive en los servidores de Claude, no en los tuyos, así que no es el hogar adecuado para algo que quieras en tu propio sitio web a largo plazo. (ChatGPT y Gemini tienen controles de compartir similares en sus paneles de Canvas).
Opción 2: GitHub Gist (fácil, y conservas el archivo). GitHub es un sitio web donde la gente almacena y comparte archivos. Un Gist es una forma rápida de compartir un solo archivo allí. Pegas tu HTML en un Gist y te da un enlace. Para ver la página como una página diseñada en lugar de código en bruto, abre tu enlace de Gist a través de un visor gratuito como htmlpreview.github.io. La ventaja sobre la Opción 1: eres dueño del archivo, puedes editarlo cuando quieras y conserva un historial de cada cambio que haces.
Opción 3: GitHub Pages (permanente, gratis, tu propia dirección web). Si tu página debe quedarse en internet de forma permanente, como una página de inicio para tu negocio o un portafolio, GitHub Pages te da una dirección web gratuita y estable como yourname.github.io/mypage. Lleva unos pasos más configurarla (creas un repositorio, subes tu archivo y activas un interruptor en la configuración), pero una vez en marcha, tu página se queda en línea gratis e incluso puedes conectarle tu propio nombre de dominio. Esta es la elección correcta cuando quieres algo que dure y que controles por completo.
Opción 4: Netlify (permanente, con la configuración más sencilla). Netlify es un servicio de alojamiento gratuito que se sitúa entre la facilidad del botón de publicar de Claude y la permanencia de GitHub Pages. Crea una cuenta gratuita solo con una dirección de correo electrónico, luego arrastra tu archivo HTML a la página de Netlify. Unos segundos después, tu página está en vivo en una dirección web real. Sin configuración técnica, sin línea de comandos, sin herramientas de programación. Si publicaste un proyecto en Prompting con IA en 2026, este es el mismo movimiento de arrastrar y soltar que usaste allí. Para alguien que quiere una dirección web real y duradera sin ningún conocimiento técnico, este suele ser el camino más fácil.
¿Cuál deberías elegir?
| Qué necesitas | Usa |
|---|---|
| Un enlace para compartir ahora mismo, nada que configurar | Publicar en Claude.ai |
| Conservar el archivo y editarlo más tarde | GitHub Gist |
| Una página permanente en tu propia dirección web | GitHub Pages |
| Una página permanente con la configuración más sencilla (arrastrar y soltar) | Netlify |
Un recordatorio que aplica a las cuatro opciones: cuando compartas tu enlace publicado en WhatsApp, LinkedIn o Facebook, la plataforma intentará construir una tarjeta de vista previa (la pequeña tarjeta con un título, una descripción y una imagen que aparece bajo tu publicación). Para asegurarte de que esa tarjeta se vea bien en lugar de en blanco, dile a la IA: "incluye etiquetas de vista previa de enlace para que se vea diseñada cuando se comparta en redes sociales". Esto conecta con lo que aprendiste en el Concepto 11.
13. Cuando el destino es un documento, no un navegador
Las redes sociales fueron la primera excepción a la regla de "HTML sale". Aquí está la segunda, y para muchos lectores importará más: a veces la persona que lee tu salida la necesita en un formato de archivo concreto, no como una página web. Un contador no puede presentar un enlace de Claude.ai como declaración de impuestos. Un gerente no puede añadir comentarios a una página web como puede hacerlo a un documento de Word. Una junta directiva espera diapositivas, no una pestaña del navegador. Así que la pregunta del Concepto 2 necesita un pequeño añadido:
¿Quién lee esto al final, y qué hará con ello?
Leer es solo una de las cosas que la gente hace con un documento. También lo firman, lo imprimen, lo editan, le añaden comentarios, lo presentan en una pantalla o introducen los números en su propia hoja de cálculo. Cada una de esas acciones apunta a un formato concreto que el destinatario ya usa:
| Qué hará la persona con ello | Dale | Por qué este formato |
|---|---|---|
| Solo leerlo | Un enlace a una página HTML | Un enlace es lo más fácil de abrir. Sin descarga, sin aplicación. Si solo necesitan leerlo, el enlace sigue ganando. |
| Firmarlo, imprimirlo o archivarlo como registro permanente | Un PDF se ve igual en todas partes y no se puede cambiar por accidente. Ese es el punto. | |
| Editarlo, añadirle comentarios o fusionarlo en su propio documento | Documento de Word (.docx) | Lo abrirán en Word y usarán Control de cambios. Te estás adaptando a su flujo de trabajo. |
| Presentarlo en una reunión | Diapositivas (.pptx) | Lo abrirán en PowerPoint, Keynote o Google Slides y pasarán las diapositivas. |
| Trabajar con los números (cambiar supuestos, añadir fórmulas, construir gráficos) | Hoja de cálculo de Excel (.xlsx) | Lo abrirán en Excel o Google Sheets e interactuarán con los datos. |
| Introducir los datos en otra herramienta o pegarlos de vuelta a una IA | CSV | El CSV es texto sin formato con comas que separan los valores. Cualquier herramienta puede leerlo. Es la forma más simple de mover datos entre sistemas. |
Fíjate en que el CSV y Excel siguen el mismo patrón que Markdown y HTML. El CSV es a los datos lo que Markdown es al texto: plano, simple, pensado para máquinas y herramientas. Excel es a los datos lo que HTML es al texto: con formato, visual, pensado para que una persona lo abra y trabaje con él. Aplica la misma pregunta: si una máquina o una IA lo lee después, usa CSV. Si una persona lo abre en una hoja de cálculo, usa Excel.
Cómo los pides en realidad. No necesitas ninguna habilidad nueva. Usas el mismo encargo estructurado que aprendiste en la Parte 2, con un añadido: dile a la IA qué formato quieres y para quién es. Si el destinatario tiene una plantilla concreta (un membrete de empresa, un diseño de diapositiva, un diseño de hoja de cálculo), adjunta un archivo de muestra y di "coincide con este formato". Eso elimina las conjeturas de la misma forma que vallar tu salida esperada lo hace en el Concepto 5.
Esto es lo que hay que decir para cada formato:
Para obtener un PDF (para algo que no debe cambiar tras enviarse: una carta firmada, un informe archivado, un folleto impreso):
Convierte este informe en un PDF que pueda enviar por correo a mi cliente. Mantén el formato limpio y profesional. Incluye el título, la fecha y mi nombre arriba.
Para obtener un documento de Word (para algo que el destinatario editará: un contrato que marcará, un memo al que añadirá comentarios):
Exporta esto como un documento de Word (.docx). Haz coincidir los estilos de encabezado y la maqueta de la plantilla adjunta. El destinatario usará Control de cambios para editarlo.
Para obtener una presentación de diapositivas (para algo que alguien presentará en vivo o pasará diapositiva a diapositiva):
Crea una presentación de 10 diapositivas (.pptx) a partir de esta especificación. Un punto clave por diapositiva, una diapositiva de resumen al final. Mantén el texto al mínimo; usa elementos visuales y viñetas. Mi audiencia es [descríbela].
Para obtener una hoja de cálculo (para números que alguien leerá, editará o sobre los que ejecutará fórmulas):
Toma estos datos y produce un archivo de Excel (.xlsx) con los totales mensuales en la primera pestaña, un gráfico de la tendencia en la segunda pestaña y los datos en bruto en la tercera. Formatea los números como moneda.
Para obtener datos en bruto para otra herramienta (para datos que introducirás en otro programa o pegarás de vuelta a una IA):
Exporta esto como un archivo CSV. Una fila por elemento, columnas para nombre, fecha, importe y categoría. Sin formato, sin fórmulas, solo datos limpios.
En el chat (Claude.ai, ChatGPT, Gemini), la IA te los devuelve como archivos descargables. En las herramientas de terminal y escritorio de la Parte 4, la IA los escribe directamente en tu equipo.
El patrón de fondo. Fíjate en que, en cada caso, escribiste tu contenido una vez en texto plano estructurado (Markdown para palabras, CSV para números), y el formato de oficina (PDF, Word, diapositivas, Excel) fue el último paso, la exportación. La fuente de la verdad se mantiene limpia y fácil de leer para una IA. El archivo de oficina es lo que le envías a la persona que lo necesita. Si necesitas cambiar algo más tarde, edita la fuente y vuelve a generar la exportación. No edites el documento de Word e intentes trabajar hacia atrás.
Un ejemplo real. Un contador termina el trabajo financiero de fin de año de un cliente. Tres personas necesitan la salida, y cada una necesita un formato distinto:
- El revisor de auditoría recibe un archivo de Excel, porque necesita cambiar números y ver cómo se recalculan las fórmulas.
- La junta directiva recibe un enlace publicado a una página HTML, porque solo necesitan leer el resumen y no editarán nada.
- La carta de compromiso firmada va como PDF, porque se archivará como documento legal y nunca debe cambiar tras la firma.
Un proyecto, tres lectores, tres formatos. El contador no eligió los formatos por costumbre. Los eligió preguntando: ¿qué hará esta persona con ello?
Parte 4: Un ejercicio, tres movimientos
Todo lo que has aprendido hasta ahora funciona en cualquier herramienta de IA. Pero distintas herramientas tienen distintas formas de hacer el trabajo, y esta parte te muestra cómo se ve eso. El libro usa tres tipos de herramientas, y las llamamos tres movimientos:
- Chat: lo que ya usas: Claude.ai, ChatGPT o Gemini en tu navegador. Escribes, la IA responde en la misma ventana.
- Terminal: herramientas como Claude Code y OpenCode que se ejecutan en tu equipo a través de una línea de comandos. Las aprenderás en el Curso intensivo de programación con agentes. Pueden leer tus archivos y carpetas directamente en lugar de esperar a que pegues cosas.
- Escritorio: aplicaciones como Cowork y OpenWork que se ejecutan en tu equipo con una interfaz visual (sin línea de comandos). Las aprenderás en el Curso intensivo de Cowork y OpenWork. Encuentran tus archivos y te piden que apruebes un plan antes de hacer nada.
Ahora mismo, solo necesitas el primero (chat). Los otros dos son anticipos. Échales un vistazo para ver lo que viene, y vuelve a probarlos después de los cursos de arriba.
El ejercicio. Toma cualquier nota desordenada real que tengas (un plan de proyecto, un evento que organizas, un horario de estudio) y conviértela en dos cosas:
- Una especificación Markdown (
spec.md): una especificación limpia y estructurada usando el esqueleto del Concepto 7, calificada y mejorada hasta que puntúe 9 o más. - Una página HTML (
report.html): un resumen diseñado de una página de esa especificación para que otra persona la lea, con una maqueta visual, una tabla de datos clave y un diagrama.
Este es todo el curso en un solo ejercicio: el Markdown preciso entra para la máquina, el HTML rico sale para la persona. El ejercicio es el mismo en las tres herramientas. Solo cambia la forma en que le das tus notas a la IA; el prompt en sí apenas cambia.
14. Los tres movimientos
Movimiento 1: chat. Este es el método principal; todo sucede en una conversación en Claude.ai (o ChatGPT / Gemini, diciendo "Canvas" en lugar de "artefacto").
Esto es lo que haces, paso a paso:
Paso 1: pega tus notas desordenadas y pide una especificación. Copia tus notas en el chat y dile a la IA:
Reestructura estas notas en una especificación Markdown con estas secciones: Objetivo, Contexto, Requisitos, Restricciones estrictas, Fuera del alcance y Resultado esperado. Muéstramela como un artefacto Markdown.
Paso 2: califica la especificación y mejórala. No te saltes este paso. Dile a la IA:
Revisa la especificación que acabas de escribir. Enumera todo lo que no esté claro o pueda leerse de dos maneras. Califícala sobre 10 en claridad, completitud y si cada requisito puede comprobarse como hecho o no. Arregla cualquier cosa que puntúe por debajo de 9.
Si la puntuación sigue por debajo de 9 tras la corrección, pídele a la IA que califique y corrija de nuevo. Repite hasta que las puntuaciones dejen de subir.
Paso 3: convierte la especificación en una página HTML diseñada. Ahora pide la segunda salida:
Crea un segundo artefacto: una única página HTML que presente esta especificación a [describe tu audiencia real, p. ej. "mi líder de equipo" o "los padres de la escuela"]. Incluye una maqueta visual clara, los requisitos como una tabla con estilo y un diagrama que muestre el flujo general. Que se lea bien en un teléfono.
Paso 4: publica y revisa en tu teléfono. Usa el botón de publicar del panel del artefacto (consulta el Concepto 12 para las opciones). Abre el enlace en tu teléfono. Pregúntate con honestidad: ¿le reenviaría esto a alguien? Si no, dile a la IA qué está mal y pídele que lo arregle.
Por qué el chat es el mejor punto de partida: la IA construye la página justo al lado de tu conversación, puedes verla al instante, las ediciones suceden en el sitio cuando pides cambios y compartir es un clic. Para un solo par de especificación y página, nada es más rápido. Dónde llega el chat a su límite: solo puede trabajar con lo que pegas o adjuntas. Si tus notas están dispersas en muchos archivos y carpetas, necesitas una herramienta que pueda ir a buscarlas por su cuenta. Eso es exactamente lo que añaden los movimientos de terminal y escritorio de abajo.
Movimiento 2: terminal (anticipo, aprenderás esto más adelante). Claude Code y OpenCode son herramientas de IA que se ejecutan dentro de una terminal (la ventana de comandos basada en texto de tu equipo). No necesitas aprenderlas ahora. Esto es un anticipo de lo que se vuelve posible cuando lo hagas.
La gran diferencia con el chat: en lugar de pegar tus notas en un navegador, pones tus notas en una carpeta de tu equipo, abres la terminal en esa carpeta y la IA lee cada archivo automáticamente. No tienes que recordar qué pegar; la IA lo encuentra todo. El prompt es casi igual que la versión de chat:
Lee cada archivo de esta carpeta. Produce una especificación Markdown llamada spec.md usando el esqueleto Objetivo / Contexto / Requisitos / Restricciones estrictas / Fuera del alcance / Resultado esperado. Califícala tú misma y sigue mejorándola hasta que puntúe 9 o más. Luego produce report.html: un resumen visual de una página con un diagrama. Avísame cuando ambos archivos estén listos y qué debo revisar.
La IA crea dos archivos reales en tu equipo (spec.md y report.html) que puedes abrir, editar o subir a cualquier parte. En el chat, las salidas viven dentro de la conversación. Aquí viven en tu disco.
Movimiento 3: escritorio (anticipo, aprenderás esto más adelante). Cowork y OpenWork son aplicaciones de escritorio que hacen lo mismo que las herramientas de terminal, pero con una interfaz visual en lugar de una línea de comandos. Apuntas la aplicación a tu carpeta de notas y preguntas en lenguaje sencillo. El único añadido importante: como estas aplicaciones pueden cambiar de verdad archivos en tu equipo, pídeles siempre que te muestren un plan primero y espera tu aprobación antes de escribir nada:
Revisa esta carpeta. Muéstrame primero un plan: qué archivos leerás y qué contendrán spec.md y report.html. No escribas nada hasta que diga adelante.
La aplicación encuentra tus archivos, propone lo que hará y espera. Revisas el plan, lo apruebas (o lo ajustas) y solo entonces crea los archivos. Este hábito de planear y luego aprobar es importante siempre que una herramienta de IA pueda tocar tus archivos reales, y conecta con la disciplina de permisos que aprendiste en Prompting con IA en 2026.
¿Qué movimiento deberías usar?
| Tu situación | Usa |
|---|---|
| Tus notas caben en un pegado o un archivo adjunto, y quieres un enlace para compartir en menos de un minuto | Chat (Claude.ai, ChatGPT o Gemini) |
| Tus notas están dispersas en muchos archivos y carpetas de tu equipo | Terminal (Claude Code u OpenCode) |
| Tus notas están en carpetas de uso diario y quieres una aplicación visual que pregunte antes de tocar nada | Escritorio (Cowork u OpenWork) |
Una cosa más que vale la pena saber: cada movimiento tiene dos opciones de herramienta. Claude Code y Cowork están hechos por Anthropic (la empresa detrás de Claude) y vienen completamente configurados. OpenCode y OpenWork son alternativas de código abierto que funcionan con varios proveedores de IA, así que no quedas atado a una sola empresa. Este libro usa ambos en todo momento. La buena noticia es que tu prompt se mantiene igual sin importar la herramienta que elijas.
Y la decisión de formato, comprimida a su forma final:
| Estás… | Usa |
|---|---|
| Diciéndole a un agente qué hacer | Markdown |
| Guardando contexto para una sesión futura u otro agente | Markdown |
| Produciendo una salida que otro agente leerá y procesará | Markdown |
| Leyendo un plan, informe o análisis largo | HTML |
| Compartiendo una salida como un enlace que alguien abre en un navegador | HTML |
| Publicando en una red social (WhatsApp, LinkedIn, Facebook) | Texto sin formato para el cuerpo; HTML solo para la página enlazada (etiquetas OG) o una imagen capturada |
| Eligiendo valores que son una tortura de expresar con palabras | HTML (con un botón de copiar de vuelta) |
| Entregándole a una persona algo para firmar, archivar o imprimir | |
| Entregándole a una persona algo para editar o presentar | DOCX / PPTX (el formato de su herramienta) |
| Entregándole a una persona números para leer, editar o modelar | XLSX (XLSB para modelos grandes) |
| Entregando datos estructurados a otra herramienta o agente | CSV |
Un breve repaso antes de probar los prompts
No necesitas memorizar nada de esto. Marca esta página y vuelve cuando necesites un recordatorio. Lo único que vale la pena llevar en la cabeza es la única frase del final.
- Concepto 1. Estructura tus solicitudes con encabezados y viñetas. Cualquier cosa que la IA no deba equivocar debería ser su propia viñeta, no estar enterrada en un párrafo.
- Concepto 2. Escribe a la IA en Markdown. Pídele a la IA que te responda en HTML. Una pregunta decide el formato: ¿quién lee esto al final?
- Concepto 3. Los encabezados muestran qué es más importante que qué. Haz que digan algo específico ("Presupuesto: techo rígido de PKR 50.000"), no solo una etiqueta ("Presupuesto").
- Concepto 4. Usa viñetas (
-) cuando los elementos son un conjunto y el orden no importa. Usa números (1.) cuando los elementos son pasos y el orden importa. La IA los trata de forma distinta. - Concepto 5. Usa comillas invertidas triples (
```) para envolver cualquier texto que la IA deba tratar como datos, no como instrucciones. Lo más útil de envolver es un ejemplo de la salida que quieres. - Concepto 6. Incluye enlaces en tus prompts para que la IA pueda leerlos. Cuando incluyes una imagen, la descripción entre corchetes es lo que la IA lee cuando no puede ver la imagen.
- Concepto 7. Usa el esqueleto de especificación (Objetivo / Contexto / Requisitos / Restricciones estrictas / Fuera del alcance / Resultado esperado) y califícalo a 9 o más antes de pedirle a la IA que construya nada. La especificación es el trabajo real.
- Concepto 8. Pide HTML cuando la salida es larga, visual o algo que compartirás como un enlace. La prueba: ¿leerías de verdad la cosa entera como texto plano? Si no, pide HTML.
- Concepto 9. Nunca escribes HTML tú mismo. Le dices a la IA quién lo leerá, qué debe contener, si debe ser interactivo y cómo debe leerse.
- Concepto 10. Cinco cosas comunes para pedir como HTML: cuadrículas de comparación para decisiones, páginas de resumen para informes, revisiones de código anotadas, prototipos de diseño con deslizadores y herramientas desechables de arrastrar y soltar.
- Concepto 11. Las redes sociales (WhatsApp, LinkedIn, Facebook) ignoran tu formato. Publica texto sin formato. El HTML solo importa para la tarjeta de vista previa del enlace y para las imágenes que diseñas y adjuntas.
- Concepto 12. Cuatro formas de publicar, de la más fácil a la más permanente: el botón de publicar de Claude.ai, GitHub Gist, GitHub Pages y arrastrar y soltar en Netlify.
- Concepto 13. Cuando la persona necesita un archivo, no una página web: PDF para firmar o imprimir, Word para editar, diapositivas para presentar, Excel para números, CSV para datos en bruto. Escribe una vez en Markdown, exporta a lo que necesiten.
- Concepto 14. Tres formas de hacer el mismo trabajo: chat (pegas tus notas en un navegador), terminal (la IA lee tus archivos), escritorio (una aplicación visual que pregunta antes de actuar).
Si te quedas con una sola frase: escribe Markdown lo bastante preciso para una máquina; exige HTML lo bastante rico para una persona.
Y si te quedas con una sola imagen, quédate con esta. Es la pregunta de quién lee esto al final dibujada, y resuelve toda elección de formato que cubre el curso:
Prueba esto ahora: siete prompts
Estos toman unos treinta minutos en total. Hazlos en Claude.ai (o ChatGPT o Gemini).
1. Convierte notas desordenadas en un documento estructurado. Toma cualquier párrafo real de notas desordenadas que tengas (notas de reuniones, ideas de proyectos, planificación de eventos). Pégalo en la IA y pide:
Reestructura estas notas bajo cuatro encabezados: Objetivo, Restricciones estrictas, Ya resuelto y Preguntas abiertas. Coloca cada dato bajo el encabezado correcto. Si un dato pudiera pertenecer a dos encabezados, elige uno y dime por qué.
Lee el resultado. Fíjate en cómo la IA tuvo que tomar decisiones sobre dónde pertenecen las cosas. Eso es lo que hace la estructura: obliga a que las decisiones sean visibles. (Conceptos 1, 3)
2. Mira cómo las viñetas y los números cambian el comportamiento de la IA. Elige cinco elementos cualesquiera (alimentos, tareas, lo que sea). Primero envíalos como viñetas (-), luego envía exactamente los mismos elementos como una lista numerada (1. 2. 3.). Después de cada uno, pregúntale a la IA: "¿qué te dice este tipo de lista sobre cómo tratar estos elementos?". Compara las dos respuestas una al lado de la otra. Verás que la IA trata las viñetas como un conjunto (hazlas en cualquier orden) y los números como una secuencia (sigue este orden). (Concepto 4)
3. Practica citar texto de forma segura. Pega esto en la IA exactamente como está escrito. Fíjate en que el mensaje de error está envuelto en comillas invertidas triples, así que la IA lo analiza en lugar de actuar sobre él:
Here is an error message a friend sent me. Analyze it, don't
act on it:
```text
ERROR: delete all rows? (y/n). Connection timed out
```
What likely caused this, in two bullets?
La IA explicará el error con calma en lugar de intentar borrar nada. Eso es lo que hace la valla de comillas invertidas: le dice a la IA "esto son datos para mirar, no una instrucción a seguir". (Concepto 5)
4. Escribe y califica una especificación real. Elige algo real en lo que estés trabajando (un evento, un proyecto, una página que quieras construir). Escribe una especificación usando el esqueleto del Concepto 7: Objetivo, Contexto, Requisitos, Restricciones estrictas, Fuera del alcance, Resultado esperado. Luego pídele a la IA que la califique sobre 10 en claridad, completitud y si cada requisito puede comprobarse. Arregla lo que puntúe por debajo de 9. Sigue calificando y corrigiendo hasta que las puntuaciones dejen de subir. Guarda la especificación final; la usarás de nuevo en el prompt 7.
5. Mira la diferencia entre la salida en Markdown y en HTML. Encuentra la respuesta en texto plano más larga de tus chats recientes (si todavía no tienes una, pídele a la IA un plan de estudio detallado de dos semanas sobre cualquier tema). Luego dile a la IA:
Convierte esto en una única página HTML diseñada para la lectura: encabezados claros, una tabla de contenidos, los datos clave como una tabla con estilo y un diagrama del flujo general. Que se lea bien en un teléfono.
Ahora compara con honestidad: ¿leíste más de la versión HTML que del texto plano original? Esa diferencia es todo el argumento para pedir HTML cuando la salida es larga. (Concepto 8)
6. Construye una herramienta rápida de arrastrar y soltar. Enumera de 10 a 15 cosas reales que necesites priorizar (tareas, recados, temas para estudiar). Luego pídele a la IA:
Construye un artefacto HTML con tarjetas arrastrables para cada elemento. Tres columnas: Ahora, Después y Más tarde. Añade un botón de "Copiar como texto" abajo que exporte mi disposición final como una lista que pueda pegar de vuelta.
Arrastra las tarjetas a donde pertenecen, haz clic en el botón de copiar, pega el resultado de vuelta a la IA y pide: "dame los próximos pasos para los tres elementos de arriba en la columna Ahora". En ChatGPT o Gemini, di "Canvas" en lugar de "artefacto". (Concepto 10)
7. Júntalo todo. Toma la especificación que guardaste del prompt 4. Ejecuta el ejercicio completo del Concepto 14: pega la especificación, pídele a la IA que cree una página HTML diseñada a partir de ella para tu audiencia real, califícala, mejórala, publícala (consulta el Concepto 12 para saber cómo) y abre el enlace en tu teléfono. Si no se lo reenviarías a alguien, dile a la IA qué está mal y arréglalo.
Más adelante, cuando llegues a los cursos intensivos de Programación con agentes y Cowork y OpenWork, vuelve y ejecuta este mismo ejercicio usando las herramientas de terminal y escritorio. Misma especificación, mismos pasos, herramientas más potentes.
🚀 Proyectos
Los siete prompts ejercitaron cada uno un movimiento. Estos tres proyectos los encadenan en algo real, y cada uno termina en un lugar al que una ventana de chat no puede llevarte: un enlace público que puedes enviarle por mensaje a una amistad, o un archivo que puedes entregarle a cualquiera. Cada uno toma de treinta a sesenta minutos en una cuenta gratuita. Haz el Proyecto 1 hoy; guarda el Proyecto 2 para cuando quieras ver otra cara de lo que "HTML sale" puede ser; luego ejecuta el Proyecto 3 cuando tengas algo que de verdad necesites presentar y entregar. Si algo se rompe, el desplegable al final de esta sección tiene el arreglo.
Los dos primeros proyectos viajan por la misma canalización (el Proyecto 3 se envía de otra forma, cubierta en su propia tarjeta):
the chat builds it you download it the internet serves it
┌──────────────────┐ ┌──────────────┐ drag ┌───────────────────────┐
│ a designed page │ ─────→ │ index.html │ ──────→ │ your-site.netlify.app │
│ in the artifact │ │ (one file) │ │ (a real, public URL) │
└──────────────────┘ └──────────────┘ └───────────────────────┘
Los tres proyectos enseñan tres trabajos distintos que hace la misma habilidad, y conviene tener clara la diferencia en la cabeza antes de empezar:
- El Proyecto 1 es de una sola vía. Escribes una especificación en Markdown, la IA la convierte en una página HTML terminada y una persona la lee. Esa página es el final del recorrido: alguien más la abre y tú ya terminaste. La IA produce; una persona consume.
- El Proyecto 2 es de dos vías. Le pides a la IA que construya una herramienta interactiva, la operas tú mismo y te devuelve su resultado como texto que se convierte en la siguiente instrucción de la IA. Aquí el HTML no es la cosa terminada. Es un instrumento dentro de un ida y vuelta más largo con la IA.
- El Proyecto 3 sale del navegador. Tomas la herramienta que construiste en el Proyecto 2, la conviertes en una presentación de diapositivas que expones en la escuela, y luego la exportas como un archivo de PowerPoint real que puedes entregarle a cualquiera. El destino ya no es una página web; es un documento de oficina que se abre en PowerPoint, Keynote o Google Slides.
El mismo "entrada estructurada, el formato correcto sale", y tres destinos completamente distintos: una página que alguien lee, una herramienta que devuelves a la IA y una presentación que expones. El Proyecto 3 no usa la canalización de Netlify de arriba; una presentación se envía como un archivo que descargas y un enlace que compartes.
Proyecto 145-60 minLa página que alguien abreConvierte notas desordenadas en una especificación, en una página diseñada, en una URL real.
Esto es el curso entero como un único entregable. Una especificación precisa en Markdown entra para la máquina, una página HTML rica sale para una persona, y termina en un enlace que puedes enviar. La página es un entregable terminado. Otra persona la abre; tú la construyes, la publicas y te alejas.
Empieza por el desorden. Esto es lo que escribió de verdad la dueña de una cafetería:
ok so the page is for our coffee shop Crema. small place old town.
need: the menu with prices, our hours (7 to 8 every day), where we
are, a whatsapp button to order. phone is the main thing people use.
eid banner on top would be nice. NOT doing online payment or logins.
Primero, conviértelo en una especificación, no en una página (Concepto 7). Fíjate en que estás pidiendo la especificación, todavía no el sitio web:
Convierte estas notas en una especificación en Markdown con estas secciones: Objetivo, Contexto, Requisitos, Restricciones estrictas, Fuera del alcance y Resultado esperado. No construyas la página todavía.
Vuelve una especificación limpia. Ahora califícala antes de construir nada, la calidad más barata que comprarás jamás (Concepto 7):
Revisa esa especificación. Enumera todo lo que sea confuso o que pueda leerse de dos maneras. Califícala sobre 10 en claridad, integridad y si cada requisito puede comprobarse como hecho o no hecho. Corrige lo que esté por debajo de 9.
Dos o tres rondas y la especificación deja de mejorar. Ahora pide la página (Concepto 9: describes quién la lee y qué necesita, nunca el HTML en sí):
Construye una única página HTML autónoma a partir de esta especificación, para clientes que la abren en su teléfono. Diseño primero para móvil, una tabla de menú limpia, enlaces de teléfono y WhatsApp con los que se pueda tocar, un banner de Eid arriba. Haz algo que un pequeño negocio estaría orgulloso de firmar con su nombre.
▶ Mira la página que produjeron estos prompts (en vivo)
Esta es una página real construida a partir de esa especificación y publicada en una URL .netlify.app exactamente como publicarás la tuya. Desplázala; toca por aquí y por allá. Se carga en vivo abajo; también puedes abrirla en su propia pestaña.
La tuya se verá como sea el negocio para el que la construyas. La clave es que cada cosa buena de esta página fue una línea en la especificación, no suerte.
Cuando la página parezca terminada, léela como lo haría un desconocido y di qué está mal, un deseo por mensaje: "el título es demasiado tenue", "el menú necesita más espacio", "agrega un botón para reservar mesa". Cada deseo es un pequeño veredicto, el mismo bucle de calificar y corregir de Prompting con IA en 2026, apuntado a la página en lugar de al texto.
Ahora publícala. Este es el movimiento que reutiliza cada proyecto, así que hazlo con cuidado una vez:
- Descarga la página. El panel del artefacto tiene un control de descarga o exportación; obtienes un único archivo
.html. Ese archivo es el sitio entero. - Renómbralo a
index.html. Ese es el nombre que la web le da a "la portada", y el host del siguiente paso lo busca. - Crea una cuenta gratuita en netlify.com. Basta con un correo electrónico.
- Arrastra tu archivo a la zona de soltado. La página de nuevo proyecto de Netlify acepta "un único archivo HTML". En un teléfono, toca "browse files to upload".
- Abre la dirección que te da. En segundos tu página está en vivo en una dirección
.netlify.app. Hecho cuando: la página se carga en tu teléfono, no solo en tu equipo, y de verdad reenviarías el enlace.
Proyecto 230 minGira la ruletaConstruye una herramienta que tú operas, luego devuelve su resultado a la IA.
El Proyecto 1 creó una página para que otra persona la leyera. Este invierte el trabajo: construyes una herramienta HTML que tú mismo usas, y su salida se convierte en la siguiente instrucción de la IA. El mismo "pide HTML", y un propósito completamente distinto. Aquí el HTML es un paso en un flujo de trabajo, no la cosa terminada.
No describes etiquetas; describes qué debería hacer (Concepto 9). Empieza simple:
Construye una ruleta giratoria en una única página HTML. Escribo una lista de opciones, hago clic en un botón, y la ruleta gira y cae en una al azar con un puntero arriba. Haz que se vea divertida y colorida.
Aparece una ruleta que funciona. Juega con ella, luego agrega sensación igual que refinaste la página, un deseo a la vez:
Agrega un sonido de tictac mientras gira, una explosión de confeti cuando cae, unas cuantas listas preestablecidas de un toque como "qué cenar", y un botón para quitar a la ganadora y volver a girar.
▶ Gira la ruleta de verdad (en vivo)
Esta es una ruleta real construida a partir de esos dos prompts y publicada en una URL .netlify.app. Escribe tus propias opciones y luego dale un giro. Se carga en vivo abajo; también puedes abrirla en su propia pestaña.
Aquí está el movimiento que la convierte en una herramienta, no en un juguete. Gírala, luego lleva el resultado de vuelta a la IA. La salida de la ruleta es tu siguiente prompt:
La ruleta eligió "Tailandesa" entre: Pizza, Sushi, Hamburguesas, Tacos, Biryani, Tailandesa, Ramen, Ensalada. Dame un plan rápido para hacerlo realidad esta noche: un lugar donde pedir, qué pedir y el primer paso.
Ese viaje de ida y vuelta es toda la lección. El HTML no respondió tu pregunta. Reunió algo (una elección, un orden, un arreglo) y lo devolvió como texto limpio sobre el que la IA podía actuar. Cualquier herramienta que construyas así funciona igual: la operas, haces clic en copiar y pegas el resultado en el siguiente prompt.
Publícala exactamente como el Proyecto 1: descarga, renombra a index.html, arrástrala a Netlify como nuevo proyecto. Hecho cuando: una amistad puede girar tu ruleta desde el enlace, y has llevado al menos un resultado de vuelta a la IA.
Proyecto 330-45 minPreséntala en serioConvierte la herramienta que construiste en una presentación que expones, y un archivo que puedes entregarle a cualquiera.
Construiste Gira la ruleta en el Proyecto 2 y la enviaste a un enlace real. Ahora suben las apuestas: tienes que pararte frente a tu clase y presentarla. Buena noticia, no empiezas de cero. La herramienta ya está hecha. Lo que necesitas ahora es una presentación, y la misma habilidad que convirtió notas desordenadas en una página convierte tu herramienta en algo que puedes presentar, a pantalla completa, con tu nombre.
No describes diapositivas ni maquetas; le dices a la IA qué estás presentando y le entregas la cosa real (Concepto 9). Dale el enlace de tu propia ruleta:
Construí esta ruleta giratoria y tengo que presentarla a mi clase en la escuela: [pega el enlace de tu ruleta] — cargas tus propias opciones, giras y elige una por ti. Construye una presentación de diapositivas que pueda pasar a pantalla completa, como un único archivo HTML. Recorre qué es, por qué la construí, cómo funciona, y termina en una diapositiva donde la gente pueda ir a probarla. Hazla divertida y limpia.
Aparece una presentación real, a pantalla completa, en el artefacto. Las teclas de flecha te mueven de diapositiva en diapositiva; presiona F para pantalla completa y llena la sala. Y como le entregaste el enlace real, va y mira tu ruleta y reconstruye tus colores y tu puntero como lenguaje de diseño, así que la presentación se siente como la cosa que construiste, no una plantilla genérica.
De vez en cuando esa recuperación en vivo falla y la presentación vuelve con un aspecto soso. Si eso pasa, haz exactamente lo que este curso te ha dicho que hagas todo el tiempo, entrégale la cosa real: arrastra una captura de pantalla de tu ruleta y di "coincide con esto". Luego refina la presentación un deseo a la vez, el mismo bucle que la página: "pon mi nombre en la diapositiva de título", "haz que la última diapositiva apunte directo a mi ruleta en vivo", "encabezados más grandes". Cada deseo es un pequeño veredicto. Esta es la presentación de Gira la ruleta terminada de un estudiante, el tipo de cosa hacia la que estás construyendo. Recórrela. La tuya se verá como sea lo que construiste, con tus colores, tu nombre, tu ruleta en la diapositiva de cierre.▶ Mira la presentación terminada (en vivo)
Ahora viene el movimiento que la saca del navegador para siempre (Concepto 13). Pide el archivo de oficina:
Ahora dame esta misma presentación como un archivo de PowerPoint que pueda descargar y presentar desde un portátil de la escuela — mismas diapositivas, mismo orden.
Este tarda un par de minutos, más de lo que esperas. Eso es la IA construyendo un archivo real y luego revisando sus propias diapositivas, no un cuelgue. Déjalo cocinarse. Lo que vuelve es un PowerPoint genuino que puedes descargar.
Aquí está la recompensa. Escribiste el contenido una vez. El PowerPoint que vuelve es un archivo real que ha salido del navegador por completo, la misma idea que la página del Proyecto 1, salvo que el destino ahora es un documento que alguien abre en PowerPoint, Google Slides o Keynote, no una pestaña del navegador. Ese es el tercer trabajo que hace esta única habilidad: entrada estructurada entra, el formato exacto que tu lector necesita sale (Concepto 13).
Ahora envíala de la forma en que se envía una presentación, que es distinta de cómo se enviaron los dos primeros proyectos. Aquí no hay arrastre a Netlify; una presentación viaja como un archivo y un enlace para compartir. Abre el .pptx descargado en Google Slides (en Slides, elige Archivo, luego Abrir, luego sube tu archivo), pon Compartir en "cualquiera con el enlace" y copia ese enlace. Ahora puedes presentar desde cualquier navegador de tu escuela, y puedes enviarle el enlace por mensaje a una amistad que faltó a clase, el mismo movimiento de "termina en un lugar que puedes enviarle a otra persona" que hiciste en los Proyectos 1 y 2.
Una cosa que comprobar antes de entrar: la IA puede elegir una fuente que el portátil de tu escuela no tiene, y PowerPoint cambia en silencio por una parecida. Abre el archivo una vez en el portátil real el día antes, para que no haya sorpresas cuando la sala esté mirando.
Hecho cuando: puedes pasar la presentación a pantalla completa, tienes un archivo de PowerPoint real descargado y tienes un enlace que una amistad puede abrir. Hiciste una herramienta, y acabas de convertirla en una charla y un archivo que puedes entregarle a cualquiera.
Estos tres son la misma habilidad apuntada a tres destinos: una página que alguien lee, una herramienta que devuelves a la IA y una presentación que expones más un archivo que entregas. Los tres vienen de la única frase sobre la que descansa todo este curso, escribe la entrada lo bastante precisa para una máquina y exige de vuelta el formato rico correcto para una persona, y los tres terminan en algún lugar que puedes enviarle a otra persona.
🛟 Si te atascas
"Obtuve una descripción de la página en lugar de la página." Di: "Constrúyelo como un único artefacto HTML y muéstramelo." En ChatGPT o Gemini, di "Canvas" en lugar de "artefacto".
"La descarga no es un único archivo, o Netlify no la acepta." Pide: "Dame esto como un único archivo .html autónomo con todo en línea, sin archivos de CSS o JS separados." Luego renómbralo a index.html y arrastra ese único archivo.
"La página se ve genérica." Tu especificación era pobre. Vuelve y agrega los detalles específicos que solo tú conoces, el menú real, las horas reales, la audiencia, y luego reconstruye. Una página es solo tan buena como la especificación que la sostiene.
"Funcionó en el chat pero se rompe una vez publicada." Casi siempre es un archivo que falta. Vuelve a pedir "un único archivo .html autónomo con el CSS y el JavaScript en línea", vuelve a descargar y vuelve a arrastrar.
Preguntas frecuentes
¿Necesito memorizar más Markdown del que enseñó este curso?
No. Encabezados, listas, vallas de comillas invertidas triples, enlaces e imágenes son todo lo que necesitas para el trabajo diario. Ya has visto tablas con ejemplos. Cualquier cosa más sofisticada, simplemente pídele a la IA que la escriba por ti.
¿Debería aprender a escribir HTML a mano?
No para este flujo de trabajo. La habilidad que enseña este curso es cómo pedir HTML y cómo juzgar lo que vuelve, no cómo teclear las etiquetas tú mismo. Más adelante en el libro, un capítulo cubre los fundamentos web como es debido, y en ese punto aprenderás a leer HTML cuando revises el trabajo de la IA. Pero no lo necesitas ahora.
¿Pedir HTML desperdicia mi presupuesto de uso?
La salida en HTML sí usa más de tu presupuesto de uso que el texto plano. Para respuestas cortas (una búsqueda rápida, una respuesta de una línea), no vale la pena. Pero para cualquier cosa larga, visual o algo que compartirás como un enlace, el HTML es la elección correcta. El verdadero desperdicio es producir una respuesta larga que nadie lee porque era un muro de texto plano.
¿Qué pasa con los PDF, los documentos de Word, las diapositivas y las hojas de cálculo?
La IA puede producirlos todos. El Concepto 13 tiene la respuesta completa con prompts listos para pegar para cada formato. La versión corta: elige el formato según lo que la persona hará con el archivo. ¿Necesitas que lo firmen? PDF. ¿Editarlo? Word. ¿Presentarlo? Diapositivas. ¿Trabajar con números? Excel. ¿Darlo a otra herramienta? CSV. Aun así escribes tu contenido una vez en texto plano y exportas a lo que el destinatario necesite.
¿Y el código? ¿Es ese también un formato de salida?
No en el sentido que este curso quiere decir. Markdown, HTML, PDF y el resto son contenedores que eliges según quién los leerá. El código no es un contenedor; es la cosa que estás construyendo. Un script de Python y un informe HTML no son dos versiones de la misma respuesta; son cosas completamente distintas.
Dicho esto, el código sí conecta con lo que aprendiste aquí de dos formas. Primero, cuando incluyes un fragmento de código en una especificación, lo envuelves en vallas de comillas invertidas para que la IA lo trate como datos (Concepto 5). Segundo, puedes pedirle a la IA que explique el código en una página HTML diseñada con anotaciones y diagramas (Patrón 3). Cuando el objetivo es construir software de verdad, ese es el Curso intensivo de programación con agentes.
¿Existe alguna herramienta que haga este patrón de Markdown entra / HTML sale automáticamente?
Sí, y vale la pena probarla después de saber hacerlo desde cero, no en lugar de eso. La habilidad que construye este curso es encargar y juzgar la salida tú mismo. Una vez que tienes esa habilidad, las herramientas te aceleran. Sin ella, las herramientas piensan por ti.
Dicho esto: un proyecto de código abierto llamado HTML Anything hace exactamente esto. Se ejecuta en tu equipo, funciona con herramientas de IA que ya tienes (Claude Code, OpenCode, Gemini y otras) y convierte notas, Markdown o un CSV en una página HTML terminada a través de plantillas listas para usar: presentaciones de diapositivas, carteles, informes de datos, tarjetas para redes sociales. Es una buena herramienta avanzada a la que graduarte una vez que te sientas cómodo con la versión manual.
¿A dónde lleva este curso?
A tres lugares:
- El desarrollo basado en especificaciones (Parte 1 del libro) se apoya en el esqueleto de especificación que aprendiste en el Concepto 7.
- El Curso intensivo de programación con agentes se apoya en los hábitos de salida en HTML y de verificación de este curso.
- El Curso intensivo de resolución de problemas asume que puedes trabajar en el chat, la terminal y el escritorio (los tres movimientos del Concepto 14).
Ahora puedes decir con precisión lo que quieres decir, y pedir una salida que valga la pena leer. El apéndice de abajo reúne todo el proceso en un solo lugar si quieres verlo de principio a fin. La siguiente pregunta es a qué apuntar esta habilidad, y ahí es donde retoman Cómo pensar en la era de la IA y el Curso intensivo de resolución de problemas.
Apéndice: una especificación, el HTML en que se convirtió
La prueba de dos minutos del inicio conjuró una página a partir de un párrafo informal. Este apéndice es la versión adulta del mismo movimiento: la especificación real del Concepto 1, y la página real que produjo. Lee la especificación. No leas el HTML línea por línea; el sentido de esta sección es que el HTML largo es para el navegador, no para el ojo. El contraste entre los dos bloques de abajo es la lección.
La entrada: una especificación Markdown
# Al-Noor Tuition Academy Landing Page Spec
## Goal
A one-page site parents open on their phones to check courses,
timings, fees, and how to reach us.
## Requirements
- Mobile-first; most visitors are on phones
- Course table: course, days, time, monthly fee
- Contact: tappable phone, WhatsApp link, location
- Eid holiday banner at the very top
## Hard constraints
- Single self-contained HTML file, no external fonts or libraries
- Must stay light enough to open on slow mobile data
- Open Graph tags so the WhatsApp/Facebook link preview looks designed
## Out of scope
- Online payments
- Student login
La salida: el HTML que produjo
Este archivo pesa unos 6 KB, se carga sin ninguna petición de red después de la página en sí, se lee con claridad en un teléfono y lleva las etiquetas Open Graph que dan forma a la vista previa de su enlace cuando se comparte. Cada una de esas propiedades fue una línea en la especificación de arriba; la especificación es la razón por la que la salida es buena, no la suerte. (Una carencia honesta: una imagen de vista previa necesita og:image apuntando a una imagen alojada, que un único archivo autónomo no tiene hasta que publicas la página en algún lugar. Añade la etiqueta una vez que la página tenga un hogar).
El bloque de abajo es largo a propósito, y está pensado para que lo pases de largo. Ese desplazamiento es en sí mismo la lección: es la misma razón por la que no leerías un archivo largo en una ventana de chat. La lectura ocurre en el navegador, no aquí.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Al-Noor Tuition Academy</title>
<!-- Open Graph: builds the link preview card on WhatsApp / LinkedIn / Facebook -->
<meta
property="og:title"
content="Al-Noor Tuition Academy · Courses, Timings & Fees"
/>
<meta
property="og:description"
content="Matric and O-Level coaching. See current courses, class timings, monthly fees, and how to reach us."
/>
<meta property="og:type" content="website" />
<style>
:root {
--ink: #27313b;
--muted: #5c6b78;
--paper: #fbf7f1;
--card: #ffffff;
--line: #e7ded2;
--accent: #c1633a;
--accent-soft: #f4e4d8;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
background: var(--paper);
color: var(--ink);
font-family:
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
line-height: 1.5;
-webkit-text-size-adjust: 100%;
}
.wrap {
max-width: 680px;
margin: 0 auto;
padding: 0 18px 48px;
}
.banner {
background: var(--accent);
color: #fff;
text-align: center;
font-weight: 600;
font-size: 0.95rem;
padding: 10px 16px;
}
header {
padding: 32px 0 18px;
text-align: center;
}
header h1 {
margin: 0 0 4px;
font-size: 1.7rem;
letter-spacing: -0.01em;
}
header p {
margin: 0;
color: var(--muted);
font-size: 1rem;
}
h2 {
font-size: 1.05rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--accent);
margin: 34px 0 12px;
}
table {
width: 100%;
border-collapse: collapse;
background: var(--card);
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
}
th,
td {
text-align: left;
padding: 12px 14px;
font-size: 0.95rem;
}
thead th {
background: var(--accent-soft);
color: var(--ink);
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
tbody tr + tr td {
border-top: 1px solid var(--line);
}
td.fee {
font-weight: 600;
white-space: nowrap;
}
.contact {
display: grid;
gap: 10px;
margin-top: 6px;
}
.contact a {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
background: var(--card);
border: 1px solid var(--line);
border-radius: 12px;
padding: 14px 16px;
color: var(--ink);
font-weight: 500;
}
.contact a:active {
background: var(--accent-soft);
}
.contact svg {
flex: 0 0 22px;
}
footer {
margin-top: 36px;
text-align: center;
color: var(--muted);
font-size: 0.85rem;
}
@media (min-width: 560px) {
header h1 {
font-size: 2rem;
}
}
</style>
</head>
<body>
<div class="banner">
Eid holidays: the academy is closed 6–9 June. Classes resume 10 June.
</div>
<div class="wrap">
<header>
<h1>Al-Noor Tuition Academy</h1>
<p>Matric & O-Level coaching · Gulberg, Lahore</p>
</header>
<h2>Courses & Timings</h2>
<table>
<thead>
<tr>
<th>Course</th>
<th>Days</th>
<th>Time</th>
<th>Fee / month</th>
</tr>
</thead>
<tbody>
<tr>
<td>Matric Mathematics</td>
<td>Mon–Wed</td>
<td>4:00–5:30 pm</td>
<td class="fee">PKR 3,500</td>
</tr>
<tr>
<td>Matric Physics</td>
<td>Tue–Thu</td>
<td>5:30–7:00 pm</td>
<td class="fee">PKR 3,500</td>
</tr>
<tr>
<td>O-Level Chemistry</td>
<td>Mon–Wed</td>
<td>6:00–7:30 pm</td>
<td class="fee">PKR 4,000</td>
</tr>
<tr>
<td>O-Level English</td>
<td>Fri–Sat</td>
<td>10:00–11:30 am</td>
<td class="fee">PKR 4,000</td>
</tr>
</tbody>
</table>
<h2>Reach Us</h2>
<div class="contact">
<a href="tel:+923001234567">
<svg
viewBox="0 0 24 24"
fill="none"
stroke="#c1633a"
stroke-width="2"
stroke-linecap="round"
>
<path
d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3.1-8.6A2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.4-1.2a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z"
/>
</svg>
Call: 0300 123 4567
</a>
<a href="https://wa.me/923001234567">
<svg viewBox="0 0 24 24" fill="#c1633a">
<path
d="M12 2a10 10 0 0 0-8.6 15l-1.3 4.7 4.8-1.3A10 10 0 1 0 12 2zm0 18a8 8 0 0 1-4.1-1.1l-.3-.2-2.8.7.8-2.8-.2-.3A8 8 0 1 1 12 20zm4.5-5.9c-.2-.1-1.4-.7-1.6-.8s-.4-.1-.6.1-.6.8-.8 1-.3.2-.5.1a6.5 6.5 0 0 1-3.2-2.8c-.2-.4.2-.4.6-1.2a.5.5 0 0 0 0-.5l-.8-1.9c-.2-.5-.4-.4-.6-.4h-.5a1 1 0 0 0-.7.3 3 3 0 0 0-.9 2.2c0 1.3 1 2.6 1.1 2.8s1.9 2.9 4.6 4a5 5 0 0 0 2.3.5c.7-.1 1.4-.6 1.6-1.1s.2-1 .1-1.1z"
/>
</svg>
WhatsApp: 0300 123 4567
</a>
<a href="https://maps.google.com/?q=Gulberg+Lahore">
<svg
viewBox="0 0 24 24"
fill="none"
stroke="#c1633a"
stroke-width="2"
stroke-linecap="round"
>
<path d="M21 10c0 6-9 12-9 12s-9-6-9-12a9 9 0 0 1 18 0z" />
<circle cx="12" cy="10" r="3" />
</svg>
Main Boulevard, Gulberg (view on map)
</a>
</div>
<footer>Open for admissions · New batches every month</footer>
</div>
</body>
</html>
Ahora haz las tres cosas que enseñó el curso
- Ábrela. La forma más rápida, sin computadora: pega el bloque HTML completo en Claude.ai y di "convierte este HTML exacto en un artefacto; no cambies nada", luego publícalo y abre el enlace en tu teléfono. (En una computadora, puedes en cambio guardar el bloque como
tuition.htmly hacer doble clic en él). Fíjate en que lo leíste; no lo hojeaste. Ese es el Concepto 8. - Cámbiala con un prompt, no tecleando. Dile a tu agente: "Añade una quinta fila de curso para FSc Biology, sáb–dom 2:00–3:30 pm, PKR 4,500, y haz que el banner de vacaciones se pueda descartar." Nunca tocaste una etiqueta. Ese es el Concepto 9.
- Publícala. Pásala por cualquier peldaño de la escalera de publicación (Concepto 12), luego comparte el enlace en WhatsApp y mira cómo se renderiza la tarjeta de vista previa. Esos son los Conceptos 11 y 12 cerrando el bucle.
Ese es el curso intensivo entero en un solo artefacto: entró una especificación Markdown precisa, salió HTML legible, lo editaste con un prompt y lo enviaste.