Back to .md Directory

๐ŸŽฌ Demo Script & Video Recording Guide

Provides a complete 12-scene video script, pre-recording checklist, editing guidelines, and publishing templates for demoing an AI landing page generator.

May 2, 2026
0 downloads
0 views
ai
View source

What this file does

Provides a complete 12-scene video script, pre-recording checklist, editing guidelines, and publishing templates for demoing an AI landing page generator.

When to use it

  • Creating a screen recording demo for a final year or portfolio project
  • Structuring a product walkthrough video with timed voiceover and actions
  • Preparing demo data and screenshots for a technical presentation
  • Publishing a demo video on YouTube or LinkedIn with SEO-optimized metadata

Assumes this stack

OBS StudioLoomCamtasiaChromeFirefoxFastAPI

๐ŸŽฌ Demo Script & Video Recording Guide

AI-Powered Landing Page Generator

Video Duration: 5-7 minutes
Format: Screen recording with voiceover
Tools: OBS Studio / Loom / Camtasia


๐Ÿ“น Pre-Recording Checklist

Technical Setup:

  • Install screen recording software (OBS Studio recommended)
  • Test microphone audio quality
  • Close unnecessary applications
  • Clear browser history/cache
  • Set screen resolution to 1920x1080
  • Disable notifications (Do Not Disturb mode)
  • Prepare demo data in advance
  • Test application is running smoothly

Environment Setup:

  • Start backend server (uvicorn app.main:app --reload)
  • Open frontend in Chrome/Firefox
  • Have 2-3 browser tabs ready
  • Zoom to 100% (Ctrl+0)
  • Enable browser developer tools (optional)
  • Prepare backup demo data

๐ŸŽฌ Video Script

Scene 1: Introduction (30 seconds)

Screen: Title slide or landing page of your project

Voiceover Script:

"Hello everyone! Today I'm excited to demonstrate my final year project: an AI-Powered Landing Page Generator. This application uses artificial intelligence to automatically create professional, responsive landing pages in just minutes. Let me show you how it works."

Action:

  • Fade in title
  • Show project logo/branding
  • Brief pause for emphasis

Scene 2: Problem Statement (30 seconds)

Screen: Show comparison slide or website examples

Voiceover Script:

"Creating a professional landing page traditionally requires hiring expensive developers, spending weeks on design, or settling for generic templates. Small businesses and startups often can't afford $500 to $5000 per page, and the process takes 1-2 weeks. Our solution changes that completely."

Action:

  • Show cost comparison chart
  • Display timeline graphic
  • Transition to solution

Scene 3: Dashboard Overview (45 seconds)

Screen: Application dashboard

Voiceover Script:

"This is our dashboard. Here users can manage multiple businesses and their landing pages. You can see I already have a few businesses created for demonstration. Let's create a new business and generate a landing page from scratch."

Actions:

  1. Open dashboard
  2. Hover over navigation items
  3. Show list of existing businesses
  4. Point to "Create Business" button
  5. Scroll to show all features

Mouse Movement: Slow and deliberate, highlight each section


Scene 4: Creating a Business Profile (1 minute)

Screen: Create Business form

Voiceover Script:

"First, I'll create a new business profile. I'll call it 'EcoClean Solutions'โ€”a company that offers eco-friendly cleaning services. I'll select the 'Services' industry, specify that we're targeting homeowners and small businesses, choose a 'Friendly' tone, and our primary goal is to generate leads for our cleaning services. The unique value proposition is that we use 100% natural, non-toxic cleaning products."

Actions:

  1. Click "Create Business" or "New Business"
  2. Type slowly and clearly:
    Business Name: EcoClean Solutions
    Industry: Services
    Target Audience: Homeowners and small businesses
    Tone: Friendly
    Goal: Generate leads for cleaning services
    UVP: 100% natural, non-toxic cleaning products safe for families and pets
    
  3. Pause briefly after each field
  4. Click "Save" or "Create"
  5. Show success notification

Scene 5: Generating Landing Page (2 minutes)

Screen: Generate Page interface

Voiceover Script:

"Now let's generate the landing page. I'll click 'Generate Page' and select EcoClean Solutions. I can choose from four professional themesโ€”let's go with 'Modern' for this demo. I'll select a green color to match the eco-friendly brand. I'll enable all sections: Hero, Features, How It Works, Testimonials, Pricing, and FAQ. Now I'll click 'Generate' and watch the AI work its magic."

Actions:

  1. Click "Generate Landing Page"
  2. Select business from dropdown: "EcoClean Solutions"
  3. Show theme options (hover over each)
  4. Select "Modern" theme
  5. Click color picker
  6. Choose green color (#10B981 or similar)
  7. Show section toggles
  8. Enable all sections
  9. Click "Generate Landing Page"
  10. Show loading animation/progress bar

Timing Note: The generation takes 18-25 secondsโ€”add this voiceover:

During Generation (20 seconds):

"The system is now using AIโ€”specifically Google's Gemini or OpenAI's GPT-4โ€”to generate contextually relevant content. It's creating a compelling headline, describing key features, writing testimonial quotes, and crafting effective calls-to-action. All of this is tailored specifically for EcoClean Solutions' eco-friendly cleaning services. The AI understands the industry, target audience, and brand tone we specified."


Scene 6: Preview Generated Page (1.5 minutes)

Screen: Preview of generated landing page

Voiceover Script:

"And here's our generated landing page! Let's walk through it. Notice the AI-generated headline: '[Read actual headline]'โ€”catchy and relevant. The subheadline explains the value proposition clearly. As we scroll down, we have a features section highlighting key benefits of eco-friendly cleaning."

Actions:

  1. When page loads, pause for 2-3 seconds

  2. Slowly scroll through entire page:

    • Hero Section: Point out headline, subheadline, CTA button
    • Features Section: Read one feature aloud
    • How It Works: Show the process steps
    • Testimonials: Read one testimonial
    • Pricing Section: Show pricing tiers
    • FAQ Section: Expand one FAQ
    • Footer: Show contact information
  3. Scroll back to top

  4. Demonstrate responsiveness:

    • Click browser dev tools (F12)
    • Toggle device toolbar
    • Show mobile view (iPhone)
    • Show tablet view (iPad)
    • Return to desktop view

Voiceover During Scroll:

"The How It Works section breaks down the service process into simple steps. The testimonials sound authentic and relevantโ€”all AI-generated. There's even a pricing section with clear call-to-action buttons. And notice how the design is clean, professional, and fully responsiveโ€”watch as I switch to mobile view. The layout automatically adapts to smaller screens perfectly."


Scene 7: View Source/SEO (30 seconds)

Screen: Browser dev tools or view source

Voiceover Script:

"Let's look at the technical side. If I view the page source, you can see all the SEO meta tags are automatically generated: title, description, keywords, Open Graph tags for social media sharing, and even Twitter cards. This ensures the page ranks well in search engines right from day one."

Actions:

  1. Right-click โ†’ "View Page Source" (or Ctrl+U)
  2. Scroll to <head> section
  3. Highlight meta tags:
    <title>...</title>
    <meta name="description" content="...">
    <meta property="og:title" content="...">
    
  4. Close source view

Scene 8: Export Functionality (45 seconds)

Screen: Download process

Voiceover Script:

"Now for the best partโ€”exporting. I'll click 'Download' to get the complete landing page as a ZIP file. This includes the HTML file and CSS stylesheet, fully functional and ready to deploy to any web hosting service. No additional setup required."

Actions:

  1. Click "Download" or "Export" button
  2. Show download progress
  3. Navigate to Downloads folder
  4. Extract ZIP file
  5. Show contents:
    • index.html or ecoClean_solutions.html
    • styles.css or ecoClean_solutions.css
  6. Double-click HTML file
  7. Show it opening in new browser tab
  8. Demonstrate it works independently

Additional Voiceover:

"And there it isโ€”a complete, standalone website that can be uploaded to any hosting provider like Netlify, Vercel, or even a traditional web host. The client just needs to add their actual contact information and they're ready to go live."


Scene 9: Backend API Demo (Optional - 30 seconds)

Screen: API documentation (FastAPI /docs)

Voiceover Script:

"For developers, we also provide a comprehensive RESTful API. Here's the automatic API documentation powered by FastAPI. You can see all available endpoints, test them directly in the browser, and integrate this service into other applications."

Actions:

  1. Open new tab: http://localhost:8000/docs
  2. Show Swagger UI
  3. Expand one endpoint (e.g., POST /api/v1/landing-pages/generate)
  4. Show request/response schemas
  5. Optional: Make test API call

Scene 10: Features Recap (30 seconds)

Screen: Feature summary slide or return to dashboard

Voiceover Script:

"Let me recap the key features: AI-powered content generation using state-of-the-art language models. Multiple professional themes with color customization. Fully responsive design that works on all devices. Automatic SEO optimization. And complete export functionality. All of this in under 5 minutes, compared to weeks with traditional development."

Actions:

  • Show quick montage of features
  • Transition slides or screen captures

Scene 11: Technology Stack (20 seconds)

Screen: Architecture diagram or technology logos

Voiceover Script:

"The tech stack includes Python with FastAPI for the backend, PostgreSQL for data storage, Google Gemini and OpenAI GPT for AI content generation, React for the frontend, and Docker for deployment. It's fully production-ready with automated testing and CI/CD pipelines."

Actions:

  • Show tech stack slide
  • Briefly highlight each technology

Scene 12: Conclusion (30 seconds)

Screen: Thank you slide with contact information

Voiceover Script:

"This project demonstrates how artificial intelligence can revolutionize web development, making professional landing page creation accessible to everyone. Thank you for watching! The complete source code, documentation, and deployment guide are available on GitHub. Feel free to check it out and reach me with any questions. Thank you!"

Actions:

  1. Show final slide with:
    • GitHub repository URL
    • Your email
    • LinkedIn profile
    • Live demo URL (if deployed)
  2. Fade out

๐ŸŽจ Editing Guidelines

Video Editing Checklist:

  • Trim silent pauses (but leave natural breathing room)
  • Add intro title card (3-5 seconds)
  • Add outro with contact info (5 seconds)
  • Normalize audio levels
  • Add subtle background music (optional, low volume)
  • Add text overlays for key points
  • Zoom in on important UI elements
  • Speed up long loading times (1.5x-2x speed)
  • Add smooth transitions between scenes
  • Export in 1080p (1920x1080) at 30fps

Text Overlays to Add:

  • Feature callouts: "AI-Generated Content" โœจ
  • Performance metrics: "Generated in 20 seconds" โšก
  • Cost savings: "90% Cost Reduction" ๐Ÿ’ฐ
  • Technology names when mentioned
  • Website/GitHub URL at end

Audio Tips:

  • Use noise cancellation/removal
  • Add subtle fade in/out
  • Maintain consistent volume
  • Clear, confident speaking pace
  • Pause between major points

๐Ÿ“ฑ Screenshots Guide

Essential Screenshots to Capture:

  1. Dashboard View

    • Full screen, 1920x1080
    • Show existing businesses
  2. Create Business Form

    • Filled out completely
    • Before and after submission
  3. Generate Page Interface

    • Theme selection
    • Color picker
    • Section toggles
  4. Generated Page Preview

    • Full page scroll capture
    • Desktop view
    • Mobile view (responsive)
    • Tablet view
  5. Individual Sections

    • Hero section close-up
    • Features section
    • Testimonials
    • Pricing table
    • FAQ section
  6. Technical Views

    • HTML source code
    • SEO meta tags
    • API documentation
  7. Export Process

    • Download button
    • ZIP file contents
    • Standalone HTML in browser
  8. Architecture Diagram

    • System architecture
    • Technology stack
    • Data flow

How to Capture Screenshots:

Windows:

  • Full screen: Win + Shift + S
  • Snipping Tool: Win + Shift + S โ†’ Select area

Tools for Long Scrolling Screenshots:

  • Nimbus Screenshot (Chrome extension)
  • FireShot (Firefox/Chrome extension)
  • ShareX (Windows app)

๐ŸŽฏ Demo Data Preparation

Pre-create These Businesses:

Business 1: TechFlow Solutions

Industry: SaaS
Target: Small business owners
Tone: Professional
Goal: Generate leads for workflow automation

Business 2: Fitness First Gym

Industry: Fitness
Target: Health-conscious individuals 25-45
Tone: Energetic
Goal: Increase gym membership sign-ups

Business 3: GreenEats Cafe

Industry: Food & Beverage
Target: Health-conscious urban professionals
Tone: Friendly
Goal: Promote organic menu and online ordering

Demo Scenarios:

Quick Demo (2 minutes):

  • Use pre-created business
  • Generate page
  • Show result
  • Export

Full Demo (5-7 minutes):

  • Create new business from scratch
  • Generate page with customization
  • Preview in detail
  • Show responsiveness
  • Export and demonstrate

Technical Demo (3-4 minutes):

  • Show API documentation
  • Make API call in Postman/curl
  • Show database records
  • Explain architecture

๐Ÿš€ Publishing Your Demo

YouTube:

Title: AI-Powered Landing Page Generator | Final Year Project Demo | Python FastAPI + AI

Description:

๐Ÿš€ AI-Powered Landing Page Generator - Full Demo

This video demonstrates my final year engineering project: an AI-powered web application that automatically generates professional landing pages using artificial intelligence.

๐ŸŽฏ Key Features:
โœ… AI content generation (Google Gemini / OpenAI GPT)
โœ… Multiple professional themes
โœ… Fully responsive design
โœ… SEO optimized
โœ… Export-ready HTML/CSS
โœ… 90% cost reduction vs traditional development

๐Ÿ› ๏ธ Tech Stack:
- Backend: Python 3.11 + FastAPI
- Database: PostgreSQL + SQLAlchemy
- AI: Google Gemini API, OpenAI GPT-4
- Frontend: React + Tailwind CSS
- DevOps: Docker + GitHub Actions

๐Ÿ“‚ Source Code: [GitHub Link]
๐Ÿ“š Documentation: [Docs Link]
๐ŸŒ Live Demo: [Demo Link]

โฑ๏ธ Timestamps:
0:00 Introduction
0:30 Problem Statement
1:00 Dashboard Overview
2:00 Creating Business Profile
3:00 Generating Landing Page
5:00 Preview & Features
6:00 Export Functionality
7:00 Conclusion

๐Ÿ’ฌ Questions? Drop them in the comments!
๐Ÿ‘ Like and Subscribe for more tech projects!

#AI #WebDevelopment #FinalYearProject #Python #FastAPI #MachineLearning

Tags: ai landing page generator, python fastapi project, ai web development, gemini api, openai gpt, final year project, computer engineering, web app development, react project, full stack development

LinkedIn:

Post:

๐ŸŽ‰ Excited to share my final year project!

I built an AI-Powered Landing Page Generator that uses Google Gemini and OpenAI GPT to automatically create professional websites in minutes.

Key achievements:
โœ… 90% cost reduction vs hiring developers
โœ… Generates pages in <30 seconds
โœ… Production-ready with Docker & CI/CD
โœ… 87% test coverage

Tech: Python โ€ข FastAPI โ€ข React โ€ข PostgreSQL โ€ข Docker

Watch the full demo: [Video Link]
Source code: [GitHub Link]

#AI #WebDevelopment #Python #FastAPI #MachineLearning #EngineeringProject

๐Ÿ“Š Analytics to Track

After publishing, monitor:

  • View count and watch time
  • Audience retention (where people drop off)
  • Comments and questions
  • Shares and engagement
  • Traffic sources

Use insights to:

  • Create follow-up videos addressing questions
  • Write blog posts on interesting topics
  • Improve documentation
  • Plan future enhancements

Ready to record? You've got this! ๐ŸŽฌ๐Ÿš€

What's inside

12 scripted scenes, pre-recording checklist, editing checklist, screenshot guide, demo data, publishing templates, and analytics tracking.

Change this for your project

  • Replace EcoClean Solutions with your own demo business name
  • Replace http://localhost:8000/docs with your own API docs URL
  • Replace #10B981 with your own brand color hex
  • Replace anish-dev09/AI-POWERED-LANDING-PAGE-GENERATOR with your own repository name

Where it goes

Keep it in your repository where the agent or team that needs it will read it.

Worth borrowing

  • Pre-creating 3 demo businesses with distinct industries and tones to showcase flexibility
  • Adding a 'during generation' voiceover that explains the AI process while the user waits
  • Including a separate screenshot guide with exact capture tools and dimensions

Related Documents