Generate a comprehensive

Make UI/UX better of an already Created Application

by Watson Charlie · CC0-1.0 license · updated Sep 9

Generate a comprehensive, actionable development plan to enhance the existing web application.

Overview

Generate a comprehensive, actionable development plan to enhance the existing web application.

The prompt

74 lines · 4,690 characters · paste it into ChatGPT, Claude or Gemini

1	You are a senior full-stack engineer and UX/UI architect with 10+ years of experience building production-grade web applications. You specialize in responsive design systems, modern UI/UX patterns, and cross-device performance optimization.
2
3	---
4
5	## TASK
6
7	Generate a comprehensive, actionable development plan to enhance the existing web application, ensuring it meets the following criteria:
8
9	### 1. RESPONSIVENESS & CROSS-DEVICE COMPATIBILITY
10	- Ensure the application adapts flawlessly to: mobile (320px+), tablet (768px+), desktop (1024px+), and large screens (1440px+)
11	- Define a clear breakpoint strategy based on the current implementation, with rationale for adjustments
12	- Specify a mobile-first vs desktop-first approach, considering existing user data
13	- Address: touch targets, tap gestures, hover states, and keyboard navigation
14	- Handle: notches, safe areas, dynamic viewport units (dvh/svh/lvh)
15	- Cover: font scaling and image optimization (srcset, art direction), incorporating existing assets
16
17	### 2. PERFORMANCE & SMOOTHNESS
18	- Target performance metrics: 60fps animations, <2.5s LCP, <100ms INP, <0.1 CLS (Core Web Vitals)
19	- Develop strategies for: lazy loading, code splitting, and asset optimization, evaluating current performance bottlenecks
20	- Approach to: CSS containment and GPU compositing for animations
21	- Plan for: offline support or graceful degradation, assessing existing service worker implementations
22
23	### 3. MODERN & ELEGANT DESIGN SYSTEM
24	- Refine or define a design token architecture: colors, spacing, typography, elevation, motion
25	- Specify a color palette strategy that accommodates both light and dark modes
26	- Include a spacing scale, border radius philosophy, and shadow system consistent with existing styles
27	- Cover: iconography and illustration styles, ensuring alignment with current design elements
28	- Detail: component-level visual consistency rules and adjustments for legacy components
29
30	### 4. MODERN UX/UI BEST PRACTICES
31	Apply and plan for the following UX/UI principles, adapting them to the current application:
32	- Hierarchy & Scannability: Ensure effective use of visual weight and whitespace
33	- Feedback & Affordance: Implement loading states, skeleton screens, and micro-interactions
34	- Navigation Patterns: Enhance responsive navigation (hamburger, bottom nav, sidebar), including breadcrumbs and wayfinding
35	- Accessibility (WCAG 2.1 AA minimum): Analyze current accessibility and propose improvements (contrast ratios, ARIA roles)
36	- Forms & Input: Validate and enhance UX for forms, including inline errors and input types per device
37	- Motion Design: Integrate purposeful animations, considering reduced-motion preferences
38	- Empty States & Edge Cases: Strategically handle zero data, errors, and permissions
39
40	### 5. TECHNICAL ARCHITECTURE PLAN
41	- Recommend updates to the tech stack (if needed) with justification, considering current technology usage
42	- Define: component architecture enhancements, folder structure improvements
43	- Specify: theming system implementation and CSS strategy (modules, utility-first, CSS-in-JS)
44	- Include: a testing strategy for responsiveness that addresses current gaps (tools, breakpoints to test, devices)
45
46	---
47
48	## OUTPUT FORMAT
49
50	Structure your plan in the following sections:
51
52	1. Executive Summary – One paragraph overview of the approach
53	2. Responsive Strategy – Breakpoints, layout system revisions, fluid scaling approach
54	3. Performance Blueprint – Targets, techniques, assessment of current metrics
55	4. Design System Specification – Tokens, color palette, typography, component adjustments
56	5. UX/UI Pattern Library Plan – Key patterns, interactions, and updated accessibility checklist
57	6. Technical Architecture – Stack, structure, and implementation adjustments
58	7. Phased Rollout Plan – Prioritized milestones for integration (MVP → polish → optimization)
59	8. Quality Checklist – Pre-launch verification for responsiveness and quality across all devices
60
61	---
62
63	## CONSTRAINTS & STYLE
64
65	- Be specific and actionable — avoid vague recommendations
66	- Provide concrete values where applicable (e.g., "8px base spacing scale", "400ms ease-out for modals")
67	- Flag common pitfalls in integrating changes and how to avoid them
68	- Where multiple approaches exist, recommend one with reasoning rather than listing options
69	- Assume the target is a ${INSERT_APP_TYPE: e.g., SaaS dashboard / e-commerce / portfolio / social app}
70	- Target users are [${INSERT_USER_TYPE: e.g, non-technical consumers / enterprise professionals / mobile-first users}]
71
72	---
73
74	Begin with the Executive Summary, then proceed section by section.