Cómo publicar un Artifact de Claude como sitio web real

La función Artifacts de Claude es una de las formas más rápidas de generar un sitio web completo. Describes lo que necesitas, Claude escribe el HTML y el CSS, y puedes ver una vista previa ahí mismo, en la ventana del chat. Se ve genial.

Y entonces te topas con un muro: ¿cómo lo pones realmente en internet?

El artifact vive dentro de Claude. Puedes verlo en vista previa, copiar el código, incluso compartir un enlace a la conversación, pero no es un sitio web de verdad. No tiene una URL que puedas poner en una tarjeta de visita. No aparece en Google. Desaparece si pierdes la conversación. Y desde luego no puedes conectarlo a un dominio propio.

Esta guía te muestra cómo pasar de un Artifact de Claude a un sitio web publicado y alojado, con su propia dirección, certificado SSL y formulario de contacto que funciona, en menos de cinco minutos.

¿Qué es un Artifact de Claude?

Cuando le pides a Claude que cree algo visual (un sitio web, un gráfico, una aplicación interactiva), genera el código y muestra una vista previa en directo en un panel junto a la conversación. Anthropic los llama Artifacts. Son archivos HTML/CSS/JS autónomos que se ejecutan en el navegador.

Para generar sitios web, los Artifacts son realmente impresionantes. El código es limpio, los diseños son modernos y el comportamiento adaptable suele funcionar sin tocar nada. El problema no es la calidad, sino la entrega. Un Artifact es una vista previa, no una publicación.

Paso 1: saca el código de Claude

Primero, necesitas llevar el archivo HTML del Artifact a tu ordenador. Hay dos maneras:

Opción A: copia el código

1. Haz clic en el panel del Artifact en Claude para ampliarlo.
2. Haz clic en el icono de código (o en “Ver código fuente”) para ver el HTML sin procesar.
3. Haz clic en Copiar para copiar todo el bloque de código.
4. Abre un editor de texto sin formato (el Bloc de notas en Windows, TextEdit en Mac, asegurándote de que esté en modo de texto sin formato).
5. Pega el código y guarda el archivo como index.html en tu escritorio.

Opción B: descarga el Artifact

Algunos planes de Claude te permiten descargar el Artifact directamente como archivo HTML. Si ves un botón de descarga en el panel del Artifact, úsalo: es más rápido. Solo asegúrate de que el archivo descargado se llame index.html (cámbiale el nombre si hace falta).

Paso 2: suéltalo en SiteDrop

Ahora tienes un archivo index.html en tu ordenador. Para ponerlo en internet:

1. Entra en SiteDrop e inicia sesión (empezar es gratis).
2. Arrastra tu archivo index.html al panel de SiteDrop. Eso es todo. Un solo arrastre.
3. En menos de cinco segundos, SiteDrop publica tu sitio en una CDN global, lo protege con un certificado SSL gratuito (HTTPS) y te da un enlace activo.

Tu Artifact de Claude ya es un sitio web de verdad, accesible para cualquier persona del mundo.

Paso 3: consigue tu propio dominio

El enlace gratuito de SiteDrop funciona perfectamente para compartir, pero si quieres una dirección profesional (como www.yourbusiness.com), puedes reclamar una directamente desde el panel de SiteDrop:

1. Abre los ajustes de tu sitio en el panel.
2. Busca el nombre de dominio que prefieras.
3. Resérvalo: SiteDrop se encarga de toda la configuración de DNS automáticamente. Sin paneles de registradores, sin registros de servidores de nombres, sin esperas de 48 horas.

Paso 4: consigue un formulario de contacto que funcione (gratis)

Si tu Artifact de Claude incluye un formulario de contacto (y la mayoría de los sitios de negocios deberían tenerlo), SiteDrop lo conecta automáticamente. Los mensajes enviados a través del formulario llegan a tu bandeja de entrada integrada de SiteDrop sin hosting de correo, sin herramientas de formularios de terceros, sin suscripciones mensuales.

Esta es una de las mayores ventajas frente a otras opciones de alojamiento: tu formulario de contacto funciona de verdad desde el momento en que subes el sitio.

Consejos para obtener mejores Artifacts de Claude

La calidad de tu sitio web depende de la calidad de tu prompt. Estos son algunos consejos para conseguir mejores Artifacts de Claude:

Sé específico sobre tu negocio

“Crea un sitio web de una sola página para un negocio de peluquería canina a domicilio llamado Paws & Shine en Mánchester. Incluye una sección principal con un eslogan, una sección de servicios con 4 servicios y precios, testimonios de clientes y un formulario de contacto. Usa una combinación de colores turquesa cálido y crema, con elementos de diseño modernos y redondeados.”

Cuanto más específico seas, más pulido será el resultado. Incluye el nombre real de tu negocio, tus servicios reales, tus precios reales y tus colores preferidos.

Pide todo en un solo archivo

Añade a tu prompt “pon todo el CSS dentro del archivo HTML” o “hazlo en un único index.html autónomo”. Así la subida a SiteDrop es sencillísima: un archivo, un arrastre, listo.

Pide que se adapte a móvil

Añade a tu prompt “hazlo totalmente adaptable a móvil, tableta y ordenador”. Claude suele hacerlo bien, pero ser explícito asegura que no se salte ningún punto de corte.

Usa el Creador de prompts de SiteDrop

¿No sabes cómo escribir un buen prompt? El Creador de prompts de SiteDrop te hace unas cuantas preguntas sobre tu negocio y genera el prompt perfecto para pegar en Claude. Se encarga de todos los detalles técnicos por ti.

¿Por qué no compartir simplemente el enlace de la conversación de Claude?

Claude te permite compartir un enlace a la conversación, y quien lo reciba puede ver el Artifact. Entonces, ¿para qué molestarse con SiteDrop? Porque un enlace de conversación compartido:

• No es una URL de verdad: no puedes poner el enlace de una conversación de Claude en una tarjeta de visita ni en tu ficha de Google.
• No tiene dominio: tu sitio web vive en claude.ai/share/..., no en el nombre de tu negocio.
• No se puede rastrear: los buscadores y los motores de respuestas con IA no pueden encontrarlo ni citarlo.
• No tiene formulario de contacto: los visitantes no pueden ponerse en contacto contigo.
• Podría desaparecer: si Anthropic cambia su política de compartir o pierdes la conversación, el enlace deja de funcionar.
• Muestra la marca de Claude, no la de tu negocio.

Un sitio alojado en SiteDrop es tuyo. Tu dominio, tu marca, tu formulario de contacto, tus estadísticas. Es un sitio web de verdad, no una vista previa dentro del producto de otra empresa.

¿Qué más puedes hacer después de publicar?

• Editar el contenido visualmente: usa el editor visual de SiteDrop para cambiar textos, imágenes y contenido directamente en la página.
• Añadir tus propias imágenes: sustituye cualquier imagen de marcador por las fotos reales de tu negocio.
• Actualizar cuando quieras: vuelve a generar el Artifact en Claude con los cambios, súbelo de nuevo a SiteDrop y tu sitio en línea se actualiza al instante.
• Seguir a los visitantes: mira cuántas personas visitan tu sitio desde el panel de SiteDrop.

Todo el proceso, paso a paso

1. Abre Claude y describe tu sitio web (o usa el Creador de prompts).
2. Claude genera un Artifact: míralo en vista previa para asegurarte de que te gusta.
3. Copia el código o descarga el archivo HTML.
4. Arrastra el archivo a SiteDrop.
5. Tu sitio web está en línea. Si quieres, reclama un dominio propio.

Tiempo total: menos de cinco minutos. Coste total: empezar es gratis.