How to turn a storyboard into a finished training module

Last updated 2026-08-25 · 7 min read

What is the short version?

A storyboard written for an authoring tool is already a specification: nine screens, each with its text, its layout and its narration. Building it as a video means rendering the screens rather than animating them, which is why a browser turns out to be the right tool.

1. Go to Vizard Agent and paste the storyboard.
2. Say the target length and how many screens.
3. Say the pace, and whether you need a slower version too.

What do you need before you start?

A storyboard. Vizard Agent writes nothing you have not specified, which is the point of this format: the learning design is yours and the production is the part being handed over. Saying the pace matters, because a module read at social-video speed is unusable for training.

• The storyboard. Screen by screen, with the on-screen text.
• The narration. Written per screen, or Vizard Agent writes it from the text.
• The length. Total, or per screen.
• The pace. Training pace, not social pace.
• The shape. Vertical for mobile micro-learning.

What do you type into Vizard Agent?

Paste the storyboard exactly as it was written. Vizard Agent treats every screen as its own scene with its own narration and its own timing, so the document you already produced for the production team works as the brief without any rewriting at all.

Prompt

Variants worth knowing:

• A slower second version. With pauses between points, for learners.
• Interface sound effects. They mark progression through a module.
• A build reference. For a production team working in an authoring tool.

What does Vizard Agent actually do?

Here is the order Vizard Agent worked in on a real training module. The method it settled on is unusual and worth knowing about: rather than animating slides in a video tool, Vizard Agent wrote each screen as markup and then recorded a browser displaying it.

1. Checks the available tools and reads the explainer and motion templates.
2. Checks the installed engines, including the browser automation libraries.
3. Tests a headless browser launch to confirm the approach will work.
4. Searches for a voice and background music suited to a training register.
5. Generates the narration in two batches covering all nine screens, and probes their durations.
6. Generates interface sound effects for the transitions between screens.
7. Renders a test preview of screen one and inspects its layout before building the rest.
8. Generates the markup for all nine screens and records each one with the browser, muxing the audio.
9. Reviews a nine-screen contact sheet, refines the layout and centring, re-renders in high definition, then produces a second version with the audio slowed and breathing pauses added between points.

Step 8 is the technique worth stealing. A screen of text and a diagram is a web page, and rendering it in a browser gives crisp type at any resolution without anyone building it in a video tool first.

What does the result look like?

From the run this page is written from, probed on the delivered file: 1080x1920, H.264, 60fps, 111.72 seconds, AAC audio. Vertical at sixty frames per second, just under two minutes for the faster cut, nine screens rendered from markup, narrated, with interface sounds and a music bed.

Sixty frames per second is unusual for an explainer and correct here, because screen transitions and interface motion look noticeably smoother at that rate, which matters when the whole video is made of moving text and diagrams.

When does this not work well?

This format renders exactly what your storyboard specifies, which is a strength when the learning design is sound and a limitation when it is not. Vizard Agent produces the module and does not evaluate the pedagogy behind it.

• A weak storyboard produces a weak module. Vizard Agent builds the design you supply.
• This is not an authoring tool. There is no branching, no quiz scoring and no learner tracking.
• Compliance training has requirements. Records, assessment and accessibility may all be mandated.
• Text-heavy screens need pacing. Which is why the slower version exists.
• Nine screens is a module. A full course is many of these rather than one long file.

How do you fix a result that came back wrong?

Name the screen. Vizard Agent keeps the markup for every screen, the narration segments, the recordings and both paced versions, so changing a screen's layout or its wording is a re-render of that screen rather than the whole module.

• "Screen four is too crowded." The markup is edited and that screen re-recorded.
• "It runs too fast for our learners." The slower version, as this run delivered.
• "The narration says something the screen does not." Corrected and re-recorded.

How does Vizard Agent compare to doing it yourself?

By hand this means building nine slides in an authoring tool, recording narration separately, and timing them together. Getting crisp text at full resolution is the part that fights you, because video tools are built for footage and treat type as an image rather than as type.

Common questions

Why two versions at different speeds? Because the pace that suits a review meeting is too fast for someone learning the material. Vizard Agent produced a faster cut and a second one with breathing pauses written between the points, so the same module serves both audiences.

Do I need to design the screens? Only in the storyboard. Vizard Agent builds them from your screen-by-screen description.

Can Vizard Agent write the narration? Yes, from the on-screen text, and supplying your own gives you more control.

How many screens fit in a module? Nine worked here at around two minutes. A longer course is several modules.

Can Vizard Agent make a slower version? Yes, with pauses written between the points rather than the whole thing simply stretched.

Why render the screens in a browser? Because a training screen is text, layout and a diagram, which is exactly what a browser is best at. It gives sharp type at any resolution and lets a layout be fixed by editing markup rather than by rebuilding a slide.

Is this a replacement for an authoring tool? No. There is no branching, no scoring and no tracking. It produces the video, not the course.

Does Vizard Agent add sound effects? Yes, interface sounds on the screen transitions, measured against the narration.

Can Vizard Agent match our brand? Yes. The screens are markup, so colours and typefaces are straightforward to specify.

Does this work for other document formats? Yes. Any screen-by-screen specification — a script, a slide outline, a spec document — builds the same way.

Does Vizard Agent check the finished module? Yes. It reviews a contact sheet of all nine screens and analyses the pacing and sync on both versions.