{"id":3224,"date":"2026-08-25T17:21:32","date_gmt":"2026-08-25T21:21:32","guid":{"rendered":"https:\/\/didi.com.bo\/blog\/?p=3224"},"modified":"2026-08-25T17:34:20","modified_gmt":"2026-08-25T21:34:20","slug":"guia-claude-artefactos","status":"publish","type":"post","link":"https:\/\/didi.com.bo\/blog\/guia-claude-artefactos\/","title":{"rendered":"Gu\u00eda r\u00e1pida de Claude Artefactos: qu\u00e9 son, c\u00f3mo usarlos y qu\u00e9 puedes crear"},"content":{"rendered":"

<\/h1>\n

Respuesta r\u00e1pida:<\/strong> Claude Artifacts o artefactos en espa\u00f1ol, es una funci\u00f3n gratuita dentro de Claude (claude.ai) que genera contenido interactivo en un panel lateral: p\u00e1ginas web, calculadoras, documentos con formato y mini aplicaciones. T\u00fa describes lo que necesitas en texto plano, Claude lo construye y lo muestra en vivo. Puedes editarlo paso a paso y publicarlo con un enlace que cualquier persona puede abrir, sin necesidad de cuenta. Est\u00e1 disponible en todos los planes, incluido el gratuito.<\/p><\/blockquote>\n

Qu\u00e9 es un artefacto en Claude<\/h2>\n

Un artefacto es una pieza de contenido que Claude genera en una ventana separada del chat. En lugar de darte la respuesta como texto dentro de la conversaci\u00f3n, Claude abre un panel lateral donde el resultado se ve y funciona en tiempo real: una p\u00e1gina web con botones que hacen clic, un gr\u00e1fico que puedes mover, un documento con formato limpio.<\/p>\n

Anthropic lanz\u00f3 Artefactos el 2024 junto con Claude 3.5 Sonnet. Desde entonces, la funci\u00f3n ha crecido: almacenamiento que persiste entre sesiones, conexiones con servicios externos y la posibilidad de publicar tu creaci\u00f3n con un solo bot\u00f3n.<\/p>\n

La diferencia con una respuesta normal de chat es pr\u00e1ctica. Si le pides a Claude \u00abescribe un correo formal\u00bb, la respuesta aparece dentro de la conversaci\u00f3n, mezclada con el resto del texto. Si le pides \u00abcrea una landing page para mi negocio de reposter\u00eda\u00bb, Claude abre el panel lateral derecho, escribe el c\u00f3digo HTML y te lo muestra renderizado: ves la p\u00e1gina con colores y tipograf\u00eda reales, lista para copiar o publicar.<\/p>\n

Qu\u00e9 tipos de contenido puedes crear<\/h2>\n

Claude genera artefactos en 6 formatos principales:<\/p>\n

P\u00e1ginas HTML<\/strong> con CSS y JavaScript incluidos en un solo archivo. Puede ser una landing page, un formulario de contacto, un juego, una calculadora o un panel con gr\u00e1ficas.<\/p>\n

Componentes React.<\/strong> Si le pides algo con mayor complejidad (un formulario con varios pasos, un panel con datos que cambian seg\u00fan lo que selecciones), Claude lo construye como un componente React con Tailwind CSS. Suena t\u00e9cnico, pero t\u00fa solo describes lo que quieres y Claude se encarga del c\u00f3digo.<\/p>\n

Gr\u00e1ficos SVG.<\/strong> Diagramas, iconos, ilustraciones, infograf\u00edas. Todo editable bajo c\u00f3digo y con resoluci\u00f3n perfecta en cualquier tama\u00f1o(los archivos SVG, son un formato ampliamente utilizado en la web para representar im\u00e1genes que pueden escalarse sin perder calidad, lo que lo hace ideal para logotipos, \u00edconos y gr\u00e1ficos interactivos).<\/p>\n

Diagramas Mermaid.<\/strong> Puedes decirle a Claude: \u00abhaz un diagrama de flujo de mi proceso de ventas\u00bb y Claude genera un diagrama con cajas conectadas por flechas. Funciona para organigramas, diagramas de secuencia, mapas de proceso y cronogramas.<\/p>\n

Documentos Markdown.<\/strong> Son los archivos .md con el que puedes hacer\u00a0 reportes, art\u00edculos largos. Con encabezados, tablas y formato limpio.<\/p>\n

Archivos de c\u00f3digo.<\/strong> Python, JavaScript, TypeScript, Go y m\u00e1s de 30 lenguajes. Con resaltado de sintaxis y listo para copiar.<\/p>\n

C\u00f3mo activar Artefactos<\/h2>\n
\"\"
Para activar Artefactos, ingresa en Configuraci\u00f3n (desde el icono de tu nombre de cuenta en la parte inferior izquierda) y luego ve a Capacidades. Activa la opci\u00f3n Ejecuci\u00f3n de c\u00f3digo y creaci\u00f3n de archivos.<\/strong><\/figcaption><\/figure>\n

 <\/p>\n

En la mayor\u00eda de cuentas creadas despu\u00e9s de febrero de 2026, Artefactos ya viene activo por defecto. Si no lo ves, ve a Configuraci\u00f3n > Capacidades<\/strong> y activa \u00abEjecuci\u00f3n de c\u00f3digo y creaci\u00f3n de archivos\u00bb (dato vol\u00e1til: la ruta puede cambiar, verificar en support.claude.com).<\/p>\n

Los artefactos funcionan en todos los planes de Claude: Free, Pro (20 d\u00f3lares\/mes), Max, Team y Enterprise. Crear y publicar es gratuito. Algunas funciones requieren plan de pago: el almacenamiento persistente (hasta 20 MB por artefacto) y los Live Artefactos (paneles que se actualizan con datos en tiempo real desde servicios conectados).<\/p>\n

C\u00f3mo pedirle a Claude que cree un artefacto.<\/h2>\n
\"gu\u00eda
Una vez que Claude genere un artefacto, te muestra un bot\u00f3n para abrirlo en una ventana del lado derecho (o descargarlo). El artefacto generado \u00abesta vivo\u00bb y puedes jugar con el y probarlo.<\/figcaption><\/figure>\n

 <\/p>\n

Claude decide autom\u00e1ticamente cu\u00e1ndo abrir el panel lateral. La regla general: si el contenido tiene m\u00e1s de 15 l\u00edneas, es aut\u00f3nomo y el usuario probablemente va a querer editarlo o usarlo fuera de la conversaci\u00f3n, Claude lo convierte en artefacto.<\/p>\n

Pero puedes controlarlo t\u00fa. Si quieres forzar un artifact, di algo como:<\/p>\n

Crea una calculadora de presupuesto mensual como artefacto<\/em><\/p>\n

Hazme un diagrama de flujo de este proceso como artefacto<\/em><\/p>\n

Genera una p\u00e1gina HTML con mi portafolio de dise\u00f1o.<\/em><\/p>\n

Un truco que funciona: ser espec\u00edfico con lo que quieres ver. Compara estos 2 prompts:<\/p>\n