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!