De repente, tu sentido común se desmoronará hoy. Honestamente, el 99% de las personas todavía usan Markdown con Claude Code. Lo que dijo un miembro del equipo de Claude Code de Anthropic fue: "Dejen eso". Dijo: "Es abrumadoramente mejor generar en HTML en lugar de Markdown".
Porque a medida que la salida de Claude Code se vuelve más avanzada, Markdown es difícil de leer, no logra transmitir y no se comparte.
Por otro lado, con HTML:
- Puedes ilustrar
- Puedes codificar por colores
- Puedes organizar con pestañas
- Incluso puedes crear controles deslizantes y botones
- Puedes compartir directamente en el navegador
En otras palabras, para sacar el verdadero valor de Claude Code, no solo "lo que generas" sino "en qué formato lo generas" se vuelve increíblemente importante.
Afirmo esto.
La solución óptima en la era de Claude Code no es solo Markdown, sino HTML primero.
De hecho, incluso antes de que saliera este artículo, ClaudeCodeStudio ha estado utilizando este método, asegurando que los materiales de diapositivas salgan con esta calidad de una sola vez 👇
Si lees este artículo hasta el final, creo que entenderás por qué es posible, ¡así que hazlo!
Por cierto, ¿alguna vez has tenido una experiencia como esta?
- Le pediste a Claude Code que escribiera un plan, pero perdiste el interés después de que superara las 100 líneas.
- Compartiste una especificación en Markdown con el equipo, pero nadie la leyó hasta el final.
- Miraste un diagrama de arte ASCII y pensaste: "...¿Qué es esto?"
- Querías organizar información con colores o diseños, pero no pudiste expresarlo en Markdown.
- Pegaste un plan en Slack, pero quedó enterrado como archivo adjunto.
Todo esto fue un "problema de formato de salida".
Un artículo titulado "Using Claude Code: The Unreasonable Effectiveness of HTML" escrito por Thariq (@trq212), miembro del equipo de desarrollo de Claude Code, se está volviendo viral en X con más de 11 millones de visitas 😳
Thariq es miembro del equipo de Claude Code en Anthropic y un ingeniero de YC W20. En otras palabras, es un artículo donde alguien que usa Claude Code en primera línea todos los días declaró: "Dejé de usar Markdown".
Esta vez, explicaré el contenido de una manera fácil de entender, incluyendo ejemplos específicos de prompts 👇
Publicación original aquí: https://x.com/trq212/status/2052809885763747935
■ ¿Cuál es el problema con Markdown?
Markdown se ha utilizado durante años como medio de comunicación entre agentes de IA y humanos. Es simple, se puede usar en cualquier lugar y puede escribir texto enriquecido hasta cierto punto. Claude Code, por supuesto, genera en Markdown por defecto.
Pero honestamente, ¿no te suena familiar?
A medida que Claude Code se vuelve capaz de manejar tareas más complejas, los planes y especificaciones que genera se vuelven más largos. ¿Realmente lees un archivo Markdown que supera las 100 líneas hasta el final?
Thariq escribe en el artículo:
"Me resulta difícil leer un archivo markdown de más de cien líneas."
Además, hoy en día, incluso editamos archivos nosotros mismos con menos frecuencia. Los usamos como referencias para especificaciones o como resultado de lluvias de ideas. Incluso al editar, le pedimos a Claude que "arregle esto". En otras palabras, la mayor ventaja de Markdown—que es "fácil de editar a mano para los humanos"—ya no tiene sentido.
Esto verbaliza brillantemente un problema que muchos usuarios de Claude Code han estado sintiendo inconscientemente.
■ Por qué la opción HTML es "irrazonablemente efectiva"
Lo que Thariq propone es cambiar el formato de salida de Claude Code de Markdown a HTML.
Podrías pensar: "¿No es HTML para hacer páginas web?" Pero el poder expresivo de HTML es incomparable al de Markdown.
Veamos qué se puede expresar específicamente con HTML:
- Datos estructurados usando tablas
- Diseño y coloración usando CSS
- Ilustraciones y diagramas usando SVG
- Fragmentos de código usando etiquetas script
- Interacción usando JavaScript y CSS
- Diagramas de flujo de trabajo combinando SVG y HTML
- Datos espaciales usando posicionamiento absoluto o canvas
- Inserción de imágenes usando etiquetas de imagen
Thariq afirma:
"Me atrevería a decir que casi no hay un conjunto de información que Claude pueda leer que no puedas representar de manera bastante eficiente con HTML."
Cualquiera que haya intentado que Claude dibuje un diagrama ASCII o exprese colores con caracteres Unicode entenderá el peso de estas palabras. Te liberarás de esa ineficiencia, como "conducir un Ferrari a una tienda de conveniencia".
■ La densidad de información es abrumadoramente diferente
La mayor fortaleza de HTML es la "densidad de información".
Cuando el mismo contenido se escribe en Markdown y HTML, HTML puede transmitir mucha más información de manera mucho más legible. Puedes cambiar con pestañas, codificar por colores o incrustar diagramas.
Incluso si no tienes ganas de leer 100 líneas de Markdown, la misma cantidad de información organizada con pestañas y colores en HTML se te grabará en la cabeza.
Esto no es solo una "cuestión de apariencia". Una especificación que no se lee es igual que una que no existe. Generar en un formato que se lee se vincula directamente con la calidad del trabajo en sí.
■ Facilidad para compartir
Cuando intentas compartir un archivo Markdown con alguien, generalmente sucede así:
- Adjuntar como archivo a Slack → Nadie lo abre
- Adjuntar a un correo electrónico → Nadie lo abre
- Ponerlo en GitHub → Los no ingenieros no pueden acceder
Con HTML, solo lo subes a S3 y envías un enlace. Cualquiera con un navegador puede leerlo. Incluso puedes hacerlo responsivo para que se pueda leer en dispositivos móviles.
Texto original de Thariq:
"La probabilidad de que alguien realmente lea tu especificación, informe o resumen de PR es mucho, mucho mayor si está en HTML."
Este es un punto sutil pero críticamente importante en la práctica.
■ La revolución de la interacción bidireccional
Aquí es donde HTML realmente brilla.
HTML no es solo algo para "leer". Se puede operar.
Por ejemplo, ajustar un diseño. Si le pides a Claude Code que "haga un archivo HTML con un control deslizante", generará un archivo donde puedes ajustar la velocidad de la animación, la suavidad y los colores en tiempo real. Una vez que encuentres los parámetros que te gustan, solo presionas un botón de "copiar" y los pegas de nuevo en Claude Code.
Esta interacción bidireccional permite ajustes con un nivel de precisión que los prompts de texto por sí solos nunca podrían alcanzar.
Te liberas del estrés de transmitir "un poco más a la derecha", "un poco más rápido" o "no este color" con palabras. Solo mueves el control deslizante.
■ Casos de uso específicos (con ejemplos de prompts)
En el artículo, Thariq introduce patrones de utilización de HTML con ejemplos específicos de prompts. Son tan prácticos que los presentaré tal cual.
𝟭. Diseño, Planificación y Exploración
Al trabajar en tareas complejas en Claude Code, en lugar de un plan en Markdown, usa múltiples archivos HTML para lanzar una "red de exploración".
Ejemplo de prompt:
"No puedo decidir qué dirección tomar con la pantalla de incorporación. Genera 6 enfoques completamente diferentes, variando el diseño, el tono y la densidad, y organízalos en una cuadrícula en un solo archivo HTML para poder compararlos. Escribe las ventajas y desventajas de cada uno en etiquetas."
"Crea un plan de implementación detallado en un archivo HTML. Incluye maquetas, flujos de datos y fragmentos de código importantes para revisar. Hazlo legible y fácil de digerir."
𝟮. Revisión de Código y Comprensión
Puedes crear revisiones de código que sean más fáciles de leer que la pantalla de diferencias de GitHub.
Ejemplo de prompt:
"Crea un artefacto HTML para revisar este PR. No estoy familiarizado con la lógica de streaming/backpressure, así que concéntrate en eso. Renderiza el diff real con anotaciones en los márgenes, codificadas por colores según su importancia."
Thariq escribe: "Ahora, adjunto una explicación de código en formato HTML a cada PR."
𝟯. Diseño y Prototipado
Así como la base de Claude Design es HTML, HTML es extremadamente bueno para la expresión de diseño. Incluso si la implementación final es React o Swift, un flujo de trabajo de esbozar en HTML primero y luego reescribir es efectivo.
Ejemplo de prompt:
"Quiero hacer un prototipo para un nuevo botón de pago. Debe animarse y volverse morado al hacer clic. Crea un archivo HTML donde pueda probar cada parámetro de animación con controles deslizantes y opciones. Incluye un botón para copiar los parámetros que funcionaron bien."
𝟰. Informes, Investigación y Aprendizaje
Claude Code es bueno para sintetizar información de múltiples fuentes de datos y resumirla en un informe legible. Puedes hacer que busque en Slack, el código base, el historial de git e internet para crear informes de liderazgo o informes de incidentes.
Ejemplo de prompt:
"No entiendo cómo funciona el limitador de velocidad. Lee el código relevante y crea una página de explicación en HTML. Incluye un diagrama de flujo de token bucket, 3-4 fragmentos de código importantes con anotaciones, y finalmente una sección de 'errores comunes'. Optimízalo para que pueda entenderlo en una sola lectura."
𝟱. Interfaces de Edición Personalizadas
Este fue el caso de uso más impactante para mí personalmente. Realizar operaciones que son difíciles de transmitir en un cuadro de texto con un editor HTML desechable.
Ejemplo de prompt:
"Quiero reorganizar la prioridad de 30 tickets de Linear. Crea un archivo HTML donde cada ticket sea una tarjeta arrastrable y colócalos en cuatro columnas: Ahora / Siguiente / Después / Eliminado. Organízalos inicialmente según tu suposición. Incluye un botón 'Copiar como Markdown' para exportar el orden final con una línea de razonamiento para cada grupo."
"Estoy ajustando este prompt del sistema. Crea un editor lado a lado. A la izquierda, un prompt editable (resaltando los espacios de variables), y a la derecha, tres entradas de muestra para que la plantilla se refleje en tiempo real. Incluye un contador de caracteres/tokens y un botón de copiar."
¿No es increíble esta idea? Generar la interfaz de usuario necesaria en el momento, solo para esa tarea. No tiene que reutilizarse. No tiene que ser perfecta. Pero es 100 veces más eficiente que hacerlo solo con texto.
■ Respuestas a preguntas comunes
En el artículo, Thariq también responde preguntas comunes sobre HTML.
"¿No es ineficiente en tokens?"
→ Es cierto que usa más tokens que Markdown. Pero considerando el poder expresivo y la "probabilidad de que realmente se lea", es eficiente en total. Con el contexto de 1 millón de tokens de Opus 4.7, el aumento está a un nivel que no importa.
"¿No toma tiempo generarlo?"
→ Toma de 2 a 4 veces más tiempo que Markdown. Pero el propio Thariq siente que el resultado vale esa pena.
"¿Qué pasa con el control de versiones?"
→ Honestamente, esto es una desventaja. Los diffs de HTML tienen más ruido que los de Markdown y son más difíciles de revisar. Actualmente, esta es una de las mayores debilidades de HTML.
"¿El diseño termina viéndose de mal gusto?"
→ Mejora si usas el plugin de diseño frontend de Claude Code. Además, si haces que Claude Code lea el código base de tu empresa para crear un "archivo HTML del sistema de diseño" y lo usas como referencia a partir de entonces, puedes unificarlo con el estilo de tu empresa.
■ ¿Por qué HTML "ahora"?
La razón por la que este artículo resuena es el momento.
Ahora que Claude Code puede manejar tareas complejas, las salidas son largas y densas. Continuar recibiendo eso en Markdown, un formato que es solo "texto con un poco de estilo", ahora es un cuello de botella.
La conclusión de Thariq es esta:
"Me siento mucho más involucrado que nunca cuando uso HTML."
En lugar de dejarle todo a Claude Code, al hacer que la salida sea HTML, se activa un ciclo de "comprensión, juicio y retroalimentación humana". Esta es la esencia de la colaboración con la IA.
■ Resumen de puntos prácticos
- No se requieren habilidades o configuraciones difíciles. Solo dile a Claude Code que "haga un archivo HTML".
- No intentes hacer un archivo de habilidad desde el principio. Primero, prueba con prompts en bruto.
- Comienza con "cosas que quieres que la gente lea", como planes, revisiones, informes y prototipos.
- El efecto se duplica cuando eres consciente de la "interactividad", como controles deslizantes y botones de copiar.
- Abre el HTML generado en un navegador o súbelo a S3 para compartirlo.
Markdown no es malo. Pero ahora que la salida de Claude Code se ha vuelto tan avanzada, ha llegado el momento de actualizar también el formato del receptor.
La próxima vez que le pidas a Claude Code que cree un plan, prueba agregar una línea: "Hazlo en HTML". Te sorprenderá la diferencia.
Para aquellos que encontraron este artículo aunque sea un poco útil:
𝗖𝗹𝗮𝘂𝗱𝗲 𝗖𝗼𝗱𝗲 𝗦𝘁𝘂𝗱𝗶𝗼 @ 𝗝𝗮𝗽𝗮𝗻 (@ClaudeCode_love) es
una cuenta administrada por tres entusiastas de Claude Code.
Publicamos diariamente sobre utilización práctica de CLI y automatización.
Actualmente estamos co-desarrollando un agente de IA con una empresa que cotiza en bolsa.
Nuestras publicaciones habituales 👇
- Casos reales de desarrollo de productos usando Claude Code y Claude
- Organizando la utilización de Claude Code / Vibe Coding / tendencias de desarrollo
- Información más reciente sobre Claude Code desde el extranjero
Desde la filosofía de desarrollo hasta el diseño, implementación y mejora,
resumimos información del extranjero y de fuentes primarias hasta el punto de poner un producto funcional en el mundo, no solo "terminar la compilación".
Si estás interesado, por favor síguenos y échanos un vistazo 👀 ¡Creo que será beneficioso!
