Pídele a Claude que te devuelva la respuesta en HTML, no en texto plano

Cuando le pides a Claude un plan a varias fases, en HTML te lo entrega como timeline visual: cada fase con su tarjeta, sus tickets dentro, sus mockups inline, sus snippets de código.

Demo: timeline de un plan de implementación.

En markdown sería una lista anidada de 80 líneas. En HTML lo recorres en 30 segundos y sabes en qué fase estás.

Le pides a Claude que te muestre una animación. En markdown te describe la curva con palabras. En HTML te entrega la animación real con un slider para cambiar la duración y un input para cambiar el easing.

Demo: prototipo de animación con sliders.

Esto vale doble cuando estás iterando: no le pides "ahora más lento, ahora más rápido". Tú mueves el slider y ya está.

Tienes 30 tickets y necesitas decidir cuáles van ahora, cuáles después y cuáles se cortan. En markdown te quedan tres listas planas. En HTML te lo entrega como tablero kanban con columnas que puedes reordenar.

Demo: tablero kanban Now / Next / Later / Cut.

Mueves la tarjeta de columna y la decisión queda grabada en el DOM. Sin abrir Notion ni Linear.

Estás diseñando un componente y quieres ver tres variantes al mismo tiempo. En markdown te describe cada una en un bloque. En HTML te las pinta una al lado de la otra para que las compares con el ojo.

Demo: variantes de componente lado a lado.

El cerebro elige formas mucho más rápido que palabras. Aprovéchalo.

Le pides a Claude que te proponga cómo se vería un dashboard. En markdown te lo describe: "header arriba, sidebar a la izquierda, métricas en cards". En HTML te lo dibuja con los colores reales, las tipografías reales, las cards reales.

Demo: exploración visual de diseños.

Ahorras la mitad del ciclo "describe → imagina → corrige". Lo ves directo.

Cuando estás afinando un prompt, normalmente cambias una palabra, esperas la respuesta, cambias otra. En HTML, Claude te puede armar una pequeña interfaz con el prompt editable arriba y la respuesta abajo, viva.

Demo: prompt tuner con preview en vivo.

Es el patrón "playground" sin abrir un playground.

La que sirve para arrancar. Una sola línea, sin pedirle nada raro al modelo.

Estructura la respuesta como HTML.

Funciona para el 80% de casos. Si nunca lo has intentado, empieza por esta.

Cuando el contenido tiene fases, mockups y código que se hablan entre sí.

Devuélveme un plan de implementación completo en un archivo HTML.
Incluye mockups inline, flujo de datos entre piezas, y los snippets
de código relevantes embebidos donde toca.

Esta es la que más uso yo en Claude Code cuando arranco una feature nueva.

Cuando estás aprendiendo algo nuevo y quieres una explicación rica, no un resumen.

Devuélveme la respuesta como un archivo HTML bien estilizado,
usando todo lo que CSS y JavaScript pueden hacer para que la
explicación quede clara, rica e interactiva.

Funciona muy bien para temas que tienen movimiento por dentro: cómo funciona un algoritmo, cómo viajan los paquetes en una red, cómo se entrena un modelo.

Cuando lo que pides depende de valores que vas a querer cambiar después.

Quiero esto como una página HTML interactiva. Mete sliders, inputs
o botones para que yo pueda ajustar los parámetros y ver el cambio
en vivo, sin tener que volver a pedirte nada.

Este es el que más cambia la conversación. Pasas de "ahora más rápido, ahora más lento" a moverlo tú mismo y dejar al modelo libre para lo siguiente.

Si estás en claude.ai (web, escritorio o app de teléfono), Claude detecta que la respuesta es HTML y la abre directo a la derecha como Artifact. Lo ves renderizado sin abrir nada.

Puedes interactuar con los sliders, mover las tarjetas, todo dentro de la propia conversación. Y si quieres guardarlo, le das al botón de descargar y te lo deja como archivo .html.

Es la forma más cómoda. Si recién estás empezando, prueba acá primero.

Cuando trabajas en terminal con Claude Code, el modelo no renderiza HTML dentro de la terminal. Lo que hace es crearte el archivo plan.html (o el nombre que le pidas) en la carpeta donde estás.

Para verlo, lo abres en tu navegador. Desde la misma terminal:

open plan.html       # macOS
xdg-open plan.html   # Linux
start plan.html      # Windows

O doble clic desde el Finder / Explorador. Es un paso extra de uno tras del otro. Vale la pena.