How can app developers generate image and video assets with AI?

Install the FLORA MCP in your coding agent, such as Cursor, Claude Code or Codex, and ask for the assets from the same session where you write the app. The agent generates them in FLORA and downloads them into your repo. Our three onboarding illustrations and one 4-second looping clip cost $2.167, with each still done in 35 seconds or less.

At a glance

What you need

• The FLORA MCP installed in Cursor.
• Or in Claude Code.
• Or in Codex.
• A short spec for each asset: screen, size, style and what it shows.
• For product and engineering teams, FLORA's technology page covers how teams use FLORA.

Key features

• Assets in the editor: The agent that writes your code also generates and saves the images into your repo.
• Style references: Later screens take the first illustration as a reference, so the set stays in one style.
• Image and video together: Image models and video models such as Seedance 2.5 are reached through the same FLORA MCP.
• Prices in dollars: Every run reports its cost in USD, and the agent can ask for a quote before running.
• Canvas record: Each asset also lands on a FLORA canvas with its prompt, for the designer to review or rerun.

Best for

• Onboarding screens and empty states
• App store screenshot backgrounds and feature graphics
• Splash and onboarding animations
• Placeholder art that matches the final style while the app is in development
• Icons and illustrations for marketing pages that ship with the app

Step by step

1. Step 1: Ask for the first screen with the full style spec

   Describe the style once in detail: the look, the palette, the texture and where the empty space for the headline goes. The first image sets the style for every screen after it.

   Onboarding screen illustration for a plant-care mobile app: a hand holding a small watering can over a potted monstera on a windowsill. Flat editorial illustration with subtle paper grain, muted palette of sage, terracotta and warm off-white, soft shapes, generous empty space in the top third for a headline. No text, no UI elements.

2. Step 2: Make the other screens from the first

   Ask the agent to use the first image as the reference for the rest, and repeat the style words. In our run the agent sent both follow-on screens in one call.

   Second onboarding screen in exactly the same illustration style as the reference: same flat editorial look, paper grain, sage, terracotta and warm off-white palette, same line weight, generous empty space in the top third. New scene: a small potted fern on a windowsill with a soft beam of sunlight falling across it and a simple light meter dial beside the pot. No text, no UI elements.

3. Step 3: Animate one screen for the splash or onboarding

   Ask for a short, quiet motion with a static camera. The agent wires the image into a Seedance 2.5 video node on the FLORA canvas and runs it.

   Gentle looping motion for an app onboarding screen. Keep the flat illustration style, palette and composition exactly. The monstera leaves sway slightly, a thin stream of water pours from the watering can into the pot, and the hand tilts the can a little. Static camera, no cuts, no new objects, no text.

4. Step 4: Save into the repo and wire them in

   Ask the agent to download each file into your assets folder with a clear name, then reference them from the screens. Strip the audio from the clip and convert images to your app's formats in the same step.

   Download the three onboarding images and the clip into assets/onboarding/ as screen-1.png, screen-2.png, screen-3.png and screen-1.mp4, then strip the audio track from the mp4.

What happened when a coding agent made app assets with FLORA?

We ran this from Claude Code with the FLORA MCP on October 16, 2026. The first screen used t2i-gpt-image-2-5-flare at 9:16, quality high, resolution 1k: a hand watering a monstera on a windowsill in a flat, paper-grain style. It took 26 seconds and cost $0.055.

One flora_create_generations call then sent two more screens with i2i-gpt-image-2-5-flare at 9:16, the first screen wired in through reference_node_ids: a fern in a beam of sunlight with a light meter, and three potted plants on a shelf next to a phone. They finished in 33 and 35 seconds at $0.064 each. Both matched the palette, grain and line weight of the first screen.

For video, flora_add_to_canvas added a Seedance 2.5 node (i2v-gengateway-seedance-2-5-i2v, duration 4, resolution 720p, aspect ratio 9:16) wired to the first screen, and flora_run_canvas_nodes started it. FLORA's catalog estimated $2.48 for the default 5 seconds; the 4-second clip cost $1.984 and took 3 minutes 4 seconds. The agent downloaded it and checked it: 720 by 1280, 4.04 seconds, with an audio track. The style held across the whole clip and the hand tilts the can as asked. The run cost $2.167 in total.

What went wrong: the "light meter dial" on screen 2 came out looking like a small kitchen timer, and the clip's last frame does not match its first, so it jumps when looped. The fixes: describe the object by shape ("a round analog light meter with a needle") and rerun only that screen, and for the clip either play it once and hold on the last frame, or play it forward and then in reverse.

Agent

Claude Code with the FLORA MCP

Models

GPT Image 2.5 Flare (text-to-image, image-to-image), Seedance 2.5 image-to-video

Tools called

flora_create_generations, flora_list_generations, flora_add_to_canvas, flora_run_canvas_nodes

Cost

$0.183 for 3 images, $1.984 for the clip, $2.167 total

Time

26 to 35 s per image, 3 min 4 s for the clip

Generating assets from a coding agent or on the FLORA canvas: pros and cons

How do I keep a set of app illustrations consistent?

Make one screen first and use it as the reference for every other screen. Repeat the same style words in each prompt: the look, the palette, the texture and the line weight. Our two follow-on screens matched the first on all four.

Can the agent put the assets into my code?

Yes. A coding agent with file access downloads each output from its FLORA link into your project, and can then reference the files from your components, add them to an asset catalog or convert them to the formats your platform wants.

What should I check before shipping a generated asset?

Look at the files at the size and on the screens where they will ship.

• Objects read as what they are meant to be at phone size.
• No stray text or letters inside the image.
• Video clips have their audio removed if the screen is silent.
• Looping clips start and end on matching frames, or are set to play once.

Frequently asked questions