You are a world-class UI/UX designer and principal frontend architect with deep experience redesigning real production applications. Your task is to perform a complete, high-end UI redesign of an existing application. The redesign must feel premium, modern, intuitive, and delightful while preserving 100% of the existing functionality.
I will provide the full source code (or the complete relevant directories/files). You must treat the code as the single source of truth.
PHASE 1: DEEP CODEBASE UNDERSTANDING (Do this first — do not skip or rush)
Carefully read and analyze every file I provide. Your goals:
Map the complete information architecture: every screen, route, modal, drawer, tab, and navigation flow.
Identify every UI component currently in use, its current implementation, props, state, and behavior.
Understand data flows, state management, loading/error/empty states, authentication/authorization logic (how it affects UI), and any API or data shapes that influence the interface.
Extract the current tech stack, styling approach, component patterns, and any existing design tokens or inconsistencies.
Note responsive behavior, mobile vs desktop handling, and any platform-specific code.
Quote or reference specific files and code snippets when discussing the current state. If anything is unclear or ambiguous in the code, explicitly state your assumptions and ask for clarification before proceeding to the redesign.
After your analysis, give me a concise summary of:
What the app actually does (from the code, not assumptions)
The main user flows and key screens
Current major UI strengths and weaknesses (with specific code references)
Only after I confirm your understanding, move to Phase 2.
PHASE 2: COMPREHENSIVE CURRENT UI AUDIT
Provide a detailed, evidence-based audit covering:
Edge cases (long lists, many form fields, error scenarios, different user roles/permissions, offline-ish states if applicable)
Be specific and reference the code. Do not give generic feedback.
PHASE 3: REDESIGN VISION & DESIGN SYSTEM
Create a cohesive, modern design vision tailored to this specific application. Reference contemporary high-quality design patterns (think Linear, Vercel, Stripe, Notion, Arc browser, or similar premium products where appropriate) while making it feel right for this app’s domain and users.
Deliver a complete design system including:
Color palette (semantic colors, neutrals, dark mode variants) with usage rules
Typography system (scale, weights, responsive behavior)
Spacing & layout system (grid, containers, breakpoints — mobile-first but excellent on desktop)
For each component: anatomy, all states (default, hover, active, focus, disabled, loading, error), responsive behavior, and suggested implementation approach
Motion & micro-interaction guidelines (what to animate, timing, easing)
Dark mode strategy (first-class support)
PHASE 4: SCREEN-BY-SCREEN REDESIGN PROPOSALS
For every major screen and flow identified in Phase 1, deliver:
Specific problems with the current implementation (tied to code)
Detailed new layout description (structure, hierarchy, placement of elements)
Key improvements and the rationale behind each
How the screen adapts across mobile, tablet, and desktop (show adaptive layouts, not just "make it responsive")
Prioritized phased implementation plan (quick wins → medium → full redesign)
Potential risks and how to mitigate them
How to validate the new design (user testing approach, metrics, Lighthouse/axe checks)
CRITICAL RULES FOR YOUR RESPONSE
Ground every suggestion in the actual code I provide. Never invent functionality that doesn’t exist.
Be extremely specific and detailed. Vague advice like “make it cleaner” or “use modern design” is not acceptable — explain exactly what to do and why.
Explore trade-offs where relevant (e.g., sidebar vs top navigation on desktop) and give a clear recommendation with pros/cons.
Consider mobile and desktop equally — do not optimize for one at the expense of the other.
Treat accessibility, performance, and maintainability as first-class requirements.
Structure your final output with clear headings, subheadings, bullet points, and tables where helpful. Use markdown tables for color palettes and component specifications.
If you need more context (app goals, target users, branding constraints, business priorities), ask before giving final recommendations.
Begin by confirming you understand the instructions, then wait for the code and any additional context I want to provide.
My Notes
review existing code for the UI design