Anthropic anuncia: Escribe en HTML

Hace unos días vi una publicación interesante en X: el equipo de Claude Code de Anthropic anunció que su documentación interna ya no se escribe en Markdown, sino directamente en HTML. La razón: Markdown es para autores, HTML es para lectores.

Poco después, un proyecto llamado html-anything​ se volvió viral en GitHub, superando ya las 2.500 estrellas. Permite que tu agente de IA local escriba HTML por ti. No genera Markdown ni PPTX, sino archivos HTML estáticos puros. Ingresa los requisitos a la izquierda, elige una plantilla en el medio y obtén una vista previa del resultado en tiempo real a la derecha.

Después de la instalación, solo necesitas hacer una cosa: describir lo que necesitas. Por ejemplo: «Haz una entrada de blog técnica, tema oscuro, con ejemplos de código y gráficos de datos.»

La IA selecciona automáticamente la plantilla, aplica restricciones de diseño y produce un archivo HTML completo. Es un producto terminado, no un borrador.

No proporciona IA, solo orquesta

En cuanto a la implementación, html-anything no incluye un modelo, ni vende claves API.​ En pocas palabras, llama a las herramientas de IA que ya tienes instaladas en tu computadora. Claude Code, Cursor, Gemini CLI, Copilot… siempre que las hayas usado y hayas iniciado sesión antes, simplemente las usa. No se requiere registro o pago adicional.

Cada página generada es un producto terminado, no un trabajo en progreso

Viene con 75 plantillas cuidadosamente diseñadas. Cada plantilla tiene restricciones estrictas:

• Pila de fuentes con prioridad CJK.
• Cuadrícula de línea base de 8px.
• Relación de contraste ≥ 4.5.
• Debe usar datos reales.
• Texto de marcador de posición prohibido.

El beneficio es garantizar que la salida cumpla con estándares profesionales. Cubre 9 escenarios comunes:

1. Prototipos Web.​ Se puede usar para hacer páginas de destino, de precios, paneles de administración, blogs técnicos, etc.
2. Presentaciones.​ 20 estilos para elegir, discutidos en detalle a continuación.
3. Generar video.​ Escribe y exporta directamente como video MP4. Discutido en detalle a continuación.
4. Tarjetas para redes sociales.​ Genera gráficos al estilo de Xiaohongshu, Twitter, Spotify, etc., con un clic.
5. Documentos de oficina.​ Plantillas para informes semanales, documentos de requisitos, informes financieros y otros documentos de oficina diarios.
6. Currículums.
7. Informes de datos.
8. … y otros escenarios.

Entre estos 9 escenarios, las plantillas de presentación merecen una mención aparte. Hay 20 estilos de presentación completos. Los amigos que dan charlas técnicas y demostraciones de productos encontrarán esta parte reveladora.

• Estilo Internacional Suizo:​ Usa una cuadrícula de 16 columnas con un color principal. Elige entre Klein Blue, Lemon Green, etc. Aplica directamente desde 22 diseños fijos. Se abre con esa sensación austera de «se ve caro».
• Estilo Revista y Tinta Electrónica:​ 10 diseños combinados con 5 esquemas de color, incluidos Tinta, Porcelana Índigo y Papel Kraft. Parece una revista de arte finamente impresa.
• Y estilos como deck-xhs-pastel(Pastel Xiaohongshu), deck-hermes-cyber(Neón Cibernético Hermès), deck-replit(Estilo de demostración de producto Replit), etc.

Guiones de fotogramas de video, pueden renderizarse directamente a MP4

Además de páginas estáticas y presentaciones, html-anything también puede generar contenido de video. Proporciona 10 guiones de fotogramas que siguen la especificación heygen-com/hyperframes. Pásalos a Remotion​ para renderizarlos en .mp4.

• frame-glitch-title​ – Fotograma de título de arte glitch. Desplazamiento de aberración cromática cian/magenta, líneas de barrido CRT, subtítulos de datos corruptos, ruido ASCII de párrafo. Hecho para temas cyberpunk.
• frame-logo-outro​ – Fotograma final de logotipo de marca. Logotipo ensamblado bloque por bloque + halo brillante, eslogan que sube, CTA que aparece. La tarjeta de cierre para un lanzamiento de producto.
• vfx-text-cursor​ – Efecto de escritura de cursor. Cada personaje aparece con un rastro de aberración cromática magenta × cian. Ingresa una cita, obtén un fotograma de apertura cinematográfico.

Exportación de un clic a múltiples plataformas

Una vez generado el contenido, el siguiente paso es la publicación. Html-anything admite la exportación de un clic a múltiples plataformas principales, ahorrándote la molestia del formato manual.

• Cuenta Oficial de WeChat:​ El CSS está completamente en línea, pega y usa directamente.
• X / Weibo / Xiaohongshu:​ Renderizado automáticamente como PNG de alta DPI 2x, copiado al portapapeles.
• Zhihu:​ Las fórmulas LaTeX se procesan automáticamente en imágenes de marcador de posición.

Si alguna vez has sufrido por reformatear el mismo contenido para diferentes plataformes, esta característica es muy práctica.

Renderizado en flujo (streaming) + Vista previa en entorno aislado (sandbox)

La experiencia durante la generación también es importante. Html-anything usa renderizado en flujo SSE (Server-Sent Events), permitiéndote ver el proceso creativo de la IA en tiempo real. Puedes ver cómo la página es «dibujada» por la IA. Si ves que va en la dirección equivocada, puedes interrumpir y volver a solicitar inmediatamente, evitando desperdiciar recursos de generación y haciendo el proceso creativo más controlable.

La seguridad también se considera; no es una implementación tosca que solo se preocupa por la funcionalidad. Todo el HTML generado se previsualiza en un iframe aislado, aislando el almacenamiento local y las cookies.

Después de ver estas características, estoy seguro de que algunos de ustedes están ansiosos por probarlo.

⚠️ Requisitos previos:​ Debes tener instalado al menos un CLI de IA compatible localmente, como Claude Code, y debe ser funcional.

Instalación (3 pasos):

1. Clona el código a tu computadora. bashbashgit clone https://github.com/nexu-io/html-anything
2. Navega al directorio e instala las dependencias. bashbashcd html-anything pnpm install
3. Inicia con un comando. bashbashpnpm devAbre tu navegador en http://localhost:3000para ver la interfaz.

¿Quieres ver cómo se ve cada plantilla? Abre el directorio skills/en el repositorio. Cada plantilla tiene un archivo example.html. Haz doble clic para ver el efecto.

Dos problemas menores

Por supuesto, el proyecto no es perfecto. Actualmente tiene dos limitaciones principales:

1. Actualmente solo puede generar formatos HTML y PNG. Si necesitas PDF o PPTX, tendrás que confiar en la impresión del navegador o en herramientas de terceros para la conversión.
2. Modificar el contenido requiere regenerar a través del agente de IA. La barrera de entrada es un poco alta para las personas que no han instalado un CLI de IA.

Reflexiones finales

Después de hablar tanto sobre las características, volvamos al tema inicial: ¿HTML o Markdown?

Hay bastante debate en la comunidad. Algunos piensan que Markdown es suficiente: simple, directo y compatible con el control de versiones. Otros creen que HTML es la respuesta correcta: diseño libre, WYSIWYG. Ambos puntos de vista tienen mérito.

Creo que la clave no es el formato en sí, sino el contexto en el que te encuentras.

• Tomar notas, escribir documentación.​ Markdown es suficiente.
• Publicación multiplataforma, que requiere un diseño fino.​ Las ventajas de HTML brillan.

Especialmente ahora que la IA puede ayudarte a escribir HTML, la barrera del formato ya no es un problema. ¿Qué opinas?

El proyecto es de código abierto bajo la licencia Apache-2.0. Los amigos interesados pueden consultar el código fuente y la documentación en el repositorio de GitHub.

Dirección de código abierto:​ https://github.com/nexu-io/html-anything