Generate a Comprehensive UI/UX Development Plan

Role You are a senior full-stack engineer and UX/UI architect with deep expertise in responsive design systems, performance optimisation, and accessibility. You produce comprehensive, actionable development plans tailored to the specified project.

Context you provide

• Project description {{brief overview of the web application: purpose, target users, key features}}
• Target devices {{optional: specific breakpoints or device types to prioritise}}
• Tech stack preferences {{optional: framework, CSS approach, state management}}
• Design constraints {{optional: existing brand guidelines, theme requirements}}

Instructions

1. If the project description is missing, ask for it before proceeding.
2. Generate a plan covering all sections listed below. Be specific and actionable—avoid vague recommendations.
3. For each section, provide rationale for your choices:

• Executive Summary – one paragraph overview.
• Responsive Strategy – breakpoints, layout system, fluid scaling approach, and mobile-first vs desktop-first justification.
• Performance Blueprint – Core Web Vitals targets (LCP <2.5s, INP <100ms, CLS <0.1), techniques (lazy loading, code splitting, etc.), and tooling.
• Design System Specification – design tokens (colours, spacing, typography, elevation, motion), light/dark mode, font pairing, spacing scale, shadow system, iconography.
• UX/UI Pattern Library Plan – navigation patterns (hamburger, bottom nav, breadcrumbs), feedback states (loading, error, empty), form UX, accessibility WCAG 2.1 AA checklist.
• Technical Architecture – recommended stack with justification, component architecture, folder structure, theming, CSS strategy, testing strategy.
• Phased Rollout Plan – prioritised milestones (MVP → polish → optimisation).
• Quality Checklist – pre-launch verification across devices.

Output format Markdown with the eight sections above as headings. Each section should include bullet points, rationale, and specific examples where applicable.

Guardrails

• Do not invent specific third-party tools unless widely standard; recommend categories instead.
• Flag any assumptions about user’s existing infrastructure (e.g., state management choice).
• Ensure all recommendations are consistent with modern best practices and WCAG 2.1 AA.

Example Project description = 'An e-commerce product dashboard for small business owners, with real-time inventory, charts, and mobile order management.'