¿Qué son los artefactos de Claude? Una introducción práctica
8 min de lectura
Hoy, cuando Claude te da un componente de React, una gráfica o una pequeña herramienta como bloque de código, probablemente lo copias a tu propio editor solo para ver si de verdad funciona. Ese viaje extra es lo que los artefactos eliminan.
Consejo
Un artefacto no es un bloque de código más elegante. Es una versión en ejecución de lo que Claude acaba de describir, mostrada en su propio panel, que puedes mirar, hacer clic e iterar sin salir de la conversación.
Qué es realmente un artefacto
Cuando Claude genera algo sustancial y autocontenido, una página web, un diagrama, una pequeña app de React, una visualización de datos, puede abrir ese contenido en un panel aparte junto al chat en lugar de soltarlo en línea como texto. Ese panel ejecuta el código en un entorno aislado: tu navegador lo ejecuta, pero no puede alcanzar tu sistema de archivos, tus otras pestañas ni nada fuera del aislamiento sin una acción explícita tuya.
Esto importa para cómo debes pensar en los artefactos. No son una vista previa de lo que publicarías. Son una forma rápida de probar una idea antes de decidir si vale la pena publicarla, y no necesitas formación en desarrollo para sacarles provecho: describir el resultado que quieres basta para muchos usos comunes.
Qué puedes construir con artefactos
Cualquier cosa lo bastante autocontenida para ejecutarse o mostrarse por sí sola. Las categorías comunes, con un prompt que activaría cada una:
| Tipo | Bueno para | Ejemplo de prompt |
|---|---|---|
| Herramienta interactiva | Calculadoras, convertidores, estimaciones con formulario | “Crea una calculadora de hipoteca con controles deslizantes para tasa, plazo y enganche.” |
| Página web | Páginas de destino, páginas únicas, plantillas de correo | “Haz un sitio de una página para una panadería local con horarios, menú y enlace al mapa.” |
| Visualización de datos | Gráficas a partir de datos que pegas | “Grafica estos ingresos trimestrales como barras agrupadas con una línea de tendencia.” |
| Diagrama | Diagramas de flujo, organigramas, arquitectura simple | “Dibuja un diagrama de flujo de nuestro proceso de devoluciones, de la solicitud al reembolso.” |
| Documento | Informes con formato, briefs estructurados | “Convierte estas notas en un brief de proyecto de una página con formato y títulos.” |
| Juego o demo simple | Apoyos didácticos, explicaciones interactivas | “Haz una pequeña prueba de velocidad de mecanografía que muestre palabras por minuto.” |
Cuándo un artefacto supera a una respuesta normal en el chat
No todo lo que Claude construye necesita su propio panel. Un artefacto es la elección correcta cuando:
Piensas mirar y hacer clic en el resultado, no solo leerlo, la maqueta de un tablero, un juego funcional, una gráfica de tus propios datos
Estás iterando sobre el mismo resultado visual o interactivo a lo largo de varios turnos y quieres que Claude actualice una cosa en su lugar en vez de un nuevo bloque de código cada vez
Alguien más necesita verlo funcionar, no solo que le digan lo que haría
Si en cambio solo necesitas leer y entender código, o la salida es una respuesta única que no volverás a ver, una respuesta normal es más simple. No hay un panel extra que manejar para algo que nunca mirarás dos veces.
| Quieres | Usa |
|---|---|
| Ver algo correr y hacer clic en él | Artefacto |
| Leer, entender o copiar código una vez | Respuesta normal |
| Cambiar archivos reales en un proyecto de verdad | Claude Code |
| Iterar sobre un resultado visual en muchos turnos | Artefacto |
Un ejemplo rápido
Pedir una pequeña herramienta interactiva basta para activar uno. Aquí hay un prompt inicial realista:
Construye una herramienta interactiva simple como artefacto: un formulario con tres campos numéricos (horas trabajadas, tarifa por hora, porcentaje de impuestos) que calcule y muestre el pago neto en vivo mientras escribo. Usa React puro, sin bibliotecas externas, y mantén el estilo mínimo.
”Claude lo muestra como un componente funcional en el que de verdad puedes escribir, no como una descripción de uno. Si la primera versión está cerca pero no es correcta, por ejemplo, el cálculo del impuesto está mal o quieres un símbolo de moneda, dilo en lenguaje sencillo. Claude actualiza el mismo artefacto en lugar de empezar uno nuevo, lo cual mantiene tu historial de iteraciones en un solo lugar en vez de disperso en varios bloques de código.
Llamar a la API de Claude desde dentro de un artefacto
Una capacidad más reciente que vale la pena conocer aunque aún no la estés construyendo: los artefactos ahora pueden llamar directamente a la API de Claude, sin que proporciones una clave de API ni pagues por llamada. Eso convierte a un artefacto de una demo estática en algo que puede sostener su propia conversación, encadenar varias solicitudes o conducir un pequeño flujo agéntico, todo dentro del aislamiento.
Es un caso de uso bastante distinto de “muéstrame una gráfica” y merece su propia guía más profunda. Por ahora, lo práctico es: si estás prototipando algo que necesita razonar en varios pasos, no solo mostrar un resultado fijo, pídelo de forma explícita. Claude no recurrirá a llamar a la API a menos que la tarea de verdad lo necesite.
Dentro de Claude Tutorial
Los artefactos son una habilidad de Claude entre muchas
La app recorre técnicas reutilizables como esta, patrones que aplican tanto si estás prototipando una herramienta como si solo quieres sacar una mejor respuesta de un chat normal.
El dilema de privacidad que nadie menciona
Los artefactos se pueden compartir públicamente con un enlace, y se han encontrado artefactos compartidos indexados por buscadores. Si construyes algo con datos reales, incluso datos que consideres de bajo riesgo, un enlace compartido se parece más a publicar una página web que a enviar un archivo privado.
Advertencia
Antes de compartir un artefacto públicamente, vuelve a leerlo como si un desconocido sin ningún contexto fuera a encontrarlo con una búsqueda en Google, porque es una posibilidad real, no hipotética.
El valor predeterminado seguro: mantén los artefactos privados a menos que hayas revisado específicamente qué contienen. Si necesitas entregarle uno a un compañero, es un tipo de compartir distinto y más acotado que un enlace público, y vale la pena tratar esa distinción de forma deliberada en lugar de caer en “mejor hazlo un enlace”.
Errores comunes
- Formular un arreglo pequeño como una construcción totalmente nueva. Pedir todo otra vez desde cero pierde lo que ya funcionaba. Di qué debe cambiar específicamente, “conserva todo, solo corrige el cálculo del impuesto”, en lugar de repetir la petición original completa.
- Esperar que un formulario se envíe dentro del aislamiento. Es por diseño, no un error: el aislamiento bloquea la navegación real y los envíos de formularios externos. Maneja el envío en JavaScript, actualizando el estado o mostrando un resultado directamente.
- Suponer que un artefacto que no se muestra está roto. Normalmente significa una biblioteca faltante o un error de ejecución. Dile a Claude lo que ves (“panel en blanco” o el texto del error) y arreglará el código en su lugar.
- Compartir uno construido con datos reales sin releerlo. Tratado arriba y vale repetirlo: un enlace público se parece más a publicar una página que a enviar un archivo.
Preguntas frecuentes
¿Qué son los artefactos de Claude?
Un panel dedicado junto al chat que ejecuta o muestra algo que Claude construyó, una pequeña app, una gráfica, un diagrama, un documento, para que puedas mirarlo e iterar sobre él sin copiar código a tu propio editor.
¿Qué se puede construir con los artefactos de Claude?
Herramientas interactivas, páginas web únicas, visualizaciones de datos, diagramas, documentos con formato y juegos o demos simples. Cualquier cosa lo bastante autocontenida para ejecutarse sola en un entorno aislado de navegador.
¿Los artefactos de Claude son privados de forma predeterminada?
Sí. Un artefacto solo lo ves tú hasta que creas un enlace para compartir. Se han encontrado artefactos compartidos indexados por buscadores, así que trata un enlace público como una publicación.
¿Pueden otras personas editar mi artefacto de Claude?
Quien tenga un enlace para compartir puede verlo y, en un contexto compartido, trabajar a partir de una copia. Tu original sigue siendo tuyo. Para una colaboración real, pasa la conversación en lugar de solo el enlace.
¿Qué lenguajes de programación admiten los artefactos?
Principalmente tecnologías web: HTML, CSS y JavaScript, incluido React. Eso cubre la mayoría de las herramientas interactivas y visualizaciones. No es un entorno de ejecución general para lenguajes de backend.
¿Los artefactos de Claude caducan?
Persisten con la conversación en la que se crearon. Si quieres que uno dure independientemente de ese chat, guarda el código o consérvalo en un lugar que controles.
Sigue leyendo
- Conseguir contenido sobre el que puedas iterar en lugar de solo una respuesta en el chat para reconocer cuándo un resultado pertenece a su propio espacio editable.
- Hacer un cambio en varios archivos con Claude Code para cuando superaste un entorno aislado y necesitas cambiar archivos reales en un proyecto.
- Convertir la primera respuesta de Claude en la que necesitas para la misma mentalidad de iteración que esta guía usa para refinar un artefacto, aplicada a cualquier resultado de Claude.
- Elegir entre un chat nuevo, un proyecto o retomar donde te quedaste ya que dónde construyes un artefacto afecta qué tan fácil es encontrarlo y reutilizarlo después.