L'App Builder transforme du texte simple en écrans d'appli fonctionnels que vous pouvez prévisualiser directement dans un cadre d'appareil, modifier et enfin exporter en code exécutable. Vous n'écrivez pas une ligne de code — vous décrivez à quoi sert l'appli et quels écrans vous voulez, et l'app planifie tout le parcours, sème des données réalistes, construit chaque écran et câble la navigation. Cela fonctionne pour téléphone (iOS/Android), tablette et bureau (web). Dans ce guide, nous passerons d'une phrase dans le chat à un projet React et React Native fini.
Ce dont vous aurez besoin
- FilmMovie Studio installé (macOS ou Windows).
- Au moins un fournisseur de génération configuré dans les Réglages (pour d'éventuelles images dans l'appli).
- Une idée approximative de votre appli — à quoi elle sert et les quelques écrans dont elle a besoin.
Étape par étape
- 1
Ouvrir le Workspace et créer un projet
Lancez FilmMovie Studio, dans le Launchpad cliquez sur « Nouveau projet », nommez-le (p. ex. « Appli fitness ») et validez. Le Workspace s'ouvre avec le canevas (Canvas) à gauche et le panneau de chat à droite.
Film Movie StudioRenduHabit Tracker — Mobile AppNouveau projetLaunchpadHubTous les projetsRécents
project 1
project 2
project 3RéglagesFilm Movie Studio
Une nouvelle façon de créer des médias avec l'IA
Décrivez ce que vous voulez créer…
SkillsModèlesTapez / pour explorer les skills IA
Short DramaE-commerceMusic VideoGamesDocumentaryAstuce: Tout l'App Builder vit dans le chat — aucun outil de design à apprendre. Vous décrivez, et l'appli se construit devant vous. - 2
Décrire votre idée d'appli avec /app-builder
Dans le champ de chat, choisissez le skill /app-builder et décrivez avec vos mots ce que l'appli doit faire, p. ex. « Un tracker fitness avec un tableau de bord d'accueil, une liste d'entraînements et un profil ». N'énumérez pas les composants — dites simplement à quoi sert l'appli et les 1 à 5 écrans que vous voulez.
Film Movie StudioRenduBakery ordering appNouveau projetLaunchpadHubTous les projetsRécents
project 1
project 2
project 3RéglagesFilm Movie Studio
Une nouvelle façon de créer des médias avec l'IA
Décrivez ce que vous voulez créer…
SkillsModèlesTapez / pour explorer les skills IA
Short DramaE-commerceMusic VideoGamesDocumentaryAstuce: Décrivez l'objectif et les écrans, pas les boutons et les cartes. L'appli choisit elle-même les bons composants et la mise en page. - 3
Choisir l'appareil — téléphone, tablette ou bureau
L'appli demande quel format construire et quel look utiliser. Choisissez téléphone pour une appli iOS/Android, tablette, ou bureau pour un tableau de bord web. Choisissez aussi un thème de couleur (p. ex. indigo, émeraude, sombre).
Film Movie StudioRenduCat-care appNouveau projetLaunchpadHubTous les projetsRécentsproject 1project 2
project 3RéglagesFilm Movie Studio
Une nouvelle façon de créer des médias avec l'IA
Décrivez ce que vous voulez créer…
SkillsModèlesTapez / pour explorer les skills IA
Short DramaE-commerceMusic VideoGamesDocumentaryAstuce: Des mots comme « tableau de bord » ou « appli web » signifient bureau ; « iPad » signifie tablette ; sinon, le téléphone est par défaut. - 4
Voir la carte d'appli multi-écrans apparaître sur le canevas
L'IA planifie les écrans (p. ex. Connexion → Accueil → Profil), sème des données réalistes et construit chaque écran comme un arbre de composants. Une carte d'appli tombe sur le canevas avec un cadre d'appareil et un aperçu en direct de chaque écran.
Film Movie StudioRenduPet profile appNouveau projetFichiersframe_1frame_2frame_3Glissez une image ici, ou cliquez pour téléverser
reference.png - 5
Cliquer sur Aperçu et naviguer entre les écrans
Cliquez sur « Aperçu » sur la carte d'appli — le cadre d'appareil s'ouvre. Touchez les boutons, les lignes de liste et la navigation du bas pour passer d'un écran à l'autre exactement comme dans une vraie appli — la navigation est déjà câblée.
Film Movie StudioRenduCinema booking appNouveau projetFichiersframe_1frame_2frame_3frame_460%frame_01.png1024²RemixerVariantesframe_02.png1024²
RemixerVariantesframe_03.png1024²
RemixerVariantesframe_04.png1024²
Génération… 80%RemixerVariantesAstuce: Les données sont de vraies données semées, donc listes, graphiques et profils sont remplis de contenu, pas des cases grises vides. - 6
Affiner via le chat — ajouter un écran
Tapez dans le chat, p. ex. « Ajoute un écran Réglages avec des notifications et un bouton de déconnexion ». Une nouvelle carte d'écran apparaît, automatiquement reliée à la navigation des autres écrans.
Film Movie StudioRenduGame arcade appNouveau projetRéglagesCompteApparenceFournisseursUtilisationTarifsFournisseurs
kie.aisk-••••••••••••deAPIsk-••••••••••••OpenRoutersk-••••••••••••OpenAIColler la clé APITestElevenLabsColler la clé APITestZ.AIColler la clé APITest - 7
Lier des données et ajouter un formulaire
Demandez, p. ex. « Ajoute un formulaire d'inscription qui enregistre dans users » ou « Fais que le fil tire d'une collection posts ». L'appli déclare des modèles de données et lie listes et formulaires, de sorte que la saisie est capturée et les fils se remplissent en direct depuis de vraies données dans l'aperçu.
Film Movie StudioRenduHunting seasons appNouveau projetFichiersframe_1frame_2frame_3frame_4frame_5frame_660%frame_01.png1024²RemixerVariantesframe_02.png1024²RemixerVariantesframe_03.png1024²
RemixerVariantesframe_04.png1024²
RemixerVariantesframe_05.png1024²
RemixerVariantesframe_06.png1024²
Génération… 61%RemixerVariantesAstuce: Les listes et les fils proviennent de collections, ils paraissent donc remplis et se mettent à jour quand vous soumettez un formulaire. - 8
Exporter du code React / React Native exécutable
Quand vous êtes satisfait, demandez l'export. L'appli génère un projet Vite + React (web) exécutable et un projet Expo + React Native dans un dossier que vous choisissez. Ouvrez-le dans votre éditeur et lancez-le.
Film Movie StudioRenduInfinite Photo VaultNouveau projetFichiersframe_1frame_2frame_3Rendu final1080p · MP4EnregistrerFichiersAstuce: Choisissez web seul pour une appli de bureau, native seul pour une appli téléphone, ou les deux — les deux sont exportés par défaut.
Ce que vous obtenez
À partir d'une phrase, vous avez une appli fonctionnelle multi-écrans : écrans planifiés, vraies données semées, navigation câblée et aperçu en direct dans un cadre d'appareil — plus un projet React et React Native exécutable prêt à ouvrir dans votre éditeur. Le même schéma — décrire l'idée → choisir l'appareil → observer le canevas → affiner via le chat → exporter — fonctionne pour téléphone, tablette et bureau.
Conseils de pro
- Planifiez tous les écrans à l'avance — indiquez chaque écran voulu dans un seul message et la navigation est câblée correctement.
- Vous pouvez joindre une capture d'une appli qui vous plaît et demander d'en reproduire la mise en page et les couleurs.
- Tout tourne en direct dans l'aperçu avec des données semées — aucun backend nécessaire tant que vous n'en demandez pas un explicitement à l'export.
Essayez par vous-même
FilmMovie Studio est une application de bureau qui vous accompagne de l'idée à l'export terminé. Téléchargez-la et commencez à créer.
Obtenir FilmMovie Studio