atelier

byMuzammil Tanveer

Build a Complete AI Creative Platform — Atelier Studio AI Act as an expert full-stack developer, UI/UX designer, AI engineer and product architect. Build a complete, responsive, mobile-first AI platform named Atelier Studio AI. The website must combine AI video creation, image generation, personal tutoring, home fitness guidance and automatic short-video editing in one unified platform. Do not create just a landing page or static design. Build a functional application with working navigation, forms, project management, backend architecture and integrations. 1. Brand Identity and Design App name: Atelier Studio AI Design style: Premium, elegant, classic, modern and professional. Use this exact colour palette: - Forest Green: #26352D - Warm Ivory: #F4EFE6 - Antique Gold: #D5BC8A - Charcoal: #292929 - Soft Beige: #E5DACA Design requirements: - Elegant dashboard. - Beautiful typography. - Smooth transitions and animations. - Premium cards and rounded corners. - Responsive desktop, tablet and mobile layouts. - Easy navigation. - Attractive loading screens. - Consistent branding throughout the website. 2. AI Video Studio Create a powerful AI video-generation workspace. Requirements: - Generate a complete video from one written prompt, poem, rhyme or story. - Automatically divide the content into appropriate scenes. - Do not require the user to write individual scene descriptions. - Generate consistent characters throughout the video. - Offer colourful, polished 3D preschool animation. - Include original characters, environments and animations. - Automatically generate voiceovers or singing. - Generate original background music and sound effects. - Synchronise captions with narration. - Automatically assemble the complete video. - Allow video preview and download. - Offer different video lengths, aspect ratios and styles. Atelier Kids Intro Create an original reusable animated introduction called "Atelier Kids Intro". Requirements: - Original Atelier Studio AI logo animation. - Colourful, child-friendly visual design. - Original short musical jingle. - Automatically include the introduction in nursery-rhyme videos when enabled. - Allow users to enable or disable it. Never copy existing copyrighted characters, logos, songs or show introductions. 3. AI Image Generator Build an image-generation workspace. Requirements: - Generate images from text prompts. - Offer multiple artistic styles. - Support 3D animation, realistic imagery, illustrations and cartoon artwork. - Allow aspect-ratio selection. - Provide image previews. - Allow downloading and saving generated images. - Keep image-generation history. 4. Personal AI Tutor Create an interactive personal tutor for all school subjects and academic levels. Requirements: - Text-based conversation. - Voice interaction where supported. - Explain difficult concepts in simple language. - Answer students' questions. - Give examples and practice exercises. - Generate quizzes. - Mark student answers and explain mistakes. - Adapt explanations to the student's level. - Support syllabus-based learning. - Provide exam-style questions and marking guidance. - Maintain learning progress and topic history. Include a student-friendly interface and safe, age-appropriate teaching. 5. AI Home Fitness Trainer Create a home fitness section. Requirements: - General fitness and mobility guidance. - Beginner-friendly exercise routines. - Demonstrations where supported. - Warm-up and cool-down suggestions. - Adjustable session duration. - Rest and recovery reminders. - Track completed sessions. Keep recommendations safe and age-appropriate. Do not promote extreme exercise, restrictive eating or unrealistic body ideals. Include appropriate safety guidance. 6. Long Video to Short Clips Create an AI-powered video clipping workspace. Requirements: - Upload a video or provide a supported video URL. - Analyse videos the user owns or has permission to edit. - Identify interesting and useful moments. - Automatically select highlights. - Generate multiple short clips. - Support vertical 9:16, square 1:1 and landscape formats. - Automatically generate synchronised subtitles. - Allow editing of clip start and end points. - Preview each clip. - Download individual clips. Respect copyright and website access restrictions. Never promise URL importing when the source platform does not support it. 7. My Projects Create a central project library. Requirements: - Save video projects. - Save images. - Save tutor sessions. - Save fitness plans. - Save short clips. - Display project previews. - Allow renaming and organising projects. - Allow downloads. - Include project search and filtering. - Save progress automatically where possible. 8. AI Assistant Include a central AI assistant that helps users navigate the platform. It should: - Understand natural-language instructions. - Help users choose the correct tools. - Explain how features work. - Assist with writing prompts. - Help organise projects. - Provide clear error messages and solutions. 9. Account and Settings Provide: - User preferences. - Theme settings. - Language settings. - Project storage settings. - AI provider configuration. - Privacy controls. - Account and authentication options where required by the hosting or AI providers. Offer a guest or local mode where technically possible. 10. AI Integrations and Backend Build a modular architecture so different AI providers can be connected. Use appropriate APIs or compatible models for: - Text generation. - Image generation. - Video generation. - Speech synthesis. - Music and sound generation. - Speech recognition and transcription. - Video analysis and clipping. Keep API keys secure on the backend. Never expose secret keys in frontend code. If a provider is unavailable, display a clear message rather than pretending that generation succeeded. 11. Pricing and Usage Prioritise free and open-source services wherever possible. Requirements: - Avoid unnecessary paid services. - Clearly display any usage limits. - Show costs before paid generation. - Allow users to choose alternative providers where available. - Do not advertise unlimited free generation unless the connected provider genuinely supports it. 12. Content and Safety - Support a broad range of legitimate creative and educational content. - Follow applicable laws and provider safety policies. - Protect minors. - Do not facilitate abusive, exploitative or illegal content. - Respect intellectual property and copyright. 13. Technical Requirements - Build a real full-stack application. - Use a maintainable frontend and backend. - Make it responsive and mobile-friendly. - Include proper data storage. - Add authentication only where needed. - Include error handling. - Include loading indicators. - Add functional navigation and buttons. - Test all implemented features. - Provide clear deployment instructions. 14. Final Delivery Deliver: 1. A complete working website. 2. All source code. 3. Backend and frontend. 4. Database configuration. 5. AI integration architecture. 6. Environment-variable instructions. 7. Deployment instructions. 8. A list of features that are fully working. 9. A list of features requiring API keys, external services or paid plans. IMPORTANT: Do not deliver only a mockup, landing page or collection of non-functional buttons. Implement the features that can genuinely work, and clearly identify anything that still needs an external AI service. The final product should feel like a unified premium creative studio named Atelier Studio AI.

No preview

Comments (0)

No comments yet. Be the first!

System Requirements

System Requirements Document for atelier

1. Introduction

Requirements:

The final product should feel like a unified premium creative studio named Atelier Studio AI. Make it correct

AI

  1. Brand Identity and Design

**App Name

Atelier

AI

Atelier Studio AI

Page 1 of 35

2. System Overview

Build a Complete AI Creative Platform — Atelier Studio AI

Act as an expert full-stack developer, UI/UX designer, AI engineer and product architect. Build a complete, responsive, mobile-first AI platform named Atelier Studio AI.

The website must combine AI video creation, image generation, personal tutoring, home fitness guidance and automatic short-video editing in one unified platform.

  1. Personal AI Tutor

Create an interactive personal tutor for all school subjects and academic levels.

Atelier Studio AI: A Unified Creative and Learning Platform

As an expert full-stack developer, UI/UX designer, AI engineer, and product architect, I present the comprehensive blueprint for Atelier Studio AI. This platform will offer a premium, elegant, and highly functional experience, integrating diverse AI capabilities into a cohesive product.

Page 2 of 35

3. Functional Requirements

Do not create just a landing page or static design. Build a functional application with working navigation, forms, project management, backend architecture and integrations.

  1. AI Video Studio

Create a powerful AI video-generation workspace.

Requirements:

  • Generate a complete video from one written prompt, poem, rhyme or story.

  • Automatically divide the content into appropriate scenes.

  • Do not require the user to write individual scene descriptions.

  • Generate consistent characters throughout the video.

  • Offer colourful, polished 3D preschool animation.

  • Include original characters, environments and animations.

  • Automatically generate voiceovers or singing.

  • Generate original background music and sound effects.

  • Synchronise captions with narration.

  • Automatically assemble the complete video.

  • Allow video preview and download.

  • Offer different video lengths, aspect ratios and styles.

Atelier Kids Intro

Page 3 of 35

Create an original reusable animated introduction called "Atelier Kids Intro".

Requirements:

  • Original Atelier Studio AI logo animation.

  • Colourful, child-friendly visual design.

  • Original short musical jingle.

  • Automatically include the introduction in nursery-rhyme videos when enabled.

  • Allow users to enable or disable it.

  1. AI Image Generator

Build an image-generation workspace.

Requirements:

  • Generate images from text prompts.

  • Offer multiple artistic styles.

  • Support 3D animation, realistic imagery, illustrations and cartoon artwork.

  • Allow aspect-ratio selection.

  • Provide image previews.

  • Allow downloading and saving generated images.

  • Keep image-generation history.

Requirements:

Page 4 of 35
  • Text-based conversation.

  • Voice interaction where supported.

  • Explain difficult concepts in simple language.

  • Answer students' questions.

  • Give examples and practice exercises.

  • Generate quizzes.

  • Mark student answers and explain mistakes.

  • Adapt explanations to the student's level.

  • Support syllabus-based learning.

  • Provide exam-style questions and marking guidance.

  • Maintain learning progress and topic history.

Include a student-friendly interface and safe, age-appropriate teaching.

Include a student-friendly interface and safe, age-appropriate teaching.

  1. AI Home Fitness Trainer

Create a home fitness section.

Requirements:

  • General fitness and mobility guidance.

  • Beginner-friendly exercise routines.

  • Demonstrations where supported.

  • Warm-up and cool-down suggestions.

Page 5 of 35
  • Adjustable session duration.

  • Rest and recovery reminders.

  • Track completed sessions.

  1. Long Video to Short Clips

Create an AI-powered video clipping workspace.

Requirements:

  • Upload a video or provide a supported video URL.

  • Analyse videos the user owns or has permission to edit.

  • Identify interesting and useful moments.

  • Automatically select highlights.

  • Generate multiple short clips.

  • Support vertical 9:16, square 1:1 and landscape formats.

  • Automatically generate synchronised subtitles.

  • Allow editing of clip start and end points.

  • Preview each clip.

  • Download individual clips.

  1. My Projects

Create a central project library.

Requirements:

  • Save video projects.
Page 6 of 35
  • Save images.

  • Save tutor sessions.

  • Save fitness plans.

  • Save short clips.

  • Display project previews.

  • Allow renaming and organising projects.

  • Allow downloads.

  • Include project search and filtering.

  • Save progress automatically where possible.

  1. AI Assistant

Include a central AI assistant that helps users navigate the platform.

It should:

  • Understand natural-language instructions.

  • Help users choose the correct tools.

  • Explain how features work.

  • Assist with writing prompts.

  • Help organise projects.

  • Provide clear error messages and solutions.

  1. Account and Settings

Provide:

Page 7 of 35
  • User preferences.

  • Theme settings.

  • Language settings.

  • Project storage settings.

  • AI provider configuration.

  • Privacy controls.

  • Account and authentication options where required by the hosting or AI providers.

Offer a guest or local mode where technically possible.

  • Speech synthesis.

  • Music and sound generation.

  • Speech recognition and transcription.

  • Video analysis and clipping.

If a provider is unavailable, display a clear message rather than pretending that generation succeeded.

  • Clearly display any usage limits.

  • Show costs before paid generation.

  • Allow users to choose alternative providers where available.

Design Requirements Implementation:

Page 8 of 35

Elegant Dashboard: A personalized dashboard will greet users, showcasing recent projects, quick access to tools, and an activity feed. It will utilize a clean layout, subtle gradients, and the defined color palette.

Easy Navigation: A consistent navigation bar (sidebar on desktop, bottom bar/hamburger menu on mobile) will provide clear access to all major sections: Video Studio, Image Generator, AI Tutor, Fitness Trainer, Short Clips, My Projects, Settings, and AI Assistant.

  1. AI Video Studio

The AI Video Studio will be a powerful, intuitive workspace for generating video content from minimal input.

Core Functionality:

Single-Prompt Video Generation: Users will input a single written prompt, poem, rhyme, or story. The AI backend will analyze the narrative structure, identifying key events, characters, and emotional arcs.

Automatic Scene Division: A sequence-to-sequence model will automatically break down the input text into logical scenes, generating an underlying storyboard without explicit user input for each scene.

Consistent Characters: A character-generation and tracking module will ensure visual consistency for characters across different scenes within the same video, adapting their poses and expressions based on scene context.

Original Assets: The platform will leverage generative AI for creating unique 3D models for characters, environments, and props, ensuring no copyrighted material is infringed. Animations will also be AI-driven, generating natural movements and expressions.

Page 9 of 35

Automatic Voiceovers/Singing: Text-to-speech (TTS) and text-to-singing (TTSing) AI models will generate natural-sounding narrations or musical vocals, aligning with the tone and rhythm of the story. Users can choose voice styles.

Original Background Music & Sound Effects: AI-driven music generation will create custom instrumental tracks tailored to the video's mood and pacing. A sound effects generator will add context-appropriate audio cues (e.g., footsteps, animal sounds).

Synchronized Captions: Speech-to-text (STT) will automatically transcribe the generated voiceover, creating synchronized captions displayed clearly at the bottom of the video.

Automated Video Assembly: All generated assets (scenes, characters, animations, voiceovers, music, sound effects, captions) will be automatically composited and edited into a complete video sequence.

Video Preview and Download: Users can preview the generated video within the studio. Once satisfied, they can download the final video in standard formats (e.g., MP4).

Video Customization:

Video Length: Options for short (e.g., 30s-1min), medium (e.g., 1-3min), and custom lengths.

Aspect Ratios: Choices including 16:9 (widescreen), 1:1 (square), and 9:16 (vertical).

Animation Styles: While 3D preschool is default, options for other child-friendly styles (e.g., 2D cartoon, puppet show) could be introduced.

Atelier Kids Intro

Page 10 of 35

This will be a dynamic, reusable animated introduction specifically designed for child-focused videos.

Requirements:

Original Logo Animation: A short, engaging animation of the Atelier Studio AI logo, designed to appeal to children.

Child-Friendly Visual Design: Bright colors, whimsical elements, and simple, recognizable shapes will be used.

Original Musical Jingle: A catchy, short melody composed specifically for the intro, free from copyright.

Automatic Inclusion: A toggle in the video studio settings will allow users to Enable or Disable the "Atelier Kids Intro" for nursery rhyme or similar children's content. When enabled, it will be automatically pre-pended to the generated video.

  1. AI Image Generator

The AI Image Generator will be a versatile workspace for creating diverse visual content from text prompts.

Core Functionality:

Text-to-Image Generation: Users will input detailed text prompts describing their desired image.

Multiple Artistic Styles: A wide range of styles will be available, including:

3D Animation: Stylized 3D renderings, similar to Pixar or DreamWorks aesthetics.

Realistic Imagery: Photorealistic renders with fine details.

Page 11 of 35

Illustrations: Hand-drawn or digital illustration styles (e.g., watercolor, pen and ink, vector art).

Cartoon Artwork: Various cartoon styles, from classic animation to modern anime.

Aspect Ratio Selection: Users can choose common aspect ratios like 1:1, 16:9, 9:16, 4:3, etc., affecting the image composition.

Image Previews: Low-resolution previews of generated images will be displayed quickly, allowing users to iterate or choose preferred outputs before full-resolution generation/download.

Download and Save: Users can download high-resolution versions of their images. All generated images will be automatically saved to My Projects for later access.

Generation History: A chronological history of generated images and their

Platform identity

  • App name: Atelier Studio AI; project name: atelier.
  • Unified, responsive, mobile-first AI platform combining AI video creation, image generation, personal tutoring, home fitness guidance and automatic short-video editing.
  • Must be a functional full-stack application with working navigation, forms, project management, backend architecture and integrations — not a landing page, static design, mockup or collection of non-functional buttons.
Page 12 of 35

AI Video Studio

  • Generate a complete video from one written prompt, poem, rhyme or story.
  • Automatically divide content into appropriate scenes; user is not required to write individual scene descriptions.
  • Generate consistent characters throughout the video.
  • Offer colourful, polished 3D preschool animation with original characters, environments and animations.
  • Automatically generate voiceovers or singing; generate original background music and sound effects.
  • Synchronise captions with narration; automatically assemble the complete video.
  • Allow video preview and download.
  • Offer different video lengths, aspect ratios and styles.

Atelier Kids Intro

  • Original reusable animated introduction with original Atelier Studio AI logo animation, colourful child-friendly visual design and an original short musical jingle.
  • Automatically included in nursery-rhyme videos when enabled; users can enable or disable it.
  • Never copy existing copyrighted characters, logos, songs or show introductions.

AI Image Generator

  • Generate images from text prompts with multiple artistic styles: 3D animation, realistic imagery, illustrations and cartoon artwork.
  • Aspect-ratio selection; image previews; download and save generated images; keep image-generation history.
Page 13 of 35

Personal AI Tutor

  • Interactive tutor for all school subjects and academic levels.
  • Text-based conversation; voice interaction where supported.
  • Explain difficult concepts in simple language; answer student questions; give examples and practice exercises.
  • Generate quizzes; mark student answers and explain mistakes.
  • Adapt explanations to the student's level; support syllabus-based learning.
  • Provide exam-style questions and marking guidance.
  • Maintain learning progress and topic history.
  • Student-friendly interface with safe, age-appropriate teaching.

AI Home Fitness Trainer

  • General fitness and mobility guidance; beginner-friendly exercise routines; demonstrations where supported.
  • Warm-up and cool-down suggestions; adjustable session duration; rest and recovery reminders; track completed sessions.
  • Keep recommendations safe and age-appropriate; do not promote extreme exercise, restrictive eating or unrealistic body ideals; include appropriate safety guidance.
Page 14 of 35

Long Video to Short Clips

  • Upload a video or provide a supported video URL.
  • Analyse only videos the user owns or has permission to edit.
  • Identify interesting and useful moments; automatically select highlights; generate multiple short clips.
  • Support vertical 9:16, square 1:1 and landscape formats.
  • Automatically generate synchronised subtitles.
  • Allow editing of clip start and end points; preview each clip; download individual clips.
  • Respect copyright and website access restrictions; never promise URL importing when the source platform does not support it.

My Projects

  • Central project library saving video projects, images, tutor sessions, fitness plans and short clips.
  • Display project previews; allow renaming and organising projects; allow downloads.
  • Project search and filtering; save progress automatically where possible.

AI Assistant

  • Central assistant that understands natural-language instructions.
  • Helps users choose the correct tools; explains how features work; assists with writing prompts; helps organise projects.
  • Provides clear error messages and solutions.

Account and Settings

  • User preferences, theme settings, language settings, project storage settings, AI provider configuration, privacy controls.
  • Account and authentication options where required by the hosting or AI providers.
  • Offer a guest or local mode where technically possible.
Page 15 of 35

AI Integrations and Backend

  • Modular architecture so different AI providers can be connected.
  • Use appropriate APIs or compatible models for: text generation, image generation, video generation, speech synthesis, music and sound generation, speech recognition and transcription, video analysis and clipping.
  • Keep API keys secure on the backend; never expose secret keys in frontend code.
  • If a provider is unavailable, display a clear message rather than pretending generation succeeded.

Pricing and Usage

  • Prioritise free and open-source services; avoid unnecessary paid services.
  • Clearly display any usage limits; show costs before paid generation.
  • Allow users to choose alternative providers where available.
  • Do not advertise unlimited free generation unless the connected provider genuinely supports it.

Content and Safety

  • Support a broad range of legitimate creative and educational content.
  • Follow applicable laws and provider safety policies; protect minors.
  • Do not facilitate abusive, exploitative or illegal content; respect intellectual property and copyright.

Final Delivery

  • Deliver: complete working website; all source code; backend and frontend; database configuration; AI integration architecture; environment-variable instructions; deployment instructions; list of fully working features; list of features requiring API keys, external services or paid plans.
  • Implement features that can genuinely work and clearly identify anything still needing an external AI service.
Page 16 of 35

4. User Personas

Atelier Studio AI serves human roles that share one premium, mobile-first studio but differ in what they create, decide and judge as success. A person may hold more than one role. This is not a closed persona catalog.

RoleResponsibilities and goalsInputsDecisionsObservable successAccess
Creative Video CreatorProduce a complete video from one written prompt, poem, rhyme or story; keep characters consistent; choose length, aspect ratio and style; enable or disable the Atelier Kids IntroPrompt/poem/story text; style and format choicesIntro on/off; final preview approval (scene division is automatic)Assembled video with synchronised captions, voiceover/singing, original music and effects; preview and downloadAI Video Studio, My Projects, AI Assistant
Image MakerGenerate images from text prompts across 3D animation, realistic, illustration and cartoon stylesText prompt; style; aspect ratioStyle and aspect-ratio selection; which images to save or downloadImage previews, saved images and retained generation historyAI Image Generator, My Projects
StudentLearn across school subjects and academic levels; ask questions; practise and be assessedQuestions, answers, level and syllabus contextWhen to request simpler explanations, examples, quizzes or exam-style questionsSimple explanations, marked answers with mistake feedback, quizzes, progress and topic historyPersonal AI Tutor (student-friendly, safe, age-appropriate), My Projects
Fitness ParticipantFollow safe general fitness and mobility guidance at homeSession duration; beginner routine choiceRoutine and duration; rest and recovery adherenceCompleted sessions tracked; warm-up/cool-down and safety guidance followedAI Home Fitness Trainer, My Projects
Clip EditorTurn a long video they own or may edit into multiple short clipsUploaded video or supported video URL; target formatHighlight selection review; clip start/end trimming; format (9:16, 1:1, landscape)Multiple previewable, downloadable clips with synchronised subtitlesLong Video to Short Clips, My Projects
Project OwnerKeep all outputs in one library and stay organisedSaved videos, images, tutor sessions, fitness plans, clipsRenaming, organising, searching and filtering; downloadsPreviews visible, progress saved automatically where possible, items findableMy Projects, AI Assistant
Account Holder / GuestConfigure the studio to personal and provider constraintsPreferences, theme, language, storage, AI provider and privacy choicesProvider selection; guest/local mode where technically possible; cost acceptance before paid generationPreferences applied; usage limits and costs shown before paid generation; clear unavailability messagesAccount and Settings, all workspaces

Supporting actors (not personas): the central AI Assistant (natural-language guidance, tool selection, prompt help, project organisation, error explanations) and the modular AI provider layer (text, image, video, speech synthesis, music/sound, transcription, video analysis), with API keys held server-side. Provider unavailability is surfaced honestly rather than faked.

Cross-role journey pattern: choose a workspace → supply prompt, upload or settings → review generated output → adjust (trim, style, level, duration) → save to My Projects → download. Safety, copyright and minor-protection rules apply to every role and are specified in Functional Requirements.

5. Core User Flows

Page 17 of 35

5.1 Generate a complete video from a single written prompt

Actor: Creator (parent, educator or storyteller). Trigger: Creator opens AI Video Studio and pastes a prompt, poem, rhyme or story.

  1. Creator selects video length, aspect ratio and style, and enables or disables the Atelier Kids Intro toggle for nursery-rhyme content.
  2. Creator submits the text; no per-scene descriptions are required.
  3. The studio analyses narrative structure, divides the text into scenes and builds a storyboard automatically.
  4. Character generation and tracking produce consistent characters across scenes, with poses and expressions adapted per scene; environments and animations are original.
  5. Voiceover or singing, original background music, sound effects and narration-synchronised captions are generated.
  6. All assets are composited into a complete video; when the intro is enabled it is pre-pended automatically.
  7. Creator previews the video in the studio and downloads it (e.g. MP4).

Failure/recovery: If a provider is unavailable, the studio shows a clear message instead of presenting a false success; the creator may retry or switch to an alternative provider where offered. Costs, if any, are shown before paid generation.

Page 18 of 35

5.2 Generate and save an image

Actor: Creator. Trigger: Creator opens the AI Image Generator and enters a text prompt.

  1. Creator chooses an artistic style (3D animation, realistic, illustration, cartoon) and an aspect ratio.
  2. Low-resolution previews appear quickly so the creator can iterate or pick an output before full-resolution generation.
  3. Creator downloads the high-resolution image; every generated image is saved automatically to My Projects and retained in image-generation history.

5.3 Learn with the Personal AI Tutor

Actor: Student. Trigger: Student starts a tutor session on a subject or syllabus topic.

  1. Student asks questions by text, or by voice where supported.
  2. The tutor explains concepts in simple language adapted to the student's level, gives examples and practice exercises, and generates quizzes.
  3. Student submits answers; the tutor marks them, explains mistakes and offers exam-style questions with marking guidance.
  4. Progress and topic history are maintained across sessions and the session is saved to My Projects.

Constraint: Interface and teaching remain student-friendly, safe and age-appropriate.

Page 19 of 35

5.4 Follow a home fitness session

Actor: User. Trigger: User opens the AI Home Fitness Trainer.

  1. User sets a session duration and receives a beginner-friendly routine with warm-up and cool-down suggestions and demonstrations where supported.
  2. User completes the session; rest and recovery reminders are surfaced.
  3. The completed session is tracked and the fitness plan is saved to My Projects.

Constraint: Guidance stays safe and age-appropriate, avoiding extreme exercise, restrictive eating or unrealistic body ideals.

5.5 Turn a long video into short clips

Actor: Creator working with footage they own or are permitted to edit. Trigger: Creator uploads a video or supplies a supported video URL.

  1. The workspace analyses the video and identifies interesting, useful moments, selecting highlights automatically.
  2. Multiple short clips are generated in vertical 9:16, square 1:1 or landscape formats with synchronised subtitles.
  3. Creator adjusts each clip's start and end points, previews it, and downloads individual clips.

Failure/recovery: URL importing is offered only where the source platform supports it; copyright and site access restrictions are respected.

Page 20 of 35

5.6 Organise work in My Projects

Actor: Creator or student. Trigger: Any saved output, or the user opening the project library.

  1. Video projects, images, tutor sessions, fitness plans and short clips appear with previews.
  2. User searches and filters the library, renames and organises projects, and downloads items.
  3. Progress is saved automatically where possible.

5.7 Get help from the AI Assistant

Actor: Any user. Trigger: User asks the central assistant a natural-language question.

  1. The assistant interprets the request, recommends the correct tool and explains how features work.
  2. It helps draft prompts and organise projects.
  3. On errors it returns clear messages and solutions rather than silent failure.

5.8 Configure account and preferences

Actor: Any user. Trigger: User opens Settings.

  1. User sets preferences, theme, language, project storage, AI provider configuration and privacy controls.
  2. Authentication is requested only where the hosting or AI providers require it; a guest or local mode is offered where technically possible.
  3. Where several providers exist, the user may choose an alternative; usage limits and costs are displayed before paid generation.
Page 21 of 35

6. Visuals Colors and Theme

[Design proposal; unspecified choices are defaults.]

6.1 Visuals, Colours and Theme

Atelier Studio AI reads as a premium, elegant, classic and modern creative instrument desk, disciplined by the Dieter Rams muse: legible, controllable, honest. The user's exact palette is authoritative and is assigned by role:

RoleTokenUse
CanvasWarm Ivory #F4EFE6Principal background, main content areas
SurfaceSoft Beige #E5DACAInset work surfaces, secondary cards, active-project panel
Text / rulesCharcoal #292929Body text, 1px rules at low opacity, secondary UI, shadows
PrimaryForest Green #26352DNavigation spine, primary actions, selected tool states, dark media-preview wells
AccentAntique Gold #D5BC8AActive index bar, progress rails, credits, premium controls, generation status — a signal, never a decorative wash

High-contrast pairings are Charcoal-on-Ivory and Ivory-on-Forest-Green. No blue or indigo accents, gradients, neon glows, glassmorphism or generic AI orb imagery.

Typography. Headings use DM Serif Display (regular/medium, sentence case, compact leading, no ornamental italics in controls); all UI, labels and instructions use Fira Sans medium-to-semibold, with tabular numerals for timings, credits and generation progress. Scale: display clamp(44px, 6vw, 88px) (44px mobile minimum); page title clamp(30px, 4vw, 52px); section title 24/28px; card title 17/20px; body 16px; labels 12px at 0.08em tracking; numeric data 14–18px tabular.

Page 22 of 35

Shape and rhythm. Strict 8px spacing rhythm; 12px rounded outer cards, 8px internal controls; 1px Charcoal rules at low opacity. Cards are structured instruments — title strip, aligned metadata row, defined working area, visible action edge — not floating tiles. Gold status dots, slim progress rails and circular scene-step counters replace soft blobs and exaggerated shadows.

Layout. Desktop: fixed 248px Forest Green tool rail, 64px utility bar, ordered 12-column field on Warm Ivory. At 768px the rail collapses to an icon-and-label drawer. At 375px a five-item labelled bottom bar (Studio, Images, Learn, Projects, More) with each workspace as one full-width sequential panel and a sticky primary action above the safe area. Headlines, labels, numbers and controls stay whole and inside their container at 375/768/1280px, wrapping or scaling via clamp().

Imagery. Atelier's own output is the visual proof: one framed video still, image preview or captioned clip timeline per feature area, inset in Forest Green matte stages with Antique Gold playheads and ivory caption strips. Generated video content is colourful, polished 3D preschool animation with original characters, environments and animations; playful geometric character-and-sun motifs appear only inside the optional Atelier Kids Intro and child-video previews, while the shell stays mature and calm.

Loading. A Forest Green field where a gold line constructs the square Atelier monogram, with a plain status sentence beneath — never a decorative spinner.

  1. Brand Identity and Design

App name: Atelier Studio AI

Design style: Premium, elegant, classic, modern and professional.

Use this exact colour palette:

Page 23 of 35
  • Forest Green: #26352D

  • Warm Ivory: #F4EFE6

  • Antique Gold: #D5BC8A

  • Charcoal: #292929

  • Soft Beige: #E5DACA

Design requirements:

  • Elegant dashboard.

  • Beautiful typography.

  • Smooth transitions and animations.

  • Premium cards and rounded corners.

  • Responsive desktop, tablet and mobile layouts.

  1. Brand Identity and Design

Design Style: Premium, elegant, classic, modern, and professional. The aesthetic will combine sophistication with intuitive usability, ensuring a seamless experience across all features.

Colour Palette:

Forest Green: #26352D (Primary brand accent, for headings, important buttons)

Warm Ivory: #F4EFE6 (Backgrounds, main content areas)

Antique Gold: #D5BC8A (Highlight elements, premium accents, active states)

Charcoal: #292929 (Text, secondary UI elements, shadows)

Page 24 of 35

Soft Beige: #E5DACA (Secondary backgrounds, subtle card accents)

Beautiful Typography: We'll select a premium sans-serif font for headings (e.g., Inter or Montserrat) and a legible serif or clean sans-serif for body text (e.g., Lora or Open Sans), ensuring readability and a refined feel.

Smooth Transitions and Animations: Subtle CSS transitions and JavaScript animations will enhance user interaction, providing feedback and making the interface feel fluid and responsive. Examples include hover effects on cards, navigation menu slides, and content fades.

Premium Cards and Rounded Corners: All interactive elements, project previews, and content blocks will be presented as cards with gently rounded corners (e.g., border-radius: 8px or 12px), featuring soft shadows for depth.

Responsive Layouts: The entire platform will be built with a mobile-first approach using Flexbox and CSS Grid, ensuring optimal viewing and interaction on desktops, tablets, and smartphones. Breakpoints will be carefully chosen to adapt content gracefully.

Consistent Branding: The chosen color palette, typography, and design elements will be applied uniformly across all pages and features, reinforcing the Atelier Studio AI brand identity.

Colourful 3D Preschool Animation: The primary animation style will be vibrant, polished 3D animation optimized for children's content, featuring soft lighting and engaging visuals.

  • Design style: premium, elegant, classic, modern and professional.
  • Exact colour palette: Forest Green #26352D; Warm Ivory #F4EFE6; Antique Gold #D5BC8A; Charcoal #292929; Soft Beige #E5DACA.
  • Elegant dashboard; beautiful typography; premium cards and rounded corners.
  • Consistent branding throughout the website.
Page 25 of 35

7. Signature Design Concept

[Design proposal; unspecified choices are defaults.]

The first dashboard screen is a full-width creative command desk, not a promotional SaaS hero. A 248px Forest Green navigation spine runs down the left with small uppercase Fira Sans labels, a gold active index bar and grouped destinations for Create, Learn and Library. The remaining Warm Ivory viewport opens with an oversized DM Serif Display greeting — “Make the next thing.” — set flush left at 44px on mobile through 88px on desktop.

Beneath it, a wide Soft Beige active-project panel is divided by crisp rules: a 16:9 Forest Green video-preview well occupies two-thirds, while a scene ledger with numbered rows, caption state, voice state and an Antique Gold render-progress rail occupies the remaining third. A single Forest Green “Create video” control is pinned to the panel's lower edge. On mobile the heading wraps above the whole preview panel and the scene ledger follows below; no text or control is overlapped by preview imagery.

Every generation workspace reuses the numbered production ledger: prompt, style, characters, voice, music, captions and export as aligned rows with a status dot, time or cost, and an explicit retry or configuration action. Media previews share one recognizable Atelier frame — Forest Green matte stage, gold timeline playhead, ivory caption strip — across video, image and clip editors. Provider unavailability surfaces as clear inline availability, queue and retry states; the interface never pretends work completed.

Page 26 of 35

8. Interaction Model & Motion Direction

[Design proposal; unspecified choices are defaults.]

Interaction Model: Static (direction) Motion Tempo: restrained Hero Dimensionality: flat

Landing Hero Motion Brief. The focal subject is the active-project desk: the Forest Green video-preview well and its numbered scene ledger. Input→transformation→outcome thesis: a submitted prompt populates the ledger rows in sequence, each status dot resolving from pending to complete while the Antique Gold progress rail advances and the completion number ticks once — using only accepted generation, queue and cost states. Motion vocabulary is mechanical and restrained: 160ms opacity and position transitions, precise active-rule movement, sequential scene-row reveal after a generation request. The composed first frame shows the completed monogram, the greeting, the preview well and a ledger at rest with visible costs and provider status. Reduced-motion renders the completed monogram, static progress states and all rows fully readable without sequencing.

  • Easy navigation.

  • Attractive loading screens.

  • Consistent branding throughout the website.

Attractive Loading Screens: Custom loading animations featuring the Atelier Studio AI logo or subtle geometric patterns in the brand colors will be displayed during content generation or data fetching, making wait times less monotonous.

Page 27 of 35
  • Smooth transitions and animations.
  • Attractive loading screens.
  • Responsive desktop, tablet and mobile layouts; easy navigation.
  • Functional navigation and buttons; loading indicators; error handling.
Page 28 of 35

9. Non-Functional Requirements

Keep API keys secure on the backend. Never expose secret keys in frontend code.

  1. Content and Safety
  • Support a broad range of legitimate creative and educational content.

  • Follow applicable laws and provider safety policies.

  • Protect minors.

  • Do not facilitate abusive, exploitative or illegal content.

  • Respect intellectual property and copyright.

  • Test all implemented features.

  • Provide clear deployment instructions.

  1. Deployment instructions.

  2. Final Delivery

Deliver:

  1. A complete working website.

  2. All source code.

  3. Backend and frontend.

  4. Database configuration.

  5. AI integration architecture.

Page 29 of 35
  1. Environment-variable instructions.

  2. A list of features that are fully working.

  3. A list of features requiring API keys, external services or paid plans.

  • Real full-stack application with maintainable frontend and backend.
  • Responsive and mobile-friendly.
  • Proper data storage.
  • Authentication added only where needed.
  • Error handling and loading indicators included.
  • Functional navigation and buttons.
  • Test all implemented features.
  • Provide clear deployment instructions.
Page 30 of 35

10. Tech Stack

  1. AI Integrations and Backend

Build a modular architecture so different AI providers can be connected.

  1. AI Integrations and Backend

Use appropriate APIs or compatible models for:

  • Text generation.

  • Image generation.

  • Video generation.

  1. Technical Requirements
  • Build a real full-stack application.

  • Use a maintainable frontend and backend.

  • Make it responsive and mobile-friendly.

  • Include proper data storage.

  • Add authentication only where needed.

  • Include error handling.

  • Include loading indicators.

  • Add functional navigation and buttons.

Page 31 of 35

11. Assumptions and Constraints

To resolve this, you typically need to:

Check the API Documentation: Look for the specific endpoint you're hitting to understand the expected structure, data types, and constraints for the request body.

Review Your Request Body: Compare the data you are sending against the documentation to identify any discrepancies.

Examine the Full Error Message: Often, the error message will provide more details about which field failed validation and why (e.g., "Field 'email' is invalid" or "Field 'age' must be greater than 0").

Never copy existing copyrighted characters, logos, songs or show introductions.

Keep recommendations safe and age-appropriate. Do not promote extreme exercise, restrictive eating or unrealistic body ideals. Include appropriate safety guidance.

Respect copyright and website access restrictions. Never promise URL importing when the source platform does not support it.

  1. Pricing and Usage

Prioritise free and open-source services wherever possible.

  • Avoid unnecessary paid services.

  • Do not advertise unlimited free generation unless the connected provider genuinely supports it.

Page 32 of 35

IMPORTANT: Do not deliver only a mockup, landing page or collection of non-functional buttons. Implement the features that can genuinely work, and clearly identify anything that still needs an external AI service.

Page 33 of 35

12. Glossary

Underwriter

MT

Dashboard

AI Chat

Underwriter Gen

Account

Billing & Credits

Referrals

Team

Upgrade Plan

Documentation

Support

About Underwriter

Why is he showing body failed validation

AI

The "body failed validation" error indicates that the data you sent in the request body (the main content of your request, often in JSON or XML format) does not meet the expected criteria defined by the server or API.

Here are the most common reasons you might encounter this error:

Page 34 of 35

Missing Required Fields: You didn't include a piece of data that the server expects to be present.

Incorrect Data Types: You sent data in the wrong format (e.g., sending a string like "hello" when a number like 123 was expected).

Invalid Data Format: The data you sent doesn't conform to a specific pattern (e.g., an email address isn't in a valid email format, a date string isn't in the expected YYYY-MM-DD format).

Value Out of Range/Length: A numerical value is outside an allowed range (e.g., an age of -5), or a string exceeds a maximum character length.

JSON/XML Syntax Errors: The request body itself is malformed JSON or XML, preventing the server from even parsing it correctly.

Enum Mismatch: You provided a value for a field that should come from a predefined list (an enum), but your value isn't on that list.

Ask anything...

Page 35 of 35

No completed page designs yet.

Completed design pages will appear here when they are ready to preview.

Landing: Open studio
Account and Settings: Set preferences and theme
Account and Settings: Choose language and storage
Account and Settings: Configure AI provider
Account and Settings: Set privacy controls
Account and Settings: Enable guest or local mode
AI Video Studio: 1. Review usage limits and costs
AI Video Studio: 2. Read provider unavailability
AI Video Studio: 3. Switch alternative provider

No completed page designs yet.

Completed design pages will appear here when they are ready to preview.

Landing: Open studio
Account and Settings: Set preferences and theme
Account and Settings: Choose language and storage
Account and Settings: Configure AI provider
Account and Settings: Set privacy controls
Account and Settings: Enable guest or local mode
AI Video Studio: 1. Review usage limits and costs
AI Video Studio: 2. Read provider unavailability
AI Video Studio: 3. Switch alternative provider