# shihipar-claude-code-html-unreasonable-effectiveness-markdown-2026-05-10

## Veille

Artículo de estilo manifiesto de **Thariq Shihipar** (Ingeniero y emprendedor serial, equipo de Claude Code en Anthropic) que anuncia un **cambio en el formato de salida por defecto para agentes**: sustituir **Markdown por HTML**. Tesis: Markdown ha sido el formato dominante entre humanos y agentes (simple, portátil, editable, legible), pero se ha convertido en **un cuello de botella** a medida que los agentes producen artefactos más largos y ricos (specs, planes, informes, revisión de código). Más allá de ~100 líneas, nadie vuelve a leer ya un archivo Markdown. HTML resuelve seis limitaciones a la vez: **densidad de información** (tablas, CSS, SVG, scripts, canvas, imágenes), **claridad visual** (diseño navegable, responsive para móvil), **facilidad para compartir** (un enlace S3 abrible directamente en un navegador), **interactividad bidireccional** (sliders, mandos, botones "copy as JSON/prompt" para reinyectar en Claude Code), **ingesta contextual nativa** (Claude Code lee el codebase + MCP Slack/Linear + historial git + Chrome) y **disfrute** (el autor afirma explícitamente que *"es placentero"*). Se detallan cinco usos canónicos: (1) **specs/planes/exploración** en una cuadrícula comparativa, (2) **revisión de PR** con diff anotado en línea, (3) **diseño y prototipos** con sliders de animación, (4) **informes/investigación/aprendizaje** (el autor generó un explicador sobre prompt-caching a partir del historial git), (5) **editores desechables a medida** (drag-and-drop de tickets de Linear, editores de feature flags, prompt-tuner lado a lado) que producen una exportación reinyectable "copy as markdown/diff/JSON". Antipatrón explícito: *"me da un poco de miedo que la gente lea este artículo y lo convierta en una skill /html"* — el autor **rechaza la skill-ificación prematura**, y recomienda partir de un prompt desde cero ("haz un archivo HTML"). FAQ pragmática: coste en tokens absorbido por el contexto de 1MM de **Opus 4.7**, generación 2-4× más lenta, diffs HTML ruidosos (un inconveniente real), estilo mantenido bajo control mediante un design system HTML de referencia.

## Titre Article

Using Claude Code: The Unreasonable Effectiveness of HTML

## Date

2026-05-10

## URL

https://x.com/i/status/2052809885763747935

## Keywords

HTML, Markdown, formato de salida, Claude Code, artefactos agénticos, Thariq Shihipar, Anthropic, Opus 4.7, contexto de 1MM, densidad de información, SVG, CSS, canvas, diseño responsive, interactividad bidireccional, copiar como JSON, copiar como prompt, ingesta contextual, MCP, Slack, Linear, historial git, Chrome, specs, planes, exploración, revisión de código, revisión de PR, diff anotado, design system, prototipos, animaciones, sliders, informes, investigación, explicador, editores desechables, editor desechable, feature flags, ajuste de prompts, placentero, anti-skill-ificación, prompt desde cero, S3, compartición, eficiencia de tokens, diff ruidoso, deriva de diseño, plugin de diseño frontend, gusto, memoria de diseño, html-effectiveness, galería, playgrounds, interacción bidireccional, juicio, deuda de comprensión, in-the-loop, archivo design system, ilustraciones vs ASCII, antipatrón de color vía unicode, responsive para móvil, pestañas, ilustraciones, UI desechable a medida

## Authors

Thariq Shihipar (Engineer & serial entrepreneur, équipe Claude Code chez Anthropic — site : thariqs.github.io/html-effectiveness ; X : @trq212)

## Ton

**Perfil**: Artículo manifiesto personal (~1500 palabras) publicado en X / un blog personal, en primera persona sin reparos, registro de practicante-evangelista. Público objetivo: usuarios avanzados de Claude Code, diseñadores, PMs, ingenieros que producen specs/planes/informes con un agente. Nivel técnico: intermedio — sin código, mucha práctica vivida (ejemplos concretos: su artículo sobre prompt caching, sus PRs del día a día, sus brainstormings de onboarding).

**Estilo**: **Pedagógico-demostrativo**. Se abre con una concesión ("Markdown se ha convertido en el formato de archivo dominante usado por los agentes… *Pero* a medida que los agentes se han vuelto cada vez más potentes, he sentido que markdown se ha convertido en un formato restrictivo"). Luego sigue una estructura retórica clásica: *por qué → cómo → casos de uso → FAQ → cierre*. Cada sección se apoya en un **ejemplo vivido** ("al escribir este artículo, le pedí a Claude Code que revisara mi carpeta de código…") en lugar de una demostración abstracta. Se anticipa a las objeciones ("¿No es menos eficiente en tokens?", "¿Cómo veo el archivo HTML?", "¿Y el control de versiones?") en forma de una FAQ honesta (reconociendo el diff HTML ruidoso como *"uno de los mayores inconvenientes"*).

Posición epistémica: **insider de Claude Code en Anthropic** que formaliza una práctica ya adoptada por su equipo (*"veo cada vez más que otros en el equipo de Claude Code lo usan"*). Tono emocional: entusiasta pero no proselitista. Frases señuelo plantadas para la viralidad: *"the unreasonable effectiveness of HTML"* (un guiño a Wigner-Karpathy), *"es placentero"*, *"la probabilidad de que alguien realmente lea tu spec es mucho, mucho mayor si está en HTML"*, *"me da un poco de miedo que la gente lea este artículo y lo convierta en una skill /html"*. Movimiento meta destacable: **anti-skill-ificación explícita** — el autor, pese a pertenecer al ecosistema que impulsa las Claude Skills, se niega a canonizar su práctica en una skill. *"No hace falta hacer gran cosa para que Claude lo haga. Basta con pedirle que 'haga un archivo HTML' o 'haga un artefacto HTML'."*

Tono general: **doctrinal pero humilde**. Conclusión emocional ("Me siento mucho más dentro del bucle que nunca al usar HTML. Espero que a ti también te pase.") — devuelve la cuestión técnica al problema vivido de la **pérdida de control cognitivo** frente a agentes que producen planes demasiado largos para leer (resuena fuertemente con la *cognitive surrender* / *comprehension debt* de Osmani).

## Pense-betes

- **Autor**: Thariq Shihipar — Ingeniero y emprendedor serial, **equipo de Claude Code en Anthropic**. X: @trq212. Sitio: thariqs.github.io/html-effectiveness (galería de ejemplos HTML generados por Claude Code, organizada por categoría de uso).
- **Fecha**: ~2026-05-10 (artículo reciente, menciona Opus 4.7 con contexto de 1MM, ID snowflake de X ~ mayo 2026). URL: `https://x.com/i/status/2052809885763747935`.
- **Tesis en una línea**: *"He empezado a preferir HTML como formato de salida en lugar de Markdown"* — el formato de salida por defecto para los artefactos agénticos debería pasar de Markdown a HTML.
- **¿Por qué ahora?**: tres factores convergentes: 1. Los agentes producen specs/planes más largos y ricos que antes. 2. El autor (y quienes lo rodean) **ya no edita manualmente** estos archivos — le pide a Claude que los edite → la ventaja del "Markdown editable a mano" desaparece. 3. **Opus 4.7 + contexto de 1MM** absorbe sin dolor los tokens adicionales de HTML.
- **Las 6 razones (por qué HTML)**: 1. **Densidad de información** — tablas, CSS, SVG, scripts, canvas, imágenes, posicionamiento absoluto, datos espaciales. *"Casi no hay ningún conjunto de información que Claude pueda leer que no puedas representar de forma bastante eficiente con HTML."* 2. **Claridad visual y facilidad de lectura** — pestañas, ilustraciones, enlaces, responsive para móvil. Más allá de 100 líneas de Markdown, nadie vuelve a leerlo. 3. **Facilidad para compartir** — subida a S3 → enlace directo. *"La probabilidad de que alguien realmente lea tu spec es mucho, mucho mayor si está en HTML."* 4. **Interacción bidireccional** — sliders, mandos, botones "copy as prompt" para reinyectar en Claude Code. 5. **Ingesta de datos** — Claude Code agrega codebase + MCP (Slack, Linear) + historial git + Chrome → un contexto más amplio que ClaudeAI o Claude Design. 6. **Es placentero** — *"me hace sentir más implicado e invertido en la creación, y eso por sí solo ya es suficiente"*.
- **Antipatrón observado en Markdown**: el modelo, privado de expresividad visual, produce **diagramas ASCII** o **aproxima colores con caracteres Unicode** (el artículo incluye una captura de pantalla de Claude Code intentando "mostrar un color" en Unicode → una señal absurda de la inadecuación del formato).
- **Referencia retórica**: *"The Unreasonable Effectiveness of HTML"* es un guiño a *"The Unreasonable Effectiveness of Mathematics"* (Wigner, 1960) y al linaje de títulos "unreasonable effectiveness of X" en ML (Karpathy 2015 sobre RNN).
- **5 casos de uso canónicos detallados**: 1. **Specs, planificación y exploración** — *"una red de archivos HTML"*: brainstorming de 6 direcciones en una cuadrícula comparativa, expansión de una opción, mockups, fragmentos de código, plan de implementación. Prompt de ejemplo: *"Genera 6 enfoques claramente distintos — varía el layout, el tono y la densidad — y colócalos en un único archivo HTML en cuadrícula para poder compararlos lado a lado."* 2. **Revisión y comprensión de código** — adjuntar un explicador HTML a cada PR. Diff renderizado en línea con anotaciones marginales, coloración de código por severidad. Prompt de ejemplo: *"Renderiza el diff real con anotaciones en el margen en línea, colorea los hallazgos según su severidad."* 3. **Diseño y prototipos** — el propio Claude Design está basado en HTML. Prototipado de animaciones con sliders y un botón "copy parameters" para exportar los valores ajustados. 4. **Informes, investigación y aprendizaje** — el autor hizo generar su artículo sobre prompt-caching leyendo el historial git. HTML de formato largo, explicador interactivo, presentación de diapositivas. 5. **Interfaces de edición a medida (editores desechables)** — un editor desechable de archivo único para un dato concreto, que siempre termina con una **exportación** (copy as JSON/markdown/prompt) reinyectable en Claude Code. Ejemplos: drag-and-drop de 30 tickets de Linear en columnas Now/Next/Later/Cut, un editor de feature flags con dependencias y advertencias, un prompt-tuner lado a lado con contador de tokens. *"No es un producto, ni una herramienta reutilizable, sino un único archivo HTML, diseñado específicamente para este dato concreto."*
- **Antipatrón principal hecho explícito**: *"Me da un poco de miedo que la gente lea este artículo y lo convierta en una skill /html o algo así. Aunque podría haber cierto valor en ello, quiero recalcar que no hace falta hacer gran cosa para que Claude lo haga."* → **Anti-skill-ificación**: la práctica es demasiado dependiente del contexto como para fijarla en una skill; basta con pedir "haz un archivo HTML".
- **FAQ honesta** (concesiones explícitas):
- **Eficiencia de tokens**: HTML usa más tokens, pero el contexto de 1MM de Opus 4.7 lo absorbe.
- **Generación**: 2-4× más lenta que Markdown — *"pero he comprobado que los resultados merecen la pena"*.
- **Control de versiones**: *"esto es honestamente uno de los mayores inconvenientes de HTML, los diffs HTML son ruidosos y difíciles de revisar en comparación con Markdown"* — un inconveniente sin resolver que el autor reconoce abiertamente.
- **Estilo / evitar la fealdad**: usar el **plugin de diseño frontend** o crear un único **design system HTML** apuntando a Claude hacia el codebase, y luego referenciarlo para el resto de archivos HTML generados.
- **Metatesis final (in-the-loop)**: *"Había empezado a temer que, al haber dejado de leer los planes en profundidad, simplemente tendría que dejar que Claude tomara sus propias decisiones. Pero me alegra decir, en cambio, que me siento más dentro del bucle que nunca al usar HTML."* → HTML como **antídoto a la rendición cognitiva** (Osmani) / **deuda de comprensión**: la legibilidad recuperada permite permanecer en el bucle de decisión.
- **Conexiones con el corpus de veille tecnológica**:
- Convergencia directa con **`design.md` de Isenberg × Meng To** (2026-05-06): Meng afirma explícitamente que *"HTML = plato terminado, archivo MD = receta, skills = ingredientes"*. Shihipar valida la primacía de HTML para el **plato terminado entregado al humano**.
- Respuesta operativa a **Osmani — Cognitive Surrender / Comprehension Debt** (2026-05-05): Shihipar nombra exactamente el mismo problema (*"había dejado de leer los planes en profundidad"*) y propone HTML como solución para "permanecer en el bucle".
- Tensión con **Lattice / Vincent / Karpathy "skills-maxi"**: Shihipar adopta la **postura opuesta** sobre la skill-ificación ("no conviertas esto en una skill /html"). Compromiso: skills para patrones estables, prompting desnudo para prácticas emergentes.
- Confirmación de **Opus 4.7 + contexto de 1MM** como un **cambio arquitectónico** que hace económicamente sostenibles formatos más verbosos (HTML, design systems, brainstormings extensos).
- Forma parte del linaje **Compounding engineering / Cherny**: HTML como una nueva capa de **salida artefactual** entre agente y humano, al mismo nivel que las descripciones de PR, las release notes y los mensajes de commit.
- **Meta-ejemplo**: para escribir este artículo, el autor pidió a Claude Code que revisara su carpeta de código, encontrara todos los archivos HTML generados, los agrupara/categorizara, y produjera un archivo HTML con todos los diagramas por tipo → las ilustraciones del propio artículo son un producto del patrón que describe.
- **Flujo de trabajo resultante para la práctica habitual**:
- Cualquier spec, plan o informe > 100 líneas → pasar a HTML.
- PRs críticos → adjuntar un explicador HTML.
- Onboarding de archivos, exploraciones de diseño, reordenaciones → editor HTML desechable con exportación estructurada.
- Mantener Markdown para: mensajes de commit, notas de fiche breves, archivos de configuración .md (CLAUDE.md, agents.md, etc.).

## RésuméDe400mots

**Thariq Shihipar** (equipo de Claude Code en Anthropic) publica un artículo de estilo manifiesto que anuncia un cambio en el formato de salida por defecto para los agentes: sustituir **Markdown por HTML**. El diagnóstico: Markdown reinó como formato dominante entre humano y agente (simple, portátil, editable), pero se ha vuelto **restrictivo** a medida que los agentes producen artefactos más largos y ricos. Más allá de ~100 líneas, nadie vuelve a leer un archivo Markdown — y como el autor ya no edita manualmente sus specs (le pide a Claude que las edite), la ventaja histórica de Markdown desaparece.

**Seis razones** justifican el paso a HTML: (1) **densidad de información** — tablas, CSS, SVG, scripts, canvas, imágenes; *"casi no hay conjunto de información que Claude pueda leer que no puedas representar con HTML"*; (2) **claridad visual** — pestañas, ilustraciones, responsive para móvil; (3) **compartición** — subida a S3 → enlace directo, tasa de lectura multiplicada; (4) **interactividad bidireccional** — sliders, mandos, botones "copy as prompt" para reinyectar; (5) **ingesta contextual** nativa de Claude Code (codebase + MCP + git + Chrome); (6) **disfrute** — *"es placentero"*.

El autor formaliza **cinco usos canónicos**: (a) **specs/planes/exploración** en una cuadrícula comparativa; (b) **revisión de PR** con diff anotado en línea y coloración de código por severidad; (c) **diseño y prototipos** con sliders de animación; (d) **informes/investigación** (su explicador sobre prompt-caching generado a partir del historial git); (e) **editores desechables a medida** — HTML de archivo único diseñado específicamente para un dato concreto (drag-and-drop de tickets de Linear, editor de feature flags, prompt-tuner lado a lado) que siempre termina con una exportación reinyectable "copy as JSON/markdown/prompt".

Antipatrón explícito: **el autor rechaza la skill-ificación** de su práctica. *"Me da un poco de miedo que la gente lea este artículo y lo convierta en una skill /html. No hace falta hacer gran cosa — basta con pedirle que 'haga un archivo HTML'."* La práctica es demasiado dependiente del contexto como para fijarla de forma permanente.

FAQ honesta: HTML cuesta más tokens, pero el **contexto de 1MM de Opus 4.7** lo absorbe; la generación es 2-4× más lenta; los **diffs HTML ruidosos** son un inconveniente sin resolver, reconocido como tal.

Metatesis final: HTML como **antídoto a la rendición cognitiva**. *"Había empezado a temer que, al haber dejado de leer los planes en profundidad, simplemente tendría que dejar que Claude tomara sus propias decisiones. Pero me siento más dentro del bucle que nunca al usar HTML."* La legibilidad recuperada permite seguir siendo capaz de decidir frente a agentes cada vez más potentes.

El artículo conecta directamente con **`design.md` de Meng To** (HTML = "plato terminado") y con la **deuda de comprensión de Osmani**, a la que ofrece una respuesta operativa.

## GrapheDeConnaissance

- Thariq Shihipar —travaille_chez→ Anthropic (ORGANISATION, 0.97)
- Thariq Shihipar —fait_partie_de→ équipe Claude Code (ORGANISATION, 0.97)
- Thariq Shihipar —recommande→ HTML (format de sortie agent) (METHODOLOGIE, 0.98)
- HTML (format de sortie agent) —remplace→ Markdown pour artefacts agentiques longs (METHODOLOGIE, 0.95)
- Thariq Shihipar —affirme_que→ Markdown devient restrictif au-delà de ~100 lignes (AFFIRMATION, 0.92)
- HTML (format de sortie agent) —permet→ densité d'information (tables, CSS, SVG, scripts, canvas) (CONCEPT, 0.97)
- HTML (format de sortie agent) —permet→ interactivité bidirectionnelle (sliders, copy as prompt) (CONCEPT, 0.96)
- HTML (format de sortie agent) —améliore→ taux de lecture des specs et rapports (CONCEPT, 0.93)
- HTML (format de sortie agent) —résout→ Cognitive surrender (réponse) (CONCEPT, 0.9)
- Claude Code —utilise→ codebase + MCP + git history + Chrome (CONCEPT, 0.95)
- Opus 4.7 —utilise→ 1MM context window (CONCEPT, 0.97)
- 1MM context Opus 4.7 —permet→ HTML (format de sortie agent) (CONCEPT, 0.93)
- Throwaway HTML editor —utilise→ export copy as JSON / markdown / prompt (CONCEPT, 0.96)
- Thariq Shihipar —s_oppose_à→ Anti-skill-ification (CONCEPT, 0.95)
- Thariq Shihipar —affirme_que→ les diffs HTML sont bruyants et difficiles à reviewer (downside assumé) (AFFIRMATION, 0.92)
- HTML (format de sortie agent) —mesure→ 2-4× plus lente que Markdown (MESURE, 0.88)
- Frontend design plugin —permet→ HTML (format de sortie agent) (CONCEPT, 0.85)
- Design system HTML de référence —permet→ cohérence stylistique cross-fichiers (CONCEPT, 0.88)
- Unreasonable effectiveness —converge_avec→ design.md de Meng To (HTML = finished dish) (CONCEPT, 0.93)
- Unreasonable effectiveness —résout→ comprehension debt d'Osmani (réponse opérationnelle) (CONCEPT, 0.9)
- Claude Code —permet→ HTML (format de sortie agent) (METHODOLOGIE, 0.96)
- Anthropic —emploie→ Thariq Shihipar (PERSONNE, 0.97)

---
Canonical: https://www.thekb.eu/es/fiches/shihipar-claude-code-html-unreasonable-effectiveness-markdown-2026-05-10/