AI App Interface Architect

Product name: CampaignForge AI AI product type: Multimodal AI marketing content generation platform Target users: Marketing managers Content strategists Digital agencies E-commerce teams Startup founders Primary user roles: Workspace Owner Content Creator Reviewer Brand Manager Client Viewer Billing Administrator Primary user jobs: Create campaign assets Upload brand references Generate landing-page copy Generate email sequences Generate social content Compare variants Revise outputs Save reusable templates Export approved content Manage usage AI models: Text-generation model Image-generation model Document-analysis model Automatic model routing for selected workflows Model capabilities: Generate structured marketing copy Analyze uploaded briefs and brand documents Create image concepts Generate multiple content variants Rewrite selected sections Summarize source documents Model limitations: May produce inaccurate claims May misunderstand brand context Cannot independently verify legal claims Cannot guarantee image text accuracy Requires human review before publication Primary input types: Text PDF DOCX Images URLs Brand guidelines Structured campaign forms Supported file types: PDF DOCX TXT PNG JPG CSV Exact support and limits require verification Primary output types: Landing-page copy Email sequences Social posts Ad copy Campaign briefs Image concepts Structured JSON Downloadable documents Generation modes: Quick Draft Brand-Aligned Campaign Multi-Channel Campaign Create Variations Rewrite Selected Section Need model selection: Simplified selection for advanced users Automatic routing for standard workflows Need prompt templates: Yes Need projects or folders: Yes Need generation history: Yes Need collaboration: Yes Need citations or sources: Yes, for document-derived claims where supported Need output comparison: Yes Need editing or revision: Yes Need export: Yes Credits or usage model: Monthly included credits with additional usage options Exact credit calculations require verification Plan limits: Different generation limits, model access, team seats, storage, and export options Exact limits require verification Queue behavior: Image generations may enter a queue Text generations generally stream Exact timing must not be invented Safety restrictions: Block prohibited content Warn about unsupported claims Require human review for regulated content Privacy and retention: Workspace-controlled history and file retention Exact retention and training-use policies require verification Primary activation event: The user generates, reviews, edits, and saves the first multi-channel campaign asset set. Current interface problems: The current interface has one large prompt field and one Generate button. Files are uploaded in a separate settings page. Users do not know whether brand files are active. Regeneration overwrites the previous result. There is no comparison mode. Credits are visible only after generation. Failed jobs clear the prompt. History is a flat chronological list. Mobile users cannot access the stop button when the keyboard is open. Output actions are scattered across several menus. Safety blocks appear as generic errors. Frontend stack: Next.js React TypeScript Tailwind CSS Design system: Custom design system using shadcn/ui and Radix UI Responsive targets: Wide desktop Desktop Tablet Mobile Portrait and landscape Accessibility target: WCAG 2.2 AA implementation review Localization: English initially Spanish, German, and French planned Allow at least 30% text expansion Need output: Complete AI application architecture Application shell Prompt composer File upload Brand context panel Templates Model selection Advanced controls Generation lifecycle Queue and streaming states Result preview Comparison Revision History Projects Credits Usage limits Settings Safety states Errors Mobile behavior Accessibility Analytics Experiment roadmap Developer handoff Acceptance criteria QA checklist Risk assessment Need variations: Structured Campaign Studio Conversational Copilot Template-First Generator Special constraints: Do not invent model capabilities. Do not invent file support. Do not invent pricing or credit usage. Preserve prompts and files after errors. Do not overwrite previous generations. Keep safety messages distinct from technical errors. Use fictional campaign and customer data.

=== AI APP INTERFACE ARCHITECTURE === Product: CampaignForge AI Product Type: Multimodal AI marketing content generation platform Primary Users: Marketing managers, content strategists, digital agencies, e-commerce teams, and startup founders. Primary Product Job: Transform campaign briefs, brand references, and product information into editable, reviewable, multi-channel campaign assets. Primary Activation: The user generates, reviews, edits, and saves the first campaign asset set. === EXECUTIVE SUMMARY === The current product behaves like a generic AI wrapper rather than a professional campaign workspace. The redesigned architecture should separate four major activities: 1. Campaign setup 2. AI generation 3. Output review and revision 4. Project organization and export The recommended primary architecture is a structured campaign studio with: - Left project and template navigation - Central prompt and output workspace - Right context and output inspector - Visible generation history - Persistent brand references - Versioned outputs - Transparent credit estimates - Integrated revision and comparison The conversational copilot should remain available as a supporting workflow rather than replacing the structured campaign experience. === PRODUCT JOB MODEL === Primary User: Marketing Manager Primary Job: Create a consistent campaign across landing pages, email, social, and advertising channels. Inputs: - Campaign objective - Audience - Product information - Offer details - Brand guidelines - Source documents - Reference images AI Transformation: Analyze the supplied context and generate structured campaign assets. Outputs: - Landing-page copy - Email sequence - Social posts - Ad variants - Campaign summary - Image concepts User Decision: Select, edit, approve, and export the most suitable outputs. Next Action: Save the campaign, request review, create variations, or export approved assets. === APPLICATION SHELL === Global Navigation: - Home - Campaigns - Templates - History - Brand Library - Team - Usage - Settings Campaign Navigation: - Brief - Sources - Generations - Approved Assets - Exports Workspace Header: - Campaign title - Status - Owner - Collaborators - Favorite - Share - More actions Main Workspace: - Composer and input configuration - Generated output canvas - Version and comparison controls Inspector: - Brand context - Model - Output settings - Credits - Metadata - Safety notes === PROMPT COMPOSER === Purpose: Collect a campaign instruction while preserving structured brand and product context. Primary Fields: - Campaign objective - Audience - Product or offer - Key message - Required channels Optional Prompt: Additional instructions Attachments: - Brand guidelines - Product documents - Reference images - Campaign research - Approved claims Template: Select or change a campaign template. Model: Automatic routing by default. Advanced users may select from verified eligible models. Cost Preview: Show a verified estimate before generation. Primary CTA: Generate Campaign Secondary Actions: - Save Draft - Preview Inputs - Reset Optional Settings Keyboard: - Multiline input - Visible keyboard shortcut - Submit only through a deliberate shortcut - Accessible attachment removal - Reachable stop control === ATTACHMENT SYSTEM === Attachment Chip Includes: - File name - Type - Processing status - Active or excluded status - Remove action - Privacy information access States: - Validating - Uploading - Processing - Ready - Unsupported - Too Large - Parsing Failed - Removed Critical Rule: A file is not treated as active context until processing completes successfully. Error Example: We uploaded the file, but its text could not be processed. Your prompt remains unchanged. Replace the file, retry processing, or continue without it. === BRAND CONTEXT PANEL === Sections: - Brand voice - Approved terminology - Restricted claims - Audience - Visual direction - Active source files - Required disclaimers Status: Active brand context should remain visible during generation and revision. Action: Edit Brand Context Integrity: Do not imply that the AI fully understands or verifies every brand requirement. === TEMPLATE SYSTEM === Categories: - Recommended - Multi-Channel Campaign - Product Launch - Lead Generation - E-Commerce Promotion - Event Campaign - Saved - Team - Advanced Template Card: - Name - Purpose - Required inputs - Output channels - Default settings - Preview - Owner - Version - Limitations Primary Action: Use Template Secondary Actions: - Preview - Save a Copy - Share - View Version === MODEL SELECTION === Default: Automatic Routing Description: CampaignForge selects a verified eligible model based on the selected output and account plan. Advanced Options: - Text Model - Image Model - Document Analysis Model Each model option should display only verified information regarding: - Best-supported tasks - Relative speed - Relative cost - Modalities - Context limitations - Plan availability Avoid unsupported labels such as Most Accurate or Best Model. === ADVANCED CONTROLS === Text: - Output length - Tone - Reading level - Language - Number of variants - Required format - Citation preference Image: - Aspect ratio - Resolution - Style direction - Reference strength - Number of outputs - Negative prompt where supported Rules: - Closed by default - Plain-language labels - Clear reset action - Verified model support - Settings preserved within the campaign - Plan restrictions communicated before generation === GENERATION LIFECYCLE === Draft: Inputs can be edited. Validating: Required fields and files are checked. Queued: The job is waiting for verified resources. Generating: The model is producing output. Streaming: Text output is arriving progressively. Processing: Image or document output is being finalized. Partially Completed: Some campaign assets completed while others failed. Completed: All requested outputs are available. Cancelled: The user stopped the generation. Blocked: The request or selected output could not be completed because of a safety restriction. Failed: A technical or model error prevented completion. Archived: The generation remains available in history but is removed from active work. === QUEUE STATE === Message: Your image concepts are queued. Display: - Job status - Campaign name - Requested outputs - Cancel action - Background-processing option - Completion notification option Do Not Display: An exact wait time unless verified. Credit Behavior: Explain whether credits are reserved, charged, or released. === STREAMING STATE === Requirements: - Keep layout stable - Show active generation status - Provide Stop Generation - Preserve partial content when safe - Mark content as incomplete - Avoid enabling final export prematurely - Announce start and completion without announcing every token - Handle network interruption - Preserve the prompt and files === RESULT PREVIEW === Result Header: - Asset type - Version - Model - Status - Timestamp - Credit usage - Source context - Favorite - Share - Export Result Body: - Editable content - Citations where supported - Claim warnings - Source references - Version markers - User edits Result Footer: - Revise - Create Variation - Compare - Copy - Download - Export - Save as Template - Request Review - Approve === OUTPUT CONTROL SYSTEM === Copy: Copies the selected asset. Download: Downloads the verified supported format. Export: Sends the asset to a verified connected destination. Revise: Creates a new version. Create Variation: Generates a related alternative without replacing the current result. Approve: Moves the version to Approved Assets. Reject: Marks the output as unsuitable while preserving it in history. Delete: Requires confirmation and explains retention behavior. === REVISION SYSTEM === Revision Modes: - Natural-language follow-up - Selected-text rewrite - Tone adjustment - Shorten - Expand - Translate - Change audience - Replace claim - Regenerate channel - Edit source context Rules: - Preserve the original version - Show the active version - Allow undo - Explain additional cost - Keep citations and source references aligned - Do not overwrite approved assets automatically === COMPARISON VIEW === Supported Comparison: - Two text variants - Two image concepts - Two model outputs - Two prompt versions Comparison Information: - Version - Model - Settings - Prompt source - Cost - Generation time when verified - User edits - Safety or claim warnings Actions: - Select Preferred - Merge Selected Text where supported - Favorite - Export - Continue Editing Mobile: Use a sequential comparison mode with persistent version labels. === GENERATION HISTORY === Filters: - Campaign - Output type - Model - Status - Owner - Date - Favorite - Credits used History Item: - Campaign name - Prompt summary - Asset types - Status - Version count - Model - Date - Owner - Credits - Actions Rules: - Preserve failed jobs - Distinguish drafts, queued jobs, completed generations, cancelled jobs, blocked outputs, and failures - Mask sensitive prompt content where necessary - Support rename, archive, restore, and delete - Explain retention behavior === PROJECTS AND FOLDERS === Project: Campaign Contains: - Brief - Brand context - Source files - Templates - Generations - Approved assets - Exports - Collaborators - Usage Permissions: - Owner - Editor - Reviewer - Viewer Project Actions: - Rename - Duplicate - Share - Archive - Delete === CREDITS AND USAGE === Usage Panel: - Current credit balance - Included monthly allowance - Used credits - Reserved credits - Verified reset date - Estimated current-generation cost - Final completed-generation cost - Failed-generation behavior - Plan limits States: - Healthy - Approaching Limit - Limit Reached - Overage Enabled - Overage Disabled - Payment Issue - Credits Reserved - Credits Released Integrity: All values, limits, charges, refunds, and reset behavior require verification. === SETTINGS ARCHITECTURE === User Settings: - Profile - Language - Appearance - Accessibility - Notifications Workspace Settings: - Brand defaults - Model defaults - Safety settings - File retention - History retention - Team - Permissions - Integrations Billing: - Plan - Usage - Credits - Payment methods - Invoices - Limits Generation Defaults: - Tone - Language - Output length - Model routing - Export format === SAFETY AND MODERATION STATES === Warning: The output may require professional review. Blocked: The selected request cannot be completed. Partial Completion: Some assets were generated while another request was blocked. Claim Warning: A generated statement could not be verified from the supplied sources. Safety Message Structure: - What happened - Which request or asset was affected - What remains available - What the user can change - How to continue - Review or support path when available Do not present safety restrictions as generic technical errors. === ERROR ARCHITECTURE === Error: Model unavailable Message: The selected model is temporarily unavailable. Your prompt, files, campaign settings, and previous outputs have been preserved. Credit Behavior: Display verified charge or release behavior. Primary Action: Retry Secondary Action: Choose Another Eligible Model Error: File processing failed Message: The file uploaded successfully, but its content could not be processed. Your campaign draft remains unchanged. Primary Action: Retry Processing Secondary Actions: - Replace File - Remove File - Continue Without File === EMPTY STATES === No Campaigns: Heading: Create your first AI campaign workspace Description: Start with a structured template, upload your brand references, and generate a complete campaign asset set. Primary CTA: Create Campaign Secondary CTA: Explore Templates No Generations: Heading: Generate the first campaign assets Description: Review your campaign inputs, choose the required channels, and generate a versioned asset set. Primary CTA: Generate Campaign Filtered Empty: Heading: No generations match these filters Actions: - Clear Filters - Change Date Range - View All Campaigns === MOBILE ARCHITECTURE === Navigation: Collapsible project navigation Composer: Dedicated full-screen or bottom-sheet composer with: - Visible attachments - Model and mode summary - Advanced settings access - Cost estimate - Generate and Stop controls Results: One asset at a time with a persistent asset switcher. Output Actions: Scrollable action toolbar or accessible action sheet. History: Dedicated screen rather than a permanently visible sidebar. Comparison: Sequential version review. Keyboard: - Keep prompt visible - Keep Generate or Stop reachable - Prevent sticky controls from covering the input - Respect safe areas === ACCESSIBILITY REQUIREMENTS === - Semantic page and region structure - Logical headings - Accessible names - Keyboard navigation - Visible focus - Logical focus order - Persistent composer label - Keyboard-accessible file selection - Drag-and-drop alternatives - Accessible model selector - Generation status announcements - Streaming start and completion announcements - Error association - Modal and drawer focus management - Reduced-motion behavior - Sufficient contrast - Non-color status indicators - Browser zoom and reflow - Adequate touch targets - Mobile keyboard support - Captions and transcripts for media - Accessible tables and structured outputs === ANALYTICS EVENT MAP === Event: prompt_submitted Properties: - workflow_type - template_id - input_modalities - model_routing_mode - device_type Event: generation_started Properties: - output_types - model_ids - estimated_cost_bucket - project_id Event: generation_completed Properties: - output_types_completed - partial_completion - final_cost_bucket - duration_bucket Event: output_viewed Properties: - output_type - version - project_id Event: output_revised Properties: - revision_type - output_type - source_version Event: activation_achieved Properties: - activation_path - first_output_type - template_used - device_type Privacy: Do not include raw prompts, generated content, customer names, email addresses, file contents, sensitive file names, credentials, tokens, or private source data unless explicitly approved and necessary. === ACTIVATION METRIC === Primary Activation: The user generates, reviews, edits, and saves the first campaign asset set. Supporting Signals: - Template selected - Brand file processed - First generation completed - Output viewed - Revision completed - Campaign saved Do Not Use Alone: - Account creation - Prompt submitted - Credits viewed - Generation started === EXPERIMENT ROADMAP === Experiment 1: Template-First Versus Blank Prompt Hypothesis: Showing structured campaign templates will increase first successful generation and reduce prompt abandonment. Primary Metric: First successful generation rate Guardrail: Output revision rate Experiment 2: Cost Preview Hypothesis: Showing a verified pre-generation estimate will reduce unexpected limit interactions without reducing qualified generation attempts. Primary Metric: Successful generation completion Guardrail: Prompt abandonment Experiment 3: Versioned Regeneration Hypothesis: Preserving previous results and offering comparison will increase revision and save rates. Primary Metric: Saved campaign asset rate Experiment 4: Integrated Brand Context Hypothesis: Keeping active brand references visible during generation will reduce uncertainty and repeated file uploads. Primary Metric: First-output review rate Guardrail: File-processing errors === DEVELOPER HANDOFF === Required Components: - AppShell - GlobalNavigation - ProjectNavigation - CampaignHeader - PromptComposer - AttachmentChip - FileUpload - TemplateSelector - ModelSelector - AdvancedSettings - CreditEstimate - GenerationStatus - QueueState - StreamingOutput - ResultPreview - OutputToolbar - RevisionPanel - ComparisonView - GenerationHistory - ProjectCard - UsagePanel - LimitState - SafetyMessage - ErrorState - EmptyState Required Data Models: - User - Workspace - Role - Campaign - Prompt - Template - File - Model - Generation - Output - Version - Citation - Project - CreditTransaction - UsageLimit - SafetyState - Export - Feedback Implementation Rules: - Preserve prompts and files after failure. - Never overwrite a previous generation. - Keep generation state explicit. - Display credit behavior transparently. - Distinguish technical failure from moderation. - Keep file-processing state visible. - Preserve keyboard access. - Avoid duplicate analytics events. - Use semantic status values. - Verify all capability and pricing data. === IMPLEMENTATION SEQUENCE === 1. Confirm the product job and model capabilities. 2. Confirm inputs, outputs, files, and models. 3. Confirm credit and plan rules. 4. Approve the application shell. 5. Implement prompt composer and attachments. 6. Implement template and model selection. 7. Implement generation lifecycle. 8. Implement result preview and controls. 9. Implement revision, versioning, and comparison. 10. Implement history and projects. 11. Implement usage and plan-limit states. 12. Implement safety and errors. 13. Implement mobile behavior. 14. Implement accessibility. 15. Add analytics. 16. Complete functional and visual QA. 17. Launch prioritized experiments. === ACCEPTANCE CRITERIA === Prompt Preservation: Given a user submits a campaign prompt with three files, when generation fails, then the prompt, attachments, template, model settings, and campaign context remain available for retry. Version Preservation: Given a completed output is regenerated, when the new generation finishes, then the previous version remains available and the user can compare both results. Credit Transparency: Given a generation has a verified estimated cost, when the user prepares to generate, then the estimate appears before confirmation and the final usage appears after completion. File Processing: Given an uploaded file cannot be parsed, when processing fails, then the file is not silently treated as active context, the prompt remains preserved, and the user can retry, replace, remove, or continue without it. Safety Clarity: Given one campaign asset is blocked by a safety restriction, when the generation completes partially, then completed assets remain accessible and the blocked asset displays a distinct explanation and recovery path. Mobile Keyboard: Given a mobile user enters a long prompt, when the virtual keyboard opens, then the composer remains usable and the Generate or Stop action remains reachable without covering the input. === QA CHECKLIST === Composer: - Verify multiline input. - Verify templates. - Verify attachments. - Verify model selection. - Verify limits. - Verify keyboard shortcuts. - Verify cost estimate. - Verify prompt preservation. Files: - Verify supported files. - Verify unsupported files. - Verify size limits. - Verify processing. - Verify retry. - Verify removal. - Verify privacy copy. Generation: - Verify validation. - Verify queue. - Verify streaming. - Verify cancellation. - Verify partial completion. - Verify blocking. - Verify failure. - Verify completion. - Verify credit behavior. Outputs: - Verify copy. - Verify export. - Verify revision. - Verify variation. - Verify comparison. - Verify versioning. - Verify citations. - Verify long content. History: - Verify search. - Verify filters. - Verify status. - Verify archive. - Verify restore. - Verify deletion. - Verify retention copy. Responsive: - Verify wide desktop. - Verify desktop. - Verify tablet. - Verify mobile. - Verify landscape. - Verify virtual keyboard. - Verify safe areas. Accessibility: - Verify labels. - Verify keyboard access. - Verify focus. - Verify upload alternatives. - Verify generation announcements. - Verify streaming behavior. - Verify errors. - Verify zoom and reflow. - Verify reduced motion. Analytics: - Verify event triggers. - Verify no duplicates. - Verify privacy. - Verify failure events. - Verify activation event. === RISKS === Risk: Users misunderstand model capabilities. Mitigation: Use task-oriented model descriptions and verified limitations. Risk: Credit usage feels unpredictable. Mitigation: Show verified estimates, final usage, reservations, and refund behavior. Risk: Sensitive files appear in unsafe previews. Mitigation: Mask sensitive previews and define role-based access. Risk: Regeneration creates accidental data loss. Mitigation: Create immutable versions and explicit deletion behavior. Risk: Streaming overwhelms assistive technology. Mitigation: Announce only meaningful generation milestones and provide a stable final reading state. Risk: Safety restrictions appear inconsistent. Mitigation: Separate technical errors, moderation states, and professional-review warnings. === KNOWN LIMITATIONS === - Model capabilities require verification. - Supported files and limits require verification. - Pricing and credit calculations require verification. - Privacy and retention behavior require verification. - Safety and moderation behavior require testing. - Export and integration support require testing. - Accessibility requires implementation validation. - Analytics must be implemented and verified. - AI outputs may remain inaccurate or unsuitable. - The interface architecture does not guarantee conversion, retention, revenue, or user satisfaction. === FINAL INTEGRITY NOTE === All model capabilities, supported files, generation costs, credit rules, plan limits, latency expectations, export options, privacy statements, data-retention behavior, safety policies, licensing terms, and commercial-use rights must be verified before publication. The interface architecture is designed to improve clarity, control, trust, and workflow continuity. It does not guarantee model accuracy, output quality, conversion, retention, revenue, or user satisfaction.