UI_REDESIGN_AGENT_PROMPT.md

Improve the UI of this repo while preserving the current product scope and functionality.

Assume you have never seen this project before and have no prior knowledge of the repo, source code, or implementation details. Inspect the codebase first and verify the current state before making decisions.

Project context:

• This is U2INVEST, a Flask-based single-page web app with three pillars:
  • Knowledge Academy
  • Trading Lab
  • U2CHAT
• This should also be treated as a commercial business website, not only an in-app product UI
• Main backend routes are in web_app.py
• The current frontend is mostly in templates/index.html
• The app already uses Tailwind via CDN, D3.js, ECharts, Bootstrap Icons, and custom inline CSS/JS
• The product already has working interactions for:
  • academy modules and lesson overlay
  • comments/replies
  • roadmap view and custom roadmap editing
  • lab stock pool, chart, and trading actions
  • AI chat, sessions, and inline chart rendering

Frontend architecture requirement:

• Do not continue the main UI as a large Flask-template frontend
• Rebuild the frontend in JavaScript or TypeScript
• TypeScript is preferred
• Preferred stack is React + TypeScript, Next.js + TypeScript, or Vite + React + TypeScript
• Flask may remain as backend/API infrastructure if useful, but should not remain the primary frontend UI architecture

Primary design objective:

Redesign the UI into a calm, premium, minimalist product language influenced by Notion, Manus, and Apple:

• Notion: clarity, restraint, content-first layout, excellent spacing
• Manus: focused workspace feel, structured productivity surfaces
• Apple: polish, hierarchy, motion discipline, premium simplicity

Do not make it look like a generic AI template or a flashy fintech dashboard. It should feel intentional, editorial, and highly usable.

What I want from the redesign:

• Cleaner information hierarchy
• Stronger spacing rhythm and typography
• More premium visual consistency across all three product areas
• A public-facing business website layer that feels commercially credible
• Better desktop and mobile responsiveness
• Better empty, loading, hover, focus, and success states
• Better visual transitions without over-animation
• A simpler and more elegant experience while keeping the app feature-rich

Hard constraints:

• Preserve all current product areas and flows
• Do not remove Academy, Trading Lab, U2CHAT, roadmap mode, comments, beginner guide, or chat sessions
• Add commercial website capabilities without flattening the product into a generic landing page
• Keep the existing Flask routes and API contracts unless a very small frontend-safe improvement is required
• Preserve D3 roadmap and ECharts chart functionality
• Preserve the existing logo/brand identity, but refine how the brand is used
• Use CSS variables for color, spacing, radii, and shadow system
• Avoid purple-heavy gradients, overuse of glassmorphism, neon fintech visuals, and "AI slop" aesthetics
• Keep the UI minimal, but not empty or sterile

Stylistic direction:

• Base palette: warm white / soft paper / graphite / muted gray
• Accent palette: disciplined use of the existing blue brand color, softened and modernized
• Typography: more intentional than the current default; choose a refined font pairing if appropriate
• Surfaces: layered but subtle, with soft borders and almost no heavy contrast blocks
• Motion: gentle page transitions, overlay transitions, chart panel reveals, hover elevation only where useful
• Components: rounded, but not cartoonish; closer to Apple/Notion restraint than startup landing-page style

Product-specific goals:

1. Landing page

• Make the first screen feel premium and immediately understandable
• Present the three pillars as elegant product choices, not oversized marketing cards
• Make the landing experience work as a real commercial homepage
• Improve the top nav and hero composition
• Add a proper footer, business contact area, social links, and legal link area
• Add trust-building and conversion sections such as product overview, proof, FAQ, and CTA structure

2. Knowledge Academy

• Make the course grid feel more curated and less visually noisy
• Improve the lesson overlay so it feels like a polished reading + video workspace
• Improve comments UI to feel cleaner and more credible
• Redesign the roadmap controls and roadmap container to feel more like a premium knowledge canvas
• Keep both "Designed By U2INVEST" and "You to Design" modes

3. Trading Lab

• Move away from a cramped dashboard look
• Make the lab feel like a calm professional workspace
• Improve stock list readability, chart prominence, and order ticket clarity
• Improve the beginner guide so it feels educational and beautifully paced
• Make stats, holdings, and history feel coherent rather than bolted on

4. U2CHAT

• Make the chat area feel like a premium research assistant workspace
• Improve the sidebar, session list, input area, quick stock selection, and message presentation
• Improve embedded chart presentation inside messages
• Make assistant responses easier to scan

5. Commercial website layer

• Add or redesign the public-facing business website components needed for a professional commercial product
• Include at minimum:
  • contact pathway
  • social links
  • about/company presence
  • trust/proof sections
  • CTA hierarchy
  • support/help or inquiry path
  • legal/footer structure
• If full multi-page implementation is too large for one pass, create a strong homepage + footer + contact/demo structure that clearly scaffolds the commercial experience

Commercial website expectations:

• Homepage should sell the product clearly
• Add visible CTAs such as Get Started, Book Demo, Contact, or Explore Product
• Add a professional footer with:
  • email/contact
  • social links
  • legal links
  • copyright/company info
• Add trust sections such as:
  • product explanation
  • why U2INVEST
  • proof/testimonial/case-study placeholder areas
  • finance/disclaimer trust language where appropriate
• Add public information surfaces for:
  • About
  • Contact
  • FAQ
  • Pricing or pricing inquiry
  • Legal/disclaimer links
• The result should feel like a product a real customer could discover, evaluate, and contact

UX improvements that should be included if they can be done safely:

• Implement or repair any obviously broken front-end-only UX gaps you encounter
• In particular, check the Trading Lab for:
  • missing changeTimeRange() behavior
  • unrendered history-list
  • unupdated return-rate
  • any fragile event handling in stock selection
• Keep those fixes small and directly related to the user experience

Implementation expectations:

• You may refactor templates/index.html heavily if needed
• If it improves maintainability, extract styles and scripts into static/ assets
• Keep the implementation coherent and production-minded
• Preserve existing behaviors while improving visual structure
• Add concise comments only where the logic is genuinely hard to follow

Accessibility and responsiveness:

• Ensure good contrast and readable type sizes
• Ensure keyboard-focus states are visible
• Ensure mobile layouts are deliberate, not just squashed desktop layouts
• Ensure major overlays, controls, and charts remain usable on smaller screens

Deliverables:

• Updated UI implementation
• A short summary of the design system you introduced
• A short list of any UX bugs you fixed while redesigning
• No unnecessary backend rewrites

Before coding, inspect:

• templates/index.html
• web_app.py
• CURRENT_PROJECT_PRD.md
• COMMERCIAL_WEBSITE_SITEMAP_AND_PAGE_SPEC.md

Use CURRENT_PROJECT_PRD.md as the source of truth for:

• full current feature inventory
• full function inventory
• visible-but-partial or broken UI controls
• UI rebuild requirements
• advancement opportunities that can influence the redesign structure
• commercial website requirements and trust/conversion expectations
• sitemap, page-by-page website structure, CTA rules, footer requirements, and lead funnel design

Outcome standard:

The final UI should feel like a polished minimalist product for thoughtful investors and a credible commercial business website, not a demo page. It should be simpler, calmer, more premium, easier to use, and more trustworthy, while preserving the breadth of the current product.