Cómo generar imágenes y videos con Claude Code para una web

Para generar imágenes y videos con Claude Code, conéctalo a un servicio externo mediante MCP. Pídele que elija un modelo compatible, calcule el coste de la petición exacta y espere tu aprobación. Genera primero la imagen, utiliza su ID de generación completada como primer fotograma del video y descarga ambos archivos en tu proyecto web.

El ejemplo es la página de inicio de una cafetería: una imagen cálida del interior, un movimiento de cámara suave y texto legible al lado. Puedes adaptarlo a un portafolio o una página de producto. Relaciona la imagen, el video y su posición en la página mediante nombres de archivo e ID explícitos.

¿Claude Code puede generar imágenes y videos?

Claude Code organiza la tarea y modifica el código de la web. MCP le da acceso a herramientas externas. FlyAIgh envía la petición al modelo de imagen o video elegido y devuelve la tarea y el resultado. Escribir SVG o HTML y comprender una imagen subida son capacidades distintas de generar una fotografía o un video.

Esta diferencia ayuda a elegir la solución. Para un icono sencillo, un gráfico o una animación CSS, puede bastar el código. Para una escena fotográfica o un movimiento de cámara generado, utiliza un modelo multimedia adecuado. Conectar MCP no hace que todos los modelos admitan las mismas entradas, duración o resolución.

Conecta las herramientas de generación

Necesitas Claude Code instalado y con la sesión iniciada, además de una suscripción activa a FlyAIgh Basic o superior. El Starter Pack por sí solo no incluye acceso MCP. El coste de Claude Code y los créditos de generación de FlyAIgh se cobran por separado. En FlyAIgh, abre Herramientas → MCP, crea una clave API y, si quieres, establece un límite diario de créditos.

Ejecuta el comando de conexión HTTP de abajo en tu terminal y sustituye el marcador por tu clave. Trata la configuración guardada como un secreto: no la subas al repositorio ni incluyas la clave en el código de la web. La guía de conexión MCP de FlyAIgh enlazada al final contiene las instrucciones actuales. En Claude Code, abre /mcp para comprobar la conexión; claude mcp list también muestra los servidores configurados.

claude mcp add --transport http flyaigh https://www.flyaigh.com/api/mcp \
  --header "Authorization: Bearer YOUR_FLYAIGH_API_KEY"

Antes de generar, pide a Claude Code que llame a get_balance y list_models. Elige el ID del modelo y sus parámetros a partir de los resultados, sin inventar nombres. Para usar una foto propia, llama a upload_file; si devuelve una URL de subida firmada, transfiere allí el contenido del archivo antes de utilizar file_id. Una ruta local o una URL de imagen cualquiera no sustituye ese ID.

Crea una imagen para un lugar concreto de la página

Empieza por el diseño de la página, no solo por un adjetivo de estilo. Decide dónde irá la imagen, su proporción, la posición del sujeto y el espacio libre necesario. Este ejemplo usa una imagen 16:9 en un panel multimedia y mantiene el título como HTML al lado. Así el texto sigue siendo editable y resulta más legible en un móvil.

Solicita los modelos de imagen disponibles y un presupuesto para la configuración elegida. Los precios de list_models son ejemplos con parámetros predeterminados; quote calcula la petición concreta. Confírmala antes de ejecutar generate_image. Cambiar el modelo, la resolución, la calidad o las referencias puede cambiar el coste.

Cuando get_job indique que ha terminado, revisa la imagen antes de animarla. Comprueba la composición, las letras no deseadas, los objetos inventados y el encuadre en pantallas estrechas. Guarda el ID de la imagen aprobada junto con su instrucción y modelo. Si hay varias versiones, elige una explícitamente: la más reciente no es necesariamente la aprobada.

Convierte la imagen aprobada en un video

Tras aprobar la imagen, elige un modelo de video compatible con i2v. Pasa el ID de la generación de imagen completada como first_frame. Esto vincula el video a la imagen elegida; una petición solo de texto que describa una escena parecida generaría otra escena. Solicita un presupuesto con la duración, resolución, proporción y sonido seleccionados antes de generar.

Describe el movimiento por separado: un avance lento de cámara, vapor suave y la taza inmóvil. Empieza con la duración más corta compatible que sirva para la página. Evita pedir un cambio completo de escena si buscas un recurso tranquilo para la portada. El primer fotograma guía la generación, pero no fija cada píxel de los objetos o logotipos.

Consulta el progreso con get_job y el ID de la tarea de video recibida. Al terminar, mira el clip completo y escucha el sonido si lo incluye. Revisa la forma de la taza, los bordes, el movimiento y el último fotograma. Una tarea completada puede tener defectos visuales. Si vas a reproducirla en bucle, comprueba el salto del final al principio.

Descarga los archivos y colócalos en tu web

Descarga la imagen aprobada y el video terminado. Los enlaces de descarga de archivos privados que devuelve get_job caducan después de 1 hora; vuelve a llamar a get_job si necesitas otro enlace. No uses una URL firmada temporal como dirección permanente de tu web. Conserva la relación entre los ID de imagen y video, la instrucción, el modelo y los nombres finales de archivo.

En Next.js, los archivos de public/media se sirven desde /media. En otros frameworks, utiliza su directorio de recursos estáticos o tu propia CDN. El ejemplo supone un póster JPEG real llamado hero-poster.jpg y un MP4 reproducible en navegador llamado hero.mp4. Convierte los archivos si hace falta: cambiar .png por .jpg no convierte su contenido. No pongas claves API ni llamadas de generación en la página pública.

El HTML de ejemplo incluye controles nativos, una imagen de portada y reproducción iniciada por el usuario. preload="none" evita solicitar el video de antemano, aunque el comportamiento depende del navegador. En pantallas estrechas, los elementos se apilan y el texto queda separado. En React JSX, usa className, playsInline y las formas correspondientes de los atributos.

<section class="hero">
  <div>
    <h1>Your page heading</h1>
    <p>Your introduction</p>
  </div>
  <video controls playsinline preload="none"
    poster="/media/hero-poster.jpg"
    width="1280" height="720">
    <source src="/media/hero.mp4" type="video/mp4">
    <a href="/media/hero.mp4">Download video</a>
  </video>
</section>
<style>
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2rem;
    align-items: center;
  }
  .hero video {
    display: block;
    width: 100%;
    height: auto;
  }
  @media (max-width: 48rem) {
    .hero { grid-template-columns: minmax(0, 1fr); }
  }
</style>

Controla las revisiones y el gasto

Aprueba cada generación por separado y compara el presupuesto con el saldo y el límite de la clave. El límite diario ayuda a controlar el gasto, pero no hace gratuitas las revisiones. Si está disponible, expected_credits protege frente a cambios del presupuesto; no es un presupuesto global del proyecto.

Si no sabes si una petición se envió correctamente, consulta primero la tarea existente. Reutilizar idempotency_key con la misma petición durante 24 horas evita duplicados; cambiar los parámetros con esa clave produce un conflicto. Una nueva versión creativa es otra petición y puede consumir créditos. Un clip generado correctamente que no te gusta no equivale a una tarea fallida.

• Sin conexión: revisa /mcp, el endpoint HTTP, la clave API y la suscripción activa requerida.
• Referencia rechazada: utiliza una imagen completada de tu cuenta o un file_id cuya subida haya terminado. En i2v, pásalo en first_frame.
• El recurso desaparece: renueva el enlace caducado con get_job y aloja el archivo en una ruta estable; no lo vuelvas a generar.
• Problemas de reproducción o recorte: comprueba el formato, la respuesta de red, las dimensiones en móvil y el CSS. Un recorte cover puede ocultar parte del sujeto.

Fuentes y guías relacionadas

La distinción entre capacidades sigue la documentación de Anthropic; los nombres de herramientas y referencias siguen la implementación actual de FlyAIgh MCP. El ejemplo web utiliza el comportamiento estándar de video HTML. Consulta las opciones y presupuestos actuales al ejecutar el proceso.

• Claude: capacidades de generación de imágenes
• Claude Code: conectar herramientas mediante MCP
• FlyAIgh: configuración MCP y herramientas
• MDN: el elemento de video HTML
• Animar una imagen en FlyAIgh
• Preparar imágenes de referencia útiles
• Crear un video de producto a partir de fotos