FilmoTvor.AI
Volver a los tutoriales

Apps

Crea una app funcional a partir de una frase — de la idea al código React

8 min de lecturaIntermedio/app-builder
Film Movie StudioRenderizar
Food Delivery App UINuevo proyecto
60%
frame_01.png1024²
RemezclarVariaciones
frame_02.png1024²
RemezclarVariaciones
frame_03.png1024²
RemezclarVariaciones

App Builder convierte texto simple en pantallas de app funcionales que puedes previsualizar directamente en un marco de dispositivo, editar y finalmente exportar como código ejecutable. No escribes ni una línea de código — describes para qué sirve la app y qué pantallas quieres, y la app planifica todo el recorrido, siembra datos realistas, construye cada pantalla y conecta la navegación. Funciona para teléfono (iOS/Android), tablet y escritorio (web). En esta guía iremos de una frase en el chat a un proyecto React y React Native terminado.

Qué necesitarás

  • FilmMovie Studio instalado (macOS o Windows).
  • Al menos un proveedor de generación configurado en Ajustes (para posibles imágenes en la app).
  • Una idea aproximada de tu app — para qué sirve y las pocas pantallas que necesita.

Paso a paso

  1. 1

    Abre el Workspace y crea un proyecto

    Inicia FilmMovie Studio, en el Launchpad haz clic en «Nuevo proyecto», ponle nombre (p. ej. «App de fitness») y confirma. Se abre el Workspace con el lienzo (Canvas) a la izquierda y el panel de chat a la derecha.

    Film Movie StudioRenderizar
    Habit Tracker — Mobile AppNuevo proyecto

    Film Movie Studio

    Una nueva forma de crear medios con IA

    Describe lo que quieres crear…

    SkillsModelos

    Escribe / para explorar skills de IA

    Short DramaE-commerceMusic VideoGamesDocumentary
    Consejo: Todo el App Builder vive en el chat — no hay herramientas de diseño que aprender. Tú describes y la app se ensambla ante ti.
  2. 2

    Describe tu idea de app con /app-builder

    En el campo de chat, elige el skill /app-builder y describe con tus propias palabras qué debe hacer la app, p. ej. «Un rastreador de fitness con un panel de inicio, una lista de entrenamientos y un perfil». No enumeres componentes — solo di para qué sirve la app y las 1–5 pantallas que quieres.

    Film Movie StudioRenderizar
    Bakery ordering appNuevo proyecto

    Film Movie Studio

    Una nueva forma de crear medios con IA

    Describe lo que quieres crear…

    SkillsModelos

    Escribe / para explorar skills de IA

    Short DramaE-commerceMusic VideoGamesDocumentary
    Consejo: Describe el propósito y las pantallas, no los botones y las tarjetas. La app elige por sí misma los componentes y el diseño adecuados.
  3. 3

    Elige el dispositivo — teléfono, tablet o escritorio

    La app pregunta qué formato construir y qué aspecto usar. Elige teléfono para una app iOS/Android, tablet, o escritorio para un panel web. Elige también un tema de color (p. ej. índigo, esmeralda, oscuro).

    Film Movie StudioRenderizar
    Cat-care appNuevo proyecto

    Film Movie Studio

    Una nueva forma de crear medios con IA

    Describe lo que quieres crear…

    SkillsModelos

    Escribe / para explorar skills de IA

    Short DramaE-commerceMusic VideoGamesDocumentary
    Consejo: Palabras como «panel» o «app web» significan escritorio; «iPad» significa tablet; de lo contrario, el valor por defecto es teléfono.
  4. 4

    Observa cómo aparece en el lienzo la tarjeta de app multipantalla

    La IA planifica las pantallas (p. ej. Inicio de sesión → Inicio → Perfil), siembra datos realistas y construye cada pantalla como un árbol de componentes. Una tarjeta de app cae en el lienzo con un marco de dispositivo y una vista previa en vivo de cada pantalla.

    Film Movie StudioRenderizar
    Pet profile appNuevo proyecto

    Arrastra una imagen aquí o haz clic para subir

    reference.png
  5. 5

    Haz clic en Vista previa y navega por las pantallas

    Haz clic en «Vista previa» en la tarjeta de app — se abre el marco del dispositivo. Toca botones, filas de listas y la navegación inferior para moverte entre pantallas igual que en una app real — la navegación ya está conectada.

    Film Movie StudioRenderizar
    Cinema booking appNuevo proyecto
    60%
    frame_01.png1024²
    RemezclarVariaciones
    frame_02.png1024²
    RemezclarVariaciones
    frame_03.png1024²
    RemezclarVariaciones
    frame_04.png1024²
    Generando… 80%
    RemezclarVariaciones
    Consejo: Los datos son datos sembrados reales, así que listas, gráficos y perfiles están llenos de contenido, no cajas grises vacías.
  6. 6

    Refina por el chat — añade una pantalla

    Escribe en el chat, p. ej. «Añade una pantalla de Ajustes con notificaciones y un botón de cerrar sesión». Aparece una nueva tarjeta de pantalla, conectada automáticamente a la navegación de las demás pantallas.

    Film Movie StudioRenderizar
    Game arcade appNuevo proyecto
    Ajustes
    CuentaAparienciaProveedoresUsoPrecios

    Proveedores

    kie.aisk-••••••••••••
    deAPIsk-••••••••••••
    OpenRoutersk-••••••••••••
    OpenAIPega la clave APIProbar
    ElevenLabsPega la clave APIProbar
    Z.AIPega la clave APIProbar
  7. 7

    Vincula datos y añade un formulario

    Pide, p. ej. «Añade un formulario de registro que guarde en users» o «Haz que el feed tire de una colección posts». La app declara modelos de datos y vincula listas y formularios, de modo que la entrada se captura y los feeds se llenan en vivo con datos reales directamente en la vista previa.

    Film Movie StudioRenderizar
    Hunting seasons appNuevo proyecto
    60%
    frame_01.png1024²
    RemezclarVariaciones
    frame_02.png1024²
    RemezclarVariaciones
    frame_03.png1024²
    RemezclarVariaciones
    frame_04.png1024²
    RemezclarVariaciones
    frame_05.png1024²
    RemezclarVariaciones
    frame_06.png1024²
    Generando… 61%
    RemezclarVariaciones
    Consejo: Las listas y los feeds provienen de colecciones, así que se ven llenos y se actualizan cuando envías un formulario.
  8. 8

    Exporta código React / React Native ejecutable

    Cuando estés satisfecho, pide la exportación. La app genera un proyecto Vite + React (web) ejecutable y un proyecto Expo + React Native en una carpeta que elijas. Ábrelo en tu editor y ejecútalo.

    Film Movie StudioRenderizar
    Infinite Photo VaultNuevo proyecto
    Render final1080p · MP4
    GuardarArchivos
    Consejo: Elige solo web para una app de escritorio, solo native para una app de teléfono, o ambos — por defecto se exportan los dos.

Qué obtienes

A partir de una frase tienes una app funcional de varias pantallas: pantallas planificadas, datos sembrados reales, navegación conectada y una vista previa en vivo en un marco de dispositivo — además de un proyecto React y React Native ejecutable listo para abrir en tu editor. El mismo patrón — describe la idea → elige el dispositivo → observa el lienzo → refina por el chat → exporta — funciona para teléfono, tablet y escritorio.

Consejos de expertos

  • Planifica todas las pantallas de antemano — di en un solo mensaje cada pantalla que quieres y la navegación se conecta correctamente.
  • Puedes adjuntar una captura de una app que te guste y pedir que reproduzca su diseño y sus colores.
  • Todo se ejecuta en vivo en la vista previa con datos sembrados — no necesitas backend hasta que pidas uno explícitamente al exportar.

Pruébalo tú mismo

FilmMovie Studio es una app de escritorio que te acompaña desde la idea hasta la exportación final. Descárgala y empieza a crear.

Obtener FilmMovie Studio

Más tutoriales

Primeros pasos

Tu primer proyecto: del Launchpad a la exportación final

Vídeo

Dirige un drama corto: de la idea a los episodios renderizados

E-commerce

Fotos de producto para e-commerce: principal, hero, detalle y lifestyle en minutos