Claude Code Artifacts: de la terminal a una página web

Le pides a Claude Code que audite las dependencias del repo, sin conocer todavía Claude Code Artifacts. Veinte minutos después tienes un informe impecable: licencias, versiones desfasadas, dos paquetes sin mantenimiento. Está en la terminal, entre trescientas líneas de llamadas a herramientas.

Tu tech lead te pide "pásame eso". Y empieza el ritual de siempre: seleccionar con el ratón, pegar en Slack, ver cómo se rompen las tablas y explicar en un hilo lo que en pantalla se entendía solo.

El trabajo estaba hecho. Lo que fallaba era el formato de salida. Para eso existen los Claude Code Artifacts: en vez de dejar el resultado en el scrollback, Claude lo publica como una página.

En corto: Claude Code puede publicar el resultado de una sesión como una página HTML o Markdown en claude.ai, privada por defecto y con una URL que se actualiza cada vez que Claude vuelve a publicar. Sirve para informes, dashboards y repasos de PR que se entienden mejor viéndolos que leyéndolos línea a línea. Necesitas una cuenta de claude.ai (Pro, Max, Team o Enterprise) y la sesión iniciada con /login; con una API key no funciona.

¿Qué es un Artifact en Claude Code?

Un Artifact de Claude Code es una página web interactiva y autocontenida que Claude publica desde tu sesión en una URL privada de claude.ai y que se actualiza en esa misma URL a medida que la sesión sigue trabajando.

Así lo describe la documentación oficial de Artifacts (consultada en octubre de 2026). Salvo que le indiques otra ruta, Claude escribe un archivo .html, .htm o .md en un directorio temporal fuera de tu proyecto, lo publica, imprime la URL y abre el navegador.

No hay que activar nada: lo pides por su nombre o describes algo visual, y Claude también puede publicarlo por su cuenta. Ctrl+] reabre el último y /artifacts lista todos.

Cuándo usar Claude Code Artifacts y cuándo un .md basta

La regla de la documentación es sencilla: usa un artifact cuando el texto de la terminal no sea el medio adecuado. Mi opinión va un paso más allá: si el destinatario no eres tú, la terminal casi nunca es el medio adecuado.

Tres casos donde lo veo claro:

• Un informe de auditoría. Licencias, seguridad, deuda técnica. La página puede agrupar por severidad y enlazar cada hallazgo a su archivo.
• Un dashboard con datos del repo. Fallos de despliegue por servicio, tests lentos o cobertura por módulo. Claude lo monta con lo que la sesión ya ha leído.
• El resumen de un PR para el equipo. El diff con anotaciones al margen, para que quien revisa lea tu razonamiento junto al código en vez de reconstruirlo.

El prompt no tiene misterio:

Haz un artifact que repase este PR con el diff anotado en línea
y los hallazgos coloreados por severidad.

Pero no todo merece un artifact. Esta comparativa ayuda a decidir:

Criterio	Artifact en claude.ai	.md en el repo	Gist	Página en Vercel
Esfuerzo de publicación	Un prompt	Un commit	Un comando o copiar y pegar	Proyecto y despliegue
Interactividad	HTML, CSS y JS inline	Ninguna	Ninguna	Total
Actualización	Misma URL, con versiones	Con cada commit	Con cada edición	Con cada despliegue
Quién lo ve por defecto	Solo tú	Quien tenga acceso al repo	Cualquiera con el enlace	Quien configures
Backend y rutas	No: una sola página estática	No aplica	No aplica	Sí
Vive junto al código	No	Sí	No	No
Riesgo o limitación principal	Depende de claude.ai y de tu plan	No se renderiza como dashboard	Fácil filtrar datos sin querer	Coste de mantener infraestructura

Si el documento tiene que vivir con el código, como un ADR o un README, va en el repo. Los Claude Code Artifacts son para comunicar trabajo, no para archivarlo.

Cómo se actualizan los Claude Code Artifacts en la misma URL

Cada vez que pides un cambio, Claude edita el archivo y vuelve a publicar en la misma URL; quien tenga la página abierta ve la actualización al momento.

Cada publicación queda como una versión. Desde el botón Share eliges qué versión ven los demás o activas que vean siempre la última. Así puedes seguir iterando sin que tu equipo vea los borradores.

En una tarea larga, la página se va llenando mientras Claude trabaja:

Convierte este plan de migración en un artifact con checklist.
Marca cada punto al completarlo y anota lo que te saltes.

Una sesión nueva no sabe qué artifact tocar: pásale la URL o adjúntalo con /artifacts, o creará uno nuevo.

Es el mismo patrón que defiendo en el flujo diario con Claude Code: el agente trabaja y tú decides qué sale de la sesión y en qué formato.

Privacidad: quién puede ver tus Claude Code Artifacts

Un artifact nuevo solo lo ves tú. Para compartirlo, lo abres en el navegador y usas el control Share de la cabecera. Lo que puedes hacer depende del plan:

• Pro y Max: el artifact es privado hasta que lo compartes y no hay administración de organización.
• Team y Enterprise: puedes compartirlo con personas concretas o con toda la organización, y nombrar editores que publiquen versiones nuevas desde sus propias sesiones.
• Enlace público: cualquiera en internet lo abre sin iniciar sesión. En Team y Enterprise está desactivado hasta que un Owner activa External sharing.

Cuando Anthropic anunció Claude Code Artifacts el 18 de junio de 2026 era una beta solo para Team y Enterprise, y los artifacts no se podían hacer públicos. Hoy la documentación incluye Pro y Max y permite enlaces públicos. Si lees un tutorial de junio, está desfasado.

Comentarios y datos en directo en Claude Code Artifacts

Un artifact compartido admite dos cosas que una captura no tiene: comentarios de tu equipo que Claude puede leer y responder, y datos en vivo a través de conectores MCP de claude.ai.

Comentarios. Si lo compartes dentro de tu organización, tus compañeros pueden comentar en la página y, desde la v2.1.221, Claude puede leer los hilos y aplicar los cambios.

Desde la v2.1.228, si un editor usa Send to Claude o menciona @claude, Claude puede responder solo, según tu modo de permisos. Si en una hora le llegan 60 comentarios enviados a Claude o activaciones de hilo en ese artifact, deja de responder por su cuenta hasta que esos comentarios salen de la ventana de una hora.

Conectores MCP. Desde la v2.1.209, la página puede llamar a conectores de tu cuenta de claude.ai cada vez que alguien la abre, así que muestra datos actuales en lugar de una foto. La llamada usa la cuenta de quien mira, no la tuya: dos personas pueden ver datos distintos en el mismo dashboard. Los servidores MCP locales de tu .mcp.json sirven para construir la página, pero la página publicada no puede llamarlos.

Para montar la revisión del agente de forma consistente, mira agentic code review con Claude Code.

Límites de Claude Code Artifacts

Un artifact es una página estática y autocontenida, sin backend, servida bajo una Content Security Policy estricta. Eso marca casi todos sus límites.

1. Datos sensibles fuera de tu infraestructura. El contenido se guarda en infraestructura de Anthropic. Si el informe incluye secretos, datos personales o código bajo NDA, piensa dos veces antes de publicarlo, y mucho más antes de compartirlo en público. Las organizaciones con CMEK, HIPAA o Zero Data Retention activos no pueden usar la función.

2. Dependencia de claude.ai y de tu forma de autenticarte. Sin sesión de claude.ai no hay artifact. No funciona con API key, con gateways ni en Bedrock, Google Cloud (Agent Platform) o Foundry. Viene desactivado en el Agent SDK, en la GitHub Action, con -p, en contextos de servidor MCP y si tienes CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC activado. Si tu flujo es headless en CI, esto no es para ti.

3. Una página, sin servidor. Sin rutas ni autenticación propia. Solo carga scripts de cinco CDN públicos (cdnjs, unpkg, jsDelivr, Tailwind y jQuery) y fuentes de Google Fonts; las imágenes externas se bloquean y Claude las incrusta como data URI. Máximo: 16 MiB renderizados.

4. Cuesta tokens. Una página con estilos consume más tokens de salida que el mismo texto en la terminal.

5. Publica sin preguntar. Si nace de un prompt tuyo, se publica sin pedir permiso; solo pregunta en casos concretos, como el modo plan o una página con conectores.

Ese comportamiento ya ha generado quejas. En este hilo de Ask HN del 18 de julio de 2026, un usuario cuenta que Claude Code empezó a crear artifacts por su cuenta, guardados en claude.ai, y pregunta cómo desactivarlo. Otro responde que le pasa lo mismo y que así le cuesta más obtener resultados repetibles.

La respuesta a esa pregunta está en la documentación: "enableArtifact": false en tus settings, CLAUDE_CODE_DISABLE_ARTIFACT=1 o Artifact en permissions.deny. Puedes desactivarlo también por proyecto, en .claude/settings.json, desde la v2.1.242. Si trabajas con un cliente con datos delicados, ese es el primer ajuste que haría.

Qué hacer con esto hoy

Coge la próxima salida de Claude Code que ibas a pegar en Slack y pide un artifact en su lugar. Un repaso de PR es el mejor primer caso: es corto, lo va a leer alguien que no eres tú y el diff anotado se entiende mucho mejor en una página que en un hilo.

Si quieres llevar este flujo de idea a producto, con el agente trabajando y tú decidiendo qué se publica, es lo que hacemos en el curso Construye con IA. Y si tu problema es revisar lo que el agente genera antes de que llegue a nadie, el workshop SDD + Agentic Engineering va justo de eso.

Preguntas frecuentes

¿Qué planes incluyen Claude Code Artifacts?

Según la documentación consultada en octubre de 2026, Pro, Max, Team y Enterprise. Además, la sesión tiene que estar autenticada con una cuenta de claude.ai mediante /login y usar la API de Anthropic. En Team y Enterprise vienen activados por defecto y un Owner puede desactivarlos para toda la organización.

¿Puede ver mi artifact alguien que no tenga cuenta de Claude?

Solo si lo compartes con un enlace público. Por defecto, el artifact es privado. En Team y Enterprise también puedes compartirlo con tu organización, y entonces hace falta iniciar sesión como miembro. El enlace público en esos planes requiere que un Owner active External sharing.

¿Cómo actualizo un artifact desde otra sesión?

Pásale a Claude la URL del artifact o adjúntalo desde /artifacts. Claude recupera el contenido actual y publica una versión nueva en la misma URL. Si no le das ninguna de las dos cosas, la sesión nueva crea un artifact distinto.

¿Puedo evitar que Claude Code publique artifacts sin preguntarme?

Sí. Desactívalo con /config, con "enableArtifact": false en tus settings, con la variable CLAUDE_CODE_DISABLE_ARTIFACT=1 o añadiendo Artifact a permissions.deny. Para que no abra el navegador al publicar, usa CLAUDE_CODE_ARTIFACT_AUTO_OPEN=0.

¿Funciona Claude Code Artifacts en CI o en modo headless?

No por defecto: viene desactivado en el Agent SDK, en la GitHub Action, con -p y en contextos de servidor MCP. El detalle está en el punto 2 de los límites.

---

Por Bezael Pérez — Developer senior con más de 15 años de experiencia y fundador de Dominicode.