Vibe Coding: Build an AI Director Studio from Scratch

You are a professional AI video director, film and video producer, and AI video workflow designer.

From a real-world production perspective, systematically map the most common types of AI video, including examples such as:

narrative short films, brand commercials / TV spots, e-commerce ads, product showcases, music videos, AI short-form series, AI motion comics, talking-head videos, visual effects, animation, documentaries, concept films, and other common formats.

For each video type, summarize:

1. The core production goal and defining characteristics.
2. The most appropriate professional production SOP.
3. The assets and materials that should be prepared during pre-production.
4. The stages where character, location, prop, shot, and style continuity matter most.
5. The types of AI tools that are best suited to the workflow.
6. The most important storyboard considerations.
7. What the prompt should emphasize.
8. The most common failure points and production mistakes.

Then organize the different video types into a clear comparison table.

Most importantly, explain:

Why shouldn't every AI video format use the same workflow?

Make the output professional, specific, and actionable.

I will use this research to build an "AI Director Studio," so analyze the problem from both a real creator workflow perspective and a product-feature-design perspective.

You are a senior AI product manager, AI video director, film and video producer, and UX designer.

I am preparing to build a product for AI video creators called:

"AI Director Studio"

It is not a basic prompt generator.

Its goal is to:

help users manage the entire AI video production process, starting with a rough idea and ending with a finished AI-generated video.

Do not simply pile on features.

Start from first principles and analyze:

the complete process an AI video creator follows from "an idea" to "a finished video," including real pain points, decision points, repetitive work, and the stages most likely to fail.

Then work backward to determine which product capabilities are actually needed.

Please complete the following:

1. Define the core users.
2. Define the primary use cases.
3. Define the core value proposition.
4. Map the complete user workflow:

Idea Input
→ Planning
→ Script
→ Characters
→ Locations
→ Props
→ Asset Preparation
→ Storyboards
→ Prompts
→ Video Generation
→ Continuity Control
→ Shot-to-Shot Continuity
→ Editing
→ Final Cut

5. Break the product into feature modules based on the workflow.
6. Explain which problem each module solves.
7. Separate the feature roadmap into:

MVP — Must Have
Phase 2 — Enhancements
Future — Advanced Features

8. Design the product home page.
9. Design the AI Director Studio workspace.
10. Design the project creation flow.
11. Design the asset library.
12. Design the storyboard system.
13. Design the prompt system.
14. Design an adaptation mechanism for different AI video models.
15. Design continuity management for characters, locations, wardrobe, and props.
16. Design the Director Master feature.
17. Design project progress tracking and version management.
18. Design a mechanism that lets the AI proactively identify problems and suggest improvements.

Important:

The product cannot be just a chat window.

It should combine:

The clear workflow of professional film and video production software

- The proactive reasoning and execution capabilities of an AI agent.

Final output:

A. Core Product Positioning
B. User Workflow
C. Complete Feature Architecture
D. Page and Information Architecture
E. MVP
F. Phase 2 Features
G. Advanced Features
H. One Complete End-to-End Use Case

You are a senior UI/UX design director, digital product visual designer, and interaction designer.

I am designing a product:

[Product Name]
AI Director

[Product Type]
An AI Director Studio for AI video creators.

[Core Functionality]
After a user enters an idea, the AI automatically helps with planning, scripting, asset planning, storyboards, prompts, AI video model adaptation, continuity management, and editing recommendations.

[Target Users]
AI video creators, directors, advertising creators, and content teams.

[Primary Use Case]
The user wants to complete the full workflow from "an idea" to "a finished AI video" inside one workspace.

[Desired Product Personality]
A professional director's studio with a cinematic production feel: premium, restrained, future-facing, intelligent, but not cold.

Do not simply apply a generic SaaS dashboard template.

Based on the product positioning, user scenarios, and feature set, use first-principles thinking to create a visual and interaction system that genuinely fits the product:

UI Visual Style + Interaction Design Language

Please focus on:

1. A one-sentence core visual concept.
2. Three to five visual keywords.
3. Why this visual direction fits the product.
4. Overall light/dark balance.
5. Primary, secondary, and accent colors.
6. Background treatment.
7. Cards and panels.
8. Borders.
9. Shadows.
10. Glow effects.
11. Typography.
12. Type scale and hierarchy.
13. Buttons.
14. Tags.
15. Input fields.
16. Sliders.
17. Dropdowns.
18. Cards.
19. Left-side production workflow navigation.
20. Center creative workspace.
21. Right-side director controls.
22. AI working state.
23. AI thinking state.
24. How proactive AI suggestions should appear.
25. Page transitions.
26. Card expansion behavior.
27. Hover states.
28. Click interactions.
29. Drag-and-drop behavior.
30. Loading states.
31. Empty states.
32. Error states.

Most importantly, consider:

How can a first-time user open the product and immediately understand what to do next without needing a tutorial?

Finally, organize everything into a complete:

UI Design System

that can be handed directly to a front-end engineer or coding agent.

You are a top-tier digital product UI designer and Creative Director.

Design a high-fidelity web UI reference image for the product below. The result should feel realistic and technically feasible to build as a real product.

[Product Name]
AI Director

[Product Positioning]
An AI Director Studio that lets one person coordinate an entire AI video production team with a single instruction.

[Core Users]
AI video creators, directors, advertising creators, and content teams.

[Core Features]
Creative planning, scripts, asset library, storyboards, prompts, video model adaptation, continuity control, and Director Master Mode.

[Page Type]
AI Director Studio workspace.

[Core Visual Keywords]
Misty silver-white, editorial, studio, cinematic production, premium, restrained, professional, future-facing.

[Aspect Ratio]
16:9

Use a three-column AI Director Studio layout:

Left:
The complete AI video production workflow and project navigation.

Center:
The main creative workspace for plans, assets, storyboards, and AI-generated results.

Right:
Director controls, video model selection, visual style, story intensity, shot density, and AI-assisted controls.

The page should visibly include:

- Top product navigation
- Left-side feature navigation
- Center workspace
- Right-side properties panel
- Project status
- Workflow progress
- Timeline
- Cards
- Input fields
- Tags
- Buttons
- Sliders
- Dropdowns
- Video model selection
- AI generation status
- A large storyboard visualization area

Visual direction:

- Large areas of low-saturation misty silver-gray and off-white
- Extremely thin gray borders
- Soft visual hierarchy
- Limited use of translucent glass effects
- Generous whitespace
- Premium editorial feel
- Professional film post-production studio feel

Avoid:

- Cheap blue-purple gradients
- Heavy neon lighting
- Excessive glow
- Generic SaaS dashboard styling
- Overly rounded corners
- Gaming UI aesthetics

The overall page should feel like:

"Real film-production software built for directors and professional AI video creators."

High-fidelity web UI screenshot, 16:9, realistic and buildable.

You are now a senior full-stack engineer, product manager, UI/UX designer, and AI product architect.

I want to build a real, working web product with you.

Do not give me only a concept design, static demo, or fake interactions.

The goal is to create a real project that:

- Runs correctly
- Can be previewed locally
- Can be continuously developed
- Can later be deployed to production

====================

[Product Name]

🔵 Fill this in

[One-Sentence Positioning]

🔵 Fill this in

[Target Users]

🔵 Fill this in

[Complete Product Requirements]

🔵 Paste the product and feature architecture created earlier

====================

[UI Visual Design]

🔵 Paste the UI Design System created earlier

====================

[Interaction Design]

🔵 Paste the interaction design created earlier

====================

Development principles:

1. Prioritize a genuinely working product.
2. Every button should have a real interaction.
3. Do not create large numbers of decorative buttons with no function.
4. Forms must be editable and functional.
5. Page states must change based on real user actions.
6. Use a unified data model for project data.
7. Allow feature modules to share data.
8. Use modular components.
9. Do not place the entire codebase in one file.
10. Reserve clean interfaces for future real AI API integrations.
11. If no production AI API is available yet, create a Mock AI Service.
12. The mock layer must be easy to replace later.
13. Preserve project state across page refreshes whenever practical.
14. Implement Loading / Empty / Error states.
15. Implement basic error handling.
16. Prioritize the desktop web experience.
17. Optimize first for screens around 1440px wide.

Development process:

Step 1:
Inspect the current project and technology stack.

Step 2:
Design a sensible project file structure.

Step 3:
Establish the Design System.

Step 4:
Create the core data models.

Step 5:
Create the page layout.

Step 6:
Build the core features incrementally.

Step 7:
After each phase, automatically check for compilation errors.

Step 8:
Fix issues before continuing.

If a project already exists:

- Do not rebuild it from scratch.
- Do not replace the technology stack without a strong reason.
- Continue using the current project whenever possible.

Acceptance criteria:

- The project runs successfully.
- The home page opens correctly.
- Users can create a project.
- Users can enter a creative idea.
- Users can select a video type.
- Users can modify director controls.
- The AI can generate mock results.
- The workflow can advance from stage to stage.
- The center workspace can switch between modules.
- The asset library can be viewed.
- Storyboards can be viewed.
- Prompts can be generated.
- Users can select a video model.
- Users can select a Director Master preset.
- The page has no obvious broken layouts.
- There are no large numbers of nonfunctional buttons.
- The UI is visually consistent.

Start developing now.

Continue modifying the current project.

Keep the overall product direction unchanged.

For this pass, solve only the issues listed below.

Issue 1:

🔵 Describe the current problem

I want it changed to:

🔵 Describe the correct result you want

Issue 2:

🔵 Describe the current problem

I want it changed to:

🔵 Describe the correct result you want

Issue 3:

🔵 Describe the current problem

I want it changed to:

🔵 Describe the correct result you want

Revision requirements:

1. First identify the root cause of each issue.
2. Do not rely on superficial CSS patches.
3. Prioritize fixing logic and data structures.
4. Do not rebuild the project from scratch.
5. Do not break features that are already working.
6. Do not make large unrelated code changes.
7. After the fix, check all related upstream and downstream functionality.
8. If compilation errors appear, fix them as part of this pass.

Most importantly:

Keep all content, features, UI, pages, and interactions that were not mentioned above unchanged.

Make the changes now.

Add a complete feature to the current AI Director project called:

"Director Master Mode"

Important:

This feature cannot simply append a phrase such as:

"XXX Director Style"

to the prompt.

Selecting a director should meaningfully change:

- Creative treatment
- Composition
- Shot design
- Blocking
- Lens choice
- Depth of field
- Lighting
- Color
- Camera movement
- Editing
- Rhythm
- Emotional expression

====================

1. FEATURE ENTRY POINT

Add a new control to the right-side Director Controls panel:

Director Master

Users should be able to:

1. Select a preset director.
2. Search for a director.
3. Manually enter a director's name.
4. Turn Director Master Mode off.

Initial presets:

- Wong Kar-wai
- Stanley Kubrick
- Akira Kurosawa
- Alfred Hitchcock
- Hirokazu Kore-eda

Also add:

Custom Director

so users can manually enter another director.

====================

2. DIRECTOR PROFILE CARDS

Create a dedicated profile card for each director.

Each card should include:

- Director name
- Short introduction
- Three to five core visual keywords
- Representative creative characteristics
- Visual reference image area

Reserve real image slots for the reference area.

For a production launch, reference images may come from:

- User-uploaded images
- Properly licensed materials
- Images that are explicitly permitted for public use

====================

3. BUILD A DIRECTOR LANGUAGE DATABASE

Do not describe each director with only a few adjectives.

Break the filmmaking language down across these dimensions:

01. Composition
02. Lens
03. Depth of Field
04. Camera Height
05. Camera Movement
06. Blocking
07. Lighting
08. Color
09. Production Design
10. Editing Rhythm
11. Emotional Rhythm
12. Narrative Style

====================

4. AI WORKING MECHANISM

After a user activates a director preset:

Do not change the basic content of the current story.

Preserve:

- The original story
- The original characters
- The original product selling points
- The original plot logic
- The original core message

Then re-evaluate the project by asking:

"If this director were responsible for the current shot, how might the shot be redesigned?"

Then upgrade:

- Creative treatment
- Scene design
- Shot design
- Cinematography
- Composition
- Blocking
- Lighting
- Color
- Editing
- Prompt

====================

5. THE PROMPT MUST CHANGE IN A MEANINGFUL WAY

Do not simply add words such as:

cinematic
masterpiece
XXX style

For example, if the original request is:

"A man is eating alone in a convenience store at night."

Director Master Mode should re-analyze:

- Where is the camera?
- Where is the character positioned?
- What is in the foreground?
- What is happening in the background?
- Where does the light come from?
- How does the environment move?
- How does the subject move?
- Is the camera static or moving?
- How does the composition express the character's emotional state?
- How is the sense of time communicated?
- How should the editing rhythm work?

====================

6. WONG KAR-WAI MODE

Do not reduce a Wong Kar-wai preset to:

neon + red/green lighting.

Instead, abstract the deeper filmmaking concepts, such as:

- Emotional distance between characters and urban space
- Foreground obstruction
- Glass
- Mirrors
- Reflections
- Compressed space
- Unconventional composition
- Contrast between environmental movement and a character's internal state
- Strong but controlled color relationships
- Subjective time
- Loneliness and isolation
- The relationship between camera choices and character psychology

Then translate those concepts into executable production decisions:

- Camera parameters
- Composition
- Blocking
- Lighting
- Action
- Camera movement
- Editing approach

====================

7. ADD A COMPARISON VIEW

Add:

Original
VS
Director Master

The user provides the same base request.

The left side shows:

The standard version.

The right side shows:

The version re-directed through Director Master Mode.

Clearly explain:

Which specific decisions Director Master Mode changed.

====================

FINAL GOAL

The goal is not to imitate the surface-level filter of a director.

The goal is to:

translate filmmaking methods into directing language that an AI video system can actually execute.

After implementation, test all related functionality.

Keep everything else unchanged.

Deploy the current project to Netlify and generate a publicly accessible URL.

Before deployment, perform a complete check of:

1. The current technology stack.
2. package.json.
3. Build Command.
4. Publish Directory.
5. Whether the project compiles successfully.
6. Environment variables.
7. SPA route refresh behavior.
8. Static asset paths.
9. Any issue that could block deployment.

If you find a problem:

Fix it directly.

Requirements:

- Do not change product functionality.
- Do not modify the existing UI.
- Do not rebuild the project from scratch.
- Prefer the current configuration whenever possible.
- If netlify.toml is needed, create it correctly.
- After deployment succeeds, provide the public URL.

Start the deployment now.