El Claude de Anthropic tiene una función que la mayoría de los otros chatbots de IA no tienen: los artifacts. Código autocontenido, HTML, componentes React, diagramas Mermaid y SVG que se renderizan en línea en el chat como unidades propias.
Usados bien, los artifacts convierten a Claude en una herramienta de prototipado de un solo uso. Usados mal, no son más que bloques de código glorificados. Aquí tienes la guía completa.
Qué es realmente un artifact
La documentación de Anthropic llama a los artifacts «contenido sustancial y autocontenido que los usuarios probablemente modificarán, iterarán o llevarán fuera de la conversación». En la práctica, cubren seis tipos:
- Código — Python, TypeScript, Rust, Go, etc. Renderizado con resaltado de sintaxis.
- Documentos Markdown — prosa extensa, informes, borradores.
- Páginas HTML — páginas de aterrizaje de un solo archivo, paneles, prototipos.
- Componentes React — componentes renderizados en vivo con reactividad completa.
- Diagramas Mermaid — diagramas de flujo, diagramas ER, diagramas de secuencia. Renderizados a SVG en línea.
- Imágenes SVG — gráficos vectoriales generados a partir de indicaciones.
Claude decide cuándo convertir algo en un artifact según la longitud y la autonomía. Puedes inclinar la decisión diciendo «haz de esto un artifact» o «como un componente autocontenido».
Por qué los artifacts son importantes para la exportación
El artifact tiene su propio ciclo de vida:
- Se renderiza por separado de la prosa de la conversación.
- Puedes editarlo en línea (pídele a Claude que «itere sobre el artifact»).
- Tiene un identificador estable a lo largo de las ediciones.
Esto dificulta la exportación. Si tu herramienta de exportación simplemente vuelca la conversación como Markdown, el artifact llega como (a) bloques de código en línea perdiendo la forma renderizable, o (b) desaparece por completo.
Las buenas herramientas de exportación tratan a los artifacts como ciudadanos de primera clase.
Cómo maneja ChatExport AI los artifacts
Tres modos, elegidos por exportación:
Modo 1: En línea (predeterminado para PDF, Word)
El contenido del artifact se inserta en la transcripción de la conversación en la posición donde apareció. El código mantiene el resaltado de sintaxis. Los diagramas Mermaid se renderizan como SVG incrustado. Las páginas HTML se renderizan como una captura de pantalla de la página renderizada.
Ideal para: entregar la exportación a alguien que solo quiere leer la conversación.
Modo 2: Archivos separados (predeterminado para ZIP, Markdown)
El artifact se guarda como un archivo independiente:
- Código →
chat/<artifact-name>.py(o .ts, .rs, etc.) - HTML →
chat/<artifact-name>.html - React →
chat/<artifact-name>.jsx - Mermaid →
chat/<artifact-name>.mmdmáschat/<artifact-name>.svg - SVG →
chat/<artifact-name>.svg
La transcripción referencia cada artifact mediante un enlace relativo.
Ideal para: entregar el artifact a un desarrollador que quiera ejecutar o modificar el código.
Modo 3: Ambos
El modo ZIP incluye ambos: la transcripción en línea para leer y los artifacts como archivos separados para ejecutar.
Ideal para: archivo. Seis meses después apreciarás tener ambas vistas.
Problemas comunes con los artifacts
Múltiples revisiones
Si iteras sobre un artifact («agranda el botón»), Claude actualiza el artifact en su lugar. Las revisiones anteriores desaparecen de la vista de la conversación pero se pueden recuperar a través del panel de historial del artifact.
ChatExport AI captura la versión actual de cada artifact en el momento de la exportación. Si quieres todas las revisiones, pídele a Claude que «muéstrame v1, v2, v3 del artifact» antes de exportar; el historial de revisiones entonces se exporta como bloques de código separados.
Artifacts incompletos
Si Claude está en medio de la transmisión cuando presionas Exportar, el artifact parcial se incluye tal cual. Espera a que el indicador de transmisión termine antes de exportar.
Dependencias de artifacts React
Los artifacts React pueden import desde una lista blanca pequeña (React, Tailwind mediante classnames, iconos de lucide-react). La exportación captura el código fuente JSX; el consumidor necesita configurar las mismas dependencias si quiere ejecutarlo localmente.
Las exportaciones de ChatExport AI incluyen un README.md dentro del ZIP para artifacts React que anota las dependencias requeridas, además de un fragmento que muestra cómo armar un proyecto Vite + React que ejecute el artifact.
Diagramas Mermaid renderizados sin conexión
La exportación SVG de un diagrama Mermaid es completamente autocontenida — se abre en cualquier navegador, sin necesidad de internet. La exportación de la fuente .mmd te permite editar y volver a renderizar más tarde.
Flujo de trabajo: del prototipo de Claude al código enviado
El flujo que mejor me ha funcionado:
- Pídele a Claude que construya el prototipo como un artifact React. Itera en línea 2-3 veces.
- Exporta la conversación como un ZIP. La transcripción explica las decisiones de diseño; los archivos del artifact son ejecutables.
- Coloca el artifact en un proyecto Vite real. Añade las dependencias listadas. El componente se ejecuta tal cual en el proyecto.
- Reemplaza los comentarios de texto estilo indicación con JSDoc real. Añade pruebas. Envía.
Tiempo total desde la indicación hasta ejecutar localmente: ~5 minutos. La exportación es lo que lo hace rápido — es el puente entre «Claude construyó esto» y «esto está en mi repositorio».
Pruébalo
Abre Claude. Pídele que «me construya una página HTML autocontenida que sea un diagrama Mermaid de un flujo de registro de usuario». Cuando el artifact se renderice, exporta la conversación como un ZIP mediante ChatExport AI. El ZIP contiene la transcripción más un .html independiente más la fuente .mmd más el .svg renderizado.
Ese es el flujo de trabajo completo de artifacts de Claude.
Relacionado
- Guía de exportación de Claude.
- Claude a Markdown — flujo solo Markdown, artifacts como archivos separados.
- Para desarrolladores — flujos de exportación de IA fieles al código.