Home · Skills · Design · Prompt
Make UI/UX better of an already Created Application
Generate a comprehensive, actionable development plan to enhance the existing web application.
No install, no account.
Paste into Claude, ChatGPT or Cursor.
Read the source74 lines
| 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 | **Executive Summary** – One paragraph overview of the approach |
| 53 | **Responsive Strategy** – Breakpoints, layout system revisions, fluid scaling approach |
| 54 | **Performance Blueprint** – Targets, techniques, assessment of current metrics |
| 55 | **Design System Specification** – Tokens, color palette, typography, component adjustments |
| 56 | **UX/UI Pattern Library Plan** – Key patterns, interactions, and updated accessibility checklist |
| 57 | **Technical Architecture** – Stack, structure, and implementation adjustments |
| 58 | **Phased Rollout Plan** – Prioritized milestones for integration (MVP → polish → optimization) |
| 59 | **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. |
Alternatives
Also in User flowsArchitecture & UI/UX AuditIt asks an AI to assume the persona of a Senior Frontend Engineer & Product Reviewer to perform a high-level critique of a Next.js (App Router) project. Instead of writing code, the prompt focuses on evaluating the architecture (folder structure, scalability), UI/UX (hierarchy, consistency), and design system (component reuse) of a developer community platform to identify anti-patterns and suggest high-impact improvements.UX Heuristics FrameworkPaste your page and tell us the one thing you want visitors to do. Get back a plain-language list of what's confusing and exactly how to fix each spot.Brainstorming Ideas Into DesignsYou MUST use this before any creative work - creating features, building components, adding functionality, or modifying behavior. Explores user intent, requirements and design before implementation.Frontend DesignGuidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.