Guías / Claude Code

De Claude Code a una URL pública de preview

Compara Claude Code Artifacts, PreviewShip MCP y CLI para convertir HTML o un build estático en una URL pública de revisión.

Actualizado 2026-07-27Guía práctica de despliegue

Respuesta directa

Claude Code puede publicar un Artifact nativo cuando el resultado es una sola página autocontenida. Usa PreviewShip MCP o CLI cuando Claude debe desplegar un archivo local, una carpeta estática con assets o el build de un framework y devolver una URL independiente de preview.

Despliega artefactos de build, no zips de código fuente.

Si subes un zip, compila primero y comprime la salida estática como dist, build, out o public con index.html y assets. No subas carpetas fuente de React/Vue/Next con package.json, src y node_modules. Los archivos .html, .md/.markdown y .pdf únicos se despliegan directamente desde consola, CLI, MCP y la extensión VS Code/Cursor.

Puntos clave

Artifact nativo encaja con una página autocontenida vinculada a la sesión de Claude.
PreviewShip MCP permite que Claude construya, despliegue y devuelva la URL como una llamada de herramienta.
PreviewShip CLI ofrece un comando visible y salida JSON para terminal, scripts o CI.
React, Vue, Vite, Next export, Astro y Svelte deben compilarse antes de desplegar dist/build/out.

Flujo recomendado

1

Identifica si el resultado es un Artifact de una página, un archivo HTML local o un proyecto que necesita build.

2

Para MCP, configura `previewship-mcp` en Claude Code y autentica PreviewShip.

3

Pide a Claude que ejecute el build, despliegue la salida lista para navegador y verifique la URL.

4

Para CLI, usa `npx previewship deploy ./dist --json` o despliega directamente un archivo .html.

5

Abre el enlace final y comprueba assets, rutas e interacciones antes de compartirlo.

Comparación rápida

OpciónCuándo usarlaLímite principal
Claude Code ArtifactUna página autocontenida ligada a la sesiónCSP estricto, una página y reglas del plan
PreviewShip MCPClaude debe construir, desplegar y devolver el enlaceRequiere configuración y autenticación
PreviewShip CLIQuieres un comando explícito o salida JSONDebes indicar la salida lista para navegador
Hosting de producciónBackend, dominio productivo o datos persistentesMás infraestructura y configuración

Elegir entre Artifact, MCP y CLI

No todos los resultados de Claude Code tienen la misma forma. Un informe HTML autocontenido puede vivir como Artifact nativo; un proyecto con CSS, imágenes y JavaScript locales necesita conservar su estructura; una aplicación de framework debe compilarse antes.

La elección correcta evita empaquetar de más una página simple y también evita intentar publicar código fuente como si ya fuera una web ejecutable.

Flujo reproducible con PreviewShip MCP

Configura el servidor MCP y pide a Claude una secuencia verificable: detectar el comando de build, ejecutarlo, confirmar que existe index.html, desplegar la carpeta resultante y abrir la URL.

Un buen prompt no dice solo “publica esto”. Especifica que la entrada debe ser el artifact listo para navegador y que la respuesta final debe incluir el enlace y el resultado de la verificación.

Construye primero si existe package.json y una aplicación de framework.
Despliega .html directamente cuando el archivo es autocontenido.
Despliega dist/build/out cuando hay múltiples assets.
No publiques secretos, archivos .env ni datos privados en una preview pública.

Prompt recomendado para Claude Code

Usa una instrucción concreta: “Ejecuta el build de producción, identifica la carpeta estática lista para navegador, despliega esa carpeta con PreviewShip, abre la URL para verificarla y devuelve el enlace en la respuesta final”.

Si Claude propone desplegar src, node_modules o el repositorio completo, corrige el flujo y exige la salida de build.

Fuentes oficiales

Los datos del producto y del flujo se verificaron en estas páginas oficiales el 2026-07-27.

FAQ

¿Claude Code puede compartir un Artifact sin PreviewShip?

Sí, en sesiones y planes compatibles puede publicar un Artifact nativo. PreviewShip es útil cuando necesitas archivos locales, carpetas estáticas, builds o una URL independiente mediante MCP/CLI.

¿Debo usar MCP o CLI?

Usa MCP cuando Claude debe ejecutar el despliegue como herramienta. Usa CLI cuando prefieres un comando explícito, salida JSON o integración con scripts.

¿Puedo desplegar un proyecto React sin compilar?

No. Ejecuta el build y despliega dist, build, out o la carpeta estática generada.

¿Claude debe comprobar la URL?

Sí. La tarea no termina al recibir un enlace: debe abrirlo o verificar su respuesta, assets y estado antes del handoff.