Cómo usar los Artifacts de Claude paso a paso

Los Artifacts son una ventana lateral en claude.ai donde Claude coloca contenido sustancial y reutilizable: fragmentos de código, documentos largos, páginas HTML, diagramas SVG o pequeñas apps interactivas. Entra en claude.ai e inicia sesión. En la mayoría de cuentas los Artifacts ya vienen activados por defecto. Si no ves el panel al pedir código, haz clic en tu inicial abajo a la izquierda, abre 'Settings' (Configuración) y en la sección 'Feature preview' activa el interruptor de 'Artifacts'. Recarga la página. A partir de ahí, cuando pidas algo que merezca vivir fuera del chat, Claude abrirá automáticamente un panel a la derecha. Esta funcionalidad está disponible tanto en el plan gratuito como en Pro, y funciona igual en España y en toda LATAM sin configuración regional adicional.

La forma más rápida de entender los Artifacts es crear uno. Abre un chat nuevo y pide algo con entidad suficiente para que Claude decida usar el panel. Cuanto más concreto seas con el resultado y el formato, mejor. Al enviar el prompt verás cómo, en lugar de volcar todo el código en la conversación, Claude abre una ventana a la derecha con el contenido y una vista previa renderizada. El chat queda limpio para que sigas conversando. Prueba con este prompt sencillo que genera una página web completa y funcional. Fíjate en que el resultado se ve en vivo, no solo el código.

Créame una página web de una sola pantalla con una calculadora de propinas. Que tenga un campo para el importe, botones de 5%, 10% y 15%, y muestre el total. Diseño limpio con CSS moderno.

El verdadero poder de los Artifacts es la iteración. No hace falta repetir el prompt entero: basta con pedir cambios en lenguaje natural y Claude actualiza el mismo Artifact conservando todo lo anterior. Cada modificación crea una nueva versión, así que nunca pierdes trabajo. Sigue con la calculadora del paso anterior y encadena peticiones. Verás aparecer un pequeño control de versiones (flechas o 'v1', 'v2'...) en la esquina del panel que te deja volver atrás si un cambio no te convence. Trabaja con cambios pequeños y concretos: es más fácil corregir el rumbo que rehacer.

Añade un campo para dividir la cuenta entre varias personas y muestra cuánto paga cada una. Cambia también los colores a una paleta azul oscuro.

Muchos Artifacts son interactivos y puedes probarlos directamente en el panel sin instalar nada. En la parte superior del Artifact tienes normalmente dos pestañas: 'Preview' (vista previa renderizada) y 'Code' (el código fuente). En la calculadora, cambia a Preview e introduce importes reales, pulsa los botones de porcentaje y comprueba que los cálculos son correctos. Si algo no funciona como esperas, no toques el código a mano: describe el bug en el chat y Claude lo corrige. Esta capacidad de ejecutar HTML, CSS y JavaScript en vivo convierte a los Artifacts en un mini-entorno de prototipado ideal para validar ideas rápidamente antes de llevarlas a producción.

El botón del 15% no actualiza el total. Corrígelo y verifica que los tres botones funcionan.

Cuando el resultado te convenza, tienes varias salidas. En la esquina superior derecha del Artifact encontrarás iconos para copiar el contenido al portapapeles y para descargarlo como archivo (por ejemplo un .html que puedes abrir directamente en tu navegador o subir a tu hosting). Si tienes plan Pro, también verás un botón 'Publish' o 'Share' que genera un enlace público para enseñar tu creación a cualquiera sin que tengan cuenta de Claude. Para la calculadora de propinas, descarga el .html, ábrelo con doble clic en tu ordenador y comprueba que funciona igual fuera de Claude. Ya tienes una app real, hecha en minutos, lista para usar o seguir desarrollando.

Un Artifact vive dentro de la conversación donde lo creaste, pero puedes retomarlo cuando quieras: vuelve a ese chat y sigue pidiendo cambios; el contexto se mantiene. Si quieres partir de un Artifact existente en un chat nuevo, copia su código y pégalo en el prompt indicando qué quieres modificar. Una buena práctica para principiantes es tener una conversación por proyecto: así el historial de versiones queda ordenado y localizas rápido lo que buscas. Con esto ya dominas el ciclo completo: generar, iterar, probar, exportar y reutilizar. Experimenta pidiendo otros tipos de Artifact como un documento en Markdown, un diagrama de flujo o un pequeño juego para ver toda la variedad que soportan.

Toma este código y conviértelo en un componente reutilizable con un tema claro/oscuro conmutable:
[pega aquí el código de tu Artifact anterior]