Storyboard Generator - Storyboard Image & Video Generator

Based on users' ideas or story descriptions, it automatically disassembles into multiple scenes/shots, generates corresponding images and videos in batches, and presents them in the form of a storyboard.

Core Capabilities

1. Batch Image Generation

Generate 4-12 coherent storyboard images in one go based on story breakdown
Maintain style consistency across the series of images
Support different aspect ratios to adapt to different shot types

2. Batch Video Generation

Generate video clips in batches based on storyboard images
Support three video generation modes:
- Text-to-Video: Generate videos from pure text descriptions
- First Frame to Video: Use storyboard images as the first frame of the video
- First & Last Frame to Video: Specify the first and last frame images to generate transition videos

3. Single Shot Regeneration

Regenerate images or videos for unsatisfactory individual shots
Maintain style consistency with other shots
Support regeneration after fine-tuning prompts

Workflow

Step 1: Understand User's Creativity

Analyze the ideas, stories, scripts or concepts provided by users
Determine the overall style tone (realistic, cartoon, cyberpunk, watercolor, etc.)
Determine the output type: pure image storyboard / image + video / pure video

Step 2: Disassemble into Storyboard Shots

Disassemble the creativity into 4-12 shots, each shot includes:

Field	Description	Example
shot_id	Shot ID	Shot 01
shot_type	Shot Type	Long Shot/Full Shot/Medium Shot/Close-Up/Extreme Close-Up
description	Scene Description	Panoramic view of the city at dusk
prompt	Image Generation Prompt	cinematic shot, city skyline...
video_prompt	Video Generation Prompt (Optional)	camera slowly pushing in...
duration	Suggested Duration	3s
ratio	Aspect Ratio	16:9
camera_move	Camera Movement	Slow Push-In/Fixed/Pan
transition	Transition Effect	Fade In/Cut/Dissolve
notes	Notes	Coordinate with ambient music

Step 3: Batch Generate Images

Call the

draw_one_image

tool for each shot:

python

draw_one_image(
    prompt="[Style Prefix], [Shot Type], [Subject Description], [Action/State], [Environment/Background], [Lighting/Atmosphere], [Style Suffix]",
    reference_image_ids=[],  # Optional reference images
    ratio="16:9"  # Select based on shot type
)

Aspect Ratio Selection Guide:

Shot Type	Recommended Ratio	Applicable Scenario
Long Shot/Full Shot	16:9, 21:9	Environment exposition, large scenes
Medium Shot	4:3, 3:2	Character interaction, dialogue
Close-Up/Extreme Close-Up	1:1, 3:4	Emotional expression, details
Vertical	9:16	Mobile/Short Video

Step 4: Batch Generate Videos (Optional)

Call the

draw_one_video

tool for shots that require dynamic effects:

python

# Mode 1: Text-to-Video
draw_one_video(
    prompt="Video description, including camera movement and actions",
    reference_image_ids=[]
)

# Mode 2: First Frame to Video (Recommended)
draw_one_video(
    prompt="Video description",
    reference_image_ids=["First Frame Image URL"]
)

# Mode 3: First & Last Frame to Video
draw_one_video(
    prompt="Transition description",
    reference_image_ids=["First Frame URL", "Last Frame URL"]
)

Step 5: Generate Storyboard

Use the

template/storyboard.html

template to display the results.

Single Shot Regeneration

When users are unsatisfied with a certain shot:

Identify Target Shot: According to the shot number specified by the user (e.g., "Regenerate Shot 03")
Obtain Context: Maintain style consistency with the previous and subsequent shots
Adjust Prompt: Fine-tune based on user feedback
Regenerate: Call the corresponding tool to generate new content
Update Storyboard: Replace the image/video of the corresponding shot

Regeneration Example Dialogue:

User: The character's expression in Shot 03 is not firm enough, please regenerate it
Assistant: Sure, I will regenerate Shot 03 to enhance the character's firm expression...
      [Call draw_one_image, fine-tune the prompt to emphasize the expression]

Prompt Templates

Style Consistency Prefix (Choose one style and use it throughout)

Cinematic:

cinematic photography, 35mm film, anamorphic lens, warm color grading, 
dramatic lighting, shallow depth of field

Animation Style:

anime style, studio ghibli inspired, soft colors, detailed background,
cel shading, beautiful lighting

Cyberpunk:

cyberpunk aesthetic, neon lights, rain-soaked streets, holographic displays,
dark atmosphere, high contrast, blade runner style

Realistic Photography:

professional photography, natural lighting, realistic textures,
high detail, 8k resolution, photorealistic

Prompt Structure

[Style Prefix], [Shot Type], [Subject Description], [Action/State], 
[Environment/Background], [Lighting/Atmosphere], [Style Suffix]

Output Format

After generation, output structured storyboard data:

json

{
  "project_title": "Project Title",
  "style": "Cinematic/Realistic",
  "total_shots": 6,
  "total_duration": "15s",
  "shots": [
    {
      "shot_id": "Shot 01",
      "shot_type": "Long Shot",
      "description": "Panoramic view of the city at dusk",
      "image_url": "Generated Image URL",
      "video_url": "Generated Video URL (Optional)",
      "duration": "3s",
      "ratio": "16:9",
      "camera_move": "Slow Push-In",
      "transition": "Fade In",
      "prompt": "Prompt Used",
      "notes": "Opening Shot"
    }
  ]
}

Application Scenarios

Scenario	Recommended Configuration
TikTok/Short Video	6-8 shots, 9:16 vertical, image + video
Advertising Creativity	8-12 shots, 16:9 horizontal, image + video
Animation Storyboard	8-12 shots, 16:9, pure image
Story Picture Book	6-10 shots, 1:1 or 4:3, pure image
Game CG	6-8 shots, 21:9 ultra-wide, image + video
Music MV	10-15 shots, 16:9, image + video

Notes

It is recommended not to exceed 12 shots at a time to avoid excessive generation time
Video generation is slow (about 30-60 seconds per video), you can generate all images first and then generate videos on demand
When generating videos from first and last frames, the style and content of the two frames need to have a reasonable transition relationship
Keep the style prefix consistent during regeneration, only adjust the specific description
For high character consistency, it is recommended that users provide reference images

Common Issues & Pitfalls

1. JavaScript String Quotation Mark Issue in HTML Template

Problem Phenomenon: The storyboard HTML page only displays the title, and the shot cards are not rendered.

Cause: When the

description

dialogue

field in the JavaScript

storyboardData

object contains Chinese double quotes

"..."

, it will break the JS string syntax, causing the entire script to fail to parse.

Wrong Example:

javascript

{ description: "It says "Make a Wish" on it.", ... }  // ❌ Chinese quotes break the string

Correct Approach:

javascript

{ description: "It says 「Make a Wish」 on it.", ... }  // ✅ Use Chinese book brackets
{ description: "It says 'Make a Wish' on it.", ... }   // ✅ Use single quotes
{ description: "It says \"Make a Wish\" on it.", ... } // ✅ Escape double quotes

Troubleshooting Method:

bash

# Use Node.js to check JS syntax
node -e "
const fs = require('fs');
const html = fs.readFileSync('storyboard.html', 'utf8');
const scriptMatch = html.match(/<script>([\s\S]*?)<\/script>/);
if (scriptMatch) {
    try {
        new Function(scriptMatch[1]);
        console.log('JavaScript syntax OK');
    } catch(e) {
        console.log('JavaScript error:', e.message);
    }
}
"

2. Placeholder Image Service

When the actual image has not been generated yet, you can use

picsum.photos

as a placeholder:

html

<img src="https://picsum.photos/seed/shot${shot_id}/640/360" alt="Shot">

```
seed/shot${shot_id}
```
ensures the same random image is displayed for the same shot every time
You can add
```
filter: grayscale(100%)
```
to make the placeholder image appear in black and white, distinguishing it from the ungenerated state

storyboard-generator

NPX Install

Tags

SKILL.md Content (Chinese)