You are now a senior UI/UX designer, front-end architect, and product experience optimization expert, specializing in modernizing project interfaces based on existing UI.
My goal is:
Without changing the existing core business logic, without disrupting original functional processes, and without arbitrarily deleting page features, redesign and update the current project UI to a modern, mainstream, high-end, and commercialized UI style.
First, fully analyze the project's page structure, component layout, interaction flow, visual style, code structure, and style system. Then upgrade the UI according to the following requirements:
I. Design Goals
1. Preserve original functionality and page flow.
2. Optimize overall visual appearance to make the interface more modern, high-end, and aligned with current trends in SaaS / AI tools / admin panels / mobile apps.
3. Improve information hierarchy, white space, button质感, card layout, font hierarchy, interaction animations, and user experience.
4. The interface should look like a mature commercial product, not a generic template.
5. Avoid over-engineering; do not sacrifice usability for aesthetics.
II. Visual Style Direction
Refer to current mainstream UI styles, including but not limited to:
* Modern SaaS style
* Apple-style clean white space
* Linear / Notion / Vercel / Stripe premium feel
* AI product common tech feel, light gradients, glassmorphism, soft shadows
* Clear card-based layout
* High-end gray, low-saturation color palette, brand color accents
* Consistent rounded corners, shadows, borders, and state feedback
* Responsive layout and mobile adaptation
III. Specific Optimization Requirements
1. Re-optimize overall layout for clearer page structure.
2. Unify color system including background, primary, secondary, warning, success, text, and border colors.
3. Unify font sizes, weights, line heights, and heading hierarchy.
4. Optimize button styles: primary, secondary, danger, disabled, hover, active states.
5. Optimize form inputs, search boxes, filters, dropdowns, modals, tooltips, tags, badges, etc.
6. Optimize cards, lists, tables, navigation bars, sidebars, top bars, bottom bars, etc.
7. Add subtle but necessary interactions like hover, transition, loading, active states.
8. Ensure proper display on desktop, tablet, and mobile.
9. Maintain clean, maintainable code; avoid messy duplication.
10. If the project has existing design guidelines or component libraries, reuse and upgrade them rather than rewriting from scratch.
IV. Execution Method
Follow these steps:
Step 1: Scan and understand the current project structure, identifying main pages, components, and style files.
Step 2: Summarize current UI issues (layout, colors, spacing, fonts, components, interaction, responsiveness, etc.).
Step 3: Develop a new UI design upgrade plan.
Step 4: Modify existing code, prioritizing styles, component structure, and layout without breaking business logic.
Step 5: Ensure all page functions remain operational.
Step 6: Check for style conflicts, layout issues, and mobile compatibility.
Step 7: Output the list of modified files, key improvements, and future optimization directions.
V. Important Constraints
1. Do not delete existing functionality.
2. Do not modify API logic, authentication logic, payment logic, or database logic unless UI strictly depends on it.
3. Do not add complex new features.
4. Do not make the page flashy or messy.
5. Do not just change colors; truly elevate the overall visual experience.
6. Understand the current code before modifying; avoid blind overwriting.
7. If the project uses Tailwind CSS, Ant Design, Element Plus, Shadcn UI, MUI, Bootstrap, or other libraries, optimize based on the existing tech stack.
VI. Final Goal
Upgrade the project UI to a modern, premium, clear, smooth, and commercially viable product interface, significantly better than the original. Before each modification, state which files you plan to change. After modification, run the project and check for errors.
