Cómo usar Claude Artifacts: tutorial paso a paso
Recorrido completo del tutorial de Claude Artifacts de 12 minutos de Kevin Stratvert: construye un dashboard interactivo desde un CSV, refínalo con prompts en el chat, corrige detalles con la herramienta de anotaciones y añade IA integrada, datos guardados, conectores y Live Artifacts. 14 pasos, cada uno con captura real.
La versión corta
- Los Artifacts son miniapps interactivas — dashboards, herramientas, juegos — que Claude construye a partir de una descripción en lenguaje común. Una cuenta gratuita de Claude es suficiente para empezar.
- Sube un CSV y en alrededor de un minuto Claude entrega un dashboard funcional con gráficos que muestran datos al pasar el cursor; cada cambio posterior es solo otro prompt en el chat, sin código.
- La herramienta de anotación corrige un elemento exacto; compartir es una URL de un clic para «cualquiera con el enlace», y fijar mantiene tus Artifacts favoritos arriba en la biblioteca.
- Los Artifacts también pueden invocar al propio Claude, recordar datos entre sesiones y llegar a Slack o Trello mediante conectores MCP — y los Live Artifacts de la app de escritorio se mantienen actualizados solos.
How to Use Claude Artifacts (Full Tutorial)
Canal: Kevin Stratvert · 12:42
Sobre las capturas
Todas las capturas de esta guía están tomadas del vídeo de arriba y siguen siendo propiedad de Kevin Stratvert. Cada paso enlaza al momento exacto en que ocurre en el vídeo. El texto paso a paso, los pies de foto y las preguntas frecuentes son escritura nuestra.
De un CSV a un dashboard (pasos 1–10)
- 1
Abre la biblioteca de Artifacts
Inicia sesión en claude.ai — sirve una cuenta gratuita — y haz clic en Artifacts en la barra lateral izquierda. Las pestañas All y Yours listan todo lo que has creado, Shared with you reúne los Artifacts que otras personas te han enviado, y el cuadro de búsqueda filtra toda la biblioteca.
El centro de Artifacts: pestañas All, Yours y Shared with you, con New artifact en la esquina.Ver desde 0:50 - 2
Pulsa New artifact
Pulsa el botón New artifact en la esquina superior derecha. Claude abre una tarea nueva y, en lugar de construir a ciegas, primero te entrevista. Llama «web page» al Artifact — es solo la base sobre la que construye, hagas lo que hagas al final.
Un clic inicia una tarea guiada — primero las preguntas, después el código.Ver desde 1:02 - 3
Responde las preguntas iniciales
Para este dashboard elegimos Dashboard, el estilo Bold & colorful y como enfoque Sales & revenue trends. Tu cuestionario puede ser algo distinto — no pasa nada. Responde lo que sea relevante, o sáltate las preguntas y describe todo tú mismo en un mensaje.
Tipo, estilo, enfoque: estas respuestas guían la primera versión de Claude.Ver desde 1:40 - 4
Adjunta tu CSV
Cuando Claude pregunte de dónde salen los datos, dile que subirás los tuyos. Haz clic en el icono más del cuadro de mensaje, elige Add files or photos (también funciona Ctrl U / Cmd U) y selecciona tu CSV. Claude revisa las columnas y decide cómo visualizarlas antes de construir.
Icono más → Add files or photos → elige el CSV; Claude lo estudia antes de escribir la interfaz.Ver desde 2:19 - 5
Publica la primera versión
Un par de minutos después Claude publica el Artifact. El dashboard aparece a la derecha — métricas principales arriba, gráficos debajo — y el chat resume lo que construyó: 1,207 pedidos entre 5 sabores y 4 regiones, directo del CSV. Haz clic en el icono de expandir para verlo mejor.
«The Bake Sheet» — tarjetas KPI y gráficos generados a partir de un único CSV subido.Ver desde 2:42 - 6
Pasa el cursor por los gráficos para ver cifras exactas
Esto es una app de verdad, no una imagen. Desliza el cursor por la línea de tendencia y un panel muestra los ingresos exactos de cada sabor ese mes; los gráficos de barras y las tablas reaccionan igual. Nadie escribió código de gráficos — Claude lo construyó todo desde el archivo.
Un panel de junio desglosa los ingresos por sabor — interactivo desde la primera publicación.Ver desde 2:58 - 7
Refina conversando, no programando
¿Algo no te convence? Pídelo. Con «Add a dark mode toggle to the dashboard» basta — Claude vuelve a publicar una versión actualizada con un interruptor de sol/luna en la cabecera que cambia todo el tema y recuerda tu elección. Sigue pidiendo en el mismo hilo para rediseños mayores.
Un prompt después: un interruptor con icono de luna en la cabecera y un tema oscuro completo.Ver desde 4:02 - 8
Corrige un detalle con la herramienta de anotación
Para cambiar un solo elemento, abre la herramienta de anotación en la esquina superior derecha del Artifact y resalta el punto exacto — aquí el título «Kevin's Cookie Company». Se abre un cuadro de comentario: di a Claude qué cambiar y elige Send to Claude para aplicarlo ya, o Add comment para dejar la nota sin tocar nada.
Resalta, escribe el arreglo y aplícalo — o déjalo como comentario de revisión.Ver desde 4:50 - 9
Comparte con cualquiera que tenga el enlace
Haz clic en Share, pon General access en Anyone with the link y elige qué versión publicar — Claude guarda cada revisión, así que puedes compartir a propósito una instantánea anterior. Copy link entrega una URL donde el dashboard funciona y sigue siendo interactivo en cualquier navegador.
General access → Anyone with the link; el selector de versión decide qué ven los visitantes.Ver desde 5:10 - 10
Fíjalo y conserva el chat para editar
De vuelta en la biblioteca, pasa el cursor sobre el Artifact, abre su menú de tres puntos y elige Pin — los elementos fijados se reúnen en una sección Pinned para acceso de un clic. Para seguir editándolo después, reabre el chat original del Artifact desde Chat and tasks: ese hilo sigue siendo la sala de edición del Artifact.
El menú de tres puntos fija la tarjeta; el chat original queda abierto para futuras ediciones.Ver desde 5:42
Sube de nivel: IA integrada, datos guardados, conectores, Live Artifacts (pasos 11–14)
- 11
Crea una herramienta que use al propio Claude
Los Artifacts pueden llamar a Claude directamente. Crea un Artifact nuevo, elige Something else y describe la herramienta — aquí: los empleados introducen ingredientes de galletas y Claude genera cinco ideas de nombre. Sin clave de API y sin backend; en el primer uso el Artifact simplemente pide permiso al visitante para acceder a Claude.
El Batch Namer: escribe ingredientes, pulsa Generate 5 names y recibe propuestas escritas por IA.Ver desde 7:02 - 12
Haz que recuerde datos
Pide a Claude que añada favoritos y primero comprueba una cuestión de diseño: ¿lo guardado es privado de este navegador o compartido con todos los que abran el Artifact? Aquí elegimos compartido. Las ideas guardadas persisten — cierra la pestaña y mañana siguen ahí los nombres marcados con estrella. Así nacen los seguimientos, las listas y las herramientas ligeras de proyectos.
Guardado privado o compartido — luego cada sugerencia lleva una estrella que sobrevive entre sesiones.Ver desde 8:20 - 13
Conéctalo a Slack y más allá
Mediante conectores MCP (Model Context Protocol), un Artifact puede actuar fuera de Claude. Pide un botón para compartir en Slack, aprueba la conexión, elige un canal y cada idea guardada gana un botón que la publica en el equipo. Las apps sin conector nativo se alcanzan igualmente vía Zapier MCP — miles de acciones extra.
Slack conectado: la idea guardada ahora se publica sola en #new-cookie-ideation.Ver desde 9:40 - 14
Manténlo al día con Live Artifacts
En la app de escritorio de Claude, los Live Artifacts extraen datos actuales de apps conectadas y archivos locales en lugar de una instantánea congelada. Este dashboard de ventas se compila solo desde informes del POS y hojas de Google Drive; pulsa Reload en su cabecera y se redibuja con las últimas cifras — constrúyelo una vez y siempre abre una vista actual.
El botón Reload de la app de escritorio vuelve a traer los datos conectados a demanda.Ver desde 12:04