Artifact (Claude)

Un artifact es un panel dedicado que aparece junto a la conversación en Claude cuando el modelo produce contenido extenso y autónomo: un bloque de código, un documento en Markdown, una página HTML, un componente React, un SVG o un diagrama. En lugar de mezclar ese resultado con el chat, Claude lo aísla en una ventana propia que se puede editar, versionar y, en muchos casos, previsualizar en vivo.

Cómo funciona

Claude decide crear un artifact de forma automática cuando el contenido cumple ciertos criterios: es sustancial (por norma general más de unas 15 líneas), es autónomo (tiene sentido fuera de la conversación) y es algo que probablemente querrás editar o reutilizar. Un párrafo de explicación se queda en el chat; un script completo o una landing page van a un artifact.

Cada artifact tiene un tipo asociado que determina cómo se renderiza:

• Código: se muestra con resaltado de sintaxis en el lenguaje detectado.
• Markdown / documento: texto formateado que puedes copiar o exportar.
• HTML: se ejecuta en una vista previa dentro de la interfaz.
• React: componentes interactivos que se renderizan al vuelo.
• SVG y diagramas Mermaid: gráficos visuales generados desde texto.

Cuando pides cambios, Claude actualiza el mismo artifact en lugar de reescribirlo entero en el chat, y conserva un historial de versiones al que puedes volver. Todo el contenido del artifact sigue viviendo dentro de la ventana de contexto de la conversación, así que Claude lo tiene presente en cada iteración.

Por qué importa

Los artifacts convierten a Claude de un asistente que devuelve texto en un espacio de trabajo iterativo. Para quien construye, esto cambia varias cosas en la práctica:

• Separas la explicación del entregable: el código no se pierde entre párrafos.
• Iteras sobre el mismo objeto sin copiar y pegar cada versión.
• Previsualizas HTML, React o diagramas sin salir de Claude, lo que acorta el ciclo de prueba y error.
• Puedes publicar y compartir artifacts como mini apps, e incluso conectarlos a la API de Claude para que sean funcionales.

Si estás empezando y quieres sacarle partido a estas funciones desde el primer día, este es justo el tipo de flujo que se cubre en un curso para empezar con Claude desde cero, donde se practica cómo pedir entregables listos para usar.

Ejemplo práctico

Le pides a Claude: "crea una calculadora de propinas en React". Claude genera un artifact con el componente, lo renderiza interactivo a la derecha, y tú lo pruebas al instante. Luego dices "añade un selector de moneda": Claude edita el mismo artifact y guarda la versión anterior. Al final exportas el código o publicas la app.

Qué NO es un artifact

No confundas artifacts con otras piezas del ecosistema:

• No es un fichero adjunto: los adjuntos son entradas que tú subes; el artifact es salida que Claude genera.
• No es MCP ni un conector: esos protocolos conectan Claude a datos y herramientas externas; el artifact es solo la superficie donde se muestra un resultado.
• No es memoria persistente: un artifact vive dentro de su conversación, no es una base de datos compartida entre chats.
• No siempre aparece: para respuestas cortas o conversacionales, Claude responde en el chat sin crear artifact.

Un error común es pedir explícitamente "ponlo en un artifact" cuando el contenido es trivial: Claude puede crearlo, pero para textos breves añade fricción en vez de quitarla. Reserva los artifacts para lo que de verdad vas a editar o reutilizar.