TL;DR Pídele a Claude Code "haz un artefacto de…" y publica una página HTML autocontenida en una URL de claude.ai que tu equipo abre en el navegador y ve actualizarse en vivo. Requisitos: plan Pro, Max, Team o Enterprise, login en claude.ai y solo Anthropic API (nada de Bedrock/Vertex). Es estático por diseño: sin backend, una CSP que bloquea
fetchy recursos externos, todo va baked in; la única excepción son las llamadas a MCP connectors al abrirse la página. ¿Sin acceso (API key, gateway, Bedrock)? La técnica de fondo (pedir HTML en vez de Markdown y abrirlo en local) funciona igual.
Hay una verdad incómoda que Anthropic puso por escrito en un artículo sobre la eficacia del HTML: un Markdown de más de 100 líneas no se lee, se ojea en diagonal. Y el output de un agente vivía atrapado en tu terminal, visible solo para ti. La comunidad ya lo intentaba a mano (en Reddit alguien montó un "HTML Drive" casero para guardar y compartir estas páginas). Artifacts es esa idea, oficial. Y desde julio 2026 ya no es cosa de empresas: está en Pro y Max, sin etiqueta beta.
Cómo funciona
Un artefacto es una página web viva que Claude Code publica desde tu sesión a una URL en claude.ai. La abres en el navegador y se actualiza en su sitio según avanza la sesión. Claude escribe un fichero HTML (o Markdown) en tu proyecto y lo publica; te pide permiso la primera vez.
> Haz un artefacto que recorra este PR con el diff anotado al margen.
⠋ Escribiendo pr-walkthrough.html...
Claude wants to publish "PR walkthrough" (pr-walkthrough.html)
to a private page on claude.ai [y/n] y
✓ https://claude.ai/code/artifact/5fbea6f3-...
(tu navegador se abre solo · Ctrl+] para reabrir el último)
Cada publicación es una versión, y tu galería completa vive en claude.ai/code/artifacts. Compartes desde la cabecera de la página, y aquí está una de las novedades gordas: en Team y Enterprise, a personas concretas o a toda tu organización (incluso en rol editor, para que republiquen versiones desde su propia sesión); en Pro y Max, con un enlace público que cualquiera abre sin login en claude.ai. Para actualizarlo desde otra sesión, le pasas la URL.
Qué puedes construir
Una sola página HTML, así que cabe todo lo que expreses con HTML, CSS y JS inline:
- Recorrer un cambio: el diff de un PR con anotaciones al margen y findings por color de severidad.
- Comparar alternativas: cuatro layouts del mismo panel, en rejilla, con su trade-off debajo.
- Controles interactivos: sliders para una curva de easing y ver la animación en vivo.
- Devolver el resultado a la sesión: un board de triaje con un botón "Copy as prompt" que te da el orden final para pegarlo de vuelta.
- Seguir trabajo en curso: un checklist que se va marcando solo mientras una tarea larga corre.
Mi uso favorito merece tip propio: esculpir un artefacto hasta entender el cambio, y solo entonces delegar.
Estático por diseño (y por qué importa)
Aquí está la limitación que más confunde, y es a propósito, por seguridad. Claude envuelve tu fichero en una CSP estricta:
| Restricción | Qué implica |
|---|---|
| Sin peticiones externas | La CSP bloquea fetch, XHR, WebSocket y cualquier script, fuente o imagen de otro host. Claude mete el CSS/JS inline y las imágenes como data URI |
| Sin backend | No guarda lo que escribes en un formulario, no autentica ni llama a una API propia al verse |
| Una sola página | Los enlaces relativos no resuelven; usa anclas dentro de la página |
| Tipos de fichero | .html, .htm o .md · Tamaño renderizado ≤ 16 MiB |
La excepción documentada llegó con la v2.1.209: los MCP connectors. La página puede pedirle a claude.ai que llame a tus connectors al abrirse, así que un dashboard enseña datos frescos en cada visita sin dejar de ser una página estática. Con matices: cada espectador aprueba el acceso y usa sus propias conexiones (dos personas pueden ver datos distintos), y un artefacto con connectors no se puede compartir por enlace público. Para todo lo demás sigue valiendo la regla: si quieres estado real, despliegas en tu infra. Un artefacto es una foto del trabajo, no una app.
El coste en tokens vale la pena (con design system)
Una página con estilo gasta más tokens que el mismo texto en el terminal: el CSS/JS inline y las imágenes en data URI son lo caro. Pero la ganancia visual es de calle. Para no pagarlo dos veces: prefiere SVG o HTML+CSS antes que imágenes raster, y deja registrado tu design system donde Claude lo lea (en tu CLAUDE.md o un theme), porque reutilizar colores, espacios y tipografías es lo que abarata y unifica. Claude carga un skill integrado, artifact-design, al construirlo:
Skill(artifact-design)
└ Successfully loaded skill
Tu prompt y tu design system mandan sobre él. Y ese skill también está expuesto como comando: invoca /artifact-design cuando quieras esa guía de diseño a demanda, sin esperar a que Claude lo cargue solo. Para que tus UIs dejen de parecer hechas por IA en general, el frontend-design skill empuja en la misma dirección. Y si los tokens te preocupan, mira cómo funcionan tus límites de uso.
¿Sin acceso? La técnica funciona igual
Si publicas con API key, gateway o credencial de cloud, el botón de publicar no existe para ti. Pero lo de fondo lo puedes hacer hoy igualmente: pídele a Claude Code una página HTML autocontenida y ábrela en local con open informe.html. Pierdes el compartir y el live-update, pero ganas lo importante: dejar de leer Markdown en diagonal.
Requisitos
- Plan Pro, Max, Team o Enterprise (en Pro/Max sin gestión de admin; en Team activado por defecto; en Enterprise lo activa un Owner).
- Login en claude.ai con
/login. Con API key, gateway o credencial de cloud no publica. - Solo Anthropic API: no en Amazon Bedrock, Google Vertex AI ni Microsoft Foundry.
- CLI de Claude Code v2.1.183+, o app de escritorio v1.13576.0+. Desactívalo con
"disableArtifact": true.
Documentación oficial: Share session output as artifacts · Artifacts in Claude Code (blog) · El "HTML Drive" en Reddit