# El stack para construir y lanzar una app con IA > Cómo empezar con cada herramienta, publicar tu app y crear un video con Genjutsu. Abre cada herramienta para ver para qué sirve, cómo empezar y qué comprobar. Después encontrarás el tutorial de Genjutsu y cómo preparar una publicación en HeyMark. El *stack* es el conjunto de herramientas de la app. Elige las herramientas según lo que necesites construir: puedes empezar con un agente y añadir datos, pagos o correos cuando tu app los requiera. Pulsa una herramienta para ver los pasos. Claude Code y Codex convierten tus instrucciones en cambios dentro del proyecto: leen archivos, escriben código y ejecutan pruebas. El resultado es una app que puedes abrir y revisar. Instala uno de ellos, inicia sesión y abre la carpeta de tu proyecto. Describe qué quieres construir y pide que empiece por una función. Si ya tienes código, indícale qué debe conservar. Después, abre la app y prueba el cambio; si falla, comparte el error o una captura. En el video aparecen **Claude Opus 5.5** y **GPT Sol** como opciones de modelo. El modelo resuelve la tarea; Claude Code o Codex le permiten trabajar con los archivos y las herramientas del proyecto. [Empezar con Claude Code](https://code.claude.com/docs/en/overview) o [Codex](https://developers.openai.com/codex/quickstart). Conductor organiza el trabajo de los agentes sobre tu código. Puedes dedicar un espacio a cada tarea y revisar sus cambios por separado. Cada espacio tiene su propia rama de Git, que mantiene esos cambios separados de la versión principal hasta que los integres. Añade el repositorio de tu app y crea un workspace. Comprueba que la app pueda ejecutarse ahí, elige el agente y adjunta la descripción de la tarea, capturas o archivos que necesite. Cuando termine, abre la app, ejecuta las pruebas y revisa los archivos modificados antes de integrar el trabajo. La app de escritorio se instala en Mac. [Crear el primer workspace](https://www.conductor.build/docs/first-workspace). Supabase guarda los datos de tu app. También ofrece Auth para el registro y el inicio de sesión, y Storage para archivos como fotos o documentos. Usa las partes que necesites. Crea un proyecto y pide al agente que conecte tu app y configure las tablas donde se guardarán los datos. Si hay cuentas, añade reglas de acceso (RLS): definen qué puede leer o cambiar cada usuario. Guarda datos desde la app y recarga para comprobar que siguen ahí. Prueba con otra cuenta para verificar que los datos privados no sean visibles. [Tutorial de Supabase](https://supabase.com/docs/guides/getting-started/tutorials/with-react) y [reglas de acceso](https://supabase.com/docs/guides/database/postgres/row-level-security). Vercel aloja tu app para que otras personas puedan abrirla desde un enlace. Al conectarlo a GitHub, puede publicar nuevas versiones cuando subes cambios al código. Importa el repositorio y configura las variables de entorno: los valores que necesita la app para conectarse a otros servicios. Puedes pedir al agente que te indique cuáles faltan y dónde ponerlas. Para revisar cambios, usa un despliegue Preview y prueba la función principal desde su enlace. Comprueba quién tiene acceso antes de compartirlo. El despliegue Production es la versión que verán tus usuarios. [Conectar GitHub](https://vercel.com/docs/git) y [versiones de prueba y producción](https://vercel.com/docs/deployments/environments). Linear sirve para anotar qué falta construir, qué falla y qué harás primero. Cada tarea tiene una descripción, un responsable y un estado. Crea un proyecto para tu app. Añade una tarea por cambio y describe qué debería ocurrir al terminar. Si reportas un error, escribe los pasos para repetirlo y adjunta una captura. Entrega esa tarea al agente. Antes de marcarla como terminada, prueba el resultado en la app. [Crear tareas en Linear](https://linear.app/docs/creating-issues). Blacksmith ejecuta las pruebas y builds de GitHub Actions en sus propias máquinas. Sirve para acelerar esas comprobaciones cuando la espera empieza a frenar tu trabajo. Un build prepara el código de la app para ejecutarlo o publicarlo. Si ya usas GitHub Actions, conecta el repositorio a Blacksmith y sigue el [quickstart](https://docs.blacksmith.sh/introduction/quickstart) para cambiar `runs-on`: esa línea indica qué máquina ejecuta cada tarea automática. Sube un cambio y abre Actions en GitHub. Comprueba que las mismas pruebas y el build terminen correctamente, y compara su duración con las ejecuciones anteriores. Stripe gestiona los cobros de tu app. Puedes vender una compra puntual o una suscripción; Checkout es la página donde el usuario introduce sus datos y paga. Crea el producto y su precio en el entorno de prueba. Pide al agente que conecte Checkout desde el servidor y configure un webhook verificado: un aviso de Stripe que tu app usa para saber si debe activar o cambiar el acceso. Prueba un pago y una cancelación. Comprueba que el acceso se mantenga o termine según las condiciones del plan, y que un pago fallido no lo active. Después podrás pasar a cobros reales. [Guía de suscripciones](https://docs.stripe.com/billing/quickstart). Resend envía los correos que salen de tu app: una bienvenida, una confirmación o una notificación. Configuras cuándo enviarlos en el código y Resend se encarga del envío. Para enviar desde tu marca, añade un dominio propio. Resend te mostrará registros DNS que debes copiar en el proveedor del dominio para verificarlo. Después crea una API key, la credencial que usará tu servidor para enviar correos. Pide al agente que conecte el envío y haz una prueba a tu dirección. Revisa el remitente, el contenido, los enlaces y el estado de entrega. [Verificar el dominio](https://resend.com/docs/dashboard/domains/introduction) y [enviar el primer correo](https://resend.com/docs/send-with-nodejs). PostHog te ayuda a ver si las personas usan la función que construiste y dónde se detienen. La app le envía eventos: registros de acciones como abrir una pantalla o terminar un registro. Crea un proyecto e instala la integración que corresponda a tu app. Pide al agente que registre la acción que quieres medir y pruébala tú. Comprueba que llegue un evento por cada vez que la completas. En Product Analytics, crea un embudo con los pasos que debe seguir el usuario. Verás cuántas personas llegan a cada uno y dónde abandonan. [Instalación](https://posthog.com/docs/libraries) y [crear un embudo](https://posthog.com/docs/product-analytics/funnels). Dentro de Higgsfield, Genjutsu permite crear un video a partir de un clip de referencia, imágenes y un prompt. Para reemplazar un personaje usamos Motion transfer. Elige un video o un preset, adjunta el retrato de la persona y describe a quién quieres reemplazar. Revisa el costo antes de generar y comprueba el rostro y los movimientos al terminar. [El tutorial de abajo](#genjutsu) muestra el proceso con la foto de Nik y una escena de Spider-Man, con las grabaciones y el prompt que usamos. HeyMark conecta lo que planeas publicar con lo que ya publicaste y sus resultados. Al conectar tus redes sociales, trae tu contenido al calendario. Cada publicación reúne el video, el texto, las versiones y los comentarios del equipo; después puedes revisar cómo le fue. Para lanzar tu app, crea un borrador, adjunta el video y prepara el texto con Mark, el asistente de HeyMark. Puede consultar el contexto de tu marca y tus publicaciones anteriores. Revisa la propuesta, elige la red y programa la fecha. También puedes conectar HeyMark a Claude o ChatGPT para consultar publicaciones y métricas o preparar borradores desde el chat. Así trabajas con tus datos reales sin copiarlos a mano. [Ver cómo conectar Claude](/es/guides/conectar-claude-heymark). [Abrir HeyMark](https://app.heymark.ai) · [Preparar tu publicación](#lanzamiento) Las herramientas **amigables con agentes** permiten que el agente consulte su documentación y trabaje con ellas mediante código o comandos. [Vercel](https://vercel.com/docs/mcp) y [Supabase](https://supabase.com/docs/guides/ai-tools/mcp), por ejemplo, ofrecen conexiones MCP. Al conectarlas, revisa qué permisos estás dando al agente. Para presentar tu app, explica qué problema resuelve. Escribe lo que piensas sobre ese problema, cuéntalo a cámara o graba cómo se usa la app. También puedes probar videos con IA: aquí aprenderás a reemplazar un personaje con Genjutsu. Reemplazamos a Peter Parker por Nik en un clip de 16 segundos de Spider-Man. Mary Jane camina por la cafetería, resbala y Peter se gira para atrapar la bandeja. Usamos un preset de Genjutsu y este retrato: Necesitas acceso a Genjutsu en Higgsfield, un video propio o un preset, un retrato y ChatGPT o Claude para preparar el prompt. ### Elige el video en Genjutsu ### Abre Genjutsu Entra a [Higgsfield](https://higgsfield.ai/), inicia sesión y selecciona **Genjutsu** en el menú. También puedes [abrir Genjutsu directamente](https://higgsfield.ai/ai/video?model=genjutsu). ### Carga tu video o elige un preset Usa **Añade un video de referencia** para cargar tu archivo o busca una escena en **Biblioteca de Motion**. Para este ejemplo elegimos el preset de Spider-Man. Selecciona **Motion transfer** (Transferencia de movimiento), el modo que usamos en este ejemplo. ### Prepara el prompt con ChatGPT o Claude Adjunta el **MP4 original** y el **retrato**. Aquí usamos `Nik_retrato.png` y el recorte que empieza cuando Mary Jane camina con la bandeja y termina cuando Peter la atrapa. Si tu chat no admite el video, sube capturas del inicio, la acción y el final, y describe lo que ocurre entre ellas. Puedes consultar los formatos admitidos en [ChatGPT](https://help.openai.com/en/articles/8400551-chatgpt-image-inputs-faq) y [Claude](https://support.claude.com/en/articles/8241126-upload-files-to-claude). #### Nuestro pedido Le pasamos este borrador a ChatGPT para que lo corrigiera. `image.png` era la foto de Nik: #### Nuestro borrador inicial para ChatGPT ```text Replace the male character (Peter Parker / Tobey Maguire) sitting at the school cafeteria table in video with the young man from image.png. The replacement character should keep the exact same facial features, short buzz-cut hairstyle, and physical appearance as the man in image.png, while perfectly matching the male character's movements, reactions, catches, facial expressions, timing, lighting, and clothing in photo. Maintain the exact original female character, cafeteria environment, camera angles, and tray-catching action from video; ``` #### El prompt corregido ChatGPT corrigió dos detalles: Nik lleva el pelo corto, con textura y más largo arriba, y la ropa debe salir del video. **La foto define la identidad y el pelo; el video define la ropa y la acción.** #### Prompt final de ChatGPT para Genjutsu ```text Edit the provided 16-second cafeteria clip. Replace ONLY Peter Parker, the male character seated at the cafeteria table, with the young man shown in the attached reference portrait. This is a precise character replacement within the original footage, NOT a recreation or reinterpretation of the scene. IDENTITY REFERENCE: Use the portrait exclusively for the replacement man's facial identity and hairstyle. Preserve his recognizable facial features, face shape, eyes, eyebrows, nose, lips, jawline, facial hair, and short dark hairstyle with a textured, slightly longer top and shorter sides. Do not give him a buzz cut. Maintain the same identity consistently across every frame, camera angle, head turn, and partial occlusion. PERFORMANCE AND CLOTHING: Use the source video as the exact reference for body position, head movements, eye direction, reactions, facial expressions, hand movements, and timing. The replacement must perform the original character's actions exactly as they occur, rather than maintaining the reference portrait's smile or pose. Keep the original character's clothing from the VIDEO unchanged. Do not transfer the portrait's shirt or necklace. Maintain natural head-to-body proportions and seamless alignment with the neck and body. PRESERVE THE ORIGINAL ACTION: Keep the existing sequence exactly as filmed: Mary Jane walks through the cafeteria carrying her tray, slips, and the male character turns and reacts, catching and holding the tray. Preserve every original interaction, the tray's trajectory and orientation, the falling food and objects, and the precise timing and positions of all catches. Do not add, remove, repeat, slow down, or reinterpret any action. EVERYTHING ELSE MUST REMAIN UNCHANGED: Preserve Mary Jane exactly as she appears in the source video, including her face, hair, clothing, movements, and expressions. Do not replace or modify any other person. Keep the cafeteria, background students, tables, props, framing, camera movement, cuts, shot order, and original audio unchanged. Match the source footage's lighting, shadows, color grading, skin shading, focus, motion blur, and film texture. Preserve correct occlusion wherever hands, hair, the tray, or other people overlap the replacement character. The result must look like the exact original 16-second film clip, with only the male character's identity changed. No face morphing, identity drift, flickering, oversized head, altered hands, additional fingers, redesigned props, or new shots. ``` Para otra escena, cambia la duración, el personaje y la acción. El prompt pide conservar la imagen y el audio originales; revisa que el resultado lo cumpla. ### Vuelve a Higgsfield y genera ### Sube el retrato Con el video o preset seleccionado, carga la foto en **Añade tus personajes, productos o ropa**. Debes adjuntarla también en Higgsfield. ### Pega el prompt Activa **Prompt** y pega el texto corregido. Si adjuntas varias fotos, escribe **@** para vincular cada imagen con el personaje que reemplaza. ### Genera Revisa la calidad y el costo que muestra tu cuenta. Pulsa **Generar** y espera el resultado. ### Revisa el resultado Reproduce el clip completo. Pausa cuando Peter gira la cabeza y atrapa la bandeja: comprueba el parecido con Nik, las manos y la posición de la bandeja. Revisa también que Mary Jane, el fondo y el audio se mantengan. Si falla algo, corrige ese punto en el prompt y genera otra versión. Por ejemplo: «Al girar para atrapar la bandeja, el rostro deja de parecerse a Nik. Conserva su identidad durante ese giro». Compara las versiones y descarga la que vas a usar. Lleva el video a [HeyMark](https://app.heymark.ai) y crea un borrador para la red donde vas a presentar tu app. Puedes escribir el texto tú o pedirle a Mark que lo prepare usando el contexto de tu marca y tus publicaciones anteriores. Adjunta el video y dale el enlace de la app. Este pedido le indica qué preparar y deja la publicación pendiente de tu revisión: #### Prepara el borrador con Mark ```text Revisa el contexto de mi marca y mis publicaciones recientes. Prepara un borrador para [red social] que presente [nombre de la app] a [tipo de usuario]. La app permite [función] y resuelve [problema]. Usa el video adjunto y este enlace: [URL de la app]. Escribe el texto con el tono de mi marca e invita a [acción que quiero que prueben]. Usa solo las funciones que te indiqué; pregúntame si falta algún dato. Guárdalo como borrador para que yo lo revise antes de programarlo. ``` Abre el borrador, revisa el video y el texto, y elige la fecha de publicación. Si trabajas con un equipo, pueden comentar sobre esa misma pieza antes de programarla. Después comprueba que se haya publicado y revisa sus métricas y comentarios. También puedes hacer ese pedido desde Claude con HeyMark conectado. [Aquí está la guía de conexión](/es/guides/conectar-claude-heymark). Revisa las métricas de la publicación en **HeyMark**. En **PostHog**, comprueba cuántas personas completan la acción principal de tu app. Revisa en qué paso se detienen y qué te cuentan al probarla. Anota en Linear el problema que encuentres y pídele al agente que lo corrija. ## Ahora ponlo a trabajar. HeyMark aprende las reglas que acabas de escribir, y con eso planifica, redacta, programa y responde en esa voz. Tú apruebas. [Empezar gratis](https://app.heymark.ai) · [Ver cómo funciona](https://heymark.ai/es/#product) ## Recursos para desarrolladores y agentes - [Documentación MCP de HeyMark](https://heymark.ai/es/mcp/) - [llms.txt](https://heymark.ai/llms.txt) - [Contenido completo del sitio para modelos de lenguaje](https://heymark.ai/llms-full.txt) - Endpoint del protocolo MCP: `POST https://mcp.heymark.ai` - Metadatos OAuth del recurso protegido: [/.well-known/oauth-protected-resource](https://mcp.heymark.ai/.well-known/oauth-protected-resource) - MCP server card: [/server-card](https://mcp.heymark.ai/server-card)