DEV Community

Cover image for De Claude Code a una URL pública: Artifact nativo, MCP o CLI
Neurobin
Neurobin

Posted on

De Claude Code a una URL pública: Artifact nativo, MCP o CLI

#claude #mcp #webdev #spanish

Claude Code puede terminar una tarea de frontend de tres formas distintas:

  1. publicar un Artifact nativo
  2. guardar un archivo HTML local
  3. crear o modificar un proyecto que necesita build

El camino para compartir el resultado no debería ser el mismo en los tres casos.

Cuándo usar un Artifact nativo

Un Artifact de Claude Code encaja bien cuando el resultado es una sola página autocontenida y debe seguir vinculada a la sesión.

Claude puede publicar y actualizar esa página dentro de las condiciones disponibles para el plan y la organización.

Antes de elegirlo, revisa las restricciones oficiales:

  • una sola página
  • Content Security Policy estricta
  • límites para recursos externos
  • sin backend convencional
  • límite de tamaño renderizado

Si el resultado cabe de forma natural en esas condiciones, no hace falta exportarlo solo por exportarlo.

Cuándo usar MCP

PreviewShip MCP encaja cuando Claude debe completar todo el flujo:

  1. ejecutar el build
  2. identificar la carpeta estática
  3. desplegar el artifact
  4. verificar la URL
  5. devolver el enlace

El prompt recomendado es:

Ejecuta el build de producción, identifica la salida estática lista
para navegador, despliega esa carpeta con PreviewShip, abre la URL
para verificarla y devuelve el enlace en la respuesta final.
Enter fullscreen mode Exit fullscreen mode

Esto evita que el Agent suba src, node_modules o el repositorio completo.

Cuándo usar CLI

CLI es mejor cuando quieres ver y controlar el comando:

npx previewship deploy ./dist --json
Enter fullscreen mode Exit fullscreen mode

También funciona con un archivo individual:

npx previewship deploy ./report.html --json
Enter fullscreen mode Exit fullscreen mode

La salida JSON facilita capturar la URL desde un script o una tarea automatizada.

Regla rápida

Resultado Camino
Página autocontenida de la sesión Claude Artifact
Archivo .html local Upload o CLI
index.html con assets Carpeta/ZIP o MCP
React/Vue/Vite Build y luego MCP/CLI
Backend y base de datos Plataforma de producción

La guía completa en español:

https://previewship.com/es/guides/deploy-from-claude-code?utm_source=devto&utm_medium=community&utm_campaign=core_content_cluster_0727&utm_content=article_es_01_claude_code

No se trata de elegir una herramienta universal.

Se trata de publicar cada artefacto en la superficie que representa correctamente su forma y su ciclo de revisión.

Top comments (0)