[{"data":1,"prerenderedAt":616},["ShallowReactive",2],{"biblioteca-\u002Fbiblioteca\u002Fpidele-html-a-claude-no-texto-plano":3},{"id":4,"title":5,"author":6,"body":7,"cover":599,"description":600,"extension":601,"meta":602,"navigation":603,"nivel":604,"path":605,"publishedAt":606,"seo":607,"stem":608,"tags":609,"__hash__":615},"biblioteca\u002Fbiblioteca\u002Fpidele-html-a-claude-no-texto-plano.md","Pídele a Claude que te devuelva la respuesta en HTML, no en texto plano","Miguel Santa",{"type":8,"value":9,"toc":585},"minimark",[10,18,36,41,44,47,50,53,56,59,63,66,72,75,78,88,90,94,97,102,118,121,138,147,151,160,166,169,171,175,178,198,215,232,249,266,283,285,289,292,337,344,346,350,353,372,387,402,417,419,423,426,441,503,513,515,519,552,554,558,561,564,567,569,572,581],[11,12],"youtube-cta",{"channel":13,"subtitle":14,"title":15,"url":16,"video-id":17},"@Santa_lA","Te muestro la frase exacta y los cuatro casos donde más se nota. Suscríbete y la próxima sale ahí primero.","Esta guía va con video en el canal","https:\u002F\u002Fwww.youtube.com\u002F@Santa_lA","pendiente",[19,20,23,27,33],"callout",{"title":21,"type":22},"¿Apurado? Que Claude te haga un resumen rápido.","claude",[24,25,26],"p",{},"Copia el link de esta página y pégalo en Claude (claude.ai, el escritorio o la app). Le pides:",[24,28,29],{},[30,31,32],"strong",{},"\"Resúmeme esta guía y dime cuándo me conviene pedirle a Claude la respuesta en HTML en vez de texto plano.\"",[24,34,35],{},"En 30 segundos tienes lo importante. Si te interesa profundo, te devuelves a la sección que te llame.",[37,38,40],"h2",{"id":39},"el-problema-pediste-un-plan-y-te-llegó-un-muro","El problema · pediste un plan y te llegó un muro",[24,42,43],{},"Le pediste a Claude un plan de implementación para tu proyecto. Te devolvió 200 líneas de markdown. Bullets dentro de bullets. Tres niveles de jerarquía. Bloques de código pegados unos con otros.",[24,45,46],{},"Lo abres. Lees el primer encabezado. Bajas. Lees el segundo. Te pierdes. Haces scroll hasta el final. Cierras la pestaña. Mañana le vuelves a pedir lo mismo.",[24,48,49],{},"Esto pasa siempre con respuestas largas: comparativas tabuladas en markdown, mockups de UI descritos en texto, planes a varias fases, exploraciones de diseño con cinco variantes. Todo bien escrito. Nadie las lee.",[51,52],"diagram-html-vs-texto",{},[24,54,55],{},"La parte que no es obvia: el problema no es lo que Claude escribió. El problema es el formato. Markdown plano es buen formato para procesar, mal formato para leer. Lo lee bien una máquina. Lo lees mal tú.",[57,58],"hr",{},[37,60,62],{"id":61},"la-técnica-en-una-frase","La técnica en una frase",[24,64,65],{},"Al final de tu prompt, le agregas esto:",[67,68,69],"blockquote",{},[24,70,71],{},"\"Estructura la respuesta como un archivo HTML. Úsalo con CSS y un poco de JavaScript si ayuda.\"",[24,73,74],{},"Ya está. Esa es la técnica.",[24,76,77],{},"Claude pasa de devolverte texto plano a devolverte una página renderizada con secciones visuales, tarjetas, barras de progreso, sliders, tablas de verdad, mockups inline. Tu cerebro reconoce las formas antes de leer el texto. Y por eso sí lo lees.",[19,79,82,85],{"title":80,"type":81},"Por qué funciona","tip",[24,83,84],{},"Cuando un párrafo se ve igual que el siguiente, tu ojo no tiene a qué agarrarse. Cuando ves un encabezado grande, una barra naranja, una tarjeta con borde, sabes a dónde mirar.",[24,86,87],{},"El contenido es el mismo. El formato cambia si lo terminas leyendo o no.",[57,89],{},[37,91,93],{"id":92},"el-respaldo-esto-no-me-lo-inventé","El respaldo · esto no me lo inventé",[24,95,96],{},"No es un truco mío. Lo está empujando el propio equipo de Claude Code y lo respaldaron varios autores referentes en IA aplicada.",[98,99,101],"h3",{"id":100},"anthropic-post-oficial-del-20-de-mayo-de-2026","Anthropic · post oficial del 20 de mayo de 2026",[24,103,104,113,114,117],{},[105,106,110],"a",{"href":107,"rel":108},"https:\u002F\u002Fclaude.com\u002Fblog\u002Fusing-claude-code-the-unreasonable-effectiveness-of-html",[109],"nofollow",[30,111,112],{},"Using Claude Code · The Unreasonable Effectiveness of HTML",", firmado por ",[30,115,116],{},"Thariq Shihipar",", Member of Technical Staff en el equipo de Claude Code.",[24,119,120],{},"Tres frases del post que vale la pena dejar literales (traducidas al español):",[19,122,125],{"title":123,"type":124},"Thariq Shihipar · Anthropic · 2026-05-20","info",[126,127,128,132,135],"ul",{},[129,130,131],"li",{},"\"No suelo leer más de cien líneas de un archivo Markdown.\"",[129,133,134],{},"\"La probabilidad de que alguien lea tu especificación, reporte o resumen de PR es mucho más alta si está en HTML.\"",[129,136,137],{},"\"Aunque Markdown suele usar menos tokens, la expresividad extra de HTML y la mayor probabilidad de que yo termine leyéndolo me dan, en suma, mejores resultados.\"",[24,139,140,141,146],{},"El autor publicó además una ",[105,142,145],{"href":143,"rel":144},"https:\u002F\u002Fthariqs.github.io\u002Fhtml-effectiveness\u002F",[109],"galería pública con 20 demos navegables"," para mostrar de qué está hablando. Más abajo te los enlazo uno por uno.",[98,148,150],{"id":149},"karpathy-una-semana-antes","Karpathy · una semana antes",[24,152,153,154,159],{},"Andrej Karpathy ya había mandado el mismo consejo el 11 de mayo. Era una sola frase en un tweet (",[105,155,158],{"href":156,"rel":157},"https:\u002F\u002Fx.com\u002Fkarpathy\u002Fstatus\u002F2053872850101285137",[109],"link al tweet",", según el snippet recuperado):",[19,161,163],{"title":162,"type":124},"Andrej Karpathy · 2026-05-11 · según reportes de terceros",[24,164,165],{},"\"Esto funciona muy bien, por cierto: al final de tu pregunta pídele al LLM que 'estructure la respuesta como HTML' y abre el archivo generado en tu navegador.\"",[24,167,168],{},"Que dos referentes distintos lleguen a la misma conclusión con una semana de diferencia es una señal. No es marketing de Anthropic. Es un patrón que ya estaba pasando entre la gente que usa Claude todos los días.",[57,170],{},[37,172,174],{"id":173},"cuándo-pedirlo-en-html-con-ejemplos-reales","Cuándo pedirlo en HTML · con ejemplos reales",[24,176,177],{},"Voy a ir caso por caso. Cada uno con un link directo a la galería de Thariq para que veas el resultado renderizado en tu navegador.",[179,180,183,186,195],"step-card",{"number":181,"title":182},"1","Planes de implementación",[24,184,185],{},"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.",[24,187,188,189,194],{},"Demo: ",[105,190,193],{"href":191,"rel":192},"https:\u002F\u002Fthariqs.github.io\u002Fhtml-effectiveness\u002F16-implementation-plan.html",[109],"timeline de un plan de implementación",".",[24,196,197],{},"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.",[179,199,202,205,212],{"number":200,"title":201},"2","Sandboxes interactivos para tunear parámetros",[24,203,204],{},"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.",[24,206,188,207,194],{},[105,208,211],{"href":209,"rel":210},"https:\u002F\u002Fthariqs.github.io\u002Fhtml-effectiveness\u002F07-prototype-animation.html",[109],"prototipo de animación con sliders",[24,213,214],{},"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á.",[179,216,219,222,229],{"number":217,"title":218},"3","Tableros tipo kanban para priorizar",[24,220,221],{},"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.",[24,223,188,224,194],{},[105,225,228],{"href":226,"rel":227},"https:\u002F\u002Fthariqs.github.io\u002Fhtml-effectiveness\u002F18-editor-triage-board.html",[109],"tablero kanban Now \u002F Next \u002F Later \u002F Cut",[24,230,231],{},"Mueves la tarjeta de columna y la decisión queda grabada en el DOM. Sin abrir Notion ni Linear.",[179,233,236,239,246],{"number":234,"title":235},"4","Comparativas de variantes lado a lado",[24,237,238],{},"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.",[24,240,188,241,194],{},[105,242,245],{"href":243,"rel":244},"https:\u002F\u002Fthariqs.github.io\u002Fhtml-effectiveness\u002F06-component-variants.html",[109],"variantes de componente lado a lado",[24,247,248],{},"El cerebro elige formas mucho más rápido que palabras. Aprovéchalo.",[179,250,253,256,263],{"number":251,"title":252},"5","Mockups inline para validar diseños",[24,254,255],{},"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.",[24,257,188,258,194],{},[105,259,262],{"href":260,"rel":261},"https:\u002F\u002Fthariqs.github.io\u002Fhtml-effectiveness\u002F02-exploration-visual-designs.html",[109],"exploración visual de diseños",[24,264,265],{},"Ahorras la mitad del ciclo \"describe → imagina → corrige\". Lo ves directo.",[179,267,270,273,280],{"number":268,"title":269},"6","Prompt tuners para iterar prompts",[24,271,272],{},"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.",[24,274,188,275,194],{},[105,276,279],{"href":277,"rel":278},"https:\u002F\u002Fthariqs.github.io\u002Fhtml-effectiveness\u002F20-editor-prompt-tuner.html",[109],"prompt tuner con preview en vivo",[24,281,282],{},"Es el patrón \"playground\" sin abrir un playground.",[57,284],{},[37,286,288],{"id":287},"cuándo-no-aplica","Cuándo NO aplica",[24,290,291],{},"No todo tiene que ir en HTML. Pedirlo cuando no toca te hace perder tokens y tiempo.",[293,294,299,317],"compare-grid",{"bad-label":295,"bad-title":296,"good-label":297,"good-title":298},"Pídelo en texto plano","Respuestas cortas o de copiar \u002F pegar","Pídelo en HTML","Respuestas largas o exploratorias",[300,301,303],"template",{"v-slot:bad":302},"",[126,304,305,308,311,314],{},[129,306,307],{},"Una sola respuesta de un párrafo",[129,309,310],{},"Código que vas a copiar literal y pegar en tu editor",[129,312,313],{},"Conversación tipo brainstorm donde cambias de rumbo cada turno",[129,315,316],{},"Pregunta puntual con una respuesta puntual",[300,318,319,322,325,328,331,334],{"v-slot:good":302},[129,320,321],{},"Planes de varias fases con tickets dentro",[129,323,324],{},"Comparativas con varias dimensiones",[129,326,327],{},"Mockups o exploraciones de diseño",[129,329,330],{},"Tableros para reordenar prioridades",[129,332,333],{},"Sandboxes para tunear parámetros",[129,335,336],{},"Cualquier respuesta donde quieres ver, no solo leer",[19,338,341],{"title":339,"type":340},"Regla mental","warning",[24,342,343],{},"Si la respuesta cabe en una pantalla y solo es texto, déjala en markdown. Si la respuesta cruza varias pantallas o tiene varios bloques distintos, pídela en HTML.",[57,345],{},[37,347,349],{"id":348},"prompts-copy-paste","Prompts copy-paste",[24,351,352],{},"Estos son los cuatro que uso. Cópialos tal cual al final de tu pregunta normal.",[179,354,356,359,369],{"number":181,"title":355},"Versión Karpathy · la más simple",[24,357,358],{},"La que sirve para arrancar. Una sola línea, sin pedirle nada raro al modelo.",[360,361,366],"pre",{"className":362,"code":364,"language":365},[363],"language-text","Estructura la respuesta como HTML.\n","text",[367,368,364],"code",{"__ignoreMap":302},[24,370,371],{},"Funciona para el 80% de casos. Si nunca lo has intentado, empieza por esta.",[179,373,375,378,384],{"number":200,"title":374},"Versión plan · cuando vas a pedir un plan",[24,376,377],{},"Cuando el contenido tiene fases, mockups y código que se hablan entre sí.",[360,379,382],{"className":380,"code":381,"language":365},[363],"Devuélveme un plan de implementación completo en un archivo HTML.\nIncluye mockups inline, flujo de datos entre piezas, y los snippets\nde código relevantes embebidos donde toca.\n",[367,383,381],{"__ignoreMap":302},[24,385,386],{},"Esta es la que más uso yo en Claude Code cuando arranco una feature nueva.",[179,388,390,393,399],{"number":217,"title":389},"Versión explicación · cuando quieres entender un tema",[24,391,392],{},"Cuando estás aprendiendo algo nuevo y quieres una explicación rica, no un resumen.",[360,394,397],{"className":395,"code":396,"language":365},[363],"Devuélveme la respuesta como un archivo HTML bien estilizado,\nusando todo lo que CSS y JavaScript pueden hacer para que la\nexplicación quede clara, rica e interactiva.\n",[367,398,396],{"__ignoreMap":302},[24,400,401],{},"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.",[179,403,405,408,414],{"number":234,"title":404},"Versión sandbox · cuando quieres tocar parámetros",[24,406,407],{},"Cuando lo que pides depende de valores que vas a querer cambiar después.",[360,409,412],{"className":410,"code":411,"language":365},[363],"Quiero esto como una página HTML interactiva. Mete sliders, inputs\no botones para que yo pueda ajustar los parámetros y ver el cambio\nen vivo, sin tener que volver a pedirte nada.\n",[367,413,411],{"__ignoreMap":302},[24,415,416],{},"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.",[57,418],{},[37,420,422],{"id":421},"cómo-ver-el-html-según-dónde-estás","Cómo ver el HTML según dónde estás",[24,424,425],{},"El prompt es el mismo. Lo que cambia es cómo se renderiza el resultado dependiendo de qué interfaz de Claude estés usando.",[179,427,429,432,438],{"number":181,"title":428},"claude.ai · se renderiza solo como Artifact",[24,430,431],{},"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.",[24,433,434,435,194],{},"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 ",[367,436,437],{},".html",[24,439,440],{},"Es la forma más cómoda. Si recién estás empezando, prueba acá primero.",[179,442,444,451,454,500],{"number":200,"title":443},"Claude Code · escribe el archivo y lo abres tú",[24,445,446,447,450],{},"Cuando trabajas en terminal con Claude Code, el modelo no renderiza HTML dentro de la terminal. Lo que hace es crearte el archivo ",[367,448,449],{},"plan.html"," (o el nombre que le pidas) en la carpeta donde estás.",[24,452,453],{},"Para verlo, lo abres en tu navegador. Desde la misma terminal:",[360,455,459],{"className":456,"code":457,"language":458,"meta":302,"style":302},"language-bash shiki shiki-themes github-light github-dark","open plan.html       # macOS\nxdg-open plan.html   # Linux\nstart plan.html      # Windows\n","bash",[367,460,461,478,489],{"__ignoreMap":302},[462,463,466,470,474],"span",{"class":464,"line":465},"line",1,[462,467,469],{"class":468},"sScJk","open",[462,471,473],{"class":472},"sZZnC"," plan.html",[462,475,477],{"class":476},"sJ8bj","       # macOS\n",[462,479,481,484,486],{"class":464,"line":480},2,[462,482,483],{"class":468},"xdg-open",[462,485,473],{"class":472},[462,487,488],{"class":476},"   # Linux\n",[462,490,492,495,497],{"class":464,"line":491},3,[462,493,494],{"class":468},"start",[462,496,473],{"class":472},[462,498,499],{"class":476},"      # Windows\n",[24,501,502],{},"O doble clic desde el Finder \u002F Explorador. Es un paso extra de uno tras del otro. Vale la pena.",[19,504,506],{"title":505,"type":124},"Si todavía no tienes Claude Code",[24,507,508,509,194],{},"La técnica funciona también en claude.ai sin instalar nada. Pero si quieres llevarla a tu terminal con archivos reales en tu disco, revisa primero ",[105,510,512],{"href":511},"\u002Fbiblioteca\u002Fclaude-code-setup-inicial","Claude Code recién instalado · la configuración que uso yo",[57,514],{},[37,516,518],{"id":517},"lo-que-tienes-que-recordar","Lo que tienes que recordar",[19,520,523],{"title":521,"type":522},"Las 4 reglas que tienes que recordar","success",[524,525,526,532,538,544],"ol",{},[129,527,528,531],{},[30,529,530],{},"Texto plano se pierde."," HTML se lee. La diferencia está en el formato, no en el contenido.",[129,533,534,537],{},[30,535,536],{},"La frase es corta."," \"Estructura la respuesta como HTML\" al final del prompt. Eso es todo.",[129,539,540,543],{},[30,541,542],{},"Pídelo cuando hay varios bloques distintos."," Planes, comparativas, mockups, sandboxes. No para una respuesta de un párrafo.",[129,545,546],{},[30,547,548,549,194],{},"En claude.ai se ve solo. En Claude Code lo abres tú con ",[367,550,551],{},"open plan.html",[57,553],{},[37,555,557],{"id":556},"sigue-leyendo","Sigue leyendo",[24,559,560],{},"Esta es la técnica más rápida de aplicar de toda la biblioteca. Tres minutos y la próxima respuesta de Claude la ves distinto.",[24,562,563],{},"Si quieres seguir afinando cómo trabajas con Claude:",[565,566],"diagram-proximas-guias",{},[57,568],{},[11,570],{"channel":13,"subtitle":571,"title":15,"url":16,"video-id":17},"Te muestro la frase exacta, los cuatro casos donde más se nota y cómo ver el archivo dependiendo de tu interfaz.",[24,573,574,575,580],{},"¿Lo probaste y te quedó alguna duda? Escríbeme por DM en ",[105,576,579],{"href":577,"rel":578},"https:\u002F\u002Finstagram.com\u002Fsantaia.lab",[109],"@santaia.lab",". Las dudas reales son el material del próximo artículo.",[582,583,584],"style",{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":302,"searchDepth":480,"depth":480,"links":586},[587,588,589,593,594,595,596,597,598],{"id":39,"depth":480,"text":40},{"id":61,"depth":480,"text":62},{"id":92,"depth":480,"text":93,"children":590},[591,592],{"id":100,"depth":491,"text":101},{"id":149,"depth":491,"text":150},{"id":173,"depth":480,"text":174},{"id":287,"depth":480,"text":288},{"id":348,"depth":480,"text":349},{"id":421,"depth":480,"text":422},{"id":517,"depth":480,"text":518},{"id":556,"depth":480,"text":557},null,"La frase corta que pegas al final de tu prompt y cambia el formato de la respuesta. Lo respaldan Anthropic y Karpathy. Sirve para planes, comparativas, mockups y sandboxes.","md",{},true,"principiante","\u002Fbiblioteca\u002Fpidele-html-a-claude-no-texto-plano","2026-05-24",{"title":5,"description":600},"biblioteca\u002Fpidele-html-a-claude-no-texto-plano",[22,610,611,612,613,614],"prompts","html","artifacts","claude-code","productividad","kziDwPyVe5C27f6i3KnZZkGOr0Yf9CT0vfW9UaOy1Og",1783576708431]