System Requirements Document for proud-unified

1. Introduction

VisualAI Studio is a unified platform designed to empower e-commerce sellers, content creators, and agencies by providing tools to generate AI-powered product photos and viral video clips. The platform offers consistent branding, unified billing, and cross-platform publishing, all accessible from a single dashboard.

2. System Overview

VisualAI Studio integrates photo and video generation capabilities into a cohesive user experience. It targets D2C brands, Amazon/Shopify sellers, course coaches, and agencies managing multiple clients. The system supports a unified subscription model, allowing users to manage their visual content creation and distribution efficiently.

2a. Product Interpretation and Delivery Boundary

VisualAI Studio is delivered as a web application with a unified dashboard for photo and video content creation. It supports anonymous access to the homepage, with authenticated access required for the dashboard and other functionalities. The application uses Clerk.dev for authentication and Stripe for billing. The MVP roadmap outlines a 12-week delivery schedule, including beta testing and launch on Product Hunt and Shopify App Store.

2b. Source Content Inventory

Not applicable as no explicit content_source directive was provided.

2c. Page Content and Component Coverage

Homepage

• Information/State: Introduction to VisualAI Studio, split demo of photos and videos.
• Primary Actions: Sign up, learn more about features.
• Components: Hero section with tagline, demo videos, sign-up prompt.
• States: Loading, error, success.

Dashboard

• Information/State: User workspace with options for photo or video creation.
• Primary Actions: Select "Create Photos" or "Create Clips".
• Components: Navigation bar, module selection.
• States: Loading, error, success.

Photo Editor

• Information/State: Photo upload, background removal, editing tools.
• Primary Actions: Upload photo, apply brand kit, edit photo.
• Components: Upload interface, editing tools, brand kit application.
• States: Loading, error, success.

Video Editor

• Information/State: Video upload, transcription, clip detection, editing tools.
• Primary Actions: Upload video, apply brand kit, edit video.
• Components: Upload interface, transcription tools, editing tools.
• States: Loading, error, success.

Brand Kit

• Information/State: Manage colors, fonts, and presets.
• Primary Actions: Create, edit, and apply brand elements.
• Components: Color picker, font selector, preset manager.
• States: Loading, error, success.

Publish Module

• Information/State: Review outputs, connect channels, schedule publishing.
• Primary Actions: Schedule content, connect social accounts.
• Components: Scheduling interface, channel connection tools.
• States: Loading, error, success.

Analytics Dashboard

• Information/State: Combined performance metrics for photos and videos.
• Primary Actions: View analytics, export reports.
• Components: Charts, performance metrics, export tools.
• States: Loading, error, success.

Billing

• Information/State: Subscription details, usage allowances, billing history.
• Primary Actions: View plan, manage subscription, view billing history.
• Components: Plan details, billing history, payment management.
• States: Loading, error, success.

Agency

• Information/State: Client management, team seats, white-label options.
• Primary Actions: Manage clients, configure team settings, access API.
• Components: Client list, team management tools, API access.
• States: Loading, error, success.

Template Marketplace

• Information/State: Browse, apply, and sell presets.
• Primary Actions: Purchase presets, sell presets.
• Components: Marketplace listings, purchase interface, sales management.
• States: Loading, error, success.

3. Functional Requirements

• As an E-commerce seller/content creator, I should be able to sign up with email and password without a credit card on the free tier. (explicit)
• As a user, I should be able to choose between creating photos or clips from the dashboard. (explicit)
• As a user, I should be able to upload photos, remove backgrounds, generate images, and edit them in the photo editor. (explicit)
• As a user, I should be able to upload videos, transcribe, detect clips, and edit/playback in the video editor. (explicit)
• As a user, I should be able to apply a shared brand kit across photo and video creation. (explicit)
• As a user, I should be able to manage my subscription, view usage allowances, and handle billing through a unified interface. (explicit)
• As a user, I should be able to schedule and publish generated content across supported channels. (explicit)
• As a user, I should be able to view combined analytics for photo and video performance. (explicit)
• As an agency manager, I should be able to manage multiple clients, team seats, and access white-label and API features. (explicit)
• As a user, I should be able to participate in a template marketplace to buy and sell presets. (explicit)

4. User Personas

• E-commerce seller / content creator: Responsible for creating product photos, listing assets, thumbnails, promo videos, and viral clips.
• Agency manager: Manages visual content and unified billing across multiple clients, with team, white-label, API, and multi-account needs.

5. Core User Flows

E-commerce Seller / Content Creator

1. Homepage Access: Lands on the homepage, views split demo.
2. Sign Up: Signs up using email and password.
3. Dashboard Navigation: Chooses between "Create Photos" or "Create Clips".
4. Photo/Video Creation: Uses the respective editor to create content.
5. Brand Kit Application: Applies brand kit automatically.
6. Publishing: Schedules and publishes content.
7. Analytics Review: Reviews combined analytics for performance insights.

Agency Manager

1. Homepage Access: Lands on the homepage, views split demo.
2. Sign Up: Signs up using email and password.
3. Dashboard Navigation: Accesses agency-specific tools.
4. Client Management: Manages clients and team settings.
5. White-label and API Access: Configures white-label options and accesses API.
6. Analytics Review: Reviews combined analytics for client performance insights.

6. Visuals Colors and Theme

• Muse: Jessica Walsh
• Palette:
  • Background: #FFFFFF
  • Surface: #F7F3F2
  • Text: #1C1C1E
  • Primary: #FF4081
  • Accent: #00E676
  • Muted: #FFC107
• Typography:
  • Headings: Archivo Black — Bold, extra large, tight tracking, uppercase
  • Body: Syne; scale 1.25 modular, 64/48/32/18/16
• Shape Language: Bold color fields, overlapping shapes, sticker-like elements
• Layout: Dynamic grids with unexpected crops and large color blocks
• Motion: Bouncy scale-ins, marquee text, color flips on hover

7. Signature Design Concept

The homepage features a full-bleed hero with oversized, playful typography in Archivo Black, layered over a vibrant background of color blocks and surreal imagery. This layout balances bold type with a cheeky, art-directed photo or 3D element in the foreground, embodying the playful maximalism direction.

8. Interaction Model & Motion Direction

• Interaction Model: Animated
• Motion Tempo: Expressive
• Hero Dimensionality: Layered_2d
• Landing Hero Motion Brief: The hero section features a focal subject with oversized typography and vibrant color blocks. Upon interaction, elements scale in with bouncy motion, and text marquees animate across the screen. A reduced-motion state simplifies animations for accessibility.

9. Non-Functional Requirements

• Performance: The application must handle concurrent users efficiently, with responsive UI interactions.
• Scalability: The system should support scaling to accommodate increased user demand.
• Security: Ensure secure authentication and data protection using Clerk.dev and Stripe.
• Reliability: The application should maintain high availability and fault tolerance.

10. Tech Stack

• Frontend: Next.js 14, TypeScript, shadcn/ui, Tailwind CSS
• Backend: Node.js 20, Express/Fastify, Prisma, PostgreSQL
• Queue: BullMQ (Redis)
• Storage: Cloudflare R2
• AI Services: Remove.bg, SDXL/Flux.1, Real-ESRGAN, Whisper, MediaPipe, FFmpeg
• Auth: Clerk.dev
• Payments: Stripe
• Social APIs: Shopify, TikTok, Instagram, YouTube, Amazon
• Monitoring: Sentry, Logtail

11. Assumptions and Constraints

• Assumptions:
  • Users have internet access and compatible devices.
  • The platform will be accessed primarily via web browsers.
• Constraints:
  • Email-and-password signup is required; free-tier signup has no credit-card requirement.
  • The MVP roadmap is 12 weeks and includes specific milestones.

12. Glossary

• D2C: Direct-to-Consumer
• API: Application Programming Interface
• MVP: Minimum Viable Product
• UI: User Interface
• UX: User Experience
• AI: Artificial Intelligence
• 3D: Three-Dimensional