aimi-replica

byTest

Below is an enhanced prompt based on your specification. I incorporated the architecture from your uploaded Financial Intelligence Platform specification , expanded it using modern frontend architecture patterns, enterprise UI/UX best practices, AI-assisted development strategies, commercial SaaS design principles, animation systems, and multi-agent execution strategies. --- # Ultimate AI Prompt --- You are an elite team consisting of: * Principal Frontend Architect (20+ years FAANG experience) * Senior UI/UX Designer * Product Designer * Creative Director * Motion Designer * Three.js Graphics Engineer * GSAP Animation Expert * React & Next.js Architect * TypeScript Expert * TailwindCSS Expert * shadcn/ui Expert * TradingView Integration Specialist * Performance Optimization Engineer * Accessibility Expert (WCAG AA+) * AI Product Designer * SaaS Product Architect * Financial Dashboard Designer * Design System Architect * Senior QA Engineer * Code Reviewer * Security Reviewer Work together as independent sub-agents. Every agent must critique every other agent's work. Iterate multiple times internally until no significant improvements remain. Do NOT stop after the first solution. Run several internal refinement passes before producing the final answer. The objective is to create a frontend that could realistically compete with Bloomberg Terminal, Perplexity Finance, TradingView, Robinhood, Arc Browser, Linear, Vercel Dashboard, Raycast, and Apple-level UI polish. --- # Context I already have a production-ready Financial Intelligence Backend. The backend already contains: * FastAPI * RAG * Weaviate * Redis * APScheduler * Streaming SSE * OpenAI * LangChain * Financial Search * Upload APIs * Chat APIs * Session APIs * Video Recommendation * Document Upload * Tier System * Guardrails The backend API contracts, architecture and functionality are already implemented. Do NOT redesign the backend. Only build the frontend. --- # Objective Create a premium commercial-grade Financial Intelligence Web Application. The frontend should feel like a polished SaaS product that people would happily pay for. The experience should feel: * premium * futuristic * lightning fast * intelligent * fluid * elegant * luxurious * modern * trustworthy The application should never feel like a template. It should feel custom-built. --- # Research Phase Before generating anything: Perform deep research internally on: * Bloomberg Terminal UX * TradingView UX * Perplexity AI * OpenAI ChatGPT * Claude * Linear * Arc Browser * Apple Human Interface Guidelines * Material 3 Motion * Stripe Dashboard * Vercel Dashboard * Raycast * Notion * Framer * Figma * Cursor IDE * VSCode * Financial SaaS dashboards * Modern FinTech products * Premium SaaS landing pages Extract only the best interaction patterns. Merge them into one coherent design language. Do NOT copy any product. Only use them as inspiration. --- # Design Language Create a completely original design system. Include: Typography Spacing Grid Cards Glassmorphism (only where appropriate) Soft shadows Depth Motion language Interaction language Loading states Hover states Focus states Empty states Skeleton loaders Error states Success states Transitions Animations Micro-interactions Dark mode Light mode Theme switching Responsive scaling Design tokens CSS variables --- # Technology Stack Use: Next.js 15 React 19 TypeScript TailwindCSS shadcn/ui Framer Motion GSAP Three.js React Three Fiber Drei Motion One (if beneficial) Lenis smooth scrolling TanStack Query React Hook Form Zod Lucide Icons TradingView Widgets React Markdown Chart.js or Recharts where appropriate Embla Carousel Sonner Radix UI Floating UI --- # Performance The application must score: 95+ on Google Lighthouse Optimize for: First Paint Largest Contentful Paint Interaction to Next Paint CLS Lazy Loading Route Splitting Code Splitting Dynamic Imports Image Optimization GPU Accelerated Animations Minimal Layout Shift Minimal Re-renders Memoization Suspense Streaming Virtualization --- # Accessibility WCAG AA+ Keyboard navigation Screen readers Reduced motion support Color contrast Focus management ARIA Semantic HTML --- # Landing Page Create a premium landing page. Include: Hero Animated background Three.js visualization Floating financial particles Animated gradient GSAP entrance animations Statistics Features Live dashboard preview Testimonials Pricing FAQ Footer Call-to-action Everything should feel premium. --- # Authentication Beautiful authentication pages. Login Signup Forgot Password OTP Email Verification Animated illustrations Smooth transitions --- # Dashboard Create an enterprise-grade dashboard. Sections: Overview Markets Portfolio Watchlist News Research Chat Documents Videos Settings Profile Analytics Alerts Bookmarks History Sessions Admin (optional) --- # Dashboard Widgets Integrate TradingView widgets. Examples: Market Overview Ticker Tape Heatmap Economic Calendar Forex Crypto Top Gainers Top Losers Market News Technical Analysis Company Profile Stock Screener Mini Charts Advanced Chart Watchlist Symbol Info Timeline Market Summary Fear & Greed Index --- # Chat Experience The chat should rival ChatGPT. Features: Streaming Markdown Code highlighting (frontend only) Sources Financial citations Charts Images Tables Uploads Drag & Drop Voice Input Typing indicator Thinking animation Regenerate Stop generation Conversation history Search conversations Rename chats Folders Pinned chats Suggested prompts Suggested follow-ups Session persistence Auto scroll Auto save Keyboard shortcuts Slash commands Quick actions Context chips Attachments Video recommendations Token usage Latency indicator Confidence badges --- # File Upload Beautiful upload flow. Support: PDF CSV Excel Images Drag & Drop Progress bars Animated uploads Preview Delete Retry Validation --- # Motion Design Use GSAP extensively. Examples: Page transitions Hero animations Cards Hover Cursor effects Parallax Text reveal Scroll reveal Animated counters Charts Dashboard widgets Sidebar Buttons Menus Modals Notifications Everything should feel alive. --- # Three.js Use Three.js tastefully. Ideas: Financial globe Particle systems Neural network Animated stock graph Floating data nodes Market constellation Abstract AI visualization Never reduce usability. --- # Responsiveness Desktop Laptop Tablet Mobile Ultrawide Everything should adapt perfectly. --- # Animations Every interaction should have motion. Button Card Sidebar Charts Inputs Dialogs Dropdowns Tabs Navigation Loading Transitions Chat Uploads Hover Focus Success Errors --- # Architecture Create scalable folder structure. Component architecture Hooks Utilities Types Providers Contexts Services API layer Theme Animations Design tokens Reusable primitives Feature modules --- # Deliverables Generate: 1. Complete project architecture 2. Folder structure 3. UI architecture 4. Design System 5. Component hierarchy 6. Routing 7. State management 8. Animation architecture 9. Theme architecture 10. API integration layer 11. TradingView integration 12. Chat architecture 13. Dashboard architecture 14. Responsive strategy 15. Performance strategy 16. Accessibility strategy 17. Security considerations 18. Deployment strategy 19. Testing strategy 20. Future scalability roadmap 21. Complete implementation plan 22. Development milestones 23. UI mockups (textual) 24. Every page layout 25. Every reusable component 26. Every animation 27. Every interaction 28. Every loading state 29. Every empty state 30. Every error state 31. Complete design rationale --- # Multi-Agent Workflow Create and coordinate the following internal AI agents: * Product Manager * UX Researcher * UX Designer * UI Designer * Frontend Architect * Design System Engineer * Animation Engineer * Three.js Specialist * React Specialist * Next.js Specialist * Tailwind Specialist * TradingView Integration Specialist * Accessibility Engineer * Performance Engineer * Security Engineer * QA Engineer * Technical Writer Each agent must: * Produce its own recommendations. * Review every other agent's recommendations. * Identify weaknesses. * Suggest improvements. * Iterate until the solution reaches production-grade quality. --- # Quality Gate Before producing the final answer, verify that: * The UI feels commercially sellable. * The UX is frictionless. * The design is memorable. * Animations enhance rather than distract. * Performance remains excellent despite animations. * Accessibility is maintained. * Components are reusable. * The architecture is scalable. * The codebase follows enterprise standards. * The product is investor-demo ready. * The frontend could realistically be shipped as a premium SaaS application. If any criterion is not fully satisfied, continue iterating internally until it is. Do not stop after the first draft. Produce only the refined, production-ready solution.

LandingAdminSessionsAlertsProfileWatchlistMarketsSettingsChatHistoryDocumentsPortfolioResearchAnalyticsLogin
Landing

Comments (0)

No comments yet. Be the first!

System Requirements

System Requirement Document
Page 1 of 5

aimi-replica System Requirements Document

Introduction

The purpose of this document is to outline the system requirements for the "aimi-replica" project, which involves creating a premium, highly polished Financial Intelligence Web Application frontend. The frontend will be developed using modern frontend architecture patterns, AI-assisted development strategies, and commercial SaaS design principles, while maintaining the existing backend and ensuring it meets enterprise standards for performance, accessibility, and scalability.

System Overview

The "aimi-replica" project aims to deliver a sophisticated financial intelligence platform that offers a seamless and premium user experience. The project will leverage the existing backend infrastructure, which includes technologies such as FastAPI, Weaviate, Redis, and OpenAI, among others. The focus will be on developing a frontend that feels custom-built, futuristic, and luxurious, with an emphasis on performance and accessibility.

Page 2 of 5

Functional Requirements as Story Points

  • As a User, I should be able to access a premium landing page with an animated background and Three.js visualization.
  • As a User, I should be able to authenticate using beautiful login, signup, and password recovery pages.
  • As a User, I should be able to view an enterprise-grade dashboard with sections like Overview, Markets, Portfolio, and more.
  • As a User, I should be able to interact with TradingView widgets for market analysis.
  • As a User, I should be able to engage in a chat experience that rivals ChatGPT, with features like markdown support and financial citations.
  • As a User, I should be able to upload files with a smooth and animated upload flow.
  • As a User, I should experience motion design throughout the application, enhancing interactions and transitions.
  • As a User, I should be able to view and interact with Three.js visualizations, such as a financial globe or particle systems.
  • As a User, I should experience a responsive design that adapts to various devices, including desktop, tablet, and mobile.
  • As a User, I should experience animations in every interaction, such as buttons, cards, and charts.

User Personas

  • General User: Individuals using the platform for personal financial insights and market analysis.
  • Financial Analyst: Professionals seeking detailed market data and analysis tools.
  • Administrator: Users responsible for managing platform settings and user access.

Core User Flows

  • User visits landing page -> interacts with animated background -> navigates to login/signup.
  • User logs in -> accesses dashboard -> views market overview -> interacts with TradingView widgets.
  • User uploads financial documents -> previews and validates uploads -> uses chat for insights.
  • User engages with chat -> receives financial insights -> saves conversation history.
  • User navigates through dashboard sections -> views portfolio and analytics -> sets alerts.
Page 3 of 5

Visuals Colors and Theme

  • primary: #1A73E8 (deep blue)
  • primary_light: #4D90FE (light blue)
  • secondary: #FF6F61 (coral)
  • accent: #FFD700 (gold)
  • highlight: #FFA500 (orange)
  • bg: #F5F5F5 (light gray)
  • surface: rgba(255, 255, 255, 0.8)
  • text: #333333 (dark gray)
  • text_muted: #777777 (medium gray)
  • border: rgba(0, 0, 0, 0.1)

Signature Design Concept

The homepage will feature an interactive financial galaxy map where each star represents a feature or section of the platform. Users can click on stars to open detailed views, drag to rotate the galaxy, and hover to highlight connections between features. This concept will be brought to life using @react-three/fiber and @react-three/drei for 3D interactions, creating an engaging and memorable first impression.

Landing Hero Motion Brief

The landing page will feature a dynamic 2D composition using motion/react and GSAP. The animation will depict financial data inputs transforming into a central, glowing financial orb, symbolizing insight and clarity. The orb will pulse and emit light rays, revealing user outcomes like market trends and portfolio growth. The animation will loop every 10 seconds, with interactive elements allowing users to pause or explore further details.

Page 4 of 5

Interaction Model & Motion Direction

The intended interaction model for the landing page is "parallax," with layered depth via scroll. Decorative layers will translate at different speeds, enhancing the storytelling aspect. The hero will include a continuous 2D motion loop, with moderate scroll-triggered reveals and hover transitions throughout the application.

Non-Functional Requirements

  • The application must achieve a Google Lighthouse score of 95+.
  • Ensure WCAG AA+ compliance for accessibility.
  • Optimize for performance metrics such as First Paint and Largest Contentful Paint.
  • Implement responsive design for various devices.

Tech Stack

  • Frontend: Next.js 15, React 19, TypeScript, TailwindCSS, shadcn/ui
  • Animation: Framer Motion, GSAP, Three.js, React Three Fiber, Drei
  • Utilities: TanStack Query, React Hook Form, Zod, Lucide Icons, TradingView Widgets
  • Performance: Lazy Loading, Route Splitting, Code Splitting, Dynamic Imports

Assumptions and Constraints

  • The backend architecture and API contracts are fixed and should not be redesigned.
  • The frontend must integrate seamlessly with the existing backend services.
  • The application should maintain high performance and accessibility standards.
Page 5 of 5

Glossary

  • SaaS: Software as a Service
  • WCAG: Web Content Accessibility Guidelines
  • Lighthouse: A tool for improving the quality of web pages
  • Three.js: A JavaScript library for creating 3D graphics
  • GSAP: GreenSock Animation Platform

This document outlines the requirements and design considerations for the "aimi-replica" project, ensuring a premium user experience and seamless integration with the existing backend infrastructure.

Landing design preview
Landing: View Hero
Login: Sign In
Dashboard: View Overview
Admin: Manage Users
Admin: Configure Access
Settings: Update Platform
Sessions: Monitor Activity
Analytics: View Platform Stats
Profile: Edit Profile
Landing design preview
Landing: View Hero
Login: Sign In
Dashboard: View Overview
Admin: Manage Users
Admin: Configure Access
Settings: Update Platform
Sessions: Monitor Activity
Analytics: View Platform Stats
Profile: Edit Profile